*{font-family:"Inter",sans-serif;font-feature-settings:"cv02","cv03","cv04","cv11"}

:root{--bg-primary:#fff;--bg-secondary:#f8fafc;--bg-card:#f1f5f9;--bg-card-strong:#ffffff;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-brand:#ea580c;--border-color:rgba(15,23,42,.08);--border-card:rgba(15,23,42,.08);--glow-brand:rgba(249,115,22,.08);--glow-brand-strong:rgba(249,115,22,.15);--nav-bg:rgba(255,255,255,.82);--nav-border:rgba(15,23,42,.06);--grid-line:rgba(249,115,22,.035);--shadow-card:0 1px 3px rgba(0,0,0,.06);--partner-bg:rgba(249,115,22,.04);--partner-border:rgba(249,115,22,.08);--selection-bg:rgba(249,115,22,.15);--selection-text:#9a3412}

.dark,html[data-theme="dark"]{--bg-primary:#050508;--bg-secondary:#0a0a12;--bg-card:rgba(255,255,255,.03);--bg-card-strong:rgba(255,255,255,.045);--text-primary:#fff;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--text-brand:#fb923c;--border-color:rgba(255,255,255,.07);--border-card:rgba(255,255,255,.09);--glow-brand:rgba(249,115,22,.06);--glow-brand-strong:rgba(249,115,22,.12);--nav-bg:rgba(5,5,8,.86);--nav-border:rgba(255,255,255,.05);--grid-line:rgba(249,115,22,.018);--shadow-card:0 25px 50px -12px rgba(0,0,0,.35);--partner-bg:rgba(255,255,255,.025);--partner-border:rgba(255,255,255,.07);--selection-bg:rgba(249,115,22,.3);--selection-text:#fed7aa}

::selection{background:var(--selection-bg);color:var(--selection-text)}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:#3f3f46;border-radius:3px}

body{background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}

#loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .45s;background:var(--bg-primary)}
#loader.hidden{opacity:0;pointer-events:none}
@keyframes loader-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.72}}
.loader-logo{animation:loader-pulse 1.5s ease-in-out infinite}
@keyframes scan{0%{left:-20%}100%{left:120%}}
.scan-line{position:absolute;top:0;width:20%;height:100%;background:linear-gradient(90deg,transparent,rgba(249,115,22,.12),transparent);animation:scan 3s linear infinite}

