/* Profil (js/views/profil.js) mit Familienmodus, Vögelchen-Rechner, Einstellungen, Konto, Hilfe; Challenges und Verkaufsseite (js/views/challenges.js);
   Anmeldung (js/login.js). Geladen nach css/app.css. */

/* Challenges */
.chlist{display:flex;flex-direction:column;gap:var(--sp-4)}

/* Familienmodus */
.hh-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 44px;gap:var(--sp-2);align-items:center}   /* Vögelchen-Spalte so breit wie „Pinguin ▾“ mit Bild */
.hh-row input{width:100%;min-height:44px;border:1.5px solid var(--edge);background:var(--bg);border-radius:var(--r-s);padding:var(--sp-2) 10px;font-family:inherit;font-size:var(--fs-body);color:var(--ink);min-width:0}
.hh-fixed{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);min-width:0;font-weight:600;color:var(--green)}
/* Vögelchen einer Person: Knopf „<Vogel> ▾“ (wie „Für <Vogel> ▾“ auf der Rezeptseite), öffnet das Blatt mit allen acht */
.btn.hh-pick{width:100%;min-width:0;min-height:44px;gap:var(--sp-2);padding:6px var(--sp-3) 6px var(--sp-2);justify-content:flex-start}
.hh-pick-t{flex:1 1 auto;min-width:0;text-align:left}
.hh-pick .ic{font-size:18px;flex:0 0 auto}
.hh-birds > .gloss{align-self:flex-start}
/* „Was ist ein Vögelchen?“ direkt unter dem Satz, der das Wort zuerst nennt (#/challenges, Familienmodus): bündig mit dem Text, dicht darunter */
.gl-under{align-self:flex-start;margin:-10px 0 -4px -4px}
/* Wenig Platz (320 px, große Schrift, auch ohne die em-Grenze; em = Schrift der Karte): Name und Entfernen oben, Vögelchen darunter, ohne Kopfzeile */
.fam-body{container:fam / inline-size}
@container fam (max-width:16.5em){
  .hh-row{grid-template-columns:minmax(0,1fr) 44px}
  .hh-row > span:nth-child(2){grid-column:1}
  .hh-row > .icon-btn{grid-column:2;grid-row:1}
  .hh-row.hh-h{display:none}
}

