/* ==========================================================================
   aura2wei — styles.css
   Mobile first. Aufsteigende Breakpoints: 600 / 900 / 1200 / 1600.
   Ein :root. Kein !important außer Reduced Motion.
   ========================================================================== */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("../fonts/archivo-variable.woff2") format("woff2")}

:root{
  /* Farbe — abschließend */
  --paper:#F7F6F3;  --ink:#111111;    --brand:#4A2638;
  --brand-dark:#3A1D2C;               --brand-darker:#2E1622;
  --signal:#FF3A1D;          /* Infrarot — nur Striche, Marker, Fehler */
  --signal-dark:#A8382F;     /* Textfähige Tiefe auf Papier */
  --grey:#686864;   --grey-text:#4E4E4A;
  --line:#C8C7C2;   --surface:#ECEBE6;
  --hair:#DCDAD5;

  /* Spacing — mobil spürbar mehr Luft, damit nichts klebt */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:20px; --s-5:32px;
  --s-6:48px; --s-7:72px;
  --section:clamp(68px,11vw,120px);
  --section-lg:clamp(92px,15vw,176px);

  /* Motion */
  --dur-fast:140ms; --dur:200ms; --dur-slow:460ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Layout */
  --max:1440px;
  --gutter:clamp(24px,5vw,64px);

  /* Schrift — EIN Satz für alles. Der Label-Charakter kommt aus Gewicht und
     Laufweite, nicht aus einer zweiten Familie: ui-monospace ist auf jedem
     Betriebssystem eine andere Schrift und war die Ursache für wechselnde
     Schriftbilder im Header. Georgia-Kursiv bleibt als editorialer Akzent. */
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --code:ui-monospace,SFMono-Regular,Consolas,monospace;

  /* Typo-Rollen — fluid, gedeckelt, wortbruchfrei */
  --t-xl:clamp(42px,12.8vw,172px);
  --t-l:clamp(33px,7.2vw,104px);
  --t-m:clamp(24px,3.7vw,52px);
  --t-s:clamp(19px,2.2vw,29px);
  --t-lead:clamp(18px,2.4vw,27px);
  --t-body:clamp(16px,1.15vw,18px);
  --t-label:12px;

  /* Filmkorn */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Filmkorn auf allen Fotos --------------------------------------------
   Zwei Modi, weil der Blend-Mode vom Untergrund abhängt:
   · über Mitteltönen (Portrait, Artikelbild) → overlay
   · über dunklem Scrim (Hero, Photo-Story)   → screen, additiv
   Die Körnung liegt in beiden Fällen ÜBER dem Scrim, nie darunter. */
:is(.founder-photo,.article-media,.article-hero-media){position:relative}
:is(.founder-photo,.article-media,.article-hero-media)::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:220px 220px;
  mix-blend-mode:overlay;opacity:.46;
}
:is(.founder-photo,.article-media,.article-hero-media)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 48%,rgba(10,10,10,.34) 100%);
}

/* --- Base ----------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Sprungziele nicht unter den Sticky-Header schieben — sonst wirkt der
   Ankerklick wie „passiert nichts“. */
:target,[id]{scroll-margin-top:calc(62px + var(--s-5))}
@media (min-width:1060px){:target,[id]{scroll-margin-top:calc(84px + var(--s-5))}}
body{
  margin:0;min-width:320px;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
}
main{overflow:clip}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;hyphens:none;overflow-wrap:normal}
p{margin:0;text-wrap:pretty}
code{font:inherit;font-family:var(--code);font-size:.92em}
::selection{background:var(--ink);color:var(--paper)}

/* `hidden` verliert gegen jede Klasse, die display setzt — diese Regel
   stellt die Absicht des Attributs wieder her, ohne !important. */
.btn[hidden],.to-top[hidden],.gc-pick[hidden],.gc-step[hidden],
.gc-done[hidden],.gc-foot[hidden],.nav-tel[hidden],.social[hidden]{display:none}

.wrap{width:100%;padding-inline:var(--gutter);margin-inline:auto;max-width:calc(var(--max) + var(--gutter)*2)}
.section{padding-block:var(--section)}
.section-lg{padding-block:var(--section-lg)}
.dark{background:var(--ink);color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:999;background:var(--ink);color:var(--paper);padding:14px 18px;transform:translateY(-180%)}
.skip:focus{transform:none}

/* Zeilen einer Displaykomposition.
   Mobil fließt der Text; ab 600px steht die Komposition wie gesetzt. */
.ln{display:inline}
.ln + .ln{margin-left:.28em}
@media (min-width:600px){
  .ln{display:block}
  .ln + .ln{margin-left:0}
}

/* --- Typografie ----------------------------------------------------------- */
.display-xl{font:700 var(--t-xl)/.82 var(--sans);letter-spacing:-.055em}
.display-l {font:700 var(--t-l)/.9 var(--sans);letter-spacing:-.05em;max-width:18ch}
.display-m {font:700 var(--t-m)/1 var(--sans);letter-spacing:-.035em;max-width:24ch}
.lead{font-size:var(--t-lead);line-height:1.32;letter-spacing:-.017em;max-width:34ch}
@media (min-width:900px){.lead{max-width:44ch}}
.body{max-width:66ch;color:var(--grey-text)}
.eyebrow{
  display:flex;align-items:center;gap:var(--s-2);
  font:600 var(--t-label)/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
}
.eyebrow::before{content:"";flex:0 0 auto;width:18px;height:2px;background:var(--signal)}
.meta{font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.dark .eyebrow,.dark .meta,.dark .body{color:var(--line)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* --- Header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;gap:var(--s-4);height:62px}
.nav-brand{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.nav-brand img{width:auto;height:22px}
.nav-brand svg{display:block;width:auto;height:22px;max-width:86px}
.navlinks{display:none}

/* Menü-Button: gezeichnetes Icon + das Wort. NNG-Befund — der reine
   Hamburger wird übersehen, das Wort daneben behebt das. */
.menu-btn{
  display:flex;align-items:center;gap:var(--s-2);margin-left:auto;
  min-height:48px;padding:0 14px;border:1.5px solid var(--ink);background:transparent;
  font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  transition:background var(--dur-fast) linear,color var(--dur-fast) linear;
}
.menu-btn:hover{background:var(--ink);color:var(--paper)}
.menu-ico{display:grid;gap:5px;width:18px;flex:0 0 auto}
.menu-ico i{display:block;height:2px;background:currentColor;transition:transform 220ms var(--ease)}
.mobile-open .menu-ico{gap:0}
.mobile-open .menu-ico i:first-child{transform:translateY(1px) rotate(45deg)}
.mobile-open .menu-ico i:last-child{transform:translateY(-1px) rotate(-45deg)}

/* Telefon: direkter Weg, ohne Formular. Mobil als Symbol, ab 620px mit Nummer. */
.nav-tel{
  display:flex;align-items:center;gap:var(--s-2);margin-left:auto;
  min-height:48px;padding:0 12px;border:1.5px solid var(--ink);background:transparent;
  font:700 12.5px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;
  transition:background var(--dur-fast) linear,color var(--dur-fast) linear,border-color var(--dur-fast) linear;
}
.nav-tel:hover{background:var(--signal);border-color:var(--signal);color:var(--paper)}
.nav-tel svg{width:16px;height:16px;flex:0 0 auto;fill:currentColor}
.nav-tel span{display:none}
.menu-btn{margin-left:var(--s-2)}
@media (min-width:620px){.nav-tel span{display:inline}}

.mobile-open .navlinks{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  position:absolute;top:62px;left:0;right:0;
  background:var(--paper);border-bottom:2px solid var(--ink);
  padding:var(--s-2) var(--gutter) var(--s-5);
  max-height:calc(100dvh - 62px);overflow-y:auto;
}
.mobile-open .navlinks a{
  padding:var(--s-4) 0;border-bottom:1px solid var(--hair);
  font:700 clamp(20px,5.4vw,26px)/1.1 var(--sans);letter-spacing:-.03em;
}
.mobile-open .navlinks a[aria-current="page"]{color:var(--signal)}
.mobile-open .navlinks a.btn{
  margin-top:var(--s-5);border-bottom:1.5px solid currentColor;
  font-size:13.5px;letter-spacing:.1em;justify-content:flex-start;
}
/* Bei offenem Menü nichts dahinter scrollen */
body.nav-locked{overflow:hidden}

@media (min-width:980px){
  .nav{height:84px;gap:var(--s-6)}
  .nav-brand img{height:27px}
  .nav-brand svg{height:27px;max-width:104px}
  .navlinks{display:flex;align-items:center;gap:clamp(18px,2vw,34px);margin-left:auto;font-size:15px}
  .menu-btn{display:none}
  .nav-tel{order:2;margin-left:var(--s-4)}
  .navlinks{order:1}
  .navlinks a{position:relative;padding:6px 0}
  .navlinks a:not(.btn)::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--signal);
    transform:scaleX(0);transform-origin:left;transition:transform 180ms ease-out;
  }
  .navlinks a:not(.btn):hover::after,.navlinks a[aria-current="page"]:not(.btn)::after{transform:scaleX(1)}
  .navlinks a[aria-current="page"]:not(.btn){font-weight:700}
}