#scrollProgress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#f97316,#fb923c);z-index:100;transition:width .1s linear;width:0}
.grid-bg{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:60px 60px}
.gradient-text{background:linear-gradient(to bottom,var(--text-primary),var(--text-primary),var(--text-muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-orange{background:linear-gradient(135deg,#f97316,#fb923c,#fdba74);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.reveal{opacity:0;transform:translateY(24px);filter:blur(8px);transition:all .75s cubic-bezier(.16,1,.3,1)}
.reveal.active,.reveal.show{opacity:1;transform:translateY(0);filter:blur(0)}
.nav-scrolled{border-bottom-color:var(--nav-border)!important;background:var(--nav-bg)!important}
.mobile-menu{transform:translateX(100%);transition:transform .3s}
.mobile-menu.open{transform:translateX(0)}
.lang-btn.active{background:rgba(249,115,22,.15);color:#f97316!important}
.theme-toggle{position:relative;width:52px;height:28px;border-radius:14px;cursor:pointer;transition:all .3s}
.theme-toggle .toggle-dot{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;transition:all .3s}
.dark .theme-toggle .toggle-dot,html[data-theme="dark"] .theme-toggle .toggle-dot{transform:translateX(24px)}
.logo-nav{transition:all .3s}
.logo-nav:hover{filter:drop-shadow(0 0 12px rgba(249,115,22,.45))}
.hero-orb{background:var(--glow-brand-strong);filter:blur(145px)}
.toc-panel{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow:auto;background:var(--bg-card);border:1px solid var(--border-card);box-shadow:var(--shadow-card)}
.toc-link{display:block;padding:10px 12px;border-radius:12px;color:var(--text-secondary);font-size:13px;line-height:1.35;transition:all .2s;border:1px solid transparent}
.toc-link:hover{color:var(--text-brand);background:rgba(249,115,22,.08);border-color:rgba(249,115,22,.12)}
.legal-intro,.legal-card{background:var(--bg-card);border:1px solid var(--border-card);box-shadow:var(--shadow-card);border-radius:24px;overflow:hidden;position:relative}
.legal-intro::before,.legal-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(249,115,22,.45),transparent)}
.legal-intro{padding:32px}.legal-card{padding:0;margin-bottom:22px}
.legal-card-head{display:flex;align-items:flex-start;gap:16px;padding:24px 28px;border-bottom:1px solid var(--border-card);background:linear-gradient(180deg,rgba(249,115,22,.045),transparent)}
.legal-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:14px;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.25);color:var(--text-brand);font-weight:800;font-size:13px;flex-shrink:0}
.legal-card h2{font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);margin-top:3px}
.legal-body{padding:26px 28px 30px;color:var(--text-secondary);font-size:15px;line-height:1.85}
.legal-body p,.legal-intro p{margin:0 0 16px;color:var(--text-secondary);line-height:1.85;font-size:15px}
.legal-body ul,.legal-intro ul{margin:10px 0 18px 20px;list-style:disc;color:var(--text-secondary)}
.legal-body li,.legal-intro li{margin:10px 0;padding-left:4px}
.legal-body strong,.legal-intro strong{color:var(--text-primary);font-weight:700}
.legal-body a,.legal-intro a{color:var(--text-brand);text-decoration:none;border-bottom:1px solid rgba(249,115,22,.28)}
.legal-body a:hover,.legal-intro a:hover{border-bottom-color:var(--text-brand)}
.legal-intro h4{font-size:22px;font-weight:800;margin:0 0 18px;color:var(--text-primary);letter-spacing:-.02em}
#backToTop{opacity:0;transform:translateY(10px);pointer-events:none;transition:all .3s}
#backToTop.visible{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:1024px){.toc-panel{position:relative;top:0;max-height:none}}
@media(max-width:640px){.legal-intro{padding:24px}.legal-card-head{padding:20px}.legal-body{padding:22px 20px}.legal-card h2{font-size:18px}}
.lang-en-content.hidden,.lang-de-content.hidden{display:none!important}


#navbar{height:64px!important;min-height:64px!important;max-height:64px!important;border-bottom:1px solid var(--nav-border)!important;background:var(--nav-bg)!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important}
#navbar>div{height:64px!important;min-height:64px!important;max-height:64px!important;max-width:1280px!important;padding-left:24px!important;padding-right:24px!important}
#navbar .logo-nav{height:32px!important;width:auto!important;max-height:32px!important}
#navbar a{font-size:14px!important}
#navbar .hidden.md\:flex.items-center.gap-8{gap:32px!important}
#navbar .lang-btn{font-size:12px!important;line-height:1!important;padding:4px 12px!important;border-radius:999px!important}
#navbar .theme-toggle{width:52px!important;height:28px!important;min-width:52px!important;min-height:28px!important;max-width:52px!important;max-height:28px!important;border-radius:14px!important;padding:0!important}
#navbar .theme-toggle .toggle-dot{width:22px!important;height:22px!important;top:3px!important;left:3px!important}
.dark #navbar .theme-toggle .toggle-dot,html[data-theme="dark"] #navbar .theme-toggle .toggle-dot{transform:translateX(24px)!important}
#navbar a.bg-brand-500{font-size:12px!important;padding:10px 20px!important;border-radius:999px!important;line-height:1!important;height:auto!important;min-height:auto!important}
#navbar .iconify{flex-shrink:0}
#navbar a:focus,#navbar a:active,#navbar button:focus,#navbar button:active{outline:none!important;box-shadow:none!important}
#navbar .nav-link-header{border:none!important;outline:none!important}
#navbar .nav-link-header:hover{color:var(--text-brand)!important}



#navbar .theme-toggle { cursor: pointer !important; }
#navbar a:focus,
#navbar a:active,
#navbar button:focus,
#navbar button:active { outline: none !important; box-shadow: none !important; }



html:not(.dark):not([data-theme="dark"]) #navbar .header-lang-toggle,
html[data-theme="light"] #navbar .header-lang-toggle {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255,255,255,0.65) !important;
}

html:not(.dark):not([data-theme="dark"]) #navbar .lang-btn,
html[data-theme="light"] #navbar .lang-btn {
  background: transparent !important;
  color: #64748b !important;
  border-color: transparent !important;
}

html:not(.dark):not([data-theme="dark"]) #navbar .lang-btn.active,
html[data-theme="light"] #navbar .lang-btn.active {
  background: rgba(249, 115, 22, 0.16) !important;
  color: #f97316 !important;
  box-shadow: none !important;
}

html:not(.dark):not([data-theme="dark"]) #navbar .theme-toggle,
html[data-theme="light"] #navbar .theme-toggle {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255,255,255,0.65) !important;
}

html:not(.dark):not([data-theme="dark"]) #navbar .theme-toggle .toggle-dot,
html[data-theme="light"] #navbar .theme-toggle .toggle-dot {
  background: #f97316 !important;
  color: #ffffff !important;
  transform: translateX(0) !important;
}

html.dark #navbar .theme-toggle .toggle-dot,
html[data-theme="dark"] #navbar .theme-toggle .toggle-dot {
  transform: translateX(24px) !important;
}

#navbar .nav-cta {
  background: linear-gradient(135deg, #f97316, #fb923c) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 14px 34px rgba(249, 115, 22, 0.26) !important;
  opacity: 1 !important;
}

#navbar .nav-cta:hover {
  background: linear-gradient(135deg, #ea580c, #f97316) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(249, 115, 22, 0.34) !important;
}

#navbar .nav-cta span,
#navbar .nav-cta .iconify {
  color: #ffffff !important;
}

html:not(.dark):not([data-theme="dark"]) #navbar,
html[data-theme="light"] #navbar {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* Removed chat floating button */
#chatWidget,
a[aria-label="Chat"],
.floating-btn[aria-label="Chat"] {
  display: none !important;
}

