/* ============================================================
   torstenkoerting.com — gemeinsames Stylesheet
   Von index.html UND en/index.html genutzt. Bewusste Abweichung vom
   Single-File-Prinzip des Briefings: bei zwei Sprachfassungen wäre ein
   dupliziertes Inline-CSS die sichere Quelle für Divergenz.
   ============================================================ */

/* ============================================================
   Fonts — lokal, kein CDN, kein Google-Fonts-Request.
   Effra ist lizenziert (Lizenz liegt bei Torsten Koerting).
   ============================================================ */
@font-face{font-family:'Effra';src:url('/assets/fonts/effra-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Effra';src:url('/assets/fonts/effra-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Effra';src:url('/assets/fonts/effra-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Effra';src:url('/assets/fonts/effra-heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto Mono';src:url('/assets/fonts/roboto-mono-variable.woff2') format('woff2-variations');font-weight:100 700;font-style:normal;font-display:swap}

/* ============================================================
   Tokens — Basis-Set aus der Design-Übergabe des Website-Motors.
   Bewusste Abweichung vom #DevOps-Kanon: dieselbe Design-Familie
   wie die Instituts-Website hat Vorrang (siehe CLAUDE.md).
   ============================================================ */
:root{
  --bg:#141414; --bg-soft:#191919;
  --lime:#C4D600; --pink:#E6007E;
  --lime-dark:#9DA346; --pink-dark:#942F60;
  --text:#fff; --text-muted:rgba(255,255,255,.65); --text-subtle:rgba(255,255,255,.58);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --surface:rgba(255,255,255,.04); --surface-hover:rgba(255,255,255,.08);
  --glass-bg:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.10);
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px;
  --max-w:1180px;
  --font:'Effra','DM Sans','Inter',system-ui,-apple-system,sans-serif;
  --mono:'Roboto Mono','Consolas',ui-monospace,monospace;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.022em; line-height:1.1}
p{margin:0}
button{font:inherit; color:inherit}

/* Ein Lime-Wort in der Headline — Vollton, nie ein Lime-Pink-Verlauf. */
.accent{color:var(--lime)}

/* Film-Grain über der ganzen Seite, ~5 % Deckkraft. */
body::after{
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--bg-soft); color:var(--text); padding:14px 20px; border-radius:var(--radius-sm);
}
.skip:focus{left:16px; top:16px}

:focus-visible{outline:2px solid var(--lime); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px}
.section{padding:104px 0}
.section--soft{background:var(--bg-soft)}
@media(max-width:900px){.section{padding:72px 0}}

/* ---------- Section-Header: Mono-Eyebrow mit Akzentstrich, H2, Intro ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.19em; text-transform:uppercase; color:var(--lime); margin-bottom:18px;
}
.eyebrow::before{content:''; width:32px; height:1px; background:var(--lime); flex:none}
.eyebrow--plain::before{display:none}
.h2{font-size:clamp(28px,3.6vw,42px); letter-spacing:-.025em}
.lead{margin-top:20px; max-width:640px; color:var(--text-muted); font-size:17px}

/* ---------- Buttons: EIN Muster — flach, -2px Lift, Glow ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px; border-radius:999px;
  font-weight:700; font-size:15px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; background:none;
  transition:transform var(--ease) .18s, box-shadow var(--ease) .18s,
             background-color var(--ease) .18s, border-color var(--ease) .18s, color var(--ease) .18s;
}
.btn--primary{
  background:var(--pink); color:#fff;
  box-shadow:0 10px 32px -12px rgba(230,0,126,.5);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 44px -10px rgba(230,0,126,.65)}
.btn--ghost{
  background:rgba(20,20,20,.55); color:#fff;
  border-color:rgba(255,255,255,.28); backdrop-filter:blur(10px);
}
.btn--ghost:hover{transform:translateY(-2px); border-color:rgba(196,214,0,.55); color:var(--lime)}
.btn svg{width:16px; height:16px; flex:none}

/* ---------- Karten: EIN Muster — -3px Lift, Lime-Kante ---------- */
.card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 40px -28px rgba(0,0,0,.8);
  backdrop-filter:blur(20px);
}
a.card,.card--link{transition:transform var(--ease) .2s, border-color var(--ease) .2s; text-decoration:none}
a.card:hover,.card--link:hover{transform:translateY(-3px); border-color:rgba(196,214,0,.55)}

/* ---------- Navigation: schwebende Glas-Pille, bewegt sich nie ---------- */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:8000;
  display:flex; align-items:center; gap:26px;
  max-width:calc(100vw - 32px); padding:9px 12px 9px 22px;
  border-radius:999px; background:rgba(20,20,20,.66);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:saturate(140%) blur(16px); -webkit-backdrop-filter:saturate(140%) blur(16px);
  box-shadow:0 8px 30px -16px rgba(0,0,0,.55);
}
.nav__brand{display:flex; align-items:center; text-decoration:none; flex:none}
.nav__brand-name{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; white-space:nowrap;
}
.nav__brand-name b{font-weight:700}
.nav__links{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.nav__link{
  display:inline-flex; align-items:center; min-height:44px;   /* Klickfläche, nicht nur Text */
  font-size:14px; font-weight:500; color:var(--text-muted); text-decoration:none;
  white-space:nowrap; transition:color var(--ease) .18s;
}
.nav__link:hover{color:#fff}
.nav__link[aria-current="page"],.nav__link.is-active{color:var(--lime)}
.nav__actions{display:flex; align-items:center; gap:8px; margin-left:auto}
/* Alle Pillen teilen EIN Hover: Lime-Kante, Lime-Text. Nichts bewegt sich. */
.bubble{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 17px; border-radius:999px;
  font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:color var(--ease) .18s, border-color var(--ease) .18s, background-color var(--ease) .18s;
}
.bubble svg{width:15px; height:15px; flex:none}
.bubble--glass{background:rgba(20,20,20,.55); border-color:rgba(255,255,255,.28); color:#fff}
.bubble--cta{background:var(--pink); color:#fff; border-color:transparent}
.bubble--glass:hover,.bubble--cta:hover{border-color:rgba(196,214,0,.55); color:var(--lime); background:rgba(20,20,20,.72)}
.nav__burger{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px;
  background:rgba(20,20,20,.55); border:1px solid rgba(255,255,255,.28); cursor:pointer;
}
.nav__burger svg{width:18px; height:18px}

@media(max-width:1180px){ .nav__actions .bubble--secondary{display:none} }
@media(max-width:1020px){
  .nav{flex-wrap:wrap; padding:9px 12px}
  .nav__burger{display:inline-flex; order:3}
  .nav__links{
    display:none; order:4; width:100%; flex-direction:column; align-items:stretch;
    gap:2px; padding:12px 4px 6px; border-top:1px solid var(--border); margin-top:9px;
  }
  .nav.is-open{border-radius:22px; background:rgba(10,10,10,.92)}
  .nav.is-open .nav__links{display:flex}
  .nav__links .nav__link{padding:13px 14px; font-size:16px; border-radius:var(--radius-sm)}
  .nav__actions{margin-left:auto; order:2}
}
@media(max-width:760px){ .nav{top:10px; padding:8px 10px} .nav__brand-name{font-size:11px} }
@media(max-width:480px){
  .bubble{padding:0 13px}
  .bubble__label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}

/* ============================================================
   Hero — die große Bühne
   ============================================================ */
.hero{
  position:relative; min-height:94vh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 72px; overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img,.hero__media video{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
.hero__video{position:absolute; inset:0; opacity:0; transition:opacity .35s linear}
.hero__video.is-on{opacity:1}
/* Doppel-Scrim: Links-Verlauf hinter der Textspalte, vertikale Klammer. */
.hero__scrim{position:absolute; inset:0; z-index:1}
.hero__scrim::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(15,15,15,.94) 0%, rgba(17,17,17,.80) 38%, rgba(20,20,20,.28) 70%, rgba(20,20,20,.12) 100%);
}
.hero__scrim::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.10) 34%, rgba(20,20,20,.55) 82%, var(--bg) 100%);
}
/* Einzelfarbige Glows, nie gemischt. */
.hero__glow{position:absolute; inset:0; z-index:1; pointer-events:none}
.hero__glow::before,.hero__glow::after{content:''; position:absolute; border-radius:50%; filter:blur(90px)}
.hero__glow::before{width:520px; height:520px; left:-160px; bottom:-140px; background:rgba(196,214,0,.13)}
.hero__glow::after{width:420px; height:420px; right:-120px; top:-100px; background:rgba(230,0,126,.10)}
.hero__inner{position:relative; z-index:2; width:100%}
.hero__col{max-width:660px}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 15px 7px 13px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted);
  backdrop-filter:blur(10px);
}
.badge__dot{width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none; animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.2); opacity:.5}}