/* Vögelchen-Rechner: Ergebnis (Bild 84 über birdAv, ohne Rahmen; Orange nur für „jetzt“/„geschafft“). Flach mit Trennlinie, kein Kasten in der Karte. */
.result{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--sp-4);align-items:center;border-top:1px solid var(--line);padding-top:var(--sp-4)}
.result > .btn{grid-column:1 / -1}
.result .k{font-family:var(--f-head);font-weight:600;font-size:var(--fs-title);color:var(--green);font-variant-numeric:tabular-nums;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
/* Hauptknopf steht schon oben (Rückfrage „Ja, ändern“ oder „Weiter zu Schritt 2“, .vg-has-main in js/views/profil.js): Speichern im Rechner als Sekundärknopf */
.vg-has-main .calc .btn[data-save]{background:var(--green-soft);color:var(--green)}
/* Adresse ist ein langes Wort: darf umbrechen (Hilfe, Anmeldung „Passwort vergessen?“, Rechner unter 1.500 kcal) */
.mail-addr,.calc .low-kcal ~ p{overflow-wrap:anywhere}

/* Challenges verwalten (Profil): Liste .list mit Vorschaubild in der Symbolkachel (eckig, nicht rund wie ein Vögelchen),
   Stand in Worten, aktive mit Etikett „Aktiv“ (.tag.now, solange sie läuft oder geschafft ist; vor dem Start neutral), andere mit Knopf „Wechseln“ unter dem Text. */
.ch-th{display:contents}
.ch-row{align-items:start;row-gap:var(--sp-2)}
.ch-row > .ch-go{grid-column:2 / -1;justify-self:start}   /* unter dem Text; bei großer Schrift über die ganze Breite (siehe unten) */
.ch-list .list-t .tag{margin-right:var(--sp-1)}
/* Aufklappbare Listenzeile (.fold) und roter Textknopf (.btn.text.bad, .danger-row): Bausteine in css/app.css */

/* Challenge-Karten */
.cc{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);display:flex;flex-direction:column;overflow:hidden}
.cc-media{position:relative;background:var(--sunk);overflow:hidden}
.cc-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.cc-media.trio{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;aspect-ratio:2.3 / 1}
.cc-media.trio img:first-child{grid-row:1 / 3}
.cc-media.single{aspect-ratio:16 / 10}
.cc-media.short{aspect-ratio:2.2 / 1;min-height:132px}
.cc-media.muted img{filter:saturate(.35)}
.cc-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;font-size:48px;color:var(--green);background:var(--sunk)}   /* ohne Foto: Flaggen-Symbol auf --sunk wie .ph (kein Emoji) */
/* Abdunklung unten auf Fotos, damit weiße Schrift (.over) lesbar ist: feste Bildfarben, kein Theme-Token */
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,16,0) 30%,rgba(10,30,16,.85))}
.flag{position:absolute;left:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--card);color:var(--green);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-small);font-weight:600;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.flag.dark{background:var(--green);color:var(--on-green)}
.flag.now{background:var(--orange-soft);color:var(--orange-ink)}   /* laufende Challenge = „jetzt“ */
.flag .ic{font-size:16px}
.flag .dot{width:9px;height:9px;border-radius:50%;background:var(--orange);flex:0 0 9px}
.over{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff}   /* Weiß auf abgedunkeltem Foto (.shade), in hell und dunkel gleich */
/* Titel auf dem Foto: Überschrift (h3 auf den Karten, h1 auf der Verkaufsseite), Aussehen wie bisher */
.over-t{font-family:var(--f-head);font-weight:600;font-size:var(--fs-title);display:block;line-height:1.1;text-wrap:balance;color:inherit;letter-spacing:0}
.over span{font-size:var(--fs-meta);opacity:.92;display:block;margin-top:3px}
.cc-body{padding:14px var(--sp-4) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.cc-h{display:flex;flex-direction:column;gap:2px}
.cc-body h3{font-size:var(--fs-section);line-height:var(--lh-section)}
.cc-body p{margin:0;font-size:var(--fs-meta)}
/* Etappe/Stand: flache Zeile mit Ring (in der Karte ohne eigenen Kasten; allein auf der Seite, z. B. Runde auf der Verkaufsseite, als Karte) */
.stage{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);min-width:0}
.stage > div{min-width:0;display:flex;flex-direction:column;flex:1 1 9rem}   /* große Schrift: Ring über dem Text (wie der Tagesring auf Heute) */
.stage > div > b{font-size:var(--fs-body);color:var(--ink);line-height:1.3}   /* nur der Text, nicht die Zahl im Ring */
.stage > div > span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.stage > div > .gloss{align-self:flex-start;margin-left:-4px}   /* „Was ist eine Etappe?“ bündig mit dem Text (Textknopf hat 4 px Innenabstand) */
/* Ring mit Zahl (ringBox, js/views/shared.js): Größe in rem aus --rs, damit Zahl und „von N“ auch bei großer Systemschrift im Ring bleiben.
   Beschriftung wie der Tagesring auf Heute: Zahl (Fraunces, Tinte) über „von N“. */
