/* ═══════════════════════════════════════════════════════════════════════
   TAKT3 · GESTALTUNGSSYSTEM „TAKT"  ·  Version 12 – iOS mit Liquid Glass

   Die App folgt Apples Human Interface Guidelines (iOS 26), damit sie sich auf
   dem iPhone wie ein Teil des Systems anfühlt:
   - Liquid Glass: Bedienelemente schweben als Glas-Bubbles über dem Inhalt –
     Tab-Leiste als Kapsel, runde Glasknöpfe, Sheets mit Abstand zum Rand.
     Glas = durchscheinende Fläche + Unschärfe + Lichtkante oben + weicher
     Schatten. Karten sind helles Glas, dahinter liegt ein warmer Farbschein.
   - Hell ist der Standard; der Dunkelmodus ist Graphit statt Schwarz.
   - Systemschrift (SF Pro, für Kennzahlen SF Pro Rounded) und die Textgrössen
     der iOS-Standardgrösse: Large Title 34, Headline 17, Body 17, Footnote 13.
   - iOS-Systemfarben in Hell, Dunkel und «Kontrast erhöhen». Systemorange ist
     die Akzentfarbe (Tint) und damit die Markenfarbe.
   - Gruppierte Flächen mit Haarlinien als Trenner, grössere runde Ecken.
   - Bedienelemente wie im System: Tab-Leiste, Segmented Control, Schalter,
     Häkchen, Sheets mit Griff, Nachrichten wie in iMessage.
   - Satzschreibung statt Grossbuchstaben-Beschriftungen.

   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Navigation · 5 Komponenten
           6 Ansichten · 7 Dialoge · 8 Kochmodus & Einkauf · 9 Druck
           10 Barrierefreiheit · 11 Taktkreis · 12 Companion
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────── 1 · Tokens (iOS-Systemfarben) ───────────── */
:root{
  color-scheme:dark;   /* Kästchen, Auswahllisten und Bildlaufleisten folgen dem gewählten Design, nicht dem System */
  /* Dunkel: Graphit statt Schwarz, damit das Glas Tiefe bekommt */
  --bg:#141417; --bg-2:#141417;                         /* Seitenhintergrund */
  --card:#242428; --card-2:#2F2F34; --card-3:#3C3C42;   /* deckende Flächen (Punkte, Felder in Karten) */
  --line:rgba(84,84,88,.45); --line-strong:rgba(84,84,88,.65);   /* separator, opaque separator */
  --text:#FFFFFF; --muted:rgba(235,235,245,.6); --muted-2:rgba(235,235,245,.45);   /* label, secondary, tertiary */
  --accent:#FF9F0A; --accent-2:#FFB340;                 /* systemOrange */
  --accent-soft:rgba(255,159,10,.18);
  --fill:#CF4500; --fill-2:#B83D00;                     /* gefüllte Knöpfe mit weisser Schrift (Kontrast ≥ 4.5:1) */
  --fire:#FF9F0A; --beat:#FF9F0A;
  --mint:#30D158; --mint-soft:rgba(48,209,88,.18); --mint-deep:#30D158;   /* systemGreen */
  --gold:#FFD60A; --blue:#0A84FF; --aqua:#40C8E0; --indigo:#5E5CE6; --danger:#FF453A;
  --gray:#8E8E93; --tab-off:#8E8E93;
  --input-bg:rgba(118,118,128,.24);                    /* tertiarySystemFill */
  --fill-soft:rgba(118,118,128,.24); --fill-quart:rgba(118,118,128,.18);
  --top-bg:rgba(40,40,46,.72); --nav-bg:rgba(40,40,46,.78);   /* Glas für Leisten */
  --top-fade:rgba(20,20,23,.74);                        /* Scroll-Kante unter der Navigationsleiste */
  --seg-on:#636366;                                     /* Segmented Control: gewählter Abschnitt */
  /* Liquid Glass */
  --panel:rgba(48,48,54,.62);                           /* Karten */
  --group:rgba(255,255,255,.07);                        /* Gruppen in Sheets */
  --glass:rgba(128,128,140,.24);                        /* Knöpfe, Kapseln */
  --glass-strong:rgba(40,40,46,.74);                    /* Tab-Leiste, Sheets, Meldungen */
  --glass-hi:rgba(255,255,255,.24); --glass-lo:rgba(255,255,255,.06); --glass-rim:rgba(255,255,255,.1);
  --glass-sh:0 10px 30px -10px rgba(0,0,0,.55);
  --glass-edge:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 var(--glass-lo),0 0 0 var(--haar) var(--glass-rim);
  --panel-sh:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 var(--haar) rgba(255,255,255,.07),0 12px 32px -16px rgba(0,0,0,.6);
  --shine:radial-gradient(140% 100% at 20% -20%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);
  --tab-sel:rgba(255,255,255,.13);
  --blur:saturate(1.8) blur(22px);
  --glow-1:rgba(255,149,0,.22); --glow-2:rgba(94,92,230,.2); --glow-3:rgba(10,132,255,.16);
  --chart-grid:rgba(84,84,88,.6); --chart-text:rgba(235,235,245,.6);
  --hi:rgba(255,255,255,.06);
  --sh:none; --sh-lg:0 22px 56px -14px rgba(0,0,0,.65); --glow:none;
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.25,.1,.25,1);
  --haar:.5px;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rounded:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F2F2F7; --bg-2:#F2F2F7;
  --card:#FFFFFF; --card-2:#F2F2F7; --card-3:#E5E5EA;
  --line:rgba(60,60,67,.18); --line-strong:rgba(60,60,67,.29);
  --text:#000000; --muted:rgba(60,60,67,.6); --muted-2:rgba(60,60,67,.45);
  --accent:#FF9500; --accent-2:#FFB340; --accent-soft:rgba(255,149,0,.14);
  --fill:#CF4500; --fill-2:#B83D00;
  --fire:#FF9500; --beat:#FF9500;
  --mint:#34C759; --mint-soft:rgba(52,199,89,.14); --mint-deep:#248A3D;
  --gold:#FFCC00; --blue:#007AFF; --aqua:#30B0C7; --indigo:#5856D6; --danger:#FF3B30;
  --gray:#8E8E93; --tab-off:#999999;
  --input-bg:rgba(118,118,128,.12);
  --fill-soft:rgba(118,118,128,.12); --fill-quart:rgba(116,116,128,.08);
  --top-bg:rgba(250,250,252,.74); --nav-bg:rgba(250,250,252,.8);
  --top-fade:rgba(242,242,247,.72);
  --seg-on:#FFFFFF;
  --panel:rgba(255,255,255,.7); --group:rgba(255,255,255,.82);
  --glass:rgba(255,255,255,.52); --glass-strong:rgba(250,250,252,.74);
  --glass-hi:rgba(255,255,255,.95); --glass-lo:rgba(255,255,255,.45); --glass-rim:rgba(0,0,0,.06);
  --glass-sh:0 8px 26px -10px rgba(60,40,10,.22);
  --panel-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 var(--haar) rgba(255,255,255,.6),0 0 0 var(--haar) rgba(0,0,0,.035),0 12px 32px -18px rgba(80,50,10,.24);
  --shine:radial-gradient(140% 100% at 20% -20%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%);
  --tab-sel:rgba(118,118,128,.14);
  --glow-1:rgba(255,149,0,.2); --glow-2:rgba(255,204,0,.16); --glow-3:rgba(0,122,255,.1);
  --chart-grid:rgba(60,60,67,.18); --chart-text:rgba(60,60,67,.6);
  --hi:rgba(0,0,0,.04);
  --sh-lg:0 22px 56px -16px rgba(40,30,10,.28);
}
/* «Transparenz reduzieren»: Glas wird deckend */
@media (prefers-reduced-transparency: reduce){
  :root,:root[data-theme="light"]{--panel:var(--card);--glass-strong:var(--card);--top-bg:var(--card);--nav-bg:var(--card);--top-fade:var(--bg);--group:var(--card)}
}

/* ───────────── 2 · Basis ───────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--body);font-size:17px;line-height:1.35;letter-spacing:-.022em;color:var(--text);background:var(--bg);isolation:isolate;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s}
@media(min-width:900px){body{padding-bottom:40px}}
/* Warmer Farbschein: gibt dem Glas etwas, das es brechen kann */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(44rem 32rem at -6% -8%,var(--glow-1),transparent 70%),
    radial-gradient(34rem 28rem at 108% 22%,var(--glow-2),transparent 70%),
    radial-gradient(40rem 34rem at 70% 108%,var(--glow-3),transparent 70%)}
::selection{background:var(--accent-soft)}
h1,h2,h3,.display,.viewTitle{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.15}
/* Kennzahlen wie in Fitness und Health: SF Pro Rounded, gleich breite Ziffern */
.num,.khVal,.mkVal,.stat .v,.nmTime,.khRest,.lvlNum,.kpiVal{
  font-family:var(--rounded);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit;font-size:17px}
a{color:var(--accent);text-decoration:none}
small{font-size:max(12px,.85em)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rot{to{transform:rotate(360deg)}}
section.view{animation:viewIn .28s var(--ease) both}
.hidden{display:none!important}
.visually-hidden,.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.empty{color:var(--muted);font-size:15px;text-align:center;padding:24px 0}

/* ───────────── 3 · Layout ───────────── */
.wrap{max-width:980px;margin:0 auto;padding:8px 16px 48px}
@media(max-width:899px){.wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}
main{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid2{display:grid;gap:12px}
.grid2>.field{min-width:0}
.grid2>.field.voll{grid-column:1/-1}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:560px){.grid3{grid-template-columns:1fr 1fr}}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:760px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ───────────── 4 · Navigation ───────────── */
/* Navigationsleiste wie in iOS 26: keine Fläche, der Inhalt verschwimmt an der
   Kante darunter. Aktionen schweben als Glas-Bubbles. */
.topbar{position:sticky;top:0;z-index:50;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0}
.topbar::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;pointer-events:none;background:linear-gradient(var(--top-fade) 40%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.wordmark{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;line-height:1;white-space:nowrap}
/* Bildmarke im Stil eines App-Symbols: Squircle mit drei Schlägen */
.wordmark::before{content:"";flex-shrink:0;width:28px;height:28px;margin-right:9px;border-radius:7px;
  background:
    radial-gradient(circle at 26% 58%,#fff 2.2px,transparent 2.8px),
    radial-gradient(circle at 50% 58%,#fff 2.2px,transparent 2.8px),
    radial-gradient(circle at 74% 58%,#FFE08A 3px,transparent 3.6px),
    linear-gradient(#ffffff99,#ffffff99) 50% 58%/62% 1.5px no-repeat,
    linear-gradient(180deg,#FFB340,#FF9500 45%,#E06A00);
  box-shadow:inset 0 0 0 var(--haar) rgba(0,0,0,.12)}
.wordmark .three{color:var(--accent)}
.wordmark small{margin-left:10px;font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:-.01em;color:var(--muted)}
@media(max-width:1279px){.wordmark small{display:none}}
.topActions{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Runde Glasknöpfe (44 pt) */
.themeBtn,.bubbleBtn{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--shine),var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh);
  color:var(--accent);font-size:17px;transition:transform .2s var(--ease)}
.themeBtn::before,.bubbleBtn::before{content:none}
.bubbleBtn{position:relative}
.themeBtn:active,.bubbleBtn:active{transform:scale(.9)}
.bbIcon{display:flex;flex-direction:column;gap:3.5px;align-items:center}
.bbIcon i{display:block;width:15px;height:2px;border-radius:2px;background:var(--accent)}
.bbIcon i:nth-child(2){width:15px;margin-left:0}
.bbLvl{position:absolute;right:-3px;bottom:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gray);color:#fff;
  font-size:12px;font-weight:600;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.topStreak{display:none;align-items:center;gap:3px;min-height:44px;font-size:15px;font-weight:600;color:var(--fire);padding:0 11px;border-radius:999px;
  background:var(--shine),var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh)}
.topStreak.on{display:inline-flex}
.syncState{font-size:13px;font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syncState.ok{color:var(--mint)}
.syncState.fehler{color:var(--danger);padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--danger) 14%,transparent);cursor:pointer}
.syncState.demo{cursor:pointer;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;
  background:var(--shine),var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh)}
.syncState.demo:active{transform:scale(.95)}

/* Grosse Bildschirme: Tab-Leiste oben wie in iPadOS 26 – schwebende Glaskapsel */
.deskNav{display:none;gap:2px;padding:4px;border-radius:999px;background:var(--shine),var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh)}
@media(min-width:900px){.deskNav{display:flex}}
.deskNav button{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  color:var(--text);font-size:15px;font-weight:500;letter-spacing:-.015em;transition:background .2s}
.deskNav button>span{display:inline-block}
.deskNav button:hover:not(:disabled){background:var(--hi)}
.deskNav button.active{background:var(--tab-sel);color:var(--accent);font-weight:600}
.deskNav button.active svg.ic{color:var(--accent)}
.deskNav button:disabled{opacity:.35;cursor:default}
@media(min-width:900px) and (max-width:1240px){
  .deskNav button{padding:0 11px;min-width:44px;justify-content:center}
  .deskNav svg.ic{margin-right:0;width:20px;height:20px}
  .deskNav button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Tab-Leiste wie in iOS 26: schwebende Glaskapsel, der aktive Tab sitzt in einer Glas-Bubble */
.bottomNav{position:fixed;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:50;
  display:flex;justify-content:space-around;align-items:center;padding:4px 3px;border-radius:999px;background:var(--shine),var(--glass-strong);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh)}
@media(min-width:900px){.bottomNav{display:none}}
.bottomNav button{position:relative;flex:1;min-width:0;min-height:54px;padding:5px 0 4px;border:0;border-radius:999px;background:transparent;
  color:var(--text);font-size:12px;font-weight:500;letter-spacing:0;line-height:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .25s var(--ease),color .25s}
.bottomNav button.active{color:var(--accent);background:var(--tab-sel);font-weight:600}
.bottomNav button:disabled{opacity:.35}
.bottomNav button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;letter-spacing:-.01em}
body.ohneNav .bottomNav{display:none}
body.ohneNav .view{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
[data-v="member"].hatNeues{position:relative}
[data-v="member"].hatNeues::after{content:"";position:absolute;top:3px;right:calc(50% - 17px);width:10px;height:10px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--nav-bg)}

/* Strich-Icons im Stil der SF Symbols */
svg.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
.bottomNav svg.ic{width:24px;height:24px}
.bottomNav button.active svg.ic{stroke-width:2.1}
.deskNav svg.ic{width:18px;height:18px;display:inline-block;margin-right:6px}

/* ───────────── 5 · Komponenten ───────────── */
/* Grosse Titel (Large Title) */
.hero{padding:12px 0 8px}
.hero h2,.hero h1{font-size:34px;line-height:41px;letter-spacing:.011em;font-weight:700}
.hero h2 em,.hero h1 em{font-style:normal;color:var(--accent)}
.viewTitle em,h1 em,h2 em{font-style:normal}
.hero p.lead{max-width:600px;font-size:17px;line-height:1.4;color:var(--muted);margin-top:8px}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--accent)}
.view .kicker{display:none}
.view>h2.viewTitle,.view>h1{font-size:34px;line-height:41px;letter-spacing:.011em;margin:12px 0 8px}
.view>h2{font-size:22px;line-height:28px;margin:28px 0 4px}
.view>.sub{color:var(--muted);font-size:15px;line-height:1.35;margin-bottom:10px}
.itemHead{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.022em;line-height:1.3;margin-bottom:2px}

