/* ---- 00-schrift.css */
/* Schrift Inter (SIL Open Font License 1.1, rsms.me/inter), selbst ausgeliefert: kein Google Fonts, keine fremde Adresse.
   Variable Schrift 400–700. Auf Apple-Geräten gewinnt die Systemschrift (siehe --font in 01-apple.css), Inter ist für alle anderen. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("schrift/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("schrift/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 01-apple.css */
/* Replate – Variante „Apple“
   Aufbau wie eine Apple-App unter iOS 26: große Titel, die beim Scrollen in die Kopfzeile wandern,
   schwebende Glas-Tableiste mit eigenem Scan-Kreis, gruppierte Listen, Blätter (Sheets), die die Seite
   dahinter zurückschieben. Farben = iOS-Systemfarben, Bereiche haben eigene Farbe wie in Apple Health. */
:root {
  --bg: #F2F2F7;            /* gruppierter Grund */
  --cell: #FFFFFF;          /* Zellen, Karten */
  --cell-hi: #FFFFFF;       /* Blatt-Grund */
  --fill: rgba(118,118,128,.12);   /* Felder, Segment-Grund */
  --fill-2: rgba(118,118,128,.20);
  --sep: rgba(60,60,67,.18);
  --label: #000000;
  --label-2: rgba(60,60,67,.62);
  --label-3: rgba(60,60,67,.32);
  --tint: #007AFF;
  --tint-text: #0062CC;
  --tint-soft: rgba(0,122,255,.12);
  --on-tint: #FFFFFF;
  --green: #34C759;   --green-text: #248A3D;
  --orange: #FF9500;  --orange-text: #C93400;
  --red: #FF3B30;     --red-text: #D70015;
  --purple: #AF52DE;
  --teal: #30B0C7;
  --indigo: #5856D6;
  --pink: #FF2D55;
  --sand: #C9A87A;    --sand-text: #8A6A3E;
  --grey: #8E8E93;
  --ring-kcal-a: #0A6CFF; --ring-kcal-b: #4FB3FF;
  --ring-ew-a: #20B654;   --ring-ew-b: #8CE65A;
  --glass: rgba(250,250,252,.72);
  --glass-edge: rgba(255,255,255,.9);
  --glass-line: rgba(0,0,0,.06);
  --shadow-float: 0 8px 30px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  --backdrop: rgba(0,0,0,.28);
  --device: #1d1d1f;
  --page: #E7E7EC;
  --camera: #0B0B0C;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --cell: #1C1C1E; --cell-hi: #1C1C1E; --fill: rgba(118,118,128,.24); --fill-2: rgba(118,118,128,.34);
    --sep: rgba(84,84,88,.6); --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3);
    --tint: #0A84FF; --tint-text: #409CFF; --tint-soft: rgba(10,132,255,.2); --on-tint: #FFFFFF;
    --green: #30D158; --green-text: #30D158; --orange: #FF9F0A; --orange-text: #FF9F0A; --red: #FF453A; --red-text: #FF6961;
    --purple: #BF5AF2; --teal: #40C8E0; --indigo: #5E5CE6; --pink: #FF375F; --sand: #D9B98A; --sand-text: #D9B98A; --grey: #8E8E93;
    --ring-kcal-a: #1A7CFF; --ring-kcal-b: #64C8FF; --ring-ew-a: #2BD35E; --ring-ew-b: #A6F25E;
    --glass: rgba(30,30,32,.68); --glass-edge: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.08);
    --shadow-float: 0 8px 30px rgba(0,0,0,.5); --backdrop: rgba(0,0,0,.5); --device: #2c2c2e; --page: #101012; --camera: #000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --cell: #1C1C1E; --cell-hi: #1C1C1E; --fill: rgba(118,118,128,.24); --fill-2: rgba(118,118,128,.34);
  --sep: rgba(84,84,88,.6); --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.3);
  --tint: #0A84FF; --tint-text: #409CFF; --tint-soft: rgba(10,132,255,.2); --on-tint: #FFFFFF;
  --green: #30D158; --green-text: #30D158; --orange: #FF9F0A; --orange-text: #FF9F0A; --red: #FF453A; --red-text: #FF6961;
  --purple: #BF5AF2; --teal: #40C8E0; --indigo: #5E5CE6; --pink: #FF375F; --sand: #D9B98A; --sand-text: #D9B98A; --grey: #8E8E93;
  --ring-kcal-a: #1A7CFF; --ring-kcal-b: #64C8FF; --ring-ew-a: #2BD35E; --ring-ew-b: #A6F25E;
  --glass: rgba(30,30,32,.68); --glass-edge: rgba(255,255,255,.14); --glass-line: rgba(255,255,255,.08);
  --shadow-float: 0 8px 30px rgba(0,0,0,.5); --backdrop: rgba(0,0,0,.5); --device: #2c2c2e; --page: #101012; --camera: #000;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Wie eine echte App: kein Markieren/Kopieren, kein Doppeltipp-Zoom (Eingabefelder ausgenommen) */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
html, body, #wurzel { height: 100%; }
body {
  margin: 0; background: var(--page); color: var(--label);
  font-family: var(--font); font-size: 17px; line-height: 1.29; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 1em; height: 1em; display: block; flex: none; }

