/* ==========================================================================
   Dahlke4You · Ausbildungen · Design-System
   Marke aus dahlke4you.com/atem und /meditation und dem Rosetten-Logo:
   Eine Schrift: Montserrat (Dahlke-CI, seit 28.10.2026), Navy-Überschriften,
   Fließtext in Stahlblau, Akzente in Light statt Kursiv,
   Gold als Handlungsfarbe, Himmelblau und Creme als Flächen.
   Eigenständig, gemeinsam für Atem und Meditation.
   ========================================================================== */

:root{
  /* Navy, aus Logo und Live-Seite */
  --navy-950:#111A26;
  --navy-900:#161E2A;           /* Live-H1 */
  --navy-800:#1E3250;           /* dunkle Flächen */
  --navy-700:#253E60;
  --navy:#2C4A6E;               /* Live-Button-Text, Paketkarte */
  --navy-dahlke:#2F3E52;        /* Dahlke-Blau aus den Sternen im Logo */

  /* Text */
  --text:#3A5275;               /* Live #5B7BA3; 04.11.2026 für 40 bis 60 vertieft (7,9:1, vorher #4A6890) */
  --text-soft:#5B7BA3;          /* Live-Fließtextfarbe für große Schrift */
  --text-mute:#4C6587;          /* 04.11.2026 vertieft (6:1, vorher #566F90) */

  /* Himmel */
  --sky-50:#F5F9FE;
  --sky-100:#E8F3FC;            /* Live-Fläche */
  --sky-200:#D7E8F7;
  --sky-300:#BFD7EE;
  --sky-400:#9DBEDF;
  --ico-kreis:#DBECFB;          /* Icon-Kreis, gemessen an Noels Vorlage (04.11.2026) */

  /* Gold */
  --gold:#F4C454;               /* Live-CTA */
  --gold-600:#E5B545;
  --gold-700:#90650F;           /* Gold als Schrift auf Hell, AA auf allen hellen Flächen */
  --gold-200:#F9E2A6;
  --gold-50:#FDF6E3;

  /* Papier */
  --cream:#FDF8F3;              /* Live-Fläche */
  --white:#FFFFFF;

  --line:#E2EBF5;
  --line-2:#CFDDEC;
  --line-dark:rgba(255,255,255,.14);

  /* Schatten- und Abdunklungsfarbe als RGB, damit eine Seite die Farbwelt
     komplett umstellen kann (z. B. Meditation in Violett) */
  --shade:30,50,80;
  --ink-rgb:17,26,38;
  --hero-licht:255,255,255;

  /* Eine Schrift für alles: Montserrat (Dahlke-CI, Wunsch von Claudia, 28.10.2026).
     Akzente ohne Kursiv: Gewicht 300 plus Farbe. Die Namen --serif/--sans bleiben als Rollen. */
  --serif:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  /* Eine Radienfamilie, überall */
  --r-s:5px; --r-m:5px; --r-l:5px; --r-pill:5px; /* vorher 12 / 18 / 26 / 999 px */
  /* 10.11.2026 Noel: alle Ecken 5 px (Fotos, Videos, Buttons, Karten, Kästen, Etiketten, Formular). Kreise bleiben Kreise (Porträts, Icons, Play-Symbole, Aufzählungspunkte). */

  --sh-1:0 1px 2px rgba(var(--ink-rgb),.04),0 8px 24px rgba(var(--shade),.06);
  --sh-2:0 2px 6px rgba(var(--ink-rgb),.05),0 22px 54px rgba(var(--shade),.11);
  --sh-3:0 40px 90px rgba(var(--ink-rgb),.22);
  --sh-gold:0 6px 22px rgba(229,181,69,.38);

  --nav-h:72px;
  --wrap:1180px; --wrap-l:1320px; --wrap-s:860px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:5px}
/* Auf dunklen Flächen wäre der Navy-Ring unsichtbar */
.s-navy :focus-visible,.pkg :focus-visible,.ft:not(.is-hell) :focus-visible{outline-color:var(--gold)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:.6em 1em;border-radius:var(--r-s);text-decoration:none}
.skip:focus{top:12px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy-900);margin:0 0 .55em;font-weight:700;line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.15rem,5.2vw,4.1rem);line-height:1.1;font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.3vw,2.6rem)}
h3{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.3;font-weight:600;letter-spacing:-.01em}
h4{font-size:1.05rem;line-height:1.35}
h1 em,h2 em,h3 em{font-style:normal;font-weight:300;color:var(--navy)}
/* Keine Kursivschrift geladen: nie schräg rechnen lassen */
html{font-synthesis-style:none}
em,i,cite,dfn,address{font-style:normal}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--navy)}
.lead{font-size:clamp(1.08rem,1.45vw,1.24rem);line-height:1.7;color:var(--text)}
.small{font-size:.9rem;line-height:1.6}
.tiny{font-size:.875rem;line-height:1.55;color:var(--text-mute)}
.center{text-align:center}
.kern{font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.65;color:var(--navy)}

/* Kicker als Pille wie auf der Live-Seite. Seit Runde 2 (28.10.2026) ohne Versalien
   und Sperrung: weite Grossbuchstaben lesen sich nach Baukasten. */
.kicker{display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.2rem;padding:.55em 1.2em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.86);border:1px solid var(--line);font-family:var(--sans);font-size:.88rem;font-weight:600;
  letter-spacing:0;color:var(--navy)}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,196,84,.22);flex:none}
/* Obertitel: kleine halbfette Zeile, ohne Striche und ohne Versalien (Runde 2, 28.10.2026) */
.eyebrow{display:inline-flex;align-items:center;gap:.5em;margin:0 0 .85rem;font-size:.95rem;font-weight:600;letter-spacing:0;
  line-height:1.4;color:var(--gold-700)}
.eyebrow.is-center{justify-content:center}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-l{max-width:var(--wrap-l);margin:0 auto;padding:0 24px}
.wrap-s{max-width:var(--wrap-s);margin:0 auto;padding:0 24px}
.sec{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(72px,9vw,128px) 0}
.sec.is-tight{padding:clamp(52px,6vw,84px) 0}
.sec-head{max-width:780px;margin:0 0 clamp(36px,4.6vw,60px)}
.sec-head.is-center{margin-left:auto;margin-right:auto;text-align:center}
.grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.is-top{align-items:start}
@media (max-width:960px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:640px){.g-2,.g-3{grid-template-columns:1fr}.wrap,.wrap-l,.wrap-s{padding:0 20px}}

/* Flächen */
.s-white{background:var(--white)}
.s-cream{background:var(--cream)}
.s-sky{background:linear-gradient(180deg,var(--sky-100) 0%,var(--sky-50) 100%)}
.s-sky-rev{background:linear-gradient(180deg,var(--sky-50) 0%,var(--sky-100) 100%)}
.s-navy{background:var(--navy-800);color:rgba(255,255,255,.8)}
.s-navy h2,.s-navy h3,.s-navy h4{color:#fff}
.s-navy h2 em,.s-navy h3 em{color:var(--gold)}
.s-navy .lead,.s-navy p{color:rgba(255,255,255,.78)}
.s-navy strong,.s-navy b{color:#fff}
.s-navy .eyebrow{color:var(--gold)}
.s-navy .kern{color:var(--gold-200)}
.s-navy .tiny{color:rgba(255,255,255,.55)}
/* Texturebene: liegt unter dem Inhalt, niedrige Deckkraft, leichte Parallaxe */
.tex::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--tex);background-size:cover;background-position:center;
  opacity:var(--tex-o,.6);pointer-events:none}
@media (hover:hover) and (pointer:fine){.tex::before{transform:translate3d(0,var(--tex-y,0),0)}}
/* Rosette als Wasserzeichen */
.rosette-wm{position:absolute;z-index:-1;width:min(62vw,620px);aspect-ratio:1;opacity:.09;pointer-events:none;
  background:url(../img/rosette-gold.webp?v=1792410601) center/contain no-repeat}
