/* ============================================================================
   FRANZ HEINRICH — Design-System
   Runde 10 · 23.10.2026 · Lechcode — nach Franz' Feedback + Struktur-Dokument

   FARBEN + SCHRIFT: Franz' Brand Kit
     Navy #023047 · Warm Orange #E96A2C · Cream #F7F1E6
     Warm Sand #D9C7B5 · Soft Blue #8ECAE6
     Headline DM Serif Display · Body Manrope

   HALTUNG DIESER FASSUNG (Franz 23.10.: „die Version, wo nicht alles so viel
     blau ist, doch geiler"; Michael: Creme als Basis, Navy dazwischen).
     · CREME IST DER STANDARD. Jede Fläche setzt ein paar Token (--bg, --fg …),
       alle Bausteine lesen nur diese Token: eine Sektion umfärben = eine
       Klasse tauschen.
         (ohne)  Cream         .nacht Navy        .tief  Zweit-Navy
         .hell   Cream         .glut  Orange
     · SOFT BLUE IST NIE FLÄCHE (Michael, 01.10.): nur Akzent — Eyebrows,
       Namenszeilen, Etiketten, der „Hör rein"-Satz. Grundfarben sind Navy,
       Orange, Weiß (Cream); helle Flächen sind Cream, nie Hellblau.
     · Wenig Text, viel Bild, Stimmen und Kostenloses immer wieder dazwischen
       (Vorbild thewellpaidpriestess.com).
     · Alles zentriert auf der Mittelachse (bleibt aus Runde 5).

   KONTRAST-REGEL (beim Weiterbauen beachten):
   Orange erreicht auf Navy 4,4:1, auf dem Zweit-Navy (.tief) nur 3,8:1, auf Cream 2,8:1.
   (Soft Blue ist keine Fläche mehr — siehe oben.)
   Orange ist FLÄCHE, LINIE und GROSSE SCHRIFT (≥ 24 px) — nie kleiner Text.
   Auf Orange (.glut) steht nur Navy in großer Schrift (≥ 19 px fett / 24 px).
   Kleiner Text: Cream/Sand/Soft-Blue auf Navy, Navy auf Cream und auf Soft-Blue-Etiketten.
   ========================================================================== */

/* ---- 1 · Token --------------------------------------------------------- */
:root{
  --navy:#023047;
  --orange:#e96a2c;
  --cream:#f7f1e6;
  --sand:#d9c7b5;
  --sky:#8ecae6;

  --navy-2:#04395a;
  --navy-3:#0a4a6e;
  --cream-2:#efe6d6;
  --orange-deep:#b84a12;
  --orange-hell:#f2884f;

  /* Flächen-Token — Standard ist Creme */
  --bg:var(--cream);
  --fg:var(--navy);
  --fg-soft:#3d5a6c;
  --fg-faint:#486371;
  --line:rgba(2,48,71,.16);
  --akzent:var(--orange-deep);
  --karte:var(--cream-2);
  --fokus:var(--navy);

  --display:"DM Serif Display","DM Serif Fallback",Georgia,serif;
  --body:"Manrope","Manrope Fallback",-apple-system,"Segoe UI",Arial,sans-serif;

  --ease:cubic-bezier(.22,.75,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:72px;
  --radius:10px;

  /* Typo-Skala, Handy zuerst (Leerzeichen um + und - sind Pflicht) */
  --t--2:clamp(11px, .15vw + 10.5px, 12.5px);
  --t--1:clamp(13.5px, .25vw + 12.6px, 15px);
  --t-0:clamp(16.5px, .35vw + 15.3px, 18px);
  --t-1:clamp(19px, .8vw + 16.3px, 23px);
  --t-2:clamp(23px, 1.3vw + 18.8px, 31px);
  --t-3:clamp(28px, 2.4vw + 20.4px, 44px);
  --t-4:clamp(34px, 4.6vw + 19.8px, 68px);
  --t-5:clamp(42px, 7.2vw + 17.6px, 104px);

  --sp-1:clamp(14px, 1.3vw + 10px, 22px);
  --sp-2:clamp(24px, 2.4vw + 16px, 40px);
  --sp-3:clamp(40px, 4.4vw + 26px, 76px);
  --sp-4:clamp(64px, 7.6vw + 40px, 132px);
}

/* Die Flächen. Jede setzt nur Token — und malt sich selbst. */
.nacht,.tief{--bg:var(--navy);--fg:var(--cream);--fg-soft:var(--sand);--fg-faint:var(--sky);
  --line:rgba(247,241,230,.22);--akzent:var(--orange);--karte:var(--navy-2);--fokus:var(--orange)}
.tief{--bg:var(--navy-2);--karte:var(--navy)}
/* Warm Sand aus dem Brand Kit — helle Alternative zu Navy für Stimmen-Bänder */
.sand{--bg:var(--sand);--fg:var(--navy);--fg-soft:#20425a;--fg-faint:#34505f;
  --line:rgba(2,48,71,.2);--akzent:var(--orange-deep);--karte:var(--cream);--fokus:var(--navy)}
.sand{background:var(--bg);color:var(--fg)}
.hell,.legal{--bg:var(--cream);--fg:var(--navy);--fg-soft:#3d5a6c;--fg-faint:#486371;
  --line:rgba(2,48,71,.16);--akzent:var(--orange-deep);--karte:var(--cream-2);--fokus:var(--navy)}
.glut{--bg:var(--orange);--fg:var(--navy);--fg-soft:var(--navy);--fg-faint:var(--navy);
  --line:rgba(2,48,71,.35);--akzent:var(--navy);--karte:rgba(247,241,230,.3);--fokus:var(--navy)}
.tief,.nacht,.hell,.legal,.glut{background:var(--bg);color:var(--fg)}

/* ---- 2 · Basis --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--body);font-size:var(--t-0);font-weight:400;line-height:1.65;
  color:var(--fg);background:var(--cream);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
figure{margin:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:-.012em;text-wrap:balance;color:var(--fg)}
h1{font-size:var(--t-5);line-height:1}
h2{font-size:var(--t-4);line-height:1.04}
h3{font-size:var(--t-2);line-height:1.18}
h4{font-size:var(--t-1);line-height:1.24}
em,i{font-style:italic}
strong,b{font-weight:700}
h1 em,h2 em,h3 em{color:var(--akzent);font-style:italic}

a{color:inherit;text-decoration-color:var(--akzent);text-underline-offset:.2em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:3px}
::selection{background:var(--orange);color:var(--navy)}

/* ---- 3 · Mittelachse --------------------------------------------------- */
.wrap{width:min(1180px, 100% - clamp(28px, 6vw, 108px));margin-inline:auto}
.wrap-narrow{width:min(44rem, 100% - clamp(28px, 6vw, 108px));margin-inline:auto}
.section{padding-block:var(--sp-4);text-align:center}
.section-tight{padding-block:var(--sp-3);text-align:center}
/* :where() = Spezifität 0 — Bausteine können linksbündig setzen, ohne gegen diese Regel anzukämpfen */
:where(.section,.section-tight) :where(p,li){text-align:center}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--orange);color:var(--navy);padding:14px 22px;font-weight:700}
.skip:focus{left:0}

