/* YUTHI · App-Website · Stilvorlage (mobil zuerst, spiegelt bei dir="rtl")
   Vier Markenfarben: Dark Forest, Sage, Gold, Creme — alle anderen Werte sind Abstufungen davon. */

@font-face{font-family:"Gordita";src:url("fonts/Gordita-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"Gordita";src:url("fonts/Gordita-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Gordita";src:url("fonts/Gordita-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"Gordita";src:url("fonts/Gordita-Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  --forest:#1F2D20; --forest-2:#2C3D2E; --forest-tief:#0D140E;   /* dunkelste Abstufung von Dark Forest — Displayfassung der Uhr */
  --sage:#93B48B; --sage-dark:#5A7F5E; --sage-deeper:#486650; --sage-mist:#DDE5DD; --sage-light:#C7DABF; --sage-pale:#EEF3EC;
  --gold:#C9A14A; --gold-soft:#E0C589; --gold-pale:#F6EEDC;
  --cream:#FAF7F2; --cream-deep:#F0EBE0; --paper:#FFFEFB;
  --ink:#1A1A1A; --ink-soft:#5C5950; --ink-muted:#8C8980;
  --gutter:clamp(16px,4vw,48px);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Gordita","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--sage-deeper)}
h1,h2,h3,h4{font-weight:700;line-height:1.12;margin:0;text-wrap:balance;color:var(--forest)}
h1{font-size:clamp(36px,5.2vw,66px);letter-spacing:-.01em}
h2{font-size:clamp(27px,3.4vw,44px)}
/* Überschriften, die in EINER Zeile stehen sollen (Marcel 22.09.): sie schrumpfen mit der Breite,
   ab 1100 px wird der Umbruch verboten — darunter (und mobil) bricht der Satz normal um. */
/* Nur Deutsch und Schweizerdeutsch stehen in einer Zeile — in längeren Sprachen (ru, ko, ur …)
   würde der Satz sonst über den Rand laufen; dort bricht er wie gewohnt um. */
html[lang="de"] .eine-zeile,html[lang="de-CH"] .eine-zeile{font-size:clamp(24px,2.85vw,37px);max-width:100%}
h3{font-size:clamp(19px,1.6vw,22px)}
p{margin:0}
ul{margin:0}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--sage-dark)}
[dir="rtl"] .eyebrow{letter-spacing:0}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(52px,8vw,104px)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:60ch}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.fein{font-size:13.5px;color:var(--ink-muted);line-height:1.5}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;white-space:nowrap;cursor:pointer}
.btn-forest{background:var(--forest);color:var(--cream)}
.btn-forest:hover{background:var(--forest-2)}
.btn-ghost{border-color:var(--forest);color:var(--forest);background:transparent}
.btn-klein{padding:10px 16px;font-size:15px}
.btn-store{background:var(--paper);border-color:var(--sage-light);color:var(--forest);padding:10px 18px}
.btn-store[aria-disabled="true"]{cursor:default}
.btn-store .l{display:flex;flex-direction:column;line-height:1.15;text-align:start}
.btn-store .l small{font-size:11px;font-weight:500;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase}
.btn-store svg{width:26px;height:26px;flex:none}
.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hint-start{font-size:14px;color:var(--ink-muted)}
.hint-start a{color:var(--sage-deeper);font-weight:500;display:block;margin-top:4px;width:max-content;max-width:100%}   /* Verweis auf eigener Zeile, Pfeil bleibt dran (Marcel 16.09.) */

/* Bild-Platzhalter (bis die Fotos da sind) */
.bild-fehlt{width:100%;aspect-ratio:1206/2622;border:2px dashed var(--sage);border-radius:30px;background:var(--sage-pale);color:var(--sage-deeper);display:grid;place-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500}
.phone .bild-fehlt,.watch .bild-fehlt{border-radius:inherit}

/* Kopfzeile */
header.top{position:sticky;top:0;z-index:20;background:rgba(250,247,242,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-deep)}
header.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px;position:relative}
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand img{height:34px;width:auto}
@media (min-width:900px){.brand img{height:40px}}
footer .brand img{height:36px}
nav.main{display:none}
nav.main.offen{display:flex;flex-direction:column;position:absolute;inset-inline:0;top:100%;background:var(--paper);border-bottom:1px solid var(--cream-deep);padding:10px var(--gutter) 16px;gap:4px;box-shadow:0 18px 30px -20px rgba(31,45,32,.35)}
nav.main a{text-decoration:none;color:var(--forest);font-weight:500;font-size:16px;padding:10px 0}
nav.main a:hover{color:var(--sage-dark)}
.top .right{margin-inline-start:auto;display:flex;align-items:center;gap:8px;min-width:0}
.top .right .btn-klein{display:none}
.burger{width:44px;height:44px;border:0;background:transparent;border-radius:12px;flex:none;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--forest);margin:5px auto}

/* Sprachmenü (CSS-only) */
details.sprachen{position:relative}
details.sprachen summary{list-style:none;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--sage-light);border-radius:999px;padding:8px 10px;font-size:14px;font-weight:500;color:var(--forest);background:var(--paper);cursor:pointer;white-space:nowrap}
details.sprachen summary::-webkit-details-marker{display:none}
details.sprachen summary svg{width:16px;height:16px;flex:none}
details.sprachen summary span{display:none}
details.sprachen ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);list-style:none;padding:8px;margin:0;background:var(--paper);border:1px solid var(--cream-deep);border-radius:16px;box-shadow:0 18px 40px -18px rgba(31,45,32,.35);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:min(320px,calc(100vw - 88px));max-height:70vh;overflow-y:auto;z-index:30}
details.sprachen li a{display:block;padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--forest);font-size:14px;white-space:nowrap}
details.sprachen li a:hover{background:var(--sage-pale)}
details.sprachen li a[aria-current="true"]{background:var(--forest);color:var(--cream)}
/* Telefone: eine Spalte - zweispaltig passt "Deutsch (Schweiz)" erst ab 388px Fensterbreite */
@media (max-width:419px){details.sprachen ul{grid-template-columns:minmax(0,1fr)}}

/* Held */
.hero{padding-block:clamp(36px,6vw,88px) clamp(36px,6vw,72px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1 span{display:block}
.hero h1 .zwei{color:var(--sage-dark)}
.claim-sub{font-size:clamp(18px,1.7vw,23px);font-weight:500;color:var(--forest);max-width:30ch;line-height:1.4}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:440px}
.hero .blob{position:absolute;inset:auto 0 0 0;height:78%;background:var(--sage-mist);border-radius:48% 52% 40% 60%/50% 40% 60% 50%;z-index:0}
.hero .phone{z-index:1}
.hero .vito{position:absolute;inset-inline-start:0;bottom:0;width:min(170px,38%);z-index:2}
.hero .vita{position:absolute;inset-inline-end:0;bottom:0;width:min(210px,42%);z-index:2}

/* Telefonrahmen — iPhone-Silhouette (Marcel 16.09.): runde Ecken, Seitentasten, Rahmen in Dark Forest.
   Die Bilder sind echte iPhone-Aufnahmen (1206×2622 → 720×1565) samt Dynamic Island — der Rahmen legt nichts darüber
   und schneidet nichts ab: das Bild bestimmt die Höhe (height:auto), kein aspect-ratio am Rahmen mehr. */
/* Rand des Rahmens als Aussenabstand des BILDES (Prozent = Breite des Rahmens), nicht als padding des Rahmens:
   padding-Prozente beziehen sich auf den umgebenden Block — der Rand wurde dadurch je nach Abschnitt 7 bis 43 px dick. */
.phone{position:relative;width:min(300px,68vw);background:linear-gradient(150deg,var(--forest-2) 0%,var(--forest) 38%,var(--forest) 62%,var(--forest-2) 100%);border-radius:15.5%/7.1%;display:grid;
  box-shadow:0 38px 70px -26px rgba(31,45,32,.55),0 8px 18px -10px rgba(31,45,32,.35),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14),inset 0 -1px 0 1px rgba(13,20,14,.5);
  flex:none;isolation:isolate;container-type:inline-size}
