/* ============================================================
   Elektro Eickmeyer - main.css
   Ein zentrales Stylesheet. Identität: elektrisches Gelb auf Schwarz.
   Mobile-first, WCAG 2.2 AA, prefers-reduced-motion respektiert.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root{
  /* Grund / Flächen */
  --bg:#06090F;
  --bg-elev:#101a2b;
  --bg-elev-2:#0c1422;
  --bg-band:#0A0F1A;

  /* Schrift / Linien */
  --ink:#EAF2FF;
  --ink-dim:#c3cfe4;
  --muted:#8494ad;
  --line:#1b2640;
  --line-soft:#131d31;

  /* Strom-Gelb */
  --volt:#7AB834;
  --volt-soft:#B5DC85;
  --volt-deep:#5C9A22;
  --volt-text:#9BD15C;     /* Grün für kleine Schrift, 11:1 auf --bg */
  --volt-ink:#04121a;      /* dunkle Schrift auf gelber Fläche */
  --volt-glow:0 0 24px rgba(122,184,52,.45);

  /* Signalfarben (semantisch, nicht Marke) */
  --good:#3ED27B;
  --warn:#FFB020;
  --error:#FF6161;
  --focus:#7AB834;

  /* Radien / Schatten */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:100px;
  --shadow-1:0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 20px 50px rgba(0,0,0,.5);

  /* Abstände */
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:40px; --sp-6:64px; --sp-7:96px;
  --container:1160px;
  --gutter:26px;

  /* Typo */
  --f-display:"Helvetica Neue","Arial",system-ui,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;

  --fs-eyebrow:14px;
  --fs-body:21px;
  --fs-small:17px;
  --lh-body:1.62;
}

/* Optionales helles Thema (Zugänglichkeit) - via data-theme="light" umschaltbar */
:root[data-theme="light"]{
  --bg:#F4F5F3;
  --bg-elev:#FFFFFF;
  --bg-elev-2:#FBFBF9;
  --bg-band:#EFEFEC;
  --ink:#111214;
  --ink-dim:#333640;
  --muted:#5D6069;
  --line:#DEDFD9;
  --line-soft:#EAEAE4;
  --volt-deep:#8A5A00;
  --volt-text:#8A5A00;
  --volt-glow:0 0 22px rgba(122,184,52,.5);
  --shadow-1:0 8px 24px rgba(20,20,20,.08);
  --shadow-2:0 20px 46px rgba(20,20,20,.12);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:3px;
}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(56px,9vw,110px)}
.section--tight{padding-block:clamp(40px,6vw,70px)}
.stack>*+*{margin-top:var(--sp-3)}
.grid{display:grid;gap:var(--sp-3)}

/* ---------- Barrierefreiheit ---------- */
.skip-link{
  position:absolute;left:var(--gutter);top:-60px;z-index:200;
  background:var(--volt);color:var(--volt-ink);font-weight:800;
  padding:12px 18px;border-radius:var(--r-sm);transition:top .2s ease;
}
.skip-link:focus{top:12px}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Typografie ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font:700 var(--fs-eyebrow)/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--volt-text);
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--volt);border-radius:2px;box-shadow:var(--volt-glow)}
.eyebrow--plain::before{display:none}