.hero__title{
  margin:26px 0 0; font-size:clamp(38px,5.6vw,66px); line-height:1.04; letter-spacing:-.028em;
  text-shadow:0 0 1px rgba(255,255,255,.35), 0 0 64px rgba(196,214,0,.22), 0 18px 50px rgba(0,0,0,.6);
}
.hero__sub{margin-top:24px; max-width:560px; font-size:18px; color:rgba(255,255,255,.78)}
.hero__quote{
  margin-top:18px; max-width:540px; font-size:16px; color:var(--text-muted);
  padding-left:16px; border-left:2px solid rgba(196,214,0,.45);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
/* Foto-Abbinder: die einzige Haarlinie der Seite sitzt, wo das Bild hart endet. */
.hero__hairline{position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--border-strong); z-index:3}

.hero__pause{
  position:absolute; right:24px; bottom:32px; z-index:4;
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(20,20,20,.6); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); cursor:pointer;
  transition:border-color var(--ease) .18s, color var(--ease) .18s;
}
.hero__pause.is-visible{display:inline-flex}
.hero__pause:hover{border-color:rgba(196,214,0,.55); color:var(--lime)}
.hero__pause svg{width:16px; height:16px}
@media(max-width:900px){
  .hero{min-height:auto; padding:calc(var(--nav-h) + 72px) 0 64px}
  .hero__sub{font-size:16.5px}
}

