/* web/website.css — Stylesheet von emmawoelk.com, Stand 14.09.2026.
   ci.css und elemente.css der Website hintereinander, unveraendert bis auf
   den Pfad der Caveat-Datei. Quelle bleibt die Website: Aenderungen dort,
   dann hier neu uebernehmen, nicht hier pflegen. */

/* Emma Woelk — Marketing & Sales
   Das gesamte Stylesheet der Website. Wird von bau.js minifiziert und in jede
   Seite als einziger <style>-Block gesetzt — eine externe CSS-Datei wäre ein
   zweiter Rundlauf, bevor irgendetwas gezeichnet wird.

   Jeder Farbwert, jede Größe und jede Sperrung steht so im CI-Guide,
   ci.emmawoelk.com, Abschnitte 03, 04 und 10. Wo hier etwas steht, das dort
   nicht steht, ist es als solches gekennzeichnet.
   Die @font-face-Regeln fügt bau.js aus fonts/fonts.css ein. */

/* ══ Tokens ══ Guide Abschnitt 10, unverändert ══════════════════════════ */

:root{
  /* Marke — damit wird geführt */
  --gelb:#FFF700;        /* Signalgelb. Schrift auf Schwarz, Fläche auf Weiß. */
  --schwarz:#000000;     /* Grund für Web, Social, Video */
  --weiss:#FFFFFF;       /* Fließtext auf Schwarz */
  --tinte:#000000;       /* Text auf Papier */
  --flaeche:#191919;     /* Karten und Panels auf Schwarz */

  /* Sekundär — Fläche, Schatten, Verlauf. Nie ein zweiter Akzent. */
  --magenta:#DF579D; --violett:#8075D9;
  --verlauf:linear-gradient(180deg,#8075D9,#DF579D);

  /* Abgeleitet und Status */
  --ocker:#5C5100;
  --erfolg:#35C88A; --fehler:#FF5A5F;

  /* Schrift — zwei Familien, drei Rollen */
  --ruf:"Barlow Condensed",Impact,sans-serif;
  --stark:"Barlow",Helvetica,sans-serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Sperrung wächst nach unten, nicht nach oben */
  --sp-h1:.005em; --sp-h2:.01em; --sp-h3:.02em;
  --sp-text:0; --sp-eyebrow:.2em; --sp-button:.025em;

  /* Button */
  --btn-radius:50px; --btn-padding:20px 40px; --btn-border:2px;

  /* Nicht im Guide: Maße, die die Seite braucht.
     --mass setzt Abschnitt 04 durch — Fließtext 60 bis 70 Zeichen. */
  --luft:46px; --luft-klein:34px; --breite:1200px; --mass:68ch;
  --mass-artikel:860px;
  /* Die tatsaechliche Hoehe der Leiste, nachgemessen: Logo 68 px plus 14/12
     Innenpolsterung plus 1 px Kante. Der Wert muss stimmen — er zieht das
     erste Band hinter die Leiste und bemisst die Hoehe des mobilen Menues. */
  --kopfhoehe:96px;

  /* Symbole fuer Aufzaehlungen. Lucide 1.41.0, als Maske gesetzt: die
     Farbe steht im CSS, die Datei ist eingebettet, es faellt kein
     zweiter Netzzugriff an. */
  --sym-haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --sym-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m12 16 4-4-4-4'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  --sym-birne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

@media (max-width:760px){
  :root{ --luft:30px; --luft-klein:24px; --kopfhoehe:73px; }
}

/* ══ Grundlage ═════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  scrollbar-color:var(--gelb) var(--flaeche);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* clip statt hidden, und auf html statt auf body: overflow-x:hidden am
     body macht den Body zum Scrollbereich, und dann klebt der Kopf nicht
     mehr oben, sondern wandert beim Scrollen mit nach unten. */
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--schwarz);
  color:var(--weiss);
  font-family:var(--text);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:var(--sp-text);
  -webkit-font-smoothing:antialiased;
}
@media (max-width:760px){ body{ line-height:1.5; } }

img,svg,video{ display:block; max-width:100%; height:auto; }
ul,ol{ padding-left:1.2em; }
li{ margin-block:.4em; }

/* Zahlen bekommen immer gleich breite Ziffern — Guide Abschnitt 04. */
table,.zahl,time,.meta{ font-variant-numeric:tabular-nums; }

/* Der Fokusring ist überall derselbe und immer sichtbar. */
:focus-visible{ outline:2px solid var(--weiss); outline-offset:3px; }

::selection{ background:var(--gelb); color:var(--schwarz); }

/* Zwei Syntaxen, weil beide gebraucht werden. Kein Hover-Zustand — Gelb hat
   keine hellere Stufe, und was heller wäre, wäre ein zweites Gelb. */
::-webkit-scrollbar       { width:13px; height:13px; }
::-webkit-scrollbar-track { background:var(--flaeche); }
::-webkit-scrollbar-thumb { background:var(--gelb); border-radius:99px;
                            border:3px solid var(--flaeche); }
::-webkit-scrollbar-corner{ background:var(--flaeche); }

/* ══ Sternenfeld ══ Guide Abschnitt 07 ═════════════════════════════════ */