/* ---------- Vorschau-Rahmen ---------- */
.vorschau { min-height: 100%; display: flex; gap: 48px; align-items: center; justify-content: center;
  padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.info { width: 300px; display: flex; flex-direction: column; gap: 20px; }
.info h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; margin: 0; font-weight: 700; text-wrap: balance; }
.info p { margin: 0; color: var(--label-2); font-size: 15px; line-height: 1.45; }
.info .marke { font-size: 13px; font-weight: 600; color: var(--label-2); letter-spacing: .02em; }
.info .sprung { display: flex; flex-direction: column; background: var(--cell); border-radius: 14px; overflow: hidden; }
.info .sprung button { text-align: left; padding: 11px 16px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.info .sprung button + button { box-shadow: inset 0 0.5px 0 var(--sep); }
.info .sprung button span { color: var(--label-2); font-size: 13px; }
.geraet { width: 393px; height: 852px; border-radius: 62px; padding: 12px; background: var(--device); flex: none;
  box-shadow: 0 0 0 1.5px #4a4a4e inset, 0 40px 80px rgba(0,0,0,.22); position: relative; }
.geraet .app { border-radius: 50px; --top: 54px; --bottom: 26px; }
.insel { position: absolute; top: 23px; left: 50%; width: 122px; height: 36px; margin-left: -61px; background: #000; border-radius: 20px; z-index: 90; pointer-events: none; }
.statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 80; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 46px; font-size: 16px; font-weight: 600; pointer-events: none; color: var(--label); transition: color .3s; }
.statusbar.hell { color: #fff; }
.statusbar .rechts { display: flex; gap: 6px; align-items: center; }
.home-ind { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--label); z-index: 95; pointer-events: none; opacity: .85; }
@media (max-width: 760px) {
  .vorschau { padding: 0; display: block; height: 100%; }
  .info, .insel, .statusbar, .home-ind { display: none; }
  .geraet { width: 100%; height: 100%; border-radius: 0; padding: 0; box-shadow: none; background: var(--bg); }
  .geraet .app { border-radius: 0; --top: max(env(safe-area-inset-top, 0px), 12px); --bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---------- App-Gerüst ---------- */
.app { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; isolation: isolate; }
.buehne { position: absolute; inset: 0; background: var(--bg); overflow: hidden; transform-origin: 50% 100%;
  transition: transform .5s var(--ease-sheet), border-radius .5s var(--ease-sheet), filter .5s; }
.app.blatt-gross .buehne { transform: translateY(calc(var(--top) * .2 + 6px)) scale(.92); border-radius: 22px; filter: brightness(.86); }
.stapel { position: absolute; inset: 0; }
.seite { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); overscroll-behavior: contain;
  padding-top: calc(var(--top) + 52px); padding-bottom: calc(var(--bottom) + 120px); scrollbar-width: none; }
.seite::-webkit-scrollbar { display: none; }
.ebene { position: absolute; inset: 0; background: var(--bg); transition: transform .45s var(--ease-sheet), filter .45s; }
.ebene.rein { animation: rein .45s var(--ease-sheet); }
.ebene.unten { transform: translateX(-28%); filter: brightness(.9); pointer-events: none; }
.ebene.weg { display: none; }
@keyframes rein { from { transform: translateX(100%); box-shadow: -20px 0 40px rgba(0,0,0,.1); } to { transform: none; } }
.inhalt { display: flex; flex-direction: column; gap: 22px; padding: 0 16px; }

/* Kopfzeile: unsichtbar oben, Glas ab dem Scrollen */
.kopf { position: absolute; left: 0; right: 0; top: 0; z-index: 20; height: calc(var(--top) + 52px); padding: var(--top) 16px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; pointer-events: none; }
.kopf::before { content: ""; position: absolute; inset: 0; background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 -0.5px 0 var(--sep); opacity: 0; transition: opacity .2s; }
.kopf.glas::before { opacity: 1; }
.kopf > * { position: relative; pointer-events: auto; }
.kopf .mitte { font-size: 17px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.kopf.glas .mitte, .kopf.immer .mitte { opacity: 1; transform: none; }
.kopf .links { justify-self: start; display: flex; gap: 8px; }
.kopf .rechts { justify-self: end; display: flex; gap: 8px; }
.kopf .mitte small { display: block; font-size: 12px; font-weight: 500; color: var(--label-2); }

/* Glas-Knöpfe (iOS 26) */
.gk { height: 44px; min-width: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 0.5px 0 var(--glass-edge), 0 0 0 0.5px var(--glass-line), 0 2px 10px rgba(0,0,0,.06);
  font-size: 20px; color: var(--label); transition: transform .16s var(--ease); }
.gk.text { padding: 0 16px; font-size: 17px; font-weight: 500; }
.gk.blau { background: var(--tint); color: var(--on-tint); font-weight: 600; box-shadow: inset 0 0.5px 0 rgba(255,255,255,.35), 0 2px 10px rgba(0,0,0,.08); }
.gk:active, .druck:active { transform: scale(.94); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: #fff;
  background: linear-gradient(160deg, #A2A8B4, #6E7380); flex: none; }
.avatar.gross { width: 84px; height: 84px; font-size: 34px; }
.titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 0 2px; margin-top: -4px; }
.grosstitel { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.untertitel { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--label-2); margin-bottom: -2px; }

/* Tableiste: schwebende Kapsel + eigener Scan-Kreis */
.tabs { position: absolute; z-index: 30; left: 16px; right: 16px; bottom: calc(var(--bottom) + 2px); display: flex; gap: 10px; align-items: flex-end;
  transition: transform .4s var(--ease-sheet), opacity .3s; }
.tabs.weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
.tabkapsel { flex: 1; height: 62px; border-radius: 31px; display: flex; padding: 4px; position: relative;
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0.5px 0 var(--glass-edge), 0 0 0 0.5px var(--glass-line), var(--shadow-float); }
.tabkapsel .linse { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 27px; background: var(--fill); transition: transform .45s var(--ease-sheet); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; z-index: 1;
  font-size: 10px; font-weight: 600; color: var(--label); border-radius: 27px; letter-spacing: 0; }
.tab .i { font-size: 24px; }
.tab.an { color: var(--tint); }
.scankreis { width: 62px; height: 62px; border-radius: 31px; display: grid; place-items: center; font-size: 26px; color: var(--tint);
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0.5px 0 var(--glass-edge), 0 0 0 0.5px var(--glass-line), var(--shadow-float); transition: transform .16s var(--ease); }
.scankreis:active { transform: scale(.92); }

/* Laufendes Training: Zubehör-Leiste über den Tabs (wie Mini-Player in Musik) */
.zubehoer { position: absolute; z-index: 29; left: 24px; right: 24px; bottom: calc(var(--bottom) + 74px); height: 52px; border-radius: 26px;
  display: flex; align-items: center; gap: 12px; padding: 0 8px 0 10px;
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 0.5px 0 var(--glass-edge), 0 0 0 0.5px var(--glass-line), var(--shadow-float);
  animation: hoch .5s var(--ease-sheet); }
@keyframes hoch { from { transform: translateY(30px); opacity: 0; } }
.zubehoer .punkt { width: 34px; height: 34px; border-radius: 10px; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 19px; }
.zubehoer .txt { flex: 1; min-width: 0; text-align: left; }
.zubehoer b { display: block; font-size: 15px; font-weight: 600; }
.zubehoer small { display: block; font-size: 12px; color: var(--label-2); }
.zubehoer .zeit { font-size: 15px; font-weight: 600; color: var(--orange-text); font-variant-numeric: tabular-nums; }

/* ---------- Gruppierte Listen ---------- */
.gruppe { display: flex; flex-direction: column; gap: 7px; }
.gruppe > header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.gruppe > header h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.gruppe > header .klein { font-size: 13px; text-transform: uppercase; color: var(--label-2); font-weight: 500; letter-spacing: .01em; padding-left: 12px; }
.gruppe > header a, .gruppe > header button.link { color: var(--tint-text); font-size: 17px; }
.gruppe > footer { font-size: 13px; color: var(--label-2); padding: 0 16px; line-height: 1.35; }
.liste { background: var(--cell); border-radius: 26px; overflow: hidden; }
.zeile { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; width: 100%; text-align: left; position: relative; background: var(--cell); }
.zeile + .zeile::before, .liste > * + .zeile::before { content: ""; position: absolute; top: 0; right: 0; left: var(--einzug, 16px); height: .5px; background: var(--sep); }
.zeile.mit-icon { --einzug: 60px; }
.zeile.hoch { min-height: 64px; }
button.zeile:active, a.zeile:active { background: var(--fill); }
.zeile .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zeile .txt b { font-weight: 400; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .txt b.fett { font-weight: 600; }
.zeile .txt small { font-size: 15px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .wert { color: var(--label-2); font-size: 17px; white-space: nowrap; }
.zeile .wert.blau { color: var(--tint-text); }
.zeile .pfeil { color: var(--label-3); font-size: 14px; margin-left: -4px; }
.zeile.aktion { color: var(--tint-text); }
.zeile.aktion.rot { color: var(--red-text); }
.kachel { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: none; }
.kachel.k-blau { background: var(--tint); } .kachel.k-gruen { background: var(--green); } .kachel.k-orange { background: var(--orange); }
.kachel.k-rot { background: var(--red); } .kachel.k-lila { background: var(--purple); } .kachel.k-teal { background: var(--teal); }
.kachel.k-indigo { background: var(--indigo); } .kachel.k-grau { background: var(--grey); } .kachel.k-pink { background: var(--pink); }
.schalter { width: 51px; height: 31px; border-radius: 16px; background: var(--fill-2); position: relative; flex: none; transition: background .25s; }
.schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .3s var(--ease); }
.schalter[aria-checked="true"] { background: var(--green); }
.schalter[aria-checked="true"]::after { transform: translateX(20px); }

/* Segment-Steuerung */
.segment { display: flex; padding: 2px; border-radius: 100px; background: var(--fill); position: relative; height: 36px; }
.segment button { flex: 1; font-size: 14px; font-weight: 500; border-radius: 100px; position: relative; z-index: 1; transition: color .2s; }
.segment button[aria-pressed="true"] { font-weight: 600; }
.segment .gleiter { position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 100px; background: var(--cell); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  transition: transform .35s var(--ease); }
:root[data-theme="dark"] .segment .gleiter { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segment .gleiter { background: #636366; } }

/* Karten (nur für Hauptsachen) */
.karte { background: var(--cell); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.karte.knopf { text-align: left; width: 100%; transition: transform .16s var(--ease); }
.karte.knopf:active { transform: scale(.98); }
.kartenkopf { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.kartenkopf .i { font-size: 17px; }
.kartenkopf .zeitpunkt { margin-left: auto; color: var(--label-2); font-weight: 400; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.kartenkopf .zeitpunkt .i { font-size: 12px; color: var(--label-3); }
.c-blau { color: var(--tint-text); } .c-gruen { color: var(--green-text); } .c-orange { color: var(--orange-text); } .c-lila { color: var(--purple); }
.c-teal { color: var(--teal); } .c-rot { color: var(--red-text); } .c-leise { color: var(--label-2); } .c-sand { color: var(--sand-text); }
.gross-wert { font-family: var(--font-rounded); font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.gross-wert small { font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--label-2); letter-spacing: 0; margin-left: 3px; }
.mittel-wert { font-family: var(--font-rounded); font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.mittel-wert small { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--label-2); margin-left: 2px; letter-spacing: 0; }

/* Haupt-Knöpfe */
.hk { height: 52px; border-radius: 26px; background: var(--tint); color: var(--on-tint); font-size: 17px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  transition: transform .16s var(--ease); }
.hk:active { transform: scale(.97); }
.hk.grau { background: var(--fill); color: var(--tint-text); }
.hk.orange { background: var(--orange); color: #fff; }
.hk.klein { height: 36px; width: auto; padding: 0 16px; font-size: 15px; border-radius: 18px; }
.pille { height: 32px; padding: 0 14px; border-radius: 16px; background: var(--fill); color: var(--tint-text); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex: none; }
.pille.voll { background: var(--tint); color: var(--on-tint); }

/* ---------- Übersicht ---------- */
.ringkarte { display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center; }
.ringe { width: 148px; height: 148px; position: relative; }
.ringe svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ringe .bogen { transition: stroke-dashoffset 1.1s var(--ease); }
.ringwerte { display: flex; flex-direction: column; gap: 12px; }
.ringwert .etikett { font-size: 15px; font-weight: 600; }
.ringwert .zahl { font-family: var(--font-rounded); font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.ringwert .zahl small { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0; }
.makros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 14px; box-shadow: inset 0 .5px 0 var(--sep); }
.makro small { display: block; font-size: 13px; color: var(--label-2); }
.makro b { font-size: 17px; font-weight: 600; }
.makro b span { font-weight: 400; color: var(--label-2); font-size: 13px; }
.balken { height: 4px; border-radius: 2px; background: var(--fill); margin-top: 6px; overflow: hidden; }
.balken i { display: block; height: 100%; border-radius: 2px; background: currentColor; transform-origin: left; transition: transform 1s var(--ease); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.coach { background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 14%, var(--cell)), var(--cell) 70%); }
.coach .knoepfe { display: flex; gap: 8px; }
.coach p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--label); }
.wasserglaeser { display: flex; gap: 5px; }
.wasserglaeser i { width: 14px; height: 20px; border-radius: 3px 3px 5px 5px; background: var(--fill-2); display: block; transition: background .3s; }
.wasserglaeser i.voll { background: var(--teal); }
/* Übersicht, Wasser: die Gläser stehen als Leiste in einer eigenen Zeile unter dem Text (neben dem Text blieb auf dem Handy kein Platz für „Wasser“) */
.zeile.wasser { flex-wrap: wrap; row-gap: 10px; padding-bottom: 14px; }
.zeile.wasser .wasserglaeser { order: 9; flex: 1 0 100%; gap: 6px; padding-left: 42px; }
.zeile.wasser .wasserglaeser i { flex: 1; width: auto; height: 8px; border-radius: 4px; }

/* ---------- Essen ---------- */
.woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tagknopf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 14px; font-size: 12px; color: var(--label-2); font-weight: 500; }
.tagknopf .nr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 500; color: var(--label); position: relative; }
.tagknopf .nr svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tagknopf.an .nr { background: var(--tint); color: var(--on-tint); font-weight: 600; }
.tagknopf.heute:not(.an) .nr { color: var(--tint-text); font-weight: 600; }
.tagesleiste { display: flex; flex-direction: column; gap: 8px; }
.tagesleiste .oben { display: flex; justify-content: space-between; align-items: baseline; }
.dickbalken { height: 10px; border-radius: 5px; background: var(--fill); display: flex; overflow: hidden; gap: 2px; }
.dickbalken i { display: block; height: 100%; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--label-2); }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.legende span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.mahlzeit-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.mahlzeit-kopf h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.mahlzeit-kopf span { font-size: 15px; color: var(--label-2); }
.eintrag .kcal { font-size: 17px; color: var(--label); }
.eintrag .kcal small { color: var(--label-2); font-size: 13px; margin-left: 2px; }
.topfkarte { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; }
.topfbild { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; color: #fff;
  background: linear-gradient(145deg, #FFB443, #FF7A2F); }
.portionen { display: flex; gap: 4px; margin-top: 6px; }
.portionen i { width: 12px; height: 12px; border-radius: 50%; background: var(--fill-2); }
.portionen i.voll { background: var(--orange); }

/* ---------- Training ---------- */
.heutekarte { padding: 20px 18px 18px; gap: 16px; position: relative; overflow: hidden; }
.heutekarte .eyebrow { font-size: 13px; font-weight: 600; color: var(--orange-text); text-transform: uppercase; letter-spacing: .04em; }
.heutekarte h2 { margin: 2px 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.zyklus { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.zyklus::before { content: ""; position: absolute; top: 15px; left: 8%; right: 8%; height: 2px; background: var(--fill-2); border-radius: 1px; }
.zyklus button { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; font-size: 11px; color: var(--label-2); font-weight: 500; }
.zyklus .knoten { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cell); box-shadow: 0 0 0 2px var(--fill-2) inset;
  font-size: 14px; font-weight: 600; color: var(--label-2); transition: all .3s var(--ease); }
.zyklus .fertig .knoten { background: var(--fill-2); box-shadow: none; color: var(--label-2); }
.zyklus .heute .knoten { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); color: #fff; }
.zyklus .heute { color: var(--label); font-weight: 600; }
.zyklus .gewaehlt .knoten { box-shadow: 0 0 0 2px var(--orange) inset; color: var(--orange-text); }
.jahr { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 2.5px; }
.jahr i { aspect-ratio: 1; border-radius: 2px; background: var(--fill); display: block; }
.jahr i.soll { background: color-mix(in srgb, var(--orange) 28%, var(--fill)); }
.jahr i.da { background: var(--orange); }
.jahr i.zukunft { background: transparent; box-shadow: inset 0 0 0 1px var(--fill); }
.monate { display: flex; justify-content: space-between; font-size: 11px; color: var(--label-2); }
.trainingszeile .kachel { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; }
.trainingszeile .datum { color: var(--label-2); font-size: 15px; text-align: right; }

/* Aktives Training */
.workout { position: absolute; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column;
  transition: transform .5s var(--ease-sheet); }
.workout.zu { transform: translateY(105%); pointer-events: none; }
.workout .seite { padding-top: calc(var(--top) + 64px); padding-bottom: calc(var(--bottom) + 110px); }
.workout .kopf { height: calc(var(--top) + 64px); }
.wkopf-mitte { text-align: center; }
.wkopf-mitte b { display: block; font-size: 17px; font-weight: 600; }
.wkopf-mitte span { font-size: 13px; color: var(--orange-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wstats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cell); border-radius: 22px; padding: 12px 0; }
.wstats div { text-align: center; }
.wstats div + div { box-shadow: inset .5px 0 0 var(--sep); }
.wstats small { display: block; font-size: 12px; color: var(--label-2); font-weight: 500; }
.wstats b { font-family: var(--font-rounded); font-size: 22px; font-weight: 700; }
.uebung { background: var(--cell); border-radius: 26px; overflow: hidden; }
.uebung > header { display: flex; align-items: center; gap: 10px; padding: 14px 10px 6px 16px; }
.uebung > header .txt { flex: 1; min-width: 0; }
.uebung > header b { font-size: 17px; font-weight: 600; display: block; }
.uebung > header small { font-size: 13px; color: var(--label-2); }
.uebung .menuknopf { width: 36px; height: 36px; border-radius: 18px; background: var(--fill); display: grid; place-items: center; font-size: 18px; color: var(--tint-text); }
.notiz { margin: 2px 16px 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange-text); font-size: 14px; display: flex; gap: 6px; align-items: center; }
.satzkopf { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px; padding: 2px 16px 4px; font-size: 12px; color: var(--label-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.satzkopf span:nth-child(2), .satzkopf span:nth-child(3) { text-align: center; }
.satzhuelle { position: relative; overflow: hidden; }
.satzhuelle .hinten { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: #fff; }
.satzhuelle .hinten .l { background: var(--tint); height: 100%; display: flex; align-items: center; gap: 6px; padding-left: 20px; flex: 1; }
.satzhuelle .hinten .r { background: var(--red); height: 100%; display: flex; align-items: center; gap: 6px; padding-right: 20px; flex: 1; justify-content: flex-end; }
.satz { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px; align-items: center; padding: 5px 16px; background: var(--cell); position: relative; touch-action: pan-y; }
.satz.zieht { transition: none; }
.satz.zurueck { transition: transform .35s var(--ease); }
.satz .nr { width: 28px; height: 28px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--label-2); }
.satz.erledigt .nr { background: var(--orange); color: #fff; }
.feld { height: 44px; border-radius: 12px; background: var(--fill); display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 0 8px; }
.feld input { flex: 1 1 50%; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; text-align: right; font-family: var(--font-rounded); font-size: 22px; font-weight: 600; padding: 0; height: 44px; }
.feld input::placeholder { color: var(--label-3); }
.feld span { flex: 1 1 50%; font-size: 13px; color: var(--label-2); font-weight: 500; text-align: left; }
.feld:focus-within { box-shadow: inset 0 0 0 2px var(--tint); }
.satz .haken { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--label-3); box-shadow: inset 0 0 0 1.5px var(--fill-2); }
.satz.erledigt .haken { background: var(--orange); color: #fff; box-shadow: none; }
.satzaktion { display: flex; gap: 8px; padding: 6px 16px 14px; }
.satzaktion button { flex: 1; height: 40px; border-radius: 20px; background: var(--fill); color: var(--tint-text); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tipp { display: flex; gap: 12px; align-items: center; background: var(--cell); border-radius: 22px; padding: 12px 14px; font-size: 14px; color: var(--label-2); line-height: 1.35; }
.tipp b { color: var(--label); }
.tipp .gesten { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tipp .gesten span { display: block; }
.workout-fuss { position: absolute; left: 16px; right: 16px; bottom: calc(var(--bottom) + 8px); display: flex; gap: 10px; z-index: 25; }
.workout-fuss .gk { height: 54px; border-radius: 27px; flex: 1; font-size: 17px; font-weight: 600; color: var(--tint-text); }

/* Statistik-Diagramm (Swift-Charts-Art) */
.diagramm { position: relative; }
.diagramm svg { width: 100%; display: block; overflow: visible; touch-action: pan-y; }
.diagramm .achse { font-size: 11px; fill: var(--label-2); font-family: var(--font); }
.diagramm .gitter { stroke: var(--sep); stroke-width: .5; }
.diagramm .gitter.gestrichelt { stroke-dasharray: 2 3; }
.auswahl-blase { position: absolute; top: -6px; transform: translateX(-50%); background: var(--fill); backdrop-filter: blur(10px); padding: 6px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap; text-align: left; }
.auswahl-blase small { display: block; font-size: 11px; color: var(--label-2); font-weight: 600; text-transform: uppercase; }
.auswahl-blase b { font-family: var(--font-rounded); font-size: 20px; }
.diagrammkopf > small { display: block; font-size: 13px; color: var(--label-2); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.diagrammkopf .datum { font-size: 15px; color: var(--label-2); font-weight: 500; margin-top: 2px; }
.uebungwahl { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; color: var(--tint-text); }

/* Körper */
.phasenband { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.phasenband i { display: block; height: 100%; }
.phasen { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
.phasen::-webkit-scrollbar { display: none; }
.phase { flex: 0 0 74%; scroll-snap-align: start; scroll-margin-left: 16px; }
.phase .art { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.phase .art::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--f); }
.phase dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.phase dt { font-size: 13px; color: var(--label-2); }
.phase dd { margin: 0; font-size: 17px; font-weight: 600; }
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 22px; overflow: hidden; }
.foto { aspect-ratio: 3/4; position: relative; display: flex; align-items: flex-end; padding: 8px; color: #fff; font-size: 12px; font-weight: 600; overflow: hidden; max-width: 100%; }
.foto svg.silhouette { position: absolute; inset: 14% 18% 0; width: 64%; height: 86%; opacity: .5; }
.foto span { position: relative; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.foto.neu { background: var(--fill); color: var(--tint-text); justify-content: center; align-items: center; flex-direction: column; gap: 6px; font-size: 13px; }
.foto.neu .i { font-size: 26px; }

/* ---------- Blätter (Sheets), Menüs, Hinweise ---------- */
.dunkel { position: absolute; inset: 0; z-index: 70; background: var(--backdrop); opacity: 0; pointer-events: none; transition: opacity .4s; }
.dunkel.an { opacity: 1; pointer-events: auto; }
.blatt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 75; background: var(--bg); border-radius: 34px 34px 0 0; display: flex; flex-direction: column;
  transform: translateY(105%); transition: transform .5s var(--ease-sheet); box-shadow: 0 -10px 40px rgba(0,0,0,.18); max-height: calc(100% - var(--top) - 10px); }
.blatt.an { transform: none; }
.blatt.gross { height: calc(100% - var(--top) - 10px); }
.blatt.mittel { height: 62%; }
.blatt .griff { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-2); margin: 7px auto 0; flex: none; }
.blatt .bkopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 16px 6px; gap: 8px; flex: none; }
.blatt .bkopf .mitte { font-size: 17px; font-weight: 600; text-align: center; }
.blatt .bkopf .links { justify-self: start; } .blatt .bkopf .rechts { justify-self: end; }
.blatt .binnen { flex: 1; overflow-y: auto; padding: 8px 16px calc(var(--bottom) + 24px); display: flex; flex-direction: column; gap: 22px; scrollbar-width: none; }
.blatt .binnen > * { flex-shrink: 0; }
.blatt .binnen::-webkit-scrollbar { display: none; }
.blatt.kamera { background: var(--camera); color: #fff; height: 100%; max-height: 100%; border-radius: 0; }
.blatt.kamera .gk { background: rgba(60,60,60,.5); color: #fff; box-shadow: inset 0 .5px 0 rgba(255,255,255,.2); }
.sucher { position: relative; flex: 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 40%, #3a3f46 0%, #16181b 60%, #0b0b0c 100%); }
.sucher .packung { width: 210px; height: 270px; border-radius: 22px; background: linear-gradient(160deg, #f4f6f8, #cfd6de); transform: rotate(-6deg); position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.5); filter: blur(.4px) brightness(.85); }
.sucher .packung::before { content: "SKYR"; position: absolute; top: 34px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 40px; color: #2a5bd7; letter-spacing: .04em; }
.sucher .packung::after { content: ""; position: absolute; bottom: 28px; left: 50%; width: 110px; height: 52px; margin-left: -55px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 12px), #fff; }
.rahmen { position: absolute; width: 250px; height: 150px; top: 50%; left: 50%; margin: 30px 0 0 -125px; }
.rahmen i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.rahmen i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.rahmen i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 16px 0 0; }
.rahmen i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 16px; }
.rahmen i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.rahmen.treffer i { border-color: #FFD60A; transition: border-color .2s; }
.rahmen .laser { position: absolute; left: 14px; right: 14px; height: 2px; background: #FFD60A; box-shadow: 0 0 12px #FFD60A; top: 50%; animation: laser 1.6s ease-in-out infinite alternate; }
@keyframes laser { from { transform: translateY(-50px); } to { transform: translateY(50px); } }
.kamerafuss { padding: 18px 16px calc(var(--bottom) + 18px); display: flex; flex-direction: column; gap: 16px; align-items: center; }
.modi { display: flex; gap: 22px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.modi button.an { color: #FFD60A; }
.ausloeser { width: 74px; height: 74px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; }
.ausloeser i { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: block; transition: transform .15s; }
.ausloeser:active i { transform: scale(.9); }
.kamerahinweis { position: absolute; top: calc(var(--top) + 70px); left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.45); backdrop-filter: blur(10px);
  padding: 8px 14px; border-radius: 16px; font-size: 15px; font-weight: 500; white-space: nowrap; }

.produktkopf { display: flex; gap: 14px; align-items: center; }
.produktbild { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(160deg, #f4f6f8, #cfd6de); display: grid; place-items: center; font-weight: 800; color: #2a5bd7; font-size: 14px; flex: none; }
.produktkopf h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.produktkopf small { color: var(--label-2); font-size: 15px; }
.zahlzeile input { width: 90px; text-align: right; border: 0; outline: 0; background: transparent; font-size: 17px; color: var(--tint-text); padding: 0; }
.zahlzeile .einheit { color: var(--label-2); width: 34px; }
.mengenfeld { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 8px 0 2px; }
.mengenfeld input { width: 150px; border: 0; outline: 0; background: transparent; text-align: center; font-family: var(--font-rounded); font-size: 56px; font-weight: 700; letter-spacing: -0.03em; padding: 0; color: var(--label); field-sizing: content; min-width: 70px; }
.mengenfeld span { font-size: 22px; font-weight: 600; color: var(--label-2); }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ergebnis { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; background: var(--cell); border-radius: 22px; padding: 12px 4px; }
.ergebnis small { display: block; font-size: 12px; color: var(--label-2); font-weight: 500; }
.ergebnis b { font-size: 17px; font-weight: 600; }
.ergebnis div:first-child b { color: var(--tint-text); }
.hinweis-blau { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--label-2); padding: 0 16px; line-height: 1.35; }
.hinweis-blau .i { color: var(--tint-text); font-size: 15px; margin-top: 1px; }

.sprechen { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 10px; }
.welle { display: flex; gap: 4px; align-items: center; height: 60px; }
.welle i { width: 5px; border-radius: 3px; background: var(--tint); display: block; animation: welle 1s ease-in-out infinite alternate; }
@keyframes welle { from { height: 8px; } to { height: 54px; } }
.transkript { font-size: 22px; line-height: 1.35; font-weight: 600; text-align: center; letter-spacing: -0.01em; min-height: 60px; padding: 0 10px; text-wrap: balance; }
.transkript span { color: var(--label-3); }
.mikro { width: 74px; height: 74px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 30px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--red) 18%, transparent); }
.mikro.stop i { width: 24px; height: 24px; border-radius: 6px; background: #fff; display: block; }

.menue { position: absolute; z-index: 85; min-width: 250px; border-radius: 22px; overflow: hidden; background: var(--glass); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 0 0 .5px var(--glass-line), 0 18px 50px rgba(0,0,0,.22); transform-origin: top right; animation: menue .3s var(--ease); padding: 6px 0; }
@keyframes menue { from { transform: scale(.85); opacity: 0; } }
.menue button { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 11px 18px; font-size: 17px; text-align: left; }
.menue button + button { box-shadow: inset 0 .5px 0 var(--sep); }
.menue button .i { font-size: 19px; }
.menue button.rot { color: var(--red-text); }
.menue button:active { background: var(--fill); }
.menue .sep { height: 8px; background: var(--fill); }
.menue-dunkel { position: absolute; inset: 0; z-index: 84; }

.hud { position: absolute; z-index: 95; top: calc(var(--top) + 8px); left: 50%; transform: translate(-50%, calc(-100% - var(--top) - 24px)); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .45s var(--ease-sheet), opacity .3s, visibility 0s .45s;
  background: var(--glass); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-radius: 26px; padding: 10px 18px 10px 12px;
  display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-float), 0 0 0 .5px var(--glass-line); font-size: 15px; font-weight: 600; max-width: 330px; }
.hud.an { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform .45s var(--ease-sheet), opacity .2s; }
.hud .kachel { width: 28px; height: 28px; border-radius: 14px; font-size: 15px; }
.hud > span { white-space: nowrap; }
.hud small { display: block; font-weight: 400; color: var(--label-2); font-size: 13px; }

.suche { height: 40px; border-radius: 20px; background: var(--fill); display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--label-2); font-size: 17px; }
.essen-suche { background: var(--cell); }
.suche-leeren { flex: none; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: var(--label-3); color: var(--cell); font-size: 12px; margin-right: -4px; }
.suche-leeren svg { stroke-width: 3; }
.kost-trenner { padding: 14px 16px 6px; background: var(--bg); font-size: 13px; text-transform: uppercase; letter-spacing: .01em; color: var(--label-2); font-weight: 500; }
.kost-trenner + .zeile::before { display: none; }
.suchzeile { display: flex; gap: 10px; align-items: center; padding: 12px 12px 12px 16px; box-shadow: inset 0 -0.5px 0 var(--sep); }
.suchzeile .suche { flex: 1; min-width: 0; }
.suchplus { width: 40px; height: 40px; border-radius: 20px; flex: none; display: grid; place-items: center; background: var(--tint); color: #fff; font-size: 19px; transition: transform .16s var(--ease-out, ease-out); }
.suchplus:active { transform: scale(.94); }
.suchtreffer { border-bottom: .5px solid var(--sep); }
.essen-suche + .zeile::before { display: none; }
.suche input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
.suche input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; color: var(--label); }
.gruppenkacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gruppenkachel { background: var(--cell); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; text-align: left; }
.gruppenkachel b { font-size: 17px; font-weight: 600; }
.gruppenkachel small { color: var(--label-2); font-size: 13px; display: block; }

.profilkopf { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.profilkopf h2 { margin: 0; font-size: 22px; font-weight: 700; }
.profilkopf small { color: var(--label-2); font-size: 15px; }
.pro { background: linear-gradient(135deg, #1b1f3a, #3b2a6b 55%, #7a3c8f); color: #fff; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pro h3 { margin: 0; font-size: 20px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.pro p { margin: 0; font-size: 15px; line-height: 1.4; opacity: .82; }
.pro .hk { background: #fff; color: #1b1f3a; height: 44px; }
.apple-knopf { height: 50px; border-radius: 25px; background: var(--label); color: var(--bg); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 17px; }

.leer { text-align: center; color: var(--label-2); font-size: 15px; padding: 18px; }
.fertigring { display: grid; place-items: center; padding: 10px 0 4px; }
.fertigring .kreis { width: 88px; height: 88px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-size: 44px; animation: plopp .6s var(--ease); }
@keyframes plopp { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } }

/* Bewegung (31.10.2026): dezent wie iOS. Tabs blenden weich, Balken ziehen sich auf, Satz-Nummer ploppt beim Erledigen */
.stapel { animation: tab-ein .22s ease-out; }
@keyframes tab-ein { from { opacity: 0; } }
.balken i { animation: balken-ein 1s var(--ease) both; }
@keyframes balken-ein { from { transform: scaleX(0); } }
.dickbalken i { animation: aufziehen .9s var(--ease) both; transition: flex-grow .6s var(--ease), width .6s var(--ease); }
@keyframes aufziehen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.satz .nr { transition: background .25s, color .25s, transform .16s var(--ease); }
.satz .nr:active { transform: scale(.9); }
.satz.erledigt .nr { animation: plopp .4s var(--ease); }
.uebung { transition: box-shadow .3s var(--ease); }
.uebung > header small { transition: color .2s; }
.rund-knopf { transition: transform .16s var(--ease); }
.rund-knopf:active { transform: scale(.88); }
.bearbeiten-zeile .pille { animation: menue .22s var(--ease); transform-origin: right center; }
.satzaktion button { transition: transform .16s var(--ease), opacity .2s; }
.satzaktion button:active { transform: scale(.95); }
.leer { animation: rein-weich-y .3s var(--ease); }
@keyframes rein-weich-y { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (hover: hover) and (pointer: fine) {
  button.zeile:hover, a.zeile:hover { background: color-mix(in srgb, var(--fill) 50%, var(--cell)); }
  .info .sprung button:hover { background: var(--fill); }
}

/* ---------- Runde 2: Dashboard bearbeiten, Wochen-Schnitt, Kreatin-Knopf, Einstieg ---------- */
.segment.klein { height: 30px; width: 150px; flex: none; }
.segment.klein button { font-size: 13px; }
.kartenkopf .segment.klein { margin-left: auto; }
.wochenbalken { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 92px; position: relative; padding-top: 14px; box-shadow: inset 0 .5px 0 var(--sep); }
.wochenbalken .ziellinie { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--label-3); }
.wochenbalken .ziellinie span { position: absolute; right: 0; top: -16px; font-size: 11px; color: var(--label-2); }
.wochenbalken div { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: 11px; color: var(--label-2); font-weight: 500; }
.wochenbalken i { display: block; width: 100%; max-width: 22px; border-radius: 6px; background: var(--tint); transform-origin: bottom; animation: wachsen .7s var(--ease) both; }
.wochenbalken i.heute { background: linear-gradient(var(--ring-kcal-b), var(--ring-kcal-a)); }
.wochenbalken div.heute { color: var(--label); font-weight: 700; }
@keyframes wachsen { from { transform: scaleY(0); } }
.abhaken { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 17px; color: transparent;
  box-shadow: inset 0 0 0 2px var(--fill-2); transition: background .25s, box-shadow .25s, color .2s, transform .16s var(--ease); }
.abhaken[aria-pressed="true"] { background: var(--indigo); color: #fff; box-shadow: none; animation: plopp .45s var(--ease); }
.abhaken:active { transform: scale(.9); }
.zeile .gk.klein, .gk.klein { width: 36px; height: 36px; min-width: 36px; font-size: 17px; background: var(--fill); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.gk.klein.an { color: var(--indigo); }
.bearbeiten-zeile { touch-action: none; }
.bearbeiten-zeile.zieht { z-index: 3; box-shadow: 0 8px 24px rgba(0,0,0,.18); border-radius: 12px; transition: none; }
.rund-knopf { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; flex: none; }
.rund-knopf.rot { background: var(--red); } .rund-knopf.gruen { background: var(--green); }
.griffchen { color: var(--label-3); font-size: 20px; padding: 8px 4px; cursor: grab; touch-action: none; }
.ideen .zeile { --einzug: 16px; }
.einstieg { display: flex; flex-direction: column; height: 100%; }
.einstieg .fortschritt { display: flex; gap: 6px; padding: 4px 24px 0; }
.einstieg .fortschritt i { flex: 1; height: 4px; border-radius: 2px; background: var(--fill-2); display: block; transition: background .3s; }
.einstieg .fortschritt i.an { background: var(--tint); }
.einstieg .schritt { flex: 1; overflow-y: auto; padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 16px; animation: rein-weich .4s var(--ease); scrollbar-width: none; }
@keyframes rein-weich { from { opacity: 0; transform: translateX(24px); } }
.einstieg h2 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.einstieg p.unter { margin: -6px 0 0; color: var(--label-2); font-size: 17px; line-height: 1.4; }
.einstieg .fuss { padding: 10px 20px calc(var(--bottom) + 16px); display: flex; flex-direction: column; gap: 10px; }
.wahl { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: var(--cell); text-align: left; width: 100%;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s, transform .16s var(--ease); }
.wahl:active { transform: scale(.98); }
.wahl[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--tint); }
.wahl .txt { flex: 1; min-width: 0; }
.wahl b { display: block; font-size: 17px; font-weight: 600; }
.wahl small { display: block; font-size: 15px; color: var(--label-2); margin-top: 1px; }
.wahl .kachel { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
.wahl .punkt { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fill-2); display: grid; place-items: center; font-size: 13px; color: transparent; flex: none; }
.wahl[aria-pressed="true"] .punkt { background: var(--tint); box-shadow: none; color: #fff; }
.willkommen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.willkommen .logo { width: 96px; height: 96px; border-radius: 26px; background: linear-gradient(150deg, var(--ring-kcal-b), var(--ring-kcal-a)); color: #fff; display: grid; place-items: center; font-size: 52px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--tint) 35%, transparent); }
.formzeile input, .formzeile select { border: 0; outline: 0; background: transparent; text-align: right; color: var(--tint-text); font-size: 17px; width: 90px; }
.ergebniszahl { font-family: var(--font-rounded); font-size: 64px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: center; }
.ergebniszahl small { font-family: var(--font); font-size: 22px; color: var(--label-2); font-weight: 600; letter-spacing: 0; }
.uebung.jetzt { box-shadow: inset 0 0 0 2px var(--orange); }
.sperre { position: absolute; inset: 0; background: radial-gradient(120% 70% at 30% 10%, #3c3f7a 0%, #1b1d3a 45%, #07070d 100%); color: #fff; display: flex; flex-direction: column; align-items: center; padding: calc(var(--top) - 44px) 12px 20px; gap: 18px; overflow: hidden; }
.insel-gross { width: calc(100% - 8px); max-width: 370px; background: #000; border-radius: 44px; padding: 16px 20px 14px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.insel-gross .oben { display: flex; align-items: center; gap: 10px; }
.insel-gross .kachel { width: 30px; height: 30px; border-radius: 9px; }
.insel-gross .name { flex: 1; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insel-gross .zeit, .live-karte .zeit { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; font-weight: 700; color: #FF9F0A; font-size: 24px; }
.insel-gross .unten { display: flex; justify-content: space-between; font-size: 14px; color: rgba(255,255,255,.65); padding-left: 40px; }
.uhrblock { text-align: center; margin-top: 18px; }
.uhrblock small { font-size: 19px; font-weight: 600; opacity: .85; }
.uhrblock b { display: block; font-family: var(--font-rounded); font-size: 92px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; margin-top: 2px; }
.live-karte { margin-top: auto; width: 100%; border-radius: 26px; padding: 14px 16px; background: rgba(40,40,46,.6); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); display: flex; flex-direction: column; gap: 12px; }
.live-karte .kopfzeile { display: flex; align-items: center; gap: 10px; }
.live-karte .kachel { width: 34px; height: 34px; border-radius: 10px; }
.live-karte .txt { flex: 1; min-width: 0; }
.live-karte .txt b { display: block; font-size: 16px; } .live-karte .txt small { display: block; font-size: 12px; opacity: .6; }
.live-karte .zeit { font-size: 30px; }
.jetzt-zeile { display: flex; align-items: flex-end; gap: 12px; }
.jetzt-zeile small { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #FF9F0A; }
.jetzt-zeile b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.jetzt-zeile .satzinfo { text-align: right; font-size: 15px; font-weight: 600; white-space: nowrap; }
.jetzt-zeile .satzinfo small { color: rgba(255,255,255,.6); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.fortschritt-live { display: flex; gap: 4px; }
.fortschritt-live i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); display: block; }
.fortschritt-live i.an { background: #FF9F0A; }
.danach { font-size: 13px; opacity: .65; margin-top: -4px; }
.sperre-hinweis { margin: 0; font-size: 12px; opacity: .5; text-align: center; }

.pro-chip { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: color-mix(in srgb, var(--indigo) 16%, transparent); color: var(--indigo); }
.pro-chip.hell { background: rgba(255,255,255,.2); color: #fff; }
.banner { position: absolute; z-index: 96; left: 10px; right: 10px; top: calc(var(--top) + 6px); border-radius: 24px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; text-align: left;
  background: var(--glass); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); box-shadow: var(--shadow-float), 0 0 0 .5px var(--glass-line); animation: runter .5s var(--ease-sheet); }
@keyframes runter { from { transform: translateY(-140%); } }
.banner .appicon { width: 38px; height: 38px; border-radius: 10px; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 20px; flex: none; }
.banner .txt { flex: 1; min-width: 0; } .banner b { display: block; font-size: 15px; } .banner small { display: block; font-size: 14px; color: var(--label-2); }
.banner .wann { font-size: 12px; color: var(--label-2); align-self: flex-start; }

.vorschau.echt .statusbar, .vorschau.echt .home-ind { display: none; }
.vorschau.echt .geraet .app { --top: 20px; }
@media (max-width: 760px) { .vorschau.echt .geraet .app { --top: max(env(safe-area-inset-top, 0px), 12px); } }

/* Open-Food-Facts-Hinweis (ODbL-Namensnennung): klein, Links unauffällig, aber erkennbar */
.off-hinweis { display: block; font-size: 12px; line-height: 1.4; color: var(--label-2); padding: 2px 4px 0; }
.off-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.heutekarte .link { color: var(--tint-text); font-size: 17px; padding: 6px; align-self: center; }

/* ---- 52-koerper.css */
/* Körper-Seiten (52-echt-koerper.js). Liegt hier statt im Skript: die CSP erlaubt kein Inline-CSS. */
.k-platz { display: block; background: var(--fill); }
.kfotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 22px; overflow: hidden; }
.kbild { position: relative; aspect-ratio: 3/4; padding: 0; overflow: hidden; background: var(--fill); }
.kbild img, .kbild .k-platz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kbild > span { position: absolute; left: 8px; bottom: 8px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.kbild .nr { position: absolute; top: 8px; right: 8px; left: auto; bottom: auto; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0,0,0,.25); text-shadow: none; }
.kbild .nr.an { background: var(--tint); box-shadow: 0 0 0 2px #fff; }
.kbild.neu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--tint-text); font-size: 13px; font-weight: 600; }
.kbild.neu .i { font-size: 26px; }
.kvergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kvergleich figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kvergleich button { position: relative; padding: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; background: var(--fill); }
.kvergleich img, .kvergleich .k-platz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kvergleich figcaption { font-size: 13px; color: var(--label-2); text-align: center; line-height: 1.3; }
.kvergleich figcaption b { display: block; color: var(--label); font-size: 17px; font-weight: 600; }
.kdiff { text-align: center; font-size: 15px; color: var(--label-2); }
.kdiff b { color: var(--label); font-weight: 600; }
.kgross { width: 100%; max-height: 56vh; object-fit: contain; border-radius: 22px; background: var(--fill); display: block; }
.kgross.k-platz { aspect-ratio: 3/4; max-height: 56vh; }
.kphase { gap: 12px; }
.kphase .kzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kphase .art { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kphase .art::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--f); }
.kphase .wann { font-size: 15px; color: var(--label-2); margin-top: -6px; }
.kphase dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.kphase dt { font-size: 13px; color: var(--label-2); }
.kphase dd { margin: 0; font-size: 17px; font-weight: 600; }
.kphase dd small { font-size: 13px; font-weight: 500; color: var(--label-2); }
.kphase .ziel { font-size: 13px; color: var(--label-2); }
.kpunkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.kformular .zahlzeile input { width: 96px; }
.kformular .zahlzeile .einheit { width: auto; min-width: 34px; }
.kformular .zahlzeile input[type="date"], .kformular .zahlzeile input[type="time"] { width: auto; min-width: 0; font-size: 17px; }
.kformular .zahlzeile input[type="date"] { width: 150px; }
.kimport textarea { width: 100%; min-height: 160px; border: 0; outline: 0; border-radius: 22px; background: var(--cell); color: var(--label); padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.5; resize: vertical; }
.kimport textarea:focus { box-shadow: inset 0 0 0 2px var(--tint); }
.kstatus { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--label-2); white-space: nowrap; }
.kstatus.neu { background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint-text); }
.kstatus.fehler { color: var(--red-text); }
.kfehler { color: var(--red-text); font-size: 13px; padding: 0 16px; line-height: 1.35; }
.kmonat { padding-top: 6px; }


/* ---- 55-scan.css */
/* Barcode-Blatt (55-echt-scan.js). Liegt hier statt im Skript: die CSP erlaubt kein Inline-CSS. */
.sucher video.live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sucher .rahmen { margin-top: -75px; }
.scan-fehler { position: relative; max-width: 300px; text-align: center; font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.85); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; }
.scan-fehler .kreis { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 28px; }
.scanpanel { margin: 0 12px calc(var(--bottom) + 12px); padding: 20px 16px 16px; border-radius: 28px; background: rgba(36,36,38,.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; gap: 12px; animation: scanRein .35s var(--ease-sheet, ease) both; }
@keyframes scanRein { from { transform: translateY(24px); opacity: 0; } }
.scanpanel h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; text-align: center; }
.scanpanel p { margin: 0; color: rgba(235,235,245,.7); font-size: 15px; line-height: 1.4; text-align: center; }
.scanpanel .hk.grau { background: rgba(118,118,128,.32); color: #fff; }
.scanpanel .link { color: #64B5FF; font-size: 16px; font-weight: 500; padding: 8px; align-self: center; }
.scanpanel .nummer { height: 56px; border-radius: 16px; background: rgba(118,118,128,.28); color: #fff; border: 0; outline: 0; font-size: 24px; font-weight: 600;
  letter-spacing: .08em; text-align: center; font-variant-numeric: tabular-nums; width: 100%; }
.scanpanel .nummer::placeholder { color: rgba(235,235,245,.35); letter-spacing: .02em; font-weight: 500; font-size: 18px; }
.scanpanel .fehler { color: #FF6961; font-size: 14px; }
.scan-oben { position: absolute; top: calc(var(--top) + 4px); left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 2; }
.blatt.kamera .gk.text { width: auto; padding: 0 14px; font-size: 15px; font-weight: 600; }
.scan-sucht { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: scanDreh .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes scanDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rahmen .laser, .scan-sucht { animation: none; } .scanpanel { animation: none; } }

/* ---- 56-sprechen.css */
/* Sprech-Blatt (56-echt-sprechen.js). Liegt hier statt im Skript: die CSP erlaubt kein Inline-CSS. */
.sp-start { width: 88px; height: 88px; border-radius: 50%; background: var(--tint); color: var(--on-tint); display: grid; place-items: center; font-size: 36px;
  box-shadow: 0 0 0 10px var(--tint-soft); transition: transform .15s; }
.sp-start:active { transform: scale(.94); }
.sp-start:disabled { opacity: .5; }
.sp-mitte { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 6px; text-align: center; }
.sp-mitte .leise { color: var(--label-2); font-size: 15px; line-height: 1.35; max-width: 290px; }
.sp-uhr { font-variant-numeric: tabular-nums; color: var(--label-2); font-size: 15px; font-weight: 500; }
.sp-welle-still i { animation-play-state: paused !important; opacity: .45; }
.sp-tippfeld { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 17px; color: var(--label); padding: 12px 16px; min-height: 76px; line-height: 1.35; }
.sp-tippfeld::placeholder { color: var(--label-3); }
.sp-haken { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-size: 15px; background: var(--fill); transition: background .15s; }
.sp-haken.an { background: var(--tint); }
.zeile.sp-aus .txt b, .zeile.sp-aus .txt small { opacity: .45; }
.sp-menge { display: flex; align-items: baseline; gap: 3px; flex: none; background: var(--fill); border-radius: 10px; padding: 6px 8px; }
.sp-menge input { width: 52px; border: 0; outline: 0; background: transparent; text-align: right; font-size: 17px; font-weight: 600; color: var(--tint-text); padding: 0; font-variant-numeric: tabular-nums; }
.sp-menge span { color: var(--label-2); font-size: 15px; }
.sp-schaetz { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--label-2); background: var(--fill); border-radius: 6px; padding: 1px 6px; vertical-align: 1px; }
.sp-zitat { font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; text-align: center; text-wrap: balance; padding: 0 8px; }
.sp-summe { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.sp-summe b { font-size: 22px; font-weight: 700; font-family: var(--font-rounded, inherit); }
.sp-summe small { color: var(--label-2); font-size: 15px; }
.sp-fehler { color: var(--red-text); font-size: 15px; text-align: center; padding: 0 12px; line-height: 1.35; }
.sp-fehler p { margin: 0; }
.sp-fehler .link { color: var(--tint-text); font-size: 17px; padding: 8px; margin-top: 2px; }
.sprechen .link { color: var(--tint-text); font-size: 17px; padding: 8px; }
.sp-knoepfe { display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .sprechen .welle i { animation: none; } }

/* ---- 59-coach.css */
/* Coach (haupt/59-echt-coach.js): Hinweis „Von der KI formuliert“ unter dem Satz. Die Karte selbst nutzt .karte.coach aus 01-apple.css. */
.coach .ki-hinweis { display: block; font-size: 12px; line-height: 1.3; color: var(--label-2); }
.coach .knoepfe { margin-top: 2px; }

/* ---- 70-konto.css */
/* Anmeldung (Willkommen, Einwilligung), Blätter „Zweiter Weg“ und Rückfragen, Profil → Konto.
   Nach dem Anmelde-Entwurf: Farben aus 01-apple.css, dazu nur die Zusätze für Kontrast (WCAG AA) und die Anbieter-Knöpfe.
   Alle Regeln hängen an .anm / .anm-app / .zw, damit der Rest der App unverändert bleibt. */
:root {
  --text-2: rgba(60,60,67,.78);   /* Zweittext, kräftiger als label-2 (mind. 4,5:1) */
  --knopf: #006AE6;               /* Hauptknopf, weiße Schrift 5,0:1 */
  --schalter-aus: rgba(120,120,128,.32);
  --google-bg: #FFFFFF; --google-text: #1F1F1F; --google-rand: #747775;
  --apple-bg: #000000; --apple-text: #FFFFFF;
  --sheet-bg: #F2F2F7; --sheet-cell: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-2: rgba(235,235,245,.62); --knopf: #0A6FDD; --schalter-aus: rgba(118,118,128,.34);
    --google-bg: #FFFFFF; --google-text: #1F1F1F; --google-rand: #FFFFFF;
    --apple-bg: #FFFFFF; --apple-text: #000000;
    --sheet-bg: #1C1C1E; --sheet-cell: #2C2C2E;
  }
}
:root[data-theme="dark"] {
  --text-2: rgba(235,235,245,.62); --knopf: #0A6FDD; --schalter-aus: rgba(118,118,128,.34);
  --google-bg: #FFFFFF; --google-text: #1F1F1F; --google-rand: #FFFFFF;
  --apple-bg: #FFFFFF; --apple-text: #000000;
  --sheet-bg: #1C1C1E; --sheet-cell: #2C2C2E;
}

/* ---------- Rahmen der Anmeldeseiten ---------- */
.anm-app { background: var(--bg); color: var(--label); --unten: max(var(--bottom), 16px); }
.anm { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--top) 20px 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; animation: anm-rein .4s var(--ease) both; }
.anm::-webkit-scrollbar { display: none; }
.anm h1 { margin: 0; text-wrap: balance; }
@keyframes anm-rein { from { opacity: 0; transform: translateY(10px); } }

.anm .hk, .zw .hk { background: var(--knopf); }
.anm .hk.gross { height: 56px; border-radius: 28px; }
.anm .hk .i { font-size: 24px; }
.anm .hk[disabled], .anm-fuss .hk[disabled] { background: var(--fill-2); color: var(--text-2); cursor: default; }
.anm .hk[disabled]:active, .anm-fuss .hk[disabled]:active { transform: none; }
.anm .hk[aria-busy="true"], .anm-fuss .hk[aria-busy="true"], .zw .hk[aria-busy="true"] { opacity: .75; }
.zw .hk.rot { background: var(--red); color: #fff; }
.zw .hk.grau { background: var(--fill); color: var(--tint-text); }
.anm .schalter, .zw .schalter { background: var(--schalter-aus); }
.anm .schalter::before { content: ""; position: absolute; inset: -8px -6px; }
.anm .schalter[aria-checked="true"] { background: var(--green); }
.anm .kachel, .zw .kachel { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
.zw .zeile .kachel .i { font-size: 24px; }

/* 1 Willkommen */
.anm .kopfblock { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px 0 20px; }
.anm .appicon { width: 104px; height: 104px; border-radius: 28px; background: linear-gradient(150deg, var(--ring-kcal-b), var(--ring-kcal-a)); color: #fff; display: grid; place-items: center; font-size: 56px;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--tint) 35%, transparent), inset 0 .5px 0 rgba(255,255,255,.4); margin-bottom: 14px; }
.anm .kopfblock h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.anm .anm-satz { margin: 0; font-size: 17px; line-height: 1.4; color: var(--text-2); max-width: 270px; text-wrap: balance; }
.anm .aktionen { display: flex; flex-direction: column; gap: 10px; }
.anm .hinweis { margin: 2px 0 0; padding: 0 16px; text-align: center; font-size: 15px; line-height: 1.35; color: var(--text-2); text-wrap: balance; min-height: 2.7em; }
.anm .wechsel { align-self: center; min-height: 44px; padding: 0 14px; border-radius: 22px; color: var(--tint-text); font-size: 15px; font-weight: 600; margin-top: -6px;
  transition: transform .16s var(--ease); }
.anm .wechsel:active { transform: scale(.97); }
.anm .oder { display: flex; align-items: center; gap: 12px; margin: 4px 0 4px; font-size: 13px; color: var(--text-2); }
.anm .oder::before, .anm .oder::after { content: ""; flex: 1; height: .5px; background: var(--sep); }
.sso { height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 17px; font-weight: 600; transition: transform .16s var(--ease); }
.sso:active { transform: scale(.97); }
.sso.apple { background: var(--apple-bg); color: var(--apple-text); }
.sso.apple .sso-logo { font-size: 24px; display: grid; place-items: center; margin-top: -2px; }
.sso.google { background: var(--google-bg); color: var(--google-text); box-shadow: inset 0 0 0 1px var(--google-rand); }
.g-logo { width: 20px; height: 20px; flex: none; }
.anm .recht { padding: 22px 0 calc(var(--unten) + 2px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.anm .recht p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-2); max-width: 320px; text-wrap: balance; }
.anm .recht .eu { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--tint-text); }
.anm .recht .eu .i { font-size: 14px; }

/* 2/3 Einwilligung + Titel in Blättern */
.anm .titel, .zw .titel { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.anm .unter, .zw .unter { margin: 8px 0 0; color: var(--text-2); font-size: 17px; line-height: 1.4; text-wrap: balance; }
.einw { gap: 14px; padding-top: calc(var(--top) + 32px); padding-bottom: calc(var(--unten) + 130px); }
.einw > * { flex-shrink: 0; }
.einw header { margin-bottom: 16px; }
.einw .karte { gap: 14px; padding: 18px 18px 20px 16px; }
.einw .kartenkopf { display: flex; align-items: center; gap: 14px; color: var(--label); font-size: 17px; }
.einw .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.einw .txt b { font-size: 17px; font-weight: 600; line-height: 1.2; }
.einw .karte p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.nb { white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 11px; background: var(--fill); font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
.chip .dot.noetig { background: var(--orange); } .chip .dot.frei { background: var(--grey); }
.fussnote { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 0 12px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.fussnote .i { color: var(--tint-text); font-size: 17px; margin-top: 1px; }
.fussnote.mitte { justify-content: center; text-align: center; padding: 0; margin-top: -4px; }
.anm-fuss { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 20px calc(var(--unten) + 4px); display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(to bottom, transparent, var(--bg) 22px); }
.grund { margin: 0; text-align: center; font-size: 14px; line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.grund[hidden] { display: none; }
.grund.fehler { color: var(--red-text); }

/* 4 Zweiter Weg und Rückfragen (Blätter mit Höhe nach Inhalt) */
.blatt.auto { height: auto; max-height: calc(100% - var(--top) - 10px); background: var(--sheet-bg); }
.blatt.auto .binnen.zw { flex: 0 1 auto; padding: 22px 20px calc(var(--bottom) + 16px); gap: 18px; }
.zw .titel { font-size: 28px; }
.zw .liste, .zw .zeile { background: var(--sheet-cell); }
.zw .zeile .txt small { color: var(--text-2); }
.zw .zeile.hoch { min-height: 72px; padding: 14px 16px; }
.status-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green-text); font-size: 15px; font-weight: 600; white-space: nowrap; }
.status-ok .i { font-size: 17px; }
.zw .knoepfe { display: flex; flex-direction: column; gap: 10px; }
/* KI-Blätter (56b-echt-ki.js): „KI-Funktionen einschalten?“ und „Die KI macht Pause“ */
.zw .karte { background: var(--sheet-cell); }
.ki-karte { gap: 10px; }
.ki-karte .kartenkopf { display: flex; align-items: center; gap: 12px; }
.ki-karte p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--text-2); }
.spaeter { height: 48px; border-radius: 24px; color: var(--tint-text); font-size: 17px; font-weight: 600; transition: transform .16s var(--ease); }
.spaeter:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .anm .hk:not([disabled]):hover, .sso:hover, .zw .hk:hover { filter: brightness(1.06); }
  .spaeter:hover, .anm .wechsel:hover { background: var(--fill); }
}
@media (prefers-reduced-motion: reduce) { .anm { animation: none; } }
@media (max-height: 700px) { .anm .appicon { width: 84px; height: 84px; font-size: 46px; border-radius: 22px; margin-bottom: 6px; } .anm .kopfblock h1 { font-size: 34px; } }

/* E-Mail-Code (Willkommen, Blätter), Links zu Datenschutz und Impressum */
.sso.mail { background: var(--fill); color: var(--label); }
.sso.mail .i { font-size: 22px; color: var(--tint-text); }
.sso[aria-busy="true"] { opacity: .7; }
.anm .recht a, .einw .fussnote a { color: var(--tint-text); text-decoration: underline; text-underline-offset: 2px; padding: 4px 0; }
.mailtitel { margin: 0; text-align: center; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
.mailform { display: flex; flex-direction: column; gap: 12px; }
.mailfeld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.mailfeld input { height: 52px; width: 100%; border: 0; outline: 0; border-radius: 14px; padding: 0 16px; font-size: 17px; font-weight: 500; color: var(--label);
  background: var(--cell); box-shadow: inset 0 0 0 1px var(--sep); transition: box-shadow .16s var(--ease); }
.mailfeld input::placeholder { color: var(--label-3); font-weight: 400; }
.mailfeld input:focus { box-shadow: inset 0 0 0 2px var(--tint); }
.mailfeld input.code { font-family: var(--font-rounded); font-size: 30px; font-weight: 600; letter-spacing: .32em; text-indent: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.zw .mailfeld input { background: var(--sheet-cell); }
.mailhinweis { margin: 0; text-align: center; font-size: 15px; line-height: 1.4; color: var(--text-2); text-wrap: balance; overflow-wrap: anywhere; }
.maillinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
.mailform .wechsel { margin-top: 0; }
.anm .wechsel[disabled], .zw .wechsel[disabled] { opacity: .5; cursor: default; }
.zw .hk[disabled] { background: var(--fill-2); color: var(--text-2); cursor: default; }
.zw .hk[disabled]:active { transform: none; }
.zw .wechsel { align-self: center; min-height: 44px; padding: 0 14px; border-radius: 22px; color: var(--tint-text); font-size: 15px; font-weight: 600; }
.zw .mailform .grund { margin-top: 2px; }
.anm .aktionen .mailform .hk { height: 52px; border-radius: 26px; font-size: 17px; }
.anm .wechsel[disabled]:hover, .zw .wechsel[disabled]:hover { background: none; }