/* --- Dunkle Gründe — eine Gruppe, damit nichts durchfällt ---------------- */
.on-dark,
.dark,.hero-cinema,.photo-story,.final-cta,.site-footer,.gapcheck,.gc{--ground:dark}
:is(.dark,.hero-cinema,.photo-story,.final-cta,.site-footer,.gapcheck,.gc) :is(.eyebrow,.meta,.body,.lead,.footer-col h4,.footer-bottom,.gc-note){color:var(--line)}
/* Sekundärbutton auf dunklem Grund: helle Kante, infrarote Füllung. */
:is(.dark,.hero-cinema,.photo-story,.final-cta,.site-footer,.gapcheck,.gc) .btn-secondary{
  border-color:var(--paper);color:var(--paper);--fill:var(--signal);--fill-text:var(--paper);
}

/* Das tiefe Signalrot ist für Papier gedacht; auf dunklem Grund liegt es
   unter 3:1. Dort das helle Infrarot verwenden (5,0:1 auf #111). */
:is(.dark,.hero-cinema,.photo-story,.final-cta,.site-footer,.gapcheck,.gc) :is(.required,.field-error){color:var(--signal)}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  --fill:var(--ink); --fill-text:var(--paper);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:var(--s-3);
  min-height:54px;padding:0 24px;border:1.5px solid currentColor;background:transparent;
  font:700 13.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  /* Farbe kippt erst, wenn die Fläche durchgelaufen ist — sonst steht die
     Schrift ~120ms unsichtbar auf noch nicht gefüllter Fläche. */
  transition:color 90ms linear 210ms,border-color 300ms var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 320ms var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--fill-text);border-color:var(--fill)}
.btn .arw{
  font-style:normal;font-size:1.15em;line-height:1;
  transition:transform var(--dur) var(--ease);
}
.btn:hover .arw{transform:translateX(5px)}

.btn-primary{
  background:var(--brand);border-color:var(--brand);color:var(--paper);
  --fill:var(--ink);--fill-text:var(--paper);
  padding-left:0;
}
/* Infraroter Anschlag — wächst beim Hover auf die volle Höhe des Buttons */
.btn-primary .bar{
  flex:0 0 auto;align-self:stretch;width:8px;background:var(--signal);
  transform:scaleY(.34);transform-origin:center;
  transition:transform 320ms var(--ease),width 320ms var(--ease);
}
.btn-primary:hover .bar,.btn-primary:focus-visible .bar{transform:scaleY(1);width:12px}
.btn-primary .lbl{padding-right:4px}
.btn-primary:active{background:var(--brand-darker)}

/* Header-CTA — höchster Kontrast im Balken */
.nav .btn-primary{background:var(--ink);border-color:var(--ink);--fill:var(--brand)}
.nav .btn-primary:hover{border-color:var(--brand)}
.btn-secondary{border-color:var(--ink);color:var(--ink);--fill:var(--ink);--fill-text:var(--paper)}
/* Sekundärbutton auf dunklem Grund: Gruppenregel steht weiter oben. */
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--surface);color:var(--grey);border-color:var(--line);cursor:not-allowed;
}
.btn[disabled]::before{display:none}
.cta-row{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5);align-items:stretch}
.cta-row .btn{justify-content:flex-start}
/* Hinweiszeile direkt nach einer Buttonreihe braucht Luft. */
.cta-row + .meta,.cta-row + p{margin-top:var(--s-4)}
@media (min-width:600px){
  .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center}
  .cta-row .btn{justify-content:center}
}

.text-link{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:700;position:relative;min-height:44px}
.text-link::after{
  content:"";position:absolute;left:0;bottom:12px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 180ms ease-out;
}
.text-link:hover::after{transform:scaleX(1)}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--paper);
}
.dark :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible,
.hero-cinema :where(a,button,summary):focus-visible{
  outline-color:var(--paper);box-shadow:0 0 0 5px var(--ink);
}

/* --- Hero A — Startseite -------------------------------------------------- */
.hero-cinema{
  position:relative;isolation:isolate;overflow:hidden;display:flex;
  min-height:clamp(560px,92svh,1000px);
  background:var(--ink);color:var(--paper);
}
.hero-cinema-image{position:absolute;inset:0;z-index:0}
/* Korn auf dem Hero selbst, nicht im Bildcontainer — sonst liegt es unter dem Scrim */
.hero-cinema::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:220px 220px;
  mix-blend-mode:screen;opacity:.17;
}
.hero-cinema-image img{
  width:100%;height:100%;object-fit:cover;object-position:76% 24%;
  filter:grayscale(1) contrast(1.08);
}
.hero-cinema::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Mobil: flächige Deckung, weil Text die ganze Breite nutzt. */
  background:linear-gradient(180deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.9) 46%,rgba(10,10,10,.94) 100%);
}
.hero-cinema-inner{
  position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--s-6);width:100%;padding:var(--s-7) var(--gutter) var(--s-6);
  margin-inline:auto;max-width:calc(var(--max) + var(--gutter)*2);
}
.hero-cinema-top{display:none}
.hero-cinema-copy{max-width:100%}
.hero-cinema h1{
  font:700 var(--t-xl)/.82 var(--sans);letter-spacing:-.055em;
  margin:var(--s-4) 0 0;max-width:9ch;
}
.hero-cinema h1 strong{display:block;font-weight:700}
.hero-question{
  font-family:var(--serif);font-style:italic;letter-spacing:-.02em;
  font-size:var(--t-m);line-height:1.06;margin-top:var(--s-4);color:var(--paper);
}
.hero-cinema .lead{margin-top:var(--s-5)}
.hero-cinema .eyebrow,.hero-cinema .lead{color:var(--line)}
.hero-cinema-foot{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  padding-top:var(--s-5);border-top:1px solid rgba(247,246,243,.22);
  font:600 var(--t-label)/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--line);
}
@media (min-width:900px){
  .hero-cinema::after{
    background:linear-gradient(90deg,
      rgba(10,10,10,.93) 0%,rgba(10,10,10,.92) 58%,rgba(10,10,10,.92) 74%,
      rgba(10,10,10,.34) 92%,rgba(10,10,10,.12) 100%);
  }
  .hero-cinema-inner{justify-content:space-between;padding-block:var(--s-7)}
  /* Auf die geschattete Zone gedeckelt (Scrim hält .92 bis 74 %).
     Ohne Deckel landet das rechte Label bei 95 % — dort ist das Foto frei. */
  .hero-cinema-top{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;max-width:min(72%,900px)}
  .hero-cinema-copy{max-width:min(60%,760px)}
  .hero-cinema-foot{gap:var(--s-7)}
}