.rbox > .ring{width:var(--rs);height:var(--rs)}
.rbox .c b{font-size:var(--fs-body);line-height:1;color:var(--ink)}
.rbox .c span{line-height:1;margin-top:2px}
.cc .stage{border-top:1px solid var(--line);padding-top:var(--sp-3)}
.sec > .stage{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-3) var(--sp-4)}
.cc-code{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -16px}   /* Zugangscode-Zeile über die volle Kartenbreite, wie eine Listenzeile */
.cc-code .fold > summary{min-height:64px;padding-inline:var(--sp-4)}
.cc-code .fold-body{padding-inline:var(--sp-4)}
.perks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cc-body > .perks:first-child{border-top:0;margin-top:-8px}   /* direkt unter dem Foto ohne Linie */
.perks li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.perks .n{font-family:var(--f-head);font-weight:600;font-size:var(--fs-section);color:var(--green);font-variant-numeric:tabular-nums;line-height:1;text-align:right;display:flex;justify-content:flex-end}
.perks .n .ic{font-size:22px;color:var(--green);stroke-width:2.6}
.perks div{display:flex;flex-direction:column;min-width:0}
.perks b{font-size:var(--fs-body);line-height:1.3;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.perks span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
/* Allein auf der Verkaufsseite: Leistungen und Preise als eine Fläche (Liste mit Trennlinien) */
.sec > .perks,.sec > .price-list{background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);border-top:0;padding:2px var(--sp-4)}
.sec > .perks li:last-child,.sec > .price-list li:last-child{border-bottom:0}

