/* ============================================================
   SHILA DRIESCH · entwurf-4 „Handout-Klarheit"
   Ein System, eine Pflegestelle. Regeln: design-brief.md
   — nur Montserrat · Weiß + Kachelgrau · Schwarz · EIN Rot #F15F5C
   — Flächen statt Rahmen, 12px-Rundung, keine Pills, keine Gradients
   — genau EINE dunkle Fläche pro Seite (Footer inkl. Final-CTA)
   — Signaturen: roter Strich, rote Haken, rote Ziffern, Merksatz
   ============================================================ */

/* ---------- Fonts (lokal, DSGVO-sauber) ---------- */
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
/* Akzent-Schrift: NUR für Signature-Momente (Leitfrage, einzelne Schlüsselwörter). Nie Fließtext. */
@font-face { font-family:'Permanent Marker'; src:url('fonts/permanent-marker.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --ink:#0A0A0A;
  --text:#1F1F1F;
  --muted:#666666;
  --rot:#F15F5C;          /* Flächen: Striche, Punkte, Füllungen — keine Schrift */
  --rot-tief:#D9433F;     /* große rote Schrift ab 24px (Kontrast 3:1 erfüllt) */
  --rot-text:#C22E2A;     /* rote Schrift — 4,5:1 auf Weiß, Kachelgrau und der dunkelsten Kachel */
  --kachel:#F2F2F2;
  --kachel-2:#EBEBEB;
  --linie:#EAEAE9;
  --bg:#FFFFFF;
  --radius:16px;
  --radius-btn:12px;
  --max:1200px;
  --prose:720px;
  --nav-h:84px;
  --ease:cubic-bezier(.22,1,.36,1);
  --f:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-hand:'Permanent Marker','Montserrat',sans-serif;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color-scheme:light; }
a,button,input,select,textarea { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
body { font-family:var(--f); font-size:1.0625rem; line-height:1.72; color:var(--text); background:var(--bg); overflow-wrap:break-word; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; border:none; background:none; cursor:pointer; color:inherit; }
ul,ol { list-style:none; }
h1,h2,h3,h4 { color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-.015em; text-wrap:balance; }
h1 { font-size:clamp(2.7rem,5.6vw,4.3rem); font-weight:600; line-height:1.05; letter-spacing:-.028em; }
h2 { font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; letter-spacing:-.022em; line-height:1.1; }
h3 { font-size:1.3rem; line-height:1.3; font-weight:600; letter-spacing:-.012em; }
[id] { scroll-margin-top:calc(var(--nav-h) + 16px); }
/* Fokusring in --rot-text statt --rot: --rot erreicht auf Kachelgrau nur 2,87:1,
   Soll sind 3:1 (gemessen im A11y-Bericht vom 19.08.). */
:focus-visible { outline:2px solid var(--rot-text); outline-offset:2px; border-radius:2px; }
::selection { background:var(--rot); color:#fff; }

.skip { position:absolute; left:1rem; top:-100%; background:var(--ink); color:#fff; padding:.6rem 1.2rem; font-size:.85rem; z-index:1000; border-radius:6px; }
.skip:focus { top:.8rem; }

/* ---------- Layout ---------- */
.in { max-width:var(--max); margin:0 auto; padding-inline:clamp(1.5rem,4vw,2.5rem); }
.sek { padding-block:clamp(3.25rem,6.5vw,5.5rem); }
.sek-kachel { background:var(--kachel); }        /* volle Breite, graue Fläche */
.sek + .sek-getrennt { border-top:1px solid var(--linie); }
.prose { max-width:var(--prose); }
.prose p + p { margin-top:1.1rem; }
.mittig { margin-inline:auto; text-align:center; }

/* Sektions-Kopf */
.kicker { display:block; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em; color:var(--rot-text); margin-bottom:.85rem; }
/* Marken-Pille: roter Strich + Name, der Absender über der Headline */
.marken-pille { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.marken-pille span { width:56px; height:2.5px; border-radius:2px; background:var(--rot); flex:none; }
.marken-pille { font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color:var(--ink); }
.strich { display:block; width:56px; height:2.5px; border-radius:2px; background:var(--rot); margin-top:1.5rem; }
.mittig .strich { margin-inline:auto; }
.kopf { max-width:820px; margin-bottom:clamp(2.25rem,4vw,3.25rem); }
/* Kopf mit Abschluss-Strich traegt schon Abstand — sonst doppelt sich das Loch */
.kopf:has(.strich) { margin-bottom:clamp(1.6rem,2.6vw,2.25rem); }
.kopf .lead { margin-top:1.4rem; }
.lead { font-size:clamp(1.125rem,1.6vw,1.3rem); line-height:1.6; color:var(--text); }
.nebentext { color:var(--muted); }
.quelle { font-size:.85rem; color:var(--muted); margin-top:1.25rem; }

/* Grids */
.g2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.g2,.g3,.g4 { grid-auto-rows:1fr; }
.g2>*,.g3>*,.g4>* { min-width:0; }
@media (max-width:980px){ .g3,.g4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g2,.g3,.g4 { grid-template-columns:1fr; grid-auto-rows:auto; } }

/* Split (mochary): links klebender Kopf, rechts Stapel */
.split { display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.split-kopf { position:sticky; top:calc(var(--nav-h) + 2rem); }
.split-stapel { display:grid; gap:1.25rem; }
@media (max-width:980px){ .split { grid-template-columns:1fr; } .split-kopf { position:static; } }

/* ---------- Seitenkopf: gleiche Hoehe ueber alle Seiten ---------- */
/* Ohne Mindesthoehe bestimmt der Textumfang den Hero — kurze Seiten landen bei 658 px,
   lange bei 816. Ab 981 px wird auf eine gemeinsame Grundhoehe aufgefuellt, laengere
   Heroes wachsen weiterhin frei darueber hinaus. */
@media (min-width:981px){
  .hero { min-height:780px; display:flex; align-items:center; }
  .hero > .in { width:100%; }
}

/* ---------- Navigation ---------- */
.nav { position:fixed; inset:0 0 auto 0; height:var(--nav-h); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--linie); z-index:100; transition:box-shadow .25s var(--ease); }
.nav.is-scrolled { box-shadow:0 10px 28px -18px rgb(10 10 10 / .18); }
.nav-in { max-width:var(--max); margin:0 auto; padding-inline:1.5rem; height:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo img { height:32px; width:auto; }
.nav-links { display:flex; align-items:center; gap:.5rem; }
.nav-links a { position:relative; font-size:.9375rem; font-weight:500; color:var(--text); padding:.6rem .85rem; transition:color .2s var(--ease); }
.nav-links a:hover { color:var(--rot-tief); }
.nav-links a.is-active { font-weight:700; color:var(--ink); }
.nav-links a.is-active::after { content:''; position:absolute; left:.85rem; right:.85rem; bottom:.15rem; height:2px; border-radius:1px; background:var(--rot); }
/* Dropdown (Desktop): reine CSS-Lösung über :hover/:focus-within */
.nav-item { position:relative; }
.nav-item > a .chev { display:inline-block; font-size:.6em; margin-left:.35em; transform:translateY(-.15em); transition:transform .2s var(--ease); }
.nav-item:hover > a .chev, .nav-item:focus-within > a .chev { transform:translateY(-.15em) rotate(180deg); }
.nav-drop { position:absolute; top:calc(100% + 10px); left:.4rem; min-width:310px; background:#fff; border:1px solid var(--linie); border-radius:var(--radius); box-shadow:0 24px 56px -18px rgb(10 10 10 / .18); padding:1.1rem .9rem .9rem; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s; }
.nav-drop::before { content:''; position:absolute; top:-7px; left:1.6rem; width:12px; height:12px; background:#fff; border-left:1px solid var(--linie); border-top:1px solid var(--linie); transform:rotate(45deg); }
.nav-item::after { content:''; position:absolute; left:0; right:0; top:100%; height:12px; }  /* Hover-Brücke zum Panel */
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity:1; visibility:visible; transform:none; transition:opacity .18s var(--ease), transform .18s var(--ease); }
.drop-titel { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--rot-text); padding:.2rem 1rem .55rem; }
.nav-drop a.drop-item { display:block; padding:.7rem 1rem; border-radius:8px; }
.nav-drop a.drop-item strong { display:block; font-weight:700; font-size:1.0625rem; color:var(--ink); line-height:1.3; }
.nav-drop a.drop-item span { display:block; font-size:.85rem; font-weight:400; color:var(--muted); margin-top:.2rem; }
.nav-drop a.drop-item:hover, .nav-drop a.drop-item.is-sub-active { background:var(--kachel); }
.drop-linie { border:none; border-top:1px solid var(--linie); margin:.6rem 1rem; }
.nav-drop a.drop-alle { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem .35rem; font-size:.95rem; font-weight:700; color:var(--rot-text); }
.nav-drop a.drop-alle .pfeil { transition:transform .2s var(--ease); }
.nav-drop a.drop-alle:hover .pfeil { transform:translateX(3px); }
.nav-links .nav-drop a::after { display:none; }
/* Mobile: Gruppen-Label + eingerückte Unterlinks */
.nav-mobil .gruppe { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); padding:1rem 0 .25rem; border-bottom:none; }
.nav-mobil a.sub { padding-left:1.1rem; font-weight:400; }

/* Mitgliederbereich-Login: dezent, klar getrennt vom Buchen-CTA */
.nav-links a.nav-login { display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; color:var(--muted); padding:.6rem .85rem; margin-right:.35rem; }
.nav-links a.nav-login:hover { color:var(--ink); }
.nav-links a.nav-login::after { display:none; }
.nav-login svg { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.nav-mobil a.nav-login { color:var(--muted); font-weight:500; }

.nav-cta, .nav-links a.nav-cta, .nav-mobil a.nav-cta { display:inline-block; background:var(--ink); color:#fff; font-size:.9rem; font-weight:700; padding:.65rem 1.25rem; border-radius:var(--radius-btn); transition:background .2s var(--ease); }
.nav-cta:hover, .nav-links a.nav-cta:hover { background:var(--rot); color:#fff; }
.nav-links a.nav-cta::after { display:none; }
.nav-burger { display:none; width:44px; height:44px; margin-right:-8px; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.nav-burger span { display:block; height:2px; width:22px; background:var(--ink); border-radius:1px; transition:transform .2s var(--ease), opacity .2s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobil { position:fixed; top:var(--nav-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--linie); display:none; flex-direction:column; padding:.75rem 1.5rem 1.75rem; z-index:95; box-shadow:0 16px 36px -20px rgb(10 10 10 / .2); }
.nav-mobil.is-open { display:flex; }
.nav-mobil a { padding:.95rem 0; border-bottom:1px solid var(--kachel-2); font-size:1.0625rem; font-weight:500; color:var(--ink); }
.nav-mobil a.is-active { font-weight:700; }
.nav-mobil .nav-cta { margin-top:1.1rem; border-bottom:none; text-align:center; padding:.95rem 1.25rem; }
@media (max-width:1220px){ .nav-links { display:none; } .nav-burger { display:flex; } }
main { padding-top:var(--nav-h); }

/* ---------- Buttons & Links ---------- */
.btn { display:inline-block; background:var(--ink); color:#fff; font-weight:500; font-size:.9375rem; letter-spacing:.015em; padding:.85rem 1.6rem; border-radius:10px; transition:background .2s var(--ease); text-align:center; }
/* Hover-Flaeche in --rot-text: weiss auf --rot ergibt bei 15 px nur 3,22:1,
   --rot-tief reicht mit 4,35:1 auch nicht — --rot-text liefert 5,65:1. */
.btn:hover { background:var(--rot-text); }
.btn:active { transform:scale(.98); }
.btn-ghost { display:inline-block; background:transparent; color:var(--ink); font-weight:500; font-size:.9375rem; letter-spacing:.015em; padding:calc(.85rem - 1px) 1.6rem; border:1px solid var(--ink); border-radius:10px; transition:color .2s var(--ease), border-color .2s var(--ease); text-align:center; }
.btn-ghost:hover { color:var(--rot-tief); border-color:var(--rot-tief); }
.btn-zeile { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:2.25rem; }
.link-cta { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink); transition:color .2s var(--ease); }
.link-cta .pfeil { transition:transform .2s var(--ease); }
.link-cta:hover { color:var(--rot-tief); }
.link-cta:hover .pfeil { transform:translateX(3px); }
@media (max-width:640px){ .btn,.btn-ghost { white-space:normal; width:100%; } }

/* ---------- Kacheln ---------- */
.kachel { background:var(--kachel); border-radius:var(--radius); padding:clamp(2rem,3vw,2.75rem); }
.kachel-w { background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(2rem,3vw,2.75rem); }
.kachel-betont { background:var(--kachel-2); }
a.kachel, a.kachel-w, .kachel-klick { transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); cursor:pointer; }
@media (hover:hover){
  /* Hover ueber Anheben und Schatten — ein schwarzer Rand wirkt wie ein Fehlerzustand.
     html.js davor, weil sonst `html.js .r.sichtbar { transform:none }` das Anheben schluckt. */
  a.kachel:hover, a.kachel-w:hover, .kachel-klick:hover,
  html.js a.kachel:hover, html.js a.kachel-w:hover, html.js .kachel-klick:hover {
    transform:translateY(-4px); box-shadow:0 18px 42px -16px rgb(10 10 10 / .24); }
}
.kachel h3 + p, .kachel-w h3 + p { margin-top:.6rem; }
.kachel .link-cta, .kachel-w .link-cta { margin-top:1.25rem; }
/* Karten mit Fuß bündig */
.kachel-spalte { display:flex; flex-direction:column; }
.kachel-spalte .fussling { margin-top:auto; padding-top:1.25rem; }

/* Icon-Kachel (esch/mochary): Linien-Icon oben, Titel, Einzeiler, Pfeil */
.ikon { width:44px; height:44px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.kachel-w .ikon { background:var(--kachel); }
.ikon svg { width:24px; height:24px; stroke:var(--rot); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* Ziffern-Kachel (Handout-Trainingsplan) */
.ziffer { font-size:1.05rem; font-weight:700; color:var(--rot-text); font-variant-numeric:tabular-nums; margin-bottom:.75rem; }
/* Kennzeichnung ueber einem Karten-Titel — leiser als die Ziffer des Trainingsplans */
.kachel-label { display:block; font-size:.875rem; font-weight:500; color:var(--rot-text); letter-spacing:.005em; margin-bottom:.7rem; }

/* Stat-Kachel — Kennzahlen sind Signale: rot wie die Ziffern im Handout */
.stat { display:flex; flex-direction:column; }
.stat-zahl { display:block; font-size:clamp(3.4rem,5.5vw,4.8rem); font-weight:700; color:var(--rot-text); line-height:.95; letter-spacing:-.045em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.stat-zahl .einheit { font-size:.42em; font-weight:600; letter-spacing:-.01em; }
.stat p { margin-top:1rem; font-size:1rem; line-height:1.5; }
.stat .quelle { margin-top:auto; padding-top:1rem; }

/* Zahlen-Reihe: graue Kachel, rote Zahl links, Text rechts daneben */
.zahlen-reihe { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); }
.zahlen-reihe > div { background:var(--kachel); border-radius:var(--radius); padding:clamp(1.5rem,2.2vw,1.9rem); display:flex; flex-direction:row; align-items:center; gap:clamp(1rem,1.5vw,1.4rem); }
.zahlen-reihe .stat-zahl { flex:none; font-size:clamp(2.8rem,3.8vw,3.6rem); margin-bottom:0; }
.zahlen-reihe .stat-zahl .einheit { font-size:.5em; }
.zahlen-reihe p { margin-top:0; font-size:.9375rem; line-height:1.4; color:var(--text); }
@media (max-width:900px){ .zahlen-reihe { grid-template-columns:1fr; } .zahlen-reihe > div { gap:1.5rem; } }

/* ---------- Haken-Liste (Handout-Signatur) ---------- */
.haken li { position:relative; padding-left:2.1rem; }
.haken li + li { margin-top:.8rem; }
.haken li::before { content:''; position:absolute; left:0; top:.2em; width:1.15em; height:1.15em;
  background:var(--rot);
  -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' 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Mehr-/Wandel-Liste als kompakte Zeilen-Kacheln */
/* Aussagen als feine Zeilen statt gefuellter Pillen — Pillen lesen sich wie Tags, nicht wie Saetze */
.zeilen li { position:relative; padding:.95rem 0 .95rem 1.85rem; border-bottom:1px solid var(--linie);
  font-weight:500; color:var(--ink); line-height:1.45; }
.zeilen li:first-child { border-top:1px solid var(--linie); }
.zeilen li::before { content:''; position:absolute; left:.2rem; top:1.42rem; width:7px; height:7px;
  border-radius:50%; background:var(--rot); }
.zeilen li + li { margin-top:0; }
.sek-kachel .zeilen li { border-color:#E0E0E0; }

/* ---------- Die gute Nachricht: Bild links, Text rechts ---------- */
.gut-grid { display:grid; grid-template-columns:5fr 6fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.gut-bild { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; }
.gut-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.gut-grid .kopf { margin-bottom:1.6rem; }
.gut-schluss { margin-top:1.9rem; }
.gut-schluss { font-size:clamp(1.22rem,1.75vw,1.45rem); font-weight:700; color:var(--ink); line-height:1.4; }
/* Mobil: Text vor Bild — flacherer Ausschnitt, Bildmitte nach oben, sonst faellt der Kopf raus */
@media (max-width:980px){
  .gut-grid { grid-template-columns:1fr; }
  .gut-bild { aspect-ratio:3/2; order:1; }
  .gut-bild img { object-position:center 22%; }
}

/* ---------- Business Mental Training: Video mit Abbinder statt Loch ---------- */
.bmt-split { grid-template-columns:6fr 6fr; }
.bmt-medien { display:grid; grid-template-rows:auto 1fr; align-self:stretch; }
.bmt-abbinder { margin-top:clamp(1.5rem,2.4vw,1.9rem); padding:clamp(1.75rem,3vw,2.4rem);
  background:var(--kachel); border-radius:var(--radius); display:flex; flex-direction:column; justify-content:center; }
.bmt-abbinder p { font-size:clamp(1.45rem,2.5vw,2rem); font-weight:400; line-height:1.3; color:var(--ink); }
/* Permanent Marker laeuft optisch kleiner und braucht mehr Zeilenluft */
.bmt-abbinder .marke-strich { width:44px; margin-bottom:1.2rem; }
@media (max-width:980px){ .bmt-split { grid-template-columns:1fr; } }

/* ---------- BestMe-Methode + Was sich veraendert: Kopf steht, die Wirkung scrollt ---------- */
/* Spalte streckt sich auf Zeilenhoehe, erst das Kind darin klebt — sonst hat sticky keinen Weg */
.methode2 { display:grid; grid-template-columns:5fr 7fr; gap:clamp(2rem,5vw,4.5rem); }
.methode2-kopf { position:sticky; top:calc(var(--nav-h) + 2rem); }
.methode2-kopf .kopf { margin-bottom:clamp(1.6rem,2.6vw,2.25rem); }
.methode2-wirkung h3 { font-size:clamp(1.35rem,2.3vw,1.8rem); }
.wirkung-liste { margin-top:1.75rem; }
.wirkung-liste li { position:relative; padding:1.5rem 0 1.5rem 2rem; border-top:1px solid var(--linie);
  font-size:1.0625rem; font-weight:500; color:var(--ink); line-height:1.45; }
.wirkung-liste li:last-child { border-bottom:1px solid var(--linie); }
.wirkung-liste li::before { content:''; position:absolute; left:.3rem; top:2.12rem; width:8px; height:8px;
  border-radius:50%; background:var(--rot); }
.sek-kachel .wirkung-liste li { border-color:#E0E0E0; }
@media (max-width:980px){ .methode2 { grid-template-columns:1fr; } .methode2-kopf { position:static; } }

/* ---------- Zitat-Wand: gleiche Karte fuer alle Stimmen (Referenzen + Unterseiten) ---------- */
.stimmen-wand { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.stimmen-wand .karte { display:flex; flex-direction:column; margin:0; background:#fff; border-radius:var(--radius); padding:1.75rem 1.75rem 1.5rem; }
.stimmen-wand .karte::before { content:'\201E'; display:block; font-size:3.4rem; line-height:.6; color:var(--rot); margin-bottom:.5rem; }
.stimmen-wand blockquote { font-size:1.0625rem; font-weight:500; line-height:1.6; color:var(--ink); text-wrap:pretty; }
.stimmen-wand figcaption { display:flex; align-items:center; gap:.85rem; margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--linie); }
.stimmen-wand .avatar, .stimmen-wand .avatar-init { width:46px; height:46px; font-size:.9rem; }
.stimmen-wand figcaption strong { display:block; font-weight:700; color:var(--ink); font-size:.9375rem; line-height:1.3; }
.stimmen-wand figcaption span { display:block; font-size:.85rem; color:var(--muted); }
/* Auf weisser Flaeche braucht die weisse Karte eine Kante */
.sek:not(.sek-kachel) .stimmen-wand .karte { border:1px solid var(--linie); }
@media (max-width:980px){ .stimmen-wand { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .stimmen-wand { grid-template-columns:1fr; } }

/* ---------- Story-Seite: Stationen, Momente, Zahlmomente ---------- */
/* Der Wendepunkt bricht aus dem Raster — ueber Groesse und Leere, NICHT ueber eine dunkle
   Flaeche: laut Design-Brief gibt es genau eine Ink-Flaeche je Seite (Footer), Shilas eigene
   Anmerkung lautet „schwarze Segmente zu dominant". */
.moment { background:var(--kachel-2); padding-block:clamp(5rem,11vw,9rem); }
.moment .in { max-width:960px; }
.moment .vorlauf { font-size:clamp(1.7rem,4vw,3.1rem); font-weight:600; line-height:1.2;
  letter-spacing:-.028em; color:var(--ink); }
.moment .nachlauf { margin-top:1.2rem; font-size:1.0625rem; color:var(--muted); }
.moment-satz { margin-top:clamp(2.5rem,5vw,4rem); font-size:clamp(1.5rem,3.2vw,2.4rem);
  font-weight:600; line-height:1.32; letter-spacing:-.022em; color:var(--ink); text-wrap:balance; }
.moment-satz .hand-wort { color:var(--rot-text); font-size:1.15em; }

/* Eine Zahl, die fuer sich steht */
.zahlmoment { display:flex; align-items:baseline; gap:clamp(1.25rem,3vw,2.25rem); flex-wrap:wrap; }
.zahlmoment .zahl { font-size:clamp(3.6rem,8vw,6.5rem); font-weight:600; line-height:.9;
  letter-spacing:-.05em; color:var(--rot-text); font-variant-numeric:tabular-nums; }
.zahlmoment p { flex:1 1 320px; font-size:1.0625rem; line-height:1.6; color:var(--text); }

/* Stationen an einer Linie: grosse duenne Ziffer, Haarlinie als Weg */
.stationen { position:relative; display:grid; gap:0; }
.station { position:relative; display:grid; grid-template-columns:5.5rem 1fr;
  gap:clamp(1.25rem,3vw,2.25rem); padding-block:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--linie); }
.station:last-child { border-bottom:1px solid var(--linie); }
.sek-kachel .station { border-color:#E0E0E0; }
.station-nr { font-size:clamp(2rem,3.4vw,2.9rem); font-weight:600; line-height:1;
  letter-spacing:-.04em; color:var(--rot-text); font-variant-numeric:tabular-nums; }
.station h3 { margin-bottom:.55rem; }
.station p { color:var(--text); line-height:1.62; max-width:62ch; }
@media (max-width:720px){
  .station { grid-template-columns:1fr; gap:.5rem; }
  .station-nr { font-size:1.9rem; }
}

/* Erzaehl-Station: Text und Bild wechseln die Seite */
.erzaehl { display:grid; grid-template-columns:6fr 5fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.erzaehl-bild { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; }
.erzaehl-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.erzaehl.gedreht .erzaehl-bild { order:-1; }
@media (max-width:900px){
  .erzaehl { grid-template-columns:1fr; }
  .erzaehl-bild { aspect-ratio:3/2; order:1 !important; }
}

/* ---------- Themen-Kacheln: kurze Schlagworte, gross gesetzt ---------- */
.themen { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.6vw,1.25rem); }
.thema { background:var(--kachel); border-radius:var(--radius); padding:clamp(1.6rem,2.6vw,2.25rem);
  display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(150px,15vw,200px); }
.sek-kachel .thema { background:#fff; }
.thema span { display:block; width:28px; height:3px; border-radius:2px; background:var(--rot); margin-bottom:auto; }
.thema strong { display:block; margin-top:1.5rem; font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:600;
  line-height:1.2; letter-spacing:-.018em; color:var(--ink); }
@media (max-width:900px){ .themen { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .themen { grid-template-columns:1fr; } .thema { min-height:0; } }

/* ---------- Bild-Slider: Momente zum Durchblättern ---------- */
.slider .bild { flex:0 0 min(62%, 620px); margin:0; }
.slider .bild > div { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.slider .bild img { width:100%; height:100%; object-fit:cover; display:block; }
.slider .bild figcaption { margin-top:.9rem; font-size:.9rem; color:var(--muted); }
@media (max-width:640px){ .slider .bild { flex:0 0 86%; } }

/* ---------- Themenfeld: die vier Schwerpunkte, bewusst aus der Reihe ---------- */
/* Untereinander, aber seitlich versetzt und leicht gekippt — kein Raster, keine Striche.
   Einspaltig, weil zweispaltig in halber Sektionsbreite die langen Woerter zerbricht. */
.themenwolke { display:grid; gap:clamp(1.1rem,2.4vw,1.9rem); padding-block:clamp(.5rem,1.5vw,1rem); }
.themenwolke > span { display:block; transform-origin:left center; }
.themenwolke > span:nth-child(1) { margin-left:0;                       transform:rotate(-1.8deg); }
.themenwolke > span:nth-child(2) { margin-left:clamp(1.5rem,5vw,4rem);  transform:rotate(1.2deg); }
.themenwolke > span:nth-child(3) { margin-left:clamp(.5rem,2vw,1.5rem); transform:rotate(1.6deg); }
.themenwolke > span:nth-child(4) { margin-left:clamp(2.25rem,7vw,5.5rem); transform:rotate(-1.1deg); }
/* Rot als Schrift ueber 24px: --rot-tief (Kontrast auf Weiss und Kachelgrau) */
.themenwolke b { display:block; font-size:clamp(1.5rem,3.2vw,2.5rem); font-weight:600;
  line-height:1.08; letter-spacing:-.028em; color:var(--rot-tief);
  white-space:nowrap; hyphens:none; }
.themenwolke .hand-wort { font-size:clamp(1.65rem,3.6vw,2.8rem); line-height:1; color:var(--rot-tief); }
@media (max-width:560px){
  .themenwolke > span { margin-left:0 !important; }
  .themenwolke b { white-space:normal; }
}

/* Themen und Fragen nebeneinander */
.darum-grid { display:grid; grid-template-columns:6fr 6fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .darum-grid { grid-template-columns:1fr; } }

/* ---------- Handschrift-Akzent (Permanent Marker) ---------- */
/* Sparsam einsetzen: die Leitfrage, einzelne Schlüsselwörter. Nie im Fließtext, nie in Buttons. */
.hand { font-family:var(--f-hand); font-weight:400; letter-spacing:.01em; }
/* Rote Handschrift nur fuer grosse Ueberschriften: --rot-tief erfuellt ab 24px
   die 3:1-Regel, --rot waere als Schrift zu hell. */
.hand-rot { color:var(--rot-tief); }
.hand-rot, .merksatz p.hand-rot, .stimme blockquote.hand-rot { color:var(--rot-text); }
/* Einzelnes Wort in der Handschrift auszeichnen (Permanent Marker läuft optisch kleiner) */
.hand-wort { font-family:var(--f-hand); font-weight:400; color:var(--rot-text); font-size:1.12em; letter-spacing:.012em; }
.merksatz p.hand { font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.28; letter-spacing:.005em; font-weight:400; }
em.hand { font-style:normal; font-size:1.22em; line-height:1; vertical-align:-.04em; }

/* ---------- Merksatz (Handout-Signatur) ---------- */
.merksatz { max-width:860px; padding-block:1rem; }
.merksatz .strich { margin:0 0 1.5rem; }
.merksatz p { font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:600; line-height:1.35; color:var(--ink); letter-spacing:-.015em; text-wrap:balance; }
.merksatz cite { display:block; font-style:normal; font-size:1rem; font-weight:500; color:var(--muted); margin-top:1.25rem; }
.mittig.merksatz { margin-inline:auto; }
.mittig.merksatz .strich { margin:0 auto 1.5rem; }

/* ---------- Logo-Fließband (Marquee; ohne Motion: statisch gewrappt) ---------- */
/* Laufband-Sektion und Titel: von Startseite, Keynotes und Workshops gebraucht */
.band-sek { padding-block:clamp(4rem,7vw,6rem); }
.band-titel { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em;
  color:var(--muted); text-align:center; margin-bottom:clamp(2rem,3.5vw,2.75rem); }
.band { overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.band-track { display:flex; width:max-content; animation:band-lauf 112s linear infinite; }
.band:hover .band-track { animation-play-state:paused; }
.band-gruppe { display:flex; align-items:center; gap:clamp(2.5rem,5vw,4.5rem); padding-right:clamp(2.5rem,5vw,4.5rem); }
/* Kundenlogos in Originalfarbe — Marken werden nicht verfremdet, nur ruhig gehalten */
.band-gruppe img { height:36px; width:auto; max-width:150px; object-fit:contain; opacity:1; transition:opacity .2s var(--ease); }
.band-gruppe img.flaeche { height:32px; border-radius:4px; }
/* Optische Angleichung: fette, kompakte Wortmarken wirken sonst groesser als der Rest */
.band-gruppe img.kompakt { height:26px; }
.band-gruppe img.mittel { height:31px; }   /* Logos mit Vollfläche minimal kleiner */
.band-gruppe img.breit { height:24px; max-width:250px; }   /* sehr breite Wortmarken (KTM) */
.band-gruppe img.hoch { height:46px; }                     /* hochformatige Marken */
.band:hover .band-gruppe img { opacity:1; }
@keyframes band-lauf { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:640px){ .band-gruppe img { height:30px; max-width:125px; } }
/* Wer Animationen abgeschaltet hat — bei Windows 11 haeufig, bei macOS unter
   „Bewegung reduzieren" — sieht statt der Laufleiste einen ruhenden Block.
   Frueher fransten die Logos dabei aus: unterschiedliche Breiten, nichts
   richtete sich aneinander aus. Deshalb bekommt hier JEDES Logo dieselbe
   Kastenbreite und dieselbe Hoehe; die Marke sitzt per object-fit mittig
   darin. Dadurch stehen die Spalten sauber untereinander, und die letzte
   Reihe zentriert sich von selbst. */
@media (prefers-reduced-motion:reduce){
  .band { -webkit-mask:none; mask:none; }
  .band-track { animation:none; width:auto; display:block; }
  .band-gruppe[aria-hidden="true"] { display:none; }
  .band-gruppe { display:flex; flex-wrap:wrap; justify-content:center;
    gap:clamp(1.9rem,3.6vw,3rem) clamp(1.4rem,2.8vw,2.4rem); padding-right:0; }
  .band-gruppe img,
  .band-gruppe img.flaeche,
  .band-gruppe img.kompakt,
  .band-gruppe img.mittel,
  .band-gruppe img.breit,
  .band-gruppe img.hoch {
    flex-grow:0; flex-shrink:0;
    flex-basis:clamp(104px, 10.5vw, 148px);
    width:clamp(104px, 10.5vw, 148px);
    max-width:none; height:36px; object-fit:contain; }
}
@media (prefers-reduced-motion:reduce) and (max-width:640px){
  .band-gruppe { gap:1.6rem 1rem; }
  .band-gruppe img,
  .band-gruppe img.flaeche,
  .band-gruppe img.kompakt,
  .band-gruppe img.mittel,
  .band-gruppe img.breit,
  .band-gruppe img.hoch { flex-basis:calc(33.333% - .7rem); width:calc(33.333% - .7rem); height:28px; }
}

/* ---------- Logo-Wand (statisch, groß, bordiert) ---------- */
/* Einzelne Kacheln statt Haarlinien-Raster: bei 22 Logos in vier Spalten blieben
   sonst zwei Plaetze in der letzten Reihe uebrig — als Loch oder als leere weisse
   Kachel, beides sieht nach Fehler aus. So endet die Reihe einfach. */
.logowand { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.3vw,1rem); }
.logowand > div { background:#fff; border:1px solid var(--linie); border-radius:12px;
  min-height:150px; display:flex; align-items:center; justify-content:center; padding:2rem; }
.logowand img { max-height:64px; width:auto; max-width:72%; object-fit:contain; filter:brightness(0); opacity:.85; }
.logowand .cap { background:#fff; }
.logowand .cap span { display:block; width:44px; height:3px; border-radius:2px; background:var(--rot); }
@media (max-width:980px){ .logowand { grid-template-columns:repeat(3,1fr); } .logowand > div { min-height:120px; padding:1.25rem; } .logowand img { max-height:44px; } }

/* ---------- Kundenstimmen ---------- */
.stimme { background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:2rem; display:flex; flex-direction:column; }
.sek-kachel .stimme { border:none; }
.stimme::before { content:''; display:block; width:44px; height:3px; border-radius:2px; background:var(--rot); margin-bottom:1.4rem; }
.stimme blockquote { font-size:1.125rem; font-weight:600; line-height:1.55; color:var(--ink); }
.stimme figcaption { margin-top:auto; padding-top:1.4rem; font-size:.95rem; color:var(--muted); }
.stimme figcaption strong { display:block; color:var(--ink); font-weight:700; }

/* ---------- Video-Facade ---------- */
.video { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:var(--kachel-2); container-type:inline-size; }
.video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Play-Knopf mittig mit Puls-Ring — soll beim Scrollen nicht zu uebersehen sein */
.video-play { position:absolute; inset:0; width:100%; display:flex; align-items:center; justify-content:center; }
.video-play::after { content:''; position:absolute; inset:0; background:rgb(10 10 10 / .2); transition:background .25s var(--ease); }
.video-play:hover::after { background:rgb(10 10 10 / .32); }
.video-play > span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:clamp(66px,17cqi,92px); height:clamp(66px,17cqi,92px); border-radius:50%; background:var(--rot);
  box-shadow:0 14px 34px -10px rgb(10 10 10 / .45); transition:transform .2s var(--ease); }
.video-play > span::before { content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  animation:video-puls 2.4s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes video-puls {
  0%   { box-shadow:0 0 0 0    rgb(241 95 92 / .65); }
  70%  { box-shadow:0 0 0 24px rgb(241 95 92 / 0); }
  100% { box-shadow:0 0 0 0    rgb(241 95 92 / 0); }
}
.video-play:hover > span { transform:scale(1.07); }
.video-play:focus-visible { outline:none; }
.video-play:focus-visible > span { outline:3px solid #fff; outline-offset:4px; }
.video-play svg { width:clamp(23px,5.8cqi,31px); height:clamp(23px,5.8cqi,31px); fill:#fff; margin-left:4px; flex:none; }
/* Der Name steckt im aria-label, sichtbar braucht der Kreis kein Wort */
.video-play .wort { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .video-play > span::before { animation:none; } }

/* ---------- Foto ---------- */
.foto { border-radius:var(--radius); overflow:hidden; }
/* <picture> ist von Haus aus inline und wuerde die Hoehenkette unterbrechen —
   das Bild darin faellt dann auf seine Eigenhoehe zurueck. */
.foto picture { display:block; width:100%; height:100%; }
.foto img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Formulare ---------- */
label { display:block; font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
input,select,textarea { width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff; border:1.5px solid var(--linie); border-radius:var(--radius-btn); padding:.85rem 1rem; transition:border-color .2s var(--ease); }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgb(241 95 92 / .25); }
input::placeholder,textarea::placeholder { color:var(--muted); }
.feld + .feld { margin-top:1.25rem; }
/* Newsletter-Zeile */

/* ---------- Footer (die EINE dunkle Fläche) ---------- */
.fuss { background:var(--ink); color:rgb(255 255 255 / .78); margin-top:clamp(3.25rem,6.5vw,5.5rem); }
.fuss-cta { padding-block:clamp(3.5rem,7vw,6rem); border-bottom:1px solid rgb(255 255 255 / .12); }
.fuss-cta h2 { color:#fff; max-width:760px; }
.fuss-cta .lead { color:rgb(255 255 255 / .78); margin-top:1.25rem; max-width:620px; }
.fuss-cta .btn { background:#fff; color:var(--ink); }
.fuss-cta .btn:hover { background:var(--rot); color:#fff; }
.fuss-cta .btn-ghost { border-color:rgb(255 255 255 / .5); color:#fff; }
.fuss-cta .btn-ghost:hover { border-color:var(--rot); color:var(--rot); }
/* Newsletter statt Erstgespraech-CTA — nur Startseite, auf der dunklen Flaeche */
.fuss-nl { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.fuss-nl h2 { color:#fff; max-width:18ch; }
.fuss-nl p.lead { color:rgb(255 255 255 / .78); margin-top:1.15rem; max-width:44ch; }
.fuss-nl input { background:rgb(255 255 255 / .07); border-color:rgb(255 255 255 / .3); color:#fff; }
.fuss-nl input::placeholder { color:rgb(255 255 255 / .55); }
.fuss-nl input:focus-visible { border-color:#fff; box-shadow:0 0 0 3px rgb(255 255 255 / .22); }
.fuss-nl .btn { background:#fff; color:var(--ink); flex:none; }
.fuss-nl .btn:hover { background:var(--rot); color:#fff; }
.fuss-nl .klein { margin-top:.95rem; font-size:.85rem; color:rgb(255 255 255 / .55); }
@media (max-width:820px){ .fuss-nl { grid-template-columns:1fr; } .fuss-nl h2 { max-width:none; } }
.fuss-haupt { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-block:3.5rem; }
/* Social: Anthrazit-Kacheln statt runder Knoepfe — die Seite kennt nur Rundungen,
   keine Kreise. Icon per Viewbox optisch zentriert, nicht nur geometrisch. */
.fuss-social { display:flex; gap:.6rem; margin-top:1.5rem; }
.fuss-haupt .fuss-social a { width:42px; height:42px; border-radius:11px; background:#1E1E1E;
  display:flex; align-items:center; justify-content:center; padding:0; color:rgb(255 255 255 / .82);
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.fuss-haupt .fuss-social a:hover { background:#2C2C2C; color:#fff; transform:translateY(-2px); }
.fuss-haupt .fuss-social a:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.fuss-social svg { width:20px; height:20px; display:block; fill:currentColor; }
.fuss-haupt img { height:34px; width:auto; margin-bottom:1.1rem; }
.fuss-marke { font-size:.95rem; line-height:1.6; }
.fuss-marke strong { color:#fff; }
.fuss-sub { margin-top:-.35rem; font-size:.95rem; color:rgb(255 255 255 / .78); }
/* line-height mitgeben: die Basisregel fuer h3 setzt 1.3, h4 lag bei 1.12 —
   ohne diese Zeile wuerde der Wechsel von h4 auf h3 den Footer um 2 px strecken. */
.fuss h3 { color:#fff; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; margin-bottom:1.1rem; line-height:1.12; }
.fuss-haupt a { display:inline-block; padding:.35rem 0; font-size:.95rem; color:rgb(255 255 255 / .78); transition:color .2s var(--ease); }
.fuss-haupt a:hover { color:#fff; }
.fuss-legal { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.5rem; border-top:1px solid rgb(255 255 255 / .14); font-size:.85rem; color:rgb(255 255 255 / .55); }
.fuss-legal a { color:inherit; padding:.35rem .5rem; margin:-.35rem -.5rem; }
.fuss-legal a:hover { color:#fff; }
.fuss-legal nav { display:flex; gap:1.5rem; }
@media (max-width:980px){ .fuss-haupt { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .fuss-haupt { grid-template-columns:1fr; gap:2rem; } .fuss-legal { flex-direction:column; align-items:flex-start; } }

/* ---------- Neue Realität kompakt (Mochary-Muster: Titel+Figur links, Text rechts, Zahlen darunter) ---------- */
/* Text links unter der Überschrift, Figur rechts auf Höhe der Überschrift */
.real2 { display:grid; grid-template-columns:7fr 4fr; gap:clamp(1.25rem,2.5vw,2rem); align-items:start; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.real2-links h2 { font-size:clamp(1.9rem,3.2vw,2.7rem); }
.real2-text { margin-top:2rem; }
.real2-text p + p { margin-top:1.1rem; }
.real2-text strong { color:var(--ink); }
/* Figur: größer, weiter nach links, Oberkante auf Höhe der Überschrift */
.real2-figur { justify-self:start; align-self:start; }
.real2-figur img { width:clamp(210px,19vw,300px); mix-blend-mode:multiply; margin-top:3rem; }
@media (max-width:980px){ .real2 { grid-template-columns:1fr; } .real2-figur { justify-self:start; } .real2-figur img { width:200px; margin-top:1.5rem; } }

/* ---------- Neue Realität (Jongleur-Komposition, Deck-Folie 4) ---------- */
.real-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1rem,3vw,2.5rem); align-items:center; max-width:1000px; margin-inline:auto; }
.real-figur { width:clamp(220px,26vw,320px); }
.real-figur img { mix-blend-mode:multiply; }
.real-spalte { display:flex; flex-direction:column; gap:clamp(1.6rem,4vh,2.6rem); }
.real-spalte.links { align-items:flex-end; text-align:right; }
.real-spalte.rechts { align-items:flex-start; }
.real-label { font-size:clamp(1rem,1.5vw,1.25rem); font-weight:600; color:var(--ink); white-space:nowrap; }
.real-fazit { text-align:center; font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:700; color:var(--ink); margin-top:2.5rem; }
@media (max-width:760px){
  .real-grid { grid-template-columns:1fr; justify-items:center; }
  .real-figur { order:-1; }
  .real-spalte, .real-spalte.links { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.5rem; align-items:center; text-align:center; }
  .real-label { background:var(--kachel); border-radius:999px; padding:.45rem .9rem; font-size:.9rem; white-space:normal; }
}

/* ---------- Türen-Foto & Breitbild & NL-Mockup ---------- */
.tuer { overflow:hidden; }
.tuer-foto { display:block; margin:calc(-1 * clamp(2rem,4vw,3rem)) calc(-1 * clamp(2rem,4vw,3rem)) 1.75rem; }
.tuer-foto img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.breitbild { margin-top:clamp(3.25rem,6.5vw,5.5rem); }
.breitbild img { width:100%; height:clamp(320px,55vh,560px); object-fit:cover; object-position:50% 30%; display:block; }
.nl-grid { display:grid; grid-template-columns:7fr 5fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.nl-mockup img { max-width:min(100%,420px); margin-inline:auto; }
@media (max-width:980px){ .nl-grid { grid-template-columns:1fr; } }

/* ---------- Türen-Vorteilsliste (Punkt + Trennlinien) ---------- */
/* Kurzer roter Strich: markiert ein Element in einer gleichrangigen Reihe.
   Ziffern bleiben Abläufen vorbehalten, damit die Nummer etwas bedeutet. */
.marke-strich { display:block; width:28px; height:3px; border-radius:2px; background:var(--rot); margin-bottom:1.1rem; }

.tuer .mini-strich { display:inline-block; width:28px; height:3px; border-radius:2px; background:var(--rot); margin-right:.75rem; vertical-align:.32em; }
.vorteile { margin-top:1.5rem; }
.vorteile li { position:relative; padding:.95rem 0 .95rem 1.4rem; border-top:1px solid var(--linie); font-weight:500; color:var(--ink); }
.vorteile li:last-child { border-bottom:1px solid var(--linie); }
.kachel .vorteile li { border-color:#E0E0E0; }
.vorteile li::before { content:''; position:absolute; left:.15rem; top:1.42rem; width:7px; height:7px; border-radius:50%; background:var(--rot); }

/* ---------- Kundenstimmen-Slider (frei stehend, ohne Karten-Chrom) ---------- */
.slider-wrap { position:relative; }
.slider { display:flex; gap:clamp(2rem,5vw,4rem); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; padding-block:.5rem; }
.slider::-webkit-scrollbar { display:none; }
.slide { flex:0 0 min(88%, 720px); scroll-snap-align:center; display:flex; flex-direction:column; }
.slide blockquote { font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:500; line-height:1.55; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty; }
.slide figcaption { display:flex; align-items:center; gap:1rem; margin-top:1.75rem; }
.avatar { width:60px; height:60px; border-radius:50%; object-fit:cover; flex:none; }
.avatar-init { width:60px; height:60px; border-radius:50%; background:var(--kachel-2); color:var(--ink); font-weight:700; font-size:1.05rem; display:flex; align-items:center; justify-content:center; flex:none; }
.slide figcaption strong { display:block; font-weight:700; color:var(--ink); }
.slide figcaption span { display:block; font-size:.9rem; color:var(--muted); }
.slider-nav { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.75rem; }
.slider-nav button { width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--linie); display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.slider-nav button:hover { border-color:var(--ink); transform:translateY(-2px); }
.slider-nav svg { width:20px; height:20px; stroke:var(--ink); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Stimmen-Paar: frei stehende Zitate im Raster (ohne Karten-Chrom) ---------- */
.stimmen-paar { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3.5rem); }
.stimmen-paar .slide { flex:none; }
.stimmen-paar blockquote { font-size:clamp(1.05rem,1.5vw,1.2rem); }
.stimmen-paar figcaption { margin-top:1.25rem; }
@media (max-width:820px){ .stimmen-paar { grid-template-columns:1fr; gap:2rem; } }


/* ---------- Ablauf-Karten: nimmt dem Interessenten die Unsicherheit ----------
   Zeigt in wenigen Schritten, was nach der Anfrage passiert. Genutzt auf
   fuer-unternehmen.html und 1-zu-1-training.html. */
.ablauf { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2rem,3.5vw,2.75rem); }
.ablauf-schritt { background:#fff; border:1px solid var(--linie); border-radius:var(--radius);
  padding:clamp(1.5rem,2.4vw,2rem); display:flex; flex-direction:column; }
.sek-kachel .ablauf-schritt { border-color:#E0E0E0; }
.ablauf-nr { font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rot-text); margin-bottom:.85rem; }
.ablauf-schritt h3 { font-size:1.0625rem; line-height:1.35; }
.ablauf-schritt p { margin-top:.5rem; font-size:.9375rem; line-height:1.55; color:var(--muted); }
@media (max-width:900px){ .ablauf { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ablauf { grid-template-columns:1fr; } }

/* ---------- Fakten-Liste: Label links, Wert rechts, durch Haarlinien getrennt ---------- */
.fakten > div { display:grid; grid-template-columns:minmax(120px,26%) 1fr; gap:1.5rem; padding:1.15rem 0; border-top:1px solid var(--linie); }
.fakten > div:last-child { border-bottom:1px solid var(--linie); }
.fakten dt { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--rot-text); padding-top:.25rem; }
.fakten dd { font-size:1.0625rem; color:var(--ink); font-weight:500; line-height:1.5; }
@media (max-width:560px){ .fakten > div { grid-template-columns:1fr; gap:.35rem; } }

/* Breitbild höher, wenn es den Seitenabschluss trägt */
.breitbild.breit-hoch img { height:clamp(380px,62vh,660px); }

/* ---------- Showreel-Button: ruhiger Puls, zieht den Blick ohne zu blinken ---------- */
.btn-reel { display:inline-flex; align-items:center; gap:.75rem; background:transparent; color:var(--ink); font-weight:500; font-size:.9375rem; letter-spacing:.015em; padding:calc(.85rem - 1px) 1.6rem calc(.85rem - 1px) .75rem; border:1px solid var(--ink); border-radius:10px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.btn-reel:hover { color:var(--rot-tief); border-color:var(--rot-tief); }
.btn-reel .play { width:30px; height:30px; border-radius:50%; background:var(--rot); display:flex; align-items:center; justify-content:center; flex:none; animation:reel-puls 2.4s ease-out infinite; }
.btn-reel .play svg { width:12px; height:12px; fill:#fff; margin-left:2px; }
@keyframes reel-puls {
  0%   { box-shadow:0 0 0 0 rgb(241 95 92 / .55); }
  70%  { box-shadow:0 0 0 13px rgb(241 95 92 / 0); }
  100% { box-shadow:0 0 0 0 rgb(241 95 92 / 0); }
}
@media (prefers-reduced-motion:reduce){ .btn-reel .play { animation:none; } }

/* ---------- Video-Overlay (Lightbox, iframe erst nach Klick) ---------- */
.reel-overlay { position:fixed; inset:0; z-index:200; background:rgb(10 10 10 / .88); display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); overscroll-behavior:contain; }
.reel-overlay.is-offen { display:flex; }
.reel-buehne { position:relative; width:min(100%,1000px); aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden; }
.reel-buehne iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Der Knopf haengt am Overlay, nicht an der Buehne: die hat overflow:hidden fuer
   die runden Ecken und hat ihn mit top:-3rem komplett weggeschnitten —
   unsichtbar und nicht anklickbar. Klicks landeten nur zufaellig richtig,
   weil der Hintergrund dahinter ebenfalls schliesst. */
.reel-zu { position:absolute; top:clamp(.75rem,2.5vw,1.5rem); right:clamp(.75rem,2.5vw,1.5rem);
  z-index:2; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.9rem; line-height:1; }
.reel-zu:hover { color:var(--rot); }

/* ---------- Gegenüberstellung: was oft passiert / was du bekommst ---------- */
.gegen { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,2rem); align-items:stretch; }
.gegen > div { border-radius:var(--radius); padding:clamp(1.75rem,3vw,2.5rem); }
.gegen .oft { background:var(--kachel); }
.gegen .stattdessen { background:#fff; border:1px solid var(--linie); }
.sek-kachel .gegen .oft { background:#EAEAEA; }
.gegen h3 { font-size:1.0625rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; margin-bottom:1.5rem; }
.gegen .oft h3 { color:var(--muted); }
.gegen .stattdessen h3 { color:var(--rot-text); }
.gegen ul li { position:relative; padding-left:1.9rem; line-height:1.5; }
.gegen ul li + li { margin-top:.9rem; }
.gegen .oft li { color:var(--muted); }
/* Verweise muessen sich vom Text unterscheiden — in der gedaempften Spalte
   reicht die Farbe allein dafuer nicht (WCAG 1.4.1). */
.gegen li a { color:var(--ink); font-weight:600; text-decoration:underline;
  text-underline-offset:3px; transition:color .2s var(--ease); }
.gegen li a:hover { color:var(--rot-text); }
.gegen .oft li::before { content:''; position:absolute; left:.15rem; top:.62em; width:11px; height:1.5px; background:var(--muted); opacity:.7; }
.gegen .stattdessen li { color:var(--ink); font-weight:500; }
.gegen .stattdessen li::before { content:''; position:absolute; left:0; top:.2em; width:1.15em; height:1.15em; background:var(--rot);
  -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' 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width:820px){ .gegen { grid-template-columns:1fr; } }

/* ---------- Herausforderungs-Kacheln: Schlagwort + konkrete Alltagszeile ---------- */
.heraus-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; grid-auto-rows:1fr; }
.heraus-grid li { background:#fff; border-radius:var(--radius); padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; }
.sek-kachel .heraus-grid li { background:#fff; }
.heraus-grid strong { font-size:1.0625rem; font-weight:700; color:var(--ink); line-height:1.3; }
.heraus-grid span { font-size:.95rem; line-height:1.5; color:var(--muted); }
@media (max-width:980px){ .heraus-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .heraus-grid { grid-template-columns:1fr; grid-auto-rows:auto; } }

/* ---------- Fakten-Zeile im Seitenkopf (Landingpage) ---------- */
.hero-fakten { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1.9rem; font-size:.9375rem; font-weight:600; color:var(--ink); }
.hero-fakten i { display:block; width:5px; height:5px; border-radius:50%; background:var(--rot); flex:none; }

/* ---------- Leiser dritter Weg unter den Hero-Buttons (Freebie) ---------- */
.hero-frei { margin-top:1.5rem; font-size:.9375rem; color:var(--muted); }
.hero-frei a { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--muted); border-bottom:1px solid var(--linie); padding-bottom:3px; transition:color .2s var(--ease), border-color .2s var(--ease); }
.hero-frei a:hover { color:var(--ink); border-color:var(--ink); }
.hero-frei .pfeil { transition:transform .2s var(--ease); }
.hero-frei a:hover .pfeil { transform:translateX(3px); }

/* ---------- Freebie-Dialog (hält den Besucher auf der Seite) ---------- */
.dialog { position:fixed; inset:0; z-index:200; background:rgb(10 10 10 / .55); display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); overscroll-behavior:contain; }
/* Der Dialog soll ohne Scrollen hineinpassen — auch auf dem Handy. Deshalb
   bekommt die Textspalte mehr Breite (dann stehen die Felder nebeneinander und
   Headline wie Fliesstext brauchen weniger Zeilen), und die Hoehe rechnet mit
   dvh statt vh: auf dem Handy zaehlt vh die eingeklappte Adressleiste mit,
   dvh nicht — sonst scrollt es genau dann, wenn die Leiste sichtbar ist. */
.dialog-karte { position:relative; width:min(100%,920px); max-height:90dvh; overflow-y:auto; background:#fff; border-radius:var(--radius); box-shadow:0 40px 90px -30px rgb(10 10 10 / .5); display:grid; grid-template-columns:7fr 4fr; }
.dialog-text { padding:clamp(1.75rem,3vw,2.5rem); }
.dialog-text h2 { font-size:clamp(1.4rem,2.3vw,1.8rem); }
.dialog-text .lead { font-size:1rem; margin-top:.9rem; }
.dialog-text .strich { margin-block:1rem .25rem; }
.dialog-text .quelle { margin-top:1rem; }
/* Die Bildspalte traegt das Hochformat formatfuellend — vorher schwebte ein
   kleines Rechteck in einer grauen Flaeche. */
.dialog-bild { padding:0; border-radius:0 var(--radius) var(--radius) 0; overflow:hidden; }
.dialog-bild picture { display:block; width:100%; height:100%; }
.dialog-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.dialog-zu { position:absolute; top:.75rem; right:.75rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--ink); font-size:1.5rem; line-height:1; z-index:1; transition:background .2s var(--ease); }
.dialog-zu:hover { background:var(--kachel); }
@media (max-width:760px){
  .dialog-karte { grid-template-columns:1fr; }
  .dialog-bild { display:none; }
}
/* Sehr niedrige Fenster (Laptop mit vielen Leisten, Handy im Querformat):
   lieber enger setzen als scrollen lassen. */
@media (max-height:700px){
  .dialog { padding:1rem; }
  .dialog-karte { max-height:100%; }
  .dialog-text { padding:1.5rem; }
  .dialog-text h2 { font-size:1.35rem; }
  .dialog-text .lead { font-size:.95rem; margin-top:.7rem; }
  .dialog-text .kicker { display:none; }
  .dialog-text .ac-form { margin-top:1.2rem; }
  .dialog-text .quelle { margin-top:.8rem; }
}
/* Sehr kleine Geraete: die Ueberschrift braucht sonst fuenf Zeilen. */
@media (max-width:360px){
  .dialog-text h2 { font-size:1.25rem; }
}
/* Unter 560px Hoehe passt nur noch das Noetige: Ueberschrift, Formular, Knopf.
   Bild und Fliesstext treten zurueck — ein sichtbarer Absendeknopf ist mehr
   wert als ein Absatz, den man wegscrollen muss. */
@media (max-height:620px){
  .dialog { padding:.75rem; }
  .dialog-karte { grid-template-columns:1fr; max-height:100%; }
  .dialog-bild { display:none; }
  .dialog-text .lead { display:none; }
  .dialog-text .strich { margin-block:.75rem 0; }
  .dialog-text .ac-form { margin-top:1.1rem; }
  .dialog-text .ac-captcha { margin-top:.7rem; }
  .dialog-text .ac-knopf { margin-top:.6rem; }
  .dialog-text .quelle { margin-top:.7rem; }
}

/* ---------- Preis-/Kauf-Karte ---------- */
.preis-grid { display:grid; grid-template-columns:6fr 5fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.preis-karte { background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(2rem,3.2vw,2.75rem); }
.preis-karte .kicker { margin-bottom:.9rem; }
.preis-zahl { font-size:clamp(2.4rem,4vw,3.2rem); font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.045em; }
.preis-zahl .einheit { font-size:.4em; font-weight:600; letter-spacing:-.01em; margin-left:.15em; }
.preis-karte .haken { margin-top:1.75rem; padding-top:1.75rem; border-top:1px solid var(--linie); }
.preis-karte .haken li { font-size:.9375rem; }
.preis-karte .btn { display:block; width:100%; margin-top:1.9rem; padding-block:1.05rem; font-size:1rem; font-weight:700; }
.preis-fuss { font-size:.85rem; color:var(--muted); margin-top:1rem; text-align:center; }
@media (max-width:900px){ .preis-grid { grid-template-columns:1fr; } }

/* ---------- Trainingsplan: klebender Zähler + Zeitachse ---------- */
.plan { display:grid; grid-template-columns:4fr 8fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.plan-kopf { position:sticky; top:calc(var(--nav-h) + 3rem); }
.plan-zahl { font-size:clamp(4.5rem,8.5vw,7rem); font-weight:700; color:var(--rot-text); line-height:.82; letter-spacing:-.055em; font-variant-numeric:tabular-nums; }
.plan-label { font-size:1.0625rem; font-weight:700; color:var(--ink); line-height:1.35; margin-top:1rem; min-height:2.7em; }
.plan-balken { margin-top:1.5rem; height:4px; border-radius:2px; background:var(--kachel-2); overflow:hidden; max-width:260px; }
.plan-balken i { display:block; height:100%; width:9%; background:var(--rot); border-radius:2px; transition:width .45s var(--ease); }
.plan-liste { position:relative; padding-left:2.75rem; }
.plan-liste::before { content:''; position:absolute; left:8px; top:1.6rem; bottom:1.6rem; width:2px; background:var(--kachel-2); }
.plan-liste li { position:relative; padding:1.15rem 0; }
.plan-liste li::before { content:''; position:absolute; left:-2.75rem; top:1.6rem; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #D8D8D8; transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.plan-liste li.aktiv::before { border-color:var(--rot); background:var(--rot); transform:scale(1.2); }
.plan-liste li h3 { font-size:1.2rem; opacity:.55; transition:opacity .35s var(--ease); }
.plan-liste li p { margin-top:.45rem; color:var(--muted); font-size:.9875rem; line-height:1.55; max-width:58ch; opacity:.55; transition:opacity .35s var(--ease); }
.plan-liste li.aktiv h3, .plan-liste li.aktiv p { opacity:1; }
.plan-nr { display:block; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text); margin-bottom:.45rem; }
.plan-liste li.start h3, .plan-liste li.bonus h3 { font-size:1.0625rem; }
@media (max-width:980px){
  .plan { grid-template-columns:1fr; }
  .plan-kopf { position:static; }
  .plan-label { min-height:0; }
  .plan-liste li h3, .plan-liste li p { opacity:1; }
  /* Zahl, Label und Balken sind der Mitlauf-Anzeiger der klebenden Spalte.
     Steht die Spalte still, doppeln sie nur den ersten Listeneintrag. */
  .plan-zahl, .plan-label, .plan-balken { display:none; }
  .plan-kopf .btn-zeile { margin-top:0 !important; }
}

/* ---------- Mitlaufende Angebotsleiste ---------- */
.leiste { position:fixed; left:0; right:0; bottom:0; z-index:90; background:#fff; border-top:1px solid var(--linie); box-shadow:0 -14px 36px -22px rgb(10 10 10 / .3); transform:translateY(115%); transition:transform .32s var(--ease); }
.leiste.an { transform:none; }
.leiste .in { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem; }
.leiste strong { display:block; font-size:1rem; font-weight:700; color:var(--ink); line-height:1.3; }
.leiste span { display:block; font-size:.85rem; color:var(--muted); margin-top:.15rem; }
.leiste .btn { flex:none; }
@media (max-width:640px){
  .leiste .leiste-text { display:none; }
  .leiste .in { justify-content:center; }
  .leiste .btn { width:100%; }
}
@media (prefers-reduced-motion:reduce){ .leiste { transition:none; } }

/* ---------- Zitat-Wand (kurze Stimmen im Raster) ---------- */
.zwand-s { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2.25rem,4vw,3rem) clamp(2rem,4vw,3rem); margin-top:clamp(3rem,5vw,4rem); padding-top:clamp(2.5rem,4vw,3.25rem); border-top:1px solid var(--linie); }
.zitat-s blockquote { font-weight:500; color:var(--ink); line-height:1.6; text-wrap:pretty; }
.zitat-s figcaption { margin-top:.9rem; font-size:.95rem; font-weight:700; color:var(--ink); }
@media (max-width:980px){ .zwand-s { grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .zwand-s { grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--linie); max-width:var(--prose); }
.faq details { border-bottom:1px solid var(--linie); }
.faq summary { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:1.35rem 0; font-size:1.0625rem; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; flex:none; font-size:1.6rem; font-weight:400; line-height:.9; color:var(--rot-tief); }
.faq details[open] summary::after { content:'–'; }
.faq details > p { padding-bottom:1.4rem; }
.faq details > p + p { margin-top:-.6rem; }

/* ---------- Claim-Band: die Markenidee, einmal je Seite ---------- */
.claim-band { padding-block:clamp(2.75rem,5vw,4.25rem); border-block:1px solid var(--linie); }
.claim { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:600; line-height:1.3; letter-spacing:-.02em; color:var(--ink); max-width:22ch; text-wrap:balance; }
.claim-akzent { color:var(--rot-tief); }
@media (max-width:640px){ .claim { max-width:none; } }

/* ---------- Textlinks als Touch-Ziel: mobil auf 44px ----------
   min-height greift bei display:inline nicht — der Innenabstand oben und
   unten vergroessert die Klickflaeche stattdessen auf ueber 44 px. */
@media (max-width:640px){
  .link-cta { padding-block:.62rem; }
}

/* ---------- Touch-Ziele im Footer: mobil auf 44px ---------- */
@media (max-width:640px){
  .fuss-haupt a { padding:.72rem 0; }
  .fuss-legal { row-gap:.25rem; }
  .fuss-legal a { padding:.7rem .5rem; margin:0 -.5rem; }
  .fuss-legal nav { gap:.75rem; flex-wrap:wrap; }
}

/* ---------- Hero mobil: erst das Bild, dann Botschaft, zuletzt die Handlung ----------
   Auf dem Handy stapelt der Hero. Stand das Foto am Ende, las die Seite sich als
   Textwand mit Bild-Anhang. Das Foto traegt jetzt den ersten Eindruck, die Headline
   folgt direkt darunter, der Button schliesst nach der Begruendung ab. */
@media (max-width:980px){
  .hero-grid { gap:clamp(1.75rem,4vw,2.5rem); }
  .hero-grid .hero-foto, .hero-grid .hero-bild { order:-1; max-width:min(100%,520px); }
  /* Die Hoehenbremse greift nur, wenn das Fenster flach ist — auf dem gedrehten
     Handy waere das Foto sonst hoeher als der ganze Bildschirm. */
  .hero-grid .hero-foto, .hero-grid .hero-bild .hero-foto { aspect-ratio:5/4; max-height:min(60vh,460px); }
  .hero-grid > div:first-child { order:0; }
}

/* ---------- Handy-Feinschliff ----------
   Was auf dem Laptop nebeneinander steht, stapelt hier. Alles in diesem Abschnitt
   greift ausschliesslich mobil und laesst die Laptop-Ansicht unberuehrt. */

/* Headline: 43 px auf 342 px Inhaltsbreite zerlegt lange Woerter in Treppen —
   "Starke / Unternehmen / brauchen / starke / Mitarbeitende." Eine Spur kleiner
   spart auf fuenf Seiten eine ganze Zeile, ohne die Wucht zu nehmen.
   text-wrap:balance ist fuer kurze Titel gedacht; ab vier Zeilen fuellt pretty besser. */
@media (max-width:560px){
  h1 { font-size:2.45rem; text-wrap:pretty; }
  h2 { text-wrap:pretty; }
}

/* Kicker: .28em Sperrung reisst die Zeile bei 342 px Inhaltsbreite auseinander */
@media (max-width:640px){
  .kicker { letter-spacing:.16em; }
}

/* Buttons: gleiche Breite fuer alle Varianten — sonst steht der Reel-Knopf
   als halbe Pille neben einem vollbreiten Nachbarn. Schmalerer Innenabstand,
   damit laengere Beschriftungen einzeilig bleiben. */
@media (max-width:640px){
  .btn, .btn-ghost { padding-inline:1.1rem; }
  .btn-reel { width:100%; justify-content:center; padding-inline:.75rem 1.1rem; }
  .btn-zeile { gap:.75rem; }
}

/* Hero-Fakten: nebeneinander bleibt ein Punkt am Zeilenende haengen */
@media (max-width:560px){
  .hero-fakten { flex-direction:column; align-items:flex-start; gap:.55rem; margin-top:1.5rem; }
  .hero-fakten i { display:none; }
  .hero-fakten span { position:relative; padding-left:1rem; }
  .hero-fakten span::before { content:''; position:absolute; left:0; top:.55em;
    width:5px; height:5px; border-radius:50%; background:var(--rot); }
}

/* Kreuter-Kachel: nebeneinander bleiben dem Text neben dem Foto 12 Zeichen pro Zeile.
   Die Breiten stehen als style-Attribut im Markup — deshalb hier mit !important,
   ausschliesslich innerhalb dieser Handy-Abfrage. */
@media (max-width:640px){
  .kreuter { flex-direction:column; }
  .kreuter > .foto { flex:0 0 auto !important; width:100%; }
  .kreuter > .foto img { width:100%; height:200px !important; min-height:0 !important; }
  .kreuter > div:last-child { padding:1.75rem !important; }
}

/* Methode + Wirkung: gestapelt folgt "Was sich veraendert" direkt auf den CTA.
   48 px lesen sich als Zusammengehoerigkeit — zwischen Sektionen liegen 104 px,
   fuer den Unterabschnitt liegt 72 px genau dazwischen. */
@media (max-width:980px){
  .methode2 { row-gap:4.5rem; }
}

/* Kacheln: 32 px Innenabstand links und rechts lassen 278 px Textbreite —
   zu wenig fuer Zeilen wie "Zum Business Mental Training". */
@media (max-width:480px){
  .kachel, .kachel-w { padding:1.6rem; }
}

/* Pfeil-Links: als inline-flex rutscht der Pfeil beim Umbruch allein an den
   rechten Rand. Inline haelt ihn am letzten Wort. */
@media (max-width:640px){
  .link-cta { display:inline; }
  .link-cta .pfeil { display:inline-block; margin-left:.4rem; }
}

/* Logo-Wand: 13 Reihen a 120 px sind auf dem Handy 1.600 px reines Scrollen */
@media (max-width:560px){
  .logowand > div { min-height:92px; padding:1.1rem; }
  .logowand img { max-height:40px; max-width:88%; }
}

/* Touch-Ziele: Logo und Social-Icons auf 44 px */
@media (max-width:980px){
  .nav-logo { display:flex; align-items:center; min-height:44px; padding-right:.5rem; }
  .fuss-haupt .fuss-social a { width:44px; height:44px; }
}

/* ---------- Utilities ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.klaeren { font-size:.85rem; color:var(--muted); }
.klaeren::before { content:'[KLÄREN] '; font-weight:700; color:var(--rot-text); }

/* ---------- Motion (ruhig; ohne JS alles sichtbar) ---------- */
html.js .r { opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
html.js .r.sichtbar { opacity:1; transform:none; }
html.js [data-stagger] > .r:nth-child(2){ transition-delay:.09s; }
html.js [data-stagger] > .r:nth-child(3){ transition-delay:.18s; }
html.js [data-stagger] > .r:nth-child(4){ transition-delay:.27s; }
html.js [data-stagger] > .r:nth-child(5){ transition-delay:.36s; }
html.js [data-stagger] > .r:nth-child(6){ transition-delay:.45s; }
html.js [data-stagger] > .r:nth-child(7){ transition-delay:.54s; }
html.js [data-stagger] > .r:nth-child(8){ transition-delay:.63s; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  html.js .r { opacity:1; transform:none; transition:none; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ---------- ActiveCampaign-Formulare ----------
   Zwei Felder plus Knopf in einer Zeile, darunter Platz fuer das Captcha und
   die Rueckmeldung. Auf dem Handy stapelt alles. */
/* Reihenfolge: Felder, dann Captcha, dann Knopf. Der Knopf steht zuletzt,
   damit niemand klickt, bevor er den Haken gesehen hat.
   Gestapelt wird nach der Breite des KASTENS, nicht des Fensters — dasselbe
   Formular sitzt mal in einer schmalen Dialogspalte, mal in einer breiten
   Sektion. Ohne Container-Abfrage waeren die Felder im Dialog zu schmal. */
.ac-form { container-type:inline-size; }
.ac-felder { display:grid; grid-template-columns:1fr 1.15fr; gap:.75rem; align-items:start; }
.ac-knopf { width:100%; justify-content:center; margin-top:.75rem; }
@container (max-width:420px){ .ac-felder { grid-template-columns:1fr; } }
@media (max-width:560px){ .ac-felder { grid-template-columns:1fr; } }
/* Honigtopf: unsichtbar fuer Menschen, ausfuellbar fuer Bots. Nicht display:none —
   manche Bots ueberspringen genau das. */
.ac-honig { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ac-captcha { margin-top:1.1rem; }
.ac-status { margin-top:1.1rem; font-size:.95rem; line-height:1.55; }
.ac-status-laeuft { color:var(--muted); }
.ac-status-fehler { color:var(--rot-text); font-weight:600; }
.ac-status-ok { font-size:1.05rem; font-weight:600; color:var(--ink); }
.ac-status:focus-visible { outline:2px solid var(--rot-text); outline-offset:4px; }
/* Auf der dunklen Fussfläche kehren sich die Farben um. */
.fuss-nl .ac-status-laeuft { color:rgb(255 255 255 / .6); }
.fuss-nl .ac-status-ok { color:#fff; }
.fuss-nl .ac-status-fehler { color:#FF9C9A; }
/* Im Freebie-Dialog sitzt das Formular auf heller Fläche. */
.dialog-text .ac-form { margin-top:1.75rem; }
/* Das Captcha-Kaestchen ist 304px breit und unveraenderlich. Wird der Kasten
   schmaler, skalieren wir es herunter, statt quer scrollen zu lassen. */
@container (max-width:310px){
  .ac-captcha { transform:scale(.85); transform-origin:left top; height:calc(78px * .85); }
}