/* ---- 4 · Sektions-Kopf (zentriert) ------------------------------------- */
.head{margin-bottom:var(--sp-3)}
.head h2{margin-inline:auto;max-width:18ch}
.head .lead{margin:var(--sp-2) auto 0}

.eyebrow{
  display:block;margin:0 auto var(--sp-1);
  font-size:var(--t--2);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-faint);
}
.eyebrow::before{content:"";display:block;width:8px;height:8px;background:var(--akzent);
  transform:rotate(45deg);margin:0 auto .95em;border-radius:1px}

.lead{font-size:var(--t-1);line-height:1.55;color:var(--fg-soft);max-width:36rem;margin-inline:auto}
.muted{color:var(--fg-soft)}
.small{font-size:var(--t--1);line-height:1.65}

/* ---- 5 · Buttons & Links ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--body);font-weight:700;
  padding:.95em 1.7em;border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;line-height:1.2;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
/* Orange = der eine wichtige Knopf. Navy-Schrift, mindestens 19 px fett. */
.btn-orange{background:var(--orange);color:var(--navy);font-size:clamp(19px,.4vw + 18px,21px);padding:.85em 1.6em;box-shadow:0 10px 26px -12px rgba(233,106,44,.8)}
.btn-orange:hover{background:var(--orange-hell)}
.glut .btn-orange,.btn-navy{background:var(--navy);color:var(--cream);box-shadow:none}
.glut .btn-orange:hover,.btn-navy:hover{background:var(--navy-3)}
.btn-navy{font-size:var(--t--1);letter-spacing:.04em}
.btn-line{border-color:var(--line);color:var(--fg);font-size:var(--t--1);letter-spacing:.04em}
.btn-line:hover{border-color:var(--fg)}
/* Pfeil steht VOR dem Text (Franz 28.10.: „der sollte davor sein“) */
.btn-arrow::before{content:"→";font-size:1.05em;line-height:1;transition:transform .22s var(--ease)}
.btn-arrow:hover::before{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:center;align-items:center;margin-top:var(--sp-2)}
@media (max-width:560px){.btn-row .btn{width:100%;max-width:22rem}}

/* Kapitälchen-Link mit Pfeil + Haarlinie */
.tlink{
  display:inline-flex;flex-direction:column;align-items:center;gap:.55em;
  font-size:var(--t--2);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;
}
.tlink::after{content:"";width:100%;height:1px;background:currentColor;opacity:.55;transition:opacity .2s var(--ease)}
.tlink span{transition:transform .22s var(--ease);display:inline-block;margin-left:.3em}
.tlink:hover span{transform:translateX(4px)}
.tlink:hover::after{opacity:1}
.tlink b{display:inline-flex;align-items:center;gap:.5em;font-weight:inherit}

.chip{
  display:inline-block;font-size:var(--t--2);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.5em .9em;border:2px solid var(--line);border-radius:999px;
  color:var(--fg-soft);
}
.chip-hot{border-color:var(--akzent);color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-2)}

/* ---- 6 · Auftauchen ---------------------------------------------------- */
.js .rv,.js .rise{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.js .rv.in,.js .rise.in{opacity:1;transform:none}
.js .rv-img,.js .rise-img{opacity:0;transform:scale(1.035);transition:opacity 1s var(--ease-out),transform 1.4s var(--ease-out);transition-delay:var(--d,0s)}
.js .rv-img.in,.js .rise-img.in{opacity:1;transform:none}
.js .d1{transition-delay:.1s}.js .d2{transition-delay:.2s}.js .d3{transition-delay:.3s}
.js .in-up{opacity:0;transform:translateY(18px);animation:up .9s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-img,.js .rise,.js .rise-img{opacity:1;transform:none;transition:none}
  .js .in-up{opacity:1;transform:none;animation:none}
}
/* Foto-Modus (?foto) für Screenshots: alles sofort sichtbar */
.js.foto .rv,.js.foto .rv-img,.js.foto .rise,.js.foto .rise-img{opacity:1;transform:none;transition:none}
.js.foto .in-up{opacity:1;transform:none;animation:none}

/* ---- 7 · Masthead: Menü | NAME | Menü — Navy von Anfang an (Franz 28.10.), Call-Knopf Orange ---- */
.nav{
  position:sticky;top:0;z-index:100;
  --fg:var(--cream);--fg-faint:var(--sky);--line:rgba(247,241,230,.18);--fokus:var(--orange);
  background:rgba(2,48,71,.97);backdrop-filter:blur(12px);color:var(--fg);
  border-bottom:1px solid var(--line);
  padding-block:12px;
}
.nav .wrap{width:min(1400px, 100% - clamp(28px,6vw,108px))}
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.mh-side{display:flex;align-items:center;gap:14px}
.mh-side-l{justify-content:flex-end}
.mh-side-r{justify-content:flex-start}
.mh-side-l .lang{margin-right:auto}
.mh-left,.mh-right{display:flex;align-items:center;gap:14px;list-style:none}
.navlink{
  font-family:var(--body);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--fg);white-space:nowrap;opacity:.86;transition:opacity .2s var(--ease);
}
.navlink:hover,.navlink[aria-current="page"]{opacity:1}
a.navlink[aria-current="page"]{border-bottom:2px solid var(--orange);padding-bottom:3px}
.brand{display:flex;flex-direction:column;align-items:center;gap:.3em;text-decoration:none;color:var(--fg)}
.brand .mark{width:34px;height:34px;flex:none}
.brand .name{font-family:var(--display);font-size:var(--t-1);letter-spacing:.01em;line-height:1;white-space:nowrap}
.brand .rolle{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint);line-height:1}
.mh-cta{white-space:nowrap;font-size:19px;padding:.55em 1.1em;box-shadow:none}

.lang{font-family:var(--body);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;background:none;
  border:1.5px solid currentColor;border-radius:999px;padding:.4em .75em;color:var(--fg);cursor:pointer;opacity:.86;line-height:1}
.lang:hover{opacity:1}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:var(--fg);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-1);
  padding:var(--sp-4) clamp(28px,8vw,60px);text-align:center;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu a{font-family:var(--display);font-size:var(--t-3);text-decoration:none;color:var(--cream)}
.mobile-menu a:hover{color:var(--sky)}
.mobile-menu .btn{font-family:var(--body);margin-top:var(--sp-2);color:var(--navy)}

@media (max-width:1180px){
  .mh-left,.mh-right,.mh-cta{display:none}
  .burger{display:block}
  .brand{flex-direction:row;gap:.55em}
  .brand .rolle{display:none}
}
/* Desktop: ein einziger Abstandswert zwischen allen Punkten (Michael 01.10.),
   kein FH-Zeichen im Kopf (Michael 16.09.), Marke exakt mittig durch 1fr auto 1fr. */
@media (min-width:1181px){
  .nav .wrap{width:min(1800px, 100% - clamp(24px,3vw,56px))}
  .masthead,.mh-side,.mh-left,.mh-right{gap:clamp(26px,4.2vw,88px)}
  .mh-side-l .lang{margin-right:0}
  .masthead .brand .mark{display:none}
}