.s-navy .rosette-wm{opacity:.06;filter:brightness(1.4)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.9em;border-radius:5px;
  border:1.5px solid transparent;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn .pf{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .pf{transform:translateX(4px)}
.btn-gold{background:linear-gradient(180deg,#F7CD66 0%,var(--gold) 55%,#EDB948 100%);color:var(--navy);box-shadow:var(--sh-gold),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(229,181,69,.46),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-line{background:rgba(255,255,255,.7);color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-line-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-line-light:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-lg{padding:1.12em 2.2em;font-size:1.06rem}
.btn-sm{padding:.7em 1.3em;font-size:.88rem}
/* Fingerziel in der Kopfzeile mindestens 44 px (Prüfung Meditation K15) */
.hdr .btn{min-height:44px}
.btn-block{display:flex;width:100%}
/* Zweite Zeile im Knopf, z. B. Zahlungshinweis */
.btn .zz{display:block;font-size:.875rem;font-weight:600;letter-spacing:0;margin-top:.25em}
.btn.has-zz{flex-direction:column;gap:0;line-height:1.15}
/* Zusatzzeile 14 px: weniger Seitenpolster, damit sie ab 375 px einzeilig bleibt */
.btn.has-zz{padding-left:.75em;padding-right:.75em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-row.is-center{justify-content:center}
.cta-hint{font-size:.9375rem;color:var(--text-mute);margin-top:.9rem}
.s-navy .cta-hint{color:rgba(255,255,255,.58)}
.sec-cta{margin-top:clamp(36px,4.5vw,56px);text-align:center}

/* ---------- Kopfzeile ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);display:flex;align-items:center;
  transition:background .3s,box-shadow .3s,height .3s}
.hdr.is-stuck{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(var(--shade),.06)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;min-width:0}
.brand img{width:46px;height:46px;flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-t b{font-family:var(--serif);font-size:1rem;color:var(--navy-900);white-space:nowrap}
.brand-t span{font-size:.82rem;letter-spacing:0;color:var(--navy);font-weight:600;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a:not(.btn){font-size:.92rem;font-weight:700;color:var(--navy);text-decoration:none;opacity:.86;transition:opacity .2s}
.nav a:not(.btn):hover{opacity:1}
.burger{display:none;width:46px;height:46px;border-radius:5px;border:1px solid var(--line-2);background:rgba(255,255,255,.85);
  position:relative;cursor:pointer}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:13px;right:13px;height:1.8px;background:var(--navy);border-radius:2px;transition:transform .3s,opacity .3s}
.burger::before{top:16px}.burger span{top:22px}.burger::after{top:28px}
.burger.is-on::before{transform:translateY(6px) rotate(45deg)}.burger.is-on span{opacity:0}.burger.is-on::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:85;background:rgba(253,248,243,.98);display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:90px 28px 40px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.mnav.is-open{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.mnav a{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--navy-900);text-decoration:none;padding:.45em 0;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:22px;padding:1em 1.9em;font-family:var(--sans);font-size:1.05rem;border-bottom:0}
/* Navigation nur, wenn sie in eine Zeile passt (Montserrat braucht rund 1100 px). Darunter Menü-Symbol plus Knopf. */
.nav{margin-left:auto}
.nav a{white-space:nowrap}
@media (max-width:1180px){.nav a:not(.btn){display:none}.burger{display:block}}
@media (max-width:720px){.nav .btn{display:none}.burger{display:block}.brand-t span{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(100svh,940px);display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 clamp(64px,8vw,110px);text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 60%;transform:scale(1.06);animation:hero-zoom 22s var(--ease) forwards}
@keyframes hero-zoom{to{transform:scale(1)}}
/* Weicher Lichthof hinter dem Text, hält die Luftigkeit und sichert die Lesbarkeit */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 54% at 50% 46%,rgba(var(--hero-licht),.82) 0%,rgba(var(--hero-licht),.55) 42%,rgba(var(--hero-licht),0) 72%),
             linear-gradient(180deg,rgba(var(--hero-licht),.35) 0%,rgba(var(--hero-licht),0) 30%,rgba(var(--hero-licht),0) 70%,rgba(var(--hero-licht),.75) 100%)}
.hero-in{max-width:900px;margin:0 auto;padding:0 24px}
.hero h1{margin-bottom:.25em}
.hero h1 .z2{display:block}
.hero-nach{font-family:var(--serif);font-weight:700;font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--navy);margin:0 0 1.2rem}
.hero-lead{max-width:640px;margin:0 auto 2rem;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--navy-700)}
.hero .cta-row{justify-content:center}
.hero-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:880px;margin:clamp(40px,5vw,60px) auto 0;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.hero-facts>div{padding:18px 14px;border-right:1px solid var(--line)}
.hero-facts>div:last-child{border-right:0}
.hf-n{display:block;font-family:var(--serif);font-weight:700;font-size:1.06rem;color:var(--navy-900);line-height:1.25}
.hf-l{display:block;font-size:.875rem;color:var(--text);line-height:1.4;margin-top:.25em}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(var(--shade),.35);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--navy);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:720px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 28px)}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hero::before{background:radial-gradient(ellipse 120% 60% at 50% 40%,rgba(var(--hero-licht),.55) 0%,rgba(var(--hero-licht),.25) 55%,rgba(var(--hero-licht),0) 85%),
    linear-gradient(180deg,rgba(var(--hero-licht),.25),rgba(var(--hero-licht),0) 40%,rgba(var(--hero-licht),.7))}
  .hf-l{display:none}
  body{font-size:16px;line-height:1.66}
  .lead{font-size:1.12rem}
  .hero::before{background:radial-gradient(ellipse 120% 60% at 50% 40%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 85%),
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 40%,rgba(255,255,255,.85))}
  .hero-facts{grid-template-columns:1fr 1fr}
  .hero-facts>div:nth-child(2){border-right:0}
  .hero-facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero .cta-row .btn{width:100%}
  .scroll-cue{display:none}
}

/* ---------- Karten ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card.is-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.card h3{margin-bottom:.4em}
.card p{font-size:1rem;line-height:1.65}
.card.is-gold{box-shadow:inset 0 3px 0 var(--gold),var(--sh-1)}
.s-navy .card{background:rgba(255,255,255,.05);border-color:var(--line-dark);box-shadow:none}

/* Linien-Icon auf hellblauem Kreis (Stil A, 04.11.2026, Noels Wahl). Die Icons sind
   Navy-Linien auf Weiss (icons_linie.py), die Zeichnung füllt gut die Hälfte des Kreises.
   multiply legt das Weiss randlos auf den Kreis. Klasse heisst aus Runde 2 noch ico3d. */
.ico3d{flex:none;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin:0 0 1.1rem;overflow:hidden;
  background:var(--ico-kreis)}
.ico3d img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ico3d.is-l{width:120px;height:120px}
.ico3d.is-s{width:64px;height:64px;margin:0}