sternen-feld{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* Ohne JavaScript bleibt der Grund schwarz. Das ist kein Fehlerfall, sondern
   die untere Schicht des Stapels aus Abschnitt 07. */

/* ══ DIE STAPELFOLGE ══════════════════════════════════════════════════

   Seit dem 12.09.2026 liegen die Hintergrundbilder UNTER dem Sternenfeld.
   Vorher lagen sie darüber und deckten es auf jeder Seite mit Band oder
   Hero zu — sichtbar war es nur in den schwarzen Lücken dazwischen.

   Von unten nach oben:

     Grund      body-Hintergrund, schwarz               (Leinwand)
     −2         Hintergrundbilder: .band::after,
                .hero__bild                             hinter den Sternen
     −1         das Ausblenden nach Schwarz:
                .band::before, .hero::after             hinter den Sternen
      0         sternen-feld, position:fixed
      1         alles Lesbare: .band > *, .hero__innen,
                .fuss
     49/50      mobiles Menü und Kopfleiste

   AUSNAHME seit 13.09.2026 (Emma): das Hero-Bild liegt UEBER dem
   Sternenfeld — auf Emmas Gesicht gehoeren keine Sterne. `.hero__bild` und
   `.hero::after` stehen auf 1, der Inhalt des Hero auf 2. Alle anderen
   Hintergruende bleiben unter den Sternen.

   Damit das trägt, darf zwischen `body` und den Bildern KEIN Element einen
   eigenen Stapelkontext aufmachen — sonst sind die −2 darin gefangen und
   kommen nie unter das fixierte Sternenfeld. Genau deshalb steht an
   `.inhalt` unten kein `z-index` mehr. Wer dort eines setzt, oder irgendwo
   darüber `transform`, `filter`, `opacity:<1`, `isolation` oder
   `will-change`, macht diese Ordnung still wieder zunichte: die Seite sieht
   dann wieder aus wie vorher, ohne dass etwas kaputtgeht. */

/* ══ Rasterhilfen ══════════════════════════════════════════════════════ */

.huelle{ width:100%; max-width:var(--breite); margin-inline:auto;
         padding-inline:24px; }
@media (max-width:760px){ .huelle{ padding-inline:18px; } }

/* Kein z-index. Siehe „DIE STAPELFOLGE" oben: mit einem hier wäre `.inhalt`
   ein eigener Stapelkontext, und die Hintergrundbilder darin kämen nie unter
   das fixierte Sternenfeld. `position:relative` bleibt — es ist der
   Bezugsrahmen, den die Bänder brauchen. */
.inhalt{ position:relative; }

.mass{ max-width:var(--mass); }

/* ══ Sprungmarke ═══════════════════════════════════════════════════════ */

.sprung{
  position:absolute; left:12px; top:-100px; z-index:100;
  background:var(--gelb); color:var(--schwarz);
  font-family:var(--text); font-weight:700; font-size:16px;
  letter-spacing:var(--sp-button); text-transform:uppercase;
  text-decoration:none; padding:12px 20px; border-radius:var(--btn-radius);
  transition:top .12s;
}
.sprung:focus{ top:12px; }

/* ══ Typografie ══ Guide Abschnitt 04, die Skala ═══════════════════════ */

/* Versalien sind eine Anweisung an die Darstellung, nie an den Text: im HTML
   steht der Satz normal geschrieben, sonst liest ein Screenreader ihn
   buchstabenweise vor. */

/* Die Skala nennt 70 px für den Hero und 24 px mobil. Zwischen beiden
   Werten wird hier stufenlos gerechnet, statt bei 761 px zu springen. Der
   Guide begrenzt die Headline auf drei Zeilen — bei den langen Fragesätzen
   dieser Seite gelingt das nur so. */
h1,.h1{
  font-family:var(--ruf); font-weight:700;
  font-size:clamp(30px,4.4vw,54px); line-height:1.04;
  letter-spacing:var(--sp-h1); text-transform:uppercase; text-wrap:balance;
}
h2,.h2{
  font-family:var(--ruf); font-weight:700;
  font-size:clamp(24px,3vw,38px); line-height:1.05;
  letter-spacing:var(--sp-h2); text-transform:uppercase; text-wrap:balance;
}
.cta-kopf{
  font-family:var(--ruf); font-weight:900; font-size:42px; line-height:1.19;
  letter-spacing:var(--sp-h1); text-transform:uppercase; text-wrap:balance;
}
h3,.h3{
  font-family:var(--stark); font-weight:900; font-size:32px; line-height:1.125;
  letter-spacing:var(--sp-h3); text-transform:uppercase;
}
h4,.h4{
  font-family:var(--text); font-weight:700; font-size:24px; line-height:1.125;
  letter-spacing:.01em;
}
h5,.h5{ font-family:var(--text); font-weight:700; font-size:21px;
        line-height:1.125; letter-spacing:.015em; }
h6,.h6{ font-family:var(--text); font-weight:700; font-size:18px;
        line-height:1.125; letter-spacing:.015em; }

@media (max-width:760px){
  h1,.h1{ line-height:1.18; }
  h2,.h2{ line-height:1.2; }
  .cta-kopf{ font-size:26px; line-height:1.2; }
  h3,.h3{ font-size:20px; line-height:1.35; }
  h4,.h4{ font-size:18px; }
}

/* Einer pro Abschnitt, direkt unter der Headline. */
.vorspann{
  font-family:var(--text); font-weight:300; font-size:21px; line-height:1.62;
  max-width:55ch;
}
@media (max-width:760px){ .vorspann{ font-size:18px; line-height:1.5; } }

/* Die einzige gesperrte Fläche im System. */
.eyebrow{
  display:block;
  font-family:var(--text); font-weight:400; font-size:15px; line-height:1.6;
  letter-spacing:var(--sp-eyebrow); text-transform:uppercase;
  color:var(--gelb); margin-bottom:14px;
}
@media (max-width:760px){ .eyebrow{ font-size:14px; } }

/* Der leichteste Schnitt im System. */
blockquote,.zitat{
  font-family:var(--stark); font-weight:300; font-size:36px; line-height:1.39;
  text-wrap:balance;
}
@media (max-width:760px){ blockquote,.zitat{ font-size:16px; line-height:1.5; } }

p{ max-width:var(--mass); }
p+p,p+ul,p+ol,ul+p,ol+p{ margin-top:1em; }
h2+p,h3+p,h4+p{ margin-top:.75em; }

/* Eine Ueberschrift, die auf Text folgt, braucht Luft davor. Ohne diese
   Regel kleben die nummerierten Abschnitte der Rechtsseiten aneinander.
   Die erste Ueberschrift eines Abschnitts bekommt sie nicht. */
p+h2,ul+h2,ol+h2,table+h2,div+h2,
p+h3,ul+h3,ol+h3,table+h3,div+h3,
p+h4,ul+h4,ol+h4,table+h4,div+h4{ margin-top:1.8em; }
h2+h3,h3+h4{ margin-top:.9em; }

/* Zwei Ueberschriften direkt hintereinander, und eine Ueberschrift gefolgt
   von einem Absatz, standen bisher auf Null.

   Gefunden auf /beratung: dort folgt auf die H2 „Exklusive Beratung
   (1,5 Stunden)" unmittelbar die H1 und darauf der Vorspann — gemessen 0 px
   zwischen allen dreien. Die alte Seite setzt die Stufen in dieser
   Reihenfolge, also bleiben sie; nur kleben duerfen sie nicht.

   Die vorhandene Regel deckte nur `h2+p`, `h3+p` und `h4+p` ab — die H1
   fehlte, und Ueberschrift auf Ueberschrift nur in absteigender Folge. */
h1+h2,h1+h3,h1+h4,h2+h1,h2+h4,h3+h1,h3+h2,h4+h1,h4+h2,h4+h3,
h1+h1,h2+h2,h3+h3,h4+h4{ margin-top:.6em; }
h1+p{ margin-top:.75em; }
h1+.vorspann,h2+.vorspann,h3+.vorspann{ margin-top:.7em; }

/* Eine Rechtsseite ist Nachschlagetext, kein Lesetext: der Fliesstext nimmt
   die volle Spaltenbreite statt des Zeilenmasses von 68 Zeichen. Die Huelle
   bleibt dabei ausdruecklich unangetastet — sie haelt dieselben 1200 px und
   dieselbe linke Kante wie jede andere Seite. */
.textseite p,.textseite li,.textseite h2,.textseite h3,.textseite h4{ max-width:none; }
.textseite h2{ margin-top:2em; }
.textseite h2:first-of-type{ margin-top:1.2em; }
.textseite h3{ margin-top:1.6em; }
.textseite>p:first-of-type{ margin-top:1em; }

strong,b{ font-weight:700; }
/* Betonung ist Schnitt, nicht Kursiv — Guide Abschnitt 04. */
em,i{ font-style:normal; font-weight:700; }

a{ color:var(--gelb); text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }

/* ══ Der Marker ══ Guide Abschnitt 06 ══════════════════════════════════ */

/* Rechteckig, deckend, einfarbig. Kein Radius, kein Verlauf, kein Schatten,
   keine Neigung. Einer pro Ansicht, hinter zwei bis vier Wörtern. */
.marker{
  background:var(--gelb); color:var(--schwarz);
  padding:.02em .18em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ══ Knöpfe ══ Guide Abschnitt 10 ══════════════════════════════════════ */

.knopf{
  display:inline-block;
  font-family:var(--text); font-weight:700; font-size:16px; line-height:1.25;
  letter-spacing:var(--sp-button); text-transform:uppercase; text-decoration:none;
  background:var(--gelb); color:var(--schwarz);
  padding:var(--btn-padding);
  border:var(--btn-border) solid transparent; border-radius:var(--btn-radius);
  cursor:pointer;
}
/* Hover ändert die Farbe nicht — Gelb hat keine hellere Stufe.
   Was sich ändert, ist der Schein, und der bleibt weiß und schwach. */
.knopf:hover{ box-shadow:0 0 20px rgba(255,255,255,.28); }
.knopf:focus-visible{ outline:2px solid var(--weiss); outline-offset:3px; }

/* Zweitrangig: Textlink, kein zweiter Knopf. */
.knopf-sek{
  display:inline-block;
  color:var(--weiss); text-decoration:underline; text-underline-offset:4px;
  text-transform:uppercase; font-weight:700; font-size:16px;
  letter-spacing:var(--sp-button);
}

.knopfreihe{ display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center;
             margin-top:36px; }

@media (max-width:520px){
  .knopf{ padding:16px 28px; width:100%; text-align:center; }
  .knopfreihe{ gap:16px; }
}

/* ══ Kopf ══════════════════════════════════════════════════════════════ */

/* Der Kopf steht IM Bild, nicht davor. Das erste Band einer Seite laeuft
   unter ihm hindurch und blendet nach unten nach Schwarz aus — deshalb ist
   der Kopf ganz oben durchsichtig und bekommt seinen Grund erst, sobald
   gescrollt wird.

   Das macht eine scrollgesteuerte Animation ohne eine Zeile JavaScript.
   Browser, die sie nicht koennen, bekommen den deckenden Grund von Anfang an
   — lesbar ist beides, nur das Bild hinter dem Menue sehen sie nicht.

   KEIN backdrop-filter mehr: ein Element mit Filter wird zum Bezugsrahmen
   fuer jedes position:fixed darin (das mobile Menue), und ueber dem Bild
   wuerde er es weichzeichnen. */
.kopf{
  position:sticky; top:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
}
@supports (animation-timeline:scroll()){
  .kopf{
    animation:kopfgrund linear both;
    animation-timeline:scroll();
    animation-range:0 90px;
  }
  @keyframes kopfgrund{
    from{ background-color:transparent; border-bottom-color:transparent; }
    to{ background-color:rgba(0,0,0,.92);
        border-bottom-color:rgba(255,255,255,.1); }
  }
}
@supports not (animation-timeline:scroll()){
  .kopf{ background:rgba(0,0,0,.92);
         border-bottom-color:rgba(255,255,255,.1); }
}
/* Ist das mobile Menue offen, braucht der Kopf immer einen Grund — sonst
   staende die Schliessen-Schaltflaeche ueber dem Bild. */
.kopf__schalter-feld:checked ~ .kopf__nav{ background:var(--schwarz); }

.kopf__innen{
  display:flex; align-items:center; gap:32px;
  min-height:var(--kopfhoehe);
  max-width:var(--breite); margin-inline:auto;
  padding:14px 24px 12px;
}
@media (max-width:760px){ .kopf__innen{ padding:10px 18px 8px; gap:16px; } }

/* Das Lockup mit der Firmierung, logo-claim-dark.svg, 1,74 : 1.
   Kleiner als zuvor und mit Luft nach oben, damit es nicht an der
   Fensterkante klebt. */
.kopf__logo{ flex:none; display:block; }
.kopf__logo img{ width:118px; height:68px; }
@media (max-width:760px){ .kopf__logo img{ width:92px; height:53px; } }

.kopf__nav{ margin-left:auto; }
.kopf__liste{ display:flex; align-items:center; gap:28px;
              list-style:none; margin:0; padding:0; }

/* Menü: Barlow Condensed 400, 22/1,0, 0,02em, Versalien — Guide Abschnitt 04. */
.kopf__link{
  font-family:var(--ruf); font-weight:400; font-size:22px; line-height:1.0;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--weiss); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.kopf__link:hover,.kopf__link[aria-current="page"]{ color:var(--gelb); }

/* Aufklapper in reinem CSS. Kein JavaScript, weil ein Menü ohne auskommt. */
.klapp{ position:relative; }
.klapp__pfeil{ width:14px; height:14px; stroke-width:2; }
.klapp__box{
  position:absolute; top:100%; left:-20px; min-width:280px;
  /* Schwarz, nicht die Kartenflaeche — der Aufklapper liegt ueber dem
     Sternenfeld und soll sich davon absetzen, nicht damit verschwimmen. */
  background:var(--schwarz); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:10px; margin-top:14px;
  list-style:none; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .14s,transform .14s,visibility .14s;
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.klapp:hover .klapp__box,
.klapp:focus-within .klapp__box{ opacity:1; visibility:visible; transform:none; }
.klapp__box a{
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 14px; border-radius:9px;
  font-family:var(--text); font-weight:400; font-size:16px;
  letter-spacing:0; text-transform:none;
  color:var(--weiss); text-decoration:none;
}
/* Das Icon sitzt links vom Text und fluchtet mit der ersten Zeile. */
.klapp__icon{ width:20px; height:20px; stroke-width:2; flex:none;
              color:var(--gelb); margin-top:2px; }
.klapp__text{ display:block; }
.klapp__box a:hover{ background:rgba(255,255,255,.07); color:var(--gelb); }
.klapp__box small{ display:block; color:rgba(255,255,255,.55); font-size:14px;
                   line-height:1.4; margin-top:2px; }

.kopf__cta{ padding:13px 26px; font-size:14px; flex:none; }
/* Der Knopf steht auf dem Schreibtisch rechts im Kopf und auf dem Telefon
   unten im aufgeklappten Menue — nie an beiden Stellen gleichzeitig. */
.kopf__nur-mobil{ display:none; }

/* Der Schalter für Mobil: eine versteckte Checkbox, kein Skript. */
.kopf__schalter,.kopf__schalter-feld{ display:none; }

@media (max-width:1000px){
  .kopf__nav{ display:none; }
  .kopf__cta{ display:none; }
  .kopf__schalter{
    display:flex; margin-left:auto; align-items:center; justify-content:center;
    width:44px; height:44px; cursor:pointer; color:var(--gelb);
  }
  .kopf__schalter svg{ width:26px; height:26px; stroke-width:2; }
  /* Die Höhe steht hier ausdrücklich und kommt nicht aus inset:…0 0.
     Grund: der Kopf trägt ein backdrop-filter, und ein Element mit Filter
     wird zum Bezugsrahmen für position:fixed in seinem Inneren. Ein
     bottom:0 bezöge sich dann auf die 79 px hohe Kopfleiste statt auf das
     Fenster — das Menü wäre 88 px hoch und der Rest abgeschnitten. */
  .kopf__schalter-feld:checked ~ .kopf__nav{
    display:block; position:fixed; top:var(--kopfhoehe); left:0; right:0;
    height:calc(100vh - var(--kopfhoehe));
    height:calc(100dvh - var(--kopfhoehe));
    background:var(--schwarz); overflow-y:auto; padding:28px 18px 60px;
    z-index:49;
  }
  .kopf__schalter-feld:checked ~ .kopf__nav .kopf__liste{
    flex-direction:column; align-items:stretch; gap:0;
  }
  .kopf__schalter-feld:checked ~ .kopf__nav .kopf__link{
    display:flex; padding:16px 4px; font-size:26px;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .kopf__schalter-feld:checked ~ .kopf__nav .klapp__box{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; margin:0; padding:6px 0 14px;
  }
  /* Das Icon fluchtet mit der linken Kante der Hauptnavigation — sonst
     stünde der Aufklapper um die Innenpolsterung eingerückt daneben. */
  .kopf__schalter-feld:checked ~ .kopf__nav .klapp__box a{
    padding-inline:0; gap:14px;
  }
  .kopf__schalter-feld:checked ~ .kopf__nav .klapp__pfeil{ display:none; }
  .kopf__nur-mobil{ display:block; }
  .kopf__schalter-feld:checked ~ .kopf__nav .kopf__nur-mobil .kopf__link{ border:0; }
  .kopf__schalter-feld:checked ~ .kopf__nav .knopf{ margin-top:26px; }
}

/* ══ Abschnitte und Hintergründe ══ Guide Abschnitt 07 ═════════════════ */

.abschnitt{ position:relative; padding-block:var(--luft); }
/* Ein Band braucht mehr Hoehe als eine schwarze Flaeche, sonst steht das
   Bild als Streifen da. Mehr als das Anderthalbfache wird daraus aber eine
   Luecke statt eines Abstands. */
.abschnitt--weit{ padding-block:calc(var(--luft) * 1.5); }

/* Ein Abschnitt, der nur eine Ueberschrift traegt und zum naechsten gehoert:
   „Du erhaeltst die zwei wichtigsten Elemente", „Ein Ueberblick ueber unsere
   1:1 Coachings". Ohne diese Regel stuende die Ueberschrift so weit von dem
   entfernt, was sie ankuendigt, wie von dem, was davor steht. */
.abschnitt--anschluss{ padding-bottom:0; }

/* Der gelbe Abschluss. Guide Abschnitt 03: Schwarz auf #FFF700 erreicht
   18,5 : 1 und ist bei jeder Schriftgroesse sicher. Der Knopf wird darin
   schwarz — ein gelber Knopf auf gelbem Grund waere unsichtbar. */
.abschnitt--gelb{ background:var(--gelb); color:var(--schwarz); }
.abschnitt--gelb h1,.abschnitt--gelb h2,.abschnitt--gelb h3,
.abschnitt--gelb .cta-kopf,.abschnitt--gelb p{ color:var(--schwarz); }
.abschnitt--gelb .eyebrow{ color:var(--schwarz); }
.abschnitt--gelb .knopf{ background:var(--schwarz); color:var(--weiss); }
.abschnitt--gelb .knopf:hover{ box-shadow:0 0 20px rgba(0,0,0,.35); }
.abschnitt--gelb .knopf:focus-visible{ outline-color:var(--schwarz); }
.abschnitt--gelb .knopf-sek{ color:var(--schwarz); }
.abschnitt--gelb a{ color:var(--schwarz); }
/* Der Marker hat auf Gelb nichts zu suchen: gelb auf gelb ist keine Flaeche. */
.abschnitt--gelb .marker{ background:var(--schwarz); color:var(--gelb); }
/* Der Abschlussknopf-Kasten. Auf der alten Seite: gelbe Flaeche, 10 px Ecke,
   60 px oben und unten, 90 px an den Seiten, die Headline links und der
   schwarze Knopf rechts daneben auf einer Zeile. Die Headline steht dort im
   schwersten Schnitt der Skala. */
.abschnitt--gelb{ border-radius:10px; max-width:calc(var(--breite) + 48px);
                  margin-inline:auto; padding-block:0; }
/* Seit 13.09.2026 ein Raster statt einer Flexreihe: Eyebrow und Headline
   links uebereinander, der Knopf rechts, vertikal mittig. Vorher standen
   Eyebrow, Headline und Knopf als drei Spalten nebeneinander (Emma: sieht
   „scheusslich“ aus); Vorlage ist der alte Kasten „Mach Schluss mit teuren
   Agenturen“. */
.abschnitt--gelb>.huelle{
  padding:60px 90px; max-width:none;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; column-gap:56px;
}
.abschnitt--gelb>.huelle>*{ grid-column:1; }
.abschnitt--gelb>.huelle>.knopfreihe{ grid-column:2; grid-row:1 / span 4; margin:0; }
.abschnitt--gelb>.huelle>.eyebrow{ margin-bottom:10px; }
.abschnitt--gelb h2,.abschnitt--gelb h3{
  font-weight:900; font-size:clamp(26px,3.2vw,42px); margin:0;
  text-wrap:balance;
}
.abschnitt--gelb p{ margin:0; }
/* Der Knopf steht in einer Knopfreihe — die ist der Flexkasten, nicht der
   Knopf selbst. Ohne `flex:none` an der Reihe quetscht `space-between` sie
   auf die Breite, die die Headline uebrig laesst, und der Knopf laeuft rechts
   aus der gelben Flaeche heraus. */
.abschnitt--gelb .knopfreihe{ flex:none; }
.abschnitt--gelb .knopf{ flex:none; }
.abschnitt--gelb>.huelle>*{ min-width:0; }
@media (max-width:860px){
  .abschnitt--gelb>.huelle{ padding:40px 32px; grid-template-columns:1fr; }
  .abschnitt--gelb>.huelle>.knopfreihe{ grid-column:1; grid-row:auto; margin-top:26px; }
}
/* Telefon: ganz eckig, die Box laeuft bis an den Rand (Emma, 13.09.2026). */
@media (max-width:760px){ .abschnitt--gelb{ border-radius:0; } }

/* Aufzaehlungspunkte in Gelb — Guide Abschnitt 03 nennt sie ausdruecklich. */
.inhalt li::marker{ color:var(--gelb); }
.abschnitt--gelb li::marker{ color:var(--schwarz); }

/* Jedes Band läuft in Schwarz aus: seitlich ab etwa 18 %, nach unten ab
   etwa 55 % — Guide Abschnitt 07. Das Bild liegt hinter dem Inhalt, der
   Verlauf darüber, beides in einer Schicht ohne zusätzliches Element. */
/* Das Bild sitzt auf `.band::after`, nicht auf `.band` selbst. Der Grund ist
   die Stapelfolge ganz oben: der eigene Hintergrund eines Elements lässt sich
   nicht unter ein fixiertes Geschwisterelement legen, ein Pseudoelement mit
   negativem z-index schon. Die Adresse kommt als `--band` aus bloecke.js. */
.band{ position:relative; }
.band::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:var(--band);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
/* ══ REGEL: ein Bild endet nie mit einer Kante ═════════════════════════

   Jedes Hintergrundbild blendet OBEN UND UNTEN nach Schwarz aus. Der Grund
   ist einfach: der Abschnitt darueber und der darunter sind schwarz. Wo das
   Bild ohne Verlauf anfaengt, steht eine waagerechte Bruchkante quer ueber
   den Schirm — man sieht nicht ein Bild, sondern einen aufgeklebten Streifen.

   Die Strecke steht in Pixeln, nicht in Prozent. Ein Prozentwert frisst bei
   einem hohen Abschnitt das halbe Bild und bei einem niedrigen gar nichts;
   90 px oben und 140 px unten sehen ueberall gleich aus. Unten mehr als
   oben, weil der Blick nach unten laeuft und der Uebergang dort laenger
   gebraucht wird.

   Mehr liegt nicht darueber. Die Hintergruende sind von Haus aus fast
   schwarz — nachgemessen zwischen 0,4 und 11 von 255 —, ein zusaetzlicher
   Schleier daraus macht eine schwarze Flaeche. Auf emmawoelk.com liegt ueber
   denselben Dateien gar nichts.

   Ausnahme: das erste Band einer Seite. Es faengt ganz oben an und laeuft
   hinter der Menueleiste durch; ueber ihm ist keine Flaeche, gegen die es
   brechen koennte. Dort bleibt oben nur der leichte Schleier, den die Leiste
   zum Lesen braucht. Siehe unten. */
.band::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg,#000 0,transparent 90px),
    linear-gradient(0deg,#000 0,transparent 140px);
}
.band>*{ position:relative; z-index:1; }

/* Der Kopfbereich jeder Seite: das Bild beginnt ganz oben, laeuft hinter der
   Menueleiste durch und blendet nach unten nach Schwarz aus. Umgesetzt ueber
   eine negative Marge in Kopfhoehe plus dieselbe Hoehe wieder als
   Innenpolsterung — so verschiebt sich der Inhalt nicht, nur das Bild waechst
   nach oben. Gilt fuer den Hero und fuer jedes erste Band einer Seite. */
.inhalt>.hero:first-child,
.inhalt>.band:first-child{
  margin-top:calc(var(--kopfhoehe) * -1);
  padding-top:calc(var(--kopfhoehe) + var(--luft));
}
.inhalt>.band.abschnitt--weit:first-child{
  padding-top:calc(var(--kopfhoehe) + var(--luft) * 1.6);
}
.inhalt>.hero:first-child{ padding-top:var(--kopfhoehe); }
/* Das erste Band einer Seite blendet oben ueber eine laengere Strecke aus
   als ein Band in der Mitte: 100 statt 90 px. Der Grund ist die Menueleiste,
   die dort liegt — auf einem Grund, der ueber 100 px aus Schwarz kommt,
   bleibt sie lesbar, und ab etwa 60 px steht das Bild wieder frei.

   Frueher stand hier ein gleichbleibender Schleier ueber 130 px statt eines
   Verlaufs nach Schwarz. Das war falsch: das Bild ist beschnitten, und die
   Schnittkante liegt waagerecht ganz oben im Bild. Ein Schleier deckt sie
   nicht zu, er verdunkelt sie nur. */
.inhalt>.band:first-child::before{
  background:
    linear-gradient(180deg,#000 0,transparent 100px),
    linear-gradient(0deg,#000 0,transparent 140px);
}
/* Die Sprungmarke zum Inhalt darf nicht unter der Leiste landen. */
.inhalt{ scroll-margin-top:var(--kopfhoehe); }

/* ══ Hero ══ Guide Abschnitt 09 ════════════════════════════════════════ */

/* Eyebrow in Gelb, Headline in Weiß, ein gelber Knopf. Drei Elemente, eine
   Signalfarbe. Kein Marker im Hero, wenn der Knopf gelb ist. */
.hero{ position:relative; overflow:hidden; }
.hero__bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center bottom; z-index:-2;
}
/* Im Hero dasselbe: nach unten auslaufen, oben eine Spur abdunkeln, damit
   die Menueleiste darauf lesbar bleibt. Kein Verlauf mehr von links — er hat
   das Bild auf der Textseite zugedeckt. */
/* Der Hero folgt derselben Regel wie jedes Band: oben und unten nach
   Schwarz ausblenden, in Pixeln. Oben 100 px, damit die Menueleiste darauf
   lesbar bleibt und das Bild darunter trotzdem frei steht; unten 160 px,
   weil der Hero hoeher ist als ein Band und der Uebergang dort mehr Weg
   braucht. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg,#000 0,transparent 100px),
    linear-gradient(0deg,#000 0,transparent 160px);
}
.hero__innen{
  position:relative; z-index:1;
  padding-block:calc(var(--luft) * 2.6) calc(var(--luft) * 2.4);
  max-width:760px;
}
.hero--start .hero__innen{ padding-block:calc(var(--luft) * 2.6) calc(var(--luft) * 1.5); }
/* Auf dem Telefon ist derselbe Vorlauf zu viel. 2,6 x --luft sind dort
   78 px, die zwischen der Menueleiste und der ersten Zeile leer stehen —
   bei 812 px Bildschirmhoehe faengt die Headline erst bei 211 px an, ein
   Viertel der Seite. Auf dem Schreibtisch traegt der Vorlauf das Bild,
   auf dem Telefon ist das Bild ohnehin beschnitten und der Platz knapp.
   30 px reichen, um die Leiste abzusetzen.

   Stand 07.09.2026 galt das nur fuer .hero--start, weil nur die Startseite
   gefragt war. Seit dem 12.09.2026 gilt es fuer jeden Hero: einen haben
   ueberhaupt vier Seiten — /, /me, /karriere und /mission/agenturfrei —,
   und die Begruendung traf auf alle vier zu. Ein Vorlauf, der auf einer
   Seite ein Viertel des Telefonbildschirms kostet, kostet ihn auf den
   anderen dreien genauso. */
@media (max-width:760px){
  .hero__innen{ padding-top:var(--luft); }
}
.hero h1{ margin-bottom:22px; }
/* Hero-Bild ueber dem Sternenfeld (z 0), siehe DIE STAPELFOLGE. */
.hero .hero__bild{ z-index:1; }
.hero::after{ z-index:1; }
.hero>.huelle{ position:relative; z-index:2; }

/* Hero mit zweiter Spalte: Text links, Bild rechts. Die Huelle wird zum
   Raster, der Text darf schmal bleiben. */
.hero--medium>.huelle{ position:relative; z-index:1; display:grid;
                       grid-template-columns:minmax(0,1fr) minmax(0,500px);
                       gap:48px; align-items:center; }
.hero--medium .hero__innen{ max-width:none; }
.hero__medium img{ width:100%; height:auto; border-radius:18px; }
@media (max-width:900px){
  /* 32 px statt 6: mit Hero-Bildern auf jeder Angebotsseite (Relaunch,
     13.09.2026) klebte das Bild auf dem Telefon direkt am Knopf. */
  .hero--medium>.huelle{ grid-template-columns:1fr; gap:32px; }
  .hero--medium .hero__innen{ padding-bottom:0; }
  .hero__medium{ padding-bottom:calc(var(--luft) * 2); max-width:440px; }
}

/* ══ Karten ══ Guide Abschnitt 03: die einzige Abstufung ═══════════════ */

/* Unsichtbar, aber vorlesbar. Für Überschriften, die die Gliederung
   braucht und die Ansicht nicht — siehe :::karten titel= verborgen. Nicht
   display:none: das nähme sie auch dem Screenreader. */
.nur-vorlesen{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}

.raster{ display:grid; gap:22px; margin-top:44px; }

/* Eine Reihe aus offenen Karten braucht viel mehr Luft nach unten als eine
   aus Kaesten. Der Kasten setzt selbst eine Kante zwischen zwei Reihen; ohne
   ihn laufen sie ineinander — das Ende eines Textes und der Anfang des
   naechsten Videos standen 22 px auseinander. Auf emmawoelk.com sind es an
   derselben Stelle 120 px, weil dort jedes Paar ein eigener Abschnitt ist.

   Browser ohne :has() bekommen den engeren Abstand. Das ist eng, aber nicht
   kaputt — und :has() koennen seit 2023 alle drei Familien. */
.raster:has(> .karte--offen){ row-gap:calc(var(--luft) * 2.4); }
.raster--2{ grid-template-columns:repeat(2,1fr); }
.raster--3{ grid-template-columns:repeat(3,1fr); }
.raster--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .raster--3,.raster--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .raster--2,.raster--3,.raster--4{ grid-template-columns:1fr; } }

/* Ein Schlusssatz unter einer Kartenreihe, einem Zeitstrahl oder einer
   Tabelle klebte an deren Unterkante — der Absatz bringt keinen Abstand nach
   oben mit. Aufgefallen beim optischen Durchgang des Relaunchs, 13.09.2026. */
.raster+p,.raster+.knopfreihe,.zeitstrahl+p,.zeitstrahl+.knopfreihe,.tabelle+p{ margin-top:40px; }

.karte{
  background:var(--flaeche);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:28px;
}
.karte h3,.karte h4{ margin-bottom:12px; }

/* In der Karte ist H3 eine Beschriftung, keine Abschnittsüberschrift: „DAS
   PROBLEM", „DIE LÖSUNG", „DAS ERGEBNIS". Familie, Gewicht und Versalien
   bleiben wie in der Skala, nur die Größe ist auf die Fläche abgestimmt —
   Guide Abschnitt 04: zwei Schriftgrößen pro Fläche reichen. */
.karte h3{ font-size:18px; line-height:1.25; letter-spacing:var(--sp-h3);
           color:var(--gelb); margin-top:26px; margin-bottom:8px; }
.karte h3:first-child{ margin-top:0; }
.karte h4+h3{ margin-top:22px; }
@media (max-width:760px){ .karte h3{ font-size:16px; } }
.karte p{ color:rgba(255,255,255,.82); }

/* Die ganze Karte ist der Link — nicht ein „Mehr lesen" darunter. */
a.karte{ text-decoration:none; color:inherit; display:block; }
a.karte:hover{ border-color:var(--gelb); }
a.karte .h4{ color:var(--weiss); }

.karte__icon{ width:24px; height:24px; stroke-width:2; color:var(--gelb);
              margin-bottom:16px; }

/* Beitragskarte: Bild oben, randlos bis an die Kartenkante. Das Bild hat ein
   festes Seitenverhaeltnis, damit die Kacheln in einer Reihe gleich hoch
   anfangen, egal wie hoch das Original ist. */
.karte--beitrag{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.karte__bild{ width:100%; aspect-ratio:16/9; object-fit:cover;
              background:var(--schwarz); }
.karte__text{ display:block; padding:24px 24px 26px; }
.karte--beitrag .meta{ display:block; }
/* Der Kartentitel ist ein H3 — in der Kachel aber der Fließtextschnitt in
   gemischter Schreibung, nicht die Versalien der Skala. Ein Beitragstitel in
   Versalien liest sich in einer Kachel als Schreien. */
.karte--beitrag h3{ font-family:var(--text); font-weight:700; font-size:19px;
                    line-height:1.3; letter-spacing:.01em; text-transform:none;
                    color:var(--weiss); margin:0 0 10px; }
@media (max-width:760px){ .karte--beitrag h3{ font-size:17px; } }

/* Logoband: einzeilig und durchlaufend, einfarbig weiss auf Schwarz, auf
   einheitliche optische Groesse gebracht — nicht auf einheitliche Breite.
   Guide Abschnitt 06.

   Die Reihe steht zweimal im Markup. Die erste Haelfte laeuft nach links aus
   dem Bild, in dem Moment steht die zweite an derselben Stelle — dadurch
   wirkt der Lauf endlos, ohne dass etwas springt. Beide Haelften sind
   identisch, die zweite traegt aria-hidden, damit ein Screenreader die
   Logos nicht doppelt vorliest.

   An den Kanten blendet eine Maske nach Schwarz aus, damit die Logos nicht
   abgeschnitten wirken. */
/* Das Logoband unter einem Hero ist kein eigener Bereich, sondern dessen
   Fuß: erst die Behauptung, dann die Namen, die sie tragen. Zwischen beiden
   steht deshalb ein halber Abstand, kein ganzer.

   Nachgemessen auf emmawoelk.com: dort liegen 57 px zwischen der letzten
   Zeile des Heros und der Oberkante der Logos. Bei uns waren es 194 — die
   Innenpolsterung des Heros, die des Abschnitts und die Marge des Bandes
   hintereinander. Jetzt sind es 55.

   `:has()` greift nur, wenn das Band unmittelbar folgt; steht es weiter
   unten auf der Seite, behält der Hero seine volle Polsterung. */
.hero:has(+ .abschnitt--logos) .hero__innen{
  padding-bottom:calc(var(--luft) * 1.2);
}
.abschnitt--logos{ padding-top:0; }
.abschnitt--logos .logoband{ margin-top:0; }

.logoband{ margin-top:38px; overflow:hidden;
           -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
                   mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logoband__lauf{ display:flex; width:max-content;
                 animation:logoband 46s linear infinite; }
.logoband__satz{ display:flex; align-items:center; gap:76px; padding-right:76px;
                 flex:none; }
/* Jedes Logo steht in einem Kasten von 177 px Breite — dieselbe Groesse wie
   auf der alten Seite. Die Hoehe folgt dem Seitenverhaeltnis der Datei. */
.logoband img{ width:132px; max-width:132px; height:auto; object-fit:contain;
               opacity:.9; flex:none; }
.logoband:hover .logoband__lauf{ animation-play-state:paused; }
@keyframes logoband{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width:600px){
  .logoband__satz{ gap:52px; padding-right:52px; }
  .logoband img{ width:104px; max-width:104px; }
}
/* Guide Abschnitt 07: bei prefers-reduced-motion steht alles still. Dann
   wird aus dem Lauf ein Streifen, den man von Hand schieben kann. */
@media (prefers-reduced-motion:reduce){
  .logoband{ overflow-x:auto; }
  .logoband__lauf{ animation:none; }
  .logoband__satz:last-child{ display:none; }
}

/* Werkzeugkachel: Logo auf der Flaeche, Beschriftung darunter. */
/* Die 18 Werkzeuge. Auf der alten Seite stehen die Logos frei auf Schwarz,
   in etwa 170 x 95 px und ohne Kasten darum — ein Logo braucht keine Karte,
   es ist selbst schon eine Form. Guide Abschnitt 06. */
.werkzeuge{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
            gap:34px 20px; margin-top:38px; }
.werkzeug{ background:none; border:0; border-radius:0; padding:0;
           text-align:center; }
.werkzeug img{ width:100%; max-width:170px; height:72px; object-fit:contain;
               margin:0 auto 14px; }
/* Zweck als Beschriftung, darunter der Name — dieselbe Reihenfolge wie auf
   der alten Seite. */
.werkzeug__zweck{ display:block; font-size:13px; margin-bottom:4px;
                  color:rgba(255,255,255,.7); }
.werkzeug__name{ font-family:var(--stark); font-weight:700; font-size:19px;
                 line-height:1.2; color:var(--weiss); }
@media (max-width:600px){
  .werkzeuge{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:26px 16px; }
  .werkzeug img{ height:54px; }
}

/* Videorahmen. Haelt 16:9 fest, damit beim Laden des iframes nichts springt. */
.video{ position:relative; aspect-ratio:16/9; margin-top:26px;
        border-radius:14px; overflow:hidden; background:var(--flaeche); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.karte .video{ margin-top:0; margin-bottom:22px; border-radius:0;
               margin-inline:-28px; width:calc(100% + 56px); }
@media (max-width:700px){ .karte .video{ margin-inline:-24px; width:calc(100% + 48px); } }
/* Die Erfolgsgeschichten stehen auf der alten Seite ohne Kasten: das Video,
   darunter Zitat und Text, alles direkt auf dem Grund des Abschnitts.
   Deshalb hier keine negative Marge und wieder eine eigene Rundung. */
.karte--offen .video{ margin-inline:0; width:100%; border-radius:14px;
                      margin-top:0; margin-bottom:24px; }

/* Bild in voller Abschnittsbreite, mit Rundung wie die Karten. */
.bild-voll{ border-radius:18px; margin-top:38px; width:100%; height:auto; }

/* ══ Zahlen ══ auf Schwarz, ohne Band ══════════════════════════════════ */

/* minmax(0,1fr) statt 1fr: eine vierstellige Jahreszahl neben einer einzelnen
   Ziffer teilt die Spalten sonst ungleich auf. */
/* Vier Kennzahlen nebeneinander. Jede beginnt mit der Strich-Signatur aus
   Guide Abschnitt 06 — den drei gestapelten Strichen des Logos, hier als
   Trennelement zwischen den Spalten. Sie ersetzt eine Linie oder einen
   Kasten: die Marke hat ein eigenes Zeichen dafür, es braucht kein zweites.

   `align-items:start` haelt die Zahlen auf einer Grundlinie, auch wenn eine
   Beschriftung zwei Zeilen braucht. */
.zahlen{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
         gap:34px 30px; margin-top:20px; align-items:start; }
/* minmax(0,1fr) statt 1fr: sonst zieht „23 Jahre" seine Spalte breiter als
   die daneben, und die vier Zahlen stehen nicht mehr im Raster. */
@media (max-width:900px){ .zahlen{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Zwei Spalten bis hinunter zu 360 px — vier gestapelte Zahlen waeren eine
   Liste, kein Kennzahlenblock. Erst darunter eine Spalte. */
@media (max-width:360px){ .zahlen{ grid-template-columns:1fr; } }

.zahl{ padding-top:22px; position:relative; }
/* Die Strich-Signatur: drei gestapelte Striche, oben ueber jeder Zahl. */
.zahl::before{
  content:""; position:absolute; top:0; left:0; width:30px; height:10px;
  background:
    linear-gradient(var(--gelb),var(--gelb)) 0 0/30px 2px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) 0 4px/22px 2px no-repeat,
    linear-gradient(var(--gelb),var(--gelb)) 0 8px/14px 2px no-repeat;
}
.zahl__wert{
  font-family:var(--text); font-weight:500; font-size:clamp(40px,4.6vw,60px);
  line-height:1; color:var(--gelb); font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
/* Der Zusatz — „Jahre", „%" — steht kleiner und mit etwas Luft neben der
   Zahl, damit die Ziffern die Reihe fuehren und nicht das Wort. */
.zahl__wert .zahl__zahl+*,
.zahl__wert{ white-space:nowrap; }
.zahl__text{
  font-size:16px; line-height:1.4; color:rgba(255,255,255,.75);
  margin-top:12px; max-width:22ch;
}
@media (max-width:760px){ .zahl__text{ font-size:15px; } }

/* ══ Zitat ═════════════════════════════════════════════════════════════ */

.stimme{ border-left:4px solid var(--gelb); padding-left:26px; }
.stimme__wer{ font-family:var(--text); font-weight:700; font-size:16px;
              letter-spacing:0; margin-top:18px; }
.stimme__wo{ font-size:15px; color:rgba(255,255,255,.6); }

/* ══ Aufklapper ══ ohne JavaScript ═════════════════════════════════════ */

.frage{ border-bottom:1px solid rgba(255,255,255,.14); }
.frage>summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--text); font-weight:700; font-size:21px; line-height:1.35;
}
.frage>summary::-webkit-details-marker{ display:none; }
.frage>summary::after{
  content:"+"; position:absolute; right:6px; top:50%; translate:0 -50%;
  color:var(--gelb); font-weight:400; font-size:30px; line-height:1;
}
.frage[open]>summary::after{ content:"–"; }
.frage>summary:hover{ color:var(--gelb); }
.frage__text{ padding-bottom:24px; color:rgba(255,255,255,.85); }

/* ══ Ablauf ════════════════════════════════════════════════════════════ */

.fragen{ margin-top:38px; }

/* ══ Zeitstrahl ════════════════════════════════════════════════════════ */

/* „So kannst du jetzt durchstarten": die Etappen stehen abwechselnd links
   und rechts einer senkrechten Linie und sind dabei um eine halbe Karte
   versetzt, sodass jede Karte auf ihrer Seite frei steht. Genauso auf der
   alten Seite.

   Das Raster hat drei Spalten: Karte, Linie, Karte. Die Linie ist das
   ::before der Liste und belegt die mittlere Spalte ueber die volle Hoehe.
   Der Versatz kommt daher, dass jede Etappe zwei Rasterzeilen hoch ist und
   eine Zeile spaeter beginnt als die vorige — so ueberlappen sich linke und
   rechte Spalte um die Haelfte. */
.zeitstrahl{
  position:relative; list-style:none; padding:0; margin-top:44px;
  display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);
  /* Der Zeilenabstand ist hier nicht Zierde, sondern Rechengroesse: eine
     Etappe ist zwei Rasterzeilen hoch, also gibt sie jeder Zeile die Haelfte
     ihrer Hoehe minus dem Abstand. Genau daraus entsteht der halbe Versatz
     zwischen linker und rechter Spalte. Ohne Zeilenabstand faellt die
     Verteilung in sich zusammen und beide Spalten beginnen oben. */
  gap:50px;
  /* Gleich hohe Zeilen: nur so ist der Versatz genau eine halbe Etappe und
     nicht das, was der Browser gerade aus den Inhaltshoehen macht. */
  grid-auto-rows:1fr;
}
/* Die Linie verbindet den ersten mit dem letzten Punkt. Bis 13.09.2026 stand
   sie mit `grid-row:1 / -1` im Raster — ohne festgelegte Zeilen ist -1 aber
   die erste Rasterlinie, die Spur war nur eine Zeile hoch und endete zwischen
   den Etappen (Emma, Element 44: „nicht sauber durchgezogen“). Jetzt absolut:
   jede Etappe ist zwei gleich hohe Zeilen hoch, bei n Etappen gibt es n + 1
   Zeilen und n Abstaende. Der erste Punkt liegt eine Zeile plus halben
   Abstand unter der Oberkante, der letzte genauso weit ueber der Unterkante. */
.zeitstrahl{ --n:3; }
.zeitstrahl:has(>.etappe:nth-child(2):last-child){ --n:2; }
.zeitstrahl:has(>.etappe:nth-child(4):last-child){ --n:4; }
.zeitstrahl:has(>.etappe:nth-child(5):last-child){ --n:5; }
.zeitstrahl:has(>.etappe:nth-child(6):last-child){ --n:6; }
.zeitstrahl:has(>.etappe:nth-child(7):last-child){ --n:7; }
.zeitstrahl:has(>.etappe:nth-child(8):last-child){ --n:8; }
.zeitstrahl::before{
  content:""; position:absolute; left:calc(50% - 1px); width:2px;
  top:calc((100% - var(--n) * 50px) / (var(--n) + 1) + 25px);
  bottom:calc((100% - var(--n) * 50px) / (var(--n) + 1) + 25px);
  background:var(--weiss);
}
.etappe{
  position:relative; grid-column:1;
  border:1px solid var(--weiss); border-radius:10px; padding:40px;
  background:rgba(0,0,0,.5);
}
.etappe:nth-child(even){ grid-column:3; }
.etappe:nth-child(1){ grid-row:1 / span 2; }
.etappe:nth-child(2){ grid-row:2 / span 2; }
.etappe:nth-child(3){ grid-row:3 / span 2; }
.etappe:nth-child(4){ grid-row:4 / span 2; }
.etappe:nth-child(5){ grid-row:5 / span 2; }
.etappe:nth-child(6){ grid-row:6 / span 2; }
.etappe:nth-child(7){ grid-row:7 / span 2; }
.etappe:nth-child(8){ grid-row:8 / span 2; }

/* Der Anschluss an die Linie: ein Strich von der Kartenkante bis zur Mitte
   der Spur, darauf der gelbe Punkt. 42 px, weil zwischen Kartenkante und
   Linienmitte 50 px Spalte plus 1 px halbe Linie liegen und der Punkt mit
   18 px darauf zentriert sitzt. */
.etappe::before,.etappe::after{ content:""; position:absolute; top:50%; }
.etappe::before{ width:42px; height:1px; background:var(--weiss); }
.etappe::after{ width:18px; height:18px; border-radius:50%;
                background:var(--gelb); transform:translateY(-50%); }
.etappe:nth-child(odd)::before{ left:100%; }
.etappe:nth-child(odd)::after{ left:calc(100% + 42px); }
.etappe:nth-child(even)::before{ right:100%; }
.etappe:nth-child(even)::after{ right:calc(100% + 42px); }

/* In der Etappe ist die Ueberschrift eine Beschriftung, keine
   Abschnittsueberschrift: Fliesstextschnitt, gemischte Schreibung. Genau wie
   auf der alten Seite, wo dort `h2.h5` steht. */
.etappe h2,.etappe h3{
  font-family:var(--text); font-weight:700; font-size:21px; line-height:1.25;
  letter-spacing:.01em; text-transform:none; color:var(--weiss);
  margin:0 0 12px;
}
/* Die Beschriftung steht hier weiss, nicht gelb: in der Etappe traegt der
   gelbe Punkt auf der Linie das Signal, ein zweites daneben waere eins zu
   viel — Guide Abschnitt 06. */
/* Die Schrittnummer („01“) ist keine Eyebrow — seit der goldenen Regel vom
   13.09.2026 hat sie eine eigene Klasse, gleiches Aussehen wie zuvor. */
.etappe__nr{ display:block; font-family:var(--text); font-weight:400; font-size:15px;
             line-height:1.6; letter-spacing:var(--sp-eyebrow); text-transform:uppercase;
             margin-bottom:10px; color:var(--weiss); }
.etappe p{ max-width:none; }
.etappe .knopf-sek{ margin-top:18px; }

/* Schmale Schirme: eine Spalte, die Linie steht links, alle Punkte darauf. */
@media (max-width:860px){
  .zeitstrahl{ grid-template-columns:2px minmax(0,1fr); column-gap:32px;
               row-gap:24px; }
  /* Eine Etappe je Zeile: der erste Punkt eine halbe Zeile unter der
     Oberkante. Strich 26 px + halber Punkt = Spalte 32 px + halbe Linie. */
  .zeitstrahl::before{ left:0;
    top:calc((100% - (var(--n) - 1) * 24px) / var(--n) / 2);
    bottom:calc((100% - (var(--n) - 1) * 24px) / var(--n) / 2); }
  .etappe,.etappe:nth-child(even){ grid-column:2; }
  .etappe:nth-child(n){ grid-row:auto; }
  .etappe{ padding:26px; }
  .etappe::before,.etappe:nth-child(odd)::before,
  .etappe:nth-child(even)::before{ left:auto; right:100%; width:26px; }
  .etappe::after,.etappe:nth-child(odd)::after,
  .etappe:nth-child(even)::after{ left:auto; right:calc(100% + 26px);
                                  width:14px; height:14px; }
}


/* ══ Tabelle ══ Guide 07: kein Hintergrund darunter ════════════════════ */

.tabelle{ overflow-x:auto; margin-top:26px; background:var(--flaeche);
          border-radius:14px; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:16px; }
th,td{ text-align:left; padding:14px 18px;
       border-bottom:1px solid rgba(255,255,255,.1); }
th{ font-weight:700; color:var(--gelb); }
tr:last-child td{ border-bottom:0; }

/* ══ Dienst ══ ein Eintrag der Datenschutzerklärung ════════════════════
   Erzeugt aus bausteine/dienste.js. Bewusst eine Definitionsliste und keine
   Tabelle: die Werte sind ganze Sätze, und eine Tabelle mit zwei Spalten,
   von denen eine vier Zeilen Fließtext trägt, bricht auf dem Telefon in
   eine Spalte von 40 Pixeln Breite. Die Beschriftung steht deshalb über
   ihrem Wert, nicht daneben. */

.dienst{ margin:0 0 30px; padding-left:18px;
         border-left:2px solid rgba(255,255,255,.14); }
.dienst dt{ font-family:var(--text); font-weight:700; font-size:14px;
            letter-spacing:.04em; text-transform:uppercase;
            color:var(--gelb); margin-top:16px; }
.dienst dt:first-child{ margin-top:0; }
.dienst dd{ margin:4px 0 0; font-size:16px; line-height:1.6; }

/* ══ Formular ══ Guide 07: kein Band unter einem Formular ══════════════ */

.formular{ background:var(--flaeche); border-radius:18px; padding:32px;
           max-width:640px; }
@media (max-width:600px){ .formular{ padding:22px; } }
.feld{ margin-bottom:20px; }
/* Die Mehrfachauswahl im Benachrichtigungsformular der Builds (13.09.2026).
   Ohne diese Regeln zeichnet der Browser einen weissen Rahmen um die Gruppe. */
.formular fieldset{ border:0; padding:0; margin:0 0 22px; min-width:0; }
.formular legend{ display:block; font-weight:700; font-size:16px; margin-bottom:12px; padding:0; }
.formular fieldset .feld--wahl{ margin-bottom:10px; }
.feld label{ display:block; font-weight:700; font-size:16px; margin-bottom:8px; }
.feld input,.feld textarea{
  width:100%; background:var(--schwarz); color:var(--weiss);
  border:1px solid rgba(255,255,255,.25); border-radius:10px;
  padding:14px 16px; font-family:var(--text); font-size:16px; line-height:1.5;
}
.feld input:focus,.feld textarea:focus{ border-color:var(--gelb); outline:none;
  box-shadow:0 0 0 2px rgba(255,247,0,.35); }
.feld textarea{ min-height:170px; resize:vertical; }
.feld--wahl{ display:flex; gap:12px; align-items:flex-start; }
.feld--wahl input{ width:20px; height:20px; flex:none; margin-top:3px;
                   accent-color:var(--gelb); }
.feld--wahl label{ font-weight:400; font-size:15px; line-height:1.5; margin:0; }
.feld__hinweis{ font-size:14px; color:rgba(255,255,255,.6); margin-top:6px; }
.feld__fehler{ color:var(--fehler); font-size:15px; margin-top:8px; }
/* Der Honigtopf. Für Menschen unsichtbar, für Bots ein Feld wie jedes andere.
   Nicht mit left:-9999px: das Feld liegt dann zwar aus dem Bild, vergrößert
   aber die Fläche, die der Browser zeichnet, und Screenshots kommen dann
   winzig heraus. Die Clip-Technik nimmt es aus dem Fluss, ohne die Seite
   breiter zu machen. */
.honig{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
        overflow:hidden; white-space:nowrap; border:0;
        clip-path:inset(50%); clip:rect(0 0 0 0); }

/* ══ Fuß ═══════════════════════════════════════════════════════════════ */

.fuss{
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.12);
  background:var(--schwarz);
  padding-block:calc(var(--luft) * 1.25) 34px;
  font-size:14px; line-height:1.85; color:rgba(255,255,255,.72);
}
/* Eine Reihe aus Logo, Kanal und Knopf, darunter drei zentrierte Zeilen —
   so steht der Fuss auf der alten Seite. */
.fuss__reihe{ display:grid; grid-template-columns:1fr auto 1fr;
              align-items:center; gap:24px; }
.fuss__logo{ display:block; justify-self:start; }
.fuss__logo img{ width:300px; height:46px; }
.fuss__cta{ justify-self:end; padding:16px 30px; font-size:14px; }

/* Der Kanal als Kreis. Lucide fuehrt keine Markenzeichen, und eine zweite
   Icon-Bibliothek verbietet Guide Abschnitt 06 — also die zwei Buchstaben
   selbst, in der Textschrift. */
.fuss__kanal{ display:grid; place-items:center; width:38px; height:38px;
              border-radius:50%; background:var(--weiss); color:var(--schwarz);
              font-family:var(--text); font-weight:700; font-size:17px;
              line-height:1; text-decoration:none; }
.fuss__kanal:hover{ background:var(--gelb); }

.fuss__menue,.fuss__recht,.fuss__signatur{ text-align:center; }
.fuss__menue{ margin-top:34px; font-family:var(--text); font-weight:400;
              font-size:15px; letter-spacing:.06em; text-transform:uppercase; }
.fuss__menue span,.fuss__recht span{ margin-inline:10px;
                                     color:rgba(255,255,255,.4); }
.fuss__recht{ margin-top:12px; font-size:14px; }
.fuss__signatur{ margin-top:8px; font-size:14px; }
.fuss__herz{ color:var(--magenta); }
.fuss a:not(.fuss__kanal):not(.knopf){ color:rgba(255,255,255,.78); text-decoration:none; }
.fuss a:not(.fuss__kanal):not(.knopf):hover{ color:var(--gelb); text-decoration:underline; }
.fuss .knopf{ color:var(--schwarz); }
.fuss .knopf:hover{ color:var(--schwarz); text-decoration:none; }

@media (max-width:760px){
  .fuss__reihe{ grid-template-columns:1fr; justify-items:center; gap:22px;
                text-align:center; }
  .fuss__logo,.fuss__cta{ justify-self:center; }
  .fuss__logo img{ width:240px; height:37px; }
  .fuss__menue{ margin-top:26px; line-height:2.2; }
}

/* ══ Blog ══════════════════════════════════════════════════════════════ */

.krume{ font-size:14px; color:rgba(255,255,255,.6); margin-bottom:18px; }
.krume a{ color:rgba(255,255,255,.6); text-decoration:none; }
.krume a:hover{ color:var(--gelb); }

/* Beitragsspalte. Auf der alten Seite sind Headline, Bild und Text gleich
   breit — rund 880 px bei 1280 px Fenster. Hier stehen 860 px, und alle drei
   Teile teilen sie sich. Das ist breiter als das Zeilenmass aus Guide
   Abschnitt 04; die Alternative waere ein Bild in Textbreite gewesen, und
   das traegt einen Beitragskopf nicht. */
/* Die Artikelspalte steht mittig in der Huelle, nicht an ihrer linken Kante.
   Nachgemessen auf emmawoelk.com: dort liegt die Spalte bei 346 bis 1079 in
   einem 1440 breiten Fenster, also zentriert. Bei uns stand sie flach links
   und liess rechts 316 px leer.

   Der Autorenkasten und die Empfehlungen darunter bleiben in voller Breite —
   auch das ist auf der alten Seite so. Eine Lesespalte ist mittig, ein
   Kachelraster nicht. */
.artikel{ max-width:var(--mass-artikel); margin-inline:auto; }
.artikel>img{ margin-top:28px; }
.beitrag{ max-width:var(--mass-artikel); }
/* Zwischen Bild und erstem Absatz gehoert Luft. Ohne sie klebt der Text
   an der Bildkante. */
.artikel>img+.beitrag{ margin-top:40px; }
.beitrag p{ max-width:none; }
.beitrag h2{ margin-top:1.7em; margin-bottom:.5em; }
.beitrag h3{ margin-top:1.5em; margin-bottom:.5em; }
.beitrag h4{ margin-top:1.3em; margin-bottom:.4em; }
.beitrag img{ border-radius:14px; margin-block:1.6em; }
.beitrag blockquote{ border-left:4px solid var(--gelb); padding-left:26px;
                     margin-block:1.4em; }
.beitrag pre{ background:var(--flaeche); border-radius:14px; padding:20px;
              overflow-x:auto; margin-block:1.4em; }
.beitrag code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
               font-size:.92em; }
.beitrag :not(pre)>code{ background:var(--flaeche); padding:.15em .4em;
                         border-radius:5px; }

.meta{ font-size:15px; color:rgba(255,255,255,.6); margin-top:14px; }
/* Trenner zwischen allen Teilen, nicht nur zwischen zwei span: in der
   Beitragszeile steht zuerst ein <time>, und ohne diese Regel klebte das
   Datum an der Lesezeit. */
.meta>*+*::before{ content:" · "; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.chip{
  font-family:var(--text); font-weight:400; font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  color:var(--weiss); background:var(--flaeche);
  border:1px solid rgba(255,255,255,.14); border-radius:99px;
  padding:8px 16px;
}
.chip:hover,.chip[aria-current="page"]{ border-color:var(--gelb); color:var(--gelb); }

/* ══ Bild und Text nebeneinander ═══════════════════════════════════════ */

.zweispalt{ display:grid; grid-template-columns:1fr 1fr; gap:48px;
            align-items:center; margin-top:38px; }
/* Steht der Zweispalt ganz oben im Abschnitt, braucht er den Abstand nicht —
   sonst klebt sonst die Ueberschrift des Abschnitts an der des ersten
   Zwischenkopfs darin. */
.zweispalt:first-child{ margin-top:0; }
@media (max-width:860px){ .zweispalt{ grid-template-columns:1fr; gap:30px; } }
.portraet,.zweispalt img{ border-radius:18px; }

/* ══ Autorenkasten unter jedem Beitrag ═════════════════════════════════

   Er erbte den Zweispalt und damit die halbe Seitenbreite fuer das Foto —
   552 x 559 px unter jedem Fachtext. Ein Autorenkasten ist eine Fussnote zum
   Text, kein zweiter Hero: das Foto ist ein Erkennungszeichen, keine
   Bildstrecke.

   Feste 180 px im Quadrat, der Text daneben fuellt den Rest. `align-items:
   start` haelt beides an der Oberkante — sonst schwebte ein kurzer Text auf
   halber Hoehe neben dem Bild. */
.autorkasten{
  grid-template-columns:200px minmax(0,1fr);
  gap:30px; margin-top:0;
  /* `stretch` statt `start`: das Foto ist so hoch wie der Text daneben. Als
     festes Quadrat stand es sonst oben in der Ecke und liess darunter eine
     leere Flaeche — der Kasten sah aus, als fehle etwas. */
  align-items:stretch;
  /* Dieselbe Spalte wie der Beitrag darueber. Ueber die volle Huellenbreite
     stuenden hier 942 px Text neben dem Foto — rund 110 Zeichen je Zeile,
     doppelt so viel wie im Beitrag. Die Empfehlungen darunter bleiben breit,
     die sind ein Raster und kein Text. */
  max-width:var(--mass-artikel); margin-inline:auto;
}
/* Die Spalte um das Bild muss die Hoehe der Zeile annehmen, sonst hat das
   Bild darin nichts, woran es sich mit height:100% messen koennte. */
.autorkasten>:first-child{ height:100%; }
.autorkasten img{
  width:100%; height:100%; min-height:200px;
  object-fit:cover; object-position:center 22%;
  border-radius:14px;
}
/* Die Ueberschrift ist hier ein Name, keine Abschnittsueberschrift: kleiner
   als in der Skala, und der Verweis auf /me traegt die Textfarbe statt Gelb —
   ein gelber Unterstrich unter einem Namen liest sich als Warnung. */
.autorkasten h2{ font-size:24px; margin-top:0; margin-bottom:6px; }
.autorkasten h2 a{ color:var(--weiss); text-decoration:none; }
.autorkasten h2 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.autorkasten .vorspann{ font-size:17px; margin-top:0; margin-bottom:14px; }
.autorkasten p{ font-size:15px; line-height:1.6; }
/* Auf dem Telefon bleibt es ein Quadrat oben. Eine 96 px breite Spalte, die
   sich ueber zwoelf Zeilen Text streckt, waere kein Portraet, sondern ein
   Streifen. */
@media (max-width:600px){
  .autorkasten{ grid-template-columns:96px minmax(0,1fr); gap:18px;
                align-items:start; }
  .autorkasten>:first-child{ height:auto; }
  .autorkasten img{ width:96px; height:96px; min-height:0;
                    object-position:center top; }
  .autorkasten h2{ font-size:21px; }
}
/* Guide Abschnitt 06: keine Sterne ueber einem Gesicht. Das Portraet steht
   deshalb auf einer deckenden Flaeche, nicht auf dem Sternenfeld. */
.zweispalt img{ background:var(--flaeche); }


/* ══ Aufzaehlungen mit Symbol ══════════════════════════════════════════ */

/* Die alte Seite kennt drei Aufzaehlungen: den gelben Punkt als Grundform,
   einen Haken im Kreis fuer Argumentlisten und einen Pfeil im Kreis in den
   Coaching-Karten. Die Symbole sind Lucide, als Maske gesetzt — so traegt
   die Farbe das CSS und nicht die Datei, und es faellt kein zweiter
   Netzzugriff an. Guide Abschnitt 06 laesst Magenta und Violett als Flaeche
   zu; ein zweites Gelb waere es nicht.

   Die Klasse steht am Abschnitt oder an der Karte und gilt fuer alle Listen
   darin — genauso, wie das alte Theme es ueber `lists--image` geloest hat. */
.listen--haken ul,.listen--pfeil ul{ list-style:none; padding-left:0; }
.listen--haken li,.listen--pfeil li{
  position:relative; padding-left:38px; margin-block:.85em;
}
.listen--haken li::before,.listen--pfeil li::before{
  content:""; position:absolute; left:0; top:.12em;
  width:24px; height:24px; flex:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
}
.listen--haken li::before{
  background:var(--magenta);
  -webkit-mask-image:var(--sym-haken); mask-image:var(--sym-haken);
}
.listen--pfeil li::before{
  background:var(--violett);
  -webkit-mask-image:var(--sym-pfeil); mask-image:var(--sym-pfeil);
}

/* Die Schlusszeile einer Coaching-Karte: gelb hinterlegt, mit Gluehbirne.
   Sie steht im Original als eigene einzeilige Liste. */
.merksatz{ position:relative; padding-left:38px; margin-top:22px; }
.merksatz::before{
  content:""; position:absolute; left:0; top:.12em; width:24px; height:24px;
  background:var(--gelb);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-image:var(--sym-birne); mask-image:var(--sym-birne);
}

/* ══ Abschnitt mittig ══════════════════════════════════════════════════ */

/* Ein Abschnitt, in dem alles auf der Mittelachse steht. Der Fliesstext
   behaelt sein Zeilenmass, wird aber selbst zentriert — sonst stuenden die
   Absaetze linksbuendig unter einer mittigen Ueberschrift. */
.abschnitt--mitte{ text-align:center; }
.abschnitt--mitte p,.abschnitt--mitte .vorspann{ margin-inline:auto; }
.abschnitt--mitte ul,.abschnitt--mitte ol{ display:inline-block; text-align:left; }
/* Die Knopfreihe ist ein Flexkasten und folgt text-align nicht — unter einer
   mittigen Überschrift stand der Knopf deshalb links. 13.09.2026. */
.abschnitt--mitte .knopfreihe{ justify-content:center; }
/* Der Zeitstrahl ist eine Liste und wuerde sonst als Block zentriert stehen.
   Er nimmt die volle Breite, sein Text bleibt linksbuendig — zentriert sind
   nur die Ueberschrift des Abschnitts und der Knopf darunter. */
.abschnitt--mitte .zeitstrahl{ display:grid; text-align:left; }
.abschnitt--mitte .etappe{ text-align:left; }

/* ══ Offene Karten ═════════════════════════════════════════════════════ */

/* Nicht jede Dreierreihe ist eine Karte. Die Reihe „Sei ehrlich, steckst du
   fest?" traegt auf der alten Seite Bild, Ueberschrift und Text ohne Kasten
   — kein Grund, keine Kante, keine Innenpolsterung. Guide Abschnitt 03
   erlaubt die Flaeche, verlangt sie aber nicht. */
.karte--offen{
  background:none; border:0; padding:0; border-radius:0;
}
.karte--offen>img{ border-radius:14px; margin-bottom:24px; width:100%; }
.karte--offen h3,.karte--offen h4{ color:var(--weiss); }
.karte--offen p{ color:rgba(255,255,255,.82); }

/* Die Coaching-Karte: Kasten wie ueberall, aber mit einem Bild oben, das bis
   an die Kante laeuft. */
.karte--bild{ padding:0; overflow:hidden; }
.karte--bild>img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.karte__innen{ padding:26px 28px 30px; }
.karte__innen>*:first-child{ margin-top:0; }
.karte--bild .eyebrow{ margin-bottom:8px; }
.karte--bild h3{ font-size:26px; margin-top:0; margin-bottom:14px;
                 color:var(--weiss); }
@media (max-width:760px){ .karte--bild h3{ font-size:22px; } }

/* ══ Zweispalt mit Verhaeltnis ═════════════════════════════════════════ */

/* Vier zu acht statt sechs zu sechs — so steht die Referenz mit Hermann
   Hacker auf der alten Seite: schmales Portraet, breiter Text. */
.zweispalt--4-8{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
.zweispalt--5-7{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.zweispalt--7-5{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
/* Auf schmalen Schirmen steht das Bild ueber dem Text, auch wenn es im
   Quelltext dahinter kommt — `placement-mobile--above` im alten Theme.
   Das Verhaeltnis faellt dort weg: zwei Spalten von 100 px nebeneinander
   sind keine zwei Spalten mehr. */
@media (max-width:860px){
  .zweispalt--bildzuerst>*:last-child{ order:-1; }
  .zweispalt--4-8,.zweispalt--5-7,.zweispalt--7-5{ grid-template-columns:1fr; }
}
/* Ein Zweispalt fuellt die Spalte aus; das Zeilenmass gilt hier nicht, sonst
   stuende der Text in der halben Spaltenbreite. */
.zweispalt p{ max-width:none; }

/* ══ Persönlich ══ Entwurf 13.09.2026, zuerst nur /ki-werkstatt ═══════════

   Vorlage: Emmas Screenshot vom 13.09.2026. Emma selbst als vollflaechiges
   Foto statt Space-Renderings, Handschrift als persoenliche Note, Videos im
   violetten Rahmen, Karten mittig.

   --hand: eine Handschrift gibt es im CI-Paket noch nicht. Bis Emma eine
   Schrift freigibt, greift die des Systems — auf Telefonen ohne Segoe
   Script sieht das anders aus. */
/* Caveat (Google Fonts, SIL OFL), ausgewaehlt am 13.09.2026 aus zwoelf
   Handschriften als die, die Emmas Vorlage am naechsten kommt: schraeg,
   duenner Strich. Liegt als Teilmenge in dateien/schrift-hand/. */
@font-face{ font-family:"Caveat"; font-style:normal; font-weight:400; font-display:swap;
            src:url(../fonts/caveat-400.woff2) format("woff2"); }
:root{ --hand:"Caveat","Segoe Script","Bradley Hand",cursive; }
.band--person .knopfreihe+p,.band--person p:last-child{ margin-top:18px; }
.hand{ font-family:var(--hand); font-weight:400; color:#B7AEF0; font-size:40px;
       line-height:1.1; display:inline-block; transform:rotate(-7deg);
       transform-origin:left center; margin:44px 0 0 6px; }
/* Caveat hat kein Herz — gezeichnet als Umriss in derselben Farbe. */
.hand__herz{ display:inline-block; width:.62em; height:.62em; vertical-align:.02em; margin-left:.12em;
             fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }

/* Hero mit Emma: das Foto ist der Hero-Hintergrund, Emma steht rechts, der
   Text links auf dem schwarzen Teil des Fotos. */
.hero--person{ min-height:min(88vh,820px); display:flex; align-items:center; }
.hero--person>.huelle{ width:100%; }
/* Oben ausrichten: auf breiten Schirmen (ab ca. 1600 px) ist das Foto
   hoeher als der Hero; mittig beschnitten fehlte Emmas Kopf (13.09.2026). */
.hero--person .hero__bild{ object-position:72% top; }
/* Headline so gross wie in Emmas Vorlage: dort traegt sie den ersten
   Bildschirm, rund doppelt so hoch wie die normale H1. */
.hero--person h1{ font-size:clamp(40px,5.6vw,96px); line-height:.98; }
.hero--person::after{
  background:
    linear-gradient(90deg,#000 0,rgba(0,0,0,.7) 28%,transparent 52%),
    linear-gradient(180deg,#000 0,transparent 100px),
    linear-gradient(0deg,#000 0,transparent 160px);
}
/* Beim Herauszoomen wird das Fenster in CSS-Pixeln sehr breit. Mit voller
   Breite und fester Hoehe vergroesserte `cover` Emmas Foto dann riesig
   (Emma, 13.09.2026). Deshalb hoechstens 2000 px breit, mittig, und ab
   dieser Breite seitlich weich nach Schwarz ausgeblendet. */
.hero--person .hero__bild{ inset:0 auto 0 50%; width:min(100%,2000px);
                           transform:translateX(-50%); }
@media (min-width:2001px){
  .hero--person .hero__bild{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
}
.hero--person .hero__innen{ max-width:760px; }
.hero--person .hero__innen>.lead,.hero--person .hero__innen>p:not(.hand){ max-width:560px; }
.hero--person .hero__innen>p:not(.lead):not(.hand){ font-size:15px; opacity:.85; }
/* Telefon: das Foto oben, Emma im Bild, der Text beginnt darunter. */
@media (max-width:760px){
  .hero--person{ display:block; min-height:0; }
  /* Telefon: kein Hero-Foto, die Seite beginnt direkt mit dem Inhalt
     (Emma, 13.09.2026). Vorher 125vw, dann 92vw hoch. */
  .hero--person .hero__bild,.hero--person::after{ display:none; }
  .hero--person .hero__innen{ padding-top:var(--luft); }
  .hand--hero{ display:none; }
}

/* Band mit Emma links, Text rechts. */
.band--person{ min-height:620px; display:flex; align-items:center; }
/* Die Textspalte hat eine feste Breite und steht rechts in der Huelle.
   Vorher war es padding-left:50 % — bei breiten Fenstern schrumpfte die
   Spalte auf 180 px und der Knopf brach in sechs Zeilen (13.09.2026). */
.band--person>.huelle{ width:100%; }
.band--person>.huelle>*{ width:min(600px,48%); margin-left:auto; }
/* Hoehe waechst mit der Breite: sonst beschneidet `cover` auf breiten
   Schirmen das Foto oben und unten, und Emmas Kopf faellt heraus. */
.band--person{ min-height:clamp(620px,44vw,860px); }
.band--person::after{ background-position:left 12%;
                      inset:0 auto 0 50%; width:min(100%,2000px); transform:translateX(-50%); }
@media (min-width:2001px){
  .band--person::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
}
@media (max-width:860px){
  .band--person{ display:block; min-height:0; padding-top:92vw; }
  .band--person>.huelle>*{ width:auto; margin-left:0; }
  .band--person::after{ background-size:175vw auto; background-position:0 0; }
  .band--person::before{
    background:
      linear-gradient(180deg,#000 0,transparent 90px),
      linear-gradient(180deg,transparent 58vw,#000 98vw);
  }
}

/* Hero-Knopf kompakt, daneben der Play-Link wie in Emmas Vorlage. */
/* Knopf und Play-Link auf einer Zeile, die Handschrift darunter als eigene
   Zeile — wie in der Vorlage. */
/* Knopf und Play-Link auf einer Zeile (Emma, 13.09.2026) — geht, seit der
   Knopftext kurz ist („KI-Werkstatt buchen · 790 €/Monat“). */
.hero--person .knopf,.band--person .knopf{ font-size:15px; padding:16px 30px; white-space:nowrap; }
.hero--person .knopfreihe{ display:inline-flex; vertical-align:middle; margin-right:34px; }
.hero--person .play-link{ vertical-align:middle; margin-top:36px;
                          text-shadow:0 1px 12px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.8); }
@media (max-width:520px){
  .hero--person .knopfreihe{ display:flex; margin-right:0; }
  .hero--person .play-link{ display:flex; width:max-content; margin-top:22px; }
}
.hero--person .hand{ display:block; width:max-content; white-space:nowrap; }
.play-link{ display:inline-flex; align-items:center; gap:14px; color:var(--weiss);
            font-size:16px; font-weight:500; text-decoration:none; }
.play-link__kreis{ width:52px; height:52px; flex:none; border-radius:50%;
                   border:2px solid var(--weiss); display:grid; place-items:center;
                   transition:background .15s; }
.play-link__kreis svg{ width:18px; height:18px; margin-left:3px; fill:var(--weiss); }
.play-link:hover .play-link__kreis{ background:rgba(255,255,255,.12); }
@media (max-width:520px){ .hero--person .knopf{ white-space:normal; } }

/* Video-Platzhalter: Vorschaubild im violetten Rahmen mit Play-Knopf, bis
   das Erklaervideo bei Bunny liegt. Dann wird daraus :::video id=…. */
.video-vorschau{ position:relative; border:1px solid rgba(128,117,217,.75);
                 border-radius:14px; overflow:hidden;
                 box-shadow:0 0 48px rgba(128,117,217,.22); }
.video-vorschau img{ display:block; width:100%; height:auto; }
.video-vorschau__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                       width:88px; height:88px; border-radius:50%;
                       background:rgba(30,26,50,.55); backdrop-filter:blur(6px);
                       border:2px solid rgba(255,255,255,.85);
                       display:grid; place-items:center; }
.video-vorschau__play svg{ width:34px; height:34px; margin-left:5px; fill:var(--weiss); }

/* Karten mittig, Symbol in Violett — wie die Angebotskarten im Screenshot. */
/* Look der Angebotskarten aus Emmas Vorlage: dunkler Verlauf, feiner
   violetter Rand, grosses Linien-Icon in Violett, weisser Titel in normaler
   Schreibung, grauer Text. */
.karten-mitte .karte{
  text-align:center; padding:40px 28px 34px; border-radius:16px;
  background:linear-gradient(180deg,rgba(44,38,70,.55) 0,rgba(12,10,22,.92) 100%);
  border:1px solid rgba(160,140,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 40px rgba(128,117,217,.08);
}
.karten-mitte .karte__icon{ width:58px; height:58px; margin:0 auto 24px;
                            color:#A594FF; stroke-width:1.5; }
.karten-mitte .karte h3{ font-family:var(--ruf); font-weight:700; font-size:32px;
                         line-height:1.08; letter-spacing:0; text-transform:none;
                         color:var(--weiss); margin:0 0 14px; }
.karten-mitte .karte p{ color:rgba(255,255,255,.78); font-size:16px; line-height:1.6; }
/* Telefon: einzeln untereinander war jede Karte fast bildschirmhoch.
   Vier Karten zwei mal zwei, drei Karten nebeneinander, alles kompakter. */
@media (max-width:760px){
  .karten-mitte .raster--4{ grid-template-columns:1fr 1fr; gap:12px; }
  .karten-mitte .raster--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .karten-mitte .karte{ padding:22px 12px 20px; border-radius:14px; }
  .karten-mitte .karte__icon{ width:36px; height:36px; margin-bottom:12px; }
  .karten-mitte .karte h3{ font-size:21px; margin-bottom:8px; hyphens:auto; }
  .karten-mitte .karte p{ font-size:14px; line-height:1.45; }
  .karten-mitte .raster--3 .karte h3{ font-size:20px; }
  .karten-mitte .raster--3 .karte p{ font-size:13px; }
  /* Karten ohne Symbol haben lange Titel („… ihr jemanden sucht, der es
     übernimmt.“) — die stehen untereinander, nicht zu dritt. */
  .karten-mitte .raster--3:not(:has(.karte__icon)){ grid-template-columns:1fr; gap:12px; }
  .karten-mitte .raster--3:not(:has(.karte__icon)) .karte{ padding:24px 20px; }
  .karten-mitte .raster--3:not(:has(.karte__icon)) .karte h3{ font-size:23px; }
  .karten-mitte .raster--3:not(:has(.karte__icon)) .karte p{ font-size:15px; }
  /* Handschrift mobil ausgeblendet (Emma, 13.09.2026). */
  .hero--person .hand{ display:none; }
  /* Headline auch auf dem Telefon gross, wie in der Vorlage; die Luft
     zwischen Handschrift und Video halbiert. */
  .hero--person h1{ font-size:clamp(40px,12vw,54px); line-height:1; }
  .hero--person .hero__innen{ padding-bottom:12px; }
}

/* Referenzvideos untereinander, jedes mit Text daneben, Seiten im Wechsel. */
.video-rahmen .zweispalt+.zweispalt{ margin-top:clamp(56px,7vw,100px); }

/* Videos im violetten Rahmen. */
.video-rahmen .video{ border:1px solid rgba(128,117,217,.75); border-radius:14px;
                      overflow:hidden; box-shadow:0 0 48px rgba(128,117,217,.22); }

/* ══ Bewegung ══════════════════════════════════════════════════════════ */

/* Bei prefers-reduced-motion steht alles still — das Sternenfeld regelt das
   selbst, hier geht der Rest. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ══ Druck ══ Guide Abschnitt 03: Gelb ist auf Papier nur Fläche ═══════ */

@media print{
  body{ background:#fff; color:#000; }
  sternen-feld,.kopf,.fuss__sozial,.knopf,.hero__bild,.hero::after{ display:none; }
  /* ::after ist seit dem 12.09.2026 das Bild, ::before das Ausblenden.
     Auf Papier hat beides nichts zu suchen. */
  .band::before,.band::after{ display:none; }
  a{ color:#000; }
  .eyebrow{ color:var(--ocker); }
}

/* ══ Elemente-Bibliothek ══ /elemente, angelegt 13.09.2026 ═════════════════

   Die Bausteine, aus denen die neuen Seiten gebaut werden. Jedes Element
   hat auf /elemente eine Nummer (plan/13-elemente.md); Emma meldet
   Optimierungen mit dieser Nummer. Die Klassen gelten seitenweit.

   Goldene Regel: keine Eyebrows. Die Nummernmarke `.el-nr` gibt es nur auf
   /elemente selbst, sie ist Katalog, nicht Inhalt. */

:root{
  --verlauf-quer:linear-gradient(90deg,#8075D9,#DF579D);
  --karte-grund:#100d1a;
  --linie:rgba(255,255,255,.09);
  --text-leise:rgba(255,255,255,.76);
  --violett-hell:#B7AEF0;
}

.sym{ width:22px; height:22px; flex:none; }

/* ── Katalog ─────────────────────────────────────────────────────────── */

.el{ border-top:1px solid var(--linie); scroll-margin-top:var(--kopfhoehe); }
.el-nr{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 26px;
  font-family:var(--text); font-size:13px; font-weight:500; letter-spacing:.01em;
  color:#C9BFFF; background:rgba(128,117,217,.1);
  border:1px solid rgba(128,117,217,.5); border-radius:99px; padding:4px 14px 4px 4px;
}
.el-nr b{ background:var(--gelb); color:var(--schwarz); border-radius:99px;
          min-width:34px; padding:3px 8px; text-align:center; font-weight:800; }
.abschnitt--gelb .el-nr{ color:var(--schwarz); background:transparent; border-color:rgba(0,0,0,.35); }
.abschnitt--gelb .el-nr b{ background:var(--schwarz); color:var(--gelb); }
.el-gruppe{ padding-bottom:0; }
.el-gruppe h2{ font-size:clamp(40px,5.4vw,72px); line-height:1; }
.el-gruppe p{ color:rgba(255,255,255,.6); margin-top:12px; }
.el-reihe{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; align-items:start; }
.el-reihe--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Gemeinsame Titelschrift der neuen Karten: Barlow Condensed ohne Versalien. */
.titel-ruhig{ font-family:var(--ruf); font-weight:700; text-transform:none;
              letter-spacing:0; line-height:1.08; }

/* ── 02 Seitenkopf mittig ─────────────────────────────────────────────── */
.kopf-mitte{ text-align:center; max-width:900px; margin-inline:auto; }
.kopf-mitte h2{ font-size:clamp(42px,5.6vw,80px); line-height:.98; }
.kopf-mitte .vorspann{ margin:24px auto 0; }
.kopf-mitte .hand{ margin:30px 0 0; transform-origin:center; }

/* ── 03 Pfad ──────────────────────────────────────────────────────────── */
.pfad{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0 0 20px;
       font-size:14px; color:rgba(255,255,255,.6); }
.pfad li{ margin:0; }
.pfad li+li::before{ content:"/"; margin-right:10px; opacity:.5; }
.pfad a{ color:inherit; text-decoration:none; }
.pfad a:hover{ color:var(--gelb); }
.pfad [aria-current]{ color:var(--weiss); }

/* ── 04 Sprungmarken ──────────────────────────────────────────────────── */
.sprungmarken{ display:flex; flex-wrap:wrap; gap:10px; }
.sprungmarken a{ color:var(--weiss); text-decoration:none; font-size:14px;
                 border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:9px 16px;
                 transition:border-color .15s,color .15s; }
.sprungmarken a:hover{ border-color:var(--gelb); color:var(--gelb); }
.sprungmarken a b{ color:var(--violett-hell); margin-right:6px; }

/* ── 07 Knopfvarianten ────────────────────────────────────────────────── */
.knopf--rand{ background:transparent; color:var(--weiss); border-color:rgba(255,255,255,.7); }
.knopf--rand:hover{ border-color:var(--gelb); color:var(--gelb); box-shadow:none; }
.knopf--klein{ padding:11px 22px; font-size:13px; }
.knopf--pfeil{ display:inline-flex; align-items:center; gap:10px; }
.knopf--pfeil .sym{ width:18px; height:18px; transition:transform .15s; }
.knopf--pfeil:hover .sym{ transform:translateX(3px); }
.knopf-stapel{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }

/* ── 09 CTA-Karte mit Verlaufsrand ────────────────────────────────────── */
.cta-karte{
  text-align:center; border-radius:24px; padding:clamp(36px,6vw,72px) clamp(24px,5vw,64px);
  border:1px solid transparent;
  background:
    radial-gradient(90% 80% at 50% 0%,rgba(128,117,217,.30),transparent 65%) padding-box,
    linear-gradient(var(--karte-grund),var(--karte-grund)) padding-box,
    var(--verlauf) border-box;
  box-shadow:0 30px 80px rgba(128,117,217,.14);
}
.cta-karte h2{ font-size:clamp(34px,4.4vw,58px); line-height:1; }
.cta-karte p{ margin:18px auto 0; max-width:52ch; color:var(--text-leise); }
.cta-karte .knopfreihe{ justify-content:center; }

/* ── 10 CTA-Zeile ─────────────────────────────────────────────────────── */
.cta-zeile{ display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap;
            padding:14px 14px 14px 30px; border-radius:99px; background:var(--flaeche);
            border:1px solid var(--linie); }
.cta-zeile p{ margin:0; font-weight:600; }
.cta-zeile p span{ font-weight:400; color:var(--text-leise); margin-left:6px; }
.cta-zeile .knopf{ padding:14px 28px; font-size:14px; }

/* ── 11 Zwei Wege ─────────────────────────────────────────────────────── */
.wege{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.weg{ display:flex; flex-direction:column; border-radius:20px; padding:36px;
      background:var(--flaeche); border:1px solid var(--linie); }
.weg--hervor{ border-color:rgba(255,247,0,.55); background:linear-gradient(160deg,rgba(255,247,0,.06),transparent 55%),var(--flaeche); }
.weg .sym{ width:40px; height:40px; color:var(--violett-hell); margin-bottom:22px; }
.weg h3{ font-size:34px; }
.weg p{ color:var(--text-leise); margin-top:12px; flex:1; }
.weg .knopfreihe{ margin-top:28px; }

/* ── 12 E-Mail-Eintrag ────────────────────────────────────────────────── */
.eintrag{ display:flex; gap:8px; max-width:580px; padding:6px; border-radius:99px;
          background:var(--flaeche); border:1px solid rgba(255,255,255,.16); }
.eintrag:focus-within{ border-color:var(--gelb); }
.eintrag input{ flex:1; min-width:0; background:transparent; border:0; outline:none;
                color:var(--weiss); font:inherit; padding:0 20px; }
.eintrag input::placeholder{ color:rgba(255,255,255,.5); }
.eintrag .knopf{ border:0; cursor:pointer; padding:15px 26px; font-size:14px; }
.eintrag-hinweis{ font-size:13px; color:rgba(255,255,255,.55); margin-top:12px; }

/* ── 14 Kontaktkarte ──────────────────────────────────────────────────── */
.kontakt-emma{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:28px; align-items:center;
               padding:28px 34px; border-radius:24px;
               background:linear-gradient(135deg,rgba(128,117,217,.20),rgba(223,87,157,.07)) ;
               border:1px solid rgba(160,140,255,.28); }
.kontakt-emma img{ width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:58% 22%;
                   border:3px solid rgba(255,255,255,.18); }
.kontakt-emma h3{ font-size:32px; margin:0; }
.kontakt-emma p{ margin:6px 0 0; color:var(--text-leise); }

/* ── 15–17 Hinweisboxen ───────────────────────────────────────────────── */
.hinweis-box{ display:flex; gap:16px; padding:22px 24px; border-radius:16px;
              background:rgba(128,117,217,.10); border:1px solid rgba(128,117,217,.38); }
.hinweis-box .sym{ width:26px; height:26px; color:var(--violett-hell); margin-top:1px; }
.hinweis-box strong{ display:block; margin-bottom:4px; }
.hinweis-box p{ margin:0; color:rgba(255,255,255,.84); font-size:15px; }
.hinweis-box--achtung{ background:rgba(223,87,157,.10); border-color:rgba(223,87,157,.45); }
.hinweis-box--achtung .sym{ color:var(--magenta); }
.hinweis-box--tipp{ background:rgba(255,247,0,.05); border-color:rgba(255,247,0,.40); }
.hinweis-box--tipp .sym{ color:var(--gelb); }

/* ── 18 Merksatz ──────────────────────────────────────────────────────── */
.merksatz{ font-family:var(--stark); font-weight:300; font-size:clamp(28px,3.6vw,46px); line-height:1.24;
           max-width:28ch; padding-left:34px; position:relative; }
.merksatz::before{ content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:4px;
                   border-radius:4px; background:var(--verlauf); }
.merksatz strong{ font-weight:700; color:var(--gelb); }

/* ── 20 Handschrift mit Pfeil ─────────────────────────────────────────── */
.demo-zeile{ display:flex; align-items:center; flex-wrap:wrap; gap:22px 40px; }
.notiz-hand{ display:flex; align-items:flex-end; gap:6px; color:var(--violett-hell); }
.notiz-hand svg{ width:70px; height:56px; fill:none; stroke:currentColor; stroke-width:2;
                 stroke-linecap:round; stroke-linejoin:round; }
.notiz-hand .hand{ margin:0 0 18px; }

/* ── 21 Emma-Notiz ────────────────────────────────────────────────────── */
.notiz-emma{ display:flex; gap:18px; align-items:flex-start; max-width:660px; padding:22px 26px;
             border-radius:20px 20px 20px 6px; background:var(--flaeche); border:1px solid var(--linie); }
.notiz-emma img{ width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:58% 22%; flex:none; }
.notiz-emma__name{ font-weight:700; }
.notiz-emma__name span{ font-weight:400; color:rgba(255,255,255,.5); margin-left:8px; font-size:14px; }
.notiz-emma p{ margin:6px 0 0; color:rgba(255,255,255,.86); }

/* ── 22 Brief ─────────────────────────────────────────────────────────── */
.brief{ max-width:760px; margin-inline:auto; padding:clamp(32px,5vw,60px); border-radius:24px;
        background:linear-gradient(180deg,rgba(128,117,217,.10),transparent 40%),var(--flaeche);
        border:1px solid var(--linie); }
.brief p{ color:rgba(255,255,255,.88); font-size:18px; line-height:1.75; max-width:none; }
.brief p+p{ margin-top:1em; }
.brief__gruss{ display:flex; align-items:center; gap:18px; margin-top:28px; }
.brief__gruss img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:58% 22%; }
.brief__gruss .hand{ margin:0; font-size:46px; }

/* ── 24 Aussage ───────────────────────────────────────────────────────── */
.aussage{ text-align:center; font-family:var(--ruf); font-weight:700; text-transform:uppercase;
          font-size:clamp(46px,7.6vw,118px); line-height:.94; letter-spacing:.005em;
          max-width:15ch; margin-inline:auto; }
.aussage em{ font-style:normal; background:var(--verlauf-quer); -webkit-background-clip:text;
             background-clip:text; color:transparent; }

/* ── 28 Nummerierte Karten ────────────────────────────────────────────── */
.karten-nr{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; counter-reset:kn; }
.karten-nr>div{ position:relative; overflow:hidden; padding:88px 30px 30px; border-radius:20px;
                background:var(--flaeche); border:1px solid var(--linie); }
.karten-nr>div::before{ counter-increment:kn; content:counter(kn,decimal-leading-zero);
  position:absolute; left:26px; top:12px; font-family:var(--ruf); font-weight:900; font-size:72px; line-height:1;
  background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent; }
.karten-nr h3{ font-size:30px; }
.karten-nr p{ color:var(--text-leise); margin-top:10px; }

/* ── 29 Klickbare Karten ──────────────────────────────────────────────── */
.karten-link a.karte{ position:relative; color:inherit; text-decoration:none; padding-right:62px;
                      transition:border-color .15s,transform .15s; }
.karten-link a.karte:hover{ border-color:rgba(255,247,0,.6); transform:translateY(-3px); }
.karten-link a.karte::after{ content:""; position:absolute; right:24px; top:28px; width:26px; height:26px;
  background:var(--gelb); -webkit-mask:var(--sym-pfeil) center/contain no-repeat; mask:var(--sym-pfeil) center/contain no-repeat; }
.karten-link a.karte h3{ font-family:var(--ruf); text-transform:none; letter-spacing:0; font-size:30px; color:var(--weiss); }
.karten-link a.karte p{ color:var(--text-leise); }

/* ── 30 Bento ─────────────────────────────────────────────────────────── */
.bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(190px,auto); gap:16px; }
.bento>div{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
            padding:26px; border-radius:20px; background:var(--flaeche); border:1px solid var(--linie); }
.bento h3{ font-size:28px; position:relative; }
.bento p{ font-size:15px; color:var(--text-leise); margin-top:6px; position:relative; }
.bento .b-gross{ grid-column:span 2; grid-row:span 2; }
.bento .b-gross img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bento .b-gross::before{ content:""; position:absolute; inset:0; z-index:1;
                         background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 60%); }
.bento .b-gross>*:not(img){ z-index:2; }
.bento .b-breit{ grid-column:span 2; }
.bento .b-verlauf{ background:linear-gradient(150deg,rgba(128,117,217,.45),rgba(223,87,157,.18)); border-color:rgba(160,140,255,.35); }
.bento .b-gelb{ background:var(--gelb); border-color:var(--gelb); }
.bento .b-gelb h3,.bento .b-gelb p{ color:var(--schwarz); }
.b-zahl{ font-family:var(--ruf); font-weight:900; font-size:72px; line-height:.9; color:var(--gelb); position:relative; }
.bento .sym{ width:34px; height:34px; color:var(--violett-hell); margin-bottom:auto; }

/* ── 31 Symbolliste ───────────────────────────────────────────────────── */
.symbolliste{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 52px; list-style:none; padding:0; }
.symbolliste li{ display:flex; gap:18px; margin:0; }
.symbolliste .sym{ width:48px; height:48px; padding:12px; border-radius:14px;
                   background:rgba(128,117,217,.16); color:var(--violett-hell); }
.symbolliste strong{ display:block; font-size:18px; margin-bottom:4px; }
.symbolliste span{ color:var(--text-leise); }

/* ── 33 Pro und Contra ────────────────────────────────────────────────── */
.pro-contra{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.pro-contra>div{ padding:32px; border-radius:20px; background:var(--flaeche); border:1px solid var(--linie);
                 border-top:4px solid var(--erfolg); }
.pro-contra>.contra{ border-top-color:var(--fehler); }
.pro-contra h3{ font-size:30px; margin-bottom:14px; }
.pro-contra ul{ list-style:none; padding:0; }
.pro-contra li{ display:flex; gap:12px; }
.pro-contra li .sym{ width:20px; height:20px; margin-top:3px; color:var(--erfolg); }
.pro-contra .contra li .sym{ color:var(--fehler); }

/* ── 34 Vorher und Nachher ────────────────────────────────────────────── */
.vorher-nachher{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:18px; align-items:stretch; }
.vn{ padding:32px; border-radius:20px; background:var(--flaeche); border:1px solid var(--linie); }
.vn--nachher{ background:linear-gradient(160deg,rgba(128,117,217,.26),rgba(223,87,157,.10)); border-color:rgba(160,140,255,.38); }
.vn h3{ font-size:30px; margin-bottom:12px; }
.vn ul{ padding-left:1.1em; color:var(--text-leise); }
.vn--vorher ul{ color:rgba(255,255,255,.55); }
.vn__pfeil{ align-self:center; width:56px; height:56px; border-radius:50%; background:var(--gelb); color:var(--schwarz);
            display:grid; place-items:center; }
.vn__pfeil .sym{ width:26px; height:26px; }

/* ── 36 Preiskarten ───────────────────────────────────────────────────── */
.preise{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; padding-top:14px; }
.preis{ position:relative; display:flex; flex-direction:column; padding:36px 30px 30px; border-radius:22px;
        background:var(--flaeche); border:1px solid rgba(255,255,255,.1); }
.preis--empfohlen{ border:2px solid transparent;
  background:linear-gradient(#100D1A,#100D1A) padding-box,var(--verlauf) border-box;
  box-shadow:0 24px 70px rgba(128,117,217,.25); }
.preis__band{ position:absolute; top:-15px; left:50%; translate:-50% 0; white-space:nowrap;
              background:var(--gelb); color:var(--schwarz); font-size:13px; font-weight:800;
              padding:6px 16px; border-radius:99px; }
.preis h3{ font-size:32px; }
.preis__betrag{ font-family:var(--ruf); font-weight:900; font-size:66px; line-height:1; margin:20px 0 6px; }
.preis__betrag small{ font-family:var(--text); font-size:15px; font-weight:400; color:rgba(255,255,255,.62); margin-left:6px; }
.preis__text{ color:var(--text-leise); font-size:15px; }
.preis ul{ list-style:none; padding:0; margin:22px 0 30px; flex:1; border-top:1px solid var(--linie); padding-top:18px; }
.preis li{ display:flex; gap:10px; font-size:15px; }
.preis li .sym{ width:18px; height:18px; margin-top:4px; color:var(--violett-hell); }
.preis .knopf{ text-align:center; }

/* ── 38 Vergleichstabelle ─────────────────────────────────────────────── */
.vergleich table{ min-width:560px; }
.vergleich th,.vergleich td{ padding:16px 18px; }
.vergleich th:not(:first-child),.vergleich td:not(:first-child){ text-align:center; }
.vergleich thead th{ font-family:var(--ruf); font-size:24px; text-transform:none; letter-spacing:0; }
.vergleich .hervor{ background:rgba(128,117,217,.16); }
.vergleich thead .hervor{ box-shadow:inset 0 3px 0 var(--gelb); }
.vergleich td .sym{ margin-inline:auto; }
.vergleich .ja{ color:var(--erfolg); }
.vergleich .nein{ color:rgba(255,255,255,.32); }

/* ── 40 Ersparnis ─────────────────────────────────────────────────────── */
.ersparnis{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; padding:26px 32px; border-radius:20px;
            background:var(--flaeche); border:1px dashed rgba(255,247,0,.5); }
.ersparnis__alt{ font-family:var(--ruf); font-size:42px; color:rgba(255,255,255,.42);
                 text-decoration:line-through; text-decoration-thickness:3px; }
.ersparnis__neu{ font-family:var(--ruf); font-weight:900; font-size:60px; line-height:1; color:var(--gelb); }
.ersparnis .sym{ color:var(--violett-hell); width:28px; height:28px; }
.ersparnis p{ margin:0; flex:1; min-width:240px; color:var(--text-leise); }

/* ── 41 Paketinhalt ───────────────────────────────────────────────────── */
.paket{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; align-items:center;
        padding:36px; border-radius:24px; background:var(--flaeche); border:1px solid var(--linie); }
.paket__box{ aspect-ratio:1; border-radius:22px; background:var(--verlauf); display:grid; place-items:center;
             box-shadow:0 20px 60px rgba(223,87,157,.25); }
.paket__box .sym{ width:96px; height:96px; color:var(--weiss); stroke-width:1.4; }
.paket h3{ font-size:36px; }
.paket ul{ columns:2; column-gap:34px; margin-top:16px; }
.paket li{ break-inside:avoid; }

/* ── 42 Staffel-Balken ────────────────────────────────────────────────── */
.balken{ display:grid; gap:18px; max-width:780px; }
.balken__zeile{ display:grid; grid-template-columns:110px minmax(0,1fr) 120px; gap:18px; align-items:center; }
.balken__zeile>span:first-child{ font-weight:700; }
.balken__zeile>span:last-child{ text-align:right; font-family:var(--ruf); font-size:26px; }
.balken__spur{ height:14px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.balken__wert{ height:100%; border-radius:99px; background:var(--verlauf-quer); }

/* ── 43 Sicherheitsbox ────────────────────────────────────────────────── */
.sicherheit{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:30px 34px; border-radius:22px;
             background:rgba(53,200,138,.07); border:1px solid rgba(53,200,138,.38); }
.sicherheit>.sym{ width:56px; height:56px; color:var(--erfolg); }
.sicherheit div{ flex:1; min-width:240px; }
.sicherheit h3{ font-size:30px; }
.sicherheit p{ margin-top:6px; color:var(--text-leise); }

/* ── 45 Schritte quer ─────────────────────────────────────────────────── */
.schritte-quer{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; counter-reset:sq; }
.schritte-quer li{ position:relative; margin:0; padding-right:28px; }
.schritte-quer li::before{ counter-increment:sq; content:counter(sq); position:relative; z-index:1;
  display:grid; place-items:center; width:54px; height:54px; margin-bottom:22px; border-radius:50%;
  background:var(--gelb); color:var(--schwarz); font-family:var(--ruf); font-weight:900; font-size:28px; }
.schritte-quer li:not(:last-child)::after{ content:""; position:absolute; top:26px; left:62px; right:8px; height:2px;
  background:linear-gradient(90deg,rgba(255,247,0,.7),rgba(128,117,217,.35)); }
.schritte-quer h3{ font-size:30px; }
.schritte-quer p{ color:var(--text-leise); margin-top:8px; }

/* ── 46 Wochenrhythmus ────────────────────────────────────────────────── */
.rhythmus{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.tag{ min-height:150px; padding:18px; border-radius:16px; background:var(--flaeche); border:1px solid var(--linie); }
.tag__name{ font-family:var(--ruf); font-size:26px; }
.tag__termin{ margin-top:12px; font-size:14px; color:rgba(255,255,255,.55); }
.tag__termin b{ display:block; color:var(--weiss); font-size:15px; }
.tag--checkin{ border-color:rgba(255,247,0,.55); background:linear-gradient(160deg,rgba(255,247,0,.07),transparent 60%),var(--flaeche); }
.tag--session{ border-color:rgba(160,140,255,.45); background:linear-gradient(160deg,rgba(128,117,217,.30),rgba(223,87,157,.10)); }
.tag--checkin .tag__termin,.tag--session .tag__termin{ color:var(--text-leise); }

/* ── 47 Reiter ────────────────────────────────────────────────────────── */
.reiter{ display:flex; flex-wrap:wrap; gap:8px; }
.reiter input{ position:absolute; opacity:0; pointer-events:none; }
.reiter label{ cursor:pointer; padding:12px 22px; border-radius:99px; border:1px solid rgba(255,255,255,.18);
               font-weight:600; transition:border-color .15s; }
.reiter label:hover{ border-color:var(--gelb); }
.reiter input:checked+label{ background:var(--gelb); border-color:var(--gelb); color:var(--schwarz); }
.reiter input:focus-visible+label{ outline:2px solid var(--weiss); outline-offset:3px; }
.reiter__feld{ display:none; flex-basis:100%; margin-top:14px; padding:32px; border-radius:20px;
               background:var(--flaeche); border:1px solid var(--linie); }
.reiter__feld h3{ font-size:32px; }
.reiter__feld p{ color:var(--text-leise); margin-top:10px; }
.reiter input:nth-of-type(1):checked~.reiter__feld:nth-of-type(1),
.reiter input:nth-of-type(2):checked~.reiter__feld:nth-of-type(2),
.reiter input:nth-of-type(3):checked~.reiter__feld:nth-of-type(3){ display:block; }

/* ── 48 Termin-Karten ─────────────────────────────────────────────────── */
.termine{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.termin-karte{ display:flex; gap:22px; align-items:center; padding:22px 26px; border-radius:20px;
               background:var(--flaeche); border:1px solid var(--linie); }
.termin-karte__blatt{ width:82px; flex:none; text-align:center; border-radius:14px; overflow:hidden;
                      background:var(--weiss); color:var(--schwarz); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.termin-karte__blatt span{ display:block; background:var(--magenta); color:var(--weiss); font-size:13px; font-weight:700; padding:5px 0; }
.termin-karte__blatt b{ display:block; font-family:var(--ruf); font-weight:900; font-size:38px; line-height:1.15; padding:4px 0 6px; }
.termin-karte h3{ font-size:26px; }
.termin-karte p{ color:var(--text-leise); margin-top:4px; font-size:15px; }

/* ── 49 Checkliste ────────────────────────────────────────────────────── */
.passt{ display:grid; gap:10px; max-width:680px; }
.passt label{ display:flex; gap:16px; align-items:center; padding:18px 22px; border-radius:16px; cursor:pointer;
              background:var(--flaeche); border:1px solid rgba(255,255,255,.1); transition:border-color .15s; }
.passt label:has(input:checked){ border-color:rgba(255,247,0,.55); }
.passt input{ appearance:none; -webkit-appearance:none; flex:none; width:26px; height:26px; margin:0; border-radius:8px;
              border:2px solid rgba(255,255,255,.4); display:grid; place-items:center; cursor:pointer; }
.passt input:checked{ background:var(--gelb); border-color:var(--gelb); }
.passt input:checked::after{ content:""; width:14px; height:14px; background:var(--schwarz);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.passt label span b{ display:block; }
.passt label span{ color:var(--text-leise); }
.passt label span b{ color:var(--weiss); }

/* ── 54 Ergebniskarte ─────────────────────────────────────────────────── */
.ergebnis{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); border-radius:26px; overflow:hidden;
           background:var(--flaeche); border:1px solid var(--linie); }
.ergebnis__zahlen{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding:clamp(30px,5vw,60px); }
.ergebnis__von{ font-family:var(--ruf); font-size:clamp(42px,5vw,66px); color:rgba(255,255,255,.42); }
.ergebnis__zahlen .sym{ width:40px; height:40px; color:var(--violett-hell); }
.ergebnis__bis{ font-family:var(--ruf); font-weight:900; font-size:clamp(70px,9vw,128px); line-height:.9; color:var(--gelb); }
.ergebnis__text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,5vw,60px);
                 background:linear-gradient(160deg,rgba(128,117,217,.24),rgba(223,87,157,.08)); }
.ergebnis__text h3{ font-size:34px; }
.ergebnis__text p{ color:var(--text-leise); margin-top:10px; }

/* ── 55 Stimmen-Raster ────────────────────────────────────────────────── */
.stimmen-raster{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.stimme-karte{ display:flex; flex-direction:column; margin:0; padding:30px; border-radius:20px;
               background:var(--flaeche); border:1px solid var(--linie); }
.stimme-karte>.sym{ width:32px; height:32px; color:var(--magenta); }
.stimme-karte blockquote{ flex:1; margin:16px 0 24px; font-family:var(--text); font-weight:400;
                          font-size:17px; line-height:1.6; color:rgba(255,255,255,.9); }
.stimme-karte figcaption{ border-top:1px solid var(--linie); padding-top:16px; }
.stimme-karte figcaption b{ display:block; }
.stimme-karte figcaption span{ font-size:14px; color:rgba(255,255,255,.55); }

/* ── 56 Vertrauenszeile ───────────────────────────────────────────────── */
.vertrauenszeile{ display:flex; align-items:center; gap:24px; }
.vertrauenszeile::before,.vertrauenszeile::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.22); }
.vertrauenszeile span{ font-family:var(--ruf); font-weight:500; font-size:19px; letter-spacing:.2em;
                       text-transform:uppercase; color:rgba(255,255,255,.82); text-align:center; }

/* ── 63 Trenner mit Handschrift ───────────────────────────────────────── */
.trenner-hand{ display:flex; align-items:center; gap:26px; }
.trenner-hand::before,.trenner-hand::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(183,174,240,.5),transparent); }
.trenner-hand .hand{ margin:0; }

/* ── Telefon ──────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .el-reihe,.el-reihe--2,.wege,.pro-contra,.preise,.stimmen-raster,.karten-nr,.termine,.ergebnis{ grid-template-columns:1fr; }
  .preise{ gap:30px; }
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(160px,auto); }
  .bento .b-gross{ grid-row:span 1; min-height:280px; }
  .symbolliste{ grid-template-columns:1fr; }
  .vorher-nachher{ grid-template-columns:1fr; }
  .vn__pfeil{ justify-self:center; rotate:90deg; }
  .paket{ grid-template-columns:1fr; gap:24px; }
  .paket__box{ width:140px; }
  .paket ul{ columns:1; }
  .kontakt-emma{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .rhythmus{ grid-template-columns:1fr; }
  .tag{ min-height:0; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
  .tag__termin{ margin:0; text-align:right; }
  .schritte-quer{ grid-template-columns:1fr; }
  .schritte-quer li{ padding:0 0 30px 76px; }
  .schritte-quer li::before{ position:absolute; left:0; top:0; margin:0; }
  .schritte-quer li:not(:last-child)::after{ top:60px; bottom:6px; left:26px; right:auto; width:2px; height:auto;
    background:linear-gradient(180deg,rgba(255,247,0,.7),rgba(128,117,217,.35)); }
}
@media (max-width:560px){
  .cta-zeile{ border-radius:20px; padding:20px; }
  .cta-zeile .knopf{ width:100%; text-align:center; }
  .eintrag{ flex-direction:column; border-radius:20px; }
  .eintrag input{ padding:14px 16px; }
  .balken__zeile{ grid-template-columns:70px minmax(0,1fr) 84px; gap:12px; }
  .balken__zeile>span:last-child{ font-size:20px; }
  .vertrauenszeile span{ font-size:15px; letter-spacing:.12em; }
  .bento{ grid-template-columns:1fr; }
  .bento .b-gross,.bento .b-breit{ grid-column:span 1; }
  .termin-karte{ padding:18px; }
}

/* ── Runde 2 (13.09.2026): Abstände und Marken nachgebessert ─────────── */
.el-nr{ display:flex; width:fit-content; }
.el-nr + *:not(.nur-vorlesen),
.el-nr + .nur-vorlesen + *{ margin-top:0; }
.el-nr + h2{ margin-bottom:.4em; }
.band--person>.huelle>.el-nr{ width:fit-content; margin-left:calc(100% - min(600px,48%)); }
.sprungmarken{ margin-top:18px; }
.balken{ max-width:640px; }
.vertrauenszeile{ max-width:none; }
.vertrauenszeile span{ flex:none; max-width:80%; }
@media (max-width:860px){
  .band--person>.huelle>.el-nr{ margin-left:0; }
  .vertrauenszeile span{ flex:1; max-width:none; }
  .vertrauenszeile::before,.vertrauenszeile::after{ flex:0 0 24px; }
}

/* ── Runde 3 (13.09.2026): Telefon ───────────────────────────────────── */
@media (max-width:560px){
  .el-gruppe h2{ font-size:clamp(26px,7.6vw,40px); overflow-wrap:anywhere; }
  .vergleich table{ min-width:0; font-size:14px; }
  .vergleich th,.vergleich td{ padding:12px 8px; }
  .vergleich thead th{ font-size:18px; }
}

/* ══ Runde 4 (13.09.2026): Glas, Luft, Karussells ══════════════════════════
   Emma: luxurioeser, leichte Transparenzen, mehr Video und Karussell.
   Glas = halbtransparente Flaeche mit Unschaerfe dahinter (die Sterne
   schimmern durch), feiner heller Rand, obere Lichtkante. */

:root{
  --glas:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),rgba(18,15,30,.52);
  --glas-rand:rgba(255,255,255,.1);
  --glas-kante:inset 0 1px 0 rgba(255,255,255,.08);
  --glas-schatten:0 24px 60px rgba(0,0,0,.35);
}

/* Luft */
.el{ padding-block:clamp(64px,8vw,112px); border-top-color:rgba(255,255,255,.06); }
.el-gruppe{ padding-top:clamp(96px,11vw,160px); padding-bottom:6px; }
.el-gruppe h2{ background:linear-gradient(90deg,#fff 30%,#B7AEF0); -webkit-background-clip:text;
               background-clip:text; color:transparent; }
.el-nr{ margin-bottom:30px; }
.el h2{ margin-bottom:.45em; }
.el .raster{ margin-top:32px; }

/* Glas auf den Flaechen */
.karte,.tabelle,.weg,.preis,.bento>div,.pro-contra>div,.vn,.paket,.termin-karte,.tag,
.stimme-karte,.reiter__feld,.cta-zeile,.eintrag,.notiz-emma,.brief,.ergebnis,.karten-nr>div,
.passt label,.symbolliste .sym,.sprungmarken a,.chip{
  background:var(--glas);
  border-color:var(--glas-rand);
  box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
          backdrop-filter:blur(14px) saturate(130%);
}
.karte--offen{ background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.karte,.weg,.preis,.stimme-karte,.karten-nr>div,.termin-karte{ transition:border-color .25s,transform .25s,box-shadow .25s; }
.karte:not(.karte--offen):hover,.weg:hover,.stimme-karte:hover,.karten-nr>div:hover,.termin-karte:hover{
  border-color:rgba(183,174,240,.32); box-shadow:var(--glas-kante),var(--glas-schatten); }

.karten-mitte .karte{ background:linear-gradient(180deg,rgba(128,117,217,.16),rgba(18,15,30,.55)); border-color:rgba(183,174,240,.2); }
.weg--hervor{ background:linear-gradient(160deg,rgba(255,247,0,.09),rgba(18,15,30,.5) 60%); border-color:rgba(255,247,0,.45); }
.preis--empfohlen{ background:linear-gradient(rgba(24,19,42,.78),rgba(24,19,42,.78)) padding-box,var(--verlauf) border-box; }
.vn--nachher,.bento .b-verlauf,.ergebnis__text,.tag--session{
  background:linear-gradient(160deg,rgba(128,117,217,.30),rgba(223,87,157,.10)); }
.tag--checkin{ background:linear-gradient(160deg,rgba(255,247,0,.08),rgba(18,15,30,.5) 60%); border-color:rgba(255,247,0,.45); }
.kontakt-emma,.cta-karte,.sicherheit,.hinweis-box{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.kontakt-emma{ background:linear-gradient(135deg,rgba(128,117,217,.22),rgba(223,87,157,.08) 70%,rgba(18,15,30,.4)); }
.cta-karte{ background:
    radial-gradient(90% 80% at 50% 0%,rgba(128,117,217,.34),transparent 65%) padding-box,
    linear-gradient(rgba(16,13,26,.72),rgba(16,13,26,.72)) padding-box,
    var(--verlauf) border-box; }
.sicherheit{ background:rgba(53,200,138,.06); }

.preis__betrag{ letter-spacing:-.01em; }
.preis ul{ border-top-color:rgba(255,255,255,.08); }
.stimme-karte blockquote{ font-size:18px; }
.symbolliste .sym{ border:1px solid var(--glas-rand); }
.vergleich .hervor{ background:rgba(128,117,217,.14); }
.merksatz{ font-weight:200; }
.brief p{ font-weight:300; }

/* 64/65 Karussell und Klick-Video */
.karussell{ position:relative; }
.karussell__pfeile{ display:flex; justify-content:flex-end; gap:10px; margin:0 0 22px auto; width:fit-content; }
.karussell__pfeile button{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:var(--weiss); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .2s,color .2s,border-color .2s,opacity .2s; }
.karussell__pfeile button:hover:not(:disabled){ background:var(--gelb); color:var(--schwarz); border-color:var(--gelb); }
.karussell__pfeile button:disabled{ opacity:.3; cursor:default; }
.karussell__spur{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3); column-gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding:4px 0 8px; }
.karussell__spur::-webkit-scrollbar{ display:none; }
.karussell__spur>*{ scroll-snap-align:start; min-width:0; }
.karussell--hoch .karussell__spur{ grid-auto-columns:calc((100% - 60px) / 4); column-gap:20px; }
.karussell__fortschritt{ height:3px; margin-top:28px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.karussell__fortschritt span{ display:block; height:100%; width:34%; border-radius:3px; background:var(--verlauf-quer); transition:transform .25s; }

.vkarte{ position:relative; border-radius:22px; overflow:hidden; background:var(--glas); border:1px solid var(--glas-rand);
  box-shadow:var(--glas-kante); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.klickvideo{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.klickvideo a{ display:block; height:100%; }
.klickvideo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.klickvideo a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%); }
.klickvideo a:hover img{ transform:scale(1.045); }
.klickvideo__play{ position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1; width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s,border-color .2s,transform .2s; }
.klickvideo__play svg{ width:24px; height:24px; margin-left:3px; fill:var(--weiss); }
.klickvideo a:hover .klickvideo__play{ background:var(--gelb); border-color:var(--gelb); transform:scale(1.06); }
.klickvideo a:hover .klickvideo__play svg{ fill:var(--schwarz); }
.klickvideo iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vkarte__text{ padding:18px 22px 20px; }
.vkarte__text b{ display:block; font-family:var(--ruf); font-weight:700; font-size:24px; line-height:1.1; }
.vkarte__text span{ font-size:14px; color:rgba(255,255,255,.6); }
.karussell--hoch .klickvideo{ aspect-ratio:3/4; }
.karussell--hoch .klickvideo img{ object-position:16% center; }
.karussell--hoch .vkarte__text{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; padding:14px 16px; border-radius:16px;
  background:rgba(14,11,24,.45); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.karussell--hoch .klickvideo__play{ top:42%; }
.vkarte:has(.klickvideo--laeuft) .vkarte__text{ display:none; }

/* 65 Video-Buehne */
.buehne{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:16px; padding:14px; border-radius:28px;
  background:var(--glas); border:1px solid var(--glas-rand); box-shadow:var(--glas-kante),var(--glas-schatten);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.buehne__flaeche{ position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; }
.buehne__flaeche>.klickvideo{ position:absolute; inset:0; aspect-ratio:auto; }
.buehne__flaeche>iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.buehne__liste{ display:flex; flex-direction:column; gap:8px; min-height:0; }
.buehne__liste button{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; align-items:center; padding:8px;
  border-radius:14px; background:transparent; border:1px solid transparent; color:var(--weiss); font:inherit; text-align:left; cursor:pointer;
  transition:background .2s,border-color .2s; }
.buehne__liste button:hover{ background:rgba(255,255,255,.05); }
.buehne__liste button[aria-pressed="true"]{ background:rgba(255,255,255,.07); border-color:rgba(255,247,0,.45); }
.buehne__liste img{ aspect-ratio:16/9; width:100%; height:auto; object-fit:cover; object-position:left center; border-radius:9px; }
.buehne__liste span{ font-size:13px; color:rgba(255,255,255,.58); line-height:1.35; }
.buehne__liste b{ display:block; font-family:var(--ruf); font-weight:700; font-size:20px; color:var(--weiss); }

/* 67 Bild-Karussell */
.bildkarte{ position:relative; margin:0; aspect-ratio:4/5; border-radius:22px; overflow:hidden; border:1px solid var(--glas-rand); }
.bildkarte img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.bildkarte:hover img{ transform:scale(1.04); }
.bildkarte figcaption{ position:absolute; left:12px; right:12px; bottom:12px; padding:16px 18px; border-radius:16px;
  background:rgba(14,11,24,.42); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.bildkarte figcaption b{ display:block; font-family:var(--ruf); font-size:24px; line-height:1.1; }
.bildkarte figcaption span{ font-size:14px; color:rgba(255,255,255,.72); }

/* 68 Glas-Kennzahlen */
.glas-zahlen{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.glas-zahl{ padding:30px 26px; border-radius:22px; background:var(--glas); border:1px solid var(--glas-rand); box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.glas-zahl b{ display:block; font-family:var(--ruf); font-weight:900; font-size:clamp(48px,5vw,72px); line-height:.95; color:var(--gelb); }
.glas-zahl:nth-child(even) b{ background:var(--verlauf); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glas-zahl span{ display:block; margin-top:12px; font-size:15px; color:var(--text-leise); }

/* 69 Spotlight */
.spotlight{ position:relative; padding-bottom:40px; }
.spotlight>img{ width:78%; aspect-ratio:4/3; object-fit:cover; border-radius:28px; border:1px solid var(--glas-rand); }
.spotlight__karte{ position:absolute; display:flex; gap:14px; align-items:center; width:330px; padding:18px 20px; border-radius:18px;
  background:rgba(14,11,24,.5); border:1px solid rgba(255,255,255,.16); box-shadow:var(--glas-schatten);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); }
.spotlight__karte .sym{ width:44px; height:44px; padding:10px; border-radius:12px; background:rgba(255,247,0,.12); color:var(--gelb); }
.spotlight__karte b{ display:block; font-family:var(--ruf); font-size:22px; line-height:1.1; }
.spotlight__karte span{ font-size:14px; color:var(--text-leise); }
.spotlight__karte--1{ right:0; top:10%; }
.spotlight__karte--2{ right:7%; top:42%; }
.spotlight__karte--3{ right:1%; bottom:0; }

/* 70 Glas-Panel ueber Bild */
.glaspanel{ position:relative; display:flex; align-items:center; min-height:560px; border-radius:30px; overflow:hidden; border:1px solid var(--glas-rand); }
.glaspanel>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left center; }
.glaspanel::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.45)); }
.glaspanel__box{ position:relative; margin:40px 48px 40px auto; max-width:480px; padding:44px; border-radius:24px;
  background:rgba(14,11,24,.42); border:1px solid rgba(255,255,255,.16); box-shadow:var(--glas-kante),var(--glas-schatten);
  -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); }
.glaspanel__box h2{ font-size:clamp(32px,3.6vw,48px); line-height:1; }
.glaspanel__box p{ color:rgba(255,255,255,.84); margin-top:14px; }

/* 71 Laufband */
.laufband{ overflow:hidden; padding-block:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.laufband__spur{ display:flex; width:max-content; animation:laufband 38s linear infinite; }
.laufband:hover .laufband__spur{ animation-play-state:paused; }
.laufband__satz{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.laufband__satz span{ font-family:var(--ruf); font-weight:900; text-transform:uppercase; font-size:clamp(40px,5.6vw,76px); line-height:1; white-space:nowrap; }
.laufband__satz span:nth-of-type(even){ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.55); }
.laufband__satz .sym{ width:34px; height:34px; color:var(--gelb); }
@keyframes laufband{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .laufband__spur{ animation:none; } }

/* 72 Angebots-Karussell */
.angebot-karte{ display:flex; flex-direction:column; min-height:300px; padding:30px; border-radius:22px; color:inherit; text-decoration:none;
  background:var(--glas); border:1px solid var(--glas-rand); box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transition:border-color .25s,transform .25s; }
.angebot-karte:hover{ border-color:rgba(255,247,0,.5); transform:translateY(-4px); }
.angebot-karte>.sym{ width:48px; height:48px; padding:11px; border-radius:14px; background:rgba(128,117,217,.18); color:var(--violett-hell); }
.angebot-karte h3{ font-family:var(--ruf); font-weight:700; text-transform:none; letter-spacing:0; font-size:32px; margin:26px 0 8px; color:var(--weiss); }
.angebot-karte p{ color:var(--text-leise); flex:1; }
.angebot-karte__fuss{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); }
.angebot-karte__fuss b{ font-family:var(--ruf); font-size:24px; }
.angebot-karte__fuss .sym{ width:36px; height:36px; padding:8px; border-radius:50%; background:var(--gelb); color:var(--schwarz); transition:transform .2s; }
.angebot-karte:hover .angebot-karte__fuss .sym{ transform:translateX(4px); }

@media (max-width:860px){
  .karussell__spur{ grid-auto-columns:84%; column-gap:14px; }
  .karussell--hoch .karussell__spur{ grid-auto-columns:72%; }
  .buehne{ grid-template-columns:1fr; }
  .glas-zahlen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spotlight{ padding:0; }
  .spotlight>img{ width:100%; }
  .spotlight__karte{ position:relative; inset:auto; width:auto; margin-top:10px; }
  .glaspanel{ display:block; min-height:0; }
  .glaspanel>img{ position:relative; height:auto; aspect-ratio:4/3; }
  .glaspanel::before{ display:none; }
  .glaspanel__box{ margin:-60px 14px 14px; padding:28px; }
}

/* ══ Runde 5 (13.09.2026): Pruefung nach Runde 4 ════════════════════════ */

/* Zu viel Luft: zwei Abschnitte addierten sich auf rund 250 px. */
.el{ padding-block:clamp(44px,5vw,76px); }
.el-gruppe{ padding-top:clamp(72px,8vw,120px); }

/* Pfeile in die Zeile der Ueberschrift statt als eigene Zeile. */
.karussell{ margin-top:8px; }
.karussell__pfeile{ position:absolute; right:0; top:-70px; margin:0; z-index:2; }
@media (max-width:860px){ .karussell__pfeile{ top:-62px; } .karussell__pfeile button{ width:44px; height:44px; } }

/* Hochformat: nur die Person, die Schrift im Standbild bleibt draussen. */
.karussell--hoch .klickvideo{ aspect-ratio:2/3; }
.karussell--hoch .klickvideo img{ object-position:0 center; }
.karussell--hoch .klickvideo__play{ top:40%; }

/* 33: Glas hatte die farbige Oberkante ueberschrieben. */
.pro-contra>div{ border-top:3px solid var(--erfolg); }
.pro-contra>.contra{ border-top-color:var(--fehler); }

/* 44 Zeitstrahl und 61 Formular ins Glas. */
.etappe{ background:var(--glas); border-color:rgba(255,255,255,.22); border-radius:18px; box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.formular{ background:var(--glas); border:1px solid var(--glas-rand); border-radius:22px; box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.feld input,.feld textarea{ background:rgba(0,0,0,.45); border-color:rgba(255,255,255,.14); }

/* ══ Runde 6 (13.09.2026): Emmas Nummernliste ═══════════════════════════
   Jede Regel traegt die Nummer aus Emmas Liste. Neu und seitenweit:
   Lichtband (ein Lichtpunkt laeuft im Uhrzeigersinn um den Rahmen),
   Knopf-Glanz, Zahlen in Barlow Light, Pflichtfeld-Markierung. */

:root{
  --glas-leicht:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(18,15,30,.30);
  --rand-lila:rgba(157,140,255,.36);
  --lila-text:#C9BFFF;
  --zahl-schrift:"Barlow",Helvetica,sans-serif;
  --lb-lila:#A594FF; --lb-pink:color-mix(in srgb,var(--magenta) 85%,#fff); --lb-gelb:#FFF700;
}

/* ── Lichtband ────────────────────────────────────────────────────────────
   Emma (09, 11, 14, 25, 26, 36, 61): „Rahmen wie ein Leuchtband, das im
   Uhrzeigersinn glowt“ — einheitlich fuer alle genannten Stellen. Technik:
   ein Kegelverlauf, dessen Startwinkel sich dreht (registrierte Eigenschaft
   --lb-winkel), per Maske als 2-px-Rahmen ausgestanzt. Farbe ueber --lb.
   Immer an: 09 CTA-Karte, 11 hervorgehobener Weg, 14 Kontaktkarte,
   36 empfohlener Preis, 61 Formular. Nur bei Hover: alle Karten.
   Bei prefers-reduced-motion steht der Lichtpunkt still (Regel in ci.css). */
@property --lb-winkel{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes lb-dreh{ to{ --lb-winkel:360deg; } }

.cta-karte,.weg,.kontakt-emma,.preis,.formular,.karte:not(.karte--offen),.karten-nr>div,
.stimme-karte,.angebot-karte,.termin-karte,.bildkarte{ position:relative; }
/* Farben des Lichtbands. Die Grundfarbe steht in :where (ohne Spezifitaet),
   sonst ueberschreibt sie die Ausnahmen — so war 26 bis Runde 7 lila statt
   gelb. Emma, Runde 7: 25 lila (nicht pink), 26 gelb. */
:where(.cta-karte,.weg,.kontakt-emma,.preis,.formular,.karte,.karten-nr>div,
.stimme-karte,.angebot-karte,.termin-karte,.bildkarte){ --lb:var(--lb-lila); }
.karte:not(.karte--offen){ --lb:var(--lb-gelb); }
.karte.karte--bild{ --lb:var(--lb-lila); }
.karten-mitte .karte{ --lb:var(--lb-lila); }
.karten-link a.karte,.formular{ --lb:var(--lb-gelb); }

/* :where statt :is — die Grundregel darf keine Spezifitaet haben, sonst
   schlaegt `.karte:not(.karte--offen)` die Regeln, die das Band einschalten. */
:where(.cta-karte,.weg,.kontakt-emma,.preis,.formular,.karte:not(.karte--offen),.karten-nr>div,
    .stimme-karte,.angebot-karte,.termin-karte,.bildkarte)::after{
  content:""; position:absolute; inset:-1px; z-index:4; border-radius:inherit; pointer-events:none;
  box-sizing:border-box; padding:2px;
  background:conic-gradient(from var(--lb-winkel),transparent 0 52%,
    color-mix(in srgb,var(--lb) 28%,transparent) 68%,var(--lb) 86%,color-mix(in srgb,var(--lb) 72%,#fff) 91%,var(--lb) 95%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:lb-dreh 4s linear infinite paused;
  opacity:0; transition:opacity .35s;
}
:is(.cta-karte,.weg--hervor,.kontakt-emma,.preis--empfohlen,.formular)::after{
  opacity:1; animation-play-state:running; }
:is(.karte:not(.karte--offen),.karten-nr>div,.preis,.weg,.stimme-karte,.angebot-karte,.termin-karte,.bildkarte):is(:hover,:focus-visible)::after{
  opacity:1; animation-play-state:running; }
:is(.karte:not(.karte--offen),.karten-nr>div,.preis:not(.preis--empfohlen),.weg:not(.weg--hervor),.stimme-karte,.angebot-karte,.termin-karte,.bildkarte):hover{
  box-shadow:var(--glas-kante),0 0 46px color-mix(in srgb,var(--lb) 20%,transparent); }

/* Neon-Schein zum Lichtband (Runde 7, Emma: „zu viel Weiß, mehr nach Neon“).
   Der Rahmen selbst hat nur noch einen hellen Kern in der eigenen Farbe
   statt Weiss. Dazu laeuft auf ::before derselbe Lichtpunkt noch einmal,
   unscharf und breiter: das ist der Schein um die Roehre. Beide starten
   gleichzeitig und bleiben synchron. Nicht bei den nummerierten Karten
   (::before ist die Ziffer) und den klickbaren Karten (::before ist der Pfeil). */
:where(.cta-karte,.weg,.kontakt-emma,.preis,.formular,.karte:not(.karte--offen):not(.karten-link .karte),
    .stimme-karte,.angebot-karte,.termin-karte,.bildkarte)::before{
  content:""; position:absolute; inset:-7px; z-index:3; pointer-events:none; box-sizing:border-box; padding:9px;
  border-radius:28px;
  background:conic-gradient(from var(--lb-winkel),transparent 0 56%,
    color-mix(in srgb,var(--lb) 40%,transparent) 72%,var(--lb) 88%,var(--lb) 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  filter:blur(4px);
  animation:lb-dreh 4s linear infinite paused;
  opacity:0; transition:opacity .35s;
}
:is(.cta-karte,.weg--hervor,.kontakt-emma,.preis--empfohlen,.formular)::before{
  opacity:.8; animation-play-state:running; }
:is(.karte:not(.karte--offen):not(.karten-link .karte),.preis,.weg,.stimme-karte,.angebot-karte,.termin-karte,.bildkarte):is(:hover,:focus-visible)::before{
  opacity:.8; animation-play-state:running; }

/* ── 04 Sprungmarken: Hover in Lila ─────────────────────────────────────── */
.sprungmarken a:hover{ border-color:var(--violett-hell); color:var(--violett-hell);
  box-shadow:var(--glas-kante),0 0 22px rgba(128,117,217,.35); }

/* ── 05 Gelbe Knoepfe: Glow und Glanz ───────────────────────────────────── */
.knopf{
  background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.7) 50%,transparent 68%);
  background-size:260% 100%; background-repeat:no-repeat; background-position:130% 0;
  box-shadow:0 0 0 1px rgba(255,247,0,.22),0 4px 14px rgba(255,247,0,.16);
  transition:box-shadow .35s,background-position .8s cubic-bezier(.2,.7,.2,1);
}
.knopf:hover{ background-position:-30% 0;
  box-shadow:0 0 0 1px rgba(255,247,0,.38),0 5px 18px rgba(255,247,0,.22),0 0 36px rgba(255,247,0,.08); }
.knopf--rand{ background-image:none; box-shadow:none; }
.knopf--rand:hover{ box-shadow:0 0 14px rgba(255,247,0,.13); }

/* Lila Knopf (09, 11): gleiche Form, lila Glow. */
.knopf--lila{ background-color:var(--violett); color:var(--weiss);
  background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.38) 50%,transparent 68%);
  box-shadow:0 0 0 1px rgba(183,174,240,.4),0 4px 16px rgba(128,117,217,.3); }
.knopf--lila:hover{
  box-shadow:0 0 0 1px rgba(200,190,255,.55),0 5px 20px rgba(128,117,217,.36),0 0 40px rgba(128,117,217,.12); }

/* ── Knoepfe wabern (Emma, 13.09.2026) ──────────────────────────────────
   Jeder Knopf glueht immer ganz leicht in seiner eigenen Farbe auf und ab,
   nicht nur beim Hover. Ueber `filter:drop-shadow`, nicht ueber
   box-shadow: so bleiben die Hover-Schatten oben unberuehrt (eine
   Animation wuerde box-shadow sonst dauerhaft ueberschreiben). Bei
   prefers-reduced-motion steht es still (Regel in ci.css). */
/* Aussen wie eine Gluehbirne (Emma, 13.09.2026: „etwas mehr Glow, leicht
   stärker und schwächer wie eine Birne, die heller und dunkler wird“):
   zwei Schein-Lagen, eine enge und eine weite. Beim Hellwerden wachsen
   beide und die weite wird sichtbar, beim Dunklerwerden zieht sie sich
   fast ganz zurueck. Beide Lagen stehen in jedem Schritt, damit der
   Browser weich zwischen ihnen uebergeht. */
@keyframes knopf-wabern{
  0%,100%{ filter:drop-shadow(0 0 5px var(--wabern)) drop-shadow(0 0 8px transparent); }
  50%{ filter:drop-shadow(0 0 13px var(--wabern)) drop-shadow(0 0 34px var(--wabern)); }
}
/* Innen: Lavalampe (Emma, 13.09.2026: „mit wabern meine ich so etwas wie
   eine Lava-Lampe, nicht von links nach rechts“; davor verworfen: ein
   stiller Lichtfleck — zu subtil — und ein durchziehendes Glanzband).
   Drei weiche Farbblasen treiben langsam durch die Knopfflaeche. Jede Blase
   hat ihre eigene Bahn und Dauer (9, 11, 13 s), deshalb wiederholt sich das
   Bild praktisch nie und wirkt fliessend statt getaktet. Die Positionen sind
   registrierte Eigenschaften (@property), nur so laesst der Browser sie
   weich animieren. Liegt zwischen Knopfflaeche und Schrift
   (isolation + z-index -1), die Knopffarbe selbst bleibt unveraendert. */
@property --l1x{ syntax:"<percentage>"; inherits:false; initial-value:18%; }
@property --l1y{ syntax:"<percentage>"; inherits:false; initial-value:30%; }
@property --l2x{ syntax:"<percentage>"; inherits:false; initial-value:82%; }
@property --l2y{ syntax:"<percentage>"; inherits:false; initial-value:70%; }
@property --l3x{ syntax:"<percentage>"; inherits:false; initial-value:50%; }
@property --l3y{ syntax:"<percentage>"; inherits:false; initial-value:110%; }
@keyframes lava-1{
  0%,100%{ --l1x:18%; --l1y:30%; }
  25%{ --l1x:40%; --l1y:88%; }
  50%{ --l1x:68%; --l1y:45%; }
  75%{ --l1x:34%; --l1y:8%; }
}
@keyframes lava-2{
  0%,100%{ --l2x:82%; --l2y:70%; }
  33%{ --l2x:56%; --l2y:12%; }
  66%{ --l2x:24%; --l2y:82%; }
}
@keyframes lava-3{
  0%,100%{ --l3x:50%; --l3y:115%; }
  50%{ --l3x:62%; --l3y:-15%; }
}
/* Farben (Emma, 13.09.2026: „subtiler, immer die Farbe des Knopfs, nur
   minimal dunkler oder heller“): --lava-1 ist ein Hauch heller, --lava-2
   ein Hauch dunkler als die Knopfflaeche — kein Weiss, keine Fremdfarbe. */
.knopf{ --wabern:rgba(255,247,0,.42); --lava-1:rgba(255,252,170,.42); --lava-2:rgba(222,212,0,.34);
  position:relative; isolation:isolate; overflow:hidden; animation:knopf-wabern 4s ease-in-out infinite; }
.knopf::before{ content:""; position:absolute; inset:-6px; z-index:-1; pointer-events:none; filter:blur(4px);
  background:
    radial-gradient(34% 95% at var(--l1x) var(--l1y),var(--lava-1),transparent 70%),
    radial-gradient(30% 85% at var(--l2x) var(--l2y),var(--lava-2),transparent 70%),
    radial-gradient(24% 75% at var(--l3x) var(--l3y),var(--lava-1),transparent 70%);
  animation:lava-1 9s ease-in-out infinite,lava-2 11s ease-in-out infinite,lava-3 13s ease-in-out infinite; }
.knopf--lila{ --wabern:rgba(128,117,217,.58); --lava-1:rgba(160,150,238,.44); --lava-2:rgba(104,94,196,.4); }
.knopf--rand{ --wabern:rgba(255,255,255,.24); --lava-1:rgba(255,255,255,.05); --lava-2:rgba(0,0,0,.24); }
.abschnitt--gelb .knopf{ --wabern:rgba(0,0,0,.32); --lava-1:rgba(62,62,62,.5); --lava-2:rgba(26,26,26,.5); }
/* Mehrere Knoepfe untereinander sollen nicht im Gleichschritt wabern. */
.knopfreihe>.knopf:nth-child(2)::before,.knopf-stapel>.knopf:nth-child(2)::before{ animation-delay:-3s,-5s,-7s; }
.knopf-stapel>.knopf:nth-child(3)::before{ animation-delay:-6s,-2s,-10s; }

/* ── 06 Play-Link: Kreis weiter, Dreieck kraeftig ───────────────────────── */
.play-link__kreis{ width:62px; height:62px; transition:background .2s,box-shadow .2s; }
.play-link__kreis svg{ width:22px; height:22px; margin-left:4px; stroke:var(--weiss); stroke-width:2.6; stroke-linejoin:round; }
.play-link:hover .play-link__kreis{ background:rgba(255,255,255,.14); box-shadow:0 0 26px rgba(255,255,255,.25); }

/* ── 07 Pfeilknopf: der Pfeil waechst beim Hover ────────────────────────── */
.knopf--pfeil .sym{ width:22px; overflow:visible; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.knopf--pfeil .sym path:first-child{ transform-box:fill-box; transform-origin:right center; transform:scaleX(1);
  transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.knopf--pfeil:hover .sym{ transform:translateX(7px); }
.knopf--pfeil:hover .sym path:first-child{ transform:scaleX(1.7); }

/* ── 08 Gelbe CTA-Box: Headline gross, schwarz hinterlegt, Schrift gelb ── */
.abschnitt--gelb>.huelle>h2{ justify-self:start; background:var(--schwarz); color:var(--gelb);
  font-size:clamp(34px,4.6vw,64px); line-height:1.02; padding:.16em .42em .12em; border-radius:8px; }
.abschnitt--gelb .knopf{ color:var(--gelb); box-shadow:0 4px 12px rgba(0,0,0,.14); }
.abschnitt--gelb .knopf:hover{ box-shadow:0 6px 18px rgba(0,0,0,.2); }

/* ── 09 CTA-Karte: transparenter, Lichtband statt Verlaufsrand ──────────── */
.cta-karte{ background:radial-gradient(90% 80% at 50% 0%,rgba(128,117,217,.24),transparent 65%),rgba(16,13,26,.34);
  border:1px solid rgba(183,174,240,.22); box-shadow:0 0 80px rgba(128,117,217,.16); }

/* ── 11 Zwei Wege ───────────────────────────────────────────────────────── */
.weg{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),rgba(18,15,30,.26); }
.weg--hervor{ background:linear-gradient(160deg,rgba(128,117,217,.18),rgba(18,15,30,.32) 60%);
  border-color:rgba(183,174,240,.35); box-shadow:var(--glas-kante),0 0 54px rgba(128,117,217,.16); }
.weg--hervor .sym{ color:var(--lila-text); }

/* ── 12 E-Mail-Eintrag: mehr Luft, gelber Rahmen ────────────────────────── */
.eintrag{ margin-top:32px; border-color:rgba(255,247,0,.6); box-shadow:var(--glas-kante),0 0 30px rgba(255,247,0,.12); }
.eintrag:focus-within{ border-color:var(--gelb); box-shadow:var(--glas-kante),0 0 42px rgba(255,247,0,.28); }

/* ── 14 Kontaktkarte: transparenter, Foto groesser ──────────────────────── */
.kontakt-emma{ background:linear-gradient(135deg,rgba(128,117,217,.14),rgba(223,87,157,.05) 70%,rgba(18,15,30,.2));
  border-color:rgba(183,174,240,.22); box-shadow:0 0 54px rgba(128,117,217,.14); }
.kontakt-emma img{ width:150px; height:150px; }

/* ── 74 Erfolg (neu, zu 15–17) ──────────────────────────────────────────── */
.hinweis-box--erfolg{ background:rgba(53,200,138,.08); border-color:rgba(53,200,138,.45); }
.hinweis-box--erfolg .sym{ color:var(--erfolg); }

/* ── 75 Merksatz mit gelber Flaeche (neu, Variante von 18) ──────────────
   Emma wuenschte weisse Schrift auf Gelb. Das ist kaum lesbar (Kontrast
   1,07 : 1), deshalb wie der Marker schwarz auf Gelb — zur Entscheidung. */
.merksatz--flaeche strong{ background:var(--gelb); color:var(--schwarz); padding:.02em .22em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ── 20 Handschrift mit Pfeil: geschwungen nach links ───────────────────── */
.notiz-hand{ align-items:flex-start; gap:2px; }
.notiz-hand svg{ width:92px; height:60px; margin-top:22px; }
.notiz-hand .hand{ margin:0; }

/* ── 21 Notiz: Bild deutlich groesser ───────────────────────────────────── */
.notiz-emma{ max-width:720px; align-items:center; gap:24px; }
.notiz-emma img{ width:112px; height:112px; }

/* ── 22 Brief: transparenter, Unterschrift fast gerade ──────────────────── */
.brief{ background:linear-gradient(180deg,rgba(128,117,217,.08),transparent 40%),rgba(18,15,30,.28); }
.brief__gruss .hand{ transform:rotate(-2deg); font-size:52px; }

/* ── 23 Zitat: Linie lila ───────────────────────────────────────────────── */
.stimme{ border-left-color:var(--violett); }

/* ── 24 Grosse Aussage: der Verlauf laeuft von links nach rechts ────────
   Der Verlauf ist doppelt so breit wie der Text und wiederholt sich nach
   der Haelfte; er wandert genau eine Haelfte weit, der Sprung zurueck
   ist deshalb unsichtbar. */
.aussage em{ background:linear-gradient(90deg,#8075D9 0%,#DF579D 25%,#8075D9 50%,#DF579D 75%,#8075D9 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  animation:fluss 5s linear infinite; }
@keyframes fluss{ from{ background-position:100% 0; } to{ background-position:0 0; } }

/* ── 25 Karten mittig / 26 Karten klassisch: transparenter, Rand lila ──── */
.karte:not(.karte--offen){ background:var(--glas-leicht); border-color:var(--rand-lila); }
.karten-mitte .karte{ background:linear-gradient(180deg,rgba(128,117,217,.12),rgba(18,15,30,.26)); border-color:var(--rand-lila); }

/* ── 27 Bildkarten: Foto oben, Hover lila ───────────────────────────────── */
.karte--bild>img{ object-position:center top; }
.karte--bild:hover{ border-color:rgba(183,174,240,.6); }

/* ── 28 Nummerierte Karten: Ziffern lila ────────────────────────────────── */
.karten-nr>div::before{ font-family:var(--zahl-schrift); font-weight:300; font-size:78px; letter-spacing:-.03em;
  background:linear-gradient(180deg,#E4DFFF,#8075D9); -webkit-background-clip:text; background-clip:text; }

/* ── 29 Klickbare Karten: nichts verschiebt sich beim Hover ─────────────
   Der Pfeil wandert von ::after nach ::before, ::after traegt das Lichtband. */
.karten-link a.karte:hover,.angebot-karte:hover{ transform:none; }
.karten-link a.karte::before{ content:""; position:absolute; right:24px; top:28px; width:26px; height:26px;
  background:var(--gelb); -webkit-mask:var(--sym-pfeil) center/contain no-repeat; mask:var(--sym-pfeil) center/contain no-repeat; }
.karten-link a.karte::after{ inset:-1px; width:auto; height:auto;
  background:conic-gradient(from var(--lb-winkel),transparent 0 52%,
    color-mix(in srgb,var(--lb) 28%,transparent) 68%,var(--lb) 86%,color-mix(in srgb,var(--lb) 72%,#fff) 91%,var(--lb) 95%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude; }

/* ── 30 Bento: Zahl lila ────────────────────────────────────────────────── */
.bento .b-verlauf{ background:var(--glas-leicht); border-color:var(--rand-lila); }
.b-zahl{ font-family:var(--zahl-schrift); font-weight:300; font-size:92px; letter-spacing:-.03em;
  background:linear-gradient(180deg,#E4DFFF,#8075D9); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── 33 Pro und Contra ──────────────────────────────────────────────────
   Oben rechts ein grosser Haken bzw. ein X, der aus der Box herausragt.
   Die Oberkante ist eine leuchtende Linie; beim Hover laeuft ein Licht
   von links nach rechts darueber. */
.pro-contra>div{ --pc:var(--erfolg); position:relative; background:var(--glas-leicht);
  border-top:1px solid var(--glas-rand); }
.pro-contra>.contra{ --pc:var(--fehler); border-top-color:var(--glas-rand); }
.pro-contra h3{ padding-right:84px; }
.pro-contra>div::before{ content:""; position:absolute; left:22px; right:101px; top:-1px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--pc) 0 36%,#fff 48%,var(--pc) 60% 100%) 100% 0/300% 100% no-repeat;
  box-shadow:0 0 14px color-mix(in srgb,var(--pc) 55%,transparent); transition:box-shadow .3s; }
.pro-contra>div:hover::before{ animation:fluss 1.6s linear infinite; box-shadow:0 0 22px var(--pc); }
/* Runde 7: das Kaestchen im Symbol sitzt senkrecht mittig auf der Linie
   (Kaestchen-Mitte = 30,5/52 der Symbolhoehe), die Linie endet an seinem
   linken Rand (rechts 16 px + 92 px − 7 px Innenabstand = 101 px). */
.pro-contra>div::after{ content:""; position:absolute; top:-55px; right:16px; width:92px; height:92px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='15' width='31' height='31' rx='8' stroke='white' stroke-opacity='.4' stroke-width='2.2'/%3E%3Cpath d='M11 30l8.5 8.5L47 6' stroke='%2335C88A' stroke-width='5'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 12px rgba(53,200,138,.55)); }
.pro-contra>.contra::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='15' width='31' height='31' rx='8' stroke='white' stroke-opacity='.4' stroke-width='2.2'/%3E%3Cpath d='M8 19l26 26M34 19 8 45' stroke='%23FF5A5F' stroke-width='5'/%3E%3C/svg%3E");
  filter:drop-shadow(0 0 12px rgba(255,90,95,.5)); }

/* ── 36 Preiskarten: transparenter, Empfehlung hoeher mit Lichtband ─────── */
.preise{ padding-block:40px 24px; }
.preis{ background:var(--glas-leicht); }
.preis--empfohlen{ z-index:1; margin-block:-24px; padding-block:60px 54px;
  background:linear-gradient(180deg,rgba(128,117,217,.20),rgba(18,15,30,.32));
  border:1px solid rgba(183,174,240,.35); box-shadow:0 0 70px rgba(128,117,217,.24); }
.preis__betrag{ font-family:var(--zahl-schrift); font-weight:300; letter-spacing:-.03em; }
.preis__betrag small{ letter-spacing:0; }

/* ── 38 Vergleichstabelle: Lila statt Gelb, Lichtlinie ueber der Spalte ── */
.vergleich th{ color:var(--lila-text); }
.vergleich .hervor{ background:rgba(128,117,217,.12); }
.vergleich thead th.hervor{ position:relative; box-shadow:none; color:var(--weiss); }
.vergleich thead th.hervor::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#8075D9 0 34%,#fff 47%,#C9BFFF 52%,#8075D9 66% 100%) 100% 0/300% 100% no-repeat;
  box-shadow:0 0 16px rgba(128,117,217,.9); animation:fluss 2.6s linear infinite; }

/* ── 40 Ersparnis: alter Preis rot durchgestrichen, Pfeil gelb ──────────── */
.ersparnis__alt{ font-family:var(--zahl-schrift); font-weight:300; color:rgba(255,255,255,.6);
  text-decoration-color:var(--fehler); text-decoration-thickness:3px; }
.ersparnis__neu{ font-family:var(--zahl-schrift); font-weight:300; letter-spacing:-.02em; }
.ersparnis .sym{ color:var(--gelb); }

/* ── 42 Staffel-Balken: Licht laeuft im Loop durch jeden Balken ─────────── */
.balken__wert{ position:relative; overflow:hidden; box-shadow:0 0 18px rgba(223,87,157,.35); }
.balken__wert::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  transform:translateX(-100%); animation:balken-licht 2.4s cubic-bezier(.4,0,.2,1) infinite; }
.balken__zeile:nth-child(2) .balken__wert::after{ animation-delay:.25s; }
.balken__zeile:nth-child(3) .balken__wert::after{ animation-delay:.5s; }
@keyframes balken-licht{ to{ transform:translateX(260%); } }
.balken__zeile>span:last-child{ font-family:var(--zahl-schrift); font-weight:300; }

/* ── 44 Zeitstrahl: Headline groesser (Linie: ci.css) ───────────────────── */
.etappe h2,.etappe h3{ font-size:26px; }

/* ── 45 Schritte quer: nur der aktive Abschnitt leuchtet ────────────────
   Der aktive Schritt steht mit aria-current="step" im HTML. Davor: erledigt
   (gelb, Linie ruhig). Danach: noch offen (Umriss, Linie gedimmt). Die
   Linie vom aktiven zum naechsten Schritt fliesst. */
.schritte-quer li::before{ box-sizing:border-box; background:rgba(255,255,255,.04); color:rgba(255,255,255,.7);
  border:1.5px solid rgba(255,255,255,.28); font-family:var(--zahl-schrift); font-weight:300; }
.schritte-quer li:has(~ li[aria-current])::before,
.schritte-quer li[aria-current]::before{ background:var(--gelb); color:var(--schwarz); border-color:var(--gelb); font-weight:700; }
.schritte-quer li[aria-current]::before{ animation:schritt-puls 2s ease-out infinite; }
@keyframes schritt-puls{
  0%{ box-shadow:0 0 0 0 rgba(255,247,0,.55),0 0 26px rgba(255,247,0,.5); }
  70%{ box-shadow:0 0 0 18px rgba(255,247,0,0),0 0 26px rgba(255,247,0,.5); }
  100%{ box-shadow:0 0 0 0 rgba(255,247,0,0),0 0 26px rgba(255,247,0,.5); } }
.schritte-quer li:not(:last-child)::after{ background:rgba(255,255,255,.12); }
.schritte-quer li:has(~ li[aria-current])::after{ background:linear-gradient(90deg,var(--gelb),rgba(255,247,0,.55)); }
.schritte-quer li[aria-current]:not(:last-child)::after{ top:25px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,rgba(255,247,0,.3) 0%,#FFF700 18%,#fff 25%,#C9BFFF 32%,rgba(128,117,217,.3) 50%,
    #FFF700 68%,#fff 75%,#C9BFFF 82%,rgba(255,247,0,.3) 100%) 0 0/200% 100%;
  box-shadow:0 0 14px rgba(255,247,0,.6),0 0 34px rgba(128,117,217,.55);
  animation:fluss 1.3s linear infinite; }
.schritte-quer li[aria-current] h3{ color:var(--gelb); }
.schritte-quer li[aria-current]~li h3,.schritte-quer li[aria-current]~li p{ opacity:.55; }

/* ── 46 Wochenrhythmus: Rand lila, transparenter ────────────────────────── */
.tag{ background:var(--glas-leicht); border-color:var(--rand-lila); }
.tag--checkin{ background:linear-gradient(160deg,rgba(255,247,0,.06),rgba(18,15,30,.24) 60%); border-color:rgba(183,174,240,.45); }
.tag--session{ background:linear-gradient(160deg,rgba(128,117,217,.22),rgba(223,87,157,.06)); border-color:rgba(183,174,240,.55); }

/* ── 48 Termin-Karten: Uhrzeit leichter, Tag in Lila ────────────────────── */
.termin-karte__blatt span{ background:var(--violett); }
.termin-karte__blatt b{ font-family:var(--zahl-schrift); font-weight:300; font-size:32px; line-height:1.3; letter-spacing:-.02em; }

/* ── 50 Kennzahlen als Kacheln ──────────────────────────────────────────
   Die Strich-Signatur ueber den Zahlen weicht einer feinen Lichtkante;
   jede Zahl in einer Glaskachel, Barlow Light. Hochlauf: effects/zahlen.js
   setzt zahl--laeuft (Zahl steigt unscharf auf) und zahl--fertig
   (Kachel leuchtet einmal auf). */
.zahlen{ gap:16px; }
.zahl{ padding:32px 28px 30px; border-radius:22px; overflow:hidden; background:var(--glas-leicht);
  border:1px solid var(--rand-lila); box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.zahl::before{ top:0; left:24px; right:24px; width:auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,191,255,.9),transparent); }
.zahl__wert{ font-family:var(--zahl-schrift); font-weight:300; font-size:clamp(46px,4.8vw,70px); letter-spacing:-.03em;
  text-shadow:0 0 30px rgba(255,247,0,.22); }
.zahl__text{ color:var(--text-leise); }
.zahl--laeuft .zahl__wert,.glas-zahl.zahl--laeuft>b{ animation:zahl-auf 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes zahl-auf{ from{ opacity:0; transform:translateY(18px); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
.zahl--fertig,.glas-zahl.zahl--fertig{ animation:zahl-blitz 1.6s ease-out; }
@keyframes zahl-blitz{
  0%{ box-shadow:var(--glas-kante),0 0 0 rgba(165,148,255,0); }
  25%{ box-shadow:var(--glas-kante),0 0 56px rgba(165,148,255,.45); border-color:rgba(201,191,255,.8); }
  100%{ box-shadow:var(--glas-kante),0 0 0 rgba(165,148,255,0); } }

/* ── 52 / 53 Video-Rahmen duenner, Play wie bei YouTube ─────────────────── */
.video-rahmen .video,.video-vorschau{ border-color:rgba(128,117,217,.42); box-shadow:0 0 28px rgba(128,117,217,.12); }
.video-vorschau__play{ width:88px; height:62px; border-radius:18px; border:0; background:var(--violett);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 10px 40px rgba(128,117,217,.55),inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s,box-shadow .2s; }
.video-vorschau__play svg{ width:30px; height:30px; margin-left:3px; stroke:var(--weiss); stroke-width:2.6; stroke-linejoin:round; }
.video-vorschau:hover .video-vorschau__play{ transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 12px 50px rgba(128,117,217,.8),inset 0 1px 0 rgba(255,255,255,.25); }

/* ── 54 Ergebniskarte: Zahlen enger, Ergebnis lila, Headline groesser ───── */
.ergebnis__zahlen{ gap:10px 14px; }
.ergebnis__zahlen .sym{ width:30px; height:30px; }
.ergebnis__von{ font-family:var(--zahl-schrift); font-weight:300; }
.ergebnis__bis{ font-family:var(--zahl-schrift); font-weight:300; letter-spacing:-.03em;
  background:linear-gradient(180deg,#EDE9FF,#9D8CFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ergebnis__text{ background:linear-gradient(160deg,rgba(128,117,217,.18),rgba(223,87,157,.05)); }
.ergebnis__text h3{ font-size:clamp(36px,3.4vw,46px); }

/* ── 55 Stimmen: rundes Foto neben dem Namen ────────────────────────────
   Ausschnitt aus dem Standbild des Kundenvideos, je Person im HTML. */
.stimme-karte figcaption{ display:flex; align-items:center; gap:14px; }
.stimme-karte__foto{ flex:none; width:52px; height:52px; border-radius:50%; background-repeat:no-repeat;
  border:2px solid rgba(183,174,240,.45); box-shadow:0 0 18px rgba(128,117,217,.3); }

/* ── 58 Lesespalte: linksbuendig ────────────────────────────────────────
   Nur die Abschnittsform (klasse=artikel). Die Blogbeitraege nutzen
   .artikel als eigenes Element in der Huelle und bleiben unveraendert. */
.abschnitt.artikel{ max-width:none; margin-inline:0; }
.abschnitt.artikel>.huelle>*{ max-width:var(--mass-artikel); }

/* ── 59 Fragen: Plus und Fragen in Lila ─────────────────────────────────── */
.frage>summary{ color:var(--lila-text); transition:color .2s; }
.frage>summary:hover{ color:#E4DFFF; }
.frage>summary::after{ color:var(--violett-hell); font-size:34px; }

/* ── 60 Schlagworte als Wolke ───────────────────────────────────────────── */
.chips--wolke{ position:relative; isolation:isolate; justify-content:center; align-items:center;
  gap:4px 26px; max-width:860px; margin:10px auto 0; padding:70px 50px; }
.chips--wolke::before{ content:""; position:absolute; inset:0; z-index:-1; filter:blur(26px);
  background:
    radial-gradient(30% 40% at 30% 58%,rgba(128,117,217,.30),transparent 70%),
    radial-gradient(28% 46% at 52% 42%,rgba(128,117,217,.34),transparent 70%),
    radial-gradient(26% 38% at 74% 56%,rgba(223,87,157,.18),transparent 70%),
    radial-gradient(40% 28% at 50% 74%,rgba(128,117,217,.22),transparent 70%); }
.chips__umbruch{ flex-basis:100%; height:0; }
.chips--wolke .chip{ background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:0; border-radius:0; line-height:1.15; font-family:var(--ruf); text-transform:none; letter-spacing:0;
  color:rgba(255,255,255,.78); transition:color .2s,text-shadow .2s; }
.chips--wolke .chip:hover{ color:var(--weiss); text-shadow:0 0 18px rgba(165,148,255,.9); }
.chips--wolke .chip--s{ font-size:19px; font-weight:400; color:rgba(255,255,255,.55); }
.chips--wolke .chip--m{ font-size:28px; font-weight:700; }
.chips--wolke .chip--l{ font-size:42px; font-weight:700; color:var(--lila-text); }
.chips--wolke .chip--xl{ font-size:66px; font-weight:900; color:var(--gelb); text-shadow:0 0 30px rgba(255,247,0,.25); }

/* ── 61 Formular: Feldtypen, Pflichtfelder, gelbes Lichtband ────────────── */
.formular{ box-shadow:var(--glas-kante),0 0 50px rgba(255,247,0,.08); }
.formular--breit{ max-width:760px; }
.feld-reihe{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.feld__optional{ font-weight:400; font-size:13px; color:rgba(255,255,255,.5); margin-left:6px; }
.feld select{ width:100%; -webkit-appearance:none; appearance:none; color:var(--weiss); font-family:var(--text); font-size:16px; line-height:1.5;
  padding:14px 46px 14px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.14); cursor:pointer;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9BFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/18px; }
.feld select:focus{ border-color:var(--gelb); outline:none; box-shadow:0 0 0 2px rgba(255,247,0,.35); }
.feld select option{ background:#100D1A; color:var(--weiss); }
.wahlkacheln{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.feld .wahlkachel{ display:flex; align-items:center; gap:10px; margin:0; padding:14px 16px; border-radius:12px; cursor:pointer;
  font-weight:500; font-size:15px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.35); transition:border-color .2s,background .2s; }
.wahlkachel input{ -webkit-appearance:none; appearance:none; flex:none; width:18px; height:18px; margin:0; padding:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); background:none; display:grid; place-items:center; cursor:pointer; }
.wahlkachel input:checked{ border-color:var(--gelb); }
.wahlkachel input:checked::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--gelb); box-shadow:0 0 8px var(--gelb); }
.wahlkachel input:focus-visible{ outline:2px solid var(--weiss); outline-offset:2px; }
.feld .wahlkachel:has(input:checked){ border-color:rgba(255,247,0,.6); background:rgba(255,247,0,.06); }
.datei{ position:relative; display:flex; align-items:center; gap:16px; padding:22px; border-radius:14px;
  border:1.5px dashed rgba(255,247,0,.4); background:rgba(0,0,0,.3); transition:border-color .2s,background .2s; }
.feld .datei input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0; }
.datei:hover,.datei:focus-within,.datei--drueber{ border-color:var(--gelb); background:rgba(255,247,0,.05); }
.datei .sym{ width:44px; height:44px; padding:10px; border-radius:12px; background:rgba(255,247,0,.1); color:var(--gelb); }
.datei__text b{ display:block; }
.datei__text small{ display:block; font-size:13px; color:rgba(255,255,255,.55); margin-top:2px; }
.datei__name{ display:block; font-size:14px; color:var(--gelb); margin-top:4px; }
/* Fehlende Pflichtfelder: roter Rahmen, Grund darunter, Meldung ueber dem
   Knopf — keine Sprechblase des Browsers (effects/formular.js). */
.feld--fehlt>input,.feld--fehlt>textarea,.feld--fehlt>select{ border-color:var(--fehler);
  background-color:rgba(255,90,95,.07); box-shadow:0 0 0 3px rgba(255,90,95,.16); }
.feld--fehlt .datei{ border-color:var(--fehler); background:rgba(255,90,95,.06); }
.feld--fehlt .wahlkachel{ border-color:rgba(255,90,95,.55); }
.feld--fehlt>legend,.feld--fehlt>label{ color:color-mix(in srgb,var(--fehler) 70%,#fff); }
.feld--wahl.feld--fehlt input{ outline:2px solid var(--fehler); outline-offset:2px; }
.feld--wahl{ flex-wrap:wrap; }
.feld--wahl>label{ flex:1; min-width:0; }
.formular__meldung[hidden]{ display:none; }
.feld--wahl .feld__fehler{ flex-basis:100%; margin-left:32px; }
.feld__fehler[data-js]{ display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:14px; color:color-mix(in srgb,var(--fehler) 70%,#fff); }
.feld__fehler[data-js]::before{ content:"!"; flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:50%;
  background:var(--fehler); color:var(--schwarz); font-weight:800; font-size:12px; line-height:1; }
.formular__meldung{ display:flex; align-items:center; gap:12px; margin:0 0 20px; padding:14px 18px; border-radius:14px;
  font-size:15px; color:var(--weiss); background:rgba(255,90,95,.08); border:1px solid rgba(255,90,95,.45); }
.formular__meldung::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--fehler); box-shadow:0 0 10px var(--fehler); }
.formular__meldung--ok{ background:rgba(53,200,138,.08); border-color:rgba(53,200,138,.45); }
.formular__meldung--ok::before{ background:var(--erfolg); box-shadow:0 0 10px var(--erfolg); }

/* ── 63 Trenner: Handschrift groesser ───────────────────────────────────── */
.trenner-hand .hand{ font-size:60px; }

/* ── 66 Video-Buehne: Liste scrollt, wenn mehr Videos da sind ───────────
   contain:size nimmt der Liste ihre eigene Hoehe: die Zeile richtet sich
   nach der Videoflaeche, die Liste fuellt sie und scrollt darin. */
.buehne__liste{ contain:size; overflow-y:auto; overscroll-behavior:contain; padding-right:8px;
  scrollbar-width:thin; scrollbar-color:rgba(165,148,255,.75) rgba(255,255,255,.06); }
.buehne__liste::-webkit-scrollbar{ width:6px; }
.buehne__liste::-webkit-scrollbar-thumb{ background:rgba(165,148,255,.75); border-radius:6px; }
.buehne__liste::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:6px; }
.buehne__liste button[aria-pressed="true"]{ border-color:rgba(165,148,255,.6); }

/* ── 69 Glas-Kennzahlen: Lila statt Pink, Barlow Light ──────────────────── */
.glas-zahl{ background:var(--glas-leicht); }
.glas-zahl b{ font-family:var(--zahl-schrift); font-weight:300; letter-spacing:-.03em; font-size:clamp(48px,5vw,74px); }
.glas-zahl:nth-child(even) b{ background:linear-gradient(180deg,#EDE9FF,#9D8CFF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glas-zahl b .zahl__zahl{ display:inline; margin:0; font-size:inherit; color:inherit; }

/* ── 70 Spotlight: Karten im Bild, pulsierende Punkte ───────────────────── */
.spotlight{ padding:0; }
.spotlight__bild{ position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--glas-rand); }
.spotlight__bild img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 30%; }
.spotlight__bild::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 38%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%); }
.spotlight__punkt{ position:absolute; z-index:2; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:var(--gelb); box-shadow:0 0 0 4px rgba(255,247,0,.25),0 0 24px rgba(255,247,0,.85); }
.spotlight__punkt::before,.spotlight__punkt::after{ content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,247,0,.85); animation:punkt-welle 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.spotlight__punkt::after{ animation-delay:1.2s; }
@keyframes punkt-welle{ from{ transform:scale(1); opacity:.9; } to{ transform:scale(4.4); opacity:0; } }
.spotlight__karte{ z-index:3; width:min(310px,28%); }
.spotlight__karte--1{ top:auto; right:3%; bottom:5%; }
.spotlight__karte--2{ left:54%; right:auto; top:6%; }
.spotlight__karte--3{ left:3%; right:auto; top:auto; bottom:5%; }

/* ── 73 Angebots-Karussell: Pfeile mit lila Flaeche ─────────────────────── */
.karussell--lila .karussell__pfeile button{ background:var(--violett); border-color:var(--violett); color:var(--weiss);
  box-shadow:0 0 24px rgba(128,117,217,.45); }
.karussell--lila .karussell__pfeile button:hover:not(:disabled){ background:#9D8CFF; border-color:#9D8CFF; color:var(--weiss);
  box-shadow:0 0 34px rgba(128,117,217,.7); }

/* ── Runde 6: Telefon ───────────────────────────────────────────────────── */
@media (max-width:860px){
  .preis--empfohlen{ margin-block:0; padding-block:42px 30px; }
  .kontakt-emma img{ width:120px; height:120px; }
  .notiz-emma img{ width:84px; height:84px; }
  .feld-reihe{ grid-template-columns:1fr; }
  .pro-contra>div::after{ width:72px; height:72px; top:-43px; }
  .pro-contra>div::before{ right:83px; }
  .schritte-quer li:not(:last-child)::after{ top:60px; bottom:6px; left:26px; right:auto; width:2px; height:auto; }
  .schritte-quer li:has(~ li[aria-current])::after{ background:linear-gradient(180deg,var(--gelb),rgba(255,247,0,.55)); }
  .schritte-quer li[aria-current]:not(:last-child)::after{ top:60px; left:25px; width:4px; height:auto;
    background:linear-gradient(180deg,rgba(255,247,0,.3) 0%,#FFF700 18%,#fff 25%,#C9BFFF 32%,rgba(128,117,217,.3) 50%,
      #FFF700 68%,#fff 75%,#C9BFFF 82%,rgba(255,247,0,.3) 100%) 0 0/100% 200%;
    animation:fluss-senkrecht 1.3s linear infinite; }
  .buehne__liste{ contain:none; max-height:360px; }
  .spotlight__karte{ width:auto; left:auto; right:auto; top:auto; bottom:auto; }
  .etappe h2,.etappe h3{ font-size:22px; }
}
@keyframes fluss-senkrecht{ from{ background-position:0 100%; } to{ background-position:0 0; } }
@media (max-width:560px){
  .zahl{ padding:22px 18px; }
  .zahl__wert{ font-size:clamp(32px,9vw,46px); }
  .chips--wolke{ padding:40px 6px; gap:2px 16px; }
  .chips--wolke .chip--xl{ font-size:44px; }
  .chips--wolke .chip--l{ font-size:30px; }
  .chips--wolke .chip--m{ font-size:22px; }
  .chips--wolke .chip--s{ font-size:15px; }
  .b-zahl{ font-size:72px; }
}

/* ══ Runde 7 (13.09.2026): Emmas zweite Nummernliste ═══════════════════ */

/* 30 und alle Zahlen: Inter Light statt Barlow Light. Barlow hat hohe,
   schmale Ziffern („hochgequetscht“, Emma); Inter hat breitere, rundere
   und laedt ohnehin auf jeder Seite — keine neue Schrift, kein neuer
   Download. Gilt ueberall, wo --zahl-schrift steht. */
:root{ --zahl-schrift:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* 01 / 02 Handschrift halb so schraeg (−3,5° statt −7°), im Hero tiefer. */
.hero--person .hand,.kopf-mitte .hand{ transform:rotate(-3.5deg); }
.hero--person .hand{ margin-top:58px; }

/* 11 Linke Karte: beim Hover wird der Randknopf lila, Rahmen und Schrift. */
.weg:hover .knopf--rand{ border-color:var(--violett-hell); color:var(--violett-hell);
  box-shadow:0 0 14px rgba(128,117,217,.3); --wabern:rgba(128,117,217,.4); }

/* 12 E-Mail-Eintrag: die Linie wirkte an den Rundungen unsauber — die
   Glas-Unschaerfe dahinter und die obere Lichtkante (inset) zeichnen an
   runden Enden unregelmaessig. Jetzt ein klarer 1,5-px-Rahmen ohne beides. */
.eintrag{ border:1.5px solid rgba(255,247,0,.55); background:rgba(18,15,30,.6);
  box-shadow:0 0 24px rgba(255,247,0,.1); -webkit-backdrop-filter:none; backdrop-filter:none; }
.eintrag:focus-within{ border-color:var(--gelb); box-shadow:0 0 30px rgba(255,247,0,.2); }

/* 20 Pfeil: Text auf Hoehe des Knopfs, der Pfeil schwingt im Bogen nach
   oben und zeigt von rechts oben auf den Knopf. */
.demo-zeile{ gap:22px 14px; }
.notiz-hand{ align-items:center; gap:4px; }
.notiz-hand svg{ width:100px; height:56px; margin:0; transform:translateY(-14px); }

/* 34 Vorher/Nachher: beide Boxen transparenter, Punkte bei „Vorher“ weiss. */
.vn{ background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),rgba(18,15,30,.2); }
.vn--nachher{ background:linear-gradient(160deg,rgba(128,117,217,.18),rgba(223,87,157,.06)); }
.vn--vorher li::marker{ color:var(--weiss); }

/* 36 Empfohlener Preis: Flaeche wieder als Verlauf von Lila nach Pink,
   das Band „Für Teams“ liegt ueber Lichtband und Neon-Schein. */
.preis--empfohlen{ background:linear-gradient(160deg,rgba(128,117,217,.36) 0%,rgba(128,117,217,.16) 45%,rgba(223,87,157,.2) 100%); }
.preis__band{ z-index:6; }

/* 24 Grosse Aussage: ueberwiegend Lila, nur ein Hauch Pink. */
.aussage em{ background:linear-gradient(90deg,#8075D9 0%,#B7AEF0 12.5%,#9D8CFF 25%,#B7AEF0 37.5%,#8075D9 50%,
    #B7AEF0 62.5%,#9D8CFF 75%,#B7AEF0 87.5%,#8075D9 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; }

/* ══ Runde 8 (13.09.2026): Emmas dritte Nummernliste ═══════════════════ */

/* 43 Sicherheitsbox: gruener Knopf fuer Vertrauen, mit Lava und Glow wie
   die anderen Knoepfe — nur in Gruen. */
.sicherheit .knopf{ background-color:var(--erfolg); color:var(--schwarz);
  --wabern:rgba(53,200,138,.5); --lava-1:rgba(130,235,190,.42); --lava-2:rgba(25,150,98,.36);
  box-shadow:0 0 0 1px rgba(53,200,138,.35),0 4px 14px rgba(53,200,138,.2); }
.sicherheit .knopf:hover{ box-shadow:0 0 0 1px rgba(53,200,138,.6),0 5px 20px rgba(53,200,138,.34),0 0 40px rgba(53,200,138,.14); }

/* 45 Schritte quer: die fliessende Linie nur in Gelb, mit hellerem Gelb
   als Lichtkern — wie das Lichtband an den Boxen. */
.schritte-quer li[aria-current]:not(:last-child)::after{
  background:linear-gradient(90deg,rgba(255,247,0,.28) 0%,#FFF700 18%,rgba(255,252,190,1) 25%,#FFF700 32%,rgba(255,247,0,.28) 50%,
    #FFF700 68%,rgba(255,252,190,1) 75%,#FFF700 82%,rgba(255,247,0,.28) 100%) 0 0/200% 100%;
  box-shadow:0 0 12px rgba(255,247,0,.6),0 0 30px rgba(255,247,0,.3); }

/* 46 Wochenrhythmus: Tagesnamen groesser. */
.tag__name{ font-size:34px; line-height:1.05; }

/* 47 Reiter: der Rahmen beim Hover war 1 px und flimmerte an den runden
   Enden. Jetzt immer 1,5 px (kein Springen), beim Hover gelb mit Schein. */
.reiter label{ border-width:1.5px; transition:border-color .2s,box-shadow .2s,color .2s; }
.reiter label:hover{ border-color:rgba(255,247,0,.8); box-shadow:0 0 16px rgba(255,247,0,.2); }

/* 50 Kennzahlen: Kachelrand und Lichtkante gelb. */
.zahl{ border-color:rgba(255,247,0,.38); }
.zahl::before{ background:linear-gradient(90deg,transparent,rgba(255,247,0,.9),transparent); }
@keyframes zahl-blitz{
  0%{ box-shadow:var(--glas-kante),0 0 0 rgba(255,247,0,0); }
  25%{ box-shadow:var(--glas-kante),0 0 50px rgba(255,247,0,.3); border-color:rgba(255,247,0,.85); }
  100%{ box-shadow:var(--glas-kante),0 0 0 rgba(255,247,0,0); } }

/* 54 Ergebniskarte: geschwungener Pfeil mit Handschrift-Beschriftung
   statt des geraden Pfeils (Vorlage: Element 20). 900 oben, der Pfeil
   schwingt nach rechts und unten auf die 24.000. */
.ergebnis__zahlen{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:0 10px; }
.ergebnis__von{ grid-column:1; grid-row:1; }
.ergebnis__pfeil{ grid-column:2; grid-row:1; display:flex; align-items:flex-start; gap:2px; color:var(--lila-text); }
.ergebnis__pfeil svg{ flex:none; width:120px; height:70px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; margin-top:26px; }
.ergebnis__pfeil .hand{ margin:0; font-size:30px; transform:rotate(-3.5deg); white-space:nowrap; }
.ergebnis__bis{ grid-column:1 / -1; grid-row:2; margin-top:-6px; }

/* 55 Stimmen: Fotos groesser, Ausschnitt je Person im HTML neu berechnet
   (Kopf mittig). Hover-Lichtband in Pink — gilt auch fuer 67. */
.stimme-karte__foto{ width:68px; height:68px; }
.stimme-karte{ --lb:var(--lb-pink); }

/* 60 Schlagwort-Wolke: die Woerter treiben beim Scrollen gegeneinander
   (effects/wolke.js); der Uebergang macht es weich. */
.chips--wolke .chip{ transition:color .2s,text-shadow .2s,transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }

/* 61 Formular: wie die empfohlene Preiskarte (36) — Flaeche als Verlauf von
   Lila nach Pink, lila Lichtband mit Neon-Schein, der dauernd um den Rahmen
   laeuft (Emma, 13.09.2026: „gleicher Effekt und Farbe wie hier“). Davor
   kurz ein gelb gluehender Rahmen, verworfen. Link weiss, Datei-Feld lila,
   Einwilligung ohne Umbruch. */
/* Rahmen als Verlauf von oben Lila nach unten Gelb (Emma, 13.09.2026; Pink
   als Alternative ausprobiert, siehe --form-unten). Ein Verlaufsrahmen mit
   runden Ecken geht nur ueber zwei Hintergrund-Lagen: unten der Verlauf
   bis an die Aussenkante, darueber die Flaeche bis an die Innenkante. Die
   Flaeche braucht dafuer einen deckenden dunklen Grund, sonst scheint der
   Verlauf durch das ganze Formular. Dazu ein Schein, der im Takt der Knoepfe
   (4 s) heller und dunkler wird — oben lila, unten in der unteren Farbe. */
/* Entschieden fuer Pink: im Vergleich konkurrierte Gelb unten mit dem
   gelben Knopf und legte einen gelben Schein ueber den Hinweis darunter;
   Pink greift den Pink-Ton der Flaeche auf. */
.formular{ --lb:var(--lb-lila); --form-oben:#A594FF; --form-unten:var(--magenta);
  background:
    linear-gradient(160deg,rgba(128,117,217,.36) 0%,rgba(128,117,217,.16) 45%,rgba(223,87,157,.2) 100%) padding-box,
    linear-gradient(#100D1A,#100D1A) padding-box,
    linear-gradient(180deg,var(--form-oben),var(--form-unten)) border-box;
  border:1.5px solid transparent;
  animation:formular-leuchten 4s ease-in-out infinite; }
@keyframes formular-leuchten{
  0%,100%{ box-shadow:0 -6px 22px color-mix(in srgb,var(--form-oben) 18%,transparent),
                      0 8px 22px color-mix(in srgb,var(--form-unten) 12%,transparent); }
  50%{ box-shadow:0 -10px 42px color-mix(in srgb,var(--form-oben) 40%,transparent),
                  0 14px 46px color-mix(in srgb,var(--form-unten) 30%,transparent); }
}
/* Ruhiger (Emma: „Effekt zu stark, die Linie dauerhaft deutlicher, die
   Bewegung nur leicht“): der Rahmen selbst traegt die Linie, der
   Lichtpunkt laeuft langsamer und deutlich schwaecher darueber. */
.formular::after{ opacity:.6; animation-duration:9s; }
.formular::before{ opacity:.32; animation-duration:9s; }
.formular a{ color:var(--weiss); }
.datei{ border-color:rgba(157,140,255,.5); }
.datei:hover,.datei:focus-within,.datei--drueber{ border-color:var(--violett-hell); background:rgba(128,117,217,.07); }
.datei .sym{ color:var(--lila-text); background:rgba(128,117,217,.16); }
.datei__name{ color:var(--lila-text); }
/* Einwilligung: Raster statt Flexreihe. Kaestchen links, Text rechts, der
   Fehlerhinweis darunter in der Textspalte — der Text wird nie schmal. */
.feld--wahl{ display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:12px; align-items:start; }
.feld--wahl>label{ grid-column:2; }
.feld--wahl .feld__fehler,.feld--wahl .feld__fehler[data-js]{ grid-column:2; margin:8px 0 0; }

/* 64–68, 73 Karussell: Fortschrittsbalken fuer die Endlos-Schleife. Zwei
   Balken (der zweite legt karussell.js an): laeuft einer rechts hinaus,
   kommt der andere links herein. */
.karussell__fortschritt{ position:relative; }
.karussell__fortschritt span{ position:absolute; top:0; left:0; height:100%; transform:none; transition:none; }

/* 66 Video-Buehne: kein Zoom beim Hover auf das Hauptvideo. */
.buehne__flaeche .klickvideo a:hover img{ transform:none; }

/* 69 Glas-Kennzahlen: Flaeche viel transparenter. */
.glas-zahl{ background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),rgba(18,15,30,.08); }

/* 70 Spotlight: Glaskarten dicht an ihren Punkten, innerhalb des Bildes. */
.spotlight__karte--1{ right:14%; top:73%; bottom:auto; left:auto; }
.spotlight__karte--2{ left:50%; top:13%; right:auto; bottom:auto; }
.spotlight__karte--3{ left:4%; top:77%; right:auto; bottom:auto; }

/* 73 Angebots-Karussell: Pfeile wie bei 64; Hover-Lichtband gelb. */
.angebot-karte{ --lb:var(--lb-gelb); }

@media (max-width:860px){
  .schritte-quer li[aria-current]:not(:last-child)::after{
    background:linear-gradient(180deg,rgba(255,247,0,.28) 0%,#FFF700 18%,rgba(255,252,190,1) 25%,#FFF700 32%,rgba(255,247,0,.28) 50%,
      #FFF700 68%,rgba(255,252,190,1) 75%,#FFF700 82%,rgba(255,247,0,.28) 100%) 0 0/100% 200%; }
  .tag__name{ font-size:28px; }
  .spotlight__karte--1,.spotlight__karte--2,.spotlight__karte--3{ left:auto; right:auto; top:auto; bottom:auto; }
  .ergebnis__pfeil svg{ width:90px; height:56px; }
  .ergebnis__pfeil .hand{ font-size:24px; }
}

/* ══ Mobil (13.09.2026, Aufnahme 390 und 360 px) ═════════════════════════ */
@media (max-width:860px){
  /* 13: .el setzte den Innenabstand oben zurueck — der Text lag auf Emmas
     Gesicht. Das Foto braucht oben seinen Platz. */
  .el.band--person{ padding-top:92vw; }
  /* 64, 65, 73: die Pfeile lagen ueber der Ueberschrift. Auf dem Telefon
     stehen sie unter ihr, rechts. */
  .karussell{ margin-top:0; }
  .karussell__pfeile{ position:static; margin:0 0 14px auto; }
}
@media (max-width:560px){
  /* 20: Text und Pfeil stehen unter dem Knopf; der Pfeil ist gespiegelt und
     zeigt nach oben auf den Knopf. */
  .demo-zeile{ gap:8px; }
  .notiz-hand{ margin-left:26px; }
  .notiz-hand svg{ transform:translateY(-4px) scaleY(-1); }
  /* 21: Foto ueber dem Text, damit der Text die volle Breite hat. */
  .notiz-emma{ flex-direction:column; align-items:flex-start; gap:14px; }
  .notiz-emma img{ width:72px; height:72px; }
  /* 22: Unterschrift auf einer Zeile. */
  .brief__gruss .hand{ font-size:38px; white-space:nowrap; }
  /* 33: „Passt nicht, wenn …“ passt neben das Symbol. */
  .pro-contra h3{ padding-right:66px; font-size:26px; }
  /* 54: Pfeil und Beschriftung passen in die Karte. */
  .ergebnis__pfeil svg{ width:64px; height:44px; margin-top:18px; }
  .ergebnis__pfeil .hand{ font-size:19px; white-space:normal; }
}

/* ══ Beschreibung unter Nummer und Name (13.09.2026) ══════════════════════
   Aus bausteine/elemente-katalog.js: Zweck, Einsetzen wenn, Nicht
   verwenden, Position, Häufigkeit, Passt zu. Gedacht fuer KI und Menschen,
   die Seiten aus den Elementen bauen. Nur auf /elemente. */
/* Popover statt dauerhaft sichtbarer Box (Emma, 13.09.2026: „ausgeblendet,
   beim Hover über die Nummer erscheinen“). Die Marke ist ein Knopf mit
   i-Symbol; die Glaskarte erscheint darunter bei Hover, Tastaturfokus oder
   Antippen (effects/elemente.js). „Alle Beschreibungen einblenden“ in der
   Übersicht klappt alle auf einmal auf (reines CSS über :has). */
.el-kopf{ position:relative; z-index:30; width:fit-content; max-width:100%; margin:0 0 30px; }
.el-kopf .el-nr{ margin:0; font-family:var(--text); font-size:13px; font-weight:500; line-height:1.3; cursor:pointer;
  scroll-margin-top:calc(var(--kopfhoehe) + 24px); transition:border-color .2s,box-shadow .2s,background .2s; }
.el-nr__i{ display:grid; place-items:center; width:18px; height:18px; margin-left:2px; color:var(--lila-text); opacity:.65;
  transition:opacity .2s; }
.el-nr__i svg{ width:16px; height:16px; }
.el-kopf:hover .el-nr,.el-kopf--offen .el-nr,.el-kopf .el-nr:focus-visible{ border-color:var(--violett-hell);
  background:rgba(128,117,217,.2); box-shadow:0 0 22px rgba(128,117,217,.35); outline:none; }
.el-kopf:hover .el-nr__i,.el-kopf--offen .el-nr__i,.el-kopf .el-nr:focus-visible .el-nr__i{ opacity:1; }
.el-kopf + *:not(.nur-vorlesen),.el-kopf + .nur-vorlesen + *{ margin-top:0; }
.el-kopf + h2{ margin-bottom:.4em; }
.el-kopf + .laufband{ margin-top:0; }

.el-info{ position:absolute; left:0; top:calc(100% + 12px); width:min(640px,calc(100vw - 40px)); margin:0;
  display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 18px; padding:16px 18px; border-radius:16px;
  font-size:13px; line-height:1.5; color:rgba(255,255,255,.84); text-align:left;
  background:rgba(14,11,26,.95); border:1px solid rgba(157,140,255,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(128,117,217,.18);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .2s,transform .2s,visibility 0s linear .2s; }
/* Spitze zur Marke und eine unsichtbare Bruecke ueber den Abstand, damit
   die Karte beim Hinueberfahren nicht zuklappt. */
.el-info::before{ content:""; position:absolute; left:24px; top:-6px; width:11px; height:11px; rotate:45deg;
  background:rgba(14,11,26,.95); border-left:1px solid rgba(157,140,255,.4); border-top:1px solid rgba(157,140,255,.4); }
.el-info::after{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.el-kopf:hover .el-info,.el-kopf:focus-within .el-info,.el-kopf--offen .el-info{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .2s,transform .2s,visibility 0s; }
.el-info>div{ display:contents; }
.el-info dt{ font-weight:600; color:var(--lila-text); white-space:nowrap; }
.el-info dd{ margin:0; }

/* Alle auf einmal einblenden. */
.el-alle{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--text-leise); cursor:pointer; }
.el-alle input{ width:18px; height:18px; margin:0; accent-color:var(--violett); cursor:pointer; }
body:has(.el-alle input:checked) .el-kopf{ width:auto; }
body:has(.el-alle input:checked) .el-info{ position:static; width:auto; max-width:860px; margin-top:12px;
  opacity:1; visibility:visible; transform:none; pointer-events:auto; box-shadow:none; transition:none; }
body:has(.el-alle input:checked) .el-info::before,body:has(.el-alle input:checked) .el-info::after{ display:none; }

/* Hero und Band schneiden ueberstehende Inhalte ab — solange eine Karte
   offen ist, darf sie ueber den Rand hinausragen und liegt ueber dem
   naechsten Abschnitt. */
:is(.hero,.band,.abschnitt):has(.el-kopf:hover,.el-kopf:focus-within,.el-kopf--offen){ overflow:visible; z-index:40; }
.band--person>.huelle>.el-kopf{ width:fit-content; margin-left:calc(100% - min(600px,48%)); }
/* Nummer ueber einer Box statt darin (gelbe CTA-Box): eigener Abschnitt,
   unten knapp, damit die Box direkt folgt. */
.el-vorspann{ padding-bottom:18px; }
.el-vorspann .el-kopf{ margin-bottom:0; }
@media (max-width:860px){ .band--person>.huelle>.el-kopf{ margin-left:0; } }
@media (max-width:560px){
  .el-info{ grid-template-columns:1fr; gap:0; padding:12px 14px; }
  .el-info dt{ margin-top:8px; }
  .el-info>div:first-child dt{ margin-top:0; }
}

/* ══ Lightbox (13.09.2026) ══ effects/lightbox.js ════════════════════════
   Videos der Karussells 64/65 und Bilder der Galerie 76 oeffnen gross.
   <dialog> im obersten Layer; der Hintergrund wird dunkel und unscharf. */
.lightbox-offen{ overflow:hidden; }
.lightbox{ padding:0; margin:0; border:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none;
  background:transparent; color:var(--weiss); overflow:hidden; }
.lightbox[open]{ display:grid; place-items:center; }
.lightbox::backdrop{ background:rgba(6,4,14,.84); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.lightbox__buehne{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:92vw; }
.lightbox__buehne--neu{ animation:lightbox-auf .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lightbox-auf{ from{ opacity:0; transform:scale(.965); } to{ opacity:1; transform:none; } }
.lightbox__video{ position:relative; width:min(1120px,90vw,calc(78vh * 16 / 9)); aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  background:#000; border:1px solid rgba(183,174,240,.45);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(128,117,217,.28); }
.lightbox__video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lightbox__bild{ display:block; max-width:90vw; max-height:78vh; width:auto; height:auto; border-radius:20px;
  border:1px solid rgba(183,174,240,.45); box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 70px rgba(128,117,217,.28); }
.lightbox__text{ text-align:center; max-width:60ch; }
.lightbox__text b{ display:block; font-family:var(--ruf); font-weight:700; font-size:26px; line-height:1.1; }
.lightbox__text span{ display:block; margin-top:4px; font-size:15px; color:rgba(255,255,255,.72); }
.lightbox__zu,.lightbox__pfeil{ position:fixed; z-index:2; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; color:var(--weiss); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:border-color .2s,color .2s,box-shadow .2s,background .2s; }
.lightbox__zu svg,.lightbox__pfeil svg{ width:24px; height:24px; }
.lightbox__zu:hover,.lightbox__pfeil:hover,.lightbox__zu:focus-visible,.lightbox__pfeil:focus-visible{
  border-color:var(--gelb); color:var(--gelb); box-shadow:0 0 22px rgba(255,247,0,.25); outline:none; }
.lightbox__zu{ top:20px; right:20px; }
.lightbox__pfeil{ top:50%; translate:0 -50%; }
.lightbox__pfeil--zurueck{ left:20px; }
.lightbox__pfeil--vor{ right:20px; }
.lightbox__zaehler{ position:fixed; left:50%; bottom:22px; translate:-50% 0; margin:0; font-size:14px; letter-spacing:.08em; color:rgba(255,255,255,.6); }
.lightbox[data-einzeln] .lightbox__pfeil,.lightbox[data-einzeln] .lightbox__zaehler{ display:none; }

/* ── 68 Bild-Karussell: Karten sind Links in die Lightbox ───────────────
   Vorher <figure> mit <figcaption>; ein Link darf keine figcaption
   enthalten, deshalb .bildkarte__text mit denselben Regeln. */
a.bildkarte{ display:block; color:inherit; text-decoration:none; cursor:zoom-in; }
.bildkarte__text{ position:absolute; left:12px; right:12px; bottom:12px; padding:16px 18px; border-radius:16px;
  background:rgba(14,11,24,.42); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.bildkarte__text b{ display:block; font-family:var(--ruf); font-size:24px; line-height:1.1; }
.bildkarte__text span{ display:block; font-size:14px; color:rgba(255,255,255,.72); }
a.bildkarte:focus-visible{ outline:2px solid var(--weiss); outline-offset:3px; }

/* ── 76 Bild-Galerie mit Lightbox ─────────────────────────────────────── */
.galerie{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:220px; gap:14px; }
.galerie__bild{ position:relative; display:block; overflow:hidden; border-radius:18px; border:1px solid var(--glas-rand);
  transition:border-color .25s,box-shadow .25s; }
.galerie__bild:first-child{ grid-column:span 2; grid-row:span 2; }
.galerie__bild img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.galerie__bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);
  opacity:0; transition:opacity .25s; }
.galerie__lupe{ position:absolute; right:12px; bottom:12px; z-index:1; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:var(--weiss); background:rgba(14,11,24,.5); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s,color .2s,border-color .2s; }
.galerie__lupe .sym{ width:18px; height:18px; }
.galerie__bild:hover,.galerie__bild:focus-visible{ border-color:rgba(183,174,240,.75); box-shadow:0 0 34px rgba(128,117,217,.32); outline:none; }
.galerie__bild:hover::after,.galerie__bild:focus-visible::after{ opacity:1; }
.galerie__bild:hover .galerie__lupe,.galerie__bild:focus-visible .galerie__lupe{ background:var(--gelb); color:var(--schwarz); border-color:var(--gelb); }

@media (max-width:860px){
  .galerie{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:150px; gap:10px; }
  /* Telefon: Pfeile und Zaehler unten, damit sie nicht auf dem Bild liegen. */
  .lightbox__pfeil{ top:auto; bottom:18px; translate:none; width:48px; height:48px; }
  .lightbox__zu{ top:14px; right:14px; width:48px; height:48px; }
  .lightbox__zaehler{ bottom:34px; }
  .lightbox__video{ width:94vw; border-radius:14px; }
  .lightbox__bild{ max-width:94vw; max-height:70vh; border-radius:14px; }
  .lightbox__text b{ font-size:22px; }
}