html:not(.dark) .bg-brand-500,
html:not(.dark) button.bg-brand-500,
html:not(.dark) a.bg-brand-500 {
  background: linear-gradient(135deg, #ff7a1a, #ff6b13) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 16px 38px rgba(255, 122, 26, 0.28) !important;
}

html:not(.dark) .bg-brand-500:hover,
html:not(.dark) button.bg-brand-500:hover,
html:not(.dark) a.bg-brand-500:hover {
  background: linear-gradient(135deg, #ff8a2a, #ff7015) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 46px rgba(255, 122, 26, 0.36) !important;
}


html:not(.dark) #contactForm button[type="submit"],
html:not(.dark) form button[type="submit"] {
  background: linear-gradient(135deg, #ff7a1a, #ff6b13) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  border: none !important;
  box-shadow: 0 16px 38px rgba(255, 122, 26, 0.28) !important;
}

html:not(.dark) #contactForm button[type="submit"] *,
html:not(.dark) form button[type="submit"] * {
  color: #ffffff !important;
}


html:not(.dark) .form-input,
html:not(.dark) input,
html:not(.dark) textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) .form-input::placeholder,
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}


html:not(.dark) a[href*="facebook"],
html:not(.dark) a[href*="twitter"],
html:not(.dark) a[href*="youtube"],
html:not(.dark) a[href*="instagram"],
html:not(.dark) .social-link {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08) !important;
}

html:not(.dark) a[href*="facebook"]:hover,
html:not(.dark) a[href*="twitter"]:hover,
html:not(.dark) a[href*="youtube"]:hover,
html:not(.dark) a[href*="instagram"]:hover,
html:not(.dark) .social-link:hover {
  background: #ff7a1a !important;
  color: #ffffff !important;
  border-color: #ff7a1a !important;
}


html:not(.dark) .bg-brand-500 .iconify,
html:not(.dark) button.bg-brand-500 .iconify,
html:not(.dark) a.bg-brand-500 .iconify {
  color: #ffffff !important;
}


html:not(.dark) #kontakt .rounded-2xl,
html:not(.dark) .contact-card {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
}


html:not(.dark) #backToTop {
  background: #ff7a1a !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(255, 122, 26, 0.30) !important;
}
/* ===== Process Section Fix ===== */

.process-grid {
  position: relative;
}

.process-line {
  position: absolute;
  top: 80px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(249, 115, 22, 0.16),
    rgba(249, 115, 22, 0.08),
    transparent
  );
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 2;
}

.process-circle {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .process-circle {
  background: #050508;
  border-color: rgba(255, 255, 255, 0.72);
}

.process-circle-active {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.06);
}

.process-icon {
  font-size: 42px;
  color: var(--text-primary);
}

.process-icon-active {
  color: #34d399;
}

.process-number {
  position: absolute;
  top: -9px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid var(--bg-primary);
  z-index: 4;
}

.dark .process-number {
  background: #050508;
  border-color: #050508;
  color: #ffffff;
}

.process-number-active {
  background: #10c987;
  color: #03130d;
  border-color: #10c987;
}

html:not(.dark) .process-circle {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

html:not(.dark) .process-circle-active {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.22);
}

html:not(.dark) .process-number {
  background: #ffffff;
  border-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

html:not(.dark) .process-number-active {
  background: #10c987;
  border-color: #10c987;
  color: #ffffff;
}

@media (max-width: 768px) {
  .process-circle {
    width: 130px;
    height: 130px;
    margin-bottom: 24px;
  }

  .process-icon {
    font-size: 34px;
  }

  .process-number {
    top: -8px;
    right: 4px;
  }
}
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.mobile-menu-open {
  transform: translateX(0);
}

/* ===== Mobile hamburger visibility fix =====
   Keeps the desktop header unchanged, but forces the mobile menu button
   to stay visible in the top-right corner on phone/tablet widths. */
#mobileToggle {
  display: none;
}

#mobileMenu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

#mobileMenu.open,
#mobileMenu.mobile-menu-open {
  transform: translateX(0);
}

@media (max-width: 1279px) {
  #navbar .desktop-nav-links,
  #navbar .desktop-only {
    display: none !important;
  }

  #mobileToggle {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    right: 16px !important;
    z-index: 9999 !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
  }
}

@media (min-width: 1280px) {
  #mobileToggle {
    display: none !important;
  }
}

/* ===== Mobile right-gutter fix =====
   Prevents the off-canvas mobile menu from creating a visible black area
   or horizontal page scrolling while it is closed. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip !important;
  }
}

@media (max-width: 1279px) {
  #mobileMenu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(18rem, 82vw) !important;
    max-width: 82vw !important;
    transform: translate3d(110%, 0, 0) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s !important;
    will-change: transform !important;
  }

  #mobileMenu.open,
  #mobileMenu.mobile-menu-open {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform 0.3s ease, opacity 0.2s ease !important;
  }

  #mobileOverlay.hidden {
    display: none !important;
  }
}