/* Lernkarten */
.lern{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.lern .card{display:flex;flex-direction:column}
.lern .card p{margin-bottom:.8em}
@media (max-width:960px){.lern{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lern{grid-template-columns:1fr}}

/* Ausklappen, nativ und barrierefrei */
.more{margin-top:auto;border-top:1px solid var(--line);padding-top:.7rem}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;gap:.45em;font-size:.9375rem;font-weight:700;color:var(--navy);letter-spacing:.02em}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--gold-600);border-bottom:2px solid var(--gold-600);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.more[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.more .more-in{padding-top:.7rem;font-size:.95rem;line-height:1.65}
.more ul{margin:.4rem 0 0;padding-left:1.1em}
.more li{margin:.25em 0}
.s-navy .more{border-color:var(--line-dark)}
.s-navy .more summary{color:var(--gold)}

/* Häkchenliste */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.checks li{position:relative;padding-left:1.9em;line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:.18em;width:1.25em;height:1.25em;border-radius:50%;
  background:var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23B8862A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/76% no-repeat;
  box-shadow:inset 0 0 0 1px var(--gold-200)}
.s-navy .checks li::before,.pkg .checks li::before{background-color:rgba(244,196,84,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23F4C454' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px rgba(244,196,84,.35)}
.checks.is-2{grid-template-columns:1fr 1fr;gap:.6rem 1.6rem}
@media (max-width:640px){.checks.is-2{grid-template-columns:1fr}}

/* Schlagwörter als Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.38em .9em;border-radius:var(--r-pill);background:var(--sky-100);
  color:var(--navy);font-size:.82rem;font-weight:700;line-height:1.3}
.chip.is-gold{background:var(--gold-50);color:var(--gold-700);box-shadow:inset 0 0 0 1px var(--gold-200)}
.s-navy .chip{background:rgba(255,255,255,.08);color:#fff}

/* ---------- Zitate ---------- */
.zitat{position:relative;margin:0;padding:clamp(26px,3.4vw,44px) clamp(24px,3.4vw,48px);background:var(--white);border-radius:var(--r-l);box-shadow:var(--sh-2);text-align:left}
.zitat::before{content:"";position:absolute;top:-22px;left:clamp(22px,3vw,44px);width:52px;height:44px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 44'%3E%3Cpath d='M0 44V26C0 11 7 2 22 0l2 6C15 9 12 15 12 22h10v22H0zm28 0V26C28 11 35 2 50 0l2 6c-9 3-12 9-12 16h10v22H28z' fill='%23F4C454'/%3E%3C/svg%3E") center/contain no-repeat}
.zitat p{font-family:var(--serif);font-weight:400;font-size:clamp(1.12rem,1.8vw,1.42rem);line-height:1.6;color:var(--navy);margin:0}
.zitat cite{display:block;margin-top:1.1rem;font-style:normal;font-size:.92rem;font-weight:600;color:var(--gold-700)}
.zitat.is-ohne{background:transparent;box-shadow:none;padding:0}
.zitat.is-ohne::before{position:static;display:block;margin:0 0 1.2rem}
.zitat.is-ohne.is-center::before{margin:0 auto 1.2rem;left:auto}
.zitat.is-center{text-align:center}
.zitat.is-center::before{left:50%;margin-left:-26px}
.s-navy .zitat{background:rgba(255,255,255,.05);box-shadow:none;border:1px solid var(--line-dark)}
.s-navy .zitat p{color:#fff}
.s-navy .zitat cite{color:var(--gold)}

/* ---------- Bildband mit echten Seminarfotos ---------- */
.band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.band figure{position:relative;margin:0;border-radius:5px;overflow:hidden;aspect-ratio:3/4.3;background:var(--sky-200);box-shadow:var(--sh-1)}
.band figure:nth-child(even){transform:translateY(28px)}
.band img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.band figure:hover img{transform:scale(1.05)}
.band figcaption{position:absolute;inset:auto 0 0;padding:44px 16px 16px;font-family:var(--serif);font-weight:700;font-size:1rem;line-height:1.3;color:#fff;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),.72) 100%)}
@media (max-width:860px){
  .band{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 34px;margin:0 -20px;scrollbar-width:none}
  .band::-webkit-scrollbar{display:none}
  .band figure{scroll-snap-align:center}
  .band figure:nth-child(even){transform:none}
}

/* ---------- Infografik Atemkreis ---------- */
.kreis{position:relative;max-width:980px;margin:0 auto;aspect-ratio:1.55/1}
.kreis-bild{position:absolute;left:50%;top:50%;width:min(62%,560px);aspect-ratio:1;transform:translate(-50%,-50%)}
.kreis-bild .glow{position:absolute;inset:-6%;border-radius:50%;background:url(../gen/atemkreis-licht.jpg?v=1792406864) center/cover;mix-blend-mode:multiply;opacity:.9;
  -webkit-mask:radial-gradient(circle,#000 58%,transparent 71%);mask:radial-gradient(circle,#000 58%,transparent 71%)}
.kreis-bild .torus{position:absolute;inset:24%;animation:atmen 9s ease-in-out infinite}
.kreis-bild .torus img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(var(--shade),.18))}
@keyframes atmen{0%,100%{transform:scale(.92)}45%{transform:scale(1.04)}}
.kreis-st{position:absolute;width:min(30%,250px);text-align:left}
.kreis-st b{display:flex;align-items:center;gap:.55em;font-family:var(--serif);font-size:1.02rem;color:var(--navy-900);margin-bottom:.25em}
.kreis-st b i{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-size:.8rem;font-weight:700;
  background:var(--gold);color:var(--navy);box-shadow:0 0 0 5px rgba(244,196,84,.2)}
.kreis-st p{font-size:.92rem;line-height:1.55;margin:0}
.kreis-st.r{text-align:right}.kreis-st.r b{justify-content:flex-end}
.kreis-st.s1{left:0;top:4%}.kreis-st.s2{right:0;top:4%}.kreis-st.s3{right:0;top:56%}
.kreis-st.s4{left:0;top:56%}.kreis-st.s5{left:50%;bottom:-4%;transform:translateX(-50%);text-align:center}
.kreis-st.s5 b{justify-content:center}
@media (max-width:860px){
  .kreis{aspect-ratio:auto;display:grid;gap:14px}
  .kreis-bild{position:relative;left:auto;top:auto;transform:none;width:min(86vw,420px);margin:0 auto 12px}
  .kreis-st{position:static;width:auto;text-align:left!important;transform:none!important;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px}
  .kreis-st b{justify-content:flex-start!important}
}

/* ---------- Infografik Reise nach innen (Meditation) ---------- */
.ringe{position:relative;max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center}
.ringe-bild{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:var(--sh-3)}
.ringe-bild img{width:100%;height:100%;object-fit:cover;animation:ruhig 14s ease-in-out infinite}
@keyframes ruhig{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ringe-liste{list-style:none;margin:0;padding:0;counter-reset:r}
.ringe-liste li{position:relative;padding:0 0 1.15rem 3.3rem;margin-bottom:1.15rem;border-bottom:1px solid var(--line-dark)}
.ringe-liste li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ringe-liste li::before{counter-increment:r;content:counter(r);position:absolute;left:0;top:-.1rem;width:2.3rem;height:2.3rem;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;color:var(--navy);background:var(--gold)}
.ringe-liste b{display:block;font-family:var(--serif);font-size:1.08rem;color:#fff;margin-bottom:.15em}
.ringe-liste p{font-size:.95rem;margin:0}
@media (max-width:860px){.ringe{grid-template-columns:1fr}.ringe-bild{max-width:440px;width:100%;margin:0 auto}}

/* ---------- Der Weg: Panorama, Fortschritt, Module ---------- */
.weg-pano{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:21/8;background:var(--sky-200)}
.weg-pano img{width:100%;height:100%;object-fit:cover}
.weg-mark{position:absolute;top:var(--y,52%);left:var(--x);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.weg-mark span{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:1.15rem;
  color:var(--navy);background:rgba(255,255,255,.92);box-shadow:0 0 0 6px rgba(255,255,255,.35),var(--sh-2);transition:background .5s,color .5s,box-shadow .5s}
.weg-mark em{font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);
  background:rgba(255,255,255,.88);padding:.3em .8em;border-radius:var(--r-pill)}
.weg-mark.is-on span{background:var(--gold);box-shadow:0 0 0 8px rgba(244,196,84,.35),0 10px 30px rgba(229,181,69,.5)}
.weg-bahn{position:relative;height:4px;margin:26px 6% 0;border-radius:4px;background:var(--line-2)}
.weg-bahn i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0)*100%);border-radius:4px;background:linear-gradient(90deg,var(--gold-600),var(--gold))}
.weg-zeit{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px;margin:14px 0 0;text-align:center}
.weg-zeit div{font-size:.875rem;font-weight:700;letter-spacing:.06em;color:var(--navy)}
.weg-zeit div span{display:block;font-weight:600;letter-spacing:0;color:var(--text-mute);font-size:.875rem}
@media (max-width:720px){.weg-pano{aspect-ratio:16/10}.weg-pano img{object-position:30% 50%}.weg-mark em{display:none}.weg-mark span{width:44px;height:44px;font-size:1rem}.weg-zeit div{font-size:.875rem;letter-spacing:.02em}.weg-zeit{column-gap:16px}.weg-zeit .nw{white-space:normal}}

.module{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(36px,4.5vw,56px);align-items:stretch}
.modul{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,2.6vw,34px);box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.modul:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.modul.is-herz{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--sh-2)}
.modul-kopf{display:flex;align-items:center;gap:14px;margin-bottom:1rem}
.modul-nr{font-size:.9rem;font-weight:600;color:var(--gold-700)}
.modul h3{font-size:clamp(1.4rem,2vw,1.7rem);margin:.1em 0 .1em}
.modul-unter{font-size:.9375rem;font-weight:700;color:var(--navy);margin:0 0 .9rem}
.modul-text{font-size:.98rem;line-height:1.6;margin:0 0 1rem}
.modul .chips{margin-bottom:1.1rem}
.modul-termin{border-radius:var(--r-s);background:var(--sky-50);border:1px solid var(--line);padding:.8rem 1rem;margin:0 0 1.1rem}
.modul-termin small{display:block;font-size:.875rem;font-weight:600;color:var(--text-mute)}
.modul-termin b{display:block;font-family:var(--serif);font-size:1rem;color:var(--navy-900);line-height:1.4}
.modul-termin p{font-size:.875rem;line-height:1.45;margin:.35rem 0 0;color:var(--text-mute)}
.modul-preis{display:flex;align-items:baseline;gap:.45em;margin:auto 0 1rem;padding-top:1rem;border-top:1px solid var(--line)}
.modul-preis b{font-family:var(--serif);font-size:2rem;font-weight:800;color:var(--navy-900);letter-spacing:-.02em}
.modul-preis span{font-size:.875rem;color:var(--text-mute)}
.modul .more{margin-top:1rem;border-top:0;padding-top:0}
@media (max-width:960px){.module{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}}

/* ---------- Zertifikat ---------- */
.zert{position:relative;width:100%;max-width:640px;margin:0 auto;border-radius:5px;overflow:hidden;box-shadow:var(--sh-3)}
.zert img{width:100%}
/* Die Zertifikatsschrift steht seit 04.11.2026 im Bild (_werkzeug/zert_schrift.py), gedruckt in Drehung und Perspektive des Papiers */

/* ---------- Lehrer ---------- */
.lehrer{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.lehrer-foto{position:relative;margin:0;border-radius:5px;overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/5;background:var(--sky-200)}
.lehrer-foto img{width:100%;height:100%;object-fit:cover}
.lehrer-foto figcaption{position:absolute;right:10px;bottom:10px;font-size:.66rem;color:#fff;background:rgba(var(--ink-rgb),.62);padding:.2em .65em;border-radius:var(--r-pill)}
.lehrer.is-rev{grid-template-columns:1.1fr .9fr}
.lehrer.is-rev .lehrer-foto{order:2}
.lehrer-rolle{font-size:.95rem;font-weight:600;color:var(--gold-700);margin:0 0 .5rem}
@media (max-width:860px){.lehrer,.lehrer.is-rev{grid-template-columns:1fr}.lehrer.is-rev .lehrer-foto{order:0}.lehrer-foto{max-width:460px}}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.zahlen>div{padding:clamp(22px,3vw,36px) clamp(14px,2vw,24px);text-align:center;border-right:1px solid var(--line)}
.zahlen>div:last-child{border-right:0}
.zahl{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(2.1rem,4vw,3.1rem);line-height:1;color:var(--navy-900);letter-spacing:-.02em}
.zahl-l{display:block;margin-top:.55rem;font-size:.9rem;font-weight:700;color:var(--navy)}
.zahl-u{display:block;font-size:.875rem;color:var(--text-mute);margin-top:.2rem;line-height:1.4}
@media (max-width:720px){.zahlen{grid-template-columns:1fr 1fr}.zahlen>div:nth-child(2){border-right:0}.zahlen>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- Ort: Mosaik und Merkmale ---------- */
.mosaik{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:clamp(380px,46vw,560px)}
.mosaik figure{margin:0;border-radius:5px;overflow:hidden;background:var(--sky-200);position:relative}
.mosaik figure:first-child{grid-row:span 2}
.mosaik img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mosaik figure:hover img{transform:scale(1.05)}
.mosaik figcaption{position:absolute;left:10px;bottom:10px;padding:.35em .8em;border-radius:var(--r-pill);background:rgba(255,255,255,.9);font-size:.875rem;font-weight:700;color:var(--navy)}
@media (max-width:720px){.mosaik{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}.mosaik figure{aspect-ratio:1}.mosaik figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}}
.merkmale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(28px,3.5vw,44px)}
.merkmal{display:flex;gap:16px;align-items:flex-start;padding:6px 4px}
.merkmal h3{font-size:1.05rem;margin:0 0 .25em}
.merkmal p{font-size:.92rem;line-height:1.55;margin:0}
@media (max-width:960px){.merkmale{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.merkmale{grid-template-columns:1fr}}

/* ---------- Zielgruppen ---------- */
.zg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.zg .card{text-align:center;display:flex;flex-direction:column;align-items:center}
.zg .ico3d{margin-left:auto;margin-right:auto}
@media (max-width:960px){.zg{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.zg{grid-template-columns:1fr}}

/* ---------- Investition ---------- */
.preis-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:960px){.preis-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}}
.pkg{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--navy);color:rgba(255,255,255,.86);box-shadow:var(--sh-3)}
.pkg-band{display:flex;align-items:center;justify-content:center;gap:.7em;padding:.85rem 1rem;background:linear-gradient(180deg,#F7CD66,var(--gold));
  color:var(--navy);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.pkg-band svg{width:14px;height:14px}
.pkg-in{position:relative;padding:clamp(26px,3.4vw,42px)}
.pkg-in .rosette-wm{right:-18%;top:-10%;width:70%;opacity:.07}
.pkg h3{font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;margin:0 0 .2em}
.pkg-unter{color:var(--gold);font-family:var(--serif);font-weight:500;margin:0 0 1.4rem}
.pkg .checks{margin:0 0 1.6rem}
.pkg .checks li{color:rgba(255,255,255,.88)}
.pkg-preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1em;padding-top:1.3rem;border-top:1px solid var(--line-dark);margin-bottom:1.3rem}
.pkg-preis s{font-size:1.05rem;color:rgba(255,255,255,.72)}
.pkg-preis b{font-family:var(--serif);font-weight:800;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;color:#fff;letter-spacing:-.02em}
.pkg-spar{display:inline-flex;padding:.4em .95em;border-radius:var(--r-pill);background:rgba(244,196,84,.16);color:var(--gold);font-weight:700;font-size:.9375rem;box-shadow:inset 0 0 0 1px rgba(244,196,84,.4)}
.pkg .tiny{color:rgba(255,255,255,.58);margin-top:1rem}
.einzeln{display:grid;gap:14px}
.ez{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;box-shadow:var(--sh-1)}
.ez h4{margin:0;font-size:1.02rem}
.ez p{margin:.1em 0 0;font-size:.875rem;line-height:1.4;color:var(--text-mute)}
.ez-r{text-align:right}
.ez-r b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--navy-900)}
.ez-r a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:4px}
.ez-r a:hover{color:var(--gold-700)}
.hinweise{background:var(--sky-50);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px}
.hinweise ul{margin:0;padding-left:1.1em}
.hinweise li{font-size:.88rem;line-height:1.55;margin:.3em 0}
@media (max-width:480px){.ez{grid-template-columns:auto 1fr}.ez-r{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid var(--line);padding-top:10px}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:1.3rem 0;
  font-family:var(--serif);font-weight:700;font-size:1.06rem;color:var(--navy-900);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--gold-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23B8862A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/52% no-repeat;
  box-shadow:inset 0 0 0 1px var(--gold-200);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 0 1.4rem;font-size:1rem;line-height:1.7;max-width:760px}

/* ---------- Schlussbild ---------- */
.finale{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:clamp(96px,12vw,170px) 0}
.finale .hero-bg img{animation:none;transform:none}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(255,255,255,.84),rgba(255,255,255,.4) 60%,rgba(255,255,255,.1))}

/* ---------- Fußzeile ---------- */
.ft{background:var(--navy-950);color:rgba(255,255,255,.62);padding:clamp(48px,6vw,72px) 0 28px;font-size:.9rem}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,56px);padding-bottom:clamp(28px,3.5vw,44px);border-bottom:1px solid var(--line-dark)}
.ft-logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.ft-logo img{width:52px;height:52px}
.ft-logo b{font-family:var(--serif);color:#fff;font-size:1.05rem}
.ft h4{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.ft a{display:block;color:rgba(255,255,255,.7);text-decoration:none;padding:.28rem 0}
.ft a:hover{color:#fff}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font-size:.875rem;color:rgba(255,255,255,.56)}
@media (max-width:720px){.ft-top{grid-template-columns:1fr 1fr}.ft-top>div:first-child{grid-column:1/-1}}
/* Fingerziele mindestens 44 px */
@media (pointer:coarse){.ft a{display:flex;align-items:center;min-height:44px;padding:0}}

/* ---------- Klebende CTA-Leiste am Handy ---------- */
.stick{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));visibility:hidden;z-index:80;display:none;align-items:center;gap:12px;padding:10px 10px 10px 18px;
  background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:5px;box-shadow:0 14px 40px rgba(var(--ink-rgb),.18);
  transform:translateY(140%);transition:transform .45s var(--ease),visibility 0s linear .45s}
.stick.is-on{transition:transform .45s var(--ease),visibility 0s}
.stick.is-on{transform:none;visibility:visible}
.stick p{margin:0;font-size:.875rem;line-height:1.3;color:var(--navy)}
.stick p b{display:block;font-family:var(--serif);font-size:.92rem;color:var(--navy-900)}
.stick .btn{margin-left:auto;padding:.85em 1.3em;font-size:.9rem;flex:none}
/* Montserrat läuft breiter als Nunito Sans: sehr schmale Handys (bis 380 px) */
@media (max-width:380px){
  .btn,.btn-lg{padding-left:1.25em;padding-right:1.25em;font-size:.94rem}
  .brand{gap:.6rem}.brand img{width:40px;height:40px}
  .brand-t b{font-size:.86rem}
}
@media (max-width:360px){.stick{padding-left:14px;gap:8px}.stick .btn{padding-left:.95em;padding-right:.95em}}
@media (max-width:720px){.stick{display:flex}
  /* Fokus und Sprungziele landen über der Leiste, nicht darunter */
  html{scroll-padding-bottom:100px}}

/* ---------- Bewegung: nur als Verbesserung ---------- */
[data-rev]{opacity:1;transform:none}
.js-rev [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-rev [data-rev].is-in{opacity:1;transform:none}
.js-rev [data-rev-d="1"]{transition-delay:.1s}.js-rev [data-rev-d="2"]{transition-delay:.2s}
.js-rev [data-rev-d="3"]{transition-delay:.3s}.js-rev [data-rev-d="4"]{transition-delay:.4s}
/* Ferne Sektionen schlafen (Speicher im Instagram-Browser). animation:none statt
   pausieren: eine pausierte Animation hält ihre Grafikebene. Neustart passiert
   ausserhalb des Bildschirms, weil data-off schon bei 75 % Abstand fällt. */
[data-off] .torus,[data-off] .ringe-bild img,[data-off] .scroll-cue::after,[data-off] .hero-bg img{animation:none}
@media (prefers-reduced-motion:reduce){
  .js-rev [data-rev]{opacity:1;transform:none;transition:none}
  .hero-bg img,.kreis-bild .torus,.ringe-bild img,.scroll-cue::after{animation:none}
  .band figure:nth-child(even){transform:none}
}
@media (hover:none){.card.is-hover:hover,.modul:hover{transform:none}}
@media print{.hdr,.mnav,.stick,.scroll-cue{display:none}}

/* ==========================================================================
   Erweiterungen (19.10.): weitere Abschnittstypen, helle Varianten
   ========================================================================== */

/* ---------- Atem-Moment: sanfter Atemrhythmus zum Mitatmen ---------- */
.puls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.puls-buehne{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin:0 auto;display:grid;place-items:center}
.puls-ring{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,var(--sky-100) 45%,rgba(var(--shade),.06) 70%,transparent 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);transform:scale(.72);transition:transform 4s cubic-bezier(.45,.05,.55,.95)}
.puls-ring::after{content:"";position:absolute;inset:-3%;border-radius:50%;border:1.5px solid var(--gold);opacity:.55}
.puls.is-ein .puls-ring{transform:scale(1)}
.puls-wort{position:relative;z-index:1;text-align:center;max-width:70%}
.puls-wort b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--navy-900);transition:opacity .6s}
.puls-wort span{display:block;margin-top:.3rem;font-size:.92rem;font-weight:600;color:var(--gold-700)}
.puls-start{margin-top:1.6rem}
@media (max-width:860px){.puls{grid-template-columns:1fr}.puls-buehne{max-width:340px}}
@media (prefers-reduced-motion:reduce){.puls-ring{transition:none}}