/* --- Hero B — Unterseiten ------------------------------------------------- */
.page-hero{
  background:var(--paper);
  padding:var(--s-5) 0 var(--section);
  border-bottom:2px solid var(--ink);
}
.page-hero h1{
  font:700 var(--t-l)/.9 var(--sans);letter-spacing:-.05em;
  max-width:15ch;margin-top:var(--s-4);
}
.page-hero .lead{margin-top:var(--s-5)}
.page-hero-grid{display:grid;gap:var(--s-5)}
.page-hero-grid > .meta{order:-1}
/* Brotkrumen spannen die ganze Reihe — sonst belegen sie Spalte 1
   und schieben Copy und Label um eine Zelle weiter. */
.page-hero-grid > nav{grid-column:1/-1;order:-2;margin-bottom:calc(var(--s-4) - var(--s-5))}
@media (min-width:900px){
  .page-hero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--s-6)}
  .page-hero-grid > .meta{order:0;text-align:right}
}

/* --- Sektionsköpfe -------------------------------------------------------- */
.section-head{display:grid;gap:var(--s-5);margin-bottom:var(--s-6)}
.section-head h2{margin-top:var(--s-3)}
@media (min-width:900px){
  .section-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-7);margin-bottom:var(--s-7)}
  .section-head > :last-child{padding-top:.55em}
}

/* --- Editorial-Listen ----------------------------------------------------- */
.editorial-list{border-top:2px solid var(--ink);counter-reset:row}
.dark .editorial-list{border-top-color:var(--paper)}
.editorial-row{
  display:grid;gap:var(--s-3);
  padding-block:var(--s-5);border-bottom:1px solid var(--hair);
}
.dark .editorial-row{border-bottom-color:rgba(247,246,243,.2)}
.editorial-row h3{font:700 var(--t-s)/1.14 var(--sans);letter-spacing:-.028em;max-width:30ch}
.editorial-row p{color:var(--grey-text);max-width:58ch}
.dark .editorial-row p{color:var(--line)}
.editorial-row .meta{color:var(--grey)}
.editorial-row:hover h3{color:var(--signal-dark)}
.dark .editorial-row:hover h3{color:var(--signal)}
.editorial-row h3{transition:color var(--dur-fast) linear}
@media (min-width:760px){
  .editorial-row{
    grid-template-columns:clamp(88px,10vw,132px) minmax(0,1.05fr) minmax(0,1.15fr);
    gap:var(--s-5);align-items:baseline;padding-block:var(--s-5);
  }
  .editorial-row .meta{padding-top:.42em}
  .editorial-row h3{font-size:var(--t-m);line-height:1.04}
}

/* --- Statement-Zeilen ----------------------------------------------------- */
.statement-list{border-top:2px solid currentColor}
.statement-row{
  display:grid;gap:var(--s-3);align-items:center;
  padding-block:var(--s-5);border-bottom:1px solid rgba(247,246,243,.22);
}
.statement-row strong{font:700 clamp(26px,8.6vw,74px)/.96 var(--sans);letter-spacing:-.05em;display:block}
.statement-row strong:last-of-type{color:var(--line)}
.statement-row i{
  display:block;height:3px;width:100%;max-width:64px;background:var(--signal);font-style:normal;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 620ms var(--ease);
}
.reveal.in .statement-row i{transform:scaleX(1)}
.reveal.in .statement-row:nth-child(2) i{transition-delay:90ms}
.reveal.in .statement-row:nth-child(3) i{transition-delay:180ms}
.reveal.in .statement-row:nth-child(4) i{transition-delay:270ms}
.reveal.in .statement-row:nth-child(5) i{transition-delay:360ms}
@media (min-width:760px){
  .statement-row{grid-template-columns:minmax(0,1fr) clamp(56px,7vw,104px) minmax(0,1fr);gap:var(--s-5);padding-block:var(--s-5)}
  .statement-row i{max-width:none}
}

/* --- Wege / Features ------------------------------------------------------ */
.way-grid,.feature-grid{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
@media (min-width:700px){
  .way-grid,.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--hair)}
}
@media (min-width:1200px){
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.way{
  display:flex;flex-direction:column;gap:var(--s-4);
  background:var(--paper);padding:var(--s-5);
  transition:background var(--dur-fast) linear;
}
.way h3{font:700 var(--t-s)/1.16 var(--sans);letter-spacing:-.028em;max-width:24ch}
.way p{color:var(--grey-text)}
.way b{margin-top:auto;padding-top:var(--s-3);font:700 12px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase}
a.way:hover{background:var(--surface)}
@media (min-width:900px){.way{padding:var(--s-6) var(--s-5);min-height:300px}}

.feature{background:var(--paper);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.feature h3{font:700 var(--t-s)/1.16 var(--sans);letter-spacing:-.028em;max-width:24ch}
.feature p{color:var(--grey-text)}
.dark .way,.dark .feature{background:var(--ink)}
.dark .way p,.dark .feature p{color:var(--line)}

/* --- Bild ----------------------------------------------------------------- */
.photo-story img,.founder-photo img,.article-media img,.article-hero-media img,.hero-cinema-image img{
  filter:grayscale(1) contrast(1.26) brightness(.93);opacity:1;
}
.photo-story{position:relative;isolation:isolate;background:var(--ink);color:var(--paper);overflow:hidden}
.photo-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photo-story::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:220px 220px;
  mix-blend-mode:screen;opacity:.16;
}
.photo-story::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.9) 100%);
}
.photo-copy{position:relative;z-index:3;padding-block:var(--section-lg);max-width:42ch}
.photo-copy h2{font:700 var(--t-l)/.9 var(--sans);letter-spacing:-.05em;margin-block:var(--s-4)}
@media (min-width:900px){
  .photo-story::after{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.84) 52%,rgba(10,10,10,.3) 88%,rgba(10,10,10,.1) 100%)}
  .photo-copy{max-width:46ch}
}

.duo{display:grid}
.duo article{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-6);padding:var(--section) var(--gutter)}
.duo .light{background:var(--surface)}
.duo h3{font:700 var(--t-l)/.92 var(--sans);letter-spacing:-.05em;margin-block:var(--s-4);max-width:16ch}
@media (min-width:900px){
  .duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo article{min-height:66svh}
}

.founder-grid{display:grid;gap:var(--s-6)}
.founder-photo{position:relative;background:var(--ink);aspect-ratio:4/5;overflow:hidden}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.founder-photo .photo-tag{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper);
  padding:10px 13px;font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
}
.founder blockquote{margin:var(--s-4) 0;font:700 var(--t-l)/.92 var(--sans);letter-spacing:-.05em;max-width:15ch}
.founder blockquote em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
@media (min-width:900px){
  .founder-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s-7);align-items:center}
}