/* Seitentasten: rechts die Ein/Aus-Taste, links Stumm + zwei Lautstärketasten (als Schatten desselben Elements, Masse in cqw = % der Rahmenbreite) */
.phone::after{content:"";position:absolute;right:-1.6cqw;top:24%;width:1.6cqw;height:11%;background:var(--forest-2);border-radius:0 3px 3px 0;
  box-shadow:-103.2cqw -16cqw 0 0 var(--forest-2),-103.2cqw 6cqw 0 0 var(--forest-2),-103.2cqw 26cqw 0 0 var(--forest-2)}
.phone::before{content:"";position:absolute;inset:3.4%;border-radius:12.5%/5.8%;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,rgba(250,247,242,.16) 0%,rgba(250,247,242,.05) 17%,transparent 34%,transparent 100%)}
.phone img{display:block;width:93.2%;height:auto;margin:3.4%;border-radius:12.5%/5.8%}
.phone .bild-fehlt{width:93.2%;margin:3.4%;aspect-ratio:1206/2622;border-radius:12.5%/5.8%}
.phone.sm{width:min(240px,calc(50% - 10px))}
.visual{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:flex-end;min-width:0}
/* 3D-Ansicht (Marcel 22.09.: „die Ansichten der Bildschirme sind langweilig") — das Gerät steht schräg im Raum.
   Nur auf breiten Bildschirmen; mobil bleibt es frontal, damit die Bildschirmfotos lesbar bleiben. */
.buehne{perspective:1400px;perspective-origin:50% 42%;display:flex;justify-content:center;gap:clamp(16px,3vw,44px);flex-wrap:wrap;min-width:0}
.buehne .phone{transform-style:preserve-3d;transition:transform .5s ease;transform:rotateY(var(--gy,0deg)) rotateX(var(--gx,0deg)) rotateZ(var(--gz,0deg))}
/* Während die Maus über dem Gerät liegt, folgt es ihr - dann ohne Nachlauf. */
.buehne .phone.folgt{transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.buehne .phone{transition:none}}
@media (min-width:880px){
  /* Das Gerät neigt sich immer ZUM Text hin, nie vom Betrachter weg (Marcel 22.09.) */
  .buehne .phone{--gy:19deg;--gx:5deg;--gz:-2deg;box-shadow:38px 44px 70px -30px rgba(31,45,32,.6),0 8px 18px -10px rgba(31,45,32,.3),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14)}
  /* steht das Gerät rechts (Text links), kippt es nach links */
  .split:not(.rev) .buehne .phone{--gy:-19deg;--gx:5deg;--gz:2deg;box-shadow:-38px 44px 70px -30px rgba(31,45,32,.6),0 8px 18px -10px rgba(31,45,32,.3),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14)}
  [dir="rtl"] .buehne .phone{--gy:-19deg;--gx:5deg;--gz:2deg}
  [dir="rtl"] .split:not(.rev) .buehne .phone{--gy:19deg;--gx:5deg;--gz:-2deg}
  /* Beim Zeigen richtet sich das Gerät auf - die Maussteuerung in app.js führt dazwischen. */
  .buehne .phone.aufrecht{--gy:0deg;--gx:0deg;--gz:0deg}
  /* „Wie im Header" (Marcel 23.09.): gleiche Neigung wie oben auf der Startseite, grösseres Gerät,
     dieselbe organische Fläche dahinter — auch wenn das Gerät rechts steht. */
  .split:not(.rev) .buehne.wie-header .phone{--gy:19deg;--gx:5deg;--gz:-2deg;
    box-shadow:38px 44px 70px -30px rgba(31,45,32,.6),0 8px 18px -10px rgba(31,45,32,.3),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14)}
  [dir="rtl"] .split:not(.rev) .buehne.wie-header .phone{--gy:-19deg;--gx:5deg;--gz:2deg}
  /* Bei den elf Bereichen steht das Gerät rechts neben der Liste - es kippt nach links,
     also zum Betrachter hin und nicht von ihm weg (Marcel 23.09.2026). */
  .bereich-buehne .phone{--gy:-19deg;--gx:5deg;--gz:2deg;
    box-shadow:-38px 44px 70px -30px rgba(31,45,32,.6),0 8px 18px -10px rgba(31,45,32,.3),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14)}
  [dir="rtl"] .bereich-buehne .phone{--gy:19deg;--gz:-2deg}
  /* Wo die Uhr am Telefon hängt, stehen die Geräte gerade (Marcel 23.09.2026) -
     geneigt passt das Paar optisch nicht zusammen. Nur die Fläche dahinter bleibt. */
  .buehne.mit-uhr .phone{--gy:0deg;--gx:0deg;--gz:0deg;
    box-shadow:0 38px 70px -26px rgba(31,45,32,.55),0 8px 18px -10px rgba(31,45,32,.35),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14),inset 0 -1px 0 1px rgba(13,20,14,.5)}
  /* weicher Schein hinter dem einzelnen Gerät — gibt Tiefe, ohne eine fünfte Farbe einzuführen */
  .buehne.einzel{position:relative}
  .buehne.einzel::before{content:"";position:absolute;inset:8% 12%;border-radius:50%;background:radial-gradient(closest-side,rgba(147,180,139,.45),transparent 72%);filter:blur(22px);z-index:0}
  /* Die organische Fläche aus dem Header (Marcel 23.09.: „kein Bewegungseffekt im Handy"
     bei Widget, Blutwerten und der Uhr). .wie-header kippt zusätzlich wie oben auf der
     Startseite, .flaeche behält die Kipprichtung des jeweiligen Abschnitts. */
  .buehne.wie-header,.buehne.flaeche{position:relative;align-items:flex-end}
  .buehne.wie-header::before,.buehne.flaeche::before{content:"";position:absolute;inset:auto 2% 0 2%;height:76%;background:var(--sage-mist);border-radius:48% 52% 40% 60%/50% 40% 60% 50%;z-index:0}
  .buehne.wie-header .phone,.buehne.flaeche .phone{position:relative;z-index:1}
  .buehne.einzel .phone{position:relative;z-index:1}
  /* Paare bekommen Tiefe durch Staffelung statt Kippen (Marcel 22.09.: nur Einzelbilder kippen) */
  .visual:not(.buehne) .phone.sm:nth-child(2){transform:translateY(22px)}
  .buehne.wie-header .phone.sm,
  .buehne.wie-header .geraet-mit-uhr{width:min(300px,82%)}
  .buehne.flaeche .phone.sm,
  .buehne.flaeche .geraet-mit-uhr{width:min(268px,44%)}
}

/* Uhrrahmen (Apple Watch) — Gehäuse mit Digital Crown und Seitentaste rechts, Bildschirm schwarz gefasst.
   Rand als Aussenabstand des BILDES (Prozent = Rahmenbreite), damit er überall gleich dick ist. */