/* ============================================================
   Trust-Bar — Mono-Zahlen mit Count-up
   ============================================================ */
.stats{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-soft)}
.stats__row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border)}
.stat{background:var(--bg-soft); padding:38px 26px}
.stat__num{font-family:var(--mono); font-size:clamp(28px,3.4vw,40px); font-weight:500; letter-spacing:-.03em; color:var(--lime)}
.stat__label{margin-top:10px; font-size:14px; color:var(--text-muted); line-height:1.5}
/* Textlink statt klickbarer Kachel: die Zellen sitzen in einem 1-px-Raster,
   ein Karten-Lift würde die Trennlinien zerschneiden. Textlink-Regel = nur Farbe. */
.stat__go{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:13.5px; font-weight:700; color:var(--text-muted); text-decoration:none;
  transition:color var(--ease) .18s;
}
.stat__go:hover{color:var(--lime)}
.stat__go svg{width:13px; height:13px}
/* CEIBS als Logo statt als Wort — dieselbe Normierung wie die Logo-Wand. */
.stat__logo{height:38px; width:auto; filter:brightness(0) invert(1); opacity:.92}
@media(max-width:900px){
  .stats__row{grid-template-columns:repeat(2,1fr)}
  .stat{padding:28px 20px}
}

/* ============================================================
   Logo-Wand — alles auf weiße Silhouetten normiert, kein Hover
   ============================================================ */
.logowall{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:36px 28px; align-items:center; margin-top:40px}
.logowall img{
  max-height:36px; width:auto; margin:0 auto; opacity:.7;
  filter:brightness(0) invert(1);
}
@media(max-width:640px){
  .logowall{grid-template-columns:repeat(3,1fr); gap:26px 18px}
  .logowall img{max-height:28px}
}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}

/* ============================================================
   Das Thema — Pink-akzentuierte Kästen
   ============================================================ */