/* --- Blog ----------------------------------------------------------------- */
.article-featured{display:grid;gap:var(--s-4);border-bottom:2px solid var(--ink);padding-bottom:var(--s-6)}
.article-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.article-media img{width:100%;height:100%;object-fit:cover}
.article-featured h3{font:700 var(--t-l)/.94 var(--sans);letter-spacing:-.05em;max-width:20ch}
.article-featured p{color:var(--grey-text);max-width:60ch}
.article-meta{display:flex;gap:var(--s-4);flex-wrap:wrap}
@media (min-width:900px){.article-media{aspect-ratio:21/9}}

.article-list{list-style:none;margin:0;padding:0}
.article-list li{border-bottom:1px solid var(--hair)}
.article-list a{
  display:grid;gap:var(--s-3);padding-block:var(--s-5);
  transition:background var(--dur-fast) linear;
}
/* Mobil: Kategorie und Lesedauer teilen eine Zeile, Titel spannt darunter.
   Als Raster statt absolut, damit lange Kategorien umbrechen statt zu kollidieren. */
@media (max-width:759px){
  .article-list a{grid-template-columns:minmax(0,1fr) auto}
  .article-list .meta:first-child{grid-column:1;grid-row:1}
  .article-list .meta:last-child{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
  .article-list h3{grid-column:1/-1;grid-row:2}
}
.article-list h3{font:700 var(--t-s)/1.16 var(--sans);letter-spacing:-.028em;max-width:34ch}
.article-list a:hover{background:var(--surface)}
.article-list a:hover h3{text-decoration:underline;text-underline-offset:4px}
@media (min-width:760px){
  .article-list a{
    grid-template-columns:clamp(120px,13vw,168px) minmax(0,1fr) auto;
    gap:var(--s-5);align-items:baseline;padding-block:var(--s-5);
  }
  .article-list .meta:first-child{padding-top:.4em}
}

/* Mobil: mehr Luft in gestapelten Blöcken, damit Label und Inhalt nicht kleben */
@media (max-width:599px){
  .form-panel{padding:var(--s-5) var(--s-4)}
  .gapcheck-what li,.refuse li,.versus li{padding-block:var(--s-3)}
  .footer-col a{padding-block:var(--s-4)}
  .section-head{margin-bottom:var(--s-6)}
  .idx{margin-bottom:var(--s-5);padding-bottom:var(--s-4)}
  .prose h2{margin-top:var(--s-6)}
  .prose > * + *{margin-top:var(--s-4)}
  .article-meta-bar{gap:var(--s-3) var(--s-4);padding-block:var(--s-4)}
  .cta-row{margin-top:var(--s-5)}
  .gc-head,.gc-body,.gc-foot{padding-inline:var(--s-4)}
  .gc-bar{padding-inline:var(--s-4)}
  .versus > div{padding:var(--s-5) var(--s-4)}
  .duo article{padding-block:var(--section)}
}

.article-hero-media{aspect-ratio:16/9;overflow:hidden;background:var(--ink);margin-bottom:var(--s-6)}
.article-hero-media img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.article-hero-media{aspect-ratio:3/1}}

/* --- FAQ ------------------------------------------------------------------ */
.answer-grid{display:grid;gap:var(--s-6)}
@media (min-width:900px){
  .answer-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s-7)}
}
.faq-list{border-top:2px solid var(--ink)}
.dark .faq-list{border-top-color:var(--paper)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
  display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline;
  padding-block:var(--s-4);min-height:56px;cursor:pointer;list-style:none;
  font:700 clamp(17px,2vw,21px)/1.28 var(--sans);letter-spacing:-.02em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{
  flex:0 0 auto;font:400 24px/1 var(--sans);color:var(--grey);
  transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary span{transform:rotate(45deg)}
.faq-item > div{padding-bottom:var(--s-4)}
/* Geschlossene Antwort explizit einklappen — verlässt man sich auf das
   Standardverhalten, läuft der Text in manchen Engines in die nächste Frage. */
.faq-item:not([open]) > div{display:none}
.faq-item p{color:var(--grey-text);max-width:64ch}

/* --- Formular ------------------------------------------------------------- */
/* Auf Fläche gesetzt, damit die Spalte nicht als leerer weißer Raum liest. */
.form-panel{background:var(--surface);padding:var(--s-5);border-top:3px solid var(--ink)}
@media (min-width:700px){.form-panel{padding:var(--s-6)}}
.form-grid{display:grid;gap:var(--s-5)}
@media (min-width:700px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
  .field.full{grid-column:1/-1}
}
.field{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.field label{font:600 var(--t-label)/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--grey)}
.field input,.field textarea,.field select{
  width:100%;background:var(--paper);border:1px solid var(--line);border-bottom:2px solid var(--ink);
  border-radius:0;padding:15px 14px;min-height:54px;outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink)}
.field textarea{min-height:150px;resize:vertical}
.field[data-error] input,.field[data-error] textarea,.field[data-error] select{border-bottom:2px solid var(--signal)}
.field-error{font:600 14px/1.4 var(--sans);color:var(--signal-dark);margin-top:var(--s-2)}
.field-error::before{content:"FEHLER";font:600 var(--t-label)/1 var(--mono);letter-spacing:.13em;margin-right:var(--s-2)}
.required{color:var(--signal-dark)}

/* --- Abschluss & Footer --------------------------------------------------- */
.final-cta{background:var(--ink);color:var(--paper);padding-block:var(--section-lg)}
.final-cta h2{font:700 var(--t-xl)/.84 var(--sans);letter-spacing:-.055em;margin:var(--s-4) 0 var(--s-6);max-width:13ch}
.final-cta h2 span{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.final-grid{display:grid;gap:var(--s-5)}
@media (min-width:900px){
  .final-cta h2{margin-bottom:var(--s-7)}
  .final-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);align-items:end}
}

/* --- Social ---------------------------------------------------------------- */
.footer-social{display:flex;gap:var(--s-2);margin-top:var(--s-5);flex-wrap:wrap}
.social{
  display:grid;place-items:center;width:52px;height:52px;
  border:1.5px solid rgba(247,246,243,.32);color:var(--paper);
  transition:color 90ms linear 150ms,border-color 240ms var(--ease);
  position:relative;isolation:isolate;overflow:hidden;
}
.social::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--signal);
  transform:scaleY(0);transform-origin:bottom;transition:transform 240ms var(--ease);
}
.social:hover::before,.social:focus-visible::before{transform:scaleY(1)}
.social:hover,.social:focus-visible{border-color:var(--signal)}
.social svg{width:20px;height:20px;display:block;fill:currentColor}