/* Schlanker Kopf für Rechts- und Nebenseiten */
.nav-simple{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.nav-simple .brand{flex-direction:row;align-items:center;gap:.6em}
.nav-simple .brand .rolle{display:none}

/* ---- 8 · Kopf: Bild mit weißem Zitat, darunter Name + Titel ------------
   Später tritt ein Video an die Stelle des Bildes (Markup in index.html).
   Zitat nie über dem Gesicht: Desktop links über den dunklen Fensterläden,
   Handy unten mit Verlauf zum Bildrand. */
.kopf{text-align:center;padding-bottom:var(--sp-3)}
.kopf-bild{position:relative;overflow:hidden;background:var(--navy-2)}
.kopf-bild img,.kopf-bild video{display:block;width:100%;height:auto;object-fit:cover;object-position:50% 30%}
.kopf-bild::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,48,71,0) 38%,rgba(2,48,71,.45) 62%,rgba(2,48,71,.9) 100%)}
.kopf-zitat{position:absolute;z-index:1;left:18px;right:18px;bottom:18px;text-align:left}
.kopf-zitat h1{margin:0;font-size:clamp(21px,5.6vw,26px);line-height:1.22;color:#fff;text-align:left;text-wrap:pretty;
  text-shadow:0 2px 14px rgba(2,20,30,.55)}
.kopf-zitat h1 em{color:var(--orange)}
@media (max-width:899px){.kopf-bild img{aspect-ratio:1}}
@media (min-width:900px){
  .kopf{padding-top:var(--sp-1)}
  .kopf-bild{width:min(1180px, 100% - clamp(28px,6vw,108px));margin-inline:auto;border-radius:var(--radius)}
  .kopf-bild img{aspect-ratio:2/1}
  .kopf-bild::after{background:linear-gradient(100deg,rgba(2,48,71,.78) 0%,rgba(2,48,71,.5) 28%,rgba(2,48,71,0) 52%)}
  .kopf-zitat{left:clamp(24px,3.4vw,52px);right:auto;bottom:auto;top:clamp(24px,3.4vw,52px);width:min(34%,26rem)}
  .kopf-zitat h1{font-size:clamp(22px,1.35vw + 12px,34px);line-height:1.18}
}
.kopf-text{width:min(46rem, 100% - clamp(28px,6vw,80px));margin:var(--sp-2) auto 0}
.kopf-name{font-family:var(--display);font-size:var(--t-2);line-height:1.1}
.kopf-rolle{margin-top:.55em;font-size:var(--t--2);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)}
.kopf .tlink{margin-top:var(--sp-2)}

/* ---- 9 · Kennst du das? (eine Idee, ein Bildschirm) -------------------- */
.statement h2{max-width:16ch;margin-inline:auto}
.statement .lead{margin-top:var(--sp-2)}
.saetze{list-style:none;display:grid;gap:var(--sp-1);margin:var(--sp-3) auto 0;max-width:34rem}
.saetze li{font-family:var(--display);font-size:var(--t-1);line-height:1.35;color:var(--fg-soft)}
.saetze li::before{content:"";display:block;width:26px;height:2px;background:var(--akzent);margin:0 auto .9em;opacity:.85}
.saetze li:first-child::before{display:none}
.dreh{margin:var(--sp-3) auto 0;max-width:30rem;font-size:var(--t-0);line-height:1.6;
  border-top:2px solid var(--akzent);padding-top:var(--sp-2)}

/* ---- 10 · Dein Weg: die Session groß, danach zwei Türen ---------------- */
.weg-start{display:grid;gap:var(--sp-2);align-items:center;max-width:64rem;margin-inline:auto}
.weg-start .fig{overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5;background:var(--karte)}
.weg-start .fig img{width:100%;height:100%;object-fit:cover}
.weg-nr{display:block;font-family:var(--display);font-size:clamp(48px,6vw,88px);line-height:.9;color:var(--akzent)}
.weg-start h3{font-size:var(--t-3);margin-top:.2em}
.weg-start p{margin:var(--sp-1) auto 0;max-width:28rem;color:var(--fg-soft)}
.weg-start .chips{margin-top:var(--sp-1)}
@media (min-width:900px){
  .weg-start{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px)}
  .weg-start .fig{max-width:460px;justify-self:end}
  .weg-start .txt,.weg-start .txt p{text-align:left}
  .weg-start p{margin-inline:0}
  .weg-start .chips,.weg-start .btn-row{justify-content:flex-start}
}

.weg-danach{margin:var(--sp-3) auto 0;max-width:64rem}
.weg-danach > .label{display:flex;align-items:center;gap:1em;justify-content:center;margin-bottom:var(--sp-2);
  font-size:var(--t--2);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)}
.weg-danach > .label::before,.weg-danach > .label::after{content:"";height:1px;flex:1;max-width:120px;background:var(--line)}
.tueren{display:grid;gap:var(--sp-1)}
@media (min-width:720px){.tueren{grid-template-columns:1fr 1fr;gap:var(--sp-2)}}
.tuer{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-1);align-items:center;text-align:left;
  background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-1)}
.tuer img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2.5px solid var(--orange)}
.tuer .nr{font-family:var(--display);font-size:26px;color:var(--akzent);line-height:1}
.tuer h3{font-size:var(--t-1);margin:.15em 0 .3em}
.tuer p{font-size:var(--t--1);line-height:1.5;color:var(--fg-soft);text-align:left}

/* ---- 11 · Stimmen: drei Erscheinungsformen ----------------------------- */
/* a) schlichte Stimme auf der Fläche (auch .glut = Orange-Band) */
.stimme{padding-block:var(--sp-3);text-align:center}
.stimme blockquote{width:min(44rem, 100% - clamp(28px,6vw,80px));margin-inline:auto}
.stimme p.zitat{font-family:var(--display);font-size:var(--t-3);line-height:1.18;text-align:center}
.stimme footer{margin-top:var(--sp-2);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.stimme footer::before{content:"— "}
/* auf Orange: Zuschreibung groß und fett, sonst reicht der Kontrast nicht */
.glut.stimme footer{font-size:19px;letter-spacing:.02em;text-transform:none;font-weight:800}
/* b) Stimme auf ruhigem Bild mit Navy-Schleier */
.stimme.bild{position:relative;isolation:isolate;overflow:hidden;--fg:var(--cream);--fg-faint:var(--sky);--akzent:var(--orange);color:var(--cream);
  min-height:min(64svh,620px);display:grid;place-items:center;padding-block:var(--sp-4)}
.stimme.bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.stimme.bild::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,48,71,.8),rgba(2,48,71,.72))}
/* c) zwei Stimmen nebeneinander */
.stimmen{display:grid;gap:var(--sp-2);max-width:60rem;margin-inline:auto}
@media (min-width:820px){.stimmen{grid-template-columns:1fr 1fr}}
.stimmen blockquote{background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-2);text-align:left}
.stimmen p{font-family:var(--display);font-size:var(--t-1);line-height:1.3;text-align:left}
.stimmen footer{margin-top:var(--sp-1);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.stimmen footer::before{content:"— "}

/* ---- 12 · Über mich: zwei Bilder, wenig Text --------------------------- */
.about-pics{display:grid;grid-template-columns:1.25fr .85fr;align-items:end;gap:12px;max-width:52rem;margin:0 auto var(--sp-3)}
.about-pics img{width:100%;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}
.about-pics figure{position:relative}
.about-pics figcaption{position:absolute;left:12px;bottom:12px;font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);background:rgba(2,48,71,.78);padding:.5em .8em;border-radius:6px}
.about h2{max-width:16ch;margin-inline:auto}
.about .lead{margin-top:var(--sp-2)}
.about .tlink{margin-top:var(--sp-2)}