/* Karten: helles Glas mit Lichtkante oben */
.card{position:relative;background:var(--panel);border-radius:var(--r-lg);padding:16px;margin-bottom:16px}
.card,.note,.emptyState,.startTakt,.tile,.taktlinie,.sichernKarte,.checkinBanner,.lane,.stat,.streak,.tDay,.reward,.questCard,
.memberCard,.mTile,.pbList,.logList,.trophy,.lgTable{box-shadow:var(--panel-sh)}
.card h2{font-size:22px;line-height:28px;margin-bottom:2px}
.card h3{font-size:20px;line-height:25px;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:15px;line-height:1.35;margin-bottom:14px}
.sub.quelle{font-size:13px}
.sub.quelle a{color:var(--accent)}
.kartenKopf{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kartenKopf h2{margin:0}
.note{background:var(--panel);border-radius:var(--r-md);padding:14px 16px;font-size:15px;color:var(--muted);margin-top:16px;line-height:1.4}
.note:empty{display:none}
.note b{color:var(--text);font-weight:600}
.disclaimer{font-size:13px;color:var(--muted);margin-top:28px;padding:0 4px;line-height:1.4}

/* Formulare wie in iOS: Feld-Überschrift klein und grau, Eingabe auf grauer Füllung */
.field{min-width:0}
/* Satzschreibung statt Grossbuchstaben – ruhiger Ton */
.field label,.aboTag,.balHead,.bfGauge .cat,.bm-l,.bmHead3,.bmSection .itemHead,.dSplit,.exLogHead,.khLabel,
.laneHead,.lsLabel,.mL,.macroRow .ml,.meal .time small,.obStepNo,.optTag,.qKicker,.ringC small,.shopHead,
.stat .l,.tDay .focus,.tile .tl,.wordmark small,.zutHead,.lane h3,.sprachTitel,.kochNr{text-transform:none;letter-spacing:0}
.field label{display:block;font-size:13px;font-weight:400;color:var(--muted);margin:0 0 6px 4px}
.field input,.field select,.field textarea{width:100%;max-width:100%;min-width:0;min-height:44px;padding:11px 14px;border:0;border-radius:var(--r-sm);
  background:var(--input-bg);color:var(--text);font-size:17px;letter-spacing:-.022em;appearance:none;-webkit-appearance:none;color-scheme:dark;caret-color:var(--accent)}
:root[data-theme="light"] .field input,:root[data-theme="light"] .field select,:root[data-theme="light"] .field textarea{color-scheme:light}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2);opacity:1}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M1.5 6 5 2.5 8.5 6M1.5 10 5 13.5 8.5 10' stroke='%238E8E93' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
.field>small.hint,.hint{display:block;margin:6px 4px 0;font-size:13px;color:var(--muted);line-height:1.35}
.hint.warnung{color:var(--accent)}
.hint.ok{color:var(--mint)}
.field.fehlt input,.field.fehlt select{box-shadow:0 0 0 2px var(--danger)}
.feldFehler{display:block;margin:6px 4px 0;font-size:13px;line-height:1.35;color:var(--danger)}
select:invalid{color:var(--muted-2)}

/* Auswahl wie in iOS-Listen: Häkchen rechts im Kreis */
.choice{display:grid;gap:8px}
.choice.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.choice.cols2{grid-template-columns:minmax(0,1fr)}}
.chip{position:relative;border:0;background:var(--input-bg);border-radius:var(--r-md);box-shadow:inset 0 1px 0 var(--glass-lo);padding:12px 48px 12px 14px;text-align:left;
  font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--text);transition:background .15s}
.chip:active{background:var(--fill-soft)}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:15px;letter-spacing:-.015em;margin-top:2px;line-height:1.3}
.chip::after{content:"";position:absolute;top:50%;right:14px;width:22px;height:22px;margin-top:-11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.chip.sel{background:var(--accent-soft)}
.chip.sel::after{box-shadow:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
/* Kapseln (Allergien, Verletzungen, Läden) */
.tagRow{display:flex;flex-wrap:wrap;gap:8px}
.tag{border:0;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);border-radius:999px;padding:10px 16px;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--text);transition:background .15s,color .15s}
.tag.sel{background:var(--shine),var(--accent-soft);color:var(--accent);font-weight:600}

/* Knöpfe als Kapseln wie in iOS 26: getöntes Glas (gefüllt) und klares Glas */
.btnRow{display:flex;gap:10px;justify-content:space-between;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:50px;border:0;border-radius:999px;padding:0 22px;
  font-size:17px;font-weight:600;letter-spacing:-.022em;text-decoration:none;transition:transform .2s var(--ease),opacity .15s,background .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--fill);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 20px -8px rgba(207,69,0,.55)}
.btn.ghost{background:var(--shine),var(--glass);color:var(--accent);box-shadow:var(--glass-edge),var(--glass-sh)}
.btn.full{width:100%}
.btn.busy{opacity:.6;pointer-events:none}
.btn.busy::after{content:"";width:16px;height:16px;margin-left:8px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
.btn.danger,.bmItem.danger{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.btn.danger:disabled{opacity:.4;cursor:not-allowed}
.linkBtn{display:block;width:100%;margin-top:10px;border:0;background:transparent;color:var(--accent);font-size:17px;font-weight:400;cursor:pointer;min-height:44px}
.linkBtn:active{opacity:.4}
.dzBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;border-radius:999px;padding:0 18px;
  background:var(--shine),var(--accent-soft);box-shadow:var(--glass-edge);color:var(--accent);font-size:15px;font-weight:600;letter-spacing:-.015em;transition:transform .2s var(--ease)}
.dzBtn:active{transform:scale(.96)}
.dzBtn.cam{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--fill);color:#fff}
.dzBtn.klein{min-height:44px;padding:0 14px;font-size:15px}
.dzBtn svg.ic{width:20px;height:20px;stroke-width:1.9}
.fab svg.ic{width:26px;height:26px;margin:auto;stroke-width:1.9}
/* Trefferflächen mindestens 44 px (Apple HIG) */
button,.btn,.tag,.dzBtn,.qa,.tile.click,select,summary{min-height:44px}

/* Schalter wie UISwitch: 51 × 31, grün */
.switch{position:relative;width:51px;height:31px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--fill-soft);border-radius:999px;transition:background .25s;cursor:pointer}
/* Knopf als Glaskapsel wie in iOS 26 */
.switch i::before{content:"";position:absolute;width:33px;height:27px;border-radius:999px;background:#fff;top:2px;left:2px;transition:transform .25s var(--ease);box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16)}
.switch input:checked+i{background:var(--mint)}
.switch input:checked+i::before{transform:translateX(14px)}
.schalter{position:relative;display:inline-block;width:51px;height:31px;flex:0 0 auto}
.schalter input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.schalter span{position:absolute;inset:0;border-radius:999px;background:var(--fill-soft);transition:background .25s}
.schalter span::after{content:"";position:absolute;top:2px;left:2px;width:33px;height:27px;border-radius:999px;background:#fff;transition:transform .25s var(--ease);box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16)}
.schalter input:checked+span{background:var(--mint)}
.schalter input:checked+span::after{transform:translateX(14px)}
.schalter input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

/* Fortschritt */
.stepper{display:flex;gap:6px;margin:16px 0 12px}
.stepper span{height:4px;flex:1;background:var(--fill-soft);border-radius:2px;transition:background .3s}
.stepper span.done{background:var(--accent)}
.stepper.waehlbar{gap:6px;margin-bottom:12px}
.stepper .schritt{flex:1;min-width:0;min-height:44px;padding:8px 2px 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:500;
  display:flex;flex-direction:column;gap:6px;align-items:stretch;cursor:pointer;text-align:center}
.stepper .schritt i{display:block;height:4px;border-radius:2px;background:var(--fill-soft);transition:background .3s}
.stepper .schritt.done i{background:var(--accent)}
.stepper .schritt span{height:auto;flex:none;background:none;border-radius:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepper .schritt.hier{color:var(--accent);font-weight:600}
.stepper .schritt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.obProgress{display:flex;gap:6px;margin-bottom:16px}
.obProgress i{flex:1;height:4px;border-radius:2px;background:var(--fill-soft)}
.obProgress i.done{background:var(--accent)}
.obStepNo{font-size:13px;color:var(--muted);margin-bottom:4px}
/* Aktivitätsringe: Spur in gedämpfter Ringfarbe */
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ring svg{transform:rotate(-90deg);display:block;overflow:visible}
.ring circle{fill:none;stroke-linecap:round}
.ring .ringBg{stroke:color-mix(in srgb,var(--rc,var(--accent)) 22%,transparent)}
.ring .ringFg{transition:stroke-dashoffset .8s var(--ease);animation:ringIn 1s var(--ease) both}
@keyframes ringIn{from{stroke-dashoffset:var(--c)}}
.ringC{position:absolute;text-align:center;font-family:var(--rounded);font-weight:700;line-height:1.05}
.ringC small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--muted)}
.bar{height:8px;background:var(--fill-soft);border-radius:4px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--mint);border-radius:4px;transition:width .6s var(--ease)}
.bar i.over{background:var(--accent)}
.barRow{margin-bottom:14px}
.barRow .lbl{display:flex;justify-content:space-between;font-size:15px;font-weight:600}
.barRow .lbl span:last-child{color:var(--muted);font-weight:400}
.pill{font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--fill-soft);color:var(--muted)}
.pill.k{background:var(--accent-soft);color:var(--accent)}
.pill.p{background:var(--mint-soft);color:var(--mint)}
.pill.salz.viel{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--text)}
.spin{width:20px;height:20px;border:2.5px solid var(--fill-soft);border-top-color:var(--muted);border-radius:50%;animation:rot .9s linear infinite;flex-shrink:0}
.emptyState{text-align:center;padding:28px 18px;border-radius:var(--r-md);color:var(--muted);background:var(--panel)}
.emptyState .eIc{font-size:34px;display:block;margin-bottom:8px}
.emptyState b{display:block;color:var(--text);font-size:17px;font-weight:600;margin-bottom:4px}
.emptyState span{font-size:15px;line-height:1.35}

/* Meldungen: Glaskapsel unter der Navigationsleiste, wie ein iOS-Hinweis */
.toasts{position:fixed;top:calc(8px + 48px + env(safe-area-inset-top));bottom:auto;left:50%;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toasts .toast:nth-last-child(n+2){display:none}
.toast{background:var(--shine),var(--glass-strong);color:var(--text);border-radius:999px;padding:12px 20px;font-size:15px;font-weight:600;letter-spacing:-.015em;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-sh);
  animation:toastIn .45s cubic-bezier(.2,.9,.3,1.2) both;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 32px);line-height:1.3;text-align:center}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.92)}to{opacity:1;transform:none}}
.toast.gold{color:var(--text)}
.toast.out{opacity:0;transition:opacity .35s}

/* ───────────── 6 · Ansichten ───────────── */