/* Verkaufsseite */
.sale-hero{position:relative;aspect-ratio:4 / 3.2;border-radius:var(--r);overflow:hidden;margin-top:var(--sp-3);background:var(--sunk)}
.sale-hero img{width:100%;height:100%;object-fit:cover;display:block}
.sale-hero .over-t{font-size:var(--fs-display)}
/* Zahlen zur Challenge: eine Fläche mit zwei Spalten (keine Einzelkarten) */
.gets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--sp-3);background:var(--card);border-radius:var(--r);box-shadow:var(--sh-1);padding:var(--sp-3) var(--sp-4)}
.get{padding:6px 0;display:flex;flex-direction:column;min-width:0}
.get b{font-family:var(--f-head);font-weight:600;font-size:var(--fs-title);line-height:var(--lh-title);color:var(--green);font-variant-numeric:tabular-nums}
.get span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted);font-weight:600;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.strip figure{margin:0;min-width:0}
.strip img{width:100%;aspect-ratio:5 / 4;object-fit:cover;border-radius:var(--r-s);display:block}
.strip figcaption{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;margin-top:6px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.steps-sale{display:flex;flex-direction:column;gap:var(--sp-1)}
.wk{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--sp-3);align-items:start;padding:var(--sp-1) 0}
.wk i{width:36px;height:36px;border-radius:50%;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;font-size:var(--fs-meta)}
.wk.last i{background:var(--green);color:var(--on-green)}
.wk > div{min-width:0;padding-top:var(--sp-1)}
.wk b{display:block;font-size:var(--fs-body);line-height:1.3}
.wk span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.quote{margin:0;background:var(--sunk);border-radius:var(--r);padding:14px var(--sp-4);font-family:var(--f-head);color:var(--green);font-size:var(--fs-dish)}
.quote span{display:block;font-family:var(--f-body);font-size:var(--fs-meta);color:var(--muted);margin-top:6px}
.ok-ic{font-size:18px;color:var(--green);stroke-width:2.6}
.buybar{position:sticky;bottom:calc(var(--nav-h, calc(67px + env(safe-area-inset-bottom,0px))) + 5px);z-index:3;margin-top:20px;background:var(--card);border-radius:var(--r);padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);box-shadow:var(--sh-2)}
.split{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.buybar .split{padding:0 var(--sp-1)}

/* Profil: Vögelchen zum Antippen */
.prof-head{flex-direction:row;align-items:center;gap:var(--sp-4)}
.prof-head > div{min-width:0}
/* Großes Vögelchen 84 px (Größen siehe .bav in app.css), Rand in Kartenfarbe + --sh-1 statt orangem Ring */
.piep{position:relative;flex:0 0 84px;width:84px;height:84px;border-radius:50%;border:3px solid var(--card);box-shadow:var(--sh-1);background:var(--green-soft);color:var(--green);padding:0;display:flex;align-items:center;justify-content:center;font-size:36px}
.piep img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
@media (max-width:359px){.piep{flex-basis:72px;width:72px;height:72px}}   /* sehr schmal: mehr Platz für „Hallo, <Name>!“ */
.piep-say{position:absolute;left:66px;top:-14px;background:var(--green);color:var(--on-green);font-size:var(--fs-small);font-weight:600;border-radius:var(--r-s);padding:3px var(--sp-2);white-space:nowrap;opacity:0;transform:translateY(6px) scale(.8);pointer-events:none}
/* Antippen (main.js: data-piep setzt .wiggle): Wackeln --t-slow, die Sprechblase bleibt 1,3 s zum Lesen stehen.
   Bei „Bewegung reduzieren“ kein Wackeln, die Blase blendet nur ein und aus. */
@media (prefers-reduced-motion:no-preference){
  .piep.wiggle{animation:piepWiggle var(--t-slow) var(--ease)}
  .piep.wiggle .piep-say{animation:piepSay calc(var(--t-slow) * 3.25) var(--ease) both}   /* 1,3 s: Zeit zum Lesen */
}
@media (prefers-reduced-motion:reduce){
  .piep-say{transform:none}
  .piep.wiggle .piep-say{animation:piepShow calc(var(--t-slow) * 3.25) linear both}   /* nur Deckkraft; linear, damit die Haltezeit (12–80 %) gleich lang bleibt */
}
@keyframes piepWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) scale(1.06)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}}
@keyframes piepSay{0%{opacity:0;transform:translateY(6px) scale(.8)}20%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes piepShow{0%,100%{opacity:0}12%,80%{opacity:1}}
/* Vögelchen-Seite: Erklärung mit „Was ist ein Vögelchen?“ (glossBtn) darunter */
.vg-intro{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.vg-intro .gloss{margin-left:-4px}
/* Erster Schritt (noch kein Vögelchen): Rechner offen in der Karte, ohne eigenen Kasten */
.first-step{gap:var(--sp-3)}   /* ohne orangen Rahmen: Orange nur für „jetzt“/„geschafft“ */
.first-step h2{font-size:var(--fs-section)}
.first-step .calc{border:0;padding:0;background:none;box-shadow:none}   /* Rechner ohne eigenen Titel (js/tools.js: in .pcard kein secHead) */
/* Rechner eingeklappt (#rechner): Kopf mit Symbol und Wort wie eine Listenzeile, Rechner darunter ohne eigenen Kasten */
.calc-wrap{padding:0;gap:0;overflow:hidden}
.calc-wrap summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;padding:var(--sp-2) var(--sp-4) var(--sp-2) 14px}
.calc-wrap summary::-webkit-details-marker{display:none}
#rechner{scroll-margin-top:76px}   /* Sprungziel #/profil/voegelchen?rechner nicht unter der Kopfzeile; .no-anim (sofort aufklappen): app.css */
.calc-wrap-t{display:flex;align-items:center;gap:14px;min-width:0}
.calc-wrap-t > .list-ic{flex:0 0 48px}
.calc-wrap-t > b{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.calc-wrap summary b{font-size:var(--fs-body);line-height:1.3;color:var(--ink)}
.calc-wrap summary > .ds-ic{font-size:20px;color:var(--muted)}
.calc-wrap[open] .ds-ic{transform:rotate(180deg)}
.calc-wrap .calc{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}   /* Titel steht schon im Kopf des Aufklappers */
/* Familienmodus: Schalter als ganze Zeile (button[role=switch]), Zustand als Wort und als Schalter; Tippfläche volle Breite, mindestens 44 px */
.sw-row{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:56px;margin:0;padding:0;background:none;border:0;text-align:left;color:inherit;font:inherit;border-radius:var(--r-s)}
.sw-t{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.sw-row b{font-family:var(--f-head);font-weight:600;font-size:var(--fs-dish);line-height:var(--lh-dish);color:var(--green)}
.sw-t span{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--muted)}
.sw-row b,.sw-t span{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.sw-state{flex:0 0 auto;font-size:var(--fs-label);font-weight:600;color:var(--muted)}
.sw-row[aria-checked="true"] .sw-state{color:var(--green)}
.sw-row .switch::after{content:none}   /* Tippfläche ist die ganze Zeile */
.sw-row[aria-checked="true"] .switch{background:var(--green)}
.sw-row[aria-checked="true"] .switch i{transform:translateX(20px);background:var(--on-green)}
.sw-row:focus-visible{outline-offset:4px}
.fam-card{gap:var(--sp-3)}
.fam-body{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:var(--sp-3)}
.hh-h span{font-size:var(--fs-meta);font-weight:600;color:var(--muted)}
.hh-row.hh-h{margin-bottom:-4px}

/* Einstellungen: eine Liste, je Zeile Beschriftung (17/600), Bedienelement, Erklärung */
.set-row{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4) var(--sp-4)}
.set-row + .set-row{border-top:1px solid var(--line)}
.set-row .field{gap:var(--sp-2)}
.set-l{font-size:var(--fs-body);line-height:1.3;font-weight:600;color:var(--ink)}
.acc-h{font-family:var(--f-head);font-weight:600;font-size:var(--fs-dish);color:var(--green)}
.redeem{display:flex;flex-direction:column;gap:10px}
.redeem .field{display:flex;flex-direction:column;gap:6px}
/* Meldungen unter Formularen: Fehler mit Warn-Symbol, Erfolg mit Haken (nie nur Farbe). Text setzt main.js bzw. login.js. */
:is(.redeem,.auth-form) .redeem-msg:is(.err,.ok){display:flex;align-items:flex-start;gap:6px}
:is(.redeem,.auth-form) .redeem-msg:is(.err,.ok)::before{content:"";flex:0 0 18px;width:18px;height:18px;margin-top:2px;background:currentColor;
  -webkit-mask:var(--msg-ic) center/contain no-repeat;mask:var(--msg-ic) center/contain no-repeat}
:is(.redeem,.auth-form) .redeem-msg.err{--msg-ic:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 4.6a2 2 0 0 1 3.4 0l7.2 12.6a2 2 0 0 1-1.7 3H4.8a2 2 0 0 1-1.7-3z"/><path d="M12 9.5v4M12 16.9v.1"/></svg>')}
:is(.redeem,.auth-form) .redeem-msg.ok{--msg-ic:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>')}
/* Zugangscode: Eingabe in Großbuchstaben (Format des Codes, keine Beschriftung) */
.code-in{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-section);letter-spacing:.14em;text-transform:uppercase}
.code-in::placeholder{font-family:var(--f-body);font-size:var(--fs-meta);letter-spacing:0;text-transform:none}

/* ---------- Anmeldung (js/login.js): eigener Bildschirm ohne Kopfzeile und Tab-Leiste ---------- */
html.auth-only .top,html.auth-only .nav{display:none}
html.auth-only .wrap{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.auth{max-width:440px;margin:0 auto;padding-top:calc(28px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:var(--sp-4)}
.auth-logo{width:150px;height:60px;align-self:center;-webkit-mask-position:center;mask-position:center}
.auth-head{display:flex;flex-direction:column;gap:6px;text-align:center}
.auth-head p{margin:0}
.auth-head .page-title{text-wrap:balance}
.auth-card{padding:var(--sp-4);gap:14px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .acc-h{margin:0;font-size:var(--fs-section);line-height:var(--lh-section)}
.auth-form .redeem-msg:empty{display:none}
/* Felder 52 px hoch, Beschriftung darüber in Tinte (17/600), damit man sie gut liest */
.auth-form .field{gap:6px}
.auth-form .field > label{font-size:var(--fs-body);line-height:1.3;font-weight:600;color:var(--ink)}
.auth-form .field input{min-height:52px;padding-block:var(--sp-3);padding-left:14px}   /* rechts bleibt Platz für „anzeigen“ (.pw-wrap) */
.auth-new{display:flex;flex-direction:column;gap:6px;text-align:center;border-top:1px solid var(--line);padding-top:14px}
.auth-link{align-self:center;background:none;border:0;min-height:44px;padding:var(--sp-2) 10px;font-size:var(--fs-meta);font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-pill)}
.pw-wrap{position:relative;display:flex}
.pw-wrap input{padding-right:100px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;padding:0 var(--sp-3);border:0;background:none;border-radius:var(--r-pill);font-size:var(--fs-meta);font-weight:600;color:var(--green)}
.mail-preview{background:var(--bg);border-radius:var(--r-s);padding:var(--sp-3) 14px;font-size:var(--fs-meta);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.auth-dev{border:1.5px dashed var(--line);border-radius:var(--r);padding:14px var(--sp-4);display:flex;flex-direction:column;gap:10px}
.auth-dev-b{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.auth-dev-b .btn{padding-inline:10px}
@media (max-width:380px){.auth-dev-b{grid-template-columns:1fr}}
.auth-legal{margin:0;text-align:center;color:var(--muted)}
.auth-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);color:var(--muted)}
.pw-note{flex-direction:column;align-items:flex-start;gap:10px;padding:14px var(--sp-4);border-radius:var(--r)}

/* Vögelchen-Rechner: Bewegung als Karten, Rückfrage beim Wechsel, Gespeichert-Hinweis */
.pal-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.pal-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;min-height:44px;background:var(--bg);border:1.5px solid var(--edge);border-radius:var(--r-s);padding:10px 14px}
.pal-opt b{color:var(--ink);line-height:1.3}
.pal-opt span{font-size:var(--fs-meta);color:var(--muted);line-height:var(--lh-meta)}
.pal-opt > *{max-width:100%}   /* große Schrift: lange Wörter („zwischendurch“) trennen statt über den Rand zu ragen */
.pal-opt[aria-pressed="true"]{border-color:var(--green);background:var(--green-soft);outline:1px solid var(--green)}
.pal-opt[aria-pressed="true"] b{color:var(--green)}
.low-kcal b{color:var(--ink)}
.bird-ask,.saved-note{display:flex;flex-direction:column;gap:var(--sp-2);border-radius:var(--r);padding:14px}
.bird-ask b,.saved-note b{color:var(--ink)}
.saved-note{background:var(--green-soft)}
.saved-note .inline-ic{color:var(--done)}   /* Haken „Gespeichert“ = erledigt */
.saved-note .btn{align-self:flex-start}

/* Profil: aktive Challenge (Startdatum, neu starten), Hilfe & Kontakt, Rechtliches */
.ch-ctl{gap:var(--sp-3)}
/* Häufige Fragen: eine Liste (.list.faq) mit aufklappbaren Zeilen, Frage 17/600, mindestens 56 px hoch */
.faq-i + .faq-i{border-top:1px solid var(--line)}
.faq-i > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:56px;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);line-height:1.35;font-weight:600;color:var(--ink);overflow-wrap:anywhere}   /* langes Wort bei großer Schrift: bricht in der Frage um, der Pfeil bleibt in der Zeile */
.faq-i > summary::-webkit-details-marker{display:none}
.faq-i > summary .ds-ic{flex:0 0 auto;font-size:20px;color:var(--muted)}
.faq-i[open] > summary .ds-ic{transform:rotate(180deg)}
.faq-i > summary:hover{background:var(--bg)}
.faq-i > summary:focus-visible{outline-offset:-3px}
.faq-a{display:flex;flex-direction:column;gap:10px;padding:0 var(--sp-4) var(--sp-4)}
.faq-a p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.help-ask{gap:10px}
.legal{margin:var(--sp-5) 0 0;text-align:center;color:var(--muted)}
.legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);color:var(--muted)}

