/* Klein-Paket — zentrales Stylesheet (geteilt von allen Seiten) */
  :root {
    --accent: #00FFEF;
  }
  html { scroll-behavior: smooth; }
  body { background: #000; color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; }

  /* ---------- Glassmorphism ---------- */
  .glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.06) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 40px rgba(255,255,255,0.02),
      0 24px 60px -20px rgba(0,0,0,0.7);
    position: relative;
  }
  .glass::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255,255,255,0.12) 0%, transparent 28%, transparent 72%, rgba(0,255,239,0.05) 100%);
    pointer-events: none;
  }
  .glass-subtle {
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  }
  .glass-card {
    transition: transform .35s cubic-bezier(.21,1.02,.45,1), border-color .35s;
    will-change: transform;
  }
  .glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0,255,239,0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 0 30px rgba(0,255,239,0.06),
      0 0 30px rgba(0,255,239,0.3),
      0 0 90px -15px rgba(0,255,239,0.45),
      0 24px 60px -20px rgba(0,0,0,0.7);
  }
  .glass-card:focus-within { border-color: rgba(0,255,239,0.5); }

  /* Step-Nummern wechseln auf Akzentfarbe bei Hover */
  .step-num { color: rgba(255,255,255,0.1); transition: color .35s, text-shadow .35s; }
  .glass-card:hover .step-num { color: var(--accent); text-shadow: 0 0 26px rgba(0,255,239,0.6); }

  /* ---------- Background orbs ---------- */
  .orb {
    position: absolute; border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
  }
  .orb-cyan { background: radial-gradient(circle at 35% 35%, rgba(0,255,239,0.5), rgba(0,255,239,0.08) 60%, transparent 75%); }
  .orb-deep { background: radial-gradient(circle at 35% 35%, rgba(0,140,130,0.55), rgba(0,90,84,0.12) 60%, transparent 75%); }
  @keyframes drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(60px, -50px) scale(1.12); }
    66%  { transform: translate(-40px, 40px) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
  }
  @keyframes drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-80px, 60px) scale(1.18); }
    100% { transform: translate(0, 0) scale(1); }
  }
  .anim-drift-a { animation: drift-a 26s ease-in-out infinite; }
  .anim-drift-b { animation: drift-b 34s ease-in-out infinite; }

  /* ---------- Animated lines ---------- */
  .lines-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .flow-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
    opacity: .5;
    stroke-linecap: round;
    stroke-dasharray: 90 640;
    animation: dash-flow 9s linear infinite;
    filter: drop-shadow(0 0 6px rgba(0,255,239,0.8));
  }
  .flow-line.l2 { animation-duration: 13s; animation-delay: -4s; opacity: .35; stroke-dasharray: 60 720; }
  .flow-line.l3 { animation-duration: 17s; animation-delay: -9s; opacity: .25; stroke-dasharray: 130 900; }
  .flow-line.l4 { animation-duration: 11s; animation-delay: -2s; opacity: .3; stroke-dasharray: 70 560; }
  @keyframes dash-flow { to { stroke-dashoffset: -1460; } }
  .grid-line { stroke: rgba(255,255,255,0.05); stroke-width: 1; }

  /* ---------- Brands-Marquee ---------- */
  .marquee-mask {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
  .marquee-group { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
  .marquee-group span {
    font-weight: 700; font-size: 24px; letter-spacing: -0.03em; white-space: nowrap;
    color: rgba(255,255,255,0.22);
    transition: color .4s ease, text-shadow .4s ease;
  }
  /* Das Element, das gerade die horizontale Bildschirmmitte passiert, leuchtet
     in der Kontrastfarbe (gesetzt per JS in site.js → initMarqueeGlow). */
  .marquee-group span.lit { color: var(--accent); text-shadow: 0 0 24px rgba(0,255,239,0.5); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .flow-line, .anim-drift-a, .anim-drift-b, .reveal, .marquee-track { animation: none !important; transition: none !important; }
  }

  /* ---------- Typography ---------- */
  .display { letter-spacing: -0.04em; line-height: 1.02; font-weight: 600; }
  .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
  .accent-glow { color: var(--accent); text-shadow: 0 0 30px rgba(0,255,239,0.45); }

  /* ---------- Buttons ---------- */
  .btn-primary {
    background: var(--accent); color: #000;
    box-shadow: 0 0 20px rgba(0,255,239,0.25);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(0,255,239,0.45); }
  .btn-primary:active { transform: translateY(0); }
  .btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .btn-ghost {
    border: 1px solid rgba(255,255,255,0.14);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s, background-color .2s;
  }
  .btn-ghost:hover { transform: translateY(-2px); border-color: rgba(0,255,239,0.5); background: rgba(0,255,239,0.06); }
  .btn-ghost:active { transform: translateY(0); }
  .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-link { transition: color .2s, opacity .2s; opacity: .75; }
  .nav-link:hover { opacity: 1; color: var(--accent); }
  .nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.21,.7,.35,1), transform .8s cubic-bezier(.21,.7,.35,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* ---------- Slider ---------- */
  input[type=range] { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.14); outline: none; }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
    box-shadow: 0 0 14px rgba(0,255,239,0.7);
    transition: transform .15s;
  }
  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
  input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: var(--accent); cursor: pointer;
    box-shadow: 0 0 14px rgba(0,255,239,0.7);
  }
  input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

  /* ---------- FAQ ---------- */
  details.faq summary { list-style: none; cursor: pointer; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq .chev { transition: transform .3s; }
  details.faq[open] .chev { transform: rotate(45deg); }
  details.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }

  /* ---------- Image treatment ---------- */
  .img-treat { position: relative; overflow: hidden; }
  .img-treat img { transition: transform .5s cubic-bezier(.21,.7,.35,1); display: block; }
  .glass-card:hover .img-treat img { transform: scale(1.05); }

  .logo-img { filter: drop-shadow(0 0 10px rgba(0,255,239,0.45)); }

  /* grain */
  .grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .35; mix-blend-mode: overlay; }