/* ---- 13 · Video-Bühne + Lightbox --------------------------------------- */
.videostage{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--navy-2);aspect-ratio:16/9}
.videostage > img{width:100%;height:100%;object-fit:cover;opacity:.92}
.videostage video{width:100%;height:100%;object-fit:cover}
.video-play{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(2,48,71,.12),rgba(2,48,71,.6));
  color:var(--cream);font-family:var(--body);
}
.video-play .disc{width:72px;height:72px;border-radius:50%;background:var(--orange);color:var(--navy);
  display:grid;place-items:center;transition:transform .3s var(--ease),background .3s var(--ease);
  box-shadow:0 12px 34px -10px rgba(2,48,71,.7)}
.video-play .disc svg{margin-left:4px}
.video-play:hover .disc{transform:scale(1.07);background:var(--orange-hell)}
.video-play .cap{position:absolute;left:0;right:0;bottom:0;background:rgba(2,48,71,.9);color:var(--cream);
  font-size:var(--t--1);font-weight:700;text-align:center;padding:.8em 1.2em}
.vt-wrap{max-width:46rem;margin-inline:auto}
.vt-wrap footer{margin-top:var(--sp-1);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(2,20,30,.95);display:none;align-items:center;justify-content:center;padding:var(--sp-2)}
.lightbox.on{display:flex}
.lightbox-inner{width:min(980px,100%);position:relative}
.lightbox video{width:100%;background:#000;border-radius:var(--radius)}
.lightbox-x{position:absolute;top:-46px;right:0;background:none;border:0;color:var(--cream);font-size:30px;line-height:1;cursor:pointer}
.lightbox-note{background:var(--navy);border:2px solid var(--line);border-radius:var(--radius);padding:var(--sp-2);text-align:center;color:var(--sand)}
.lightbox-note strong{color:var(--cream)}

/* ---- 14 · Kostenloses: Karten + die schmale „Hör rein"-Zeile ----------- */
.gaben{display:grid;gap:var(--sp-1);max-width:64rem;margin-inline:auto}
@media (min-width:680px){.gaben{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.gaben{grid-template-columns:repeat(3,1fr)}}
.gabe{position:relative;display:flex;flex-direction:column;gap:.5em;text-align:left;text-decoration:none;color:var(--fg);
  background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-2) var(--sp-1);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
a.gabe:hover{transform:translateY(-4px);border-color:var(--akzent)}
.gabe .tag{font-size:var(--t--2);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)}
.gabe h3{font-size:var(--t-1)}
.gabe p{font-size:var(--t--1);line-height:1.55;color:var(--fg-soft);text-align:left}
.gabe .go{margin-top:auto;padding-top:.6em;font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.gabe.bald{border-style:dashed}
.gabe .preis{font-family:var(--display);font-size:var(--t-2);line-height:1;color:var(--akzent)}
/* Auf Creme trägt das Etikett Soft Blue als kleines Feld — Hellblau nur als Akzent (Navy darauf 8,7:1) */
.gabe .tag{align-self:flex-start;background:var(--sky);color:var(--navy);padding:.4em .75em;border-radius:4px;line-height:1.2}

/* schmale Zeile zwischen Sektionen: ein Satz, ein Link — das Kostenlose „immer wieder".
   Steht auf Navy (.tief); der Satz in Soft Blue als Akzent. */
.hoer{padding-block:var(--sp-2);text-align:center}
.hoer p{display:inline;font-family:var(--display);font-size:var(--t-1);line-height:1.3;color:var(--fg-faint)}
.hoer .tlink{margin:.8em 0 0 0;display:flex;width:max-content;margin-inline:auto}
@media (min-width:820px){
  .hoer .wrap{display:flex;align-items:baseline;justify-content:center;gap:1.4em;flex-wrap:wrap}
  .hoer .tlink{margin:0}
}

/* ---- 15 · Formular + Kontakt ------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-1);text-align:left;margin-inline:auto;max-width:40rem}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4em}
.field.full{grid-column:1 / -1}
.field label{font-size:var(--t--2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);text-align:left}
.field input,.field textarea{font-family:var(--body);font-size:var(--t-0);color:var(--navy);
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:.8em 1em;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--orange);outline:none}
.form-note{font-size:var(--t--1);color:var(--fg-soft);text-align:center}
.form-hint{border:2px dashed var(--akzent);border-radius:var(--radius);padding:var(--sp-1);font-size:var(--t--1);margin:0 auto var(--sp-2);max-width:40rem}
details.formbox summary{list-style:none;cursor:pointer}
details.formbox summary::-webkit-details-marker{display:none}
details.formbox[open] summary .tlink{opacity:.5}
details.formbox .inner{margin-top:var(--sp-3)}

/* ---- 16 · Footer ------------------------------------------------------- */
.footer{background:var(--navy);color:var(--cream);padding-block:var(--sp-3) var(--sp-2);text-align:center;border-top:1px solid var(--line);
  --fg:var(--cream);--fg-soft:var(--sand);--fg-faint:var(--sky);--line:rgba(247,241,230,.22);--akzent:var(--orange)}
.footer .brand{margin:0 auto var(--sp-1)}
.footer .small{color:var(--fg-soft);margin-inline:auto;max-width:34rem;text-align:center}
.footer-nav{list-style:none;display:flex;flex-wrap:wrap;gap:.7em 1.4em;justify-content:center;margin-top:var(--sp-2)}
.footer-nav a{font-size:var(--t--2);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);text-decoration:none}
.footer-nav a:hover{color:var(--cream)}
.footer-bottom{margin-top:var(--sp-3);padding-top:var(--sp-1);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6em 1.4em;justify-content:center;font-size:var(--t--2);color:var(--fg-soft)}
.footer-bottom a{font-size:inherit;color:var(--cream)}

/* ---- 17 · Rechtstexte (helle Fläche, lange Lesetexte) ------------------ */
.legal{padding-block:var(--sp-4)}
.legal h1{font-size:var(--t-4);margin-bottom:var(--sp-2)}
.legal h2{font-size:var(--t-2);margin-top:var(--sp-3);margin-bottom:var(--sp-1)}
.legal h3{font-size:var(--t-1);margin-top:var(--sp-2);margin-bottom:.5em}
.legal p,.legal li{color:var(--fg-soft);font-size:var(--t--1);line-height:1.75}
.legal p + p{margin-top:.9em}
.legal ul{margin:.9em 0 0 1.2em;display:grid;gap:.5em}
.legal code{background:var(--cream-2);padding:.1em .35em;border-radius:3px}
.legal .eyebrow{margin-inline:0}
.legal .eyebrow::before{margin-inline:0}
.legal .tlink{align-items:flex-start}

/* ---- 18 · FAQ ---------------------------------------------------------- */
.faq{border-top:1px solid var(--line);text-align:left;margin-inline:auto;max-width:44rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp-1) 3rem var(--sp-1) 0;position:relative;
  font-family:var(--display);font-size:var(--t-1);line-height:1.3;text-align:left}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-family:var(--body);font-size:1.6rem;font-weight:700;color:var(--akzent)}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 3rem var(--sp-2) 0;color:var(--fg-soft);font-size:var(--t--1);line-height:1.72}
