/* =====================================================================
   Elektrotechnik Kühr – Design 2 (Oktober 2026)
   Schicht ÜBER styles.css. Nur Aussehen, kein Inhalt.
   Vorbild: dunkle Tech-Landingpage (fast schwarz, eine Akzentfarbe,
   Lichtschweif im Kopf, Serifen-Kursive als Akzentwort, Mono-Etiketten).
   Bewegung nach den Regeln „ease-out beim Erscheinen, kurz, nur
   transform/opacity, eine Signatur (der Lichtschweif)“.
   Abschalten: <link> auf diese Datei entfernen – sonst ändert sich nichts.
   ===================================================================== */

@font-face{font-family:'D2 Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/design2/fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'D2 Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/design2/fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'D2 Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/design2/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'D2 Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/design2/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}

/* ---------- Farbmarken: Kupfer (Standard, passt zum Logo) ---------- */
#eks{
  --d2-bg:#0A0908; --d2-bg2:#100E0C; --d2-bg3:#16130F;
  --d2-card:rgba(255,248,240,.035); --d2-card2:rgba(255,248,240,.06);
  --d2-line:rgba(255,240,225,.09); --d2-line2:rgba(255,240,225,.16);
  --d2-text:#F1ECE6; --d2-dim:#A39A90; --d2-mute:#8C837A;
  --d2-acc:#F6A61B; --d2-acc2:#E8541E; --d2-acc-ink:#1A0F02;
  --d2-glow:rgba(246,166,27,.22);
  --d2-ease:cubic-bezier(.23,1,.32,1);          /* ease-out, „quint“ */
  --d2-mono:'D2 Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --d2-serif:'D2 Serif',Georgia,'Times New Roman',serif;
  /* alte Marken auf die neuen umbiegen */
  --ink:var(--d2-bg); --ink-2:var(--d2-bg2); --ink-3:var(--d2-bg3);
  --line:var(--d2-line); --text:var(--d2-text); --dim:var(--d2-dim);
  --amber:var(--d2-acc); --orange:var(--d2-acc2);
  --grad:linear-gradient(135deg,var(--d2-acc) 0%,var(--d2-acc2) 100%);
  --radius:18px;
  /* frühere helle Flächen sind jetzt dunkel: Text-Marken mitziehen (auch für style='color:var(--dark)') */
  --dark:var(--d2-text); --dark-dim:var(--d2-dim); --paper:var(--d2-bg2);
  background:var(--d2-bg); color:var(--d2-text);
}
/* ---------- Variante Limette (wie im Reel) ---------- */
#eks[data-d2="limette"]{
  --d2-bg:#070A08; --d2-bg2:#0B100D; --d2-bg3:#111813;
  --d2-card:rgba(235,255,240,.035); --d2-card2:rgba(235,255,240,.06);
  --d2-line:rgba(225,255,230,.085); --d2-line2:rgba(225,255,230,.16);
  --d2-text:#EEF3EC; --d2-dim:#97A398; --d2-mute:#7F8A80;
  --d2-acc:#C8F04A; --d2-acc2:#5FD08A; --d2-acc-ink:#0D1402;
  --d2-glow:rgba(200,240,74,.20);
}

#eks ::selection{background:var(--d2-acc);color:var(--d2-acc-ink)}
#eks :focus-visible{outline:2px solid var(--d2-acc);outline-offset:3px}

/* ---------- Typo-Bausteine ---------- */
#eks h1,#eks h2,#eks h3{letter-spacing:-.035em;font-weight:650}
#eks .h-lg{font-weight:600;letter-spacing:-.04em}
#eks .d2-it{font-family:var(--d2-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
#eks .eyebrow{font-family:var(--d2-mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--d2-acc)}
#eks .eyebrow::before{width:18px;height:1px;background:var(--d2-acc);opacity:.7}
#eks .lead{color:var(--d2-dim)}
#eks .grad-text{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--d2-acc)}