h1,.h1{font-family:var(--f-display);font-weight:800;font-size:clamp(42px,7vw,88px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
h2,.h2{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4.8vw,54px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
h3,.h3{font-family:var(--f-display);font-weight:750;font-size:clamp(21px,3vw,28px);line-height:1.15;letter-spacing:-.015em}
h4{font-size:19px;font-weight:750;letter-spacing:-.01em}
.y{color:var(--volt);text-shadow:0 0 34px rgba(122,184,52,.4)}
:root[data-theme="light"] .y{color:var(--volt-ink);text-shadow:none;background:linear-gradient(transparent 60%,var(--volt-soft) 60%);padding:0 .04em}

/* ---------- Aufladendes Hero-Wort ----------
   Das Wort laedt sich von unten nach oben mit Spannung auf, mit heller
   Ladefront an der Kante. Reines CSS, kein JS.
   Barrierefreiheit: der noch nicht geladene Teil steht auf --volt-deep
   (5,7:1 gegen --bg), das Wort ist also zu keinem Zeitpunkt kontrastschwach.
   Ein einziger Textknoten, Screenreader lesen es unveraendert vor.
   @supports schuetzt Browser ohne background-clip:text vor unsichtbarem Text. */
/* Traeger fuer das Funken-Canvas. Der Wrapper bleibt inline, damit der Satz
   normal umbricht; das Canvas liegt darueber und ist rein dekorativ. */
.charge-wrap{position:relative;display:inline-block}
.charge-fx{position:absolute;left:-16%;top:-45%;width:132%;height:190%;pointer-events:none;z-index:1}
@media (prefers-reduced-motion:reduce){.charge-fx{display:none}}
@media (forced-colors:active){.charge-fx{display:none}}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .charge{
    display:inline-block;
    color:transparent;-webkit-text-fill-color:transparent;
    /* Ruhezustand ist der GELADENE Zustand: Kontur unsichtbar, Wort voll.
       Faellt die Animation aus, steht das Wort trotzdem da.
       animation-fill-mode:backwards liefert den leeren Startzustand nur
       waehrend Verzoegerung und Ablauf. */
    -webkit-text-stroke:2px transparent;
    /* Unten geladen (--volt), gluehende Front an der Kante, darueber LEER.
       Der ungeladene Teil zeigt nur die Kontur, wie im Konzept „Unter Strom".
       Unter der Hauptfront laeuft ein zweites, schwaecheres Band mit, das gibt
       dem Aufladen Tiefe statt einer einzelnen harten Kante. */
    background-image:linear-gradient(to top,
      var(--volt) 0 38%,
      var(--volt-soft) 38.6% 40%,
      var(--volt) 40.8% 44%,
      var(--volt-soft) 44% 45.6%,
      #ffffff 45.6% 47.8%,
      transparent 49.5% 100%);
    background-size:100% 200%;
    /* 97 % = Front oben raus, Wort voll geladen. 24 % = Front an der Unterkante.
       Ausserhalb dieser Spanne liegt die Front neben dem Wort, das waere Totzeit. */
    background-position:50% 97%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    text-shadow:none;
    filter:drop-shadow(0 0 16px rgba(122,184,52,.45));
    animation:charge-up 2.1s linear .3s backwards,
              charge-arc 2.1s linear .3s backwards,
              charge-jitter 2.1s linear .3s backwards;
  }
  /* Spannungsaufbau: schiesst hoch, faellt zurueck, rastet stufenweise ein.
     Die Kontur haelt das leere Wort sichtbar und verschwindet erst am Ende. */
  @keyframes charge-up{
    0%  {background-position:50% 24%;-webkit-text-stroke-color:var(--volt-deep)}
    11% {background-position:50% 35%}
    15% {background-position:50% 30%}
    32% {background-position:50% 56%}
    37% {background-position:50% 50%}
    58% {background-position:50% 77%}
    63% {background-position:50% 72%}
    80% {background-position:50% 97%;-webkit-text-stroke-color:var(--volt-deep)}
    84% {background-position:50% 90%}
    100%{background-position:50% 97%;-webkit-text-stroke-color:transparent}
  }
  /* Zuenden: die Entladung blitzt zweimal auf, dann steht das Leuchten.
     Zwei Blitze ueber 2,1 s liegen weit unter der WCAG-Grenze von drei pro Sekunde. */
  @keyframes charge-arc{
    0%,28%{filter:drop-shadow(0 0 0 rgba(122,184,52,0)) brightness(1)}
    32%   {filter:drop-shadow(0 0 22px rgba(181,220,133,.9)) brightness(1.55)}
    36%   {filter:drop-shadow(0 0 4px rgba(122,184,52,.2)) brightness(1)}
    79%   {filter:drop-shadow(0 0 6px rgba(122,184,52,.3)) brightness(1)}
    82%   {filter:drop-shadow(0 0 30px rgba(226,242,204,1)) brightness(1.95)}
    86%   {filter:drop-shadow(0 0 10px rgba(122,184,52,.35)) brightness(1.04)}
    100%  {filter:drop-shadow(0 0 16px rgba(122,184,52,.45)) brightness(1)}
  }
  /* Kontaktzucken an den Einrastpunkten, unter 2 px und nur dreimal */
  @keyframes charge-jitter{
    0%,10%,16%,31%,38%,57%,64%,79%,86%,100%{transform:translate3d(0,0,0)}
    12%{transform:translate3d(-1.5px,.5px,0)}
    14%{transform:translate3d(1px,-.5px,0)}
    33%{transform:translate3d(1.5px,0,0)}
    35%{transform:translate3d(-1px,0,0)}
    81%{transform:translate3d(-2px,.5px,0)}
    83%{transform:translate3d(1.5px,-.5px,0)}
  }
  /* Kein Bewegungsbedarf: Ruhezustand stehen lassen, kein Blitzen, kein Zucken */
  @media (prefers-reduced-motion:reduce){
    .charge{animation:none;transform:none}
  }
  /* Windows-Kontrastmodus: Systemfarbe gewinnt, kein geclippter Hintergrund */
  @media (forced-colors:active){
    .charge{background-image:none;-webkit-text-fill-color:currentColor;color:currentColor;
            -webkit-text-stroke:0;animation:none;filter:none}
  }
  /* Hell-Thema: zurueck auf die Marker-Optik von .y */
  :root[data-theme="light"] .charge{
    background-image:linear-gradient(transparent 60%,var(--volt-soft) 60%);
    background-size:auto;background-position:0 0;
    -webkit-background-clip:border-box;background-clip:border-box;
    -webkit-text-fill-color:currentColor;color:var(--volt-ink);
    -webkit-text-stroke:0;
    animation:none;filter:none;padding:0 .04em;
  }
}
.lead{font-size:clamp(20px,2.3vw,24px);color:var(--ink-dim);max-width:56ch}
p{max-width:70ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:52px;padding:15px 28px;border-radius:var(--r-pill);
  font-weight:800;font-size:17px;border:2px solid transparent;
  transition:transform .15s ease,box-shadow .25s ease,background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn small{display:block;font:700 11px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.btn-volt{background:var(--volt);color:var(--volt-ink);box-shadow:0 12px 30px rgba(122,184,52,.22)}
.btn-volt:hover{box-shadow:0 18px 40px rgba(122,184,52,.38)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--volt)}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.beam-top{position:absolute;left:0;right:0;top:0;height:2px;overflow:hidden;pointer-events:none}
.beam-top::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,var(--volt),var(--volt-soft),var(--volt),transparent);box-shadow:0 0 12px var(--volt);animation:beamX 4.2s linear 1}
@keyframes beamX{0%{left:-30%}100%{left:100%}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:78px}
@media(min-width:560px){.nav{gap:16px;height:90px}}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;font-size:18px;line-height:1.15}
.brand .bolt{width:38px;height:38px;flex:none;display:block;filter:drop-shadow(0 0 6px rgba(122,184,52,.45))}
.brand small{display:block;margin-top:3px;font:600 10px/1.2 var(--f-mono);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;text-wrap:balance}
@media(max-width:359px){.brand small{display:none}}
@media(min-width:560px){.brand{gap:12px;font-size:21px;white-space:nowrap}.brand .bolt{width:46px;height:46px}.brand small{font-size:11.5px;letter-spacing:.12em}}
@media(min-width:960px){.brand{gap:14px;font-size:22px}.brand .bolt{width:50px;height:50px}.brand small{font-size:12.5px;letter-spacing:.14em;white-space:nowrap}}