.faq .answer p{text-align:left}
.faq .answer p + p{margin-top:.8em}

/* ---- 19 · Abschluss-Band ----------------------------------------------- */
.cta-band{padding-block:var(--sp-4);text-align:center}
.cta-band h2{max-width:18ch;margin-inline:auto}
.cta-band .lead{margin-top:var(--sp-2)}
.cta-band .btn{margin-top:var(--sp-2)}
.hinweis{max-width:40rem;margin-inline:auto}

/* ---- 20 · Seiten-Kopf der Unterseiten ---------------------------------- */
.pagehead{padding-block:clamp(46px,6vw,96px) var(--sp-3);text-align:center}
.pagehead h1{font-size:var(--t-4);max-width:18ch;margin-inline:auto}
.pagehead .lead{margin-top:var(--sp-2)}
.pagehead .btn{margin-top:var(--sp-2)}
.crumb{font-size:var(--t--2);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:var(--sp-2);display:block}
.crumb a{color:inherit;text-decoration:none}

/* ---- 21 · Bild/Text-Paar ----------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px);align-items:center;text-align:left}
.split .fig{grid-column:1 / span 6}
.split .txt{grid-column:8 / span 5}
.split.flip .fig{grid-column:7 / span 6}
.split.flip .txt{grid-column:1 / span 5}
.split .fig img{width:100%;border-radius:var(--radius)}
.split .txt p,.split .txt h2,.split .txt h3{text-align:left}
.split .txt .eyebrow{margin-inline:0;text-align:left}
.split .txt .eyebrow::before{margin-inline:0}
.split + .split{margin-top:var(--sp-4)}
@media (max-width:860px){
  .split .fig,.split .txt,.split.flip .fig,.split.flip .txt{grid-column:1 / -1}
  .split .txt{margin-top:var(--sp-1)}
}

/* ---- 22 · Session: Fakten-Leiste + Timeline + Passt das? --------------- */
.fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:52rem;margin-inline:auto}
@media (min-width:720px){.fakten{grid-template-columns:repeat(4,1fr)}}
.fakten > div{background:var(--bg);padding:var(--sp-2) var(--sp-1);display:grid;gap:.3em;justify-items:center;align-content:start}
.fakten .k{font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.fakten .v{font-family:var(--display);font-size:var(--t-2);line-height:1.1}
.fakten .s{font-size:var(--t--1);color:var(--fg-soft)}
.fakten .hot .v{color:var(--akzent);font-size:max(26px,var(--t-2))}

.tl{list-style:none;position:relative;max-width:40rem;margin-inline:auto;text-align:left;padding-left:2.4rem}
.tl::before{content:"";position:absolute;left:.62rem;top:.5em;bottom:1.2em;width:2px;background:var(--line)}
.tl li{position:relative;padding-bottom:var(--sp-2);text-align:left}
.tl li::before{content:"";position:absolute;left:-2.4rem;top:.3em;width:16px;height:16px;border-radius:50%;background:var(--orange);
  border:3px solid var(--bg);box-shadow:0 0 0 2px var(--orange)}
.tl .zeit{display:block;font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.tl b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t-1);margin:.15em 0 .3em}
.tl p{text-align:left;color:var(--fg-soft);font-size:var(--t--1);max-width:40ch}

.passt{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,4vw,56px);text-align:left;margin-inline:auto;max-width:56rem}
.passt h3{text-align:left;margin-bottom:var(--sp-1);font-size:var(--t-1)}
.passt ul{list-style:none;display:grid;gap:.7em}
.passt li{position:relative;padding-left:1.5em;font-size:var(--t-0);line-height:1.5;text-align:left}
.passt li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--akzent);border-radius:2px}
.passt .nein li::before{background:transparent;border:2px solid var(--akzent)}

/* ---- 23 · Über-mich-Seite ---------------------------------------------- */
.steckbrief{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:52rem;margin-inline:auto;text-align:left}
@media (min-width:720px){.steckbrief{grid-template-columns:repeat(3,1fr)}}
.steckbrief > div{background:var(--bg);padding:var(--sp-1)}
.steckbrief .k{display:block;font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:.3em}
.steckbrief .v{font-family:var(--display);font-size:var(--t-1);line-height:1.2}

.kapitel{display:grid;gap:var(--sp-3);max-width:60rem;margin-inline:auto}
.kapitel article{display:grid;gap:var(--sp-1);align-items:center;text-align:left}
.kapitel img{width:100%;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}
.kapitel .jahr{font-size:var(--t--2);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)}
.kapitel h3{margin:.25em 0 .5em}
.kapitel p{text-align:left;color:var(--fg-soft)}
@media (min-width:760px){
  .kapitel article{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px)}
  .kapitel article:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .kapitel article:nth-child(even) img{order:2}
}

.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,56px);margin-inline:auto;max-width:60rem;text-align:left}
.duo > div{border-top:3px solid var(--orange);padding-top:var(--sp-1)}
.duo h3{font-size:var(--t-1);margin-bottom:.6em;text-align:left}
.duo ul{list-style:none;display:grid;gap:.7em}
.duo li{position:relative;padding-left:1.5em;font-size:var(--t--1);line-height:1.6;color:var(--fg-soft);text-align:left}
.duo li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--akzent);border-radius:2px}

.liste-plain{list-style:none;max-width:40rem;margin-inline:auto;text-align:left;display:grid;gap:.6em}
.liste-plain li{position:relative;padding-left:1.5em;font-size:var(--t-0);line-height:1.55;text-align:left}
.liste-plain li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--akzent);border-radius:2px}

.zitat-split{display:grid;gap:var(--sp-2);align-items:center;max-width:62rem;margin-inline:auto}
.zitat-split img{width:100%;border-radius:var(--radius)}
.zitat-split blockquote p{font-family:var(--display);font-size:var(--t-3);line-height:1.15;text-align:center}
.zitat-split blockquote footer{margin-top:var(--sp-2);font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);text-align:center}
@media (min-width:860px){
  .zitat-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .zitat-split blockquote p,.zitat-split blockquote footer{text-align:left}
}

/* ---- 24 · Link-Hub (links.html) — Navy-Grund, Orange-Rahmen ------------ */
.linkhub{display:grid;gap:12px;max-width:30rem;margin-inline:auto}
.linkhub a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1em;align-items:center;
  background:transparent;border:2px solid var(--orange);border-radius:var(--radius);
  padding:1em 1.2em;text-decoration:none;color:var(--cream);transition:transform .2s var(--ease),background .2s var(--ease)}