.thesis{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
.thesis__body p+p{margin-top:18px}
.thesis__body{color:var(--text-muted); font-size:17px}
.thesis__body strong{color:var(--text); font-weight:700}
.gaps{display:flex; flex-direction:column; gap:14px}
.gap{
  padding:20px 22px; border-radius:var(--radius-md);
  background:rgba(230,0,126,.05); border:1px solid rgba(230,0,126,.20);
  border-left:2px solid var(--pink);
}
.gap__k{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pink)}
.gap__t{margin-top:8px; font-size:15.5px; color:rgba(255,255,255,.86)}
@media(max-width:900px){.thesis{grid-template-columns:1fr; gap:36px}}

/* ============================================================
   Keynotes — breite gestapelte Blöcke, nicht drei enge Spalten
   ============================================================ */
.kn{display:flex; flex-direction:column; gap:22px; margin-top:44px}
.kn__item{
  display:grid; grid-template-columns:96px 1fr; gap:36px;
  padding:34px 34px 34px 30px; border-radius:var(--radius-lg);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 18px 40px -30px rgba(0,0,0,.8);
  transition:border-color var(--ease) .22s;
}
.kn__item:hover{border-color:rgba(196,214,0,.35)}
.kn__num{font-family:var(--mono); font-size:34px; font-weight:300; color:rgba(196,214,0,.32); line-height:1; letter-spacing:-.02em}
.kn__title{font-size:clamp(21px,2.3vw,27px); letter-spacing:-.022em}
.kn__promise{margin-top:14px; color:rgba(255,255,255,.82); font-size:16.5px; max-width:70ch}
.kn__desc{margin-top:12px; color:var(--text-muted); font-size:15.5px; max-width:74ch}
.kn__points{margin:20px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:9px 26px}
.kn__points li{position:relative; padding-left:22px; font-size:15px; color:var(--text-muted)}
.kn__points li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border-radius:50%; border:1.5px solid var(--lime);
}
.kn__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.tag{
  display:inline-flex; align-items:center; padding:5px 13px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text-muted);
}
.tag--proof{background:rgba(196,214,0,.08); border-color:rgba(196,214,0,.28); color:var(--lime)}
@media(max-width:900px){
  .kn__item{grid-template-columns:1fr; gap:16px; padding:28px 24px}
  .kn__points{grid-template-columns:1fr}
}

/* ============================================================
   Formate — Timeline mit Mono-Dauer links
   ============================================================ */
.fmt{margin-top:40px; border-top:1px solid var(--border)}
.fmt__row{
  display:grid; grid-template-columns:150px 1fr; gap:32px;
  padding:26px 4px; border-bottom:1px solid var(--border);
}
.fmt__when{font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--lime); padding-top:3px}
.fmt__what h3{font-size:19px; letter-spacing:-.018em}
.fmt__what p{margin-top:8px; color:var(--text-muted); font-size:15.5px; max-width:74ch}
@media(max-width:640px){.fmt__row{grid-template-columns:1fr; gap:8px}}

/* ============================================================
   Person
   ============================================================ */
.person{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start}
.person__figure{position:relative}
/* height:auto ist Pflicht — ohne das erzwingt das height-Attribut des Bildes
   eine feste Höhe und das Foto wird gestaucht. */
.person__figure img{width:100%; height:auto; border-radius:var(--radius-lg); border:1px solid var(--border)}
.person__body{color:var(--text-muted); font-size:17px}
.person__body p+p{margin-top:18px}
.person__body strong{color:var(--text); font-weight:700}
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
@media(max-width:900px){.person{grid-template-columns:1fr; gap:34px}}

/* ============================================================
   Bücher
   ============================================================ */