/* ---------- Knöpfe ---------- */
#eks .btn{font-weight:600;letter-spacing:-.01em;padding:13px 24px;
  transition:transform .2s var(--d2-ease),background-color .2s var(--d2-ease),border-color .2s var(--d2-ease),color .2s var(--d2-ease),box-shadow .2s var(--d2-ease)}
#eks .btn:hover{transform:translateY(-1px)}
#eks .btn:active{transform:scale(.97)}
#eks .btn-primary{background:var(--d2-acc);color:var(--d2-acc-ink);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px -12px var(--d2-glow)}
#eks .btn-primary:hover{filter:none;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 14px 40px -10px var(--d2-glow)}
#eks .btn-ghost{background:var(--d2-card);border:1px solid var(--d2-line2);color:var(--d2-text)}
#eks .btn-ghost:hover{border-color:var(--d2-acc);color:var(--d2-text);background:var(--d2-card2)}

/* ---------- Kopfzeile ---------- */
#eks .ekhd.solid{background:rgba(10,9,8,.72);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
#eks[data-d2="limette"] .ekhd.solid{background:rgba(7,10,8,.72)}
#eks .menu a{color:var(--d2-dim)}
#eks .menu a::after{background:var(--d2-acc);height:1px}
#eks .menu a.aktiv{color:var(--d2-text)}
#eks .ekhd .nav-cta .btn-primary{padding:10px 18px;font-size:.86rem}
#eks .burger{border-color:var(--d2-line2)}
#eks .burger i,#eks .burger i::before,#eks .burger i::after{background:var(--d2-text)}
#eks .burger.open{background:var(--d2-card2);border-color:var(--d2-acc)}
#eks .mobile{background:var(--d2-bg)}
#eks .mobile a.aktiv{color:var(--d2-acc)}
#eks .mobile a.aktiv::before{background:var(--d2-acc)}

/* =====================================================================
   HERO (Startseite)
   ===================================================================== */
#eks .hero.d2-hero{min-height:auto;align-items:stretch;background:
  radial-gradient(60% 55% at 72% 38%,var(--d2-glow),transparent 70%),
  radial-gradient(40% 40% at 10% 90%,rgba(255,255,255,.03),transparent 70%),var(--d2-bg)}
#eks .d2-hero .hero-grad,#eks .d2-hero .hero-dark{display:none}
#eks .d2-schweif{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.95;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 62%);mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 62%)}
@media (max-width:980px){#eks .d2-schweif{-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 40%,rgba(0,0,0,.35) 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.35) 40%,rgba(0,0,0,.35) 100%)}}
#eks .d2-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--d2-bg))}
#eks .d2-raster{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--d2-line) 1px,transparent 1px),linear-gradient(90deg,var(--d2-line) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%)}
#eks .d2-hero .hero-inner{padding:140px 0 90px}
#eks .d2-hero .d2-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}

#eks .d2-pille{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;padding:6px 14px 6px 10px;border:1px solid var(--d2-line2);
  border-radius:999px;background:var(--d2-card);font-family:var(--d2-mono);font-size:.72rem;letter-spacing:.06em;color:var(--d2-dim);
  opacity:0;animation:d2rein .6s var(--d2-ease) .05s forwards}
#eks .d2-pille i{width:7px;height:7px;border-radius:50%;background:var(--d2-acc);box-shadow:0 0 0 4px var(--d2-glow)}
#eks .d2-pille b{color:var(--d2-text);font-weight:500}

#eks .d2-hero h1.h-xl{font-size:clamp(2.8rem,6.2vw,5.6rem);font-weight:600;letter-spacing:-.05em;line-height:.98;text-shadow:none;margin-bottom:22px}
#eks .d2-hero h1 .ln:nth-child(2) i{font-family:var(--d2-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--d2-acc);
  padding-right:.08em}
#eks .d2-hero h1 .ln i{animation-duration:.8s;animation-timing-function:var(--d2-ease)}
#eks .d2-hero .h1sub{margin-top:22px;font-family:var(--d2-mono);font-weight:400;font-size:clamp(.74rem,1vw,.84rem);letter-spacing:.08em;
  text-transform:uppercase;color:var(--d2-dim);line-height:1.7}