/* --- Sektionsindex — die Struktur wird sichtbar --------------------------- */
.idx{
  display:flex;align-items:baseline;gap:var(--s-4);
  padding-bottom:var(--s-4);margin-bottom:var(--s-5);
  border-bottom:2px solid var(--ink);
}
.dark .idx{border-bottom-color:var(--paper)}
.idx b{
  font:700 clamp(28px,4.4vw,64px)/.8 var(--mono);letter-spacing:-.04em;
  color:var(--signal);flex:0 0 auto;
}
.idx span{font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.dark .idx span{color:var(--line)}

/* --- Kennzahlen ----------------------------------------------------------- */
.stat-row{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.stat{background:var(--paper);padding:var(--s-4)}
.stat b{display:block;font:700 clamp(30px,5.6vw,84px)/.86 var(--sans);letter-spacing:-.05em}
.stat span{display:block;margin-top:var(--s-2);font:600 var(--t-label)/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.dark .stat{background:var(--ink)}
.dark .stat span{color:var(--line)}
/* Zwei Spalten schon auf dem Handy — vier volle Blöcke untereinander sind
   verschenkter Platz, die Zahlen sind kurz genug. */
@media (min-width:380px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:700px){.stat{padding:var(--s-5)}}
@media (min-width:960px){.stat-row{grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hair)}}

/* --- Poster — Wall of Type, trägt eine Sektion allein ------------------- */
.poster{background:var(--ink);color:var(--paper);padding-block:var(--section-lg)}
.poster.hot{background:var(--signal);color:var(--ink)}
.poster p.claim{
  font:700 var(--t-xl)/.84 var(--sans);letter-spacing:-.055em;
  margin:0;max-width:15ch;text-wrap:balance;
}
.poster p.claim em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.poster .sub{margin-top:var(--s-5);max-width:42ch}
.poster.hot :is(.eyebrow,.sub){color:var(--ink)}
.poster.hot .eyebrow::before{background:var(--ink)}
.poster.hot .btn-secondary{border-color:var(--ink);color:var(--ink);--fill:var(--ink);--fill-text:var(--signal)}

/* --- Aufgabenliste — Zielgruppe, Frage, Weg ----------------------------- */
.tasklist{border-top:2px solid var(--ink);counter-reset:t}
.dark .tasklist{border-top-color:var(--paper)}
.task{
  display:grid;gap:var(--s-4);
  padding-block:var(--s-6);border-bottom:1px solid var(--hair);
  position:relative;
}
.dark .task{border-bottom-color:rgba(247,246,243,.2)}
.task > b{
  font:700 clamp(30px,5.6vw,76px)/.82 var(--mono);letter-spacing:-.05em;
  color:var(--signal);display:block;
}
.task h3{font:700 var(--t-m)/1.02 var(--sans);letter-spacing:-.035em;max-width:22ch}
.task .steps{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;
  font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
}
.dark .task .steps{color:var(--line)}
.task .steps i{font-style:normal;color:var(--signal)}
.task p{color:var(--grey-text);max-width:52ch}
.dark .task p{color:var(--line)}
.task::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease);
}
.task:hover::after{transform:scaleX(1)}
@media (min-width:860px){
  .task{grid-template-columns:clamp(96px,9vw,140px) minmax(0,1.1fr) minmax(0,1.15fr);gap:var(--s-5);align-items:start;padding-block:var(--s-5)}
  .task > b{padding-top:.06em}
  .task .stack{display:flex;flex-direction:column;gap:var(--s-3)}
}

/* --- Gegensatzpaar — Suchen vs. Finden ---------------------------------- */
.versus{display:grid;gap:1px;background:var(--hair);border-block:1px solid var(--hair)}
.versus > div{padding:var(--s-6) var(--s-5);background:var(--paper);display:flex;flex-direction:column;gap:var(--s-4)}
.versus > div.now{background:var(--surface)}
.versus h3{font:700 var(--t-m)/1 var(--sans);letter-spacing:-.035em;max-width:16ch}
.versus ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-2)}
.versus li{
  display:flex;gap:var(--s-3);align-items:baseline;
  padding-block:var(--s-2);border-bottom:1px solid var(--hair);color:var(--grey-text);
}
.versus li::before{content:"—";color:var(--grey);flex:0 0 auto}
.versus > div.next li::before{content:"→";color:var(--signal)}
@media (min-width:860px){.versus{grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--hair)}}

/* --- Belege — nachprüfbare Daten statt Behauptungen ---------------------- */
.receipts{border-top:2px solid var(--ink);margin-top:var(--s-5)}
.dark .receipts{border-top-color:var(--paper)}
.receipt{
  display:grid;gap:var(--s-2);
  padding-block:var(--s-4);border-bottom:1px solid var(--hair);
}
.dark .receipt{border-bottom-color:rgba(247,246,243,.2)}
.receipt dt{font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.dark .receipt dt{color:var(--line)}
.receipt dd{margin:0;font:700 clamp(17px,1.9vw,22px)/1.2 var(--mono);letter-spacing:-.02em}
.receipt dd small{display:block;margin-top:6px;font:400 13px/1.5 var(--sans);color:var(--grey-text);letter-spacing:0}
.dark .receipt dd small{color:var(--line)}
@media (min-width:700px){
  .receipt{grid-template-columns:clamp(180px,22vw,280px) minmax(0,1fr);gap:var(--s-5);align-items:baseline;padding-block:var(--s-3)}
  .receipt dt{padding-top:.4em}
}

/* --- Absage — Positionierung durch Verzicht ------------------------------ */
.refuse{display:grid;gap:0;border-top:2px solid var(--ink);margin-top:var(--s-5)}
.dark .refuse{border-top-color:var(--paper)}
.refuse li{
  list-style:none;display:flex;gap:var(--s-4);align-items:baseline;
  padding-block:var(--s-4);border-bottom:1px solid var(--hair);
  font:700 var(--t-s)/1.2 var(--sans);letter-spacing:-.025em;
}
.dark .refuse li{border-bottom-color:rgba(247,246,243,.2)}
.refuse li::before{
  content:"✕";flex:0 0 auto;color:var(--signal);
  font:400 clamp(18px,2vw,26px)/1 var(--mono);
}
.refuse li span{font:400 var(--t-body)/1.55 var(--sans);color:var(--grey-text);display:block;margin-top:6px;letter-spacing:0}
.dark .refuse li span{color:var(--line)}

/* --- Breadcrumbs — sichtbar, nicht nur im Schema --------------------------
   Google hat sie aus den SERPs entfernt; on-page sind sie dadurch wichtiger. */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  margin-bottom:var(--s-4);padding:0;list-style:none;
  font:600 var(--t-label)/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.crumbs li{display:flex;align-items:center;gap:var(--s-2)}
.crumbs li + li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--grey);display:inline-flex;align-items:center;min-height:44px;padding-block:6px}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current="page"]{color:var(--ink)}

/* --- Rechtstexte ----------------------------------------------------------
   Eigenes Layout: Label + Lesetext. Kein Editorial-Raster, keine Display-
   größen — die skalieren mit dem Viewport, während die Spalte durch den
   Lesecontainer begrenzt bleibt. Genau daran lief die Schrift ineinander. */