.books{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.book{display:flex; flex-direction:column}
.book__cover{
  display:flex; align-items:flex-end; justify-content:center;
  aspect-ratio:3/4; padding:22px; border-radius:var(--radius-md);
  background:var(--bg-soft); border:1px solid var(--border); overflow:hidden;
}
.book__cover img{max-height:100%; width:auto; object-fit:contain}
.book__t{margin-top:20px; font-size:19px; letter-spacing:-.018em}
.book__c{margin-top:10px; color:var(--text-muted); font-size:15px; flex:1}
.book__facts{margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--lime); text-transform:uppercase}
.book__link{
  display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  min-height:44px;                                   /* Klickfläche */
  font-size:14.5px; font-weight:700; color:var(--text-muted); text-decoration:none;
  transition:color var(--ease) .18s;
}
.book__link:hover{color:var(--lime)}
.book__link svg{width:14px; height:14px}

.book--soon .book__cover{position:relative}
.book__soon{
  position:absolute; left:14px; top:14px; z-index:2;
  padding:5px 12px; border-radius:999px;
  background:rgba(20,20,20,.82); border:1px solid rgba(196,214,0,.45);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--lime);
  backdrop-filter:blur(6px);
}
@media(max-width:900px){.books{grid-template-columns:1fr; gap:34px; max-width:420px}}

/* ============================================================
   Podcast
   ============================================================ */
.pod{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:8px}
.pod__eps{display:flex; flex-direction:column; gap:10px; margin-top:30px}
.ep{
  display:grid; grid-template-columns:56px 1fr auto; gap:16px; align-items:center;
  padding:12px 16px 12px 12px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border); text-decoration:none;
  transition:transform var(--ease) .2s, border-color var(--ease) .2s;
}
.ep:hover{transform:translateY(-3px); border-color:rgba(196,214,0,.55)}
.ep img{width:56px; height:56px; border-radius:8px; object-fit:cover}
.ep__n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--lime)}
.ep__t{margin-top:3px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.88); line-height:1.4}
.ep__go{color:var(--text-subtle)}
.ep__go svg{width:16px; height:16px}
.platforms{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
@media(max-width:900px){.pod{grid-template-columns:1fr; gap:34px}}

/* ============================================================
   Stimmen
   ============================================================ */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px}
.quote{
  padding:32px 32px 28px; border-radius:var(--radius-lg);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.quote__mark{font-family:var(--mono); font-size:34px; line-height:.6; color:rgba(196,214,0,.34)}
.quote__t{margin-top:16px; font-size:17.5px; line-height:1.5; color:rgba(255,255,255,.92)}
.quote__src{margin-top:18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle)}
.quote__src b{color:var(--lime); font-weight:400}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* ============================================================
   Presse-Kit
   ============================================================ */
.press{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; margin-top:44px}
.bio{padding:24px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border)}
.bio+.bio{margin-top:14px}
.bio__head{display:flex; align-items:center; justify-content:space-between; gap:16px}
.bio__len{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--lime)}
.bio__copy{
  display:inline-flex; align-items:center; gap:7px;
  min-height:32px; padding:5px 13px; border-radius:999px;
  background:transparent; border:1px solid var(--border-strong);
  font-size:12.5px; font-weight:700; color:var(--text-muted); cursor:pointer;
  transition:color var(--ease) .18s, border-color var(--ease) .18s;
}
.bio__copy:hover{color:var(--lime); border-color:rgba(196,214,0,.55)}
.bio__copy svg{width:13px; height:13px}
.bio__text{margin-top:14px; font-size:15px; color:var(--text-muted)}
.dl{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.dl__item{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
  text-decoration:none; transition:transform var(--ease) .2s, border-color var(--ease) .2s;
}
.dl__item:hover{transform:translateY(-3px); border-color:rgba(196,214,0,.55)}
.dl__icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:10px;
  background:rgba(196,214,0,.10); color:var(--lime);
}
.dl__icon svg{width:17px; height:17px}
.dl__t{font-size:15px; font-weight:700}
.dl__m{margin-top:2px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-subtle); text-transform:uppercase}
@media(max-width:900px){.press{grid-template-columns:1fr; gap:32px}}

/* ============================================================
   FAQ — <details> statt JS
   ============================================================ */
.faq{margin-top:40px; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  display:grid; grid-template-columns:44px 1fr 24px; gap:16px; align-items:center;
  padding:22px 4px; cursor:pointer; list-style:none;
  transition:color var(--ease) .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lime)}