#eks .d2-hero .sub{font-size:clamp(1.02rem,1.4vw,1.2rem);font-weight:400;color:var(--d2-dim);letter-spacing:-.01em;max-width:560px;margin-bottom:32px}
#eks .d2-hero .sub b{color:var(--d2-text);font-weight:600}
#eks .d2-hero .hero-meta{margin-top:44px;padding-top:22px;gap:28px;border-top:1px solid var(--d2-line)}
#eks .d2-hero .hero-meta div b{font-size:1rem;font-weight:600;letter-spacing:-.02em}
#eks .d2-hero .hero-meta div span{font-family:var(--d2-mono);font-size:.68rem;letter-spacing:.08em;color:var(--d2-mute)}

/* --- Karte rechts: „So läuft ein Projekt“ --- */
#eks .d2-karte{position:relative;border:1px solid var(--d2-line2);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,rgba(22,18,15,.62),rgba(12,10,9,.78));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;transform:translateY(16px);animation:d2rein .8s var(--d2-ease) .35s forwards}
#eks .d2-k-kopf{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--d2-line);
  font-family:var(--d2-mono);font-size:.7rem;letter-spacing:.06em;color:var(--d2-dim)}
#eks .d2-punkte{display:flex;gap:6px}
#eks .d2-punkte i{width:9px;height:9px;border-radius:50%;background:var(--d2-line2)}
#eks .d2-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--d2-line2);border-radius:999px;color:var(--d2-text)}
#eks .d2-status i{width:6px;height:6px;border-radius:50%;background:var(--d2-acc)}
#eks .d2-foto{position:relative;margin:0;height:200px;overflow:hidden;border-bottom:1px solid var(--d2-line)}
#eks .d2-foto img.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:grayscale(.35) contrast(1.05) brightness(.8)}
#eks .d2-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 55%)}
#eks .d2-foto figcaption{position:absolute;left:16px;bottom:12px;z-index:2;font-family:var(--d2-mono);font-size:.68rem;letter-spacing:.06em;color:#E9E4DE}
#eks .d2-fluss{list-style:none;margin:0;padding:10px 0;counter-reset:d2}
#eks .d2-fluss li{counter-increment:d2;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 16px;position:relative}
#eks .d2-fluss li::before{content:"0" counter(d2);font-family:var(--d2-mono);font-size:.7rem;color:var(--d2-mute)}
#eks .d2-fluss li:not(:last-child)::after{content:"";position:absolute;left:58px;right:16px;bottom:0;height:1px;background:var(--d2-line)}
#eks .d2-fluss b{display:block;font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--d2-text)}
#eks .d2-fluss span{display:block;font-family:var(--d2-mono);font-size:.68rem;color:var(--d2-dim);margin-top:2px}
#eks .d2-fluss em{font-style:normal;font-family:var(--d2-mono);font-size:.66rem;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  border:1px solid var(--d2-line2);color:var(--d2-mute)}
#eks .d2-fluss li.ok em{color:var(--d2-acc);border-color:color-mix(in srgb,var(--d2-acc) 45%,transparent)}
#eks .d2-fluss li.jetzt{background:var(--d2-card)}
#eks .d2-fluss li.jetzt em{background:var(--d2-acc);color:var(--d2-acc-ink);border-color:var(--d2-acc)}
#eks .d2-fluss li.jetzt::before{color:var(--d2-acc)}

@keyframes d2rein{to{opacity:1;transform:none}}

/* ---------- Vertrauensleiste ---------- */
#eks .trust{background:var(--d2-bg);color:var(--d2-dim);border-top:1px solid var(--d2-line);border-bottom:1px solid var(--d2-line);padding:16px 0}
#eks .trust .wrap{font-family:var(--d2-mono);font-size:.74rem;font-weight:400;letter-spacing:.04em;gap:10px 34px}

