/* AI-WORKS — calm, personal, editorial. */
:root{--primary:#135e58;--primary-deep:#123f3c;--accent:#237970;--ink:#203532;--ink-soft:#536963;--paper:#f2f6f3;--hairline:#dce5df;--hairline-strong:#b9cec5;--section-y:5.5rem;--pad-global:7%;--radius:18px}
body{background:#fff;line-height:1.7}
html{scroll-padding-top:110px}
.h1,.h2,.h3{background:none;-webkit-text-fill-color:currentColor;color:var(--ink);text-transform:none;letter-spacing:-.035em;font-weight:600;line-height:1.13}
.h1{font-size:clamp(1.95rem,3.9vw,3.25rem);max-width:19ch;margin-inline:auto}
.h2{font-size:clamp(1.9rem,3.4vw,2.85rem);max-width:26ch;margin-inline:auto}
.theme-dark .h2,.theme-dark .h3{background:none;-webkit-text-fill-color:currentColor;color:#f2f7f4}
.card-title,.result__who{font-weight:600;letter-spacing:-.02em}
p.lead,.lead{font-size:1.12rem;line-height:1.75}
.eyebrow{font-size:.8rem;letter-spacing:.13em;font-weight:600;color:var(--primary)}
.hairline{background:var(--hairline-strong);height:1px}
.nav{top:12px;width:min(90%,1240px);min-height:68px;background:#fffffffa;border:1px solid #dfe7e2;box-shadow:0 5px 20px #1a4b3910;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:14px;padding:.6rem 1.5rem}
/* Agentur-Vermerk oben: leichter Rahmen wie der ADMIND-Knopf im Fliesstext.
   align-items:center statt baseline, damit der Inhalt mittig im Rahmen sitzt. */
.nav__by{align-items:center;gap:.3rem;padding:.28em .55em .28em .5em;border:1px solid var(--hairline-strong);border-radius:999px;background:rgba(20,131,122,.06);opacity:.8;transition:border-color .2s var(--ease),background-color .2s var(--ease),opacity .2s var(--ease)}
.nav__by:hover{border-color:var(--accent);background:rgba(20,131,122,.12);opacity:1}
.nav__by-logo{align-self:center}
.nav__by:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav__logo{max-width:112px}
/* Knopf: durchsichtig, duenner gruener Rand, leichtes Leuchten */
.btn{background:transparent;border:1px solid rgba(20,131,122,.62);border-radius:10px;
  box-shadow:0 0 14px rgba(20,160,130,.24),inset 0 0 12px rgba(20,160,130,.07);
  transform:none;transition:background .25s,box-shadow .25s,border-color .25s}
.btn::before,.btn::after,.btn__inner::before,.btn__inner::after{display:none}
.btn__inner{background:none;box-shadow:none;border:0;border-radius:inherit;color:var(--primary)}
.btn:hover{background:rgba(20,131,122,.06);border-color:var(--accent);transform:none;
  box-shadow:0 0 22px rgba(20,160,130,.38),inset 0 0 14px rgba(20,160,130,.1)}
.btn:hover .btn__inner{background:none;border-color:transparent;color:var(--primary-deep)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.theme-dark .btn{border-color:rgba(132,210,196,.7);box-shadow:0 0 16px rgba(110,220,190,.3),inset 0 0 12px rgba(110,220,190,.08)}
.theme-dark .btn__inner,.theme-dark .btn:hover .btn__inner{color:#eaf6f2}
.theme-dark .btn:hover{background:rgba(132,210,196,.1);border-color:#a8e6d9}
.btn__label{font-size:1rem;font-weight:600;letter-spacing:0}
:focus-visible{outline:3px solid #4d9789;outline-offset:4px}
.hero{padding:4rem 0 4.5rem}
.hero__inner{max-width:1100px}
.hero__sub{max-width:46ch;font-size:1.2rem;line-height:1.7;color:var(--ink-soft)}
.agency--hero{border:0;box-shadow:none;background:transparent;font-size:.8rem;padding:.3rem;opacity:.75;margin-bottom:1.1rem}
.badge{background:#f2f6f3;border:1px solid #dce5df;box-shadow:none;font-size:.85rem;font-weight:400;margin-bottom:1.6rem;color:var(--ink-soft)}
.video-frame{max-width:760px;width:100%;margin-top:2rem;border-radius:18px;border:1px solid #adc5bc;background:#eaf0eb;box-shadow:0 12px 30px -20px #163e3a55;padding:8px}
.video-frame__body{border-radius:11px;background:#1e4e48;background-image:none;box-shadow:none;aspect-ratio:16/9}
.video-frame__body::before,.video-frame__body::after{display:none}
.video-frame__play{border:1px solid #d7e9e160;background:#ffffff12;box-shadow:none;animation:none;width:68px;height:68px;color:#f1f5ee}
.video-frame__hint{color:#d4e2d9;font-size:.875rem;letter-spacing:.05em}
.hero__trust{color:var(--ink-soft);gap:1rem 2rem;max-width:850px}
.hero__trust li{font-size:.875rem}

.about{grid-template-columns:minmax(200px,.72fr) minmax(0,1.4fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;max-width:1080px;margin:auto}
.about__portrait{background:#dce9e1;border:1px solid #bcd0c3;box-shadow:none;aspect-ratio:4/5;max-width:320px;width:100%;border-radius:16px}
.about__portrait::before,.about__portrait::after{display:none}
.about__monogram{color:#66897d;opacity:1;font-weight:400;font-size:4.5rem}
.about .h2{margin-left:0}
.about__facts{margin-top:2rem;padding-top:1.5rem;gap:1.2rem;border-top:1px solid #c9d9cf}
.about__fact strong{background:none;-webkit-text-fill-color:currentColor;color:var(--primary);font-size:1.25rem;line-height:1.35}
.about__fact span{font-size:.875rem;line-height:1.55}
/* Das Laufband steht still und bricht um. Der Track braucht dafuer eine
   begrenzte Breite - mit width:auto wird er so breit wie sein Inhalt und
   bricht nie um. overflow:hidden faengt Restueberstand ab. */
.marquee{overflow:hidden;mask-image:none;-webkit-mask-image:none}
.marquee__track{animation:none;display:flex;flex-wrap:wrap;width:100%;max-width:100%;min-width:0;justify-content:center;gap:1.25rem 2rem}
[data-marquee-clone]{display:none}
.marquee__item{font-size:.9rem;opacity:.75}
.card,.pillar{border:1px solid #dce5df;border-radius:16px;background:#fff;box-shadow:none;padding:1.8rem}
.card:hover{transform:none;box-shadow:none;border-color:#bdcec4}
.card p,.pillar__intro,.pillar li{font-size:1rem;line-height:1.65}
.card__icon{background:#ecf3ee;border:1px solid #d8e5db;border-radius:12px;box-shadow:none;width:44px;height:44px}
.card-title{font-size:1.28rem;line-height:1.3}
.results{gap:0;border-block:1px solid #dce5df;padding-block:1rem}
.result{background:none;border:0;border-radius:0;box-shadow:none;padding:1.6rem}
.result+.result{border-left:1px solid #dce5df}
.result__value{font-size:clamp(2.2rem,4vw,3rem);color:var(--primary);background:none;-webkit-text-fill-color:currentColor;letter-spacing:-.04em}
.result__value--range{font-size:clamp(2rem,3.4vw,2.7rem)}
.result__note{font-size:1rem;line-height:1.65}
.disclaimer{font-size:.9rem;line-height:1.7;max-width:760px;color:var(--ink-soft)}
.result-quote{box-shadow:none;border:0;border-left:2px solid #94b7a6;border-radius:0;background:#f3f7f3;text-align:left;max-width:760px;padding:1.5rem 2rem}
.result-quote blockquote{font-size:1.15rem}
#works-ai .section-y{padding-block:clamp(2.5rem,5vw,4rem)}
#works-ai .dunkel{background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(35,121,112,.28),transparent 70%),linear-gradient(180deg,#123f3c,#092c29)}
#works-ai .lead{color:#dcebe6}
#works-ai .eyebrow{color:#84d2c4}
#works-ai .hairline{background:#84b8ac}
.workflow{border:1px solid #6a928744;box-shadow:0 15px 35px #051e1720;border-radius:18px}








.pillar__no{font-size:1rem;color:#5b8073;margin-bottom:1.2rem;font-weight:500;letter-spacing:.12em}
.pillar:last-child{border-top:3px solid #237970}
#geschichte .about__story{margin:0 auto;border:0;padding:0;max-width:760px}
.about__story h3{font-size:1.6rem;font-weight:600;letter-spacing:-.025em}
.about__story p{font-size:1.05rem;line-height:1.8}
.about__quote{background:#f2f6f3;border:0;border-left:2px solid #91b3a4;border-radius:0;box-shadow:none}

.faq-list{max-width:850px;margin-inline:auto}

.optin{max-width:650px;padding:2rem;background:#fff;border:1px solid #d5e1d8;border-radius:16px;box-shadow:0 10px 25px -20px #123f3c44}
.optin__input{border-radius:8px;background:#fafcf9;border:1px solid #c8d9cd;font-size:1rem}
.optin__label{font-size:.875rem}
.footer{border-top:1px solid #dce5df;background:#fff}
.js [data-reveal]{transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;transition-delay:0s!important}
.js [data-reveal].is-visible{transform:none}
@media(max-width:991px){:root{--section-y:4rem}.about{grid-template-columns:240px minmax(0,1fr);gap:2.3rem}.nav{width:94%}.hero{padding-top:3rem}}
@media(max-width:680px){:root{--pad-global:6%;--section-y:3.5rem}.nav{top:8px;padding:.5rem 1rem;min-height:60px}.h1{font-size:2.05rem}.h2{font-size:2rem}.hero{padding:2.8rem 0 3rem}.hero__sub{font-size:1.1rem}.video-frame{padding:5px}.agency--hero{font-size:.72rem}.about{grid-template-columns:1fr;gap:1.7rem}.about__portrait{max-width:180px;aspect-ratio:1}.about__monogram{font-size:3rem}.about__facts{grid-template-columns:1fr;gap:1rem}.about__fact{display:flex;align-items:baseline;gap:1rem}.about__fact strong{min-width:100px}.result+.result{border-left:0;border-top:1px solid #dce5df}.optin{padding:1.4rem}.card,.pillar{padding:1.5rem}.marquee__track{gap:1rem}.hero__trust{gap:.7rem}.about__story h3{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js [data-reveal]{transition:none;transform:none}}

/* Full-width petrol surface behind the complete WorksAI section. */
#works-ai{background:#123f3c}
#works-ai .dunkel{-webkit-mask-image:none;mask-image:none}

/* Bespoke illustrations: static vectors keep scrolling lightweight. */
.stack__card{padding-right:260px;min-height:275px;overflow:hidden}
.step-art{position:absolute;right:14px;top:50%;width:225px;height:auto;transform:translateY(-50%);pointer-events:none}
.care-art{display:block;width:180px;height:auto;margin:1rem auto 1.4rem}
#works-ai .workflow{padding:7px;background:#1d4b45;border:1px solid #7fa89b66;border-radius:19px;box-shadow:0 18px 42px #031e2440,inset 0 1px 0 #ffffff18;overflow:hidden}
.workflow-chrome{display:flex;align-items:center;gap:6px;height:29px;padding:0 10px 7px}
.workflow-chrome span{width:6px;height:6px;background:#90b5a9;border-radius:50%;opacity:.7}
.workflow-chrome i{width:24%;height:7px;border:1px solid #8bb4a34d;border-radius:3px;margin:auto;transform:translateX(-18px)}
#works-ai .workflow__video{display:block;border-radius:11px;width:100%;height:auto}
@media(max-width:767px){.stack__card{padding-right:1.5rem;padding-top:1.5rem}.step-art{position:static;float:right;transform:none;width:112px;margin:-6px -7px 5px 9px}.stack__card>p:last-child{clear:both}.care-art{width:150px}.workflow-chrome{height:25px}}

/* --------------------------------------------------------------------------
   Partner-Leiste: Logos in Schwarz-Weiss mit Namen
   -------------------------------------------------------------------------- */
.partner{display:inline-flex;align-items:center;gap:1.6rem;opacity:1;color:var(--ink)}   /* Platz fuer den seitlichen Ausschlag des Logos */
.partner__logo{display:block;height:30px;width:auto;opacity:.85;
  /* --drehung und --versatz setzt initPartner() beim Scrollen */
  transform:translate3d(var(--versatz,0px),0,0) rotate(var(--drehung,0deg));will-change:transform}
.partner__name{font-family:var(--font-head);font-weight:600;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
/* Padding oben und unten: das gedrehte Logo ist hoeher als das ruhende und
   wuerde sonst von overflow:hidden der Leiste abgeschnitten (gemessen: 3.6 px) */
.marquee__track:has(.partner){gap:1.5rem 3.5rem;padding:.9rem 0}

/* --------------------------------------------------------------------------
   Foto in "Wer ich bin": gross ueber die volle Inhaltsbreite, gerahmt wie
   das Video im Hero. Kein festes Seitenverhaeltnis, das Bild wird nie
   beschnitten. Der Text steht darunter mit ruhiger Zeilenlaenge.
   -------------------------------------------------------------------------- */
.about{grid-template-columns:1fr;gap:2.75rem;max-width:1080px}
.about__portrait{
  aspect-ratio:auto;width:100%;max-width:min(860px,88%);margin:0 auto;
  padding:8px;
  background:#eaf0eb;
  border:1px solid #adc5bc;
  border-radius:18px;
  box-shadow:0 12px 30px -20px #163e3a55;
  overflow:hidden;
}
.about__portrait img{display:block;width:100%;height:auto;object-fit:initial;border-radius:11px}
.about__text{width:100%;max-width:760px;margin:0 auto}

/* Handy: Foto ueber die ganze Bildschirmbreite, von Rand zu Rand */
@media(max-width:680px){
  .about{gap:2rem}
  .about__portrait{
    width:100vw;max-width:100vw;
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:0;border:0;border-radius:0;box-shadow:none;
  }
  .about__portrait img{border-radius:0}
}

/* ==========================================================================
   MINIMALE NAVIGATION
   Keine Leiste mehr: nur Wortmarke links und drei Striche rechts. Beides
   schwebt beim Scrollen mit, weil .nav ohnehin sticky ist. Die Menuepunkte
   liegen jetzt auf allen Breiten hinter dem Burger, nicht nur am Handy.
   ========================================================================== */
.nav{
  background:none;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:0;padding:0;min-height:0;
  width:min(90%,1240px);
  flex-wrap:wrap;row-gap:0;
  pointer-events:none;              /* Luft zwischen Logo und Strichen klickbar lassen */
}
.nav > *{pointer-events:auto}
.nav::before,.nav::after{display:none}

.nav__burger{display:flex;margin-left:auto}

/* Menue immer eingeklappt - auch auf dem Desktop */
.nav__menu{
  flex-direction:column;align-items:stretch;gap:1.25rem;
  width:100%;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .25s var(--ease),padding .35s var(--ease);
}
.nav.is-open .nav__menu{
  max-height:30rem;opacity:1;
  padding:1.1rem 1.25rem 1.35rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 40px -24px rgba(8,30,23,.45);
}
.nav__links{flex-direction:column;gap:1rem}
.nav__menu .btn{width:100%}

/* ==========================================================================
   FARB-TOKENS
   Bisher standen die Flaechenfarben an 68 Stellen fest im CSS. Ab hier
   laufen sie ueber sechs Variablen. Die helle Fassung ist die Voreinstellung,
   die dunkle haengt an <html data-theme="dark">.
   ========================================================================== */
:root{
  --bg:        #ffffff;   /* Seitenhintergrund */
  --surface:   #ffffff;   /* Karten, Menuepanel */
  --surface-2: #f4f7f4;   /* leicht abgesetzte Flaechen */
  --line:      #dce5df;   /* Rahmen und Trennlinien */
  --text:      #171f1e;   /* Fliesstext */
  --text-soft: #4f605e;   /* Sekundaertext */
}

/* --------------------------------------------------------------------------
   Dunkle Fassung. Haengt an <html data-theme="dark"> - ein Attribut
   entfernen und die Seite ist wieder hell.

   Der Trick: statt 68 Selektoren einzeln umzufaerben, werden die
   bestehenden Design-Variablen neu belegt. Alles, was --white, --ink oder
   --hairline benutzt, kippt dadurch von selbst mit.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --bg:        #0b1211;   /* sehr dunkel, mit leichtem Petrolstich */
  --surface:   #1f2c29;   /* Karten liegen heller als der Grund */
  --surface-2: #1b2724;
  --line:      #2f3f3a;
  --text:      #e9efec;   /* gedaempftes Weiss, kein reines #fff */
  --text-soft: #9db0ab;

  /* bestehende Tokens umbelegen */
  --white:           var(--bg);
  --paper:           var(--surface-2);
  --ink:             var(--text);
  --ink-soft:        var(--text-soft);
  --hairline:        var(--line);
  --hairline-strong: #33443f;

  /* Petrol als Textfarbe waere auf fast Schwarz zu dunkel */
  --accent:          #45c4b2;
  --accent-bright:   #5fd6c4;
}

/* Flaechen, die ihre Farbe fest eingetragen haben */
:root[data-theme="dark"] body{background:var(--bg);color:var(--text)}
:root[data-theme="dark"] .theme-light,
:root[data-theme="dark"] .theme-paper{background:var(--bg)}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .pillar,
:root[data-theme="dark"] .optin,
:root[data-theme="dark"] .stack__card,
:root[data-theme="dark"] .promo{background:var(--surface);border-color:var(--line)}
:root[data-theme="dark"] .about__portrait,
:root[data-theme="dark"] .video-frame{background:var(--surface-2);border-color:var(--line)}
:root[data-theme="dark"] .about__quote{background:var(--surface-2)}
:root[data-theme="dark"] .about__facts{border-top-color:var(--line)}
:root[data-theme="dark"] .result+.result{border-color:var(--line)}
:root[data-theme="dark"] .faq__item{border-color:var(--line)}

/* Petrol als Textfarbe aufhellen - sonst verschwindet es im Hintergrund */
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .about__fact strong,
:root[data-theme="dark"] .result__value,
:root[data-theme="dark"] .stack__no span,
:root[data-theme="dark"] .card__icon,
:root[data-theme="dark"] .badge__check{color:var(--accent)}

/* Schwarze Logos umkehren, damit sie auf dunklem Grund sichtbar bleiben */
:root[data-theme="dark"] .partner__logo{filter:invert(1)}
:root[data-theme="dark"] .partner__name{color:var(--text)}
:root[data-theme="dark"] .nav__logo,
:root[data-theme="dark"] .nav__by-logo,
:root[data-theme="dark"] .admind img,
:root[data-theme="dark"] .agency__logo{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .nav__burger span{background:var(--text)}

/* ==========================================================================
   HERO-HEADLINE
   Glancyr gibt es nur in 600 und 700 - 600 ist die duennste echte Stufe.
   Kleinere Werte wuerde der Browser faelschen, deshalb bewusst nicht.
   ========================================================================== */
.hero .h1{font-weight:600;max-width:26ch;letter-spacing:-.005em}

/* Vorzeile ueber der Headline: klein, gedaempft, ohne Versalien */
.eyebrow--mission{
  text-transform:none;
  letter-spacing:.01em;
  font-weight:500;
  font-size:1rem;
  color:var(--text-soft);
  margin-bottom:.6rem;
}

/* Muss die Dark-Regel fuer .eyebrow ueberstimmen - die faerbt sonst alle
   Vorzeilen in hellem Petrol, und die Mission soll gedaempft bleiben. */
:root[data-theme="dark"] .eyebrow--mission{color:var(--text-soft)}

/* ==========================================================================
   GLANCYR EXTRALIGHT
   Aus Lionels Lizenzdateien als Subset erzeugt, wie die uebrigen Schriften.
   Damit gibt es endlich eine echte duenne Stufe - vorher endete das
   Projekt-Subset bei SemiBold 600.
   ========================================================================== */
@font-face{
  font-family:"Glancyr";
  src:url("fonts/Glancyr-ExtraLight.woff2") format("woff2");
  font-weight:200;
  font-style:normal;
  font-display:swap;
}

/* Headline jetzt in der duennsten echten Stufe */
.hero .h1{font-weight:200;letter-spacing:.005em}
/* Zeilen gleich lang verteilen, damit kein einzelnes Wort allein in der
   letzten Zeile steht. Aeltere Browser brechen einfach normal um. */
.hero .h1{text-wrap:balance}

/* Kursive Serifenschrift fuer das hervorgehobene Wort - der Kontrast zur
   geometrischen Glancyr macht den Effekt. Instrument Serif steht unter der
   Open Font License, der Lizenztext liegt in fonts/. */
@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

.h1 .akzent{
  font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;
  font-style:italic;
  color:var(--accent);
  /* Serifen haben eine groessere x-Hoehe als Glancyr - leicht kleiner
     setzen, sonst wirkt das Wort schwerer als die uebrige Zeile.
     min() deckelt es auf schmalen Schirmen, damit nichts abgeschnitten wird.
     11vw passt zu "Werbematerial" (13 Zeichen). Bei einem laengeren Wort
     den Wert senken, sonst ragt es auf 320 px ueber den Rand. */
  font-size:min(1.06em,11vw);
  letter-spacing:0;
}

/* ==========================================================================
   LINIENBAENDER - sehr dezent
   Duenner wird nur ueber die Strichstaerke im SVG erreicht (dort von ~1.8
   auf ~0.6 gesenkt). Die Deckkraft hier macht sie zusaetzlich leiser.
   ========================================================================== */
.hero__lines{opacity:.34}
.rays__move{
  background-image:repeating-linear-gradient(90deg,
    transparent 0 7rem,
    rgba(20,131,122,.045) 7rem,
    rgba(20,131,122,.045) calc(7rem + 1px));
}

/* ==========================================================================
   ALLE UEBERSCHRIFTEN IN GLANCYR EXTRALIGHT
   ========================================================================== */
.h1,.h2,.h3{font-weight:200}
.card-title,.stack__title,.pillar .card-title{font-weight:200;letter-spacing:-.01em}

/* ==========================================================================
   NACHZUEGLER DER DUNKLEN FASSUNG
   Diese vier Flaechen hatten ihre Hellfarbe fest eingetragen und waren vom
   ersten Dunkel-Block nicht erfasst. Gefunden ueber einen Abgleich aller
   Hintergrundfarben gegen die vorhandenen Dunkel-Regeln.
   ========================================================================== */
:root[data-theme="dark"] .result-quote{
  background:var(--surface-2);
  border-left-color:var(--accent);
}
:root[data-theme="dark"] .result-quote p{color:var(--text)}
:root[data-theme="dark"] .result-quote figcaption{color:var(--accent)}

:root[data-theme="dark"] .footer{background:var(--bg);border-top-color:var(--line)}

:root[data-theme="dark"] .optin__input{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--text);
}
:root[data-theme="dark"] .optin__input::placeholder{color:#7d8f8a}

/* ==========================================================================
   MENUEPANEL: schmal und frei schwebend unter den Strichen
   Vorher lag das Menue als Flex-Element in der Kopfzeile und hatte die
   Breite der frueheren Leiste (~1150 px). Im dunklen Modus fiel das nicht
   auf, im hellen war es ein klobiger Kasten. Jetzt absolut positioniert:
   es nimmt keinen Platz in der Zeile ein und kann Logo und Striche nicht
   mehr verschieben.
   ========================================================================== */
.nav__menu{
  position:absolute;
  top:100%;
  right:0;
  width:min(320px,100%);
  margin-top:.5rem;
  pointer-events:none;           /* eingeklappt nicht anklickbar */
}
.nav.is-open .nav__menu{pointer-events:auto}

/* Stammt aus der alten Glaskachel: dort beschnitt es die Verlaufsschichten
   an den runden Ecken. Ohne Kachel hat es keinen Zweck mehr und schnitt
   das frei schwebende Menue unter der Kopfzeile ab. */
.nav{overflow:visible}

/* ==========================================================================
   FLIPCHART - Arbeitsablauf in sechs Blaettern
   Grundzustand (ohne JavaScript): die Blaetter stehen untereinander.
   Mit JavaScript setzt initFlipchart() die Klasse .flip--aktiv, erst dann
   liegen die Blaetter uebereinander und das oberste klappt nach oben weg.
   ========================================================================== */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.flip{width:100%;max-width:880px;margin:0 auto;text-align:left}
.flip__block{display:flex;flex-direction:column;gap:1.5rem}
.flip__schiene,.flip__beine,.flip__bedienung,.flip__stand{display:none}

.flip__blatt{
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px 14px 24px;
  box-shadow:0 14px 28px -22px rgba(23,31,30,.4);
}
.flip__bild{display:block;width:100%;height:auto;border-radius:4px;background:#0a0a0a}
.flip__text{display:flex;gap:1.15rem;align-items:flex-start;padding:1.35rem .9rem 0}
.flip__nr{
  flex:none;min-width:2rem;
  font-family:"Instrument Serif",Georgia,serif;font-style:italic;
  font-size:3.6rem;line-height:.78;color:var(--accent);
}
.flip__titel{
  margin:0 0 .45rem;
  font-family:var(--font-head);font-weight:200;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.2;
  color:var(--ink);
}
.flip__text p{margin:0;max-width:56ch;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}

/* --- Flipchart-Modus ---------------------------------------------------- */
.flip--aktiv .flip__buehne{position:relative;padding-top:14px}

/* Kopfschiene mit zwei Klemmen: darunter haengen die Blaetter */
.flip--aktiv .flip__schiene{
  display:block;position:absolute;top:0;left:2.5%;right:2.5%;height:28px;z-index:60;
  border-radius:7px;background:linear-gradient(#5a6b67,#35423f);
  box-shadow:0 8px 16px -8px rgba(8,30,23,.5);
}
.flip--aktiv .flip__schiene::before,
.flip--aktiv .flip__schiene::after{
  content:"";position:absolute;top:8px;width:34px;height:12px;border-radius:3px;
  background:#d3dcd8;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);
}
.flip--aktiv .flip__schiene::before{left:16%}
.flip--aktiv .flip__schiene::after{right:16%}

/* Perspektive muss am direkten Elternelement der Blaetter sitzen */
/* Grosse Perspektive: das wegkippende Blatt blaeht sich kaum auf */
.flip--aktiv .flip__block{display:grid;gap:0;perspective:4200px}
.flip--aktiv .flip__blatt{
  grid-area:1/1;
  padding-top:32px;                       /* Platz unter der Schiene */
  transform-origin:50% 0;                 /* Drehachse = Oberkante */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transition:transform .8s cubic-bezier(.5,.02,.45,1),visibility 0s linear 0s;
  /* Blockkante: helle und graue Linien unter dem Blatt wie ein Papierstapel */
  box-shadow:0 1px 0 #fff,0 2px 0 var(--line),0 4px 0 #fff,0 5px 0 var(--line),
             0 24px 30px -24px rgba(23,31,30,.32);
}
.flip--aktiv .flip__blatt:nth-child(1){z-index:6}
.flip--aktiv .flip__blatt:nth-child(2){z-index:5}
.flip--aktiv .flip__blatt:nth-child(3){z-index:4}
.flip--aktiv .flip__blatt:nth-child(4){z-index:3}
.flip--aktiv .flip__blatt:nth-child(5){z-index:2}
.flip--aktiv .flip__blatt:nth-child(6){z-index:1}

/* Umgeklappt: nach oben weggedreht, danach ausgeblendet. Gedreht wird nur
   knapp ueber 90 Grad hinaus: Ab dort ist das Blatt wegen backface-visibility
   unsichtbar, alles darueber waere Zeit ohne sichtbare Bewegung. */
.flip--aktiv .flip__blatt.ist-umgeklappt{
  transform:rotateX(96deg);
  visibility:hidden;
  transition:transform .8s cubic-bezier(.5,.02,.45,1),visibility 0s linear .8s;
}

/* Staender: Mittelstange und zwei Beine */
.flip--aktiv .flip__beine{
  display:block;position:relative;height:84px;
  background:linear-gradient(#b3c0bc,#dbe3e0) 50% 0/4px 100% no-repeat;
}
.flip--aktiv .flip__beine::before,
.flip--aktiv .flip__beine::after{
  content:"";position:absolute;left:calc(50% - 2px);top:16px;width:4px;height:100%;
  border-radius:2px;background:linear-gradient(#b3c0bc,#e6ece9);transform-origin:50% 0;
}
.flip--aktiv .flip__beine::before{transform:rotate(22deg)}
.flip--aktiv .flip__beine::after{transform:rotate(-22deg)}

/* Bedienung */
.flip--aktiv .flip__bedienung{
  display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.4rem;
}
.flip__pfeil{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--hairline-strong);background:#fff;color:var(--ink);
  transition:border-color .2s var(--ease),color .2s var(--ease),opacity .2s var(--ease);
}
.flip__pfeil:hover{border-color:var(--accent);color:var(--accent)}
.flip__pfeil:focus-visible,.flip__punkt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.flip__pfeil[disabled]{opacity:.3;pointer-events:none}
.flip__punkte{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.flip__punkt{
  position:relative;display:block;width:10px;height:10px;border-radius:50%;
  background:var(--hairline-strong);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.flip__punkt::before{content:"";position:absolute;inset:-9px}      /* groessere Trefferflaeche */
.flip__punkt[aria-current="step"]{background:var(--accent);transform:scale(1.3)}
.flip--aktiv .flip__stand{display:block;margin:.8rem 0 0;text-align:center;font-size:.85rem;color:var(--ink-soft)}

@media (max-width:680px){
  .flip__blatt{padding:10px 10px 20px}
  .flip--aktiv .flip__blatt{padding-top:30px}
  .flip__text{gap:.8rem;padding:1.1rem .5rem 0}
  .flip__nr{font-size:2.8rem;min-width:1.5rem}
  .flip--aktiv .flip__beine{display:none}
  .flip--aktiv .flip__schiene{left:1%;right:1%}
}
@media (prefers-reduced-motion:reduce){
  .flip--aktiv .flip__blatt,
  .flip--aktiv .flip__blatt.ist-umgeklappt{transition:none}
}

@media (prefers-reduced-motion:reduce){.partner__logo{transform:none;will-change:auto}}

/* ==========================================================================
   ANSATZ-TEXT (unter "Wir verkaufen keinen Kurs!")
   Schmale Spalte fuer ruhiges Lesen, linksbuendig statt zentriert: Vier
   Absaetze zentriert zu setzen waere anstrengend.
   ========================================================================== */
.ansatz{max-width:40rem;margin:2.2rem auto 3.2rem;text-align:left}
.ansatz p{margin:0 0 1.1rem;font-size:1.05rem;line-height:1.75;color:var(--ink-soft)}
.ansatz p:last-child{margin-bottom:0}
.ansatz .ansatz__lead{
  font-family:var(--font-head);font-weight:200;
  font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.4;
  color:var(--ink);margin-bottom:1.6rem;
}
.ansatz strong{color:var(--ink);font-weight:600}
.ansatz .ansatz__bedingung{
  margin-top:1.6rem;padding-top:1.5rem;
  border-top:1px solid var(--hairline-strong);
}
@media (max-width:680px){.ansatz{margin:1.8rem auto 2.4rem}.ansatz p{font-size:1rem}}

/* ==========================================================================
   SZENE - Kurs -> Zusammenarbeit
   Zwei Karten. Beim Scrollen fliegt die erste schraeg nach links oben weg und
   gibt die zweite frei, die darunter liegt.

   Grundzustand (ohne JavaScript oder bei "reduzierter Bewegung"): zwei Karten
   untereinander, jeweils Ueberschrift, Bild, Text.
   Mit .szene--aktiv (setzt initSzene) liegen beide Karten uebereinander auf
   einer festgepinnten Buehne. Die Variable --w (0 bis 1) steuert den Flug.
   ========================================================================== */
.szene{margin:1.5rem auto 2rem;max-width:62rem}

.szene__blatt{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;
  padding:2rem 1.6rem 1.6rem;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 40px -30px rgba(23,31,30,.28);
}
.szene__eins{margin-bottom:2.5rem}
.szene__kopf{margin:0;max-width:46rem}
.szene__bild{
  position:relative;overflow:hidden;margin:0;width:100%;aspect-ratio:2144/964;
  border-radius:10px;border:1px solid var(--line);background:#fff;
}
.szene__bild img{display:block;width:100%;height:100%;object-fit:contain}
.szene__bild--eins img{filter:grayscale(1)}            /* erstes Bild in Schwarz-Weiss */
.szene__bild video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.szene__text{margin:0;max-width:42rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.65;color:var(--ink-soft)}

/* Zweite Karte: duenner gruener Rahmen, der leicht leuchtet */
.szene__zwei{
  border-color:rgba(20,131,122,.6);
  box-shadow:0 0 0 1px rgba(20,160,130,.14),
             0 0 16px rgba(20,160,130,.26),
             0 0 46px -6px rgba(20,160,130,.2);
}

/* --- Buehne ------------------------------------------------------------- */
.szene--aktiv{max-width:none;height:calc(100vh + 150vh);height:calc(100svh + 150svh)}
.szene--aktiv .szene__buehne{
  --w:0;
  /* Breite der Karte: Das Bild darin ist nie hoeher, als das Fenster neben
     Ueberschrift, Text und Kartenrand zulaesst (3.2rem = Seitenrand in der Karte). */
  --blatt-b:min(100%,calc((100vh - 24rem) * 2.224 + 3.2rem));
  --blatt-b:min(100%,calc((100svh - 24rem) * 2.224 + 3.2rem));
  position:sticky;top:0;
  height:100vh;height:100svh;
  display:grid;grid-template-columns:minmax(0,1fr);
  align-content:center;justify-items:center;
  padding:4.8rem 0 1.2rem;
  /* Die fliegende Karte darf seitlich nicht die Seite verbreitern.
     clip statt hidden: erzeugt keinen Scrollbereich, sticky bleibt intakt. */
  overflow-x:clip;
}
.szene--aktiv .szene__blatt{
  grid-area:1/1;align-self:stretch;
  width:var(--blatt-b);margin:0;
}

/* Karte 1 liegt oben und fliegt mit wachsendem --w nach links oben, kippt dabei
   leicht und blendet erst gegen Ende aus. */
.szene--aktiv .szene__eins{
  margin-bottom:0;z-index:2;
  transform:translate3d(calc(var(--w) * -70vw),calc(var(--w) * -62vh),0) rotate(calc(var(--w) * -9deg));
  opacity:calc(1 - var(--w) * var(--w) * var(--w));
  will-change:transform,opacity;
}

/* Karte 2 liegt darunter und waechst beim Freigeben leicht auf ihre Groesse */
.szene--aktiv .szene__zwei{
  z-index:1;
  transform:scale(calc(.95 + var(--w) * .05));
  will-change:transform;
}

/* Solange die zweite Karte noch verdeckt ist, ist sie weder sichtbar noch
   fokussierbar (der ADMIND-Link darin waere sonst unsichtbar anklickbar) */
.szene--aktiv[data-ansicht="1"] .szene__zwei{visibility:hidden}

/* Handy: Karten und Bild ueber die ganze Bildschirmbreite */
@media (max-width:680px){
  .szene__blatt{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    padding:1.6rem 0 1.2rem;gap:1rem;border-left:0;border-right:0;border-radius:0;
  }
  .szene__kopf,.szene__text{padding:0 6%}
  .szene__bild{border-radius:0;border-left:0;border-right:0}
  .szene__text{font-size:1rem;line-height:1.6}
  .szene--aktiv .szene__buehne{
    --blatt-b:100vw;padding-top:4.6rem;
    width:100vw;margin-left:calc(50% - 50vw);
  }
  .szene--aktiv .szene__blatt{margin:0}
}
@media (max-height:720px){
  .szene--aktiv .szene__buehne{padding-top:4.2rem}
  .szene__blatt{gap:.9rem}
  .szene__text{font-size:.98rem;line-height:1.55}
}

/* ==========================================================================
   FESTER KNOPF "So funktioniert's"
   Der einzige Knopf der Seite, unten mittig festgemacht. Er liegt ueber
   Bildern und Text, deshalb Milchglas statt ganz durchsichtig: der Inhalt
   darunter scheint weich durch, die Schrift bleibt lesbar.
   ========================================================================== */
.cta-fix{
  position:fixed;left:50%;z-index:60;
  bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  white-space:nowrap;
  transition:opacity .3s ease,transform .3s ease,background .25s,box-shadow .25s,border-color .25s,visibility 0s linear 0s;
}
.cta-fix .btn__inner{padding:.95rem 2.2rem;min-width:15.5rem}
.cta-fix .btn__label{display:flex;align-items:center;justify-content:center;gap:.6rem}
.cta-fix__pfeil{flex:none;transition:transform .25s ease}
.cta-fix:hover .cta-fix__pfeil{transform:translateX(3px)}
.cta-fix:hover{background:rgba(255,255,255,.94);transform:translateX(-50%)}
.cta-fix:active{transform:translateX(-50%) translateY(1px)}
/* Ausgeblendet ueber dem Formular und dem Footer */
.cta-fix.ist-weg{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(14px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
@media (prefers-reduced-motion:reduce){
  .cta-fix,.cta-fix.ist-weg{transition:none}
}

/* ==========================================================================
   PLATINE IM HINTERGRUND
   Die feste Ebene .rays traegt eine Leiterplatte mit Bahnen, Loetpunkten und
   einem Prozessor je Kachel (assets/platine-bg.svg, nahtlos). Sie steht still
   und ist unscharf, der Inhalt gleitet beim Wischen darueber hinweg.
   Die Hintergrund-Grafiken sind kraeftiger als die in den Saeulen, weil die
   Unschaerfe die duennen Bahnen sonst fast ganz verwischt.
   ========================================================================== */
:root{--platine:640px;--platine-unschaerfe:3px}
@media (max-width:640px){:root{--platine:420px;--platine-unschaerfe:2.5px}}
.rays__move{
  /* etwas groesser als das Fenster: die Unschaerfe laeuft sonst an den
     Raendern aus und zeigt einen hellen Saum */
  top:-24px;left:-24px;right:-24px;height:auto;bottom:-24px;
  background-image:url("assets/platine-bg.svg");
  background-size:var(--platine) var(--platine);
  background-position:center center;
  background-repeat:repeat;
  -webkit-mask-image:none;mask-image:none;
  transform:none;will-change:auto;
  filter:blur(var(--platine-unschaerfe));
}
/* Auf der dunklen Flaeche dieselbe Platine in Weiss. background-attachment:
   fixed haelt sie wie die helle Ebene am Fenster fest. iOS-Safari kennt
   das nicht – dort laeuft sie mit dem Abschnitt mit. */
.dunkel__linien{
  top:0;height:100%;
  background-image:url("assets/platine-bg-hell.svg");
  background-size:var(--platine) var(--platine);
  background-position:center center;
  background-repeat:repeat;
  background-attachment:fixed;
  -webkit-mask-image:none;mask-image:none;
  transform:none;will-change:auto;
  filter:blur(var(--platine-unschaerfe));
}

/* ==========================================================================
   STUFEN – "Du musst entscheiden, wie weit du den Weg gehst"
   Drei Saeulen, jede eine Einheit hoeher. Jede steckt in einem Schacht mit
   overflow:hidden; der Lift darin faehrt per --l (0 bis 1, aus initStufen)
   aus dem Boden nach oben. Eine Leiterbahn verbindet die Oberkanten, sie
   zeichnet sich per --b von links nach rechts.
   Ohne JavaScript gelten --l:1 und --b:1, alles steht fertig da.
   ========================================================================== */
.stufen{
  --einheit:104px;              /* Hoehenzuwachs pro Stufe */
  --euro-h:3.6rem;              /* Platz fuer die Euro-Zeichen ueber der Saeule */
  --spalt:clamp(1rem,4vw,3.25rem);
  list-style:none;margin:3.5rem auto 0;padding:0;
  width:100%;max-width:880px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;column-gap:var(--spalt);
}
.stufe{
  --l:1;--b:1;
  position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;
}
.stufen--aktiv .stufe{--l:0;--b:0}

/* Oberer Teil: Schacht mit Saeule, unten buendig auf dem Boden */
.stufe__oben{position:relative;align-self:end}
.stufe__oben::after{                      /* Bodenlinie, laeuft durch die Luecken */
  content:"";position:absolute;bottom:0;height:1px;
  left:calc(var(--spalt) / -2);right:calc(var(--spalt) / -2);
  background:linear-gradient(90deg,transparent,var(--hairline-strong) 12%,var(--hairline-strong) 88%,transparent);
}
.stufe__schacht{
  display:flex;align-items:flex-end;overflow:hidden;
  height:calc(var(--euro-h) + var(--i) * var(--einheit));
}
.stufe__lift{
  width:100%;display:flex;flex-direction:column;align-items:center;
  transform:translate3d(0,calc((1 - var(--l)) * 100%),0);
  will-change:transform;
}
.stufe__euro{
  display:flex;align-items:center;height:var(--euro-h);
  font-family:var(--font-head);font-weight:200;
  font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:.06em;line-height:1;
  color:var(--accent);
}
.stufe:nth-child(3) .stufe__euro{color:var(--primary)}

.stufe__saeule{
  position:relative;display:block;width:100%;overflow:hidden;
  height:calc(var(--i) * var(--einheit));
  border-radius:14px 14px 0 0;
}
/* Leiterbahnen in der Saeule */
.stufe__saeule::before{
  content:"";position:absolute;inset:0;
  background:url("assets/platine-hell.svg") 50% 100%/320px 320px;
}
/* Leuchtende Oberkante */
.stufe__saeule::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(173,245,226,.95),transparent);
  box-shadow:0 0 14px 2px rgba(95,214,196,.45);
}
.stufe:nth-child(1) .stufe__saeule{
  background:linear-gradient(180deg,#cfe7df,#ecf6f2);
  box-shadow:inset 0 0 0 1px #b7d6cc;
}
.stufe:nth-child(1) .stufe__saeule::before{background-image:url("assets/platine.svg")}
.stufe:nth-child(1) .stufe__saeule::after{box-shadow:none;background:linear-gradient(90deg,transparent,#7cc3b2,transparent)}
.stufe:nth-child(2) .stufe__saeule{background:linear-gradient(180deg,#2f8a7b,#6fb3a4)}
.stufe:nth-child(3) .stufe__saeule{
  background:linear-gradient(180deg,#0a4e48,#14837a);
  box-shadow:0 18px 40px -18px rgba(14,107,99,.55);
}

/* Leiterbahn von Saeule zu Saeule: waagrecht, hoch, waagrecht */
.stufe__bahn{
  position:absolute;left:100%;width:var(--spalt);
  bottom:calc(var(--i) * var(--einheit));height:var(--einheit);
  clip-path:inset(-4px calc((1 - var(--b)) * 100%) -4px 0);
  pointer-events:none;
}
.stufe__bahn::before{
  content:"";position:absolute;left:0;bottom:0;width:50%;height:100%;
  border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent);
}
.stufe__bahn::after{
  content:"";position:absolute;left:50%;top:0;width:50%;
  border-top:1.5px solid var(--accent);
}

.stufe__text{
  margin:1.1rem 0 0;padding:0 .25rem;
  font-size:1rem;font-weight:600;line-height:1.45;color:var(--ink);text-align:center;
  opacity:var(--l);transform:translate3d(0,calc((1 - var(--l)) * 10px),0);
}
.stufe__plus{color:var(--accent);font-weight:700;margin-right:.1em}

@media (max-width:640px){
  .stufen{--einheit:66px;--euro-h:2.6rem;--spalt:.75rem;margin-top:2.5rem}
  .stufe__euro{font-size:1.3rem;letter-spacing:.02em}
  .stufe__saeule{border-radius:10px 10px 0 0}
  .stufe__text{font-size:.95rem;line-height:1.4;padding:0}
}

/* ==========================================================================
   ABSTAENDE – ein Rhythmus fuer alle Abschnitte
   Jeder Abschnitt hat oben und unten --section-y (Desktop 88 px, Handy 56 px).
   Zwischen Abschnittskopf und Inhalt liegt ueberall --kopf-abstand.
   Nur die Logozeile ist bewusst schmaler, sie ist ein Band, kein Abschnitt.
   ========================================================================== */
:root{--kopf-abstand:clamp(2.25rem,1.6rem + 2vw,3.25rem)}

.logos .section-y{padding-block:calc(var(--section-y) * .55)}
.logos .eyebrow{margin-bottom:1.5rem}
#works-ai .section-y{padding-block:var(--section-y)}

/* Abschnittskopf -> Inhalt */
.szene,
#ergebnisse .results,
.stack,
#paket .grid--3,
.faq,
.stufen,
#works-ai .workflow,
.optin{margin-top:var(--kopf-abstand)}
.szene{margin-bottom:0}

/* Auslaeufe, die unten zusaetzlichen Leerraum erzeugt haben */
.stack{padding-bottom:0}
.stack__item:last-child{padding-bottom:0}
.about__story .about__sign{margin-bottom:0}
.result-quote{margin-top:var(--kopf-abstand)}

/* ==========================================================================
   SZENE AM HANDY: zwei Karten ruhig untereinander statt Flug
   initSzene setzt am Handy .szene--liste statt .szene--aktiv.
   ========================================================================== */
@media (max-width:680px){
  .szene--liste .szene__buehne{display:flex;flex-direction:column;gap:1.25rem}
  .szene--liste .szene__blatt,
  .szene:not(.szene--aktiv) .szene__blatt{
    width:auto;margin:0;
    padding:1.5rem 1.15rem 1.35rem;gap:1rem;
    border:1px solid var(--line);border-radius:16px;
  }
  .szene:not(.szene--aktiv) .szene__zwei{border-color:rgba(20,131,122,.6)}
  .szene:not(.szene--aktiv) .szene__kopf,
  .szene:not(.szene--aktiv) .szene__text{padding:0}
  .szene:not(.szene--aktiv) .szene__bild{border:1px solid var(--line);border-radius:10px}
  .szene:not(.szene--aktiv) .szene__eins{margin-bottom:0}
}

/* ==========================================================================
   EINFLIEGEN
   Elemente kommen weich von unten, werden dabei scharf und voll sichtbar.
   Was gleichzeitig ins Bild kommt, folgt in kurzem Abstand aufeinander
   (--reveal-delay setzt initReveal je Schub).
   ========================================================================== */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,40px,0) scale(.97);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform 1s cubic-bezier(.16,1,.3,1),
             filter .8s ease;
  transition-delay:var(--reveal-delay,0ms)!important;
}
.js [data-reveal].is-visible{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
}

/* ==========================================================================
   PAPIER UND SCHWEBENDE SCHRIFT
   Die ganze Seite liegt auf mattem, leicht warmem Papier mit feiner Koernung
   (assets/papier.svg, kachelt nahtlos). Die Abschnitte sind durchsichtig,
   damit das Papier ueberall durchgeht; Karten bleiben als hellere Blaetter
   darauf liegen.
   Die Schrift wirft einen weichen Schatten aufs Papier: eine knappe Kante
   direkt darunter und ein breiter, sehr heller Schein etwas tiefer. Das
   laesst sie ein Stueck ueber der Flaeche schweben. Die Farben sind minimal
   weicher als zuvor, das wirkt matt statt glaenzend.
   ========================================================================== */
:root{
  --papier:#f7f6f2;
  --blatt:#fdfcf9;                       /* Karten: etwas heller als das Papier */
  --schrift-schatten:0 1px 1px rgba(38,44,42,.09),0 4px 9px rgba(38,44,42,.08);
  --titel-schatten:0 1px 1px rgba(38,44,42,.10),0 7px 14px rgba(38,44,42,.12),0 16px 32px rgba(38,44,42,.07);
}
html,body{background-color:var(--papier)}
body{
  background-image:url("assets/papier.svg");
  background-size:320px 320px;
  background-repeat:repeat;
  color:#26332f;
  text-shadow:var(--schrift-schatten);
}

/* Flaechen durchsichtig: das Papier traegt die ganze Seite */
.theme-light,.theme-paper,.footer{background-color:transparent}

/* Karten als hellere Blaetter auf dem Papier */
.card,.pillar,.result,.stack__card,.flip__blatt,.szene__blatt,.optin,.about__quote{background-color:var(--blatt)}

/* Ueberschriften: etwas weicher in der Farbe, deutlicher Schatten */
.h1,.h2,.h3,.card-title,.stack__title,.flip__titel,.szene__kopf,
.about__story h3,.partner__name,.result__value,.stufe__euro,.faq__q{
  color:#25332f;
  text-shadow:var(--titel-schatten);
}
.h1 .akzent{text-shadow:var(--titel-schatten)}
.lead,.card p,.pillar__intro,.pillar li,.about__story p,.szene__text,.stufe__text,.faq__a p{
  text-shadow:var(--schrift-schatten);
}

/* Auf der dunklen Flaeche ein dunkler, weicher Schatten statt des hellen */
#works-ai,#works-ai *{text-shadow:0 2px 8px rgba(0,0,0,.28)}
#works-ai .h2{color:#f2f7f4;text-shadow:0 2px 3px rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.35)}

/* Schrift in Bildern, Videos und Knoepfen bleibt ohne Schatten */
.video-frame,.video-frame *,.btn,.btn *,.admind,.nav,.nav *{text-shadow:none}

/* Gruen-Schimmer: muss innerhalb des Abschnitts ganz auslaufen. Auf Weiss
   fiel der Rest an der Abschnittskante nicht auf, auf dem Papier schon. */
.theme-glow-bottom{
  background-image:radial-gradient(ellipse 78% 44% at 50% 56%,
    rgba(20,131,122,.10) 0%,rgba(20,131,122,.035) 45%,rgba(20,131,122,0) 70%);
}
.theme-glow-top{
  background-image:radial-gradient(ellipse 78% 44% at 50% 44%,
    rgba(20,131,122,.09) 0%,rgba(20,131,122,.03) 45%,rgba(20,131,122,0) 70%);
}

/* ==========================================================================
   BILD-HINTERGRUND: weisse Platine in Relief
   Ersetzt die gezeichnete Platine. Zwei Bilder: Querformat fuer PC und
   Tablet quer, Hochformat fuer Handy und Tablet hoch (Umschalten nach
   Seitenverhaeltnis, nicht nach Breite). Die Ebene .rays steht fest im
   Fenster, der Inhalt gleitet darueber.
   Die Bilder sind aus 1672-px-Originalen vorab hochgerechnet (Lanczos,
   leicht nachgeschaerft): PC 4180 px breit, Handy 3344 px hoch. So reichen
   sie auch fuer Retina-Laptops und grosse Monitore, ohne dass der Browser
   sie unscharf vergroessert. Keine Papierkoernung darueber: auf dem glatten
   Relief wirkte sie wie Bildrauschen.
   100lvh: die Hoehe bleibt gleich, wenn am Handy die Adressleiste ein- und
   ausfaehrt. Sonst wuerde das Bild bei jedem Wischen neu skaliert.
   ========================================================================== */
.rays{
  inset:auto;top:0;left:0;width:100%;
  height:100vh;height:100lvh;
  opacity:1;
}
.rays__move{
  top:0;left:0;right:0;bottom:0;height:auto;
  background-image:url("assets/hintergrund-pc.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:none;transform:none;
}
@media (max-aspect-ratio:1/1){
  .rays__move{background-image:url("assets/hintergrund-handy.webp")}
}
/* Karten neutral weiss, passend zum kuehleren Bild */
:root{--blatt:#fdfdfd}

/* Hintergrundbild unscharf. Die Ebene ist ringsum etwas groesser als das
   Fenster, sonst franst die Unschaerfe an den Raendern hell aus.
   Staerke ueber --hintergrund-unschaerfe einstellen. */
:root{--hintergrund-unschaerfe:3.5px}
@media (max-width:680px){:root{--hintergrund-unschaerfe:2px}}
.rays__move{
  top:-32px;left:-32px;right:-32px;bottom:-32px;
  filter:blur(var(--hintergrund-unschaerfe));
}

/* ==========================================================================
   HINTERGRUND ALS ENDLOSSCHLEIFE
   Kachel = Bild + gespiegelte Kopie darunter (assets/hintergrund-*-loop.webp).
   Durch die Spiegelung passen Ober- und Unterkante immer nahtlos aneinander,
   die Kachel kann sich also beliebig oft wiederholen.
   Breite = Fensterbreite, Hoehe ergibt sich aus --loop-r (Hoehe/Breite der
   Kachel). initRays() schiebt die Ebene beim Scrollen ganz leicht nach oben
   (10 % der Scrollstrecke) und springt nach einer Kachelhoehe unsichtbar
   zurueck – so laeuft der Hintergrund endlos mit.
   ========================================================================== */
:root{--loop-r:1.12578}
@media (max-aspect-ratio:1/1){:root{--loop-r:3.55349}}
.rays__move{
  bottom:auto;
  height:calc(100vh + 64px + (100vw + 64px) * var(--loop-r));
  height:calc(100lvh + 64px + (100vw + 64px) * var(--loop-r));
  background-image:url("assets/hintergrund-pc-loop-v2.webp");
  background-size:100% auto;
  background-position:center top;
  background-repeat:repeat-y;
  transform:translate3d(0,calc(var(--hg-y,0px) * -1),0);
  will-change:transform;
}
@media (max-aspect-ratio:1/1){
  .rays__move{background-image:url("assets/hintergrund-handy-loop-v2.webp")}
}

/* ==========================================================================
   WORKS-AI: dunkles Netzwerk, weicher Uebergang
   Der Abschnitt hat keinen eigenen Hintergrund mehr. Die Ebene .dunkel traegt
   das Netzwerk-Bild (assets/works-ai-netzwerk-v2.webp) und laeuft oben und
   unten ueber --dunkel-lauf weich aus. Diese Verlaufszone liegt im
   Innenabstand des Abschnitts: Beim Hinscrollen wird der helle Hintergrund
   von unten her immer dunkler, und wenn die Ueberschrift kommt, ist alles
   dunkel. Danach wird es genauso weich wieder hell. Kein Text steht dabei
   auf halbdunklem Grund.
   ========================================================================== */
#works-ai{background:transparent;--dunkel-lauf:42vh}
@media (max-width:767px){#works-ai{--dunkel-lauf:30vh}}
#works-ai .section-y{padding-block:calc(var(--dunkel-lauf) + var(--section-y))}
#works-ai .dunkel{
  display:block;
  background:#011515 url("assets/works-ai-netzwerk-v2.webp") center center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--dunkel-lauf),#000 calc(100% - var(--dunkel-lauf)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--dunkel-lauf),#000 calc(100% - var(--dunkel-lauf)),transparent 100%);
}
#works-ai .dunkel__linien{display:none}

/* Kopfzeile ueber der dunklen Works-AI-Flaeche: Striche, Logo und
   ADMIND-Vermerk werden hell, sonst verschwinden sie im Dunkel.
   Die Klasse .nav--hell setzt initNavHell(). */
.nav__burger span,.nav__logo,.nav__by,.nav__by-logo{transition:background-color .35s ease,filter .35s ease,border-color .35s ease,color .35s ease}
.nav--hell .nav__burger span{background:#eef5f2}
.nav--hell .nav__logo,.nav--hell .nav__by-logo{filter:brightness(0) invert(1)}
.nav--hell .nav__by{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#eef5f2}
.nav--hell.is-open .nav__burger span{background:var(--ink)}

/* ==========================================================================
   FLUESSIGES MITLAUFEN
   1. Keine CSS-Unschaerfe mehr: Die Bilder sind bereits weichgezeichnet
      (in die Dateien eingerechnet). Ein Blur-Filter auf der grossen Ebene
      musste bei jeder Bewegung neu berechnet werden und hat geruckelt.
   2. Die Bewegung laeuft als CSS-Scroll-Animation (animation-timeline).
      Der Browser fuehrt sie im selben Takt wie das Scrollen aus, ohne
      Skript dazwischen – nichts kann mehr hinterherhinken und springen.
      Strecke: 10 % der Seitenlaenge, --hg-ende setzt initRays() einmalig.
      Die Ebene ist um genau diese Strecke hoeher, eine Schleife braucht es
      dann nicht.
   Browser ohne Scroll-Animation nutzen weiter das Skript (Schleife ueber
   die Kachelhoehe), nur ohne den teuren Filter.
   ========================================================================== */
:root{--loop-r:1.125}
@media (max-aspect-ratio:1/1){:root{--loop-r:3.55333}}
.rays__move{filter:none}

@supports (animation-timeline:scroll()){
  .rays__move{
    height:calc(100vh + 64px + var(--hg-ende,0px));
    height:calc(100lvh + 64px + var(--hg-ende,0px));
    transform:none;
    animation:hg-wandern linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes hg-wandern{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(0,calc(var(--hg-ende,0px) * -1),0)}
  }
}
@media (prefers-reduced-motion:reduce){
  .rays__move{animation:none;transform:none}
}

/* ==========================================================================
   WORKS-AI-HINTERGRUND IM SEITENHINTERGRUND
   Das Netzwerk-Bild steht wie der uebrige Hintergrund still am Bildschirm,
   der Inhalt laeuft darueber. Kommt man bei Works-AI an, fuellt es genau
   den Bildschirm aus.
   So geht es ohne Skript (und damit ohne Ruckeln):
   - .dunkel reicht eine Bildschirmhoehe (--dunkel-vor) ueber und unter den
     Abschnitt hinaus. Dort ist die Maske durchsichtig.
   - .dunkel__bild ist eine Bildschirmhoehe hoch und klebt per sticky oben.
     Durch die Verlaengerung klebt es ab dem Moment, in dem der Abschnitt
     unten hereinkommt, bis er oben ganz verschwunden ist.
   - Die Maske blendet ueber --dunkel-lauf weich ein und aus, genau im
     Innenabstand des Abschnitts.
   overflow:clip statt hidden: hidden wuerde sticky ausschalten.
   ========================================================================== */
#works-ai{--dunkel-vor:100vh}
@supports (height:100lvh){#works-ai{--dunkel-vor:100lvh}}
#works-ai .dunkel{
  top:calc(var(--dunkel-vor) * -1);bottom:calc(var(--dunkel-vor) * -1);left:0;right:0;
  overflow:clip;
  background:none;
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0,transparent var(--dunkel-vor),
    #000 calc(var(--dunkel-vor) + var(--dunkel-lauf)),
    #000 calc(100% - var(--dunkel-vor) - var(--dunkel-lauf)),
    transparent calc(100% - var(--dunkel-vor)),transparent 100%);
  mask-image:linear-gradient(180deg,
    transparent 0,transparent var(--dunkel-vor),
    #000 calc(var(--dunkel-vor) + var(--dunkel-lauf)),
    #000 calc(100% - var(--dunkel-vor) - var(--dunkel-lauf)),
    transparent calc(100% - var(--dunkel-vor)),transparent 100%);
}
.dunkel__bild{
  position:sticky;top:0;display:block;width:100%;
  height:100vh;height:100lvh;
  background:#011515 url("assets/works-ai-netzwerk-v2.webp") center center/cover no-repeat;
}

/* ==========================================================================
   WORKS-AI AM HANDY: eigenes Uebergangsbild (scharf)
   assets/works-ai-handy-v1.webp hat den Verlauf hell -> dunkel schon im Bild:
   oben helle Platine, unten leuchtendes Netzwerk. Es sitzt oben im Abschnitt
   und scrollt mit herein. Unten sitzt die gespiegelte Kopie und fuehrt
   wieder ins Helle. Dazwischen (falls der Abschnitt laenger ist) dunkle
   Grundfarbe. Der Text beginnt erst bei 56 % der Bildhoehe, wo es dunkel
   ist. Bildhoehe = 100vw * 1.7768 (Seitenverhaeltnis 941 x 1672).
   ========================================================================== */
@media (max-width:680px){
  #works-ai{--dunkel-lauf:105vw}
  #works-ai .section-y{padding-block:100vw}
  #works-ai .dunkel{
    top:0;bottom:0;overflow:hidden;
    background:
      url("assets/works-ai-handy-v1.webp") center top/100% auto no-repeat,
      url("assets/works-ai-handy-unten-v1.webp") center bottom/100% auto no-repeat,
      #00191c;
    /* nur ganz am Rand weich in den Seitenhintergrund auslaufen */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7vh,#000 calc(100% - 7vh),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 7vh,#000 calc(100% - 7vh),transparent 100%);
  }
  #works-ai .dunkel__bild{display:none}
}

/* Works-AI am Handy: Bild unscharf (in die Datei eingerechnet, -v2) und
   ueber eine lange Maske nahtlos in den Seitenhintergrund. Der helle obere
   Teil des Bildes (bis ca. 45vw) blendet von durchsichtig ein, so geht die
   unscharfe Platine der Seite ohne Kante ins Tuerkis ueber. Unten genauso. */
@media (max-width:680px){
  #works-ai .dunkel{
    background:
      url("assets/works-ai-handy-v2.webp") center top/100% auto no-repeat,
      url("assets/works-ai-handy-unten-v2.webp") center bottom/100% auto no-repeat,
      #00191c;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22vw,#000 55vw,#000 calc(100% - 55vw),rgba(0,0,0,.35) calc(100% - 22vw),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 22vw,#000 55vw,#000 calc(100% - 55vw),rgba(0,0,0,.35) calc(100% - 22vw),transparent 100%);
  }
}

/* ==========================================================================
   STAND OKTOBER 2026: PAPIER-DESIGN MIT DEN AKTUELLEN TEXTEN
   Das Design ist der Papier-Stand vom 20.10. Neu dazu, im selben Stil:
   - 3-Stufen-Plan (#plan) direkt nach der Startseite: drei Karten mit
     Level und Euro-Zeichen, darunter der Abschluss.
   - Ueber mich: Mission in der geschwungenen Schrift (Instrument Serif).
   - Hervorgehobene Woerter (.akzent) auch ausserhalb der H1.
   ========================================================================== */
#plan .akzent,.stufenplan__ziel .akzent{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
  color:var(--accent);letter-spacing:0;font-size:1.08em;
}
.stufenplan{margin-top:clamp(2rem,4vw,3rem);gap:clamp(1rem,2vw,1.5rem)}
.stufenplan__karte{display:flex;flex-direction:column;gap:.55rem}
.stufenplan__karte h3,.stufenplan__karte p{margin:0}
.stufenplan__level{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
}
.stufenplan__euro{font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:.04em;color:var(--accent)}
.stufenplan__schluss{max-width:44rem;margin:clamp(2.5rem,5vw,3.5rem) auto 0;text-align:center}
.stufenplan__schluss .lead{margin:0}
.stufenplan__ziel{
  margin:1rem 0 0;font-family:var(--font-head);font-weight:200;
  font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);line-height:1.25;color:var(--ink,#171F1E);
}
@media (max-width:991px) and (min-width:681px){.stufenplan.grid--3{grid-template-columns:repeat(3,1fr)}}

/* Ueber mich: Mission */
.profil__mission{margin:1.5rem 0 0;padding:.3rem 0 .3rem 1.2rem;border-left:2px solid var(--accent)}
.profil__mission-label{margin:0 0 .3rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.profil__mission-text{
  margin:0;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem);line-height:1.25;color:#0f8576;
}
/* "3-Stufen-Plan" nie am Bindestrich trennen */
#plan .h2 .akzent{white-space:nowrap}