/* ── 6.1 Start & Anmeldung: Willkommensbildschirm wie bei Apple-Apps ── */
#view-auth .kicker{display:inline-flex;margin-bottom:6px}
#view-auth .hero{position:relative;isolation:isolate;padding-top:20px}
#view-auth .hero .viewTitle{font-size:40px;line-height:46px;letter-spacing:.01em;font-weight:800}
#view-auth .hero .lead{margin-top:12px}
.sprachWahl{margin:4px 0 16px}
.sprachTitel{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 4px}
.sprachen{display:flex;flex-wrap:wrap;gap:8px}
.sprache{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.sprache.sel{background:var(--accent-soft);color:var(--accent);font-weight:600}
.sprache:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Sprachwahl oben als Segmented Control */
.sprachWahl.oben{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.sprachWahl.oben .sprachTitel{margin:0 0 0 4px}
/* Segmented Control in iOS 26: Kapsel, der gewählte Abschnitt ist eine Glas-Bubble */
.sprachWahl.oben .sprachen{gap:0;padding:3px;border-radius:999px;background:var(--fill-quart);box-shadow:inset 0 0 0 var(--haar) var(--glass-rim);flex-wrap:nowrap}
.sprachWahl.oben .sprache{min-width:44px;min-height:34px;padding:0 9px;border-radius:999px;background:transparent;box-shadow:none;font-size:13px;font-weight:500;letter-spacing:0}
.sprachWahl.oben .sprache.sel{background:var(--shine),var(--seg-on);color:var(--text);font-weight:600;box-shadow:var(--glass-edge),0 3px 10px rgba(0,0,0,.14)}
#view-auth .sprachWahl.oben + .hero{padding-top:20px}
.startCard + .sprachWahl{margin-top:16px}
/* Das Takt-Prinzip als Karte */
.startTakt{position:relative;margin:8px 0 16px;padding:16px;border-radius:var(--r-lg);background:var(--panel)}
.stZeiten,.stBahn{display:grid;grid-template-columns:repeat(5,1fr);text-align:center}
.stZeiten span{font-family:var(--rounded);font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.stZeiten span:nth-child(3){color:var(--accent)}
.stBahn{position:relative;margin:10px 0 12px;justify-items:center;align-items:center}
.stBahn::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;border-radius:1px;background:var(--fill-soft);transform:translateY(-50%);pointer-events:none}
.stBahn::after{content:"";position:absolute;left:10%;width:40%;top:50%;height:2px;border-radius:1px;background:var(--accent);transform:translateY(-50%);pointer-events:none}
.stBahn i{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--line-strong)}
.stBahn i.fertig{background:var(--accent);box-shadow:none}
.stBahn i.jetzt{width:16px;height:16px;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.stText{margin:0;font-size:15px;line-height:1.35;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.stBahn i.jetzt{animation:stPuls 2.4s ease-in-out infinite}}
@keyframes stPuls{0%,100%{box-shadow:0 0 0 5px var(--accent-soft)}50%{box-shadow:0 0 0 9px transparent}}
.startCard{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px}
.startGo{min-height:50px;font-size:17px}
.startCard .authTryHint{margin:0;text-align:center;font-size:15px;color:var(--muted)}
.authTryHint{font-size:15px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.35}
.authZeigen{align-self:center;min-height:44px}
.authCard{margin-top:16px;box-sizing:border-box;max-width:min(560px, calc(100vw - 32px));overflow-x:hidden}
.authCard input{width:100%;max-width:100%;box-sizing:border-box;min-width:0;font-size:17px}
.authCard .hint{display:block;margin-top:6px;font-size:13px;color:var(--muted);line-height:1.35}
/* Anmelden / Konto erstellen als Segmented Control */
.authTabs{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:3px;border-radius:999px;background:var(--fill-quart)}
.authTabs .chip{display:flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;min-width:0;overflow:hidden;min-height:44px;padding:6px 8px;border-radius:999px;background:transparent;box-shadow:none;text-align:center;font-size:15px}
.authTabs .chip::after{content:none}
.authTabs .chip.sel{background:var(--shine),var(--seg-on);box-shadow:var(--glass-edge),0 3px 10px rgba(0,0,0,.14)}
.authTabs .chip small{font-weight:400;font-size:12px;color:var(--muted);line-height:1.2}
.authTabs .chip.sel small{color:var(--muted)}
.authTabs .chip span,.authTabs .chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.authMsg{min-height:20px;font-size:15px;margin:12px 4px 8px;color:var(--muted)}
.authMsg.fehler{color:var(--danger)}
.authMsg.ok{color:var(--mint)}
.authLegal{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.4;text-align:center}
.startCard .authLegal{margin:4px 0 0;text-align:center}
.authLegal a{color:var(--accent)}
.demoCard{display:flex;gap:14px;align-items:flex-start;max-width:560px}
.demoIcon{font-size:28px;line-height:1;flex-shrink:0;margin-top:2px}
.demoCard h3{font-size:17px;font-weight:600;margin-bottom:2px}
.demoCard p{font-size:15px;color:var(--muted);line-height:1.35}
@media(min-width:900px){
  #view-auth:not(.hidden){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:48px;align-items:start;align-content:start}
  #view-auth>.sprachWahl{grid-column:1/-1}
  #view-auth>.hero{grid-column:1;grid-row:2/span 4;padding-top:40px}
  #view-auth>.startTakt,#view-auth>.card{grid-column:2}
  #view-auth>.startTakt{margin-top:48px}
  #view-auth>.authCard,#view-auth>.demoCard{max-width:none}
  #view-auth .hero .viewTitle{font-size:56px;line-height:60px}
}

/* ── 6.2 Onboarding ── */
.ob-step h2{font-size:22px;line-height:28px}
#view-onboard.spaeter>.hero{display:none}
#view-onboard.spaeter>.stepper{margin-top:8px}
/* Knöpfe schweben über einer weichen Scroll-Kante wie in iOS 26 */
#view-onboard .btnRow{position:sticky;bottom:0;z-index:6;margin:10px -16px 0;padding:22px 16px calc(12px + env(safe-area-inset-bottom));gap:10px;
  background:linear-gradient(transparent,var(--top-fade) 38%)}
#view-onboard .btnRow .btn{min-height:50px;min-width:0;padding-left:16px;padding-right:16px;white-space:nowrap}
#view-onboard .btnRow .btn.primary{flex:1}
#view-onboard .btnRow #btnSave:not([hidden]){flex:1.3}
#view-onboard .btnRow #btnSave:not([hidden]) ~ *, #view-onboard .btnRow .btn.ghost{flex:0 1 auto}
body:has(#view-onboard:not(.hidden)) .fab{display:none}
.feinab{margin-top:14px;padding-top:6px;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line)}
.feinab summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:17px;color:var(--accent);list-style:none}
.feinab summary::-webkit-details-marker{display:none}
.feinab summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted-2);border-bottom:2px solid var(--muted-2);transform:rotate(45deg);transition:transform .25s var(--ease)}
.feinab[open] summary::after{transform:rotate(-135deg)}
.feinab .grid2{margin-top:8px}
.mealPick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mealOpt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 6px;min-height:76px;border:0;background:var(--input-bg);box-shadow:inset 0 1px 0 var(--glass-lo);border-radius:var(--r-md);transition:background .15s}
.mealOpt b{font-family:var(--rounded);font-size:28px;line-height:1;color:var(--text)}
.mealOpt small{font-size:13px;color:var(--muted);text-align:center;line-height:1.2;hyphens:auto;-webkit-hyphens:auto}
.mealOpt.sel{background:var(--accent-soft)}
.mealOpt.sel b,.mealOpt.sel small{color:var(--accent)}
.rhythmPreview{margin-top:10px;font-size:15px;color:var(--muted);line-height:1.35;padding:0 4px}
.rhythmPreview:empty{display:none}
/* Wochentage wie in der Uhr-App: runde Knöpfe */
.dayPick{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dayPick{display:grid}
.dayBtn{min-height:44px;min-width:0;padding:0;border:0;border-radius:999px;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);color:var(--text);font-weight:600;font-size:15px;cursor:pointer;transition:background .15s,color .15s}
.dayBtn.sel{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--fill);color:#fff}
#f-trainDays{margin-top:4px}
.grid2>#ketoWarn{grid-column:1/-1}
.grid2>#ketoWarn:empty{display:none}
#fieldZiel input{max-width:220px}
#ladenBox{margin-top:10px}
.ladenFrage{margin:12px 4px 8px;font-size:13px;color:var(--muted)}
@media (max-width:380px){ .ob-step .grid2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:360px){ .dayPick{gap:4px} .dayPick .dayBtn{font-size:13px} }

/* ── 6.3 Heute: Kacheln wie in Health und Fitness ── */
.homeHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:12px 0 12px}
.homeHead h2,.homeHead h1{font-size:34px;line-height:41px;letter-spacing:.011em}
.homeHead .date{color:var(--muted);font-size:15px;margin-top:0;order:-1}
.homeHead>div{display:flex;flex-direction:column}
.bento{display:grid;gap:12px}
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:820px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bento>.taktlinie{grid-column:1/-1}
.bento>*{min-width:0}
.tile{position:relative;background:var(--panel);border-radius:var(--r-lg);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-height:120px;transition:opacity .15s}
.tile.span2{grid-column:span 2}
.tile.click{cursor:pointer}
.tile.click:active{opacity:.6}
.tile .tl{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.015em}
.tile .tl .goArrow{float:none;margin-left:auto}
/* Symbol vor der Kategorie, Kategorie in der Symbolfarbe, Pfeil rechts */
.tIc{order:-1;flex-shrink:0;display:grid;place-items:center;width:auto;height:auto;color:var(--accent);background:none}
.tIc svg.ic{width:18px;height:18px;stroke-width:2}
.tIc.fire{color:var(--fire)}.tIc.gold{color:var(--gold)}.tIc.blue{color:var(--blue)}.tIc.aqua{color:var(--aqua)}
.tile .tl:has(.tIc.fire){color:var(--fire)}.tile .tl:has(.tIc.blue){color:var(--blue)}.tile .tl:has(.tIc.aqua){color:var(--aqua)}
.tile .tl:has(.tIc.gold){color:var(--text)}
.tile.click .tl::after,.goArrow{content:"";flex-shrink:0;margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted-2);border-top:2px solid var(--muted-2);transform:rotate(45deg);font-size:0}
.tile.click .tl:has(.goArrow)::after{content:none}
.tile .tv{font-family:var(--rounded);font-weight:700;font-size:28px;letter-spacing:-.01em;line-height:1.1;margin-top:auto}
.tile .tv u{text-decoration:none;font-family:var(--body);font-size:15px;color:var(--muted);font-weight:500}
.tile .ts{font-size:13px;color:var(--muted);line-height:1.3}
.tile[role="button"]:focus-visible,.expertBanner[role="button"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Schnellzugriffe mit Symbol wie in den Einstellungen */
.qa{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 16px}
.qa .qIc{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:var(--fill)}
.qa .qIc.mint{background:var(--mint)}
.qa .qIc svg.ic{width:21px;height:21px;stroke-width:2}
.qa b{font-size:17px;font-weight:600;letter-spacing:-.022em}
.qa .ts{margin-top:1px}
/* Takt heute: ruhige Karte, Orange zeigt den zurückgelegten Weg */
.taktlinie{position:relative;background:var(--panel);color:var(--text);border-radius:var(--r-lg);padding:14px 16px 12px}
.tlKopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.tlTitel{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--accent);letter-spacing:-.015em}
.tlTitel::before{content:"";width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;background:radial-gradient(circle,currentColor 2.5px,transparent 3px)}
.tlStand{font-size:15px;color:var(--muted);font-family:var(--rounded);font-weight:600}
.tlBahn{position:relative;display:grid;grid-template-columns:repeat(var(--takte),minmax(0,1fr));gap:0}
.tlBahn::before,.tlBahn::after{content:"";position:absolute;left:calc(50% / var(--takte));bottom:15px;height:3px;border-radius:2px;pointer-events:none}
.tlBahn::before{right:calc(50% / var(--takte));background:var(--fill-soft)}
.tlBahn::after{width:calc((100% - 100% / var(--takte)) * var(--fort,0));background:var(--accent);transform-origin:left;animation:fortschritt 1s var(--ease) both}
@keyframes fortschritt{from{transform:scaleX(0)}}
.takt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;background:none;border:0;color:var(--text);
  padding:4px 0;min-height:56px;cursor:pointer;border-radius:10px;font:inherit}