.watch{position:relative;width:min(188px,calc(50% - 10px));background:linear-gradient(145deg,var(--forest-2),var(--forest));border-radius:30%/25%;display:grid;box-shadow:0 22px 44px -20px rgba(31,45,32,.55),inset 0 0 0 1px rgba(250,247,242,.10);flex:none}
/* Digital Crown (oben) und Seitentaste (unten) — als ein Element mit zusätzlichem Schatten */
.watch::after{content:"";position:absolute;inset-inline-end:-2.4%;top:23%;width:2.6%;height:14%;background:var(--forest-2);border-radius:0 4px 4px 0;box-shadow:0 21cqw 0 0 var(--forest-2)}
.watch{container-type:inline-size}
[dir="rtl"] .watch::after{border-radius:3px 0 0 3px}
.watch img{display:block;width:86%;height:auto;margin:7%;border-radius:26%/21%;background:var(--forest-tief);box-shadow:0 0 0 2px var(--forest-tief)}
.watch .bild-fehlt{width:86%;margin:7%;aspect-ratio:416/496;border-radius:26%/21%}
.watch .bild-fehlt{font-size:12px}
.watch-reihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:36px}

/* Problem-Band */
.band{background:var(--sage-mist)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.band p.big{font-size:clamp(21px,2.3vw,30px);font-weight:500;line-height:1.35;color:var(--forest)}
.band p.big b{color:var(--sage-dark);font-weight:700}

/* Drei Bilder */
.trio{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}
.trio figure{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.trio .phone.sm{width:min(240px,70vw)}
.trio figcaption{font-size:15px;color:var(--ink-soft);max-width:30ch}
.trio figcaption b{display:block;color:var(--forest);font-size:16px}

/* Zweispalter */
.split .wrap,.coach .wrap,.mag .wrap,.bescheid .wrap,.preis .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.coach{background:var(--paper);border-block:1px solid var(--cream-deep)}
.coach.coach-reihe .stack{max-width:72ch}
.coach.coach-reihe .trio{margin-top:0}
.abgesetzt{background:var(--paper);border-block:1px solid var(--cream-deep)}
.punkte{padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.punkte li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft)}
.punkte li svg{width:22px;height:22px;flex:none;color:var(--sage-dark);margin-top:3px}
.quote{border-inline-start:3px solid var(--gold);padding:6px 18px;color:var(--forest);font-weight:500}

/* Ziel-Karte (Ampel nur aus Sage/Gold/Creme) */
.ziel-karte{background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.ziel-karte .zeile{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-soft)}
.ziel-karte .zeile b{color:var(--forest);font-weight:500}
.ampel{width:12px;height:12px;border-radius:50%;flex:none;background:var(--cream-deep);border:1px solid var(--sage-light)}
.ampel.gut{background:var(--sage)}
.ampel.mittel{background:var(--gold)}

/* Ernährungsplan-Tage */
.plan-tage{display:flex;flex-wrap:wrap;gap:8px}
.plan-tage span{background:var(--paper);border:1px solid var(--sage-light);border-radius:12px;padding:8px 12px;font-size:14px;color:var(--forest);font-weight:500}
.plan-tage span.heute{background:var(--forest);color:var(--cream);border-color:var(--forest)}

/* Info-Karte (Supplement-Erklärung) */
.info-karte{background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.info-karte h3{display:flex;align-items:center;gap:10px}
.info-karte .stud{margin-inline-start:auto;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sage-mist);color:var(--sage-deeper);border-radius:8px;padding:4px 8px}
[dir="rtl"] .info-karte .stud{letter-spacing:0}
.info-karte dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:15px}
.info-karte dt{color:var(--sage-dark);font-weight:500}
.info-karte dd{margin:0;color:var(--ink-soft)}

/* Bereiche */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px}
.tile{flex:1 1 100%;min-width:0;background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;text-align:start;font:inherit;color:inherit;cursor:pointer;transition:border-color .2s,transform .2s}
/* Antippbare Bereiche (Marcel 23.09.2026): der gewählte Bereich ist markiert und wird im Telefon gezeigt */
.tile:hover{border-color:var(--sage)}
.tile[aria-pressed="true"]{border-color:var(--sage-dark);border-width:2px;background:var(--sage-pale)}
.tile:focus-visible{outline:2px solid var(--sage-dark);outline-offset:2px}
/* Smartwatch am Telefon (Marcel 23.09.: „Die Smartwatch soll etwas in das Handy unten
   rechts rein ragen.") - sie steht vor dem Gerät und überlappt dessen untere rechte Ecke. */
.buehne.mit-uhr{position:relative}
/* Die Uhr hängt an DIESEM Telefon, nicht am Spaltenrand - so schneidet sie überall
   dieselbe Ecke an, egal wie breit die Spalte ist (Marcel 23.09.). */
.geraet-mit-uhr{position:relative;display:flex;min-width:0;width:min(240px,calc(50% - 10px))}
.buehne.mit-uhr .geraet-mit-uhr .phone.sm,.geraet-mit-uhr .phone{width:100%}
.buehne.mit-uhr .watch.am-handy{
  position:absolute;
  inset-inline-end:-26%;
  bottom:-4%;
  width:50%;
  z-index:3;
  filter:drop-shadow(0 16px 26px rgba(31,45,32,.34));
}
@media (max-width:879px){
  .buehne.mit-uhr .watch.am-handy{inset-inline-end:-22%;bottom:-3%;width:46%}
  /* Auf der App-Seite (.flaeche) steht die Geraetegruppe so weit rechts, dass die Uhr
     ueber den BILDSCHIRMrand ragte und die Seite waagrecht scrollte - gemessen bei
     390 px: 19 px zu weit, die Uhr war rechts angeschnitten (27.09.2026).
     Die Buehne bekommt rechts Luft, der Anschnitt wird etwas flacher: Die Uhr schneidet
     die Telefonecke weiterhin an, bleibt aber ganz im Bild. Die Startseite (.wie-header)
     ist bewusst ausgenommen - dort war nie zu wenig Platz. */
  .buehne.flaeche.mit-uhr{padding-inline-end:22px}
  .buehne.flaeche.mit-uhr .watch.am-handy{inset-inline-end:-14%}
}

/* Die elf Bereiche als Liste (Marcel 23.09.2026). Auf der App-Seite steht unter jedem
   Eintrag, was man einträgt, wofür es gut ist und was die App daraus macht - dieser Teil
   klappt beim gewählten Bereich auf, damit die Liste überschaubar bleibt. */
.bereiche-wahl .bl-eintrag{
  /* Auf dem Handy füllt jeder Eintrag die Zeile; in der Spaltenliste am Desktop
     bestimmt die Höhe des Inhalts (siehe Media-Query weiter unten). */
  flex:1 1 100%;
  min-width:0;
  background:var(--paper);
  border:1px solid var(--cream-deep);
  border-radius:18px;
  overflow:hidden;
  transition:border-color .2s,background .2s;
}
/* Aufklapp-Pfeil rechts in jeder Bereichszeile (Marcel 27.09.2026: „sodass jeder erkennt,
   dass er die Bereiche durchklicken kann"). Auf dem Handy sahen die Zeilen aus wie Text.
   Absolut positioniert, damit er weder die Flex-Spalte auf dem Handy noch das Gitter auf
   dem Desktop durcheinanderbringt. */
/* Gilt für BEIDE Seiten: Die elf Bereiche stehen auf der App-Seite (mit Aufklapp-Kasten)
   UND auf der Startseite (nur Bildwechsel). Am 27.09.2026 hatte ich nur die App-Seite
   angefasst — Marcel schaute auf die Startseite und sah zu Recht keine Änderung. */
.bereiche-wahl .tile{position:relative;padding-inline-end:48px}
.bl-pfeil{
  position:absolute;
  inset-inline-end:16px;
  top:50%;
  width:22px;height:22px;
  color:var(--sage-dark);
  transform:translateY(-50%);
  transition:transform .2s;
}
.bl-pfeil svg{width:100%;height:100%;display:block}
.bereiche-wahl .tile[aria-expanded="true"] .bl-pfeil,
.bereiche-wahl .tile[aria-pressed="true"] .bl-pfeil{transform:translateY(-50%) rotate(180deg)}
@media (prefers-reduced-motion:reduce){.bl-pfeil{transition:none}}