/* ---------- Das bekommst du: Zahlen-Infografik ---------- */
.leist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.leist>div{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:22px 20px 20px;box-shadow:var(--sh-1);overflow:hidden}
.leist>div::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-200))}
.leist .ico3d{float:right;margin:-4px -4px 0 8px}
.leist-n{display:block;font-family:var(--serif);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1;color:var(--navy-900);letter-spacing:-.02em}
.leist-l{display:block;margin-top:.6rem;font-weight:700;color:var(--navy);font-size:.98rem;line-height:1.35}
.leist-u{display:block;margin-top:.3rem;font-size:.875rem;line-height:1.45;color:var(--text-mute)}
.leist>div.is-paket{background:linear-gradient(160deg,var(--gold-50),#fff 70%);border-color:var(--gold-200)}
.leist-tag{display:inline-block;margin-top:.6rem;font-size:.875rem;font-weight:600;line-height:1.45;color:var(--gold-700)}
@media (max-width:960px){.leist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .leist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .leist>div{padding:16px 14px 14px}
  .leist .ico3d{float:none;margin:0 0 10px;width:48px;height:48px}
  .leist-n{font-size:1.6rem}
  .leist-l{font-size:.9rem;hyphens:manual;-webkit-hyphens:manual}
}

/* ---------- Bild mit Beispielansicht (Online-Campus) ---------- */
.mockup{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);background:var(--sky-100)}
.mockup img{width:100%}
.mockup figcaption{position:absolute;right:12px;bottom:10px;font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--navy-900);background:rgba(255,255,255,.88);padding:.25em .7em;border-radius:var(--r-pill)}