.takt:active{opacity:.5}
.takt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.taktZeit{font-family:var(--rounded);font-size:15px;font-weight:600;color:var(--muted)}
.taktPunkt{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--line-strong);margin-bottom:8.5px}
.takt.fertig .taktPunkt{background:var(--accent);box-shadow:none}
.takt.fertig .taktZeit{color:var(--text)}
.takt.jetzt .taktZeit{color:var(--accent);font-weight:700}
.takt.jetzt .taktPunkt{width:20px;height:20px;margin-bottom:6.5px;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);animation:taktSchlag 2.4s ease-in-out infinite}
.takt.vorstart{opacity:.35}
@keyframes taktSchlag{0%,100%{box-shadow:0 0 0 5px var(--accent-soft)}50%{box-shadow:0 0 0 9px transparent}}
.tlNext{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line)}
.tlNext.fertig{justify-content:center;font-size:15px;color:var(--mint)}
.tlNextText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:0;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.tlNextText:focus-visible,.tlDone:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tlNextText small{font-size:13px;color:var(--muted)}
.tlNextText b{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.022em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlNextText>span{font-size:13px;color:var(--muted)}
.tlDone{flex:0 0 auto;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--fill);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -8px rgba(207,69,0,.55);font:inherit;font-weight:600;font-size:15px;cursor:pointer}
.tlDone:active{opacity:.6}
/* Kalorien: Fitness-Ring links, Zahlen rechts */
.kcalHero{display:flex;align-items:center;gap:18px;padding:16px}
.bento>.tile.kcalHero{display:flex;flex-direction:row;align-items:center;gap:20px}
.bento>.tile.kcalHero .khSide{text-align:left}
.khRing{position:relative;flex-shrink:0;width:128px;height:128px}
.khRing svg{display:block}
.khCenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.khVal{font-size:30px;line-height:1;color:var(--text)}
.khOf{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.khPct{font-family:var(--rounded);font-weight:600;font-size:13px;color:var(--accent);margin-top:2px}
.khSide{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.khLabel{font-size:15px;font-weight:600;color:var(--accent)}
.khRest{font-size:28px;line-height:1.15;color:var(--text)}
.khRest small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);letter-spacing:-.015em}
.khGoal{font-size:13px;color:var(--muted);line-height:1.3}
.khSplit{font-size:13px;color:var(--muted)}
.kcalNums .big{font-family:var(--rounded);font-weight:700;font-size:30px;line-height:1}
.kcalNums .big u{text-decoration:none;font-size:15px;color:var(--muted)}
.kcalNums .ts{margin-top:8px}
/* Makros: drei Ringe */
.makroTile{padding:14px 16px}
.macroRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.macroRow>div{text-align:center}
.mk{position:relative;display:flex;flex-direction:column;align-items:center}
.mk svg{display:block}
.mkCenter{position:absolute;top:0;left:0;right:0;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mkVal{font-size:17px;line-height:1;color:var(--text)}
.mkVal small{font-family:var(--body);font-size:12px;font-weight:500;color:var(--muted);margin-left:1px}
.mkPct{font-family:var(--rounded);font-weight:600;font-size:12px;margin-top:2px;color:var(--muted)!important}
.mk .ml{margin-top:8px;font-size:13px;font-weight:600;color:var(--text);text-align:center;line-height:1.35}
.mk .ml span{color:var(--muted);font-weight:400}
/* Wasser */
.waterBtns{display:flex;gap:8px;margin-top:auto}
.waterBtns button{flex:1;border:0;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);border-radius:999px;padding:8px 0;font-weight:600;font-size:13px;color:var(--aqua);transition:opacity .15s}
.waterBtns button:active{opacity:.5}
.waterFill{height:6px;background:var(--fill-soft);border-radius:3px;overflow:hidden;margin:2px 0 4px}
.waterFill i{display:block;height:100%;border-radius:3px;background:var(--aqua);transition:width .6s var(--ease)}
/* Nächste Mahlzeit & heutiges Training */
.nextMeal,.todayTrain{position:relative;overflow:hidden}
.nextMeal.fertig{opacity:.8}
.todayTrain .tl{color:var(--mint)}
.goArrow{float:right}
.nmRow,.ttRow{display:flex;align-items:center;gap:12px;margin-top:6px}
.nmTime{font-size:28px;color:var(--accent);line-height:1;flex-shrink:0}
.nmTime small{display:block;font-family:var(--body);font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}
.ttIcon{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border-radius:11px;color:#fff;background:var(--mint)}
.ttIcon svg.ic{width:24px;height:24px;stroke-width:2}
.nmBody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nmBody b{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.022em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nmMeta{font-size:13px;color:var(--muted)}
.nmBar{height:6px;border-radius:3px;background:var(--fill-soft);margin-top:10px;overflow:hidden}
.nmBar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s var(--ease)}
.todayTrain .nmBar i{background:var(--mint)}
/* Plan sichern */
.sichernKarte{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;background:var(--panel);border-radius:var(--r-lg);padding:16px}
.bento>.sichernKarte{grid-column:1/-1}
.sichernKarte .skText{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sichernKarte strong{font-size:17px;font-weight:600}
.sichernKarte span{font-size:15px;color:var(--muted);line-height:1.35}
.sichernKarte .btn{flex-shrink:0;min-height:44px}
@media (max-width:819px){
  .bento>.sichernKarte{flex-direction:column;align-items:stretch;gap:12px}
  .sichernKarte .btn{width:100%}
}
.expertBanner{background:var(--panel);color:var(--text);border-radius:var(--r-lg);padding:14px 16px;font-size:15px;font-weight:600;margin-bottom:12px;cursor:pointer;box-shadow:inset 3px 0 0 var(--accent)}
.checkinBanner{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 0 12px;padding:12px 16px;border-radius:var(--r-lg);border:0;background:var(--panel);color:inherit;font:inherit;cursor:pointer}
.checkinBanner .cbText{flex:1;display:flex;flex-direction:column;gap:2px}
.checkinBanner small{color:var(--muted)}
/* Avatare wie in Kontakte: graue Fläche mit Initialen */
.wowaBild,.cbIcon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#A5ABB8,#858994);color:#fff;font-weight:600;font-size:19px}

/* ── 6.4 Ernährung ── */
#view-nutrition:not(.hidden){display:flex;flex-direction:column}
#view-nutrition>.hero{order:0}
#view-nutrition>.card{order:1}
#view-nutrition>.planTools{order:2;margin-top:4px}
#view-nutrition>.stats{order:3}
#view-nutrition>.note{order:4}
/* Die Tagesbahn steht schon auf «Heute» – hier bleibt sie nur für den Ausdruck */
@media screen{#view-nutrition>.lane{display:none}}
.lane{position:relative;color:var(--text);border-radius:var(--r-lg);padding:16px;margin-bottom:16px;overflow:hidden;background:var(--panel)}
.lane h3,.laneHead{font-size:15px;font-weight:600;color:var(--muted);font-family:var(--body);margin-bottom:16px;line-height:1.35}
.laneTrack{position:relative;display:grid;grid-template-columns:repeat(var(--stops,5),1fr);align-items:start;gap:0}
.laneTrack::before{content:"";position:absolute;top:38px;height:2px;border-radius:2px;left:calc(50% / var(--stops,5));right:calc(50% / var(--stops,5));background:var(--fill-soft);pointer-events:none}
.laneStop{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;border:0;background:transparent;padding:0 2px;cursor:pointer;min-width:0;border-radius:10px;color:var(--text)}
.laneStop:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.lsTime{font-family:var(--rounded);font-weight:600;font-size:15px;color:var(--text);line-height:1;height:22px;display:flex;align-items:center}
.lsDot{position:relative;z-index:1;width:16px;height:16px;margin:8px 0 9px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
.lsLabel{font-size:12px;color:var(--muted);line-height:1.3;text-align:center;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.laneStop.fertig .lsDot{background:var(--accent);box-shadow:none}
.laneStop.jetzt .lsDot{background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.laneStop.jetzt .lsTime,.laneStop.jetzt .lsLabel{color:var(--accent);font-weight:600}
.laneStop.offen .lsDot{background:var(--card)}
.lane::before,.lane::after,.card::before,.stat::before,.tile::before{pointer-events:none}
/* Tageswerte wie Health-Zusammenfassungen */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{position:relative;overflow:hidden;background:var(--panel);border-radius:var(--r-lg);padding:14px 16px}
.stat .v{font-size:28px;line-height:1.1}
.stat .v u{text-decoration:none;font-family:var(--body);font-size:15px;font-weight:500;color:var(--muted);margin-left:2px}
.stat .l{font-size:13px;color:var(--muted);margin-top:2px}
.stat.acc .v{color:var(--accent)}
.stat.grn .v{color:var(--mint)}
.stat.blu .v,.stat.gld .v{color:var(--text)}
.statBar{height:6px;border-radius:3px;background:var(--fill-soft);margin:10px 0 6px;overflow:hidden}
.statBar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s var(--ease)}
.stat.grn .statBar i{background:var(--mint)}
.stat.blu .statBar i{background:var(--blue)}
.stat.gld .statBar i{background:var(--gold)}
.statRest{font-size:12px;color:var(--muted);line-height:1.35}
.planTools{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.planTools .dzBtn{position:relative;z-index:2;min-height:50px;border-radius:999px;justify-content:center;font-size:15px}
/* Tagesauswahl als Segmented Control */
.dayTabs{display:flex;gap:0;overflow-x:auto;padding:3px;margin:0 0 12px;border-radius:999px;background:var(--fill-quart);scrollbar-width:none}
.dayTabs::-webkit-scrollbar{display:none}
.dayTabs button{flex:1 0 auto;border:0;background:transparent;border-radius:999px;padding:0 14px;min-height:38px;font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;transition:background .2s}
.dayTabs button.active,.dayTabs .dayTab.sel{background:var(--shine),var(--seg-on);color:var(--text);font-weight:600;box-shadow:var(--glass-edge),0 3px 10px rgba(0,0,0,.14)}
.dayHead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.dayHead:empty{display:none}
.dSplit{font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 10px}
.dSplit.ruhe{background:var(--fill-soft);color:var(--muted)}
.dKcal{font-size:15px;font-weight:600;color:var(--text)}
.dBurn{font-size:13px;color:var(--muted)}
.dTime{font-size:13px;color:var(--mint)}
.dSalz{font-size:13px;color:var(--muted)}
.dSalz.viel{color:var(--accent)}
.dHinweis,.tagHinweis{font-size:13px;color:var(--muted)}
.dHinweis{flex:1 1 100%}
.tagHinweis{margin:12px 0 0;text-align:center}
/* Mahlzeiten als Listenzellen */
.meal{position:relative;display:flex;gap:14px;padding:14px 16px;margin-bottom:10px;background:var(--input-bg);border-radius:var(--r-md)}
:root[data-theme="light"] .meal{background:var(--bg)}
.meal>div{min-width:0}
.meal .time{font-family:var(--rounded);font-weight:700;font-size:17px;min-width:56px;color:var(--accent);line-height:1.2}
.meal .time small{display:block;font-family:var(--body);font-size:13px;font-weight:400;color:var(--muted);margin-top:2px;overflow-wrap:anywhere;hyphens:auto}
.meal .itemHead{font-size:17px;font-weight:600}
.meal .desc{font-size:15px;color:var(--muted);margin-top:2px}
.meal .macro{display:flex;flex-wrap:wrap;gap:2px 0;align-items:baseline;margin-top:6px}
.meal .macro .pill{background:none;padding:0;border-radius:0;font-size:15px;font-weight:400;color:var(--muted)}
.meal .macro .pill+.pill::before{content:"·";margin:0 6px;color:var(--muted-2)}
.meal .macro .pill.k{color:var(--text);font-weight:600}
.meal .macro .pill.p{color:var(--mint)}
.meal[data-slot="pre"] .time small,.meal[data-slot="post"] .time small{color:var(--mint)}
.meal[data-slot="post"]{box-shadow:inset 3px 0 0 var(--mint)}
.meal[data-slot="pre"]{box-shadow:inset 3px 0 0 var(--accent)}
.meal.erledigt{opacity:.6}
.meal.erledigt .itemHead{text-decoration:line-through;text-decoration-color:var(--muted-2)}
.meal.getauscht{animation:getauscht .7s ease}
@keyframes getauscht{0%{background:var(--accent-soft)}100%{background:var(--input-bg)}}
.mealClick{cursor:pointer}
@media (max-width:480px){
  .meal{flex-direction:column;gap:6px}
  .meal .time{display:flex;align-items:baseline;gap:8px;min-width:0}
  .meal .time small{display:inline;margin-top:0;overflow-wrap:normal}
}
#mealList .meal .desc{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#mealList .meal.erledigt .desc,#mealList .meal.erledigt .prepBox{display:none}
#mealList .meal.erledigt{padding-top:12px;padding-bottom:12px}
@media (max-width:640px){
  #mealList .meal{padding:12px 14px;gap:4px;margin-bottom:8px}
  #mealList .meal .desc{display:none}
  #mealList .meal:has(.prepBox[open]) .desc{display:block;-webkit-line-clamp:unset}
  #mealList .meal .macro{gap:4px 0;margin-top:2px}
  #mealList .meal .macro .pill{font-size:15px;white-space:nowrap}
  #mealList .meal .prepBox{margin:0}
  #mealList .meal .prepBox summary{padding-top:0;padding-bottom:0;min-height:44px;display:flex;align-items:center}
}
.mealAkt{display:flex;gap:8px;margin-top:10px}
.mealAkt:empty{display:none}
.mealBtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:12px;border:0;border-radius:999px;cursor:pointer;
  background:var(--shine),var(--accent-soft);color:var(--accent);font-weight:600;font-size:15px;line-height:1.2;transition:opacity .15s}
.mealBtn:active{opacity:.5}
.mealBtn .mbIcon{font-size:15px;font-weight:700;line-height:1}
.mealBtn.fertig{background:var(--mint-soft);color:var(--mint)}
.mealAkt .swapBtn{margin-top:0;min-height:44px;flex:0 0 auto}
.mealAkt .mealBtn{flex:1;margin-top:0;width:auto}
.mealAkt .mealBtn:not(.fertig){background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),var(--fill);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.mealBtn.gesperrt,.exDone.gesperrt,.sessionDone.gesperrt{opacity:.4;cursor:not-allowed}
.mealAkt .mealBtn.gesperrt{background:var(--fill-soft);color:var(--muted)}
.swapBtn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.swapBtn:active{opacity:.5}
.swapBtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.variHinweis{margin:2px 0 6px;font-size:13px;color:var(--mint)}
.prepBox{margin-top:8px}
.prepBox summary{cursor:pointer;font-size:15px;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0;user-select:none}
.prepBox summary::-webkit-details-marker{display:none}
.prepBox summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.prepBox[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.prepInner{background:var(--card);border-radius:10px;padding:12px 14px;margin-top:6px;animation:fadeUp .25s ease both}
.zutHead{font-size:13px;color:var(--muted);margin-bottom:6px}
.zutHead span{font-weight:400}
.zut{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:4px 16px;margin-bottom:10px;padding-left:0}
.zut li{font-size:15px;padding-left:14px;position:relative;line-height:1.4}
.zut li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.prep{font-size:15px;color:var(--muted);line-height:1.45}
.prep b{color:var(--text);font-weight:600}
.dayBalance{background:var(--input-bg);border-radius:var(--r-md);padding:12px 16px;margin-top:12px}
:root[data-theme="light"] .dayBalance{background:var(--bg)}
.dayBalance:empty{display:none}
.balHead{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px}
.balRow{display:flex;align-items:center;gap:10px;padding:9px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:15px}
.balRow:last-of-type{box-shadow:none}
.balRow.eaten{color:var(--mint)}
.balL{flex:1}
.balV small{color:var(--muted)}
.balD{min-width:52px;text-align:right;font-size:13px;font-weight:600}
.balD.ok{color:var(--mint)}
.balD.warn{color:var(--accent)}
.balD.off{color:var(--danger)}
.balNote{font-size:13px;color:var(--muted);line-height:1.35;margin-top:8px}
.fpListe{list-style:none;padding:0;margin:0 0 10px}
.fpListe li{padding:10px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:15px;line-height:1.35}
.fpListe li small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.fpHinweis{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.35}
.fpHinweis:empty{display:none}
/* Grosse Titel auf dem Handy: 34 pt wie Large Title */
@media (max-width:640px){
  .view:not(#view-auth):not(#view-onboard) .hero{padding:12px 0 6px!important}
  .view:not(#view-auth):not(#view-onboard) .hero .viewTitle{font-size:34px!important;line-height:41px}
  #view-onboard .hero .viewTitle{font-size:34px}
  #view-tracker .hero .lead{display:none}
}

/* ── 6.5 Training ── */
.streak{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:14px 16px;border-radius:var(--r-lg);background:var(--panel)}
.streak .flame{width:44px;height:44px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#FFB340,#FF9500 55%,#FF6A00)}
.streak .flame svg.ic{width:26px;height:26px;stroke-width:2}
.streak>div:not(.flame):not(.sFlash){flex:1;min-width:0}
.streak .sNum{font-family:var(--rounded);font-weight:700;font-size:20px}
.streak.start .sNum{font-family:var(--display);font-size:17px;font-weight:600}
.streak .sSub{font-size:13px;color:var(--muted)}
.streak .sFlash{margin-left:auto;background:var(--mint);color:#fff;font-size:15px;font-weight:600;padding:6px 12px;border-radius:999px;animation:fadeUp .3s ease both}
.streakFire{color:var(--fire)}
.tDay{position:relative;min-width:0;max-width:100%;background:var(--panel);border-radius:var(--r-lg);padding:14px 16px 6px}
.tDay .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;gap:10px}
.tDay h3{font-size:20px;line-height:25px}
.tDay .focus{font-size:15px;font-weight:600;color:var(--accent);text-align:right}
.ex{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:var(--haar) solid var(--line);font-size:17px;min-width:0}
.ex:last-child{border-bottom:0}
.ex .nm{flex:1;min-width:0;text-align:left;font-weight:400;letter-spacing:-.022em;overflow-wrap:anywhere}
.ex .nm small{display:block;font-weight:400;color:var(--mint);font-size:13px;margin-top:1px}
.ex .nm small.exGetauscht{color:var(--accent)}
.ex .sets{font-family:var(--rounded);font-weight:600;font-size:15px;color:var(--muted);white-space:nowrap}
.ex.erledigt .nm{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted-2)}
.exClick{cursor:pointer}
.exClick:active{background:var(--hi)}
.exInfo{color:var(--muted-2);font-size:13px}
/* Häkchen im Kreis wie in Erinnerungen (Trefferfläche 44 px) */
.exDone{width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;color:transparent;font-size:15px;font-weight:700;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle,transparent 11px,var(--line-strong) 11.5px,var(--line-strong) 13px,transparent 13.5px)}
.exDone[aria-pressed="true"]{color:#fff;background:radial-gradient(circle,var(--mint) 13px,transparent 13.5px)}
.exDone.gesperrt{font-size:12px;color:var(--muted-2)}
.exSwap{flex:0 0 auto;width:44px;height:44px;margin:-6px -8px -6px 0;border:0;border-radius:50%;background:transparent;color:var(--accent);font-size:18px;line-height:1;cursor:pointer}
.exSwap:active{opacity:.4}
.exSwap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sessionDone{margin-top:12px}
.sessionDone.fertig{background:var(--mint-soft);color:var(--mint)}
.swap{background:var(--mint-soft);color:var(--text);border-radius:var(--r-md);padding:12px 14px;font-size:15px;margin-top:12px;line-height:1.4}
.reward{background:var(--panel);border-radius:var(--r-lg);padding:16px;margin-top:16px}
.reward h3{font-size:17px;font-weight:600;color:var(--accent)}
.reward p{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ── 6.6 Tagebuch ── */
#view-tracker:not(.hidden){display:flex;flex-direction:column}
#view-tracker>.hero{order:-1}
#view-tracker>.questCard{margin-top:4px}
.schnell{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0}
.schnell .dzBtn{justify-content:center;text-align:center;min-height:50px;padding:6px;font-size:13px;line-height:1.2;white-space:normal;border-radius:12px}
.trackForm{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end}
@media(max-width:680px){.trackForm{grid-template-columns:1fr 1fr}.trackForm .field:first-child{grid-column:1/-1}.trackForm .btn{grid-column:1/-1}}
.entry{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:17px}
.entry .et{font-family:var(--rounded);font-weight:600;font-size:15px;color:var(--accent);min-width:48px}
.entry .en{flex:1}
.entry .en small{display:block;color:var(--muted);font-size:13px}
.entry .ek{font-family:var(--rounded);font-weight:600;font-size:15px;white-space:nowrap;color:var(--muted)}
.entry .del{background:none;border:0;color:var(--danger);font-size:15px;padding:6px 10px;border-radius:8px}
.rhythmHint{margin-top:12px;font-size:15px;padding:12px 14px;border-radius:var(--r-md);line-height:1.4}
.rhythmHint.ok{background:var(--mint-soft);color:var(--text)}
.rhythmHint.warn{background:var(--accent-soft);color:var(--text)}
.wRow{display:flex;gap:12px;align-items:end;margin-bottom:6px}
.wRow .btn{padding:0 20px;white-space:nowrap}
#wChart{width:100%;display:none;margin-top:6px}
.bcRow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bcManualRow{display:flex;gap:10px;align-items:end}
.bcManualRow .btn{padding:0 20px}
.prodRow{display:flex;gap:12px;align-items:end;margin-top:12px}
.prodRow .btn{padding:0 20px;white-space:nowrap}
.foodPick{position:relative}
.foodList{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:6px;background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:var(--r-md);box-shadow:var(--glass-edge),var(--sh-lg);max-height:290px;overflow-y:auto;overscroll-behavior:contain}
.foodItem{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 16px;border:0;box-shadow:0 var(--haar) 0 var(--line);background:transparent;text-align:left;min-height:52px;cursor:pointer}
.foodItem:last-child{box-shadow:none}
.foodItem:hover,.foodItem.on{background:var(--hi)}
.foodItem .fn{font-size:17px;color:var(--text)}
.foodItem .fm{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.foodEmpty{padding:16px;font-size:15px;color:var(--muted);text-align:center}
.foodPicked{margin:8px 4px 0;font-size:15px;color:var(--mint);line-height:1.35}
.foodPicked .warn{color:var(--accent)}
/* Tagesaufgaben */
.questCard{position:relative;border-radius:var(--r-lg);padding:16px 16px 10px;margin-bottom:16px;background:var(--panel)}
.questCard:empty{display:none}
.qHead{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.qRing{position:relative;width:88px;height:88px;flex-shrink:0}
.qRing svg{width:88px;height:88px;transform:rotate(-90deg)}
.qTrack{fill:none;stroke:var(--accent-soft);stroke-width:10}
.qFill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.qVal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--rounded);font-weight:700;font-size:24px}
.qVal small{font-size:15px;color:var(--muted);font-weight:600}
.qInfo{flex:1;min-width:0}
.qKicker{font-size:15px;font-weight:600;color:var(--accent);margin-bottom:2px}
.qInfo h3{font-size:20px;line-height:25px}
.qChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qChip{font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--fill-soft);color:var(--muted)}
.qChip.serie{background:var(--accent-soft);color:var(--accent)}
.qChip.kombo{background:color-mix(in srgb,var(--indigo) 16%,transparent);color:var(--indigo)}
.qChip.perfekt{background:var(--mint-soft);color:var(--mint)}
.qList{display:flex;flex-direction:column;margin-bottom:6px}
.qItem{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 0;border:0;box-shadow:0 var(--haar) 0 var(--line);background:transparent;text-align:left;cursor:pointer}
.qItem:last-child{box-shadow:none}
.qItem:active{opacity:.6}
.qBox{width:24px;height:24px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);display:grid;place-items:center;font-size:13px;font-weight:700;color:transparent;transition:background .2s,color .2s,transform .2s}
.qItem.fertig .qBox{background:var(--mint);box-shadow:none;color:#fff}
.qTime{font-family:var(--rounded);font-size:15px;font-weight:600;color:var(--muted);min-width:44px;font-variant-numeric:tabular-nums}
.qText{flex:1;min-width:0;display:flex;flex-direction:column}
.qText b{font-size:17px;font-weight:400;letter-spacing:-.022em;overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.qText small{font-size:13px;color:var(--muted)}
.qItem.fertig .qText b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted-2)}
.qXp{font-family:var(--rounded);font-size:15px;font-weight:600;color:var(--accent);flex-shrink:0}
.qItem.fertig .qXp{color:var(--muted-2)}
.qItem.gerade{background:var(--mint-soft)}
.qFly{position:absolute;right:12px;top:50%;font-family:var(--rounded);font-weight:700;font-size:17px;color:var(--mint);pointer-events:none;animation:qfly .9s var(--ease) forwards}
@keyframes qfly{0%{opacity:0;transform:translateY(0) scale(.8)}25%{opacity:1;transform:translateY(-10px) scale(1.15)}100%{opacity:0;transform:translateY(-40px) scale(1)}}
.taskBox{max-width:460px}
.taskList{margin-top:6px}
.taskRow{display:flex;align-items:center;gap:10px;padding:10px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:15px}
.taskRow:last-child{box-shadow:none}
.taskRow .num{color:var(--accent);font-weight:600;min-width:44px}
.tTitel{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tDays{color:var(--muted);font-size:13px}
.tDel{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--danger);cursor:pointer;flex-shrink:0}
/* Tagesabschluss */
.dayDone{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.2);opacity:0;transition:opacity .25s}
.dayDone.an{opacity:1}
.ddBox{background:var(--shine),var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-radius:var(--r-xl);padding:28px 24px;max-width:340px;width:100%;text-align:center;box-shadow:var(--sh-lg);transform:scale(.92);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.dayDone.an .ddBox{transform:scale(1)}
.ddIcon{font-size:52px;line-height:1;margin-bottom:8px;animation:ddPop .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes ddPop{0%{transform:scale(0)}100%{transform:scale(1)}}
.ddBox h2{font-size:22px;line-height:28px;margin-bottom:4px}
.ddBox p{font-size:15px;color:var(--muted);line-height:1.4}
.ddBonus{font-family:var(--rounded);font-weight:700;font-size:44px;color:var(--mint);margin:14px 0 4px}
.ddStreak{font-size:15px;font-weight:600;color:var(--accent);margin-bottom:12px}
.ddNext{font-size:13px;color:var(--muted);margin-bottom:18px}
/* Wochenrückblick */
.wochenKarte:empty{display:none}
.wkKopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.wkKopf h2{margin:0}
.wkKopf small{color:var(--muted)}
.wkZahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 6px}
.wkZahlen>div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--input-bg);min-width:0}
.wkZahlen b{font-family:var(--rounded);font-size:clamp(15px,4.4vw,20px);white-space:nowrap}
.wkZahlen small{color:var(--muted);font-size:12px;line-height:1.25}
.wkDelta{font-size:13px;font-weight:600}
.wkDelta.ok{color:var(--mint)}.wkDelta.warn{color:var(--danger)}.wkDelta.info{color:var(--muted)}
.wkKurve{width:100%;height:auto;margin:6px 0}
.wkKurve .wkLinie{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wkKurve .wkPunkt{fill:var(--accent)}
.wkKurve .wkTrenn{stroke:var(--line-strong);stroke-dasharray:3 4}
.wkKurve .wkMittel{stroke:var(--text);stroke-width:1.5;stroke-dasharray:6 4;opacity:.5}
.wkKurve .wkMittel.alt{opacity:.25}
.wkUrteil{margin:8px 0 6px;padding:10px 12px;border-radius:var(--r-md);background:var(--input-bg)}
.wkUrteil.warn{box-shadow:inset 3px 0 0 var(--danger)}
.wkUrteil.ok{box-shadow:inset 3px 0 0 var(--mint)}
.wkNote{font-size:13px;color:var(--muted);margin:0 0 10px}

/* ── 6.7 KI-Scan ── */
.scanGrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:760px){.scanGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dropzone{border-radius:var(--r-md);background:var(--input-bg);padding:24px 16px 18px;text-align:center;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.dropzone.drag{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.dropzone .big{font-size:36px;line-height:1;margin-bottom:8px}
.dropzone p{font-size:15px;color:var(--muted);line-height:1.35}
.dropzone p b{color:var(--text);font-weight:600}
.dzBtns{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
#view-scan.kiAus .dzBtn{opacity:.4}
#view-scan.kiAus .dropzone,#view-scan.kiAus .dz{cursor:not-allowed}
.preview{position:relative;margin-top:14px}
.preview img{width:100%;max-height:300px;object-fit:cover;border-radius:var(--r-md);display:block}
.preview .retake{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.scanning{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;background:var(--input-bg);border-radius:var(--r-md);font-size:15px}
.scanResult{margin-top:14px;background:var(--mint-soft);border-radius:var(--r-md);padding:16px;animation:fadeUp .35s ease both}
.scanResult .itemHead{font-size:17px;margin-bottom:4px}
.scanResult .ingr{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}
.scanResult .macro{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.scanErr{margin-top:14px;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--text);border-radius:var(--r-md);padding:12px 14px;font-size:15px;line-height:1.4}
.bfGauge{margin-top:8px}
.bfGauge .cat{font-size:15px;font-weight:600;color:var(--mint);margin-top:4px}
.bfBar{position:relative;height:10px;border-radius:5px;margin:14px 0 6px;background:linear-gradient(90deg,#34C759 0%,#A2D94A 30%,#FFCC00 60%,#FF9500 100%)}
.bfBar .mark{position:absolute;top:-5px;width:4px;height:20px;background:var(--text);border-radius:2px;box-shadow:0 0 0 2px var(--card)}
.bfScale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.bfTips{margin-top:12px;font-size:15px}
.bfTips li{margin:6px 0 6px 18px;line-height:1.4}
.bfHistory{margin-top:14px}
.privacy{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.4}
.bodyMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media(max-width:420px){.bodyMetrics{grid-template-columns:1fr 1fr}}
.bm{background:var(--input-bg);border-radius:var(--r-md);padding:12px;text-align:center}
.bm-v{font-family:var(--rounded);font-weight:700;font-size:22px;color:var(--text);line-height:1.1}
.bm-v u{text-decoration:none;font-family:var(--body);font-size:13px;color:var(--muted);margin-left:1px}
.bm-l{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.35}

/* ── 6.8 Mein Bereich ── */
.memberCard{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:16px;border-radius:var(--r-lg);background:var(--panel)}
.memberCard:empty{display:none}
.mAvatar{width:60px;height:60px;border-radius:50%;flex-shrink:0;background:linear-gradient(180deg,#A5ABB8,#858994);color:#fff;display:grid;place-items:center;font-family:var(--rounded);font-weight:600;font-size:26px}
.mInfo{flex:1;min-width:0}
.mInfo b{font-size:20px;font-weight:600;display:block;letter-spacing:-.02em}
.mInfo small{color:var(--muted);font-size:15px;display:block;overflow:hidden;text-overflow:ellipsis}
.mLvl{font-size:13px;font-weight:600;color:var(--accent);margin-top:2px}
@media (max-width:480px){
  .memberCard{flex-wrap:wrap}
  .memberCard .mInfo{flex:1;min-width:0}
  .memberCard>.btn{flex:1 1 100%;min-height:50px}
}
.mStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:560px){.mStats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mTile{background:var(--panel);border-radius:var(--r-lg);padding:14px 16px;border:0}
button.mTile{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
button.mTile:active{opacity:.6}
button.mTile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mL{font-size:13px;color:var(--muted)}
.mV{font-family:var(--rounded);font-weight:700;font-size:28px;color:var(--text);line-height:1.15;margin-top:2px}
.mS{font-size:13px;color:var(--muted)}
.mTile.leer .mS{color:var(--accent);font-weight:600}
.pbList,.logList{background:var(--panel);border-radius:var(--r-md);padding:0 16px;margin-top:8px}
.pbItem,.logItem{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:17px}
.pbItem:last-child,.logItem:last-child{box-shadow:none}
.pbItem{cursor:pointer}
.pbN,.lgN{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbV,.lgV{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pbD,.lgD{color:var(--muted-2);font-size:13px;white-space:nowrap}
.lgD{min-width:76px}
/* Coach Wowa: Nachrichten wie in iMessage */
.wowaCard{margin-top:16px;scroll-margin-top:84px}
.wowaKopf{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.wowaKopf h2{margin:0 0 2px}
.wowaLeer{color:var(--muted);margin:10px 0}
.wowaHinweis{background:var(--input-bg);border-radius:var(--r-md);padding:10px 12px;margin:0 0 10px}
.wFaden{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.wMsg{max-width:80%;padding:8px 13px;border-radius:18px;background:var(--card-2);font-size:17px;line-height:1.3}
:root[data-theme="light"] .wMsg{background:#E9E9EB}
.wMsg.vonMir{align-self:flex-end;border-bottom-right-radius:5px;background:var(--blue);color:#fff}
.wMsg.vonMir .wMeta{color:rgba(255,255,255,.75)}
.wMsg.vonWowa{align-self:flex-start;border-bottom-left-radius:5px}
.wMeta{font-size:12px;color:var(--muted);margin-bottom:2px}
.ciTitel{font-weight:600;font-size:15px}
.ciZeile{font-size:15px;opacity:.85;margin:2px 0 4px}
.wText{white-space:pre-wrap;overflow-wrap:anywhere}
.wSchreiben{display:flex;gap:8px;align-items:flex-end}
.wSchreiben textarea{flex:1;min-width:0;resize:vertical;min-height:44px}
.wSchreiben .btn{min-height:44px}
.wowaCard textarea{width:100%;padding:10px 14px;border:0;border-radius:20px;background:var(--input-bg);color:var(--text);font:inherit;font-size:17px;line-height:1.3}
.wowaCard textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
.checkinForm{display:flex;flex-direction:column;gap:12px;margin:4px 0 8px}
.checkinForm h3{margin:0}
.checkinForm textarea{width:100%;resize:vertical}
.skala{border:0;margin:0;padding:0;min-width:0}
.skala legend{font-size:15px;font-weight:600;margin-bottom:6px;padding:0}
.skalaReihe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:3px;border-radius:999px;background:var(--fill-quart)}
.skalaReihe label{position:relative}
.skalaReihe input{position:absolute;opacity:0;inset:0;margin:0}
.skalaReihe span{display:grid;place-items:center;min-height:40px;border-radius:999px;font-weight:500;font-size:15px}
.skalaReihe input:checked+span{background:var(--shine),var(--seg-on);font-weight:600;box-shadow:var(--glass-edge),0 3px 10px rgba(0,0,0,.14)}
.skalaReihe input:focus-visible+span{outline:3px solid var(--accent);outline-offset:1px}
.skalaEnden{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:4px}
/* Trophäen & Liga */
.trGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){#memberTrophies.trGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trophy{border-radius:var(--r-md);padding:14px 10px;text-align:center;opacity:.45;background:var(--panel)}
.trophy.won{opacity:1}
.trophy.naechste{opacity:1;box-shadow:inset 0 0 0 1.5px var(--accent)}
.trophy.naechste .trIc{filter:grayscale(1);opacity:.7}
.trIc{font-size:30px}
.trN{font-size:13px;font-weight:600;margin-top:4px}
.trD{font-size:12px;color:var(--muted);line-height:1.35;margin-top:2px}
.trNext{font-size:12px;font-weight:600;color:var(--accent);margin-top:4px}
.trZaehler{grid-column:1/-1;margin:0 4px 2px;color:var(--muted);font-size:13px}
.trAlle{grid-column:1/-1;margin-top:6px}
.lgBox{text-align:left;max-height:86vh;overflow-y:auto}
.lgLevel{font-size:15px;color:var(--muted)}
.lgLevel b{color:var(--accent);font-size:17px}
.lgBox #lgSub{color:var(--muted);font-size:13px}
.lgTable{background:var(--panel);border-radius:var(--r-md);padding:0 16px}
.lgRow{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:17px}
.lgRow:last-child{box-shadow:none}
.lgRow.me{color:var(--accent);font-weight:600}
.lgPos{min-width:24px;color:var(--muted);font-variant-numeric:tabular-nums}
.lgRow.me .lgPos{color:var(--accent)}
.lgName{flex:1}.lgName small{color:var(--muted)}

/* ───────────── 7 · Sheets, Menü, Coach ───────────── */
.bcModal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .25s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bcBox{position:relative;width:100%;max-width:min(460px, calc(100vw - 32px));box-sizing:border-box;background:var(--shine),var(--glass-strong);border-radius:var(--r-xl);
  -webkit-backdrop-filter:saturate(1.8) blur(30px);backdrop-filter:saturate(1.8) blur(30px);
  padding:14px 16px max(18px,env(safe-area-inset-bottom));text-align:left;box-shadow:var(--glass-edge),var(--sh-lg);animation:boxIn .3s var(--ease) both}
@keyframes boxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.bcBox h2,.bcBox h3{font-size:20px;line-height:25px;font-weight:700;margin:4px 48px 6px 0}
.bcBox video{width:100%;border-radius:var(--r-md);display:block;background:#000;aspect-ratio:4/3;object-fit:cover}
.bcFrame{position:absolute;top:30px;left:16px;right:16px;aspect-ratio:4/3;border-radius:var(--r-md);pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) center/72% 2px no-repeat;box-shadow:inset 0 0 0 2px var(--accent)}
.bcBox p{color:var(--muted);font-size:15px;margin:12px 0;line-height:1.4}
.bcBox .sub{color:var(--muted)}
.bcBox .field{max-width:100%;text-align:left;margin-top:12px}
.bcBox input,.bcBox select,.bcBox textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0;font-size:17px;text-overflow:ellipsis}
.bcBox select{white-space:nowrap}
.bcBox .grid2{grid-template-columns:1fr}
.bcBox .btn{width:100%;box-sizing:border-box}
.shopBox,.exBox,.lgBox,.taskBox{min-height:0}
/* Griff oben wie bei iOS-Sheets */
.bcBox::before,.bubbleMenu::before,.chatPanel::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto 10px;flex-shrink:0}
.bcBox,.bubbleMenu,.chatPanel{touch-action:pan-y;will-change:transform}
@media (max-width:720px){
  /* Sheets schweben mit Abstand zum Rand, wie in iOS 26 */
  .bcModal{align-items:flex-end;padding:0 8px max(8px,env(safe-area-inset-bottom))}
  .bcBox{max-width:100%;border-radius:32px;padding-bottom:20px;animation:sheetUp .42s cubic-bezier(.2,.9,.3,1) both}
  .bubbleMenu{top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;max-width:none;border-radius:32px;max-height:90vh;animation:sheetUp .42s cubic-bezier(.2,.9,.3,1) both}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Schliessen: Kreuz in einer runden Glas-Bubble (44 pt) */
.sheetX{position:absolute;top:10px;right:10px;z-index:6;width:44px;height:44px;border:0;border-radius:50%;color:var(--text);font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:center;background:var(--shine),var(--glass);box-shadow:var(--glass-edge)}
.sheetX:active{transform:scale(.9)}
.delBox{max-width:420px;text-align:center}
.delIcon{font-size:44px;line-height:1;margin:6px 0 8px;text-align:center}
.delBox .field{text-align:left;margin-top:16px}
.delBox #delConfirm{text-align:center;font-weight:600;letter-spacing:.12em}
.recBox{max-width:400px}
.recCode{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:600;font-size:clamp(17px,5vw,22px);letter-spacing:.06em;color:var(--text);background:var(--input-bg);border-radius:var(--r-md);padding:14px 12px;margin:16px 0 12px;word-break:break-all;line-height:1.4;text-align:center}
.recAck{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:15px;color:var(--muted);margin:14px 0;line-height:1.4;cursor:pointer}
.recAck input{width:22px;height:22px;flex-shrink:0;margin-top:0;accent-color:var(--accent)}
/* Übungs-Sheet */
.exBox{text-align:left;max-height:88vh;overflow-y:auto}
.exIcon{font-size:40px;text-align:center;margin-bottom:8px}
.exMuscle{font-size:15px;color:var(--muted);margin-bottom:10px}
.exSteps{font-size:17px;line-height:1.45}
.exMistake{font-size:15px;color:var(--text);margin-top:10px;background:var(--accent-soft);border-radius:var(--r-md);padding:10px 12px;line-height:1.4}
.exStepsHead{font-size:15px;font-weight:600;margin-bottom:4px}
.exOl{margin:0 0 4px;padding-left:0;list-style:none;counter-reset:exs}
.exOl li{counter-increment:exs;position:relative;padding:8px 0 8px 38px;font-size:17px;line-height:1.4;box-shadow:0 var(--haar) 0 var(--line)}
.exOl li:last-child{box-shadow:none}
.exOl li::before{content:counter(exs);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:var(--fill);color:#fff;font-family:var(--rounded);font-weight:700;font-size:15px;display:grid;place-items:center}
.exOl li.tempo{color:var(--mint)}
.exOl li.tempo::before{content:"♻";background:var(--mint)}
/* Bewegungsfigur: Gliederpuppe mit Volumen, Zielmuskel orange, Ablauf gross, Ausgangs- und Endposition darunter */
.exMedien{margin:0 0 12px}
.exFigur{display:grid;place-items:center;margin:0 auto 10px;width:min(300px,78vw);aspect-ratio:120/130;max-width:100%;border-radius:var(--r-lg);background:var(--group)}
.exFigur svg{width:100%;height:100%}
.exPhasen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 8px}
.exPhase{margin:0;padding:6px 6px 8px;border-radius:var(--r-md);background:var(--group);text-align:center}
.exPhase svg{display:block;width:100%;height:auto}
.exPhase figcaption{margin-top:2px;font-size:13px;font-weight:600;color:var(--muted)}
.exZielHinweis{display:flex;align-items:center;gap:8px;margin:2px 4px 0;font-size:13px;color:var(--muted)}
.exZielHinweis i{width:12px;height:12px;border-radius:50%;background:var(--fk-ziel);flex:none}
.exFigur,.bewegung,.bewegungPhase,.exZielHinweis{--fk:#565C67;--fk2:#B3B9C3;--fk-ziel:#FF8A00;--fk-ziel2:#FFBC6E;--fk-stahl:#9EA5AF;--fk-scheibe:#2C2C2E;
  --fk-polster:#3A3A3C;--fk-matte:#DDE2E9;--fk-boden:rgba(60,60,67,.16);--fk-band:#30B0C7}
:root:not([data-theme="light"]) :is(.exFigur,.bewegung,.bewegungPhase,.exZielHinweis){--fk:#DADDE3;--fk2:#7D838D;--fk-scheibe:#636366;--fk-polster:#4A4D54;
  --fk-matte:#33363C;--fk-boden:rgba(235,235,245,.16)}
.fkKoerper,.fkHand{fill:var(--fk)}
.fkHinten{fill:var(--fk2)}
.fkKoerper.fkZiel{fill:var(--fk-ziel)}
.fkHinten.fkZiel{fill:var(--fk-ziel2)}
.fkScheibe{fill:var(--fk-scheibe)}
.fkHintenGeraet{opacity:.5}
.fkStahl{fill:var(--fk-stahl)}
.fkRing{fill:none;stroke:var(--fk-stahl);stroke-width:1.2;opacity:.55}
.fkGriff{fill:none;stroke:var(--fk-scheibe);stroke-width:2.2}
.fkBall{fill:var(--fk-ziel2)}
.fkSaeule{fill:var(--fk-polster);opacity:.3}
.fkSeil{stroke:var(--fk-stahl);stroke-width:1.3}
.fkBand{stroke:var(--fk-band);stroke-width:2.4;stroke-linecap:round}
.fkGestell{stroke:var(--fk-stahl);stroke-width:2.8;stroke-linecap:round}
.fkPolster{fill:var(--fk-polster)}
.fkMatte{fill:var(--fk-matte)}
.fkBoden{stroke:var(--fk-boden);stroke-width:1.5}
.fkSchatten{fill:var(--fk-boden)}
.exVideo{display:block;width:100%;max-height:48vh;border-radius:var(--r-md);background:#000;margin:0 0 12px}
.exLog{margin-top:14px;padding-top:12px;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line)}
.exLogHead{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
.pbRow{font-size:15px;padding:8px 12px;border-radius:10px;background:var(--accent-soft);margin-bottom:6px}
.pbRow.last{background:var(--input-bg);color:var(--muted)}
.pbRow small{color:var(--muted)}
.exLogForm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.exLogForm .field{margin:0}
.exLogForm label{font-size:13px}
.exLogMsg{font-size:13px;color:var(--accent);margin-top:6px;min-height:14px}
.exLogList{margin-top:10px;padding-top:6px;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line)}
.exLogItem{display:flex;justify-content:space-between;font-size:15px;padding:6px 0;color:var(--muted)}
/* Menü wie die iOS-Einstellungen: gruppierte Listen */
.bubbleMenu{position:fixed;top:calc(60px + env(safe-area-inset-top));right:12px;left:12px;z-index:80;max-width:420px;margin-left:auto;background:var(--shine),var(--glass-strong);border-radius:var(--r-xl);
  -webkit-backdrop-filter:saturate(1.8) blur(30px);backdrop-filter:saturate(1.8) blur(30px);box-shadow:var(--glass-edge),var(--sh-lg);
  max-height:calc(100dvh - 80px);display:flex;flex-direction:column;padding-top:8px;padding-bottom:max(16px,env(safe-area-inset-bottom));animation:boxIn .25s var(--ease) both}
@media (max-width:720px){
  .bubbleMenu{top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px;max-width:none;border-radius:32px;max-height:90vh;animation:sheetUp .42s cubic-bezier(.2,.9,.3,1) both}
}
.bmHead{display:flex;align-items:center;gap:12px;margin:4px 16px 12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--group)}
.bmAvatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,#A5ABB8,#858994);color:#fff;display:grid;place-items:center;font-family:var(--rounded);font-weight:600;font-size:21px}
.bmHead b{font-size:17px;font-weight:600}
.bmHead small{display:block;color:var(--muted);font-size:13px}
.bmHead button{margin-left:auto;width:44px;height:44px;border:0;border-radius:50%;color:var(--text);font-size:15px;font-weight:600;background:var(--shine),var(--glass);box-shadow:var(--glass-edge)}
.bmBody{overflow-y:auto;padding:0 16px 16px}
.bmSection{background:var(--group);border-radius:var(--r-lg);padding:4px 14px 10px;margin-bottom:20px}
.bmSection .itemHead,.bmHead3{font-family:var(--body);font-size:13px;font-weight:400;color:var(--muted);margin:8px 0 4px;letter-spacing:0}
.bmRow{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:6px 0;font-size:17px;box-shadow:0 var(--haar) 0 var(--line)}
.bmRow:last-child{box-shadow:none}
.bmRow .bmHint{display:block;color:var(--muted);font-size:13px;max-width:230px;line-height:1.35;margin-top:2px}
.bmSel{border:0;background:var(--input-bg);color:var(--text);border-radius:8px;padding:8px 10px;font-size:15px}
.bmNote{font-size:13px;color:var(--muted);line-height:1.4;margin:6px 0 10px}
.bmQuick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bmQuick .dzBtn{width:100%;justify-content:center}
.bubbleMenu .btn{margin-top:8px}
.aboGrid{display:grid;gap:8px}
.aboCard{border-radius:var(--r-md);padding:12px 14px;position:relative;background:var(--input-bg)}
.aboCard.cur{background:var(--mint-soft)}
.aboCard b{font-size:17px;font-weight:600}
.aboCard .aboP{font-family:var(--rounded);font-weight:700;font-size:22px;color:var(--text)}
.aboCard .aboP small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:400}
.aboCard p{font-size:13px;color:var(--muted);margin:2px 0 6px;line-height:1.35}
.aboTag{font-size:13px;font-weight:600;color:var(--mint)}
.aboCard:not(.cur) .aboTag{color:var(--muted)}
.remBox{margin-top:2px}
.remDetails{display:flex;flex-direction:column;padding:2px 0 6px}
.remDetails.aus{opacity:.45}
.remZeile{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:17px;box-shadow:0 var(--haar) 0 var(--line)}
.remZeile input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}
.remZeile small{margin-left:auto;color:var(--muted);text-align:right;font-size:13px}
.remStatus{font-size:13px;color:var(--muted);margin:6px 0}
.remStatus:empty{display:none}
.healthRow{margin-top:2px}
/* KI-Coach: orange Glas-Bubble und Chat wie in Nachrichten */
.fab{position:fixed;right:16px;z-index:60;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 62px + 14px);width:56px;height:56px;border-radius:50%;border:0;font-size:24px;color:#fff;
  background:radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.42),rgba(255,255,255,0) 50%),var(--fill);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -2px 4px rgba(0,0,0,.18),0 12px 26px -8px rgba(207,69,0,.6);transition:transform .25s var(--ease),opacity .25s ease}
.fab:active{transform:scale(.92)}
.fab.weg{transform:translateY(120px);opacity:0;pointer-events:none}
@media(min-width:900px){.fab{bottom:24px;right:24px}}
.chatPanel{position:fixed;z-index:70;display:flex;flex-direction:column;background:var(--shine),var(--glass-strong);-webkit-backdrop-filter:saturate(1.8) blur(30px);backdrop-filter:saturate(1.8) blur(30px);
  box-shadow:var(--glass-edge),var(--sh-lg);left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));height:min(80vh,620px);border-radius:32px;overflow:hidden;padding-top:8px;animation:sheetUp .42s cubic-bezier(.2,.9,.3,1) both}
@media(min-width:900px){.chatPanel{left:auto;right:24px;bottom:92px;width:400px;border-radius:var(--r-xl);animation:boxIn .3s var(--ease) both}}
.chatHead{display:flex;justify-content:space-between;align-items:center;padding:0 8px 8px 16px;box-shadow:0 var(--haar) 0 var(--line)}
.chatHead b{font-size:17px;font-weight:600}
.chatHead small{display:block;color:var(--muted);font-size:13px}
.chatHead button{width:44px;height:44px;border:0;border-radius:50%;color:var(--text);font-size:15px;font-weight:600;background:var(--shine),var(--glass);box-shadow:var(--glass-edge)}
.chatMsgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:transparent}
.msg{max-width:78%;padding:8px 13px;border-radius:18px;font-size:17px;line-height:1.3;white-space:pre-wrap;animation:fadeUp .25s ease backwards}
.msg.bot{background:var(--card-2);border-bottom-left-radius:5px;align-self:flex-start}
:root[data-theme="light"] .msg.bot{background:#E9E9EB}
.msg.bot b{font-weight:600}
.msg.bot i{font-style:italic}
.msg.me{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),var(--blue);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.hinweis{background:var(--accent-soft);white-space:normal}
.msg.typing{display:flex;gap:4px;padding:12px 14px}
.msg.typing span{width:8px;height:8px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite}
.msg.typing span:nth-child(2){animation-delay:.2s}.msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chatInput{display:flex;gap:8px;align-items:center;padding:8px 12px 12px;background:transparent}
.chatInput input{flex:1;min-width:0;min-height:44px;border:0;box-shadow:var(--glass-edge);background:var(--shine),var(--glass);color:var(--text);border-radius:999px;padding:9px 16px;font-size:17px}
.chatInput input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--accent)}
.chatInput .btn{width:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%),var(--blue);color:#fff;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -6px rgba(0,122,255,.6)}
.coachList{list-style:none;margin:6px 0;padding:0}
.coachList li{position:relative;padding-left:14px;margin-bottom:4px;line-height:1.35}
.coachList li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.optHead{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px;padding-top:10px;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line);font-weight:600;line-height:1.35}
.optHead:first-child{box-shadow:none;padding-top:0;margin-top:0}
.optTag{flex-shrink:0;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 8px}
.hinweisBtn{display:flex;width:100%;margin-top:10px;min-height:44px;font-size:15px;justify-content:center}
.frageChips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:6px 0 4px}
.frageChip{max-width:85%;text-align:left;padding:8px 13px;min-height:44px;border-radius:18px 18px 5px 18px;border:0;box-shadow:inset 0 0 0 1px var(--blue);background:transparent;color:var(--blue);font:inherit;font-size:17px;line-height:1.3;cursor:pointer}
.frageChip:active{background:color-mix(in srgb,var(--blue) 12%,transparent)}
.frageChip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ───────────── 8 · Kochmodus & Einkauf ───────────── */
.shopBox{text-align:left;max-height:88vh;display:flex;flex-direction:column}
.shopBox>*{flex-shrink:0}
.shopBox>p{color:var(--muted);font-size:15px;margin-bottom:10px}
.shopList{flex:1 1 auto;min-height:0;max-height:min(60vh,520px);overflow-y:auto;background:var(--group);border-radius:var(--r-lg);padding:0 14px;margin-bottom:14px}
.shopHead{position:sticky;top:0;z-index:1;background:inherit;padding:12px 0 4px;font-size:13px;font-weight:600;color:var(--muted)}
.shopHead small{display:block;font-weight:400;font-size:12px}
.shopItem{display:flex;align-items:center;gap:12px;padding:10px 0;box-shadow:0 var(--haar) 0 var(--line);font-size:17px;cursor:pointer;min-height:44px}
.shopItem:last-child{box-shadow:none}
.shopItem input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}
.shopItem .amt{min-width:66px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.shopItem input:checked~span{opacity:.45;text-decoration:line-through}
.shopCount{font-size:13px;color:var(--muted);margin-bottom:10px}
.shopNote{font-size:13px;color:var(--muted);margin:10px 0 2px}
.shopPk .shopName{display:flex;flex-direction:column;gap:1px;min-width:0}
.shopPk .shopName b{font-size:17px;font-weight:400}
.shopPk .shopZeile{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.shopPk .amt{min-width:0;font-weight:500;font-size:15px}
.shopPk .genau{color:var(--muted-2);font-size:13px}
.shopPk:has(input:checked) span,.shopPk:has(input:checked) b{text-decoration:line-through;opacity:.45}
.orderHint{font-size:13px;color:var(--muted);line-height:1.4;margin-bottom:12px}
.shopActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.shopActions .dzBtn{flex-direction:column;justify-content:center;gap:2px;min-height:60px;font-size:13px;padding:6px 4px;text-align:center;line-height:1.25}
.shopActions .dzBtn span{display:block}
#shopMsg{min-height:18px;margin:0 0 8px;font-size:15px}
@media (max-width:380px){.shopActions{grid-template-columns:1fr 1fr}.shopActions .dzBtn:last-child{grid-column:1/-1}}
.kochStart{width:100%;margin:10px 0 4px}
ol.schritte{margin:6px 0 0;padding:0;list-style:none;counter-reset:s}
ol.schritte li{counter-increment:s;position:relative;display:flex;gap:12px;align-items:center;padding:10px 0;box-shadow:0 calc(-1 * var(--haar)) 0 var(--line);line-height:1.4}
ol.schritte li::before{content:counter(s);flex:0 0 22px;height:22px;border-radius:50%;background:var(--fill);color:#fff;font-family:var(--rounded);font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:1px}
/* Bild zu jedem Zubereitungsschritt; die Nummer sitzt auf der Bildecke */
ol.schritte li:has(.schrittBild)::before{position:absolute;left:-4px;top:6px;z-index:1;width:22px;box-shadow:0 0 0 2px var(--card)}
.schrittBild{flex:0 0 88px;display:block;border-radius:14px;background:var(--kb-hg);overflow:hidden}
.schrittBild .kochSvg{display:block;width:88px;height:auto}
.schrittBild .kbHg{display:none}
.schrittBild .kochSvg *{animation:none!important}
.schrittText{flex:1;min-width:0}
#kochModal{z-index:120}
.kochBox{max-width:540px;width:100%;min-height:min(640px,92vh);display:flex;flex-direction:column;gap:10px;text-align:left}
.kochKopf{margin:0 48px 0 0;font-weight:600;color:var(--muted);font-size:15px}
.kochFort{height:4px;border-radius:2px;background:var(--fill-soft);overflow:hidden}
.kochFort span{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
.kochNr{margin:0;font-size:15px;color:var(--accent);font-weight:600}
/* Kochszenen: farbig gezeichnet, Zutaten des Schritts in der Szene */
.kochBild{display:grid;place-items:center;padding:4px 0}
.kochSvg{width:min(300px,76vw);height:auto;overflow:visible}
.kochSvg,.schrittBild{--kb-hg:#FFF1DF}
:root:not([data-theme="light"]) :is(.kochSvg,.schrittBild){--kb-hg:rgba(255,255,255,.07)}
.kochSvg .kbHg{fill:var(--kb-hg)}
.kochSvg .kbSchatten{fill:rgba(60,40,10,.1)}
.kochSvg .kbFenster{fill:rgba(255,149,0,.25)}
.kochSvg .kbDampf{opacity:.75}
.kochSvg g{transform-box:fill-box}
.k-braten .kbHitze,.k-kochen .kbHitze{animation:kbFlimmer 1.1s ease-in-out infinite}
.k-schneiden .kbMesser{transform-origin:100% 100%;animation:kbHack .7s ease-in-out infinite}
.k-schneiden .kbStueck{animation:kbRuck .7s steps(1) infinite}
.k-waschen .kbTropfen{animation:kbFall 1s linear infinite}
.k-braten .kbSpringen{animation:kbHops .8s ease-in-out infinite}
.k-braten .kbDampf,.k-kochen .kbDampf{animation:kbSteig 1.6s ease-in-out infinite}
.k-kochen .kbBlasen{animation:kbBlub 1.2s ease-in infinite}
.k-ofen .kbHitze{animation:kbFlimmer 1.4s ease-in-out infinite}.k-ofen .kbFenster{animation:kbGluehen 2s ease-in-out infinite}
.k-mixen .kbWirbel{transform-origin:50% 50%;animation:kbDreh .6s linear infinite}
.k-ruehren .kbLoeffel{transform-origin:10% 90%;animation:kbRuehr 1.2s ease-in-out infinite}
.k-ruhen .kbZeiger{transform-origin:0% 50%;animation:kbDreh 4s linear infinite}
.k-anrichten .kbFallen{animation:kbLegen 1.4s ease-in infinite}.k-anrichten .kbFunkeln{animation:kbFlimmer 1.4s ease-in-out infinite}
@keyframes kbHack{0%,100%{transform:translateY(-10px) rotate(-6deg)}50%{transform:translateY(8px) rotate(0)}}
@keyframes kbRuck{0%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes kbFall{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(34px);opacity:0}}
@keyframes kbHops{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px) rotate(8deg)}}
@keyframes kbSteig{0%{transform:translateY(4px);opacity:0}50%{opacity:.8}100%{transform:translateY(-8px);opacity:0}}
@keyframes kbBlub{0%{transform:translateY(6px);opacity:.2}100%{transform:translateY(-20px);opacity:0}}
@keyframes kbFlimmer{0%,100%{opacity:.3;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-3px)}}
@keyframes kbGluehen{0%,100%{fill:rgba(255,149,0,.15)}50%{fill:rgba(255,149,0,.45)}}
@keyframes kbDreh{to{transform:rotate(360deg)}}
@keyframes kbRuehr{0%,100%{transform:translateX(-10px) rotate(-8deg)}50%{transform:translateX(10px) rotate(8deg)}}
@keyframes kbLegen{0%{transform:translateY(-22px);opacity:0}40%{opacity:1}80%,100%{transform:translateY(16px);opacity:1}}
.kochText{font-size:clamp(20px,5vw,24px);line-height:1.4;margin:0;font-weight:600;letter-spacing:-.02em}
.kochZut{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kochZut li{background:var(--input-bg);border-radius:999px;padding:6px 12px;font-size:15px}
.kochZut.alle{display:block}.kochZut.alle li{border-radius:10px;margin-bottom:6px;font-size:17px;padding:10px 12px}
.kochZut.alle label{display:flex;gap:10px;align-items:center}.kochZut.alle input{width:22px;height:22px;accent-color:var(--accent)}
.kochTimer{align-self:flex-start;font-variant-numeric:tabular-nums;background:var(--input-bg);color:inherit;border:0}
.kochTimer.an{background:var(--fill);color:#fff;animation:kbPuls 1s ease-in-out infinite}
@keyframes kbPuls{50%{opacity:.8}}
.kochNav{margin-top:auto;display:grid;grid-template-columns:64px 1fr;gap:10px;padding-bottom:env(safe-area-inset-bottom)}
.kochNav .btn{min-height:50px;font-size:17px}
.kochNav [data-koch="vor"],.kochNav [data-koch="fertig"]{background:var(--fill);color:#fff;border:0}

/* ───────────── 9 · Druck: nur der Plan ───────────── */
@media print{
  .topbar,.bottomNav,.fab,.chatPanel,.btnRow,.planTools,.dayTabs,.disclaimer,.toasts,.mealAkt,.dHinweis,.sichernKarte,
  #checkinBanner,#rueckblickHome,.exInfo,.exSwap,.schnell,#btnShopTop,
  #view-onboard,#view-home,#view-training,#view-scan,#view-tracker,.bcModal{display:none!important}
  body{background:#fff!important;color:#111;padding:0}
  .wrap{max-width:none;padding:0}
  main section,section.view{animation:none}
  .card,.stat{background:#fff;box-shadow:none;border:1px solid #BBB;break-inside:avoid;color:#111}
  .card h2,.meal .itemHead,.stat .v,.meal .time,.zut li{color:#111}
  .pill{color:#333;background:#fff}
  .prepBox summary{display:none}
  .prepInner{border:none;background:#fff;padding:8px 0 0}
  .prep,.meal .desc,.card .sub{color:#333}
  .meal{break-inside:avoid;flex-direction:row!important;background:#fff!important;box-shadow:none!important;border-bottom:1px solid #DDD;border-radius:0}
  .meal .macro .pill{color:#111!important}
  #view-nutrition>.hero{padding-top:0!important}
  #view-nutrition .viewTitle{font-size:26px!important}
  #view-nutrition>.lane{display:block!important;order:1;background:#fff!important;box-shadow:none!important;border:1px solid #BBB;color:#111}
  #view-nutrition>.lane *{color:#111!important}
  #view-nutrition>.lane .lsDot{background:#fff!important;box-shadow:inset 0 0 0 2px #111!important}
  #view-nutrition>.card{order:2;break-inside:auto}
  #view-nutrition>.stats{order:3}
  /* Rezepte klappen erst beim Drucken auf – ohne Einblend-Animation */
  .prepInner,.prepInner *{animation:none!important;opacity:1!important;transform:none!important}
  .zut li,.prep{color:#111!important}
  .dayHead::before{content:attr(data-tag);font-weight:700;font-size:15px;color:#111;flex:1 1 100%;margin-bottom:6px}
  #view-nutrition>.hero::before{content:"TAKT3 · Youtransform";display:block;font-size:12px;font-weight:600;color:#555;margin-bottom:4px}
}

/* ───────────── 10 · Barrierefreiheit ───────────── */
/* «Kontrast erhöhen»: Apples kontrastreiche Varianten der Systemfarben, kräftigere Trenner */
@media (prefers-contrast: more) {
  :root{
    --line:rgba(84,84,88,.9); --line-strong:#8E8E93;
    --muted:rgba(235,235,245,.78); --muted-2:rgba(235,235,245,.66);
    --accent:#FFB340; --mint:#30DB5B; --blue:#409CFF; --danger:#FF6961;
  }
  :root[data-theme="light"]{
    --line:rgba(60,60,67,.45); --line-strong:#8E8E93; --muted:rgba(60,60,67,.82); --muted-2:rgba(60,60,67,.7);
    --accent:#C93400; --mint:#248A3D; --blue:#0040DD; --danger:#D70015; --gold:#A05A00;
  }
  .btn,.dzBtn,.chip,.dayBtn,.mealBtn,.exDone,.laneStop{border-width:2px}
  .card,.tile,.stat,.meal,.questCard,.taktlinie{box-shadow:inset 0 0 0 1px var(--line-strong)}
  .lsLabel,.nmMeta,.statRest,.desc,.sub{color:var(--muted)}
  a,.linkBtn{text-decoration:underline;text-decoration-thickness:2px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hervorgehoben{outline:3px solid var(--accent);outline-offset:3px}
}
/* Hervorhebung nach dem Sprung – führt das Auge ans Ziel */
.hervorgehoben{animation:zielPuls 2s ease}
@keyframes zielPuls{0%,100%{box-shadow:0 0 0 0 transparent}30%{box-shadow:0 0 0 4px var(--accent)}}

/* ───────────── 11 · Taktkreis (Willkommensbildschirm) ───────────── */
.taktkreis{display:block;overflow:visible}
.tk-ring{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.tk-innen{fill:none;stroke:var(--line);stroke-width:1}
.tk-punkte{fill:none;stroke:var(--accent);stroke-opacity:.4;stroke-width:2.5;stroke-dasharray:1 12;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;animation:tkDreh 90s linear infinite reverse}
.tk-strich{stroke:var(--muted-2);stroke-width:1.5;stroke-linecap:round}
.tk-strich.lang{stroke:var(--muted);stroke-width:3}
.taktkreis #tkBogen stop:nth-child(1){stop-color:#FFCC00}
.taktkreis #tkBogen stop:nth-child(2){stop-color:#FF9500}
.taktkreis #tkBogen stop:nth-child(3){stop-color:#FF6A00}
.tk-bogen{fill:none;stroke:url(#tkBogen);stroke-width:9;stroke-linecap:round;stroke-dasharray:412;stroke-dashoffset:0;animation:tkZeichnen 2s var(--ease) .3s both}
@keyframes tkZeichnen{from{stroke-dashoffset:412}}
.tk-schlag.fertig{fill:var(--accent)}
.tk-schlag.jetzt{fill:var(--accent);stroke:var(--card);stroke-width:3}
.tk-schlag.offen{fill:var(--bg);stroke:var(--muted-2);stroke-width:2.5}
.tk-welle{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:tkWelle 2.4s ease-out infinite}
@keyframes tkWelle{from{transform:scale(1);opacity:.9}to{transform:scale(3);opacity:0}}
.tk-zeit{font-family:var(--rounded);font-weight:600;font-size:22px;text-anchor:middle;dominant-baseline:middle;fill:var(--muted)}
.tk-zeit.jetzt{fill:var(--accent)}
.tk-kegel{transform-box:view-box;transform-origin:50% 50%;animation:tkDreh 16s linear infinite}
.tk-kegel path{opacity:.7}
@keyframes tkDreh{to{transform:rotate(360deg)}}
#view-auth .hero>.taktkreis{position:absolute;z-index:-1;pointer-events:none}
#view-auth .hero>.taktkreis .tk-zeit{display:none}
.wrap:has(#view-auth:not(.hidden)){overflow-x:clip}
@media(max-width:899px){#view-auth .hero>.taktkreis{width:320px;right:-170px;top:6px;opacity:.38}}
@media(min-width:900px){#view-auth .hero>.taktkreis{width:440px;top:-30px;right:-70px;opacity:.55}}

/* ───────────── 12 · Companion ───────────── */
/* Die Companion-Bubble: eine Glaskugel in der eigenen Farbe des Companions (--cmp) */
.cmpBubble{position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(120% 90% at 30% 14%,rgba(255,255,255,.58),rgba(255,255,255,0) 48%),
    radial-gradient(100% 100% at 50% 100%,color-mix(in srgb,var(--cmp,#FF9500) 72%,#000),var(--cmp,#FF9500) 72%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.18),0 8px 20px -8px color-mix(in srgb,var(--cmp,#FF9500) 70%,transparent)}
.cmpBubble b{font-family:var(--rounded);font-weight:700;font-size:20px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.cmpBubble.gross{width:64px;height:64px}
.cmpBubble.gross b{font-size:26px}
@media (prefers-reduced-motion:no-preference){.cmpKarte:not(.einladung) .cmpBubble{animation:cmpAtem 4.8s ease-in-out infinite}}
@keyframes cmpAtem{50%{transform:scale(1.05)}}

/* Karte auf der Startseite */
.tile.cmpKarte{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 12px 12px 14px}
.cmpZeile{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left}
.cmpOeffnen{cursor:pointer;min-height:56px;border-radius:var(--r-md)}
.cmpOeffnen:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cmpText{display:flex;flex-direction:column;gap:1px;min-width:0}
.cmpText small{font-size:13px;color:var(--muted)}
.cmpText b{font-size:17px;font-weight:600;letter-spacing:-.022em;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmpText span{font-size:13px;color:var(--muted);line-height:1.35}
.cmpGlas{flex:0 0 auto;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--shine),var(--glass);box-shadow:var(--glass-edge);
  color:var(--aqua);font-family:var(--rounded);font-weight:700;font-size:15px;transition:transform .2s var(--ease)}
.cmpGlas:active{transform:scale(.94)}
.tile.cmpKarte.einladung{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
.cmpAkt{display:flex;align-items:center;gap:8px}
.cmpAkt .btn{flex:1;min-height:44px}
.cmpAkt .linkBtn{width:auto;margin:0;padding:0 12px;font-size:15px}

/* Einrichten im Sheet */
.cmpBox{max-height:90vh;overflow-y:auto}
.cmpKopfGross{display:flex;align-items:center;gap:14px;margin:4px 48px 6px 0}
.bcBox .cmpKopfGross h3{margin:0 0 2px}
.bcBox .cmpKopfGross .sub{margin:0;font-size:15px;line-height:1.35}
.cmpFeld{margin-top:14px}
.cmpLabel{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 4px}
.dayTabs.cmpSeg{margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:visible}
.dayTabs.cmpSeg button{min-width:0;padding:0 4px;font-variant-numeric:tabular-nums}
.cmpBox [hidden]{display:none!important}
.cmpSeg button:disabled{opacity:.45;cursor:default}
.bcBox .grid2.cmpRuhe{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:4px}
.cmpFest{margin:6px 4px 0}
.cmpVorgabe{margin:10px 4px 0}
.cmpVorschauBox{margin-top:16px;padding:12px;border-radius:var(--r-lg);background:var(--group)}
.cmpVorschau{display:flex;flex-direction:column;gap:6px}
.bcBox .cmpMsg{margin:0;max-width:92%;padding:8px 13px;border-radius:18px 18px 18px 5px;background:var(--card);color:var(--text);font-size:15px;line-height:1.35;box-shadow:var(--glass-edge)}
.bcBox #cmpWo{margin:12px 4px 0;font-size:13px}
.cmpMenue .btn{margin-top:4px}

/* Einwilligung für Gesundheitsangaben beim Anlegen eines Kontos */
.authEinwilligung{display:flex;gap:10px;align-items:flex-start;margin:14px 4px 0;font-size:13px;line-height:1.4;color:var(--muted);cursor:pointer}
.authEinwilligung[hidden]{display:none}
.authEinwilligung input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent)}