.bereiche-wahl .bl-eintrag:hover{border-color:var(--sage)}
.bereiche-wahl .bl-eintrag.offen{border-color:var(--sage-dark);background:var(--sage-pale)}
.bereiche-wahl .bl-eintrag .tile{width:100%;background:none;border:0;border-radius:0}
.bereiche-wahl .bl-eintrag .tile[aria-pressed="true"]{background:none;border:0}
.bl-inhalt{padding:0 16px 14px 62px}
.bl-inhalt dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;font-size:14.5px}
.bl-inhalt dt{color:var(--sage-dark);font-weight:500;white-space:nowrap}
.bl-inhalt dd{margin:0;color:var(--ink-soft);line-height:1.5}
@media (max-width:620px){.bl-inhalt{padding-inline-start:16px}.bl-inhalt dl{grid-template-columns:minmax(0,1fr);gap:2px}.bl-inhalt dt{margin-top:6px}}

.bereich-buehne{margin-top:26px;display:flex;justify-content:center}

/* Die elf Bereiche auf grossen Bildschirmen (Marcel 23.09.2026: „links die Bereiche als
   untereinanderstehende Liste zum scrollen und rechts das Handy, welches dann immer den
   passenden Bereich anzeigt."). Auf dem Handy bleibt alles, wie es ist: Kacheln als
   Gitter, das Telefon darunter. */
@media (min-width:980px){
  .bereiche-wahl .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    grid-template-areas:"kopf kopf" "liste geraet";
    column-gap:clamp(28px,4vw,64px);
    align-items:start;
  }
  .bereiche-wahl .sec-head{grid-area:kopf}
  .bereiche-wahl .tiles{
    grid-area:liste;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:10px;
    /* Alle elf Bereiche stehen untereinander - kein eigenes Scrollfeld (Marcel 23.09.2026).
       Das Telefon daneben bleibt beim Scrollen der Seite stehen. */
  }
  .bereiche-wahl .bl-eintrag{flex:0 0 auto}
  .bereiche-wahl .tile{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;
    row-gap:2px;
    padding:14px 16px;
    scroll-margin-block:8px;
  }
  .bereiche-wahl .tile .ic{grid-row:1 / span 2;align-self:center}
  .bereiche-wahl .tile b{align-self:end}
  .bereiche-wahl .tile small{align-self:start}
  .bereiche-wahl .tile[aria-pressed="true"]{padding:13px 15px}
  .bereiche-wahl .bereich-buehne{
    grid-area:geraet;
    margin-top:0;
    position:sticky;
    top:96px;
  }
  .bereiche-wahl .bereich-buehne .phone{width:min(300px,94%)}
}
.bereich-buehne .phone{width:min(280px,72vw)}
@media (prefers-reduced-motion:no-preference){.tile:active{transform:scale(.985)}}
.tile .ic{width:40px;height:40px;border-radius:12px;background:var(--sage-pale);display:grid;place-items:center;color:var(--sage-dark)}
.tile .ic svg{width:22px;height:22px}
.tile b{color:var(--forest);font-size:17px}
.tile small{font-size:14px;color:var(--ink-soft);line-height:1.45}