/* ---------- Leistungs-Stapel (Bilder bleiben, nur dunkler und ruhiger) ---------- */
#eks .panel .tint{display:none}
#eks .panel .bgimg{filter:grayscale(.55) brightness(.75)}
#eks .panel .veil{background:linear-gradient(96deg,rgba(10,9,8,.97) 0%,rgba(10,9,8,.88) 44%,rgba(10,9,8,.35) 100%)}
#eks[data-d2="limette"] .panel .veil{background:linear-gradient(96deg,rgba(7,10,8,.97) 0%,rgba(7,10,8,.88) 44%,rgba(7,10,8,.35) 100%)}
#eks .panel .num{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500;letter-spacing:.14em}
#eks .panel h2{font-weight:600;letter-spacing:-.045em}
#eks .panel p{color:var(--d2-dim)}
#eks .panel .tags span{font-family:var(--d2-mono);font-size:.7rem;letter-spacing:.03em;border-color:var(--d2-line2);background:rgba(0,0,0,.25);color:var(--d2-text)}

/* ---------- Ehemals helle Bereiche: jetzt dunkel ---------- */
#eks .light,#eks .weiter{background:var(--d2-bg2);color:var(--d2-text);border-top:1px solid var(--d2-line)}
#eks .light .lead{color:var(--d2-dim)}
#eks .light .eyebrow{color:var(--d2-acc)}
#eks .ul-check .dot{background:transparent;border:1px solid var(--d2-acc);color:var(--d2-acc)}
#eks .collage .ph{border:1px solid var(--d2-line);filter:grayscale(.3)}

#eks .flow .step,#eks .stepcard,#eks .card,#eks .weiter .card{background:var(--d2-card);border:1px solid var(--d2-line);color:var(--d2-text);
  transition:transform .25s var(--d2-ease),border-color .25s var(--d2-ease),background-color .25s var(--d2-ease)}
#eks .flow .step:hover,#eks .stepcard:hover,#eks .card:hover{transform:translateY(-3px);box-shadow:none;border-color:var(--d2-line2);background:var(--d2-card2)}
#eks .flow .shot{background-color:#EDEAE5;border-bottom:1px solid var(--d2-line)}
#eks .flow .s3{background-color:transparent}
#eks .flow .badge{background:none;border:1px solid var(--d2-line2);color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500;letter-spacing:.08em}
#eks .flow p,#eks .stepcard p,#eks .stepcard ul,#eks .card p,#eks .weiter .card p{color:var(--d2-dim)}
#eks .weiter .card h3{color:var(--d2-text)}
#eks .stepcard::before{background:var(--d2-acc);width:2px}
#eks .stepcard .n{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--d2-acc);
  font-family:var(--d2-mono);font-weight:500;font-size:.9rem;letter-spacing:.1em}
#eks .card .ic{background:var(--d2-card2);border:1px solid var(--d2-line2);color:var(--d2-acc)}
#eks .card .ic svg{stroke:var(--d2-acc)}
#eks .card .more{color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500;font-size:.78rem;letter-spacing:.04em}

#eks .ref{border:1px solid var(--d2-line)}
#eks .ref .tagline{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500}

/* ---------- Zahlen ---------- */
#eks .stats{background:var(--d2-bg)}
#eks .stats .bgg{opacity:.18;filter:grayscale(1)}
#eks .stat{background:var(--d2-card);border-color:var(--d2-line)}
#eks .stat b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--d2-text);font-weight:600;letter-spacing:-.05em}
#eks .stat span{font-family:var(--d2-mono);font-size:.74rem;letter-spacing:.03em;color:var(--d2-dim)}