.legal{max-width:86ch}
.legal-block{border-top:2px solid var(--ink);margin-bottom:var(--s-6)}
.legal-row{
  display:grid;gap:var(--s-3);
  padding-block:var(--s-5);border-bottom:1px solid var(--hair);
}
.legal-row > .k{
  font:600 var(--t-label)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin:0;
  /* Deutsche Komposita passen sonst nicht in die Labelspalte und laufen in
     den Text. Echte Silbentrennung (lang="de" steht auf <html>) statt
     Buchstabenbruch — break-word greift nur, wenn selbst das nicht reicht. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.legal-row h3{font:700 clamp(17px,1.6vw,20px)/1.3 var(--sans);letter-spacing:-.015em;margin:0}
.legal-row .v{margin:0;max-width:66ch;color:var(--grey-text)}
.legal-row .v + .v{margin-top:var(--s-3)}
.legal-row .v strong{color:var(--ink);font-weight:700}
.legal-row ul{margin:var(--s-2) 0 0;padding:0 0 0 1.1em;max-width:66ch;color:var(--grey-text)}
.legal-row li{margin-bottom:6px}
@media (min-width:820px){
  .legal-row{grid-template-columns:clamp(150px,19vw,210px) minmax(0,1fr);gap:var(--s-5);align-items:start;padding-block:var(--s-4)}
  .legal-row > .k{padding-top:.35em}
}
.legal h2{
  font:700 clamp(21px,2.4vw,30px)/1.15 var(--sans);letter-spacing:-.03em;
  margin:0 0 var(--s-4);max-width:34ch;
}
.legal-note{
  margin-top:var(--s-5);padding:var(--s-4);border-left:3px solid var(--signal);
  background:var(--surface);max-width:66ch;
}
.legal-note strong{display:block;margin-bottom:6px}
[data-fill]{
  background:color-mix(in oklab,var(--signal) 16%,transparent);
  padding:1px 5px;font-weight:700;color:var(--signal-dark);
}

/* --- Gap-Check — niedrigschwelliger Einstieg ------------------------------ */
.gapcheck{background:var(--ink);color:var(--paper);padding-block:var(--section-lg)}
.gapcheck-grid{display:grid;gap:var(--s-6)}
.gapcheck h2{font:700 var(--t-l)/.9 var(--sans);letter-spacing:-.05em;margin:var(--s-4) 0 0;max-width:16ch}
.gapcheck-form{display:grid;gap:var(--s-4);border-top:2px solid var(--paper);padding-top:var(--s-5)}
.gapcheck .field label{color:var(--line)}
.gapcheck .field input,.gapcheck .field textarea{color:var(--paper);border-bottom-color:var(--paper)}
.gapcheck .field input::placeholder,.gapcheck .field textarea::placeholder{color:var(--line);opacity:.72}
.gapcheck-what{display:grid;gap:0;border-top:1px solid rgba(247,246,243,.24);margin-top:var(--s-5);padding:0}
.gapcheck-what li{
  list-style:none;display:flex;gap:var(--s-3);align-items:baseline;
  padding-block:var(--s-3);border-bottom:1px solid rgba(247,246,243,.24);color:var(--line);
}
.gapcheck-what li b{flex:0 0 auto;color:var(--signal);font:700 13px/1.5 var(--sans);letter-spacing:.06em}
@media (min-width:900px){
  .gapcheck-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--s-7)}
}

/* --- Gap-Check als Dialog -------------------------------------------------
   Natives <dialog>: Fokusfalle, Escape und Inertheit des Hintergrunds
   kommen vom Browser, nicht von nachgebautem JavaScript. */
.gc{
  width:min(680px,100vw);max-width:100vw;max-height:100dvh;
  margin:auto;padding:0;border:0;
  background:var(--ink);color:var(--paper);
}
.gc::backdrop{background:rgba(10,10,10,.86)}
.gc-inner{display:flex;flex-direction:column;max-height:100dvh}
/* Mindesthöhe erst, wenn der Viewport sie trägt — sonst schiebt margin:auto
   den Kopf des Dialogs über den oberen Bildschirmrand. */
@media (min-height:700px){.gc-inner{min-height:620px}}

.gc-head{
  display:flex;align-items:flex-start;gap:var(--s-4);
  padding:var(--s-5) var(--s-5) var(--s-4);
  border-bottom:1px solid rgba(247,246,243,.2);
}
.gc-head > div{flex:1 1 auto;min-width:0}
.gc-head h2{font:700 clamp(21px,3.4vw,30px)/1.06 var(--sans);letter-spacing:-.035em;margin:var(--s-2) 0 0;max-width:22ch}
.gc-close{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  margin:-6px -6px 0 0;background:transparent;border:1.5px solid rgba(247,246,243,.34);
  color:var(--paper);font:400 19px/1 var(--sans);cursor:pointer;
  transition:background 140ms linear,border-color 140ms linear;
}
.gc-close:hover{background:var(--signal);border-color:var(--signal)}

.gc-bar{display:flex;gap:4px;padding:0 var(--s-5);margin-top:var(--s-4)}
.gc-bar i{flex:1 1 0;height:3px;background:rgba(247,246,243,.24)}
.gc-bar i.on{background:var(--signal)}

.gc-body{flex:1 1 auto;overflow-y:auto;padding:var(--s-5);display:grid;gap:var(--s-5)}
.gc-step[hidden]{display:none}
.gc-step{display:grid;gap:var(--s-4)}
.gc-step > p{color:var(--line);max-width:52ch}

.gc .field label{color:var(--line)}
.gc .field input,.gc .field textarea{color:var(--paper);border-bottom-color:rgba(247,246,243,.5)}
.gc .field input:focus,.gc .field textarea:focus{border-bottom-color:var(--paper)}
.gc .field input::placeholder,.gc .field textarea::placeholder{color:var(--line);opacity:.72}
.gc .field[data-error] input,.gc .field[data-error] textarea{border-bottom:2px solid var(--signal)}
.gc .field-error{color:var(--signal)}
.gc .field-error::before{color:var(--signal)}

/* Auswahl: Kacheln statt nackter Kästchen — größere Trefferfläche, klarer Zustand */
.gc-pick{display:grid;gap:1px;background:rgba(247,246,243,.2);border:1px solid rgba(247,246,243,.2)}
.gc-pick label{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-3) var(--s-4);min-height:56px;background:var(--ink);cursor:pointer;
  font:400 15.5px/1.45 var(--sans);color:var(--line);
  transition:background 140ms linear,color 140ms linear;
}
.gc-pick label:hover{background:#1B1B1B;color:var(--paper)}
.gc-pick input{
  flex:0 0 auto;width:19px;height:19px;margin-top:2px;
  accent-color:var(--signal);
}
.gc-pick input:checked + span{color:var(--paper);font-weight:700}
.gc-pick label:has(input:checked){background:#1B1B1B}
.gc-pick label:has(input:checked)::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--signal);
}
.gc-pick label{position:relative}

/* Segmentierte Wahl für zwei bis drei kurze Optionen */
.gc-seg{display:flex;gap:0;border:1.5px solid rgba(247,246,243,.34)}
.gc-seg label{
  flex:1 1 0;display:grid;place-items:center;min-height:52px;padding:0 var(--s-3);
  font:700 12.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--line);cursor:pointer;text-align:center;
  transition:background 140ms linear,color 140ms linear;
}
.gc-seg label + label{border-left:1.5px solid rgba(247,246,243,.34)}
.gc-seg input{position:absolute;opacity:0;width:1px;height:1px}
.gc-seg label:hover{color:var(--paper)}
.gc-seg label:has(input:checked){background:var(--signal);color:var(--ink)}
.gc-seg label:has(input:focus-visible){outline:2px solid var(--paper);outline-offset:-4px}

.gc-foot{
  display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;
  padding:var(--s-4) var(--s-5) var(--s-5);
  border-top:1px solid rgba(247,246,243,.2);
}
.gc-foot .btn{min-height:52px}
.gc-foot .gc-note{flex:1 1 100%;order:3;margin:0;font:600 var(--t-label)/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--line)}
.gc-back{margin-right:auto}
.gc-back[hidden]{display:none}

/* Bestätigung */
.gc-done{display:grid;gap:var(--s-4);padding:var(--s-6) var(--s-5)}
.gc-done h2{font:700 clamp(24px,4vw,38px)/1 var(--sans);letter-spacing:-.04em;margin:0;max-width:20ch}
.gc-done .rule{height:3px;width:64px;background:var(--signal)}
.gc-done[hidden]{display:none}