/* ---------- Stimmen als Video ---------- */
.stimmen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,236px);justify-content:center;gap:clamp(10px,1.4vw,18px)}
.stimme-v{position:relative;margin:0;border-radius:5px;overflow:hidden;aspect-ratio:9/16;background:var(--navy-800);box-shadow:var(--sh-1)}
.stimme-v video,.stimme-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stimme-v button{position:absolute;inset:0;width:100%;border:0;padding:0 0 14px 14px;cursor:pointer;background:transparent;display:grid;place-items:end start}
.stimme-v button::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 50%,rgba(var(--ink-rgb),.55) 100%)}
.stimme-v button span{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(var(--ink-rgb),.3);transition:transform .25s var(--ease)}
.stimme-v button:hover span{transform:scale(1.08)}
.stimme-v button span::after{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--navy)}
.stimme-v.is-play button{display:none}
@media (max-width:960px){
  .stimmen{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(46%,300px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 26px;margin:0 -20px;scrollbar-width:none}
  .stimmen::-webkit-scrollbar{display:none}
  .stimme-v{scroll-snap-align:center}
}
@media (max-width:520px){.stimmen{grid-auto-columns:64%}}
/* Im Wisch-Scroller muss die Reihe links beginnen: zentriert ragt sie links aus dem Scrollbereich (Prüfung 28.10., M1) */
@media (max-width:960px){.stimmen{justify-content:start}}

/* ---------- Zweifel ernst nehmen ---------- */
.zweifel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 2rem}
.zweifel span{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1.1em;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);
  font-family:var(--serif);font-weight:500;color:var(--navy);box-shadow:var(--sh-1)}