.nav-actions{display:flex;align-items:center;gap:10px}
.nav-call{display:none;align-items:center;gap:10px;font:700 17px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink);border:1px solid var(--line);padding:0 20px;height:50px;border-radius:var(--r-pill);white-space:nowrap}
.nav-call .pip{width:9px;height:9px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt)}
.nav-call:hover{border-color:var(--volt)}
@media(min-width:700px){.nav-call{display:inline-flex}}

.nav-lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);font:800 13px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
.nav-lang:hover{border-color:var(--volt);color:var(--volt)}
.nav-lang{padding:0 10px}
.nav-lang .flag{width:26px;height:18px;border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nav-lang:hover .flag{box-shadow:0 0 0 1px var(--volt)}
.menu-btn{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 9px 0 20px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--ink);font:800 13px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;transition:border-color .2s,box-shadow .25s}
.menu-btn:hover{border-color:var(--volt);box-shadow:var(--volt-glow)}
.menu-btn .ic{position:relative;width:32px;height:32px;border-radius:50%;background:var(--volt);flex:0 0 auto}
.menu-btn .ic::before,.menu-btn .ic::after{content:"";position:absolute;left:8px;right:8px;height:2.6px;border-radius:2px;background:#04121a;top:15px;transition:transform .25s ease}
.menu-btn .ic::before{transform:translateY(-4px)}
.menu-btn .ic::after{transform:translateY(4px)}
.menu-btn[aria-expanded="true"] .ic::before{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .ic::after{transform:rotate(-45deg)}
.menu-btn .lbl{display:none}
@media(min-width:560px){.menu-btn .lbl{display:inline}}

/* ---------- Vollbild-Menü ---------- */
.nav-flash{position:fixed;inset:0;z-index:200;background:var(--volt);opacity:0;pointer-events:none}
.nav-flash.go{animation:navFlash .5s ease-out}
@keyframes navFlash{0%{opacity:0}16%{opacity:.5}100%{opacity:0}}

.nav-overlay{position:fixed;inset:0;z-index:190;background:#05080e;visibility:hidden;
  clip-path:circle(0% at calc(100% - 46px) 45px);
  transition:clip-path .55s cubic-bezier(.66,0,.2,1),visibility .55s;
  display:flex;flex-direction:column;overflow-y:auto}
.nav-overlay[data-open="true"]{visibility:visible;clip-path:circle(150% at calc(100% - 46px) 45px)}
.nav-overlay::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 50% at 100% 0%,rgba(122,184,52,.10),transparent 70%);pointer-events:none}
.ov-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;height:78px;max-width:var(--container);margin:0 auto;width:100%;padding-inline:var(--gutter)}
@media(min-width:560px){.ov-top{height:90px}}
.ov-close{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--bg-elev);position:relative;flex:0 0 auto}
.ov-close:hover{border-color:var(--volt);box-shadow:var(--volt-glow)}
.ov-close::before,.ov-close::after{content:"";position:absolute;left:14px;right:14px;top:23px;height:2.6px;background:var(--volt);border-radius:2px}
.ov-close::before{transform:rotate(45deg)}
.ov-close::after{transform:rotate(-45deg)}
.ov-body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr;gap:38px;align-content:center;max-width:var(--container);margin:0 auto;width:100%;padding:26px var(--gutter) 56px}
@media(min-width:900px){.ov-body{grid-template-columns:1.5fr .9fr;gap:60px;align-items:center}}