/* Preise aus dem Shop (Verkaufsseite, gesperrte Challenge-Karte) und Produkt-Hinweise */
.price-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.price-list li{display:flex;justify-content:space-between;align-items:center;gap:6px var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.price-list li > b{font-size:var(--fs-body);min-width:0;overflow-wrap:break-word}
.pl-v{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.pl-v b{font-family:var(--f-head);font-size:var(--fs-section);color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-v span,.cc-price span{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
.buybar .split b,.cc-price b{font-family:var(--f-head);font-size:var(--fs-section);color:var(--green)}
.cc-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}

/* Große Systemschrift (dieselbe Grenze wie in css/app.css): Profil-Kopf untereinander, Verkaufsleiste über der höheren Tab-Leiste,
   Zahlen-Fläche einspaltig, Familien-Zeilen umbrechend */
@media (max-width:19.9em){
  .prof-head{flex-direction:column;align-items:flex-start}
  .prof-head > .page-head{width:100%}   /* sonst wird der Titel so breit wie sein längstes Wort */
  .ch-row > .ch-go{grid-column:1 / -1;justify-self:stretch}
  /* Passwort: „anzeigen“ unter dem Feld statt darin */
  .pw-wrap{flex-direction:column;align-items:flex-end;gap:2px}
  .pw-wrap input{padding-right:14px}
  .pw-eye{position:static;transform:none}
  .gets,.strip{grid-template-columns:minmax(0,1fr)}
  .hh-row{grid-template-columns:minmax(0,1fr) 44px}   /* Name und Entfernen oben, Vögelchen darunter */
  .hh-row > span:nth-child(2){grid-column:1}
  .hh-row > .icon-btn{grid-column:2;grid-row:1}
  .hh-row.hh-h{display:none}
  .auth-dev-b{grid-template-columns:1fr}
  /* Familienmodus: Titel und Erklärung über die volle Breite, „An“/„Aus“ und der Schalter in der Zeile darunter */
  .sw-row{flex-wrap:wrap;row-gap:var(--sp-2);padding-block:var(--sp-1)}
  .sw-t{flex-basis:100%}
  /* Vögelchen-Rechner: Bild über dem Ergebnis */
  .result{grid-template-columns:minmax(0,1fr)}
  .flag{white-space:normal}   /* Etikett bricht um statt „…“ */
  .over-t{font-size:var(--fs-section)}
  .sale-hero .over-t{font-size:var(--fs-title)}
}
/* Fotos mit Titel (Challenge-Karten .has-over, Verkaufsseite) bei großer Schrift und auf sehr schmalen Handys (Titel in zwei Zeilen):
   Etikett oben und Titel unten stehen im Fluss (Raster: Etikett, Rest, Titel), so überdeckt sich nichts. Das gewohnte Seitenverhältnis
   gibt ::before vor; braucht der Titel mehr Platz, wird die Fläche höher und das Foto füllt sie. Die Abdunklung reicht weiter hinauf. */
@media (max-width:359px),(max-width:19.9em){
  .cc-media.has-over,.sale-hero{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto}
  .cc-media.has-over::before,.sale-hero::before{content:"";grid-row:1 / -1;grid-column:1;aspect-ratio:2.2 / 1}
  .cc-media.single.has-over::before{aspect-ratio:16 / 10}
  .sale-hero::before{aspect-ratio:4 / 3.2}
  :is(.cc-media.has-over,.sale-hero) > :is(img,.cc-ph){position:absolute;inset:0;height:100%;min-height:0}
  :is(.cc-media.has-over,.sale-hero) > .flag{position:relative;left:auto;top:auto;grid-area:1 / 1;justify-self:start;align-self:start;margin:10px 10px 0}
  :is(.cc-media.has-over,.sale-hero) .over{position:relative;left:auto;right:auto;bottom:auto;grid-area:3 / 1;margin:var(--sp-3) 14px}
  :is(.cc-media.has-over,.sale-hero) .shade{background:linear-gradient(180deg,rgba(10,30,16,.4),rgba(10,30,16,.88))}
}