/* ---------- Team, Beiträge, Kontakt, Fuß ---------- */
#eks .person{background:var(--d2-card)}
#eks .person::after{background:var(--d2-acc);height:1px}
#eks .person:hover{border-color:var(--d2-line2)}
#eks .person .av{background:var(--d2-card2);border:1px solid var(--d2-line2);color:var(--d2-acc);font-family:var(--d2-serif);font-style:italic;font-weight:400;font-size:1.5rem}
#eks .person .role{color:var(--d2-acc);font-family:var(--d2-mono);letter-spacing:.06em}
#eks .person a:hover,#eks .foot-grid a:hover{color:var(--d2-acc)}
#eks .post{background:var(--d2-card)}
#eks .post:hover{border-color:var(--d2-line2)}
#eks .post .band,#eks .post .bild::before{background:var(--d2-acc);height:2px}
#eks .post .bild::after{display:none}
#eks .post .bild img{filter:grayscale(.3)}
#eks .post .tag{color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500;letter-spacing:.06em}
#eks .contact{background:var(--d2-bg2);border-top:1px solid var(--d2-line)}
#eks .info-block .item .ic{background:var(--d2-card2);border:1px solid var(--d2-line2);color:var(--d2-acc)}
#eks .info-block .item b{font-family:var(--d2-mono);font-weight:500;letter-spacing:.08em}
#eks .formbox{background:var(--d2-card);border-color:var(--d2-line2)}
#eks .ekfoot{background:var(--d2-bg)}
#eks .foot-grid h4{font-family:var(--d2-mono);font-weight:500;letter-spacing:.1em}

/* ---------- Unterseiten (Kopf „hero-klein“, Fließtext) ---------- */
#eks .hero-klein{background:radial-gradient(55% 70% at 80% 20%,var(--d2-glow),transparent 70%),var(--d2-bg)}
#eks .hero-klein .bgv{opacity:.12;filter:grayscale(1)}
#eks .hero-klein h1{font-weight:600;letter-spacing:-.045em}
#eks .krume{font-family:var(--d2-mono);letter-spacing:.08em;color:var(--d2-acc)}
#eks .inhalt p,#eks .inhalt li{color:var(--d2-dim)}
#eks .inhalt strong,#eks .inhalt b{color:var(--d2-text)}
#eks .inhalt a{color:var(--d2-acc)}
#eks .inhalt blockquote{background:var(--d2-card);border-left-color:var(--d2-acc)}
#eks .inhalt blockquote p{color:var(--d2-text)}

/* ---------- Erscheinen beim Scrollen: kürzer, weicher ---------- */
#eks .rv{transform:translateY(14px);transition:opacity .6s var(--d2-ease),transform .6s var(--d2-ease)}
#eks .rv-d1{transition-delay:.06s}#eks .rv-d2{transition-delay:.12s}#eks .rv-d3{transition-delay:.18s}

/* ---------- Mobil ---------- */
@media (max-width:980px){
  #eks .d2-hero .d2-grid{grid-template-columns:1fr}
  #eks .d2-hero .hero-inner{padding:118px 0 56px}
  #eks .d2-foto{height:170px}
}
@media (max-width:560px){
  #eks .d2-k-kopf .d2-titel{display:none}
  #eks .d2-fluss li{grid-template-columns:28px 1fr auto;padding:9px 14px}
  #eks .d2-fluss li:not(:last-child)::after{left:52px}
  #eks .d2-hero .hero-meta{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  #eks .d2-pille,#eks .d2-karte{opacity:1;transform:none;animation:none}
}