.zweifel span::before{content:"?";display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--gold-50);color:var(--gold-700);font-family:var(--sans);font-style:normal;font-weight:700;font-size:.8em}

/* ---------- Helle Varianten (Atem: hell und leicht) ---------- */
.pkg.is-hell{background:var(--white);color:var(--text);box-shadow:0 0 0 1.5px var(--gold),var(--sh-3)}
.pkg.is-hell h3{color:var(--navy-900)}
.pkg.is-hell .pkg-unter{color:var(--gold-700)}
.pkg.is-hell .checks li{color:var(--text)}
.pkg.is-hell .checks li::before{background-color:var(--gold-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23B8862A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 1px var(--gold-200)}
.pkg.is-hell .pkg-preis{border-top-color:var(--line)}
.pkg.is-hell .pkg-preis s{color:var(--text-mute)}
.pkg.is-hell .pkg-preis b{color:var(--navy-900)}
.pkg.is-hell .pkg-spar{background:var(--gold-50);color:var(--gold-700);box-shadow:inset 0 0 0 1px var(--gold-200)}
.pkg.is-hell .tiny{color:var(--text-mute)}
.pkg.is-hell .rosette-wm{opacity:.06}
.ft.is-hell{background:linear-gradient(180deg,var(--sky-100),var(--sky-50));color:var(--text)}
.ft.is-hell .ft-logo b{color:var(--navy-900)}
.ft.is-hell h4{color:var(--gold-700)}
.ft.is-hell a{color:var(--navy)}
.ft.is-hell a:hover{color:var(--navy-900)}
.ft.is-hell .ft-top{border-bottom-color:var(--line-2)}
.ft.is-hell .ft-bot{color:var(--text-mute)}

/* Streichpreis mit Bezug „einzeln“, damit er nicht als Altpreis gelesen wird */
.pkg-einzeln{font-size:1.02rem;color:rgba(255,255,255,.78)}
.pkg.is-hell .pkg-einzeln{color:var(--text-mute)}
.zert .bsp{position:absolute;right:12px;bottom:10px;font-size:.875rem;font-weight:700;letter-spacing:.06em;color:var(--navy-900);background:rgba(255,255,255,.88);padding:.25em .7em;border-radius:var(--r-pill)}

/* ---------- Atemkreis als Orbit: Ring mit fünf Stationen im 72-Grad-Raster ---------- */
.orbit{position:relative;max-width:1080px;margin:0 auto;aspect-ratio:1.6/1}
.orbit-mitte{position:absolute;left:50%;top:50%;height:52%;aspect-ratio:1;transform:translate(-50%,-50%)}
.orbit-mitte .glow{position:absolute;inset:-22%;border-radius:50%;background:url(../gen/atemkreis-licht.jpg?v=1792406864) center/cover;mix-blend-mode:multiply;opacity:.85;
  -webkit-mask:radial-gradient(circle,#000 56%,transparent 71%);mask:radial-gradient(circle,#000 56%,transparent 71%)}
.orbit-mitte .torus{position:absolute;inset:0;animation:atmen 8s ease-in-out infinite}
.orbit-mitte .torus img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(var(--shade),.18))}
.orbit-ring{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:1;transform:translateX(-50%);overflow:visible}
.orbit-ring .bahn{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1 9;stroke-linecap:round;opacity:.9}
.orbit-ring .punkt{fill:var(--gold)}
.orbit-ring .hof{fill:var(--gold);opacity:.18}
.orbit-ring .wanderer{fill:#fff;stroke:var(--gold);stroke-width:3}
.orbit-st{list-style:none;margin:0;padding:0}
.orbit-st li{position:absolute;width:23%;top:var(--y);left:var(--x)}
.orbit-st li.l{left:auto;right:var(--r);text-align:right}
.orbit-st b{display:flex;align-items:center;gap:.55em;font-family:var(--serif);font-size:1.15rem;color:var(--navy-900);margin-bottom:.25em}
.orbit-st li.l b{flex-direction:row-reverse}
.orbit-st b i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-size:.82rem;font-weight:700;
  background:var(--gold);color:var(--navy);box-shadow:0 0 0 5px rgba(244,196,84,.22)}
.orbit-st p{font-size:.98rem;line-height:1.55;margin:0}
[data-off] .orbit-mitte .torus{animation:none}
@media (max-width:860px){
  .orbit{aspect-ratio:auto}
  .orbit-buehne{position:relative;width:min(86vw,440px);aspect-ratio:1;margin:0 auto 18px}
  .orbit-mitte{height:58%}
  .orbit-st{display:grid;gap:12px}
  .orbit-st li,.orbit-st li.l{position:static;width:auto;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px}
  .orbit-st li.l b{flex-direction:row}
}
@media (min-width:861px){.orbit-buehne{position:absolute;inset:0}}
@media (prefers-reduced-motion:reduce){.orbit-mitte .torus{animation:none}}

/* ---------- Zielgruppen als ruhige Liste statt Kachelraster ---------- */
.zg-liste{display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(28px,4vw,64px);max-width:980px;margin:0 auto;list-style:none;padding:0}
.zg-liste li{display:flex;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-2)}
.zg-liste .ico3d{width:72px;height:72px;margin:0}
/* Direkt auf hellblauer Fläche ginge der Kreis unter: einen Hauch tiefer */
.s-sky .zg-liste .ico3d,.s-sky-rev .zg-liste .ico3d{background:#CDE2F7}
.zg-liste h3{font-size:1.12rem;margin:0 0 .2em}
.zg-liste p{font-size:.98rem;line-height:1.5;margin:0}
@media (max-width:760px){.zg-liste{grid-template-columns:1fr}.zg-liste .ico3d{width:60px;height:60px}}

/* Bildunterschrift oben, wenn unten ein Gesicht liegt */
.band figcaption.is-oben{inset:0 0 auto;padding:16px 16px 44px;background:linear-gradient(0deg,rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),.6) 100%)}

/* ---------- Ablauf in Schritten, mit goldener Verbindungslinie ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(16px,2.4vw,32px);position:relative;counter-reset:s}
.schritte::before{content:"";position:absolute;left:28px;right:calc(100%/var(--n,4) - 28px);top:27px;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-200));opacity:.8}
.schritte li{position:relative;text-align:left}
.schritte li::before{counter-increment:s;content:counter(s);position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0 0 1rem;border-radius:50%;
  background:var(--white);color:var(--navy);font-family:var(--serif);font-weight:800;font-size:1.25rem;box-shadow:0 0 0 2px var(--gold),0 10px 24px rgba(var(--shade),.12)}
.schritte h3{font-size:1.08rem;margin:0 0 .35em}
.schritte p{font-size:.95rem;line-height:1.55;margin:0}
@media (max-width:760px){
  .schritte{grid-template-columns:1fr;gap:0}
  .schritte::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .schritte li{display:grid;grid-template-columns:56px 1fr;gap:0 16px;text-align:left;padding:0 0 22px}
  .schritte li::before{margin:0;grid-row:span 2}
}

/* ---------- Ergänzungen aus der Technik-Prüfung (19.10.) ---------- */
/* Fusszeilen-Überschriften ohne Überschriften-Hierarchie zu stören */
.ft .ft-h{font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--gold);margin:0 0 .7rem}
.ft.is-hell .ft-h{color:var(--gold-700)}
/* Ohne JavaScript: Bedienelemente ausblenden, die nur mit JS etwas tun */
html:not(.js) .burger,html:not(.js) [data-puls-start],html:not(.js) .stimme-v button,html:not(.js) .stick{display:none}
html:not(.js) .stimme-v{display:none}
/* Hintergründe unter der Falz erst laden, wenn der Abschnitt naht (nur mit JS) */
.js .tex:not(.bg-an)::before,.js .sec:not(.bg-an) .rosette-wm,.js .sec:not(.bg-an) .orbit-mitte .glow{background-image:none}
/* Scrollbare Leisten sichtbar fokussierbar */
.band:focus-visible,.stimmen:focus-visible{outline-offset:6px}