/* Daten-Fakten */
.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.fact{background:var(--paper);border:1px solid var(--cream-deep);border-radius:16px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.fact svg{width:22px;height:22px;flex:none;color:var(--sage-dark);margin-top:2px}
.fact b{display:block;color:var(--forest)}
.fact span{font-size:14.5px;color:var(--ink-soft)}

/* Sprachen-Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{background:var(--paper);border:1px solid var(--sage-light);border-radius:999px;padding:7px 13px;font-size:14px;color:var(--forest)}

/* Preis */
.preis{background:var(--forest);color:var(--cream)}
.preis h2,.preis h3{color:var(--cream)}
.preis .lead{color:var(--sage-light)}
.preis .eyebrow{color:var(--gold-soft)}
.preis .card{background:rgba(250,247,242,.06);border:1px solid rgba(250,247,242,.16);border-radius:var(--radius);padding:24px 22px;min-width:0}
.preis .zahl{font-size:clamp(40px,4.4vw,58px);font-weight:700;color:var(--gold-soft);line-height:1;font-variant-numeric:tabular-nums}
.preis .zahl small{font-size:18px;font-weight:500;color:var(--cream);margin-inline-start:8px}
.preis .durch{text-decoration:line-through;color:var(--sage-light);font-size:18px}
.preis ul{margin:18px 0 0;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.preis li{display:flex;gap:10px;align-items:flex-start;color:var(--sage-light)}
.preis li svg{width:20px;height:20px;flex:none;color:var(--gold-soft);margin-top:3px}
.preis .fein{color:var(--sage-light);margin-top:16px}

/* Rechner */
.rechner-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.rechner-grid .rc{flex:0 1 calc(50% - 6px)}
.rc{background:var(--paper);border:1px solid var(--cream-deep);border-radius:14px;padding:14px;text-decoration:none;color:var(--forest);font-weight:500;font-size:15px;display:flex;gap:10px;align-items:center;min-width:0}
.rc span{min-width:0;overflow-wrap:anywhere}
.rc svg{width:18px;height:18px;color:var(--sage-dark);flex:none}
.rc.app{border-style:dashed;color:var(--ink-soft)}
.rc:hover{border-color:var(--sage)}

/* Wissen */
.hubs{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}
.hub{background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:22px;color:var(--ink);display:flex;flex-direction:column;gap:8px;text-decoration:none}
.hub b{color:var(--forest);font-size:19px}
.hub span{color:var(--ink-soft);font-size:15px}
.hub em{font-style:normal;color:var(--sage-deeper);font-weight:500;font-size:14px;margin-top:6px}

/* Magazin */
.mag{background:var(--cream-deep)}
.mag .bild{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;max-width:100%}
.mag .bild img{width:100%;height:100%;object-fit:cover}
.artikel{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.art{background:var(--paper);border-radius:14px;padding:14px 16px;color:var(--ink);display:flex;flex-direction:column;gap:3px;text-decoration:none}
.art small{color:var(--sage-dark);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
[dir="rtl"] .art small{letter-spacing:0}
.art b{color:var(--forest)}

/* Social */
.social{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px}
.so{background:var(--paper);border:1px solid var(--cream-deep);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-width:0}
.so svg{width:26px;height:26px;color:var(--forest)}
.so b{color:var(--forest)}
.so span{font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere}

/* Sag mir Bescheid */
.bescheid{background:var(--sage-mist);position:relative;overflow:hidden}
.bescheid .wrap{position:relative;z-index:1}
/* Avatar als Hintergrund des Bereichs (Marcel 16.09.) — steht rechts unten im Abschnitt, nur ab 880 px; mobil bleibt alles wie bisher */
.bescheid::after{content:"";display:none;position:absolute;bottom:16px;inset-inline-end:max(var(--gutter),calc((100% - 1180px)/2 + var(--gutter)));width:clamp(150px,17vw,230px);height:calc(100% - 46px);background:url("bilder/coaches/vito_brief.png") no-repeat bottom center/contain;pointer-events:none;z-index:0}
[dir="rtl"] .bescheid::after{transform:scaleX(-1)}
form.mail{display:flex;gap:10px;flex-wrap:wrap}
form.mail input{flex:1 1 200px;min-width:0;padding:14px 18px;border-radius:999px;border:1.5px solid var(--sage-light);background:var(--paper);font:inherit;font-size:16px;color:var(--ink)}
form.mail button{padding:14px 22px;border-radius:999px;border:0;background:var(--forest);color:var(--cream);font:inherit;font-weight:700;font-size:16px;cursor:pointer}
[data-bestaetigung]{background:var(--paper);border-inline-start:3px solid var(--gold);padding:10px 14px;border-radius:0 12px 12px 0;color:var(--forest);font-size:15px}

/* FAQ */
.faq .wrap{max-width:820px}
.faq details{border-bottom:1px solid var(--cream-deep);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--forest);font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sage-dark);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-soft);padding-top:8px;max-width:70ch}

/* „Weiter in der App“ (Rechner) */
.yt-weiter{margin-top:28px;background:linear-gradient(135deg,var(--sage-dark) 0%,var(--sage-deeper) 100%);color:var(--cream);border-radius:20px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.yt-weiter .eyebrow{color:var(--gold-soft)}
.yt-weiter h3{color:var(--cream)}
.yt-weiter h3 em{font-style:normal;color:var(--gold-soft)}
.yt-weiter p{color:var(--sage-pale)}
.yt-weiter .hint-start{color:var(--sage-light)}
.yt-weiter .hint-start a{color:var(--cream)}

/* Fußzeile */
footer{background:var(--forest);color:var(--sage-light);padding-block:52px 32px;font-size:14.5px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
footer h4{margin:0 0 10px;color:var(--cream);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
[dir="rtl"] footer h4{letter-spacing:0}
footer a{color:var(--sage-light);text-decoration:none;display:block;padding:3px 0}
footer .brand{color:var(--cream)}
footer .firma{margin-top:14px;line-height:1.6}
footer .firma a{display:inline;padding:0}
footer .disc{border-top:1px solid rgba(250,247,242,.14);padding-top:18px;font-size:13px;display:flex;flex-direction:column;gap:8px}
footer .disc a{display:inline;padding:0}
footer .langs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
footer .langs a{border:1px solid rgba(250,247,242,.18);border-radius:999px;padding:3px 9px;font-size:12.5px}
footer .langs a[aria-current="true"]{background:var(--cream);color:var(--forest);border-color:var(--cream)}

/* ---------- nur Handy (bis 879 px): Bildschirme direkt unter die Überschrift ----------
   Marcel 23.09.2026: „Bei Vito und Vita würde ich die beiden Handys unter der Überschrift setzen.
   Und das gilt für alle Bereiche mit Handys, ausser für den Header."
   Der Textblock wird mobil aufgelöst (display:contents), damit Augenbraue, Überschrift, Bilder und
   der restliche Text in dieser Reihenfolge stehen — am Aufbau für den Desktop ändert sich nichts. */
@media (max-width:879px){
  .split .wrap > .stack,.coach .wrap > .stack{display:contents}
  .split .wrap > .stack > .eyebrow,.coach .wrap > .stack > .eyebrow{order:1}
  .split .wrap > .stack > h2,.coach .wrap > .stack > h2{order:2}
  .split .wrap > .visual,.coach .wrap > .visual,.coach .wrap > .trio{order:3}
  .split .wrap > .stack > *,.coach .wrap > .stack > *{order:4}
  /* Die Kachelgruppe („Deine Daten bleiben deine") ist ein eigenes Kind von .wrap und
     hatte deshalb gar keine Reihenfolge — sie stand mobil VOR dem Text. Marcel am
     27.09.2026: „Die Kacheln müssen nach unten unter dem Text, unter Datenschutz-
     erklärung zur App." 5 = hinter allem aus dem Textblock (das hat 4). */
  .split .wrap > .facts{order:5}
  .split .wrap,.coach .wrap{gap:18px}
  .split .wrap > .visual,.coach .wrap > .visual{margin-block:6px 10px}
}

/* Newsletter-Block auf dem Handy: Vito mit dem Brief als Wasserzeichen rechts oben (Marcel 23.09.2026) */
@media (max-width:879px){
  .bescheid::after{display:block;top:-6px;bottom:auto;inset-inline-end:-14px;width:min(132px,34%);height:auto;
    aspect-ratio:440/1028;opacity:.2;background-position:top center}
  .bescheid .wrap{padding-top:4px}
}

/* ---------- ab 560 px ---------- */
@media (min-width:560px){
  .tile{flex-basis:calc(50% - 7px)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rechner-grid .rc{flex-basis:calc(33.333% - 8px)}
  footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .disc{grid-column:1/-1;flex-direction:row;justify-content:space-between;flex-wrap:wrap}
  details.sprachen summary span{display:inline}
}

/* ---------- ab 880 px: zweispaltig ---------- */
@media (min-width:880px){
  header.top .wrap{min-height:72px;gap:22px}
  nav.main{display:flex;gap:26px;margin-inline-start:12px;position:static;background:transparent;border:0;padding:0;box-shadow:none;flex-direction:row}
  nav.main a{font-size:15.5px;padding:0}
  .burger{display:none}
  .top .right{gap:12px}
  .top .right .btn-klein{display:inline-flex}
  .hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero-visual{min-height:520px}
  .hero .vito{width:min(190px,40%)}
  .hero .vita{width:min(230px,44%)}
  .band .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,36px)}
  .trio .phone.sm{width:min(240px,100%)}
  .split .wrap,.coach .wrap,.bescheid .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bescheid .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr) clamp(150px,17vw,230px)}   /* dritte Spalte hält Platz für den Avatar frei */
  .bescheid::after{display:block}
  .split.rev .wrap>:first-child{order:2}
  .coach .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .coach.coach-reihe .wrap{grid-template-columns:minmax(0,1fr)}   /* App-Seite: Text oben, Trio darunter */
  .mag .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .preis .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .preis .card{padding:28px}
  .tile{flex-basis:calc(25% - 11px)}
  .rechner-grid .rc{flex-basis:calc(20% - 10px)}
  .hubs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .social{grid-template-columns:repeat(4,minmax(0,1fr))}
  .watch{width:min(188px,calc(25% - 15px))}
  footer .wrap{grid-template-columns:1.3fr 1fr 1fr 1fr 1.4fr}
  .bild-fehlt{font-size:15px}
}

/* Textseiten (Presse, Über uns, Kontakt, Fragen) */
.textseite{max-width:820px;margin-inline:auto;padding:clamp(28px,5vw,64px) var(--gutter) clamp(56px,8vw,96px)}
.textseite h1{font-size:clamp(30px,4.2vw,50px);margin-bottom:10px}
.textseite .lead{margin-bottom:28px}
.textseite section{padding-block:0;margin-top:36px;display:flex;flex-direction:column;gap:12px}
.textseite h2{font-size:clamp(22px,2.6vw,30px)}
.textseite p{color:var(--ink-soft)}
.textseite ul{padding-inline-start:20px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px}
.textseite a{color:var(--sage-deeper);font-weight:500}
.fakten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0;font-size:15.5px}
.fakten dt{color:var(--sage-dark);font-weight:500;white-space:nowrap}
.fakten dd{margin:0;color:var(--ink)}
.karte{background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.downloads{display:flex;flex-wrap:wrap;gap:14px}
.downloads a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;background:var(--paper);border:1px solid var(--cream-deep);border-radius:16px;padding:14px;width:150px;font-size:13.5px;text-align:center;color:var(--forest)}
.downloads img{width:96px;height:96px;border-radius:14px;object-fit:cover}
.downloads .dunkel img{background:var(--cream)}
.downloads .hell img{background:var(--forest)}