@media (min-width:640px){
  .gc{width:min(680px,calc(100vw - var(--s-6)))}
  .gc-head,.gc-body,.gc-foot{padding-inline:var(--s-6)}
  .gc-bar{padding-inline:var(--s-6)}
  .gc-done{padding-inline:var(--s-6)}
}
@media (prefers-reduced-motion:no-preference){
  .gc[open]{animation:gcIn 220ms var(--ease) both}
  @keyframes gcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* --- Artikel ---------------------------------------------------------------
   Eine Lesespalte, keine Displaygrößen. Zwischenüberschriften sind echte
   Fragen — so entnehmen Antwortsysteme sie als Frage-Antwort-Paar. */
.article{display:grid;gap:var(--s-6)}
/* Einspaltig gehört das Inhaltsverzeichnis nach oben — hinter dem Artikel
   ist es nutzlos. */
.article-aside{order:-1}
@media (min-width:1040px){
  .article{grid-template-columns:minmax(0,1fr) clamp(200px,20vw,260px);gap:var(--s-7);align-items:start}
  .article-aside{order:0;position:sticky;top:calc(84px + var(--s-5))}
}
.prose{max-width:68ch}
.prose > * + *{margin-top:var(--s-4)}
.prose h2{
  font:700 clamp(22px,2.7vw,34px)/1.14 var(--sans);letter-spacing:-.032em;
  margin-top:var(--s-7);max-width:30ch;scroll-margin-top:calc(84px + var(--s-5));
}
.prose h2 + p{margin-top:var(--s-3)}
.prose h3{font:700 clamp(18px,1.9vw,23px)/1.2 var(--sans);letter-spacing:-.022em;margin-top:var(--s-5);max-width:34ch}
.prose p{color:var(--grey-text)}
.prose p.stand{font-weight:700;color:var(--ink);max-width:60ch}
.prose ul,.prose ol{margin:var(--s-3) 0 0;padding-left:1.15em;color:var(--grey-text)}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--signal)}
.prose strong{color:var(--ink)}
.prose a:not(.btn):not(.text-link){color:var(--signal-dark);text-decoration:underline;text-underline-offset:3px}
.prose a:not(.btn):not(.text-link):hover{color:var(--ink)}
.prose blockquote{
  margin:var(--s-5) 0;padding-left:var(--s-4);border-left:3px solid var(--signal);
  font:700 clamp(19px,2.2vw,26px)/1.25 var(--sans);letter-spacing:-.025em;color:var(--ink);max-width:32ch;
}
.prose hr{height:2px;background:var(--ink);border:0;margin:var(--s-6) 0}
.prose .callout{
  margin-top:var(--s-5);padding:var(--s-4);background:var(--surface);
  border-left:3px solid var(--ink);max-width:64ch;
}
.prose .callout p{margin-top:var(--s-2)}
.prose .callout > strong{display:block}

.toc{border-top:2px solid var(--ink);padding-top:var(--s-3)}
.toc h2{font:600 var(--t-label)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin:0 0 var(--s-2)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;border-bottom:1px solid var(--hair)}
.toc a{display:flex;gap:var(--s-3);align-items:center;min-height:44px;padding:11px 0;font-size:15px;line-height:1.35;color:var(--grey-text)}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:0 0 auto;font-weight:700;color:var(--signal)}
.toc a:hover{color:var(--ink)}

.article-meta-bar{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);
  padding-block:var(--s-3);border-block:1px solid var(--hair);margin-top:var(--s-5);
  font:600 var(--t-label)/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--grey);
}

/* --- Schrittfolge \u2014 mobile first --------------------------------------------
   Eine Abfolge braucht Ziffern und eine Linie, sonst liest sie sich als Wand
   gleich gewichteter Abs\u00e4tze. Die Linie verbindet die Ziffern zu einem Weg. */
.steps-flow{display:grid;gap:0;margin-top:var(--s-6);padding:0;list-style:none}
.step{
  position:relative;display:grid;gap:var(--s-3);
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;padding-bottom:var(--s-6);list-style:none;
}
.step:last-child{padding-bottom:0}
.step > b{
  grid-row:1/3;grid-column:1;
  display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 auto;
  background:var(--ink);color:var(--paper);
  font:700 15px/1 var(--sans);letter-spacing:.02em;
  margin-right:var(--s-4);position:relative;z-index:1;
}
/* Verbindungslinie: von der Ziffer nach unten zur n\u00e4chsten */
.step:not(:last-child)::before{
  content:"";position:absolute;left:21px;top:44px;bottom:0;
  width:2px;background:var(--hair);
}
.step-head{grid-column:2;display:grid;gap:var(--s-2)}
.step-when{
  font:600 var(--t-label)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal-dark);margin:0;
}
.step h3{font:700 clamp(21px,5.6vw,30px)/1.1 var(--sans);letter-spacing:-.032em;margin:0;max-width:22ch}
.step-body{grid-column:2;margin:0;color:var(--grey-text);max-width:54ch}
@media (min-width:760px){
  .steps-flow{margin-top:var(--s-7)}
  .step{gap:var(--s-4);padding-bottom:var(--s-7)}
  .step > b{width:52px;height:52px;font-size:17px;margin-right:var(--s-5)}
  .step:not(:last-child)::before{left:25px;top:52px}
  .step h3{font-size:clamp(24px,2.6vw,32px)}
}

/* --- Nach oben ------------------------------------------------------------ */
.to-top{
  position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:90;
  display:grid;place-items:center;width:52px;height:52px;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  font:400 20px/1 var(--mono);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity 240ms var(--ease),transform 240ms var(--ease),visibility 240ms,background 160ms linear;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--signal);border-color:var(--signal)}

/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--line);padding-block:var(--section) var(--s-5)}
.footer-statement{
  display:block;font:700 var(--t-xl)/.82 var(--sans);letter-spacing:-.055em;
  color:var(--paper);margin:0 0 var(--s-6);max-width:11ch;
}
.footer-statement i{font-style:normal;color:var(--signal)}
.footer-rule{height:3px;background:var(--signal);border:0;margin:0 0 var(--s-6)}
.footer-grid{display:grid;gap:var(--s-6)}
.footer-grid img{width:auto;height:24px;filter:invert(1)}
.footer-col h4,.footer-col .footer-heading{font:600 var(--t-label)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--line);margin:0 0 var(--s-2)}
.footer-col a{
  position:relative;display:block;padding:12px 0;color:var(--paper);
  font:700 clamp(17px,2.1vw,22px)/1.2 var(--sans);letter-spacing:-.025em;
  border-bottom:1px solid rgba(247,246,243,.14);
}
.footer-col a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease);
}
.footer-col a:hover::after{transform:scaleX(1)}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid rgba(247,246,243,.16);
  font:600 var(--t-label)/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--grey);
}
@media (min-width:600px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){
  .footer-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-7)}
  .footer-bottom{margin-top:var(--s-7)}
}

/* --- Rendering ------------------------------------------------------------
   content-visibility überspringt Layout und Paint für Sektionen, die noch
   nicht sichtbar sind. contain-intrinsic-size hält den Scrollbalken stabil,
   sonst springt er beim Erreichen der Sektion. */