/* ---------- Zusätzliche, von Unterseiten genutzte Helfer ---------- */
.prose-legal { color:#9CA3AF; line-height:1.75; }
.prose-legal h2 { color:#fff; font-weight:600; font-size:22px; letter-spacing:-0.02em; margin:40px 0 12px; }
.prose-legal h3 { color:#D1D5DB; font-weight:600; font-size:16px; margin:24px 0 8px; }
.prose-legal p { margin:10px 0; }
.prose-legal a { color:var(--accent); text-decoration:none; }
.prose-legal a:hover { text-decoration:underline; }
.prose-legal strong { color:#D1D5DB; }
.prose-legal ul { margin:10px 0; padding-left:20px; list-style:disc; }
.prose-legal li { margin:6px 0; }

/* Formularfelder */
.field {
  width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:13px 15px; color:#fff; font-size:15px; font-family:inherit;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.field::placeholder { color:#6B7280; }
.field:hover { border-color:rgba(255,255,255,0.2); }
.field:focus { outline:none; border-color:var(--accent); background:rgba(0,255,239,0.04); box-shadow:0 0 0 3px rgba(0,255,239,0.12); }
.field-label { font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:#9CA3AF; margin-bottom:8px; display:block; }
select.field { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2300FFEF' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }

/* Auswahl-Kacheln (Radio/Checkbox als Karten) */
.choice { cursor:pointer; }
.choice input { position:absolute; opacity:0; pointer-events:none; }
.choice .choice-box {
  border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:14px 16px;
  background:rgba(255,255,255,0.03); transition:border-color .2s, background-color .2s, transform .15s;
}
.choice:hover .choice-box { border-color:rgba(0,255,239,0.4); }
.choice input:checked + .choice-box { border-color:var(--accent); background:rgba(0,255,239,0.08); box-shadow:0 0 18px -4px rgba(0,255,239,0.4); }
.choice input:focus-visible + .choice-box { outline:2px solid var(--accent); outline-offset:2px; }

/* Mobile-Nav */
.nav-toggle { display:none; }
@media (max-width: 767px){ .nav-toggle { display:inline-flex; } }

/* Mega-Menü (Desktop, ≥768px) */
.kp-mega > button { cursor:pointer; background:none; border:none; padding:0; font:inherit; color:inherit; }
.kp-mega-chev { transition: transform .25s ease; }
.kp-mega:hover .kp-mega-chev,
.kp-mega:focus-within .kp-mega-chev { transform: rotate(180deg); }
/* Wrap fängt die Maus zwischen Button und Panel ab (kein Flackern) */
.kp-mega-wrap {
  position:absolute; top:100%; right:0; padding-top:14px;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events:none;
}
.kp-mega:hover .kp-mega-wrap,
.kp-mega:focus-within .kp-mega-wrap {
  opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto;
}
.kp-mega-panel {
  width: 760px; max-width: calc(100vw - 2rem);
  background: rgba(8,10,12,0.96);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,255,239,0.08);
}
@media (max-width: 767px){ .kp-mega { display:none; } }