/* Rechtsseiten (Impressum, Datenschutz, AGB, Cookies) */
.legal-hero{max-width:820px;margin-inline:auto;padding:clamp(28px,5vw,64px) var(--gutter) 0;display:flex;flex-direction:column;gap:10px}
.legal-hero h1{font-size:clamp(30px,4.2vw,50px)}
.legal-hero .sub{color:var(--ink-soft);font-size:16px}
.legal-content{max-width:820px;margin-inline:auto;padding:clamp(20px,4vw,40px) var(--gutter) clamp(56px,8vw,96px);color:var(--ink-soft);font-size:16px;line-height:1.65}
.legal-content h2{font-size:clamp(21px,2.4vw,28px);color:var(--forest);margin-top:40px;padding-top:22px;border-top:1px solid var(--cream-deep)}
.legal-content h2:first-of-type{border-top:0;padding-top:0}
.legal-content h3{font-size:18px;color:var(--forest);margin-top:24px}
.legal-content h4{font-size:16px;color:var(--forest);margin-top:18px}
.legal-content p{margin:12px 0}
.legal-content ul,.legal-content ol{padding-inline-start:22px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.legal-content a{color:var(--sage-deeper);font-weight:500}
.legal-content strong{color:var(--forest)}
.legal-content .meta{font-size:14px;color:var(--ink-muted)}
.legal-content .toc{background:var(--paper);border:1px solid var(--cream-deep);border-radius:18px;padding:18px 22px;margin:24px 0}
.legal-content .toc h3{margin:0 0 10px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);font-weight:500}
.legal-content .toc ol{columns:1;padding-inline-start:20px;gap:4px;display:block}
.legal-content .toc li{font-size:14.5px;padding:2px 0;break-inside:avoid}
.legal-content .toc a{text-decoration:none}
.legal-content .toc a:hover{text-decoration:underline}
.legal-content .lawyer-note,.legal-content .key-info,.legal-content .role-box{background:var(--gold-pale);border-inline-start:3px solid var(--gold);border-radius:0 14px 14px 0;padding:14px 18px;margin:18px 0;font-size:15px}
[dir="rtl"] .legal-content .lawyer-note,[dir="rtl"] .legal-content .key-info,[dir="rtl"] .legal-content .role-box{border-radius:14px 0 0 14px}
.legal-content .placeholder{background:var(--sage-mist);border-radius:8px;padding:2px 6px}
.legal-content table,.legal-content .cookies-table,.legal-content .legal-table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0;background:var(--paper);border-radius:14px;overflow:hidden;display:block;overflow-x:auto}
.legal-content th,.legal-content td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--cream-deep);vertical-align:top;min-width:120px}
.legal-content th{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-dark);font-weight:500;background:var(--sage-pale)}
.legal-content .badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:7px;background:var(--sage-mist);color:var(--sage-deeper)}
.legal-content .badge-essential{background:var(--sage-mist);color:var(--sage-deeper)}
.legal-content .badge-analytics{background:var(--gold-pale);color:var(--forest)}
@media (min-width:560px){.legal-content .toc ol{columns:2;column-gap:28px}}

/* Koreanisch: Zeilen nur an Wortgrenzen brechen (sonst zerreisst der Browser Wörter wie 기능 in 기 / 능) */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:anywhere}

/* Schriften je Schrift-System: Gordita kennt nur lateinische Buchstaben — für die anderen Schriften die guten
   Systemschriften nennen (Mac/iOS, Android/Noto, Windows), statt den Browser raten zu lassen */