.linkhub a:hover{transform:translateY(-2px);background:rgba(233,106,44,.16)}
.linkhub .lh-t{font-weight:700;font-size:var(--t-0)}
.linkhub .lh-s{display:block;font-weight:400;font-size:var(--t--1);color:var(--sand)}
.linkhub .lh-go,.linkhub .lh-ico{font-size:24px;color:var(--orange)}
.linkhub a.hot{background:var(--orange);color:var(--navy)}
.linkhub a.hot:hover{background:var(--orange-hell)}
.linkhub a.hot .lh-t{font-size:21px}
.linkhub a.hot .lh-s,.linkhub a.hot .lh-go,.linkhub a.hot .lh-ico{color:var(--navy)}
.linkhub a.hot .lh-s{font-size:19px;font-weight:700}

/* ---- 25 · Kleinkram ---------------------------------------------------- */
.mt-1{margin-top:var(--sp-1)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.center{text-align:center}
.vh{position:absolute;left:-9999px}

/* ==========================================================================
   RUNDE 10 · 23.10.2026 — Bausteine aus Franz' Struktur-Dokument
   ========================================================================== */

/* ---- 26 · Angebote 01–03: der Monat groß, 02/03 gleichwertig mit Bild ---- */
.weg-mehr{display:grid;gap:var(--sp-2);max-width:52rem;margin:var(--sp-4) auto 0}
@media (min-width:720px){.weg-mehr{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}}
.angebot{text-align:left}
.angebot .fig{overflow:hidden;border-radius:var(--radius);aspect-ratio:3/4;background:var(--karte)}
.angebot .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.angebot:hover .fig img{transform:scale(1.03)}
.angebot .nr{display:block;margin-top:var(--sp-1);font-family:var(--display);font-size:clamp(34px,3.6vw,52px);line-height:1;color:var(--akzent)}
.angebot h3{font-size:var(--t-2);margin-top:.2em}
.angebot p{margin-top:.5em;color:var(--fg-soft);text-align:left;font-size:var(--t--1);line-height:1.6;max-width:30rem}

/* ---- 27 · Stimme als Karte (Vorbild aus Franz' Dokument): Zitat groß,
   Text mit Fettungen, Name + Ort, rundes Foto. Auf Orange gilt die
   Kontrast-Regel: Fließtext Navy, 19 px, fett. ---------------------------- */
.sk-band{padding-block:var(--sp-4)}
.sk{display:grid;gap:var(--sp-2);align-items:center;max-width:62rem;margin-inline:auto;text-align:left}
.sk-foto{justify-self:center}
.sk-foto img{width:clamp(150px,22vw,250px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:4px solid var(--bg);
  box-shadow:0 0 0 2px var(--akzent)}
.sk blockquote > .zitat{font-family:var(--display);font-style:italic;font-size:var(--t-3);line-height:1.15;text-align:left}
.sk blockquote .text{margin-top:var(--sp-2);display:grid;gap:.8em}
.sk blockquote .text p{text-align:left;font-size:var(--t-0);line-height:1.65;color:var(--fg-soft);max-width:40rem}
.sk blockquote .text b{color:var(--fg);font-weight:800}
.sk footer{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:.15em}
.sk footer .wer{font-family:var(--display);font-size:var(--t-1);line-height:1.1}
.sk footer .ort{font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
@media (min-width:860px){
  .sk{grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px)}
  .sk.links{grid-template-columns:auto minmax(0,1fr)}
  .sk.links .sk-foto{order:-1}
}
@media (max-width:859px){.sk-foto{order:-1}}
.glut .sk blockquote .text p{color:var(--navy);font-size:19px;font-weight:700;line-height:1.55}
.glut .sk blockquote .text b{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.glut .sk footer .ort{font-size:19px;letter-spacing:.02em;text-transform:none;font-weight:800;color:var(--navy)}
.glut .sk-foto img{border-color:var(--orange);box-shadow:0 0 0 2px var(--navy)}
.glut .sk footer .wer{font-size:max(24px,var(--t-1))}
/* Vorlage für Franz' Selbst-Testimonial: gestrichelt = noch zu schreiben */
.sk.vorlage{border:2px dashed var(--line);border-radius:var(--radius);padding:var(--sp-2)}

/* ---- 28 · Zwei kurze Stimmen in Boxen auf Franz' Hintergrundbild -------- */
.boxen-bild{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--sp-4)}
.boxen-bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.boxen-bild::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(2,48,71,.38)}
.boxen{display:grid;gap:var(--sp-2);max-width:62rem;margin-inline:auto}
@media (min-width:820px){.boxen{grid-template-columns:1fr 1fr}}
.box{background:rgba(247,241,230,.96);color:var(--navy);border-radius:var(--radius);padding:var(--sp-2);text-align:left;
  box-shadow:0 24px 60px -30px rgba(2,20,30,.7);display:flex;flex-direction:column}
.box .zitat{font-family:var(--display);font-style:italic;font-size:var(--t-1);line-height:1.25;text-align:left}
.box p{margin-top:.8em;font-size:var(--t--1);line-height:1.65;color:#3d5a6c;text-align:left}
.box footer{margin-top:auto;padding-top:var(--sp-1);display:flex;align-items:center;gap:.8em}
.box footer img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--orange)}
.box footer .wer{font-family:var(--display);font-size:var(--t-0);line-height:1.1}
.box footer .ort{display:block;font-size:var(--t--2);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#55707f}

/* ---- 29 · Freebie: Geräte-Ansicht (Laptop, Tablet, Handy) + Anmeldung --- */
.freebie{display:grid;gap:var(--sp-3);align-items:center;max-width:68rem;margin-inline:auto}
@media (min-width:960px){.freebie{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.freebie .txt{text-align:left}
.freebie .txt h2{font-size:var(--t-3);text-align:left;max-width:16ch}
.freebie .txt .eyebrow{margin-inline:0;text-align:left}
.freebie .txt .eyebrow::before{margin-inline:0}
.freebie .txt > p{text-align:left;color:var(--fg-soft);margin-top:var(--sp-1);max-width:30rem}
.paket{list-style:none;display:grid;gap:.55em;margin-top:var(--sp-1)}
.paket li{position:relative;padding-left:1.6em;text-align:left;font-size:var(--t--1);line-height:1.5}
.paket li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 2px var(--navy)}
.nacht .paket li::before,.tief .paket li::before{box-shadow:none}
.anmelden{display:grid;gap:10px;margin-top:var(--sp-2);max-width:30rem}
@media (min-width:520px){.anmelden{grid-template-columns:1fr 1fr}.anmelden .btn,.anmelden .form-note,.anmelden .form-hint{grid-column:1 / -1}}
.anmelden input{font-family:var(--body);font-size:var(--t-0);color:var(--navy);background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:.8em 1em;width:100%}
.anmelden input:focus{border-color:var(--orange);outline:none}
.anmelden .btn{justify-self:start}
.anmelden .form-note{text-align:left;font-size:var(--t--2);line-height:1.5}
.anmelden .form-hint{margin:0;text-align:left}

.geraete{position:relative;padding:2.2em 0 3.2em;max-width:640px;margin-inline:auto;width:100%}
.geraete .buehne{position:relative;padding:0 5% 8%}
.geraet{background:#10202a;border-radius:14px;padding:2.2%;box-shadow:0 30px 60px -28px rgba(2,20,30,.6)}
.geraet img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.laptop .screen{position:relative;aspect-ratio:16/10;border-radius:12px 12px 0 0;padding:2%;background:#10202a}
.laptop .screen img{border-radius:3px}
.laptop .base{height:12px;margin:0 -6%;background:linear-gradient(#cfd6db,#9aa6ae);border-radius:0 0 14px 14px}
.tablet{position:absolute;left:0;bottom:0;width:38%;aspect-ratio:4/3}
.phone{position:absolute;right:0;bottom:0;width:19%;aspect-ratio:9/19;border-radius:18px;padding:4%}
.phone img{border-radius:12px}
.geraete .spiel{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.geraete .spiel span{width:clamp(38px,6vw,56px);aspect-ratio:1;border-radius:50%;background:var(--orange);color:var(--navy);display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(2,20,30,.6)}
.geraete .spiel svg{margin-left:3px}
.geraete .label{position:absolute;font-family:var(--display);font-style:italic;font-size:var(--t--1);line-height:1.2;color:var(--fg);white-space:nowrap}
.geraete .l-video{top:0;left:50%;transform:translateX(-50%)}
.geraete .l-audio{left:0;bottom:0}
.geraete .l-int{right:0;bottom:0}

/* ---- 30 · Kontakt: zwei Wege (Kalender oder WhatsApp) ------------------- */
.wege{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;align-items:center}
.btn-wa{border-color:currentColor;color:var(--fg);font-size:var(--t--1);letter-spacing:.02em;background:transparent}
.btn-wa:hover{background:rgba(247,241,230,.08)}
.btn-wa svg{width:20px;height:20px;flex:none}
@media (max-width:560px){.wege .btn{width:100%;max-width:22rem}}

/* ---- 31 · Monat: Ablauf nach Wochen, Investment-Band, Methode ---------- */
.wochen{display:grid;gap:var(--sp-2);max-width:62rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.wochen{grid-template-columns:repeat(2,1fr)}}
.woche{background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-2)}
.woche .wann{font-size:var(--t--2);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.woche h3{font-size:var(--t-2);margin:.25em 0 .6em;text-align:left}
.woche h3 .nr{color:var(--akzent);margin-right:.35em}
.woche dl{display:grid;gap:.9em}
.woche dt{font-weight:700;font-size:var(--t--1)}
.woche dd{color:var(--fg-soft);font-size:var(--t--1);line-height:1.6}
.woche dd small{display:block;margin-top:.2em;font-size:var(--t--2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.woche.ganz{grid-column:1 / -1;text-align:center}
.woche.ganz h3,.woche.ganz p{text-align:center}


.disclaimer{max-width:46rem;margin-inline:auto;border:2px solid var(--akzent);border-radius:var(--radius);padding:var(--sp-2);text-align:left}
.disclaimer h3{font-size:var(--t-1);text-align:left;margin-bottom:.5em}
.disclaimer p{text-align:left;font-size:var(--t--1);line-height:1.7;color:var(--fg-soft)}
.disclaimer p + p{margin-top:.7em}
.disclaimer p b{color:var(--fg)}
.disclaimer.klein{padding:var(--sp-1);margin-top:var(--sp-1)}
.disclaimer.klein p{font-size:var(--t--2);line-height:1.6}

.vt-split{display:grid;gap:var(--sp-2);align-items:center;max-width:62rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.vt-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px)}}
.videostage.hoch{aspect-ratio:4/5}

.methode{display:grid;gap:var(--sp-3);align-items:center;max-width:62rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.methode{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.methode img{width:100%;border-radius:var(--radius)}
.methode h2{font-size:var(--t-3);text-align:left}
.methode .eyebrow{margin-inline:0;text-align:left}
.methode .eyebrow::before{margin-inline:0}
.methode p{text-align:left;color:var(--fg-soft);margin-top:var(--sp-1)}
.saeulen{list-style:none;display:grid;gap:var(--sp-1);margin-top:var(--sp-2)}
.saeulen li{text-align:left;border-left:3px solid var(--akzent);padding-left:1em}
.saeulen b{display:block;font-family:var(--display);font-weight:400;font-size:var(--t-1)}
.saeulen span{display:block;color:var(--fg-soft);font-size:var(--t--1);line-height:1.55}

/* ---- 32 · Über mich: Vorstellung mit Bild, Reise, Zertifikate, Steckbrief */
.intro-split{display:grid;gap:var(--sp-3);align-items:center;max-width:64rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.intro-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.intro-split img{width:100%;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}
.intro-split h1{font-size:var(--t-4);text-align:left;margin-inline:0}
.intro-split .lead,.intro-split p{text-align:left;margin-inline:0}
.intro-split .crumb{text-align:left}
.intro-split .vorstellung{margin-top:var(--sp-2);font-size:var(--t-0);line-height:1.7;color:var(--fg-soft)}
.intro-split .vorstellung + .vorstellung{margin-top:.8em}
.intro-split .vorstellung b{color:var(--fg)}
.intro-split .btn-row{justify-content:flex-start}

.reise{list-style:none;display:grid;gap:var(--sp-1);max-width:46rem;margin-inline:auto;counter-reset:r}
.reise li{counter-increment:r;display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:baseline;text-align:left;
  font-size:var(--t-1);font-family:var(--display);line-height:1.3}
.reise li::before{content:counter(r,decimal-leading-zero);font-family:var(--display);font-size:var(--t-2);color:var(--akzent)}

.zerts{display:grid;gap:var(--sp-1);max-width:56rem;margin:var(--sp-3) auto 0}
@media (min-width:640px){.zerts{grid-template-columns:1fr 1fr}}
.zerts img{width:100%;border-radius:6px;box-shadow:0 18px 40px -24px rgba(2,20,30,.6)}
.zerts figcaption{margin-top:.6em;font-size:var(--t--2);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);text-align:center}
.facts{display:grid;gap:clamp(24px,4vw,48px);max-width:62rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts > div{border-top:3px solid var(--orange);padding-top:var(--sp-1)}
.facts h3{font-size:var(--t-1);text-align:left;margin-bottom:.7em}
.facts ul{list-style:none;display:grid;gap:.75em}
.facts li{text-align:left;font-size:var(--t--1);line-height:1.55;color:var(--fg-soft)}
.facts li b{display:block;color:var(--fg);font-weight:700}
.steck{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:56rem;margin-inline:auto}
.steck span{font-family:var(--display);font-size:var(--t-1);line-height:1.2;padding:.45em .9em;border:2px solid var(--line);border-radius:999px}
.steck span:nth-child(3n+1){border-color:var(--orange)}

/* ---- 33 · Shop: Produktkarten + Nachricht von Franz -------------------- */
.produkte{display:grid;gap:var(--sp-2);max-width:68rem;margin-inline:auto}
@media (min-width:700px){.produkte{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.produkte{grid-template-columns:repeat(3,1fr)}}
.produkt{display:flex;flex-direction:column;text-align:left;background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.produkt > img{width:100%;aspect-ratio:3/2;object-fit:cover}
.produkt .in{display:flex;flex-direction:column;gap:.5em;padding:var(--sp-1) var(--sp-1) var(--sp-2);flex:1}
.produkt .tag{align-self:flex-start;font-size:var(--t--2);font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--sky);color:var(--navy);padding:.4em .75em;border-radius:4px;line-height:1.2}
.produkt h3{font-size:var(--t-1);text-align:left}
.produkt p{font-size:var(--t--1);line-height:1.6;color:var(--fg-soft);text-align:left}
.produkt .bonus{font-size:var(--t--1);font-weight:700;color:var(--fg)}
.produkt .fuss{margin-top:auto;padding-top:var(--sp-1);display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.produkt .preis{font-family:var(--display);font-size:max(26px,var(--t-2));line-height:1;color:var(--akzent)}
.produkt .btn{font-size:var(--t--1);padding:.7em 1.2em}
.produkt.highlight{border:2px solid var(--orange)}

.brief{display:grid;gap:var(--sp-3);align-items:center;max-width:64rem;margin-inline:auto;text-align:left}
@media (min-width:860px){.brief{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.brief h2{font-size:var(--t-4);text-align:left;max-width:14ch}
.brief p{text-align:left;color:var(--fg-soft);max-width:36rem;margin-top:1em}
.brief p b{color:var(--fg)}
.brief .gruss{font-family:var(--display);font-style:italic;font-size:var(--t-3);color:var(--fg);margin-top:var(--sp-2)}
.brief img{width:100%;border-radius:var(--radius);aspect-ratio:4/5;object-fit:cover}

/* ---- 34 · Willkommen (versteckte Freebie-Seite) ------------------------ */
.inhalte{display:grid;gap:var(--sp-4);max-width:58rem;margin-inline:auto}
.inhalt{display:grid;gap:var(--sp-2);align-items:center;text-align:left}
@media (min-width:820px){.inhalt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.inhalt:nth-child(even) .medien{order:2}}
.inhalt .nr{font-family:var(--display);font-size:var(--t-3);line-height:1;color:var(--akzent)}
.inhalt h2{font-size:var(--t-2);text-align:left;margin:.2em 0 .4em}
.inhalt p{text-align:left;color:var(--fg-soft)}
.audio-platz{background:var(--karte);border:2px dashed var(--line);border-radius:var(--radius);padding:var(--sp-2);text-align:center;display:grid;gap:.6em;place-items:center}
.audio-platz p{text-align:center;font-size:var(--t--1)}
.audio-platz .disc{width:64px;height:64px;border-radius:50%;background:var(--orange);color:var(--navy);display:grid;place-items:center}

/* drei Stimmen nebeneinander (Shop) */
@media (min-width:1040px){.stimmen.drei{grid-template-columns:repeat(3,1fr);max-width:72rem}}
.hoer .wrap > .tlink + .tlink{margin-top:.6em}
@media (max-width:719px){.angebot .fig{max-width:24rem}}
.nw{white-space:nowrap}
@media (max-width:859px){.intro-split img{aspect-ratio:4/3;object-position:50% 28%}}
@media (max-width:420px){.btn-orange{padding:.8em 1.05em}}

/* ---- Runde 10 · Feinschliff nach Leonardo (23.10.) ---------------------- */
.gaben.zwei{max-width:44rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Franz' Hintergrundbild bleibt am Handy sichtbar: Bild oben als Band, Boxen ragen in die untere Hälfte */
@media (max-width:819px){
  .boxen-bild{padding-top:58vw}
  .boxen{width:88%;margin-inline:auto}
}
/* altes Webcam-Foto in Originalgröße, wie ein Abzug */
.kapitel img.alt-foto{aspect-ratio:1;width:100%;max-width:300px;justify-self:center;background:#fff;padding:10px 10px 30px;border-radius:2px;
  box-shadow:0 18px 40px -22px rgba(2,20,30,.55);transform:rotate(-2deg)}
/* Kapitälchen-Links: genug Klickhöhe am Handy */
@media (max-width:860px){.tlink{padding-block:.7em}}
/* Stimmen-Karten: Zitat in Serif, Text darunter klein in Manrope (Leonardo 23.10.: Hierarchie) */
.stimmen p.st-text{font-family:var(--body);font-size:var(--t--1);line-height:1.6;color:var(--fg-soft);margin-top:var(--sp-1)}
.footer .brand{justify-content:center}
.tuer img{object-position:50% 12%}
.shop-kopfbild{width:100%;border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover;object-position:60% 40%}
@media (max-width:719px){
  .angebot,.angebot p{text-align:center}
  .angebot p{margin-inline:auto}
  .angebot .fig{margin-inline:auto}
  .shop-kopfbild{aspect-ratio:4/3;object-position:65% 40%}
}

/* ausgeblendet bis fertig (Livegang 28.10.2026) — Attribut hidden schlägt jede display-Regel */
[hidden]{display:none!important}

/* ---- Runde 11 (28.10.2026) ------------------------------------------------ */
/* Spotify-/Instagram-Logo unten in der Link-Zeile, vor dem Text (Franz/Michael 28.10.) — die ganze Kachel ist der Link */
.gabe .go:has(.logo){display:flex;align-items:center;gap:.7em}
.gabe .logo{width:24px;height:24px;flex:none}
.logo-spotify{color:#1db954}
.logo-insta{color:#d6297a}

/* Investment als zwei Boxen: links vor Ort, rechts online (Franz 28.10.) */
.invest-boxen{display:grid;gap:var(--sp-1);max-width:52rem;margin:var(--sp-2) auto 0}
@media (min-width:720px){.invest-boxen{grid-template-columns:1fr 1fr}}
.invest-box{background:var(--karte);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-2);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em}
.invest-box .art{font-size:var(--t--2);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
.invest-box .ort{font-family:var(--display);font-size:var(--t-3);line-height:1.1;color:var(--cream);margin-top:.2em;margin-bottom:var(--sp-1)}
.invest-box .wie{font-size:var(--t--1);color:var(--sand);margin-bottom:var(--sp-1)}
.invest-box .zeit{margin-top:auto;padding-top:var(--sp-1);border-top:1px solid var(--line);width:100%;
  font-size:var(--t--1);font-weight:700;letter-spacing:.06em;color:var(--cream)}
.invest-box .preis{font-family:var(--display);font-size:var(--t-4);line-height:1;color:var(--orange);margin-top:.15em}
.invest-fuer{margin-top:var(--sp-2);font-family:var(--display);font-style:italic;font-size:var(--t-1);color:var(--sand);text-align:center}
.invest-stimmen{margin-top:var(--sp-3)}

/* Kathis Video (YouTube Short) spielt direkt im Bildrahmen — nach Klick Hochformat 9:16 (28.10.2026) */
.videostage.spielt{aspect-ratio:9/16;background:#000}
.videostage.spielt iframe{display:block;width:100%;height:100%;border:0}