.ov-links{display:flex;flex-direction:column;gap:2px}
.ov-links li{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s ease}
.nav-overlay[data-open="true"] .ov-links li{opacity:1;transform:none}
.nav-overlay[data-open="true"] .ov-links li:nth-child(1){transition-delay:.08s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(2){transition-delay:.13s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(3){transition-delay:.18s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(4){transition-delay:.23s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(5){transition-delay:.28s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(6){transition-delay:.33s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(7){transition-delay:.38s}
.nav-overlay[data-open="true"] .ov-links li:nth-child(8){transition-delay:.43s}
.ov-links a{display:inline-flex;align-items:baseline;gap:16px;padding:9px 0;font-family:var(--f-display);font-weight:800;font-size:clamp(30px,6.2vw,58px);letter-spacing:-.03em;line-height:1;color:var(--ink);width:fit-content}
.ov-links .idx{font:700 14px/1 var(--f-mono);color:var(--volt-text);letter-spacing:.1em}
.ov-links a .t{position:relative}
.ov-links a .t::after{content:"";position:absolute;left:0;bottom:-6px;height:4px;width:100%;background:var(--volt);box-shadow:0 0 12px var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.ov-links a:hover .t,.ov-links a:focus-visible .t{color:var(--volt)}
.ov-links a:hover .t::after,.ov-links a:focus-visible .t::after{transform:scaleX(1)}

/* Kompaktes Leistungs-Raster im Menü (viele Leistungen) */
.ov-head{font:700 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.ov-grid{display:grid;grid-template-columns:1fr;gap:2px 30px}
@media(min-width:560px){.ov-grid{grid-template-columns:1fr 1fr}}
.ov-grid li{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s ease}
.nav-overlay[data-open="true"] .ov-grid li{opacity:1;transform:none}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(1){transition-delay:.06s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(2){transition-delay:.09s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(3){transition-delay:.12s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(4){transition-delay:.15s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(5){transition-delay:.18s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(6){transition-delay:.21s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(7){transition-delay:.24s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(8){transition-delay:.27s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(9){transition-delay:.30s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(10){transition-delay:.33s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(11){transition-delay:.36s}
.nav-overlay[data-open="true"] .ov-grid li:nth-child(12){transition-delay:.39s}
.ov-grid a{display:flex;align-items:baseline;gap:12px;padding:11px 0;font-family:var(--f-display);font-weight:750;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);border-bottom:1px solid var(--line-soft);width:100%}
.ov-grid .idx{font:700 12px/1 var(--f-mono);color:var(--volt-text);letter-spacing:.08em;flex:0 0 auto}
.ov-grid .t{position:relative}
.ov-grid a:hover .t,.ov-grid a:focus-visible .t{color:var(--volt)}
.ov-grid a[aria-current] .t{color:var(--volt)}
.ov-company{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px}
.ov-company a{font-weight:700;font-size:16px;color:var(--ink-dim)}
.ov-company a:hover{color:var(--volt)}

.ov-side{border-top:1px solid var(--line);padding-top:26px}
@media(min-width:900px){.ov-side{border-top:0;border-left:1px solid var(--line);padding:6px 0 6px 44px}}
.ov-side h2{font:700 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.ov-side .phone{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,4vw,36px);color:var(--volt);display:inline-block}
.ov-side .adr{color:var(--ink-dim);margin-top:14px;font-size:16.5px}
.ov-side .btn{margin-top:24px}
.ov-side .mini{margin-top:26px;display:flex;gap:20px;font-size:14.5px}
.ov-side .mini a{color:var(--muted)}
.ov-side .mini a:hover{color:var(--volt)}

body.nav-open{overflow:hidden}

/* ---------- Sektions-Kopf ---------- */
.sec-head{max-width:60ch}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head .lead{margin-top:20px}

/* ---------- Trust-Leiste ---------- */
.trust{border-block:1px solid var(--line);background:var(--bg-band)}
.trust ul{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding-block:24px}
.trust li{display:inline-flex;align-items:center;gap:10px;font:700 15px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--volt);box-shadow:0 0 8px var(--volt)}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  display:flex;flex-direction:column;background:var(--bg-elev);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  transition:transform .18s ease,border-color .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-3px);border-color:var(--volt);box-shadow:var(--shadow-1)}
.card .k{display:block;font:700 11.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--volt-text);margin-bottom:14px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-dim);font-size:18px}
.card a.card-link{margin-top:16px;font-weight:750;color:var(--volt);display:inline-flex;gap:8px}

/* ---------- FAQ ---------- */
.faq{max-width:860px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;background:var(--bg-elev);overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:var(--volt)}
.faq summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px 22px;font-weight:750;font-size:20.5px;list-style:none;cursor:pointer;
}
.faq summary:hover{color:var(--volt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:26px;line-height:1;color:var(--volt);transition:transform .2s}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 22px 24px;color:var(--ink-dim);font-size:18.5px;max-width:none}

/* ---------- Formulare ---------- */
.form{display:grid;gap:18px;max-width:640px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-weight:700;font-size:15.5px}
.field .req{color:var(--volt)}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:14px 16px;font:inherit;font-size:16px;
  background:var(--bg-elev);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--r-md);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--volt);outline:2px solid transparent;outline-offset:2px;box-shadow:var(--volt-glow)}
.field .hint{font-size:13.5px;color:var(--muted)}
.field .err{font-size:14px;color:var(--error)}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--error)}
.checkbox{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-dim)}
.checkbox input{width:24px;height:24px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--volt)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:13.5px;color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-elev-2);border-top:1px solid var(--line);margin-top:var(--sp-6)}
.footer-grid{display:grid;gap:36px;padding-block:56px;grid-template-columns:1fr}
@media (min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-grid .f-h{font:700 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer-grid a{display:block;padding:6px 0;color:var(--ink-dim)}
.footer-grid a:hover{color:var(--volt)}
.footer-region{border-top:1px solid var(--line);padding-block:24px}
.footer-region .f-h{font:700 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-region nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-region a{color:var(--ink-dim);font-size:15px}
.footer-region a:hover{color:var(--volt)}
.footer-region nav span{color:var(--ink-dim);font-size:15px}
.footer-bottom{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--muted);font-size:14px}

/* ---------- Sichtbarkeits-Utilities ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Strom-Effekte ---------- */
@keyframes sizzle{0%,100%{box-shadow:0 12px 30px rgba(122,184,52,.34)}22%{box-shadow:0 0 0 2px rgba(181,220,133,.9),0 14px 42px rgba(122,184,52,.6)}55%{box-shadow:0 0 0 1px rgba(122,184,52,.6),0 14px 40px rgba(122,184,52,.4)}}
.btn-volt:hover{animation:sizzle .55s ease-out}

/* ---------- Funken-Trail am Mauszeiger ----------
   Liegt über dem Inhalt, aber unter dem Menü-Overlay (190) und dem
   Nav-Flash (200), damit das geöffnete Menü ruhig bleibt.
   Das Canvas wird von js/main.js angelegt, nur auf Zeigergeräten. */
.cursor-fx{position:fixed;inset:0;width:100%;height:100%;z-index:150;pointer-events:none}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cursor-fx{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Partner-/Marken-Logo-Wall ---------- */
.logo-wall{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
@media(min-width:560px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:920px){.logo-wall{grid-template-columns:repeat(4,1fr)}}
.logo-wall .logo{display:flex;align-items:center;justify-content:center;min-height:66px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-elev);transition:border-color .25s,background .25s}
.logo-wall .logo:hover{border-color:var(--volt);background:var(--bg-elev-2)}
.logo-wall .logo img{max-height:26px;max-width:100%;width:auto;filter:brightness(0) invert(.82);opacity:.9;transition:opacity .25s}
.logo-wall .logo:hover img{opacity:1}
.logo-wall .logo--name{font:700 16.5px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink-dim);text-align:center}
.logo-wall .logo--name:hover{color:var(--ink)}

/* Referenzen & Sponsoring: Logos der Kunden auf hellen Kacheln, damit
   farbige Originallogos unverändert bleiben (kein Umfärben fremder Marken). */
.ref-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;list-style:none;padding:0}
@media(min-width:620px){.ref-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.ref-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ref-wall li{display:flex}
.ref-wall a,.ref-wall .ref{flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-elev);overflow:hidden;transition:border-color .25s,transform .25s}
.ref-wall a:hover,.ref-wall a:focus-visible{border-color:var(--volt);transform:translateY(-2px)}
.ref-logo{display:flex;align-items:center;justify-content:center;height:112px;padding:16px 20px;background:#fff}
.ref-logo img{max-height:80px;max-width:100%;width:auto;height:auto;object-fit:contain}
.ref-logo--text{font:800 19px/1.15 var(--f-display);letter-spacing:-.01em;color:#0b1424;text-align:center}
.ref-name{display:block;padding:12px 16px 14px;font-size:14.5px;line-height:1.35;color:var(--ink-dim)}
.ref-name strong{display:block;color:var(--ink);font-size:15.5px}
.ref-wall a .ref-name strong::after{content:" ↗";color:var(--volt);font-weight:600}
.ref-more{margin-top:22px}
@media(prefers-reduced-motion:reduce){.ref-wall a{transition:none}.ref-wall a:hover{transform:none}}

/* Bürozeiten + Google-Bewertung (Kontakt, Trust-Leiste) */
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:10px;font-size:16px;color:var(--ink-dim)}
.hours dt{color:var(--ink)}
.trust li a{color:inherit;text-decoration:none}
.trust li a:hover,.trust li a:focus-visible{color:var(--volt)}
.g-rating{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;text-decoration:none}
.g-rating .stars{color:#FBBC04;letter-spacing:1px}
.g-rating:hover{color:var(--volt)}
@media(min-width:980px){.trust ul{gap:14px 24px}}

/* ---------- BARRIEREFREIHEIT 2026-09 (WCAG 2.2 AA) ---------- */
/* Fokus auch auf per tabindex erreichbaren Bereichen (z. B. scrollbare Tabellen) */
[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* 1.4.1: Links im Fließtext nicht nur über die Farbe erkennbar */
main :is(p,li,dd,td,th,figcaption,blockquote) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
main :is(p,li,dd,td,th,figcaption,blockquote) a:not([class]):hover{color:var(--volt);text-decoration-thickness:2px}
/* 2.5.8: Brotkrumen-Links mit mind. 24 px Trefferfläche, ohne das Layout zu verschieben */
.crumb a{display:inline-block;padding-block:6px;margin-block:-6px}
main .crumb a:not([class]){text-decoration:none}
/* 1.4.10: bei 320 px Breite nichts seitlich herausragen lassen */
main{overflow-wrap:break-word}
main a[href^="http"]:not([class]){overflow-wrap:anywhere}
.cards>*{min-width:0}
@media (max-width:359px){main :is(p,li,dd,dt,h2,h3,.card){hyphens:auto;-webkit-hyphens:auto}}
/* Windows-Kontrastmodus: aus Hintergründen gebaute Symbole sichtbar halten */
@media (forced-colors:active){
  .menu-btn .ic{forced-color-adjust:none;background:ButtonText}
  .menu-btn .ic::before,.menu-btn .ic::after{background:ButtonFace}
  .ov-close::before,.ov-close::after{forced-color-adjust:none;background:ButtonText}
  .beam-top,.powerline::before{display:none}
  .fx-pause{forced-color-adjust:auto;border:2px solid ButtonText}
}
/* 2.2.2: Schalter zum Anhalten der Hero-Animation (legt js/components.js an) */
.fx-pause{position:absolute;right:10px;bottom:6px;z-index:3;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.fx-pause:hover{border-color:var(--volt);color:var(--volt)}
.fx-pause svg{width:16px;height:16px;fill:currentColor}
.trust li a{display:inline-flex;align-items:center;padding-block:5px;margin-block:-5px}