html[lang="ar"] body,html[lang="ur"] body{font-family:"Gordita","Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif;line-height:1.85}
html[lang="hi"] body,html[lang="mr"] body{font-family:"Gordita","Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI",Arial,sans-serif;line-height:1.75}
html[lang="bn"] body{font-family:"Gordita","Noto Sans Bengali","Kohinoor Bangla","Nirmala UI",Arial,sans-serif;line-height:1.75}
html[lang="ta"] body{font-family:"Gordita","Noto Sans Tamil","InaiMathi","Nirmala UI",Arial,sans-serif;line-height:1.75}
html[lang="te"] body{font-family:"Gordita","Noto Sans Telugu","Kohinoor Telugu","Nirmala UI",Arial,sans-serif;line-height:1.75}
html[lang="ja"] body{font-family:"Gordita","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif}
html[lang="ko"] body{font-family:"Gordita","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
html[lang="zh"] body{font-family:"Gordita","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif}

/* Coach-Avatare auf Textseiten (Marcel 16.09.): Kopf mit Bild rechts, unten eine Karte mit Bild links */
.coach-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end;margin-bottom:8px}
.coach-kopf .coach-bild{width:clamp(96px,22vw,180px);height:auto;max-height:260px;object-fit:contain;object-position:bottom;justify-self:end}
.coach-karte{margin-top:56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 28px;align-items:center;background:var(--sage-mist);border-radius:28px;padding:22px 24px}
/* Auf den Textseiten setzt `.textseite section` das Innenmass auf null und faerbt jeden Link
   sage ein - beides traf auch diese Karte: Der Knopf klebte am unteren Rand und stand dunkel
   auf dunkel (Marcel 23.09.2026). Diese beiden Regeln stellen das richtig. */
.textseite .coach-karte{padding:24px 26px 28px}
.textseite .coach-karte .btn-forest{color:var(--cream);font-weight:600}
.textseite .coach-karte .btn-forest:hover{color:var(--cream)}
/* Nur das Coach-Bild der Karte selbst - NICHT der Bildschirm im Telefon, der wurde
   sonst auf 240 px gestutzt und abgeschnitten (23.09.2026). */
.coach-karte > img{width:clamp(80px,18vw,150px);height:auto;max-height:240px;object-fit:contain;object-position:bottom}
.coach-karte h2{margin:0 0 8px;font-size:clamp(20px,2.4vw,26px)}
.coach-karte p{margin:0 0 14px}
/* Ueber uns: Vito links, das Telefon mit dem echten Coach-Chat in der Mitte, Vita rechts
   (Marcel 23.09.2026). Aufbau wie im Kopf der Startseite - der Bildschirm zeigt dadurch
   unsere App und keinen erfundenen Chat. */
.coach-karte.mit-buehne{grid-template-columns:minmax(0,1fr);justify-items:stretch;padding-top:8px}
.coach-buehne{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:300px;width:100%;padding-inline:clamp(40px,12vw,120px)}
.coach-buehne .vito{position:absolute;inset-inline-start:0;bottom:0;width:min(190px,30%);height:auto;z-index:2}
.coach-buehne .vita{position:absolute;inset-inline-end:0;bottom:0;width:min(125px,20%);height:auto;z-index:2}
.coach-buehne .phone{width:clamp(110px,11vw,150px);z-index:1}
@media (max-width:620px){
  .coach-buehne{min-height:215px;padding-inline:clamp(28px,22vw,96px)}
  .coach-buehne .phone{width:clamp(100px,26vw,130px)}
}

@media (max-width:520px){.coach-karte{grid-template-columns:1fr;text-align:center;justify-items:center}.coach-kopf{align-items:start}}
/* Presse-Kopf wie die Rechner-Seite: Vita steht gross rechts im Hintergrund und wird
   vom Inhalt darunter angeschnitten (Marcel 23.09.2026). */
.presse-kopf{position:relative;display:block;margin-bottom:8px;min-height:clamp(215px,22vw,300px);padding-block:6px 10px}
.presse-kopf > div{position:relative;z-index:1;max-width:min(62ch,62%)}
.presse-kopf::after{
  content:"";
  position:absolute;
  top:-40px;
  inset-inline-end:0;
  height:clamp(330px,38vw,460px);
  aspect-ratio:333/900;
  background:url("bilder/coaches/vita_zeitung.png") no-repeat top right/contain;
  pointer-events:none;
  z-index:0;
}
[dir="rtl"] .presse-kopf::after{background-position:top left;transform:scaleX(-1)}
/* Alles, was unter dem Kopf folgt, liegt ueber Vita - sonst scheinen ihre Schuhe
   durch die Faktenbox (wie bei den Rechner-Kacheln geloest). */
.presse-kopf ~ section{position:relative;z-index:1}
.presse-kopf ~ section .fakten{background:var(--paper)}
@media (max-width:620px){
  .presse-kopf{min-height:215px}
  .presse-kopf > div{max-width:64%}
  .presse-kopf::after{height:clamp(250px,72vw,340px);top:-28px;inset-inline-end:-10px}
}

.yt-overview-header.coach-kopf{align-items:center}

/* FAQ mit Rubriken und Suche (200 Fragen, 16.09.) */
.faq-suche{display:flex;align-items:center;gap:12px;margin:8px 0 18px;flex-wrap:wrap}
.faq-suche input{flex:1 1 260px;min-width:0;padding:12px 16px;border:1px solid var(--cream-deep);border-radius:999px;font:inherit;font-size:16px;background:var(--paper);color:var(--ink)}
.faq-suche input:focus{outline:2px solid var(--sage);outline-offset:1px}
.faq-treffer{font-size:14px;color:var(--ink-soft)}
.faq-rubriken{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.faq-rubriken a{font-size:13.5px;text-decoration:none;color:var(--forest);border:1px solid var(--cream-deep);border-radius:999px;padding:6px 12px;background:var(--paper)}
.faq-rubriken a:hover{border-color:var(--sage)}
.faq-rubrik{margin-top:40px;display:block;scroll-margin-top:84px}
.faq-rubrik h2{margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--sage)}
.faq-leer{margin-top:24px;padding:16px;background:var(--sage-pale);border-radius:16px}

/* Preiskarten 3 / 6 / 12 Monate (16.09.2026) — drei Laufzeiten, feste Preise, keine Angebote */
/* Marcel 23.09.2026: „Wir sollten die Preise nicht so kommunizieren, sondern mehr auf das 7 Tage
   kostenlos testen eingehen und das verkaufen." — die Gratis-Woche steht gross oben, die Laufzeiten
   bleiben als ruhige Auswahl darunter. */
.preis .gratis{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:14px 16px;border-radius:14px;
  background:var(--gold-soft);color:var(--forest);font-size:clamp(18px,2.1vw,23px);font-weight:700;line-height:1.3;text-wrap:balance}
.preis .gratis svg{width:24px;height:24px;flex:none;margin-top:3px}
.preis .p-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.preis .p-karte{position:relative;background:rgba(250,247,242,.05);border:1px solid rgba(250,247,242,.22);border-radius:14px;padding:16px 16px 14px;min-width:0}
.preis .p-karte.beliebt{border-color:var(--gold-soft);border-width:2px;background:rgba(250,247,242,.11)}
.preis .p-karte.beliebt .p-karte-monat{color:var(--gold-soft)}
.preis .p-karte p{margin:0}
.preis .p-karte-band{display:inline-block;background:var(--gold-soft);color:var(--forest);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:8px;padding:3px 9px;margin-bottom:8px}
.preis .p-karte-titel{font-weight:700;font-size:17px;color:var(--cream)}
/* Marcel 22.09.: der Monatspreis ist die Hauptzahl, der Gesamtbetrag steht klein darunter */
.preis .p-karte-monat{font-size:clamp(20px,2.1vw,26px);font-weight:700;color:var(--cream);line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;text-wrap:balance}
.preis .p-karte-zahl{color:var(--sage-light);font-size:15px;font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums}
.preis .p-karte-chip{display:inline-block;margin-top:8px;background:rgba(250,247,242,.12);color:var(--cream);font-size:14px;font-weight:700;border-radius:999px;padding:3px 10px}
@media (min-width:560px){.preis .p-karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:880px){.preis .wrap{grid-template-columns:minmax(0,1fr)}.preis .card{padding:28px}}

/* Geräte und Apps (Marcel 23.09.2026, Vorbild MyFitnessPal): zwei Drehscheiben — Apple Health und
   Health Connect — mit dem YUTHI-Zeichen dazwischen. Bewusst OHNE fremde Logos: wir nennen nur, was
   tatsächlich dort hineinschreibt, und sagen im Kleingedruckten, dass keine Partnerschaft besteht. */
.verbund-kranz{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;margin:32px 0 26px}
.verbund .drehscheibe{background:var(--paper);border:1px solid var(--cream-deep);border-radius:22px;padding:20px 22px}
.verbund .ds-kopf{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.verbund .ds-kopf .ic{width:42px;height:42px;border-radius:13px;background:var(--sage-pale);display:grid;place-items:center;color:var(--sage-dark);flex:none}
.verbund .ds-kopf .ic svg{width:23px;height:23px}
.verbund .ds-kopf b{color:var(--forest);font-size:17px;line-height:1.3}
.verbund .ds-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.verbund .ds-liste li{border:1px solid var(--cream-deep);border-radius:999px;padding:5px 12px;font-size:14.5px;color:var(--ink-soft);background:var(--cream)}
.verbund .ds-mitte{display:grid;place-items:center}
.verbund .ds-mitte img{width:clamp(72px,12vw,104px);height:auto}
.verbund-daten{font-size:15px;color:var(--sage-dark);font-weight:500;margin-bottom:14px}
.verbund .quote{margin-top:16px}
.verbund .fein{margin-top:14px}
@media (min-width:880px){
  .verbund-kranz{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,3vw,44px)}
  .verbund-kranz.einzeln{grid-template-columns:minmax(0,1fr) auto}
}

/* Rechner-Übersicht: Vita mit dem Massband als Wasserzeichen rechts (Marcel 23.09.2026 —
   „Hier möchte ich den Vito mit der Uhr nicht haben. Wir benötigen Vita als passendes Bild.
   Am besten als Wasserzeichen."). Rein schmückend, deshalb im CSS und ohne Alternativtext. */
.rechner-kopf{position:relative;display:block;margin-bottom:8px;min-height:clamp(215px,22vw,280px);padding-block:6px 10px}
.rechner-kopf > div{position:relative;z-index:1;max-width:min(62ch,62%)}
/* Vita steht gross hinter dem Kopf und reicht mit den Beinen in den nächsten Bereich — sichtbar bleibt
   der Teil bis zu den Knien, damit man das Massband sieht (Marcel 23.09.2026). Die Rechner-Kacheln liegen
   darüber (sie bekommen dafür einen eigenen Stapelplatz), Vita ist reine Dekoration. */
.rechner-kopf::after{content:"";position:absolute;top:-46px;inset-inline-end:0;
  height:clamp(365px,41vw,495px);aspect-ratio:570/1069;
  background:url("bilder/coaches/vita_massband.png") no-repeat top right/contain;pointer-events:none;z-index:0}
.yt-overview-grid,.yt-overview-section-title,.yt-overview-section-sub,.rcat-banner{position:relative;z-index:1}
.yt-overview-card{background:var(--paper)}
[dir="rtl"] .rechner-kopf::after{transform:scaleX(-1)}
@media (max-width:620px){
  .rechner-kopf > div{max-width:none}
  .rechner-kopf::after{height:clamp(330px,84vw,420px);top:-34px;inset-inline-end:-10px}
  .rechner-kopf{min-height:215px}
  .rechner-kopf > div{max-width:64%}
}

/* YUTHI · Startseite „Krankheitssystem → Gesundheitssystem“ (Entwurf 2, 24.10.2026) — nur Markenfarben */
.gs-h1{font-size:clamp(32px,4.4vw,56px);line-height:1.12}
.gs-h1 span{display:block}
.gs-h1 b{color:var(--sage-dark);font-weight:700}
.hero-gs .lead b{color:var(--forest)}
.hero-gs .hint-start{max-width:46ch}
.gs-problem{background:var(--sage-mist)}
.zk-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:30px}
@media(min-width:900px){.zk-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zk{background:var(--paper);border:1px solid var(--cream-deep);border-radius:var(--radius);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.zk-zahl{font-size:34px;font-weight:700;color:var(--gold);line-height:1}
.zk h3{font-size:clamp(18px,1.5vw,21px)}
.zk-detail{font-size:15px;color:var(--ink-soft)}
.gs-zahlen{margin-top:24px;max-width:90ch}
.ref{font-size:.7em;margin-inline-start:1px}
.ref a{text-decoration:none;color:var(--sage-deeper);font-weight:700;padding:0 1px}
.gs-antwort{padding-bottom:0}
.gs-antwort .sec-head{max-width:62ch}
.gs-mit{background:var(--forest)}
.gs-mit .stack{align-items:flex-start;max-width:62ch}
.gs-mit h2{color:var(--cream)}
.gs-mit .lead{color:var(--sage-light)}
.gs-mit .eyebrow{color:var(--gold-soft)}
.gs-mit .btn-forest{background:var(--gold);color:var(--forest)}
.gs-mit .btn-ghost{border-color:var(--cream);color:var(--cream)}
.gs-mit .hint-start{color:var(--sage-light)}
.gs-produkt-kopf{padding-bottom:0}
.gs-quellen{padding-block:36px}
.gs-quellenliste{padding-inline-start:1.4em;display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:14px;color:var(--ink-soft)}
.gs-quellenliste a{color:var(--sage-deeper);overflow-wrap:anywhere}

/* Säulen */
.saeulen{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px}
@media(min-width:700px){.saeulen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.saeulen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.saeule{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--cream-deep);border-radius:var(--radius);padding:22px 20px;text-decoration:none;color:inherit}
.saeule:hover{border-color:var(--sage)}
.saeule h3{font-size:clamp(18px,1.5vw,21px)}
.saeule p{font-size:15px;color:var(--ink-soft)}
.gs-antwort{padding-bottom:clamp(40px,6vw,72px)}
/* Zwischen-CTA */
.gs-cta{background:var(--sage-mist);padding-block:clamp(28px,4vw,44px)}
.gs-cta .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between}
.gs-cta h3{font-size:clamp(21px,2.2vw,28px)}
.gs-cta p{color:var(--ink-soft);margin-top:4px}
/* Magazin-Einblick */
.gs-mag .wrap{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.mag-woche[hidden]{display:none}
.mag-woche{width:100%}
.mag-woche-link{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--paper);border:1px solid var(--cream-deep);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit}
@media(min-width:900px){.mag-woche-link{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.mag-woche-link img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.mag-woche-text{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,36px);align-items:flex-start;justify-content:center}
.mag-rubrik{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.mag-woche-text h3{font-size:clamp(22px,2.4vw,32px)}
.mag-teaser{color:var(--ink-soft);font-size:15.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gs-mag .mag-reihe{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:900px){.gs-mag .mag-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* „Dein Tag auf einen Blick“: drei Geräte in 3D, die äußeren neigen sich zur Mitte */
@media(min-width:880px){
  body.gs .trio{perspective:1400px;perspective-origin:50% 42%}
  body.gs .trio .phone{transform-style:preserve-3d;box-shadow:0 38px 70px -26px rgba(31,45,32,.55),0 8px 18px -10px rgba(31,45,32,.35),0 0 0 1px rgba(31,45,32,.16),inset 0 0 0 1.5px rgba(250,247,242,.14)}
  body.gs .trio figure:nth-child(1) .phone{transform:rotateY(17deg) rotateX(4deg) rotateZ(-2deg)}
  body.gs .trio figure:nth-child(3) .phone{transform:rotateY(-17deg) rotateX(4deg) rotateZ(2deg)}
  [dir="rtl"] body.gs .trio figure:nth-child(1) .phone{transform:rotateY(-17deg) rotateX(4deg) rotateZ(2deg)}
  [dir="rtl"] body.gs .trio figure:nth-child(3) .phone{transform:rotateY(17deg) rotateX(4deg) rotateZ(-2deg)}
}

/* ===== Echtes 3D: Gerät mit sichtbarer Dicke (Marcel 24.10.: „Das ist für mich 3D“) ===== */
.phone .dicke{display:none}
@media(min-width:880px){
  .phone .dicke{display:block;position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;pointer-events:none}
  .phone .dicke i{position:absolute;inset:0;border-radius:inherit;transform:translateZ(calc(var(--n) * -.5cqw));
    background:linear-gradient(90deg,var(--forest-2),var(--forest) 45%,var(--forest-2));box-shadow:inset 0 0 0 1px rgba(250,247,242,.10)}
  .phone .dicke i:nth-child(-n+2){box-shadow:inset 0 0 0 1.5px rgba(250,247,242,.28)}   /* hellere Kante direkt hinter dem Glas */
  body.gs .buehne .phone{isolation:auto;--gy:30deg;--gx:6deg;--gz:-3deg}
  body.gs .split:not(.rev) .buehne .phone,body.gs .bereich-buehne .phone{--gy:-30deg;--gx:6deg;--gz:3deg}
  body.gs .split:not(.rev) .buehne.wie-header .phone{--gy:30deg;--gx:6deg;--gz:-3deg}
  body.gs .buehne.mit-uhr .phone{--gy:0deg;--gx:0deg;--gz:0deg}
  body.gs .trio .phone{isolation:auto}
  body.gs .trio figure:nth-child(1) .phone{transform:rotateY(26deg) rotateX(5deg) rotateZ(-2deg)}
  body.gs .trio figure:nth-child(3) .phone{transform:rotateY(-26deg) rotateX(5deg) rotateZ(2deg)}
  body.gs .trio figure:nth-child(2) .phone{transform:rotateY(0)}
}

/* Beide Überschriftzeilen gleich groß (Marcel 25.10.) */

/* ===== Nur mobile Ansicht (Desktop unverändert, Marcel 24.10.) ===== */
@media(max-width:879px){
  /* Silbentrennung statt Buchstabenbruch: „Proteinbe-darf“ statt „Proteinbedar / f“ */
  body{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
  .rc span,.so span{overflow-wrap:break-word}
  /* Reihenfolge im Hero: Überschrift und Text, dann das Bild, dann die CTAs */
  .hero-gs .wrap{row-gap:20px}
  .hero-gs .stack{display:contents}
  .hero-gs .stack>.eyebrow{order:1}
  .hero-gs .stack>h1{order:2}
  .hero-gs .stack>.lead{order:3}
  .hero-gs .hero-visual{order:4}
  .hero-gs .stack>.stores{order:5}
  .hero-gs .stack>.hint-start{order:6}
}

/* Überschrift der Startseite, Deutsch: vier feste Zeilen (Marcel 25.10.) — „Das System behandelt / Krankheit. / Gesundheit beginnt / bei dir.“
   Die Größe folgt der Breite, damit „Das System behandelt“ auch auf kleinen Handys in eine Zeile passt. Andere Sprachen unverändert. */
html[lang="de"] .gs-h1{font-size:clamp(25px,8vw,52px)}
html[lang="de"] .gs-h1 .zl{display:block;white-space:nowrap}

/* Beim Wechsel des Bereichs hält app.js die Position der angetippten Zeile selbst (kein doppeltes Nachführen durch den Browser) */
.bereiche-wahl .tiles{overflow-anchor:none}