.faq__n{font-family:var(--mono); font-size:12px; color:var(--lime); letter-spacing:.06em}
.faq__q{font-size:17px; font-weight:700; letter-spacing:-.015em}
.faq__i{position:relative; width:16px; height:16px; justify-self:end}
.faq__i::before,.faq__i::after{
  content:''; position:absolute; left:0; top:7.5px; width:16px; height:1.5px;
  background:currentColor; transition:transform var(--ease) .22s;
}
.faq__i::after{transform:rotate(90deg)}
.faq details[open] .faq__i::after{transform:rotate(0)}
.faq details[open] summary{color:var(--lime)}
.faq__a{padding:0 4px 26px 64px; color:var(--text-muted); font-size:15.5px; max-width:80ch}
.faq details[open]{background:rgba(255,255,255,.02)}
@media(max-width:640px){
  .faq summary{grid-template-columns:32px 1fr 20px; gap:10px}
  .faq__a{padding-left:42px}
}

/* ============================================================
   Anfrage
   ============================================================ */
.ask{position:relative; overflow:hidden; background:var(--bg-soft); border-top:1px solid var(--border)}
.ask::before{
  content:''; position:absolute; left:50%; top:-30%; width:820px; height:820px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(196,214,0,.11) 0%, transparent 66%); pointer-events:none;
}
.ask__grid{position:relative; display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.ask__direct{display:flex; flex-direction:column; gap:12px; margin-top:26px}
.ask__line{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border);
  text-decoration:none; transition:border-color var(--ease) .2s;
}
.ask__line:hover{border-color:rgba(196,214,0,.55)}
.ask__line span{font-size:15.5px}
.ask__note{margin-top:20px; font-size:14px; color:var(--text-subtle); max-width:38ch}

.form{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:13.5px; font-weight:700; color:rgba(255,255,255,.82)}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--text); font-family:var(--font); font-size:15px;
  transition:border-color var(--ease) .18s, background-color var(--ease) .18s;
  color-scheme:dark;
}
.field textarea{min-height:118px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.32)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:rgba(196,214,0,.55); background:rgba(255,255,255,.07);
}
.field__hint{font-size:12.5px; color:var(--text-subtle)}
.form__foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:6px}
.form__consent{display:flex; align-items:flex-start; gap:10px; grid-column:1/-1; font-size:13.5px; color:var(--text-muted)}
.form__consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--pink)}
.form__consent a{color:var(--lime); text-decoration:none}
.form__consent a:hover{text-decoration:underline}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__msg{grid-column:1/-1; padding:15px 18px; border-radius:var(--radius-md); font-size:15px; display:none}
.form__msg.is-ok{display:block; background:rgba(196,214,0,.08); border:1px solid rgba(196,214,0,.35); color:var(--text)}
.form__msg.is-err{display:block; background:rgba(230,0,126,.07); border:1px solid rgba(230,0,126,.35); color:var(--text)}
@media(max-width:900px){.ask__grid{grid-template-columns:1fr; gap:34px} .form{grid-template-columns:1fr}}

/* ============================================================
   Footer
   ============================================================ */
.foot{position:relative; padding:64px 0 0; border-top:1px solid var(--border); overflow:hidden}
.foot__grid{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start}
.foot__name{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.foot__tag{margin-top:10px; font-size:14.5px; color:var(--text-muted); max-width:34ch}
.foot__nav{display:flex; flex-wrap:wrap; gap:22px}
.foot__nav a{font-size:14.5px; color:var(--text-muted); text-decoration:none; transition:color var(--ease) .18s}
.foot__nav a:hover{color:var(--lime)}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:44px; padding:20px 0 26px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-subtle);
}
.foot__mark{
  position:absolute; right:-2%; bottom:-42px; z-index:-1;
  font-size:clamp(70px,13vw,170px); font-weight:800; letter-spacing:-.05em;
  color:rgba(255,255,255,.028); white-space:nowrap; pointer-events:none; user-select:none;
}

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