/* ---------- Einwilligungs-Leiste (liegt außerhalb von #eks) ---------- */
body .ekck{background:rgba(12,11,10,.94)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,240,225,.14)!important;box-shadow:0 -20px 60px -20px rgba(0,0,0,.8)!important}
body .ekck button{border-radius:999px!important;border:1px solid rgba(255,240,225,.22)!important;font-weight:600!important}
body .ekck .ja{background:#F6A61B!important;color:#1A0F02!important;border-color:#F6A61B!important}
body .ekck .nein{background:rgba(255,248,240,.05)!important;color:#F1ECE6!important}
body .ekck .mehr{border:none!important}
body .ekck a{color:#F6A61B!important}

/* ---------- Nachträge nach erster Sichtprüfung ---------- */
#eks .grad-text{font-family:var(--d2-serif);font-style:italic;font-weight:400;letter-spacing:-.015em;padding-right:.06em}
#eks .card .mehr{color:var(--d2-acc);font-family:var(--d2-mono);font-weight:500;font-size:.78rem;letter-spacing:.04em;display:inline-flex;gap:7px}
#eks .formbox{align-self:start}
@media (max-width:980px){#eks .d2-schweif{opacity:.55}}
#eks .hero-klein{overflow:hidden}
#eks .hero-klein .wrap{position:relative;z-index:3}
#eks .hero-klein .d2-schweif{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 48%,#000 78%);mask-image:linear-gradient(90deg,transparent 0,transparent 48%,#000 78%)}
#eks .hero-klein + .light{margin-top:0;border-radius:0}
#eks .hero-klein + .light > .sec:first-child{padding-top:clamp(48px,6vw,80px)}

/* =====================================================================
   Fassung 2 (05.10.2026): nach Prüfagenten + zweitem Video
   ===================================================================== */
html,body{margin:0;background:#0A0908}
html{color-scheme:dark}
/* Lichtschweif größer und sichtbar: links frei für den Text, ab der Mitte voll */
#eks .d2-hero .d2-schweif{opacity:1;-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 46%);mask-image:linear-gradient(90deg,transparent 0,transparent 16%,#000 46%)}
#eks .d2-hero .d2-links{position:relative;z-index:3}
#eks .d2-hero .d2-links::before{content:"";position:absolute;inset:-40px -60px -40px -200px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,9,8,.85),rgba(10,9,8,0))}
#eks .d2-karte{z-index:3}

/* Unsichtbares Mobilmenü nicht fokussierbar */
#eks .mobile{visibility:hidden;transition:opacity .25s var(--d2-ease),transform .25s var(--d2-ease),visibility 0s .25s}
#eks .mobile.open{visibility:visible;transition-delay:0s}

/* Leistungs-Bilder: Text links sicher lesbar */
#eks .panel .veil{background:linear-gradient(96deg,rgba(10,9,8,.97) 0%,rgba(10,9,8,.9) 55%,rgba(10,9,8,.45) 100%)}
#eks .ref .cap{background:linear-gradient(to top,rgba(10,9,8,.92) 0%,rgba(10,9,8,.55) 55%,transparent 100%)}

/* Unterseite: Abstand über „Weitere Leistungen“ */
#eks .weiter{padding-top:clamp(64px,8vw,104px)}

/* Pläne wie ein Blatt auf dunklem Tisch */
#eks .flow .shot{background-color:var(--d2-bg3);padding:20px}
#eks .flow .s1,#eks .flow .s2{background-origin:content-box}

/* Serifen-Kursive in jeder Überschrift (wie im Vorbild) */
#eks h2 .d2-it,#eks .panel h2 .d2-it{color:var(--d2-acc)}

/* Vertrauensleiste = volle orange Fläche (der „Farbblock“ aus dem Vorbild) */
#eks .trust{background:var(--d2-acc);color:var(--d2-acc-ink);border:0;padding:18px 0}
#eks .trust .wrap{font-weight:500;font-size:.76rem;gap:8px 30px}

/* Kontakt: orange Karte als Abschluss */
#eks .formbox{background:var(--d2-acc);border-color:transparent;color:var(--d2-acc-ink);
  box-shadow:0 40px 80px -40px var(--d2-glow)}
#eks .formbox h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:650;letter-spacing:-.04em;color:var(--d2-acc-ink)}
#eks .formbox p{color:rgba(26,15,2,.78)}
#eks .formbox .btn-primary{background:var(--d2-acc-ink);color:#FFF4E2;box-shadow:none}
#eks .formbox .btn-ghost{background:rgba(26,15,2,.06);border-color:rgba(26,15,2,.35);color:var(--d2-acc-ink)}
#eks .formbox .btn-ghost:hover{border-color:var(--d2-acc-ink);color:var(--d2-acc-ink)}

/* Leichter Lichtschein hinter den Abschnitten */
#eks .light{background:radial-gradient(50% 40% at 100% 0%,rgba(246,166,27,.07),transparent 70%),radial-gradient(40% 30% at 0% 60%,rgba(232,84,30,.05),transparent 70%),var(--d2-bg2)}
#eks .contact{background:radial-gradient(45% 60% at 85% 40%,rgba(246,166,27,.10),transparent 70%),var(--d2-bg2)}

/* Ablauf-Karte: Schritte nacheinander einblenden (50 ms Abstand) */
#eks .d2-fluss li{opacity:0;transform:translateY(6px);animation:d2rein .45s var(--d2-ease) forwards}
#eks .d2-fluss li:nth-child(1){animation-delay:.55s}#eks .d2-fluss li:nth-child(2){animation-delay:.6s}
#eks .d2-fluss li:nth-child(3){animation-delay:.65s}#eks .d2-fluss li:nth-child(4){animation-delay:.7s}
#eks .d2-fluss li:nth-child(5){animation-delay:.75s}
#eks .d2-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hover nur mit Maus (Touch löst sonst Schein-Hover aus) */
@media (hover:none){
  #eks .btn:hover,#eks .flow .step:hover,#eks .stepcard:hover,#eks .card:hover,#eks .person:hover,#eks .post:hover{transform:none}
}

/* Einwilligung: beide Wahlmöglichkeiten gleich gut sichtbar */


/* Bewegung reduzieren: nichts verschoben lassen */
@media (prefers-reduced-motion:reduce){
  #eks .rv{transform:none;transition:opacity .2s linear}
  #eks .d2-fluss li{opacity:1;transform:none;animation:none}
}
@media (max-width:980px){
  #eks .d2-hero .d2-schweif{opacity:.6;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 35%,rgba(0,0,0,.15) 70%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 35%,rgba(0,0,0,.15) 70%)}
  #eks .d2-hero .d2-links::before{display:none}
}
#eks .d2-hero .d2-schweif{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 36%,#000 52%);mask-image:linear-gradient(90deg,transparent 0,transparent 36%,#000 52%)}
#eks .trust .wrap{font-size:.7rem;gap:8px 22px}

@media (max-width:980px){
  #eks .d2-hero .d2-schweif{opacity:.45;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 12%,transparent 26%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 12%,transparent 26%)}
}

/* ---------- Fassung 2b: nach Prüfrunde 2 ---------- */
#eks .trust .wrap{flex-wrap:wrap;justify-content:center;white-space:normal}
@media (min-width:1400px){#eks .trust .wrap{flex-wrap:nowrap;justify-content:space-between;white-space:nowrap}}
#eks .formbox :focus-visible,#eks .trust :focus-visible{outline-color:var(--d2-acc-ink)}
/* Karte etwas durchsichtiger, damit der Lichtschweif durchschimmert */
#eks .d2-karte{background:linear-gradient(180deg,rgba(22,18,15,.50),rgba(12,10,9,.70))}
/* Handy: Lichtschweif nur im sichtbaren oberen Teil zeichnen */
@media (max-width:980px){
  #eks .d2-hero .d2-schweif{height:min(100%,560px);bottom:auto;opacity:.55;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 95%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 95%)}
}
/* Unterseite: weicher Auslauf nach unten */
#eks .hero-klein .d2-schweif{
  -webkit-mask-image:linear-gradient(90deg,transparent 48%,#000 78%),linear-gradient(180deg,#000 60%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent 48%,#000 78%),linear-gradient(180deg,#000 60%,transparent)}
/* Offenes Mobilmenü: Kopfzeile (mit Menüknopf) bleibt obenauf, damit man es wieder schließen kann */
#eks .ekhd{z-index:9600}
/* Einwilligung: beide Möglichkeiten gleich dargestellt */
body .ekck{border-image:none!important}
body .ekck .ja,body .ekck .nein{background:#F6A61B!important;color:#1A0F02!important;border:1px solid #F6A61B!important}