@supports (content-visibility: auto){
  main > section:nth-of-type(n+3),
  main > .article-hero-media{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* Aufklappen NICHT nativ animiert: getestete Engines melden Unterstützung
   für ::details-content, klippen den Inhalt aber nicht — die Antwort lief in
   die nächste Frage. Der harte Fallback (display:none) bleibt deshalb
   bedingungslos. Ein hart schaltendes Akkordeon ist kein Mangel; ein
   überlappendes ist einer. */

/* --- Motion --------------------------------------------------------------- */

/* 1 · Section Reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

/* 2 · Hero-Zeilen staffeln — einmalig beim Laden */
.hero-cinema .eyebrow,.hero-cinema h1 .ln,.hero-cinema h1 strong,
.hero-question,.hero-cinema .lead,.hero-cinema .cta-row,.hero-cinema-foot{
  animation:riseIn 620ms var(--ease) both;
}
.hero-cinema .eyebrow{animation-delay:60ms}
.hero-cinema h1 .ln:first-child,.hero-cinema h1 .ln{animation-delay:140ms}
.hero-cinema h1 strong{animation-delay:220ms}
.hero-question{animation-delay:320ms}
.hero-cinema .lead{animation-delay:400ms}
.hero-cinema .cta-row{animation-delay:480ms}
.hero-cinema-foot{animation-delay:560ms}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* 3 · Bildeinzug — das Foto setzt sich, statt einfach da zu sein */
:is(.photo-story,.founder-photo,.article-media) img{
  transform:scale(1.055);transition:transform 1100ms var(--ease);
}
.reveal.in :is(.photo-story,.founder-photo,.article-media) img,
.photo-story.in img,.founder-photo.in img{transform:none}

/* 4 · Regel zieht sich auf — Editorial-Zeilen */
.editorial-row{position:relative}
.editorial-row::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease);
}
.editorial-row:hover::after{transform:scaleX(1)}

/* 5 · Kachel-Hover — Wege und Features bekommen eine Kante */
.way,.feature{position:relative}
.way::after,.feature::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease);
}
a.way:hover::after,.feature:hover::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  :is(.photo-story,.founder-photo,.article-media) img{transform:none}
  html{scroll-behavior:auto}
}

@media (prefers-contrast:more){
  :root{--grey:#4B4B48;--grey-text:#3A3A37;--line:#8B8B86;--hair:#8B8B86}
  :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{outline-width:4px}
}

/* WordPress-Kompatibilität: Der eingeloggte Admin-Balken darf den sticky
   Header auf Mobilgeräten und Desktop nicht überdecken. */
.admin-bar .site-header{top:46px}
@media (min-width:783px){.admin-bar .site-header{top:32px}}

/* --- aura2wei Signature Header ------------------------------------------
   WordPress-Ausgabe: stärkere Marke, klarere CTA-Hierarchie und ein mobiles
   Menü, das sich wie eine eigene Navigationsebene statt wie ein Dropdown
   anfühlt. Keine zusätzliche Bewegung; die fünf Prototyp-Bewegungen bleiben. */
.site-header{
  background:rgba(247,246,243,.96);
  border-bottom:0;
  box-shadow:0 1px 0 var(--hair),0 10px 34px rgba(17,17,17,.055);
  backdrop-filter:saturate(120%) blur(14px);
}
.nav{height:72px;gap:var(--s-3)}
.nav-brand{position:relative;padding-right:14px}
.nav-brand::after{content:"";position:absolute;right:0;top:18px;width:6px;height:6px;background:var(--signal)}
.nav-brand svg{height:25px;max-width:98px}
.nav-tel,.menu-btn{min-height:46px}
.nav-tel{margin-left:auto;border-color:var(--line);background:var(--paper)}
.menu-btn{margin-left:0;background:var(--ink);border-color:var(--ink);color:var(--paper)}
.menu-btn:hover,.menu-btn:focus-visible{background:var(--brand);border-color:var(--brand)}

.mobile-open .navlinks{
  counter-reset:a2w-nav;
  top:72px;min-height:calc(100dvh - 72px);max-height:calc(100dvh - 72px);
  padding:var(--s-5) var(--gutter) var(--s-6);
  background:var(--brand-darker);color:var(--paper);border-bottom:4px solid var(--signal);
}
.mobile-open .navlinks a:not(.btn){
  counter-increment:a2w-nav;display:grid;grid-template-columns:38px 1fr;align-items:center;
  padding:17px 0;color:var(--paper);border-color:rgba(247,246,243,.17);
}
.mobile-open .navlinks a:not(.btn)::before{
  content:"0" counter(a2w-nav);font:600 10px/1 var(--mono);letter-spacing:.14em;color:var(--signal);
}
.mobile-open .navlinks a[aria-current="page"]{color:var(--paper)}
.mobile-open .navlinks a[aria-current="page"]::after{content:"";width:30px;height:2px;background:var(--signal);justify-self:end}
.mobile-open .navlinks .btn-primary{
  min-height:58px;margin-top:var(--s-5);background:var(--paper);border-color:var(--paper);color:var(--ink);--fill:var(--signal);--fill-text:var(--ink);
}

@media (min-width:620px) and (max-width:979px){
  .nav{height:78px}
  .mobile-open .navlinks{top:78px;min-height:calc(100dvh - 78px);max-height:calc(100dvh - 78px)}
}
@media (min-width:980px){
  .nav{height:96px;gap:clamp(20px,2.4vw,42px)}
  .nav-brand{padding-right:18px}
  .nav-brand::after{top:21px;width:7px;height:7px}
  .nav-brand svg{height:31px;max-width:120px}
  .navlinks{gap:clamp(16px,1.65vw,30px);font:600 12px/1 var(--mono);letter-spacing:.075em;text-transform:uppercase}
  .navlinks a:not(.btn){padding:12px 0}
  .nav .btn-primary{min-height:52px;background:var(--brand);border-color:var(--brand);--fill:var(--ink)}
  .nav-tel{min-height:52px;padding-inline:16px;border-color:var(--ink)}
}
@media (prefers-reduced-transparency:reduce){.site-header{background:var(--paper);backdrop-filter:none}}

/* Elementor Pro Formular: übernimmt die aura2wei-Formensprache, bleibt aber
   vollständig im Elementor-Form-Widget bearbeitbar. */
.a2w-elementor-form-section{max-width:var(--wrap);margin-inline:auto;padding-block:var(--section)}
.a2w-elementor-form-section .elementor-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.a2w-elementor-form-section .elementor-field-group{margin:0}
.a2w-elementor-form-section .elementor-field-group-message,
.a2w-elementor-form-section .elementor-field-group-topic,
.a2w-elementor-form-section .elementor-field-group-privacy,
.a2w-elementor-form-section .elementor-field-type-submit{grid-column:1/-1}
.a2w-elementor-form-section .elementor-field-label{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.a2w-elementor-form-section :is(input,select,textarea){width:100%;min-height:52px;border:1px solid var(--hair);border-radius:0;background:var(--paper);color:var(--ink);padding:14px 16px;font:400 16px/1.5 var(--sans)}
.a2w-elementor-form-section textarea{min-height:150px;resize:vertical}
.a2w-elementor-form-section .elementor-button{min-height:52px;border:0;border-radius:0;background:var(--signal);color:var(--paper);padding:14px 22px;font:700 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.a2w-elementor-form-section .elementor-message{font:600 14px/1.5 var(--sans)}
@media (max-width:699px){.a2w-elementor-form-section .elementor-form{grid-template-columns:1fr}.a2w-elementor-form-section .elementor-field-group{grid-column:1/-1}}