/* ==========================================================================
   Reiter (Runde 2, 28.10.2026): Inhalte zum Anklicken statt Scroll-Stationen.
   Gemeinsam für Atem und Meditation. Leiste oben, erster Reiter offen, Pfeiltasten,
   am Handy waagrecht wischbar. Alle Panels liegen in einer Rasterzelle übereinander:
   Die Höhe richtet sich nach dem längsten, beim Wechsel springt nichts.
   Seitenfarbe nur über Variablen, ohne diese Datei anzufassen:
     --tabs-akzent          Zahl im aktiven Reiter, Linien      (Atem: Gold)
     --tabs-akzent-text     Schrift auf dem Akzent              (Atem: Navy)
     --tabs-akzent-schrift  Akzent als Schrift auf Hell, AA     (Atem: Dunkelgold)
     --tabs-spur            Fläche der Reiterleiste
   Das Panel selbst bleibt display:block, Layout gehört ins innere .tabs-inhalt.
   ========================================================================== */
.tabs{display:grid;grid-template-columns:minmax(0,1fr)}
.tabs-list{position:relative;grid-row:1;display:flex;gap:4px;width:max-content;max-width:100%;margin:0 0 clamp(20px,2.8vw,32px);padding:5px;
  border-radius:5px;background:var(--tabs-spur,rgba(var(--shade),.07));overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none}
.tabs-list::-webkit-scrollbar{display:none}
.tabs.is-mitte .tabs-list{margin-left:auto;margin-right:auto}
.tabs-tab{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:.55em;min-height:46px;padding:.55em 1.3em;
  border:0;border-radius:5px;background:transparent;font-size:.95rem;font-weight:600;line-height:1.2;color:var(--text);
  white-space:nowrap;cursor:pointer;scroll-snap-align:center;-webkit-tap-highlight-color:transparent;
  transition:color .25s,background-color .25s,box-shadow .25s}
.tabs-tab:has(.tabs-nr){padding-left:.6em}
/* Tablet: etwas schmalere Reiter, damit kurze Leisten ohne Anschnitt passen (Prüfung Meditation K14) */
@media (min-width:641px) and (max-width:960px){.tabs-tab{padding:.55em 1em;font-size:.92rem}}
.tabs-tab:hover{color:var(--navy-900)}
.tabs-tab[aria-selected="true"]{color:var(--navy-900);background:var(--white);box-shadow:0 1px 2px rgba(var(--ink-rgb),.06),0 6px 18px rgba(var(--shade),.1)}
.tabs-tab:focus-visible{outline-offset:-2px;border-radius:5px}
/* Nummer im Reiter (optional): <span class="tabs-nr">1</span> */
.tabs-nr{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;font-size:.76rem;font-weight:700;
  color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .25s,color .25s,box-shadow .25s}
.tabs-tab[aria-selected="true"] .tabs-nr{background:var(--tabs-akzent,var(--gold));color:var(--tabs-akzent-text,var(--navy));box-shadow:none}
/* Gleitende Marke hinter dem aktiven Reiter, setzt d4u.js */
.tabs-zeiger{position:absolute;z-index:0;left:0;top:5px;bottom:5px;width:0;border-radius:5px;background:var(--white);
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.06),0 6px 18px rgba(var(--shade),.1);pointer-events:none;
  transition:transform .42s var(--ease),width .42s var(--ease)}
.has-zeiger .tabs-tab[aria-selected="true"]{background:transparent;box-shadow:none}
/* Mehr Reiter, als in die Leiste passen: weicher Rand zeigt, dass man wischen kann */
.tabs-list.is-mehr-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.tabs-list.is-mehr-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.tabs-list.is-mehr-l.is-mehr-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}

.tabs-panel{grid-row:2;grid-column:1;min-width:0;display:block}
/* Die Karte füllt die gemeinsame Höhe, so schliessen alle Reiter unten bündig ab */
.tabs-panel>.tabs-inhalt{height:100%}
.tabs-panel:focus-visible{outline-offset:4px;border-radius:5px}
.js .tabs-panel[hidden]{display:block;visibility:hidden;opacity:0;transform:translateY(10px);transition:none}
.js .tabs-panel:not([hidden]){opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
/* Ohne JavaScript: alle Panels untereinander, Leiste weg */
html:not(.js) .tabs-list{display:none}
html:not(.js) .tabs-panel{grid-row:auto}
html:not(.js) .tabs-panel[hidden]{display:block}
html:not(.js) .tabs-panel+.tabs-panel{margin-top:20px}

/* Inhalt eines Reiters: Bild und zwei bis vier Sätze, bei Bedarf Stichpunkte */
.tabs-inhalt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:clamp(340px,34vw,470px);background:var(--white);
  border:1px solid var(--line);border-radius:5px;box-shadow:var(--sh-1);overflow:hidden}
.tabs-bild{position:relative;margin:0;background:var(--sky-100)}
.tabs-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tabs-bild figcaption{position:absolute;right:12px;bottom:10px;font-size:.68rem;font-weight:600;color:var(--navy-900);background:rgba(255,255,255,.88);padding:.25em .7em;border-radius:var(--r-pill)}
.tabs-text{align-self:center;padding:clamp(26px,3.6vw,54px)}
.tabs-schritt{margin:0 0 .7rem;font-size:.88rem;font-weight:600;color:var(--tabs-akzent-schrift,var(--gold-700))}
.tabs-text h3{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.22;margin:0 0 .55em}
.tabs-text p{font-size:1.02rem;line-height:1.68}
.tabs-text .checks{margin:1.1rem 0 0}
.tabs-inhalt.is-ohne-bild{grid-template-columns:1fr;min-height:0}
/* Weiter zum nächsten Reiter: <button type="button" class="tabs-weiter" data-tabs-weiter>Weiter: Verbinden</button> */
.tabs-weiter{display:inline-flex;align-items:center;gap:.5em;min-height:44px;margin-top:1.3rem;padding:0;border:0;background:none;cursor:pointer;
  font-size:.92rem;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--tabs-akzent,var(--gold));
  text-decoration-thickness:1.5px;text-underline-offset:5px}
.tabs-weiter::after{content:"\2192";transition:transform .25s var(--ease)}
.tabs-weiter:hover::after{transform:translateX(4px)}
@media (max-width:760px){
  /* Gemeinsame Höhe nur in die Textzeile, sonst klafft Leerraum zwischen Foto und Text (Prüfung Meditation M3) */
  .tabs-inhalt{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;min-height:0}
  .tabs-bild{aspect-ratio:16/10}
  .tabs-text{align-self:start}
}
@media (max-width:640px){
  /* Leiste läuft bis an den Rand und wischt in einer Zeile */
  .tabs-list{width:auto;max-width:none;margin-left:-20px;margin-right:-20px;padding:5px 20px;border-radius:0;background:none;gap:8px}
  .tabs.is-mitte .tabs-list{margin-left:-20px;margin-right:-20px}
  .tabs-tab{background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
  .tabs-zeiger{display:none}
  .has-zeiger .tabs-tab[aria-selected="true"],.tabs-tab[aria-selected="true"]{background:var(--navy-900);color:#fff;box-shadow:none}
  .tabs-tab[aria-selected="true"] .tabs-nr{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .tabs-zeiger,.js .tabs-panel:not([hidden]){transition:none}
  .js .tabs-panel[hidden]{transform:none}
}

/* ==========================================================================
   Runde 2 (28.10.2026): bodenständiger und moderner. Echte Fotos statt Wolken
   und Aquarell, klare Flächen statt Texturen, Überschriften linksbündig,
   Knöpfe am Abschnittsende mittig. Bausteine gelten für beide Seiten.
   ========================================================================== */
/* Hero mit echtem Foto: Text links, Bild rechts, Faktenleiste darunter */
.hero.is-foto{display:block;min-height:0;text-align:left;overflow:visible;
  padding:calc(var(--nav-h) + clamp(28px,4.5vw,64px)) 0 clamp(52px,6vw,88px);
  background:linear-gradient(180deg,var(--sky-100) 0%,var(--sky-50) 62%,var(--white) 100%)}
.hero.is-foto::before{content:none}
.hero.is-foto .hero-in{max-width:var(--wrap-l);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,76px);align-items:center}
.hero.is-foto .hero-lead{margin:0 0 2rem;max-width:560px}
.hero.is-foto .cta-row{justify-content:flex-start}
/* Zweispaltig hält die Faktenleiste ihren eigenen Abstand; einspaltig (bis 960 px) trennt row-gap Text, Foto und Leiste gleichmässig */
.hero.is-foto .hero-in{row-gap:0}
.hero.is-foto .hero-facts{grid-column:1/-1;max-width:none;width:100%;margin:clamp(30px,4vw,48px) 0 0;background:var(--white);border-color:var(--line)}
.hero-foto{position:relative;margin:0;border-radius:5px;overflow:hidden;aspect-ratio:4/5;background:var(--sky-200);box-shadow:var(--sh-2)}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption,.hero-foto figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:.4em .85em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);font-size:.875rem;font-weight:600;line-height:1.35;color:var(--navy-900)}
@media (max-width:960px){
  .hero.is-foto .hero-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,5vw,36px)}
  .hero.is-foto .hero-facts{margin-top:0}
  .hero-foto{aspect-ratio:4/3;max-width:680px}
}
@media (max-width:720px){
  .hero.is-foto{padding-top:calc(var(--nav-h) + 22px)}
  .hero.is-foto .hero-lead{margin-bottom:1.6rem}
}

/* Foto als Figur, z. B. neben einem Text */
.foto{position:relative;margin:0;border-radius:5px;overflow:hidden;background:var(--sky-100);box-shadow:var(--sh-2)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto.is-hoch{aspect-ratio:4/5}
.foto.is-quer{aspect-ratio:4/3}
@media (max-width:960px){.split>.foto.is-hoch{aspect-ratio:4/3}}

/* Kurzes Zitat unter einem Text, ohne Karte */
.zitat.is-klein{padding:0;background:none;box-shadow:none;margin-top:1.6rem;padding-left:1.1rem;border-left:3px solid var(--gold)}
.zitat.is-klein::before{content:none}
.zitat.is-klein p{font-size:clamp(1.05rem,1.4vw,1.18rem)}
.zitat.is-klein cite{margin-top:.6rem}

/* Der Weg: drei echte Fotos statt Panorama, Marke leuchtet beim Scrollen auf */
.weg-bilder{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.weg-bild{position:relative;margin:0;border-radius:5px;overflow:hidden;aspect-ratio:4/3;background:var(--sky-200);box-shadow:var(--sh-1)}
.weg-bild img{width:100%;height:100%;object-fit:cover}
.weg-bild figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:.55em;padding:.35em .95em .35em .35em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);font-size:.9rem;font-weight:600;line-height:1.2;color:var(--navy-900);box-shadow:var(--sh-1)}
.weg-bild figcaption span{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;font-size:.82rem;font-weight:700;color:var(--navy);
  background:var(--white);box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background-color .5s,box-shadow .5s}
.weg-bild.is-on figcaption span{background:var(--gold);box-shadow:none}
@media (max-width:720px){
  .weg-bilder{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none}
  .weg-bilder::-webkit-scrollbar{display:none}
  .weg-bild{scroll-snap-align:center}
}
.weg-bilder:focus-visible{outline-offset:6px}
/* Modulinhalte sichtbar statt im Ausklapper */
.modul .checks{gap:.45rem;margin:0 0 1.1rem}
.modul .checks li{font-size:.93rem;line-height:1.5}
.modul-bonus{font-size:.88rem;line-height:1.5;margin:-.2rem 0 1.1rem;padding:.7rem .9rem;border-radius:var(--r-s);background:var(--gold-50);box-shadow:inset 0 0 0 1px var(--gold-200);color:var(--navy)}

/* Stimmen: Hauptreihe mit Namen, zweite Reihe kleiner */
.stimmen.is-haupt{grid-auto-columns:minmax(0,290px);gap:clamp(14px,2vw,28px)}
.stimme{margin:0;min-width:0}
.stimme-name{margin:.8rem 0 0;font-size:.92rem;line-height:1.45;color:var(--text)}
.stimme-name b{display:block;font-size:1.02rem;color:var(--navy-900)}
.stimmen-zweit{margin-top:clamp(52px,6vw,80px)}
.stimmen-zweit h3{margin-bottom:.35em}
.stimmen-zweit p{margin:0 0 clamp(20px,2.6vw,30px);max-width:640px}
@media (max-width:960px){.stimmen.is-haupt{grid-auto-columns:minmax(0,min(46%,300px))}.stimmen .stimme{scroll-snap-align:center}}
@media (max-width:520px){.stimmen.is-haupt{grid-auto-columns:minmax(0,72%)}}
/* Hauptreihe neben dem Abschnittskopf: Text links, Videos rechts */
.stimmen-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:center}
.stimmen-kopf .sec-head{margin-bottom:0}
@media (min-width:961px){.stimmen-kopf .stimmen.is-haupt{grid-auto-columns:minmax(0,250px)}.stimmen.is-links{justify-content:start}}
@media (max-width:960px){.stimmen-kopf{grid-template-columns:minmax(0,1fr);gap:28px}}
/* Ein einzelnes Video neben Text (z. B. Ruediger) */
.lehrer-video{width:100%;max-width:340px;justify-self:center}
.lehrer-video .stimme-v{box-shadow:var(--sh-2);border-radius:5px}
.lehrer-video .stimme-name{text-align:center}

/* Zielgruppen in einer Spalte neben einem Foto */
.zg-liste.is-eins{grid-template-columns:1fr;max-width:none;margin:0}

/* Schluss mit echtem Foto: Bild breit, Text und Knöpfe darunter mittig */
.finale.is-foto{padding:clamp(72px,9vw,128px) 0;background:var(--cream);text-align:left}
.finale-text{max-width:760px}
.finale-text .lead{margin:0}
.finale.is-foto .sec-cta{margin-top:clamp(28px,3.5vw,44px)}
.finale.is-foto::before{content:none}
.finale-bild{position:relative;margin:0 0 clamp(32px,4vw,52px);border-radius:5px;overflow:hidden;aspect-ratio:2/1;background:var(--sky-200);box-shadow:var(--sh-2)}
.finale-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.finale-bild{aspect-ratio:4/3}}

/* Empfehlungsband ohne Versalien */
.pkg-band{font-size:.9rem;font-weight:700;letter-spacing:0;text-transform:none}

/* Atem-Moment: klare Fläche statt Lichtbild */
.puls-ring::before{content:none}

@media (max-width:640px){.hero.is-foto .hero-in{padding:0 20px}}
/* Datumsbereiche bleiben zusammen (Prüfung 28.10., K12) */
.nw{white-space:nowrap}