/* =====================================================================================
   Phase 05 – Prototyp (Arbeitsdateien\Prototypen\GravityForge_Prototyp.html), 1:1 übernommen.
   Einzige Änderung: Klassen mit Präfix „gf-“ (Prototyp .btn = App .gf-btn), damit App-Klassen
   eindeutig bleiben (ursprünglich wegen Bootstrap, das seit Phase 05 nicht mehr geladen wird).
   Werte und Regeln unverändert. Nicht hier ändern, sondern Prototyp und App gemeinsam.
   ===================================================================================== */
/* Layout: App-Rahmen in Handybreite, Kopfzeile oben, Tab-Leiste unten, Views als Stapel mit Slide-Übergang.
   Farben 1:1 aus GravityForge site.css (--gf-*), bewusst nur dunkles Theme wie die App. */
/* Phase 10: Schrift Oxanium wird mit der App ausgeliefert, nicht von Google geladen (Christian, 11.10.2026).
   Variable Schrift (Strichstärke 200–800), Lizenz: SIL Open Font License 1.1 (fonts/oxanium/OFL.txt). */
@font-face {
  font-family: "Oxanium";
  src: url("../fonts/oxanium/oxanium-variable.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --gf-page-bg: #181b20;
  /* Phase 10: eine Höhe für alle Eingabefelder, Auswahlfelder und Picker-Knöpfe – wie die Satz-Eingabe im Training (Christian, 10.10.2026) */
  --gf-input-h: 2.125rem;
  --gf-num-w: 5.5rem; /* Phase 10.1: Breite kurzer Zahlenfelder (Messung, Menge) */
  /* Phase 10 (Christian 11.10.2026): Schriftskala – alle Größen nur über diese Stufen, keine Einzelwerte mehr.
     Vorschau: Arbeitsdateien\Vorschau\Schrift_Heute-Vorschlag.png. Sonderfälle (Hauptwert, Timer, Rad-Picker) stehen direkt in der Regel.
     12.10.2026: alle Stufen um 1 px größer – Oxanium hat kleinere Kleinbuchstaben als die frühere Systemschrift (Roboto). */
  --fs-xs: .75rem;      /* 12 px – Großbuchstaben-Überschriften, Tab-Beschriftung, Datum in Kacheln, Diagrammachsen */
  --fs-sm: .875rem;     /* 14 px – Meta-Zeilen, Hinweise, Einheiten, Feldbeschriftungen, Zeitleiste, Chips */
  --fs-ui: .9375rem;    /* 15 px – Knöpfe, Umschalter, Dialogtext, Toast */
  --fs-text: 1rem;      /* 16 px – Text, Listentitel, Hauptmenü, alle Eingabefelder */
  --fs-title: 1.1875rem; /* 19 px – Sheet-/Dialogtitel, Datumsspalte */
  --fs-num: 1.3125rem;  /* 21 px – Werte in Kacheln */
  --fs-h1: 1.5625rem;   /* 25 px – Seitentitel */
  --fs-brand: 1.75rem; /* 28 px – Schriftzug GravityForge, Einheitenwahl */
  --fs-hero: 2.25rem;  /* 36 px – Schriftzug auf der Anmeldeseite (Phase 10.1, Christian 18.10.2026) */
  /* Phase 10 (Christian 11.10.2026): feste Höhen für Umschalter – Hauptumschalter 43 px, schmale Leisten (Zeitraum, Kennzahl) 39 px */
  --gf-seg-h: 2.6875rem;
  --gf-seg-slim-h: 2.4375rem;
  /* Phase 10.1 (Christian 12.10.2026): Knopfgrößen nur über diese Stufen. Vorschau: Arbeitsdateien\Vorschau\Knoepfe_Heute-Vorschlag.png
     22:34: Feld 34 px = alle Symbolknöpfe mit Rahmen (Kopfzeile, Fotoansicht, Übungskopf, Satztabelle, Listenzeilen, Kalender)
     klein 29 px = nur Infoleiste der Übung im Training und Knöpfe ohne Rahmen (Pfeile, Stift im Kasten), mit größerer Tippfläche
     groß 39 px = Trainingsstart auf den Plan-Kacheln, gleich hoch wie Textknöpfe. Sonderfall: Timer (4rem). */
  --gf-btn-s: 1.8125rem;
  --gf-btn-m: var(--gf-input-h);
  --gf-btn-l: var(--gf-seg-slim-h);
  /* Phase 10.1 (Christian 12.10.2026 23:12): Abstände nur über diese Stufen (4-px-Raster), keine Einzelwerte.
     Vorschau: Arbeitsdateien\Vorschau\Abstaende_*.png (Variante 12 px). Ausnahmen: Platz unter Tab-Leiste/Footer und Safe-Area (calc),
     Platz für das Auge im Kennwortfeld (.gf-pwwrap input). Spaltenbreiten der Kacheln rechnen mit der Lücke (calc mit --sp-3). */
  --sp-0: .125rem;  /*  2 px */
  --sp-1: .25rem;   /*  4 px */
  --sp-2: .5rem;    /*  8 px */
  --sp-3: .75rem;   /* 12 px – Lücken zwischen Karten und Kacheln */
  --sp-4: 1rem;     /* 16 px – Seitenrand, Karten innen */
  --sp-5: 1.5rem;   /* 24 px */
  --sp-6: 3rem;     /* 48 px */
  /* Phase 10.1 (14.10.2026): Eckenrundung nur über diese Stufen. Innen immer etwas weniger rund als außen.
     Formen bleiben: Pille (--r-pill), Kreis 50 %. Sonderfälle: Handyrahmen am PC (.gf-device), Logo (22 %). */
  --r-xs: 2px;          /* Farbfelder in Diagramm-Legenden */
  --r-sm: .375rem;      /*  6 px – innen: Umschalter-Segmente, Infoleisten-/Pfeilknöpfe, Tooltip, kleine Bilder */
  --r-md: .5rem;        /*  8 px – Knöpfe, alle Eingabe-/Auswahlfelder, Boxen, Umschalter außen, Fotos */
  --r-lg: .625rem;      /* 10 px – Karten, Listen, Kacheln (wie bisher 9,6 px) */
  --r-xl: 1rem;         /* 16 px – Sheet, Auswahl-Picker, Dialog, Fehler-Toast */
  --r-pill: 99px;
  /* Phase 10.1 (14.10.2026): Farbtöne als Variablen statt direkt in den Regeln */
  --gf-desk-bg: #0f1114;                       /* neben dem Handyrahmen am PC */
  --gf-border-strong: #4a5260;                 /* Rand der aufgeklappten Übung */
  --gf-on-color: #10161d;                      /* dunkle Schrift auf farbiger oder heller Fläche */
  --gf-primary-faint: rgba(120,167,211,.06);   /* Satzzeile in Bearbeitung */
  --gf-primary-bg: rgba(120,167,211,.12);      /* gewählter Chip, Fläche im Diagramm */
  --gf-primary-strong: rgba(120,167,211,.15);  /* aktiver Knopf, Avatar */
  --gf-success-bg: rgba(67,166,107,.08);
  --gf-success-line: rgba(67,166,107,.55);
  --gf-success-band: rgba(67,166,107,.25);     /* Zielband in Diagramm-Legenden */
  --gf-danger-bg: rgba(214,91,99,.07);
  --gf-danger-line: rgba(214,91,99,.55);
  --gf-danger-surface: #3a2226;                /* Fehler-Toast */
  --gf-warning-bg: rgba(211,139,56,.12);
  --gf-shadow: rgba(0,0,0,.45);
  --gf-scrim: rgba(0,0,0,.6);                  /* Beschriftung auf Fotos */
  --gf-scrim-strong: rgba(0,0,0,.92);          /* Bild-Vollansicht */
  --gf-photo-bg: #000;
  --gf-on-photo: #fff;
  --gf-photo-dot: #555;
  --gf-photo-dot-on: #ddd;
  --gf-c-kh: #a58fd6;                          /* Kohlenhydrate in Makro-Balken */
  --gf-c-fat: #c9a35c;                         /* Fett in Makro-Balken */
  /* Zeilenhöhe, Buchstabenabstand, Bewegung – nur diese Stufen. Sonderfall: Timer-Anzeige line-height 1. */
  --lh-tight: 1.1;      /* große Zahlen, Datumsspalte */
  --lh-normal: 1.2;     /* Überschriften */
  --lh-text: 1.45;      /* Fließtext, Hinweise */
  --ls-tight: .02em;    /* Schriftzug, Titel, Tab-Beschriftung, Kennwortanzeige */
  --ls-caps-sm: .05em;  /* kleine Großbuchstaben: Pillen, Tabellenköpfe, Wochentage */
  --ls-caps: .09em;     /* Abschnittsüberschriften */
  --t-tap: .08s;        /* Antippen */
  --t-fade: .2s;        /* Ein-/Ausblenden */
  --t-move: .28s;       /* Seiten, Sheets, Picker */
  --ease: cubic-bezier(.2,.8,.2,1);
  --gf-surface: #20242b;
  --gf-surface-emphasis: #282d35;
  --gf-border: #353b45;
  --gf-text: #e6ebf2;
  --gf-text-secondary: #bcc5d0;
  --gf-muted: #8b95a3;
  --gf-primary: #78a7d3;
  --gf-success: #43a66b;
  --gf-warning: #d38b38;
  --gf-danger: #d65b63;
  --gf-neutral-action: #929aa5;
  --gf-backdrop: rgba(8, 10, 13, .62);
  --font-brand: "Oxanium", system-ui, sans-serif;
  /* Phase 10 (Christian 11.10.2026): eine Schrift für alles – Oxanium. Einzige Ausnahme: Monospace bei erzeugten Kennwörtern (.gf-pwshow). */
  --font-body: "Oxanium", system-ui, sans-serif;
  --tabbar-h: 3.6rem;
  --header-h: 3.4rem;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { background: var(--gf-page-bg); color: var(--gf-text); font-family: var(--font-body); font-size: var(--fs-text); margin: 0; overscroll-behavior: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gf-primary); outline-offset: 2px; }

.gf-icon { width: 1.25rem; height: 1.25rem; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.gf-icon.gf-sm { width: 1rem; height: 1rem; }
.gf-icon.gf-lg { width: 1.6rem; height: 1.6rem; }
.gf-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* App-Rahmen */
.gf-device { position: relative; height: 100%; max-width: 440px; margin: 0 auto; background: var(--gf-page-bg); overflow: hidden; overflow: clip; display: flex; flex-direction: column; }
@media (min-width: 600px) {
  body { background: var(--gf-desk-bg); }
  .gf-device { height: min(900px, calc(100% - 2rem)); margin-block: var(--sp-4); border: 1px solid var(--gf-border); border-radius: 1.6rem; box-shadow: 0 20px 60px var(--gf-shadow); }
}


.gf-stage { position: relative; flex: 1 1 auto; overflow: hidden; overflow: clip; }
.gf-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--gf-page-bg); transition: transform var(--t-move) var(--ease), opacity var(--t-move); }
@media (prefers-reduced-motion: reduce) { .gf-view, .gf-sheet, .gf-backdrop, .gf-toast { transition: none !important; } }

.gf-header { flex: 0 0 auto; min-height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid transparent; transition: background var(--t-fade), border-color var(--t-fade); }
.gf-header.gf-scrolled { border-bottom-color: var(--gf-border); background: var(--gf-surface); }
.gf-header-title h1 { font-family: var(--font-brand); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-normal); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--ls-tight); }
.gf-header-title .gf-sub { font-size: var(--fs-sm); color: var(--gf-text-secondary); margin-top: var(--sp-0); }
.gf-header-actions { display: flex; gap: var(--sp-2); }
/* Phase 10 (Christian 11.10.2026): Kopfzeile immer gleich hoch – mit und ohne Knopf rechts (Titel und Inhalt der Tabs auf gleicher Höhe) */
.gf-header-title { flex: 1 1 auto; min-width: 0; min-height: 1.8rem; display: flex; flex-direction: column; justify-content: center; }
/* Phase 10 (Christian 11.10.2026, Vorschau Kopfzeile_Knoepfe_A-B-C.png Variante C): Knopf so hoch wie die Titelzeile,
   Tippfläche bleibt über einen unsichtbaren Rand bei ca. 40 px */
.gf-ib.gf-sm, .gf-header-actions .gf-ib, .gf-fb-vtop .gf-ib { position: relative; min-width: var(--gf-btn-m); min-height: var(--gf-btn-m); padding: 0 var(--sp-2); }
.gf-ctx .gf-ib.gf-sm, .gf-ib.gf-sm.gf-ghost, .gf-ib.gf-sm.gf-nav { min-width: var(--gf-btn-s); min-height: var(--gf-btn-s); border-radius: var(--r-sm); }
.gf-ctx .gf-ib.gf-sm::after, .gf-ib.gf-sm.gf-ghost::after, .gf-ib.gf-sm.gf-nav::after { content: ""; position: absolute; inset: -.35rem; } /* Tippfläche größer als der sichtbare Knopf */
/* Symbol 14 px in Symbolknöpfen mit Rahmen (auch Schließen in der Fotoansicht); ohne Rahmen (Pfeile, Stift im Kasten) bleibt das Symbol normal groß */
.gf-ib.gf-sm:not(.gf-ghost, .gf-nav) .gf-icon, .gf-header-actions .gf-ib .gf-icon, .gf-fb-vtop .gf-ib .gf-icon { width: .9rem; height: .9rem; }
.gf-header-title h1.gf-brand-title { color: var(--gf-primary); font-size: var(--fs-brand); letter-spacing: var(--ls-tight); }
.gf-today-sub { font-size: var(--fs-text); font-weight: 600; color: var(--gf-text); margin-top: var(--sp-1); }

.gf-content { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-1) var(--sp-4) calc(1.5rem + var(--tabbar-h)); -webkit-overflow-scrolling: touch; }
.gf-content.gf-has-footer { padding-bottom: calc(5.5rem + var(--tabbar-h)); }

/* Buttons im V1-Stil: transparent, farbiger Rand */
.gf-ib { display: inline-flex; align-items: center; justify-content: center; min-width: var(--gf-btn-l); min-height: var(--gf-btn-l); border-radius: var(--r-md); border: 1px solid var(--gf-neutral-action); background: transparent; color: var(--gf-neutral-action); padding: 0 var(--sp-2); transition: transform var(--t-tap), background var(--t-fade); }
.gf-ib:active { transform: scale(.94); background: var(--gf-surface-emphasis); }
.gf-ib.gf-primary { color: var(--gf-primary); border-color: var(--gf-primary); }
.gf-ib.gf-success { color: var(--gf-success); border-color: var(--gf-success); }
.gf-ib.gf-danger { color: var(--gf-danger); border-color: var(--gf-danger); }
.gf-ib.gf-ghost { border-color: transparent; }
/* Phase 08 (Christian, 07.10.2026): Knöpfe so schmal wie die schmale Umschaltleiste, Stil D (gedämpfter Rand, Hauch Farbe) */
.gf-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.45rem; padding: 0 var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--gf-border); background: var(--gf-surface-emphasis); font-size: var(--fs-ui); font-weight: 600; transition: transform var(--t-tap); }
.gf-btn .gf-icon { width: 1.05rem; height: 1.05rem; }
.gf-btn:active { transform: scale(.97); }
.gf-btn.gf-success, .gf-btn.gf-outline-success { background: var(--gf-success-bg); border-color: var(--gf-success-line); color: var(--gf-success); }
.gf-btn.gf-outline-danger { background: var(--gf-danger-bg); border-color: var(--gf-danger-line); color: var(--gf-danger); }
.gf-btn.gf-block { width: 100%; }

.gf-section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--gf-muted); margin: var(--sp-4) 0 var(--sp-2); font-weight: 600; }
/* Phase 10 (F1): Hinweis als letzte Zeile im Kasten ohne Abstand nach unten */
.gf-card .gf-hint:last-child { margin-bottom: 0; }
/* Phase 10 (R6): Abschnittsüberschrift in Sheets – Sheet-Body ist ein Grid mit Abstand, daher eigene Ränder */
.gf-section-label.gf-in-sheet { margin: var(--sp-2) 0 calc(-1 * var(--sp-2)); }
/* Phase 10: Blätter-/Zurück-Pfeile innerhalb von Seiten und Sheets dezent – nur der Pfeil, ohne Rahmen, Tippfläche bleibt gleich groß (Christian, Vorschlag A) */
.gf-ib.gf-nav { border-color: transparent; color: var(--gf-text-secondary); }

/* Listen */
.gf-list { background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-lg); overflow: hidden; }
.gf-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); min-height: 3.4rem; border-top: 1px solid var(--gf-border); background: transparent; width: 100%; text-align: left; border-left: 0; border-right: 0; border-bottom: 0; }
.gf-row:first-child { border-top: 0; }
button.gf-row:active { background: var(--gf-surface-emphasis); }
.gf-row .gf-main { flex: 1 1 auto; min-width: 0; }
.gf-row .gf-meta.gf-1line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Phase 10.1: Plannotiz in der Planliste einzeilig */
.gf-row .gf-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-row .gf-meta { font-size: var(--fs-sm); color: var(--gf-text-secondary); margin-top: var(--sp-0); }
.gf-row .gf-lead { color: var(--gf-text-secondary); }
/* Phase 10 (F3): Auswahl im App-Picker statt Browser-Liste (site.js enhanceSelects), rechts in einer Listenzeile (Withings-Zuordnung) */
.gf-row .gf-pick-btn.gf-map { width: 11.6rem; flex: 0 0 auto; }
.gf-pick-btn .gf-pv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-pick-btn:disabled { opacity: .55; }
.gf-picker .gf-auswahl { max-height: 50vh; overflow-y: auto; }
.gf-picker .gf-auswahl .gf-ok { color: var(--gf-primary); }
.gf-picker .gf-auswahl .gf-leer .gf-title { color: var(--gf-text-secondary); font-weight: 500; }
.gf-chev { color: var(--gf-muted); }
.gf-date-col { width: 3.1rem; flex: 0 0 auto; text-align: center; line-height: var(--lh-tight); }
.gf-date-col .gf-d { font-family: var(--font-brand); font-size: var(--fs-title); font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-date-col .gf-w { font-size: var(--fs-xs); color: var(--gf-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-sm); }

.gf-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; }
.gf-dot.gf-done { background: var(--gf-success); }
.gf-dot.gf-run { background: var(--gf-warning); }
.gf-dot.gf-open { border: 2px solid var(--gf-border); }
.gf-pill { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps-sm); text-transform: uppercase; padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); border: 1px solid currentColor; }
.gf-pill.gf-run { color: var(--gf-warning); }

.gf-chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); scrollbar-width: none; }
.gf-chip { flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--gf-border); background: transparent; color: var(--gf-text-secondary); font-size: var(--fs-sm); } /* Phase 10: Chips auf Stufe „Neben“ (14 px) = Größe wie vor der Schriftumstellung (Christian 12.10.2026) */
.gf-chip.gf-on { border-color: var(--gf-primary); color: var(--gf-primary); background: var(--gf-primary-bg); }

/* Heute */
.gf-card { background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-lg); padding: var(--sp-4); }
.gf-card.gf-running { border-color: var(--gf-warning); display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; }
.gf-card.gf-running .gf-ic { color: var(--gf-warning); }
.gf-nutri { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.gf-nutri div { text-align: center; }
.gf-nutri .gf-v { font-family: var(--font-brand); font-size: var(--fs-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-nutri .gf-l { font-size: var(--fs-xs); color: var(--gf-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-sm); }
.gf-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gf-quick button { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-1); border-radius: var(--r-lg); border: 1px solid var(--gf-border); background: var(--gf-surface); font-size: var(--fs-ui); font-weight: 600; }
.gf-quick button:active { transform: scale(.96); }
.gf-quick .gf-s { color: var(--gf-success); }

/* Training-Session */
.gf-ex { background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-lg); margin-bottom: var(--sp-2); overflow: hidden; }
.gf-ex.gf-open { border-color: var(--gf-border-strong); }
.gf-ex-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); min-height: 3.4rem; }
.gf-grip { touch-action: none; color: var(--gf-muted); padding: var(--sp-3) var(--sp-1); cursor: grab; background: none; border: 0; }
.gf-ex-nr { font-family: var(--font-brand); color: var(--gf-muted); width: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; margin-inline: calc(-1 * (var(--sp-1) + var(--sp-0)) / 2) calc((var(--sp-1) + var(--sp-0)) / 2); } /* Phase 10.1 (Christian 17.10.2026): Nummer optisch mittig zwischen Griff-Punkten und Name – Griff-Symbol hat rechts eigene Luft, darum 3 px nach links */
.gf-ex-name { flex: 1 1 auto; min-width: 0; background: none; border: 0; text-align: left; padding: var(--sp-2) var(--sp-1); }
.gf-ex-name .gf-n { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gf-ex-name .gf-s { font-size: var(--fs-sm); color: var(--gf-text-secondary); }
.gf-ex-body { border-top: 1px solid var(--gf-border); padding: var(--sp-3) var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-3); }
.gf-ctx { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gf-ctx .gf-ib { gap: var(--sp-1); font-size: var(--fs-sm); }
.gf-prev { font-size: var(--fs-sm); color: var(--gf-text-secondary); background: var(--gf-surface-emphasis); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); }
.gf-prev b { color: var(--gf-text); font-weight: 600; }
.gf-sets { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.gf-sets th { font-size: var(--fs-xs); color: var(--gf-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-sm); text-align: center; font-weight: 600; padding: 0 var(--sp-1) var(--sp-1); }
.gf-sets td { padding: var(--sp-1); height: 2.75rem; border-top: 1px solid var(--gf-border); vertical-align: middle; text-align: center; }
.gf-sets th.gf-nr { width: 1.6rem; text-align: left; }
.gf-sets th.gf-act { width: 5.1rem; }
.gf-sets td.gf-nr { font-family: var(--font-brand); color: var(--gf-muted); text-align: left; }
.gf-sets td.gf-num { font-size: var(--fs-text); }
.gf-sets td.gf-act { text-align: right; white-space: nowrap; }
.gf-sets td.gf-act .gf-wrap { display: inline-grid; grid-template-columns: auto auto; gap: var(--sp-1); }
.gf-sets input { width: 100%; max-width: 5.4rem; text-align: center; padding: 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.gf-unit { font-size: var(--fs-sm); color: var(--gf-muted); margin-left: var(--sp-1); } /* Phase 10.1: Abstand wie ein Leerzeichen */
.gf-editing td { background: var(--gf-primary-faint); }
/* Phase 08: „＋ … hinzufügen“ überall gleich – Höhe wie die Knöpfe, gestrichelt, Hauch Grün (Christian, 07.10.2026) */
.gf-add-ex { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 2.45rem; border: 1px dashed var(--gf-success-line); border-radius: var(--r-md); background: var(--gf-success-bg); color: var(--gf-success); font-size: var(--fs-ui); font-weight: 600; margin-top: var(--sp-1); }
.gf-add-ex .gf-icon { width: 1.05rem; height: 1.05rem; }
.sortable-ghost { opacity: .35; }
.sortable-chosen { box-shadow: 0 8px 24px var(--gf-shadow); }

.gf-footer-bar { position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); padding: var(--sp-3) var(--sp-4); background: linear-gradient(to top, var(--gf-page-bg) 70%, transparent); display: flex; gap: var(--sp-3); z-index: 2; }
.gf-basis { font-size: var(--fs-sm); color: var(--gf-text-secondary); margin: var(--sp-1) 0 var(--sp-3); display: flex; gap: var(--sp-2); align-items: center; }

/* Tab-Leiste */
.gf-tabbar { flex: 0 0 auto; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; justify-content: space-between; padding-inline: var(--sp-2); background: var(--gf-surface); border-top: 1px solid var(--gf-border); z-index: 5; view-transition-name: gf-tabbar; }
/* Tab-Leiste (Christian, 03.10.2026, Variante B): gleiche Lücken zwischen den Punkten, Start/Mehr bündig mit dem Seitenrand (1rem = .5rem Leiste + .5rem Tab, größere Tippfläche) */
.gf-tabbar .gf-tab { flex: 0 0 auto; padding-inline: var(--sp-2); }
.gf-tab .gf-icon { width: 1.5rem; height: 1.5rem; }
.gf-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); border: 0; background: none; color: var(--gf-muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-tight); }
.gf-tab.gf-on { color: var(--gf-primary); }
.gf-tab-ic { position: relative; }
.gf-tab-ic .gf-run-dot { position: absolute; top: -2px; right: -5px; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gf-warning); }

/* Bottom-Sheet und Dialog */
.gf-backdrop { position: absolute; inset: 0; background: var(--gf-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--t-fade); z-index: 10; }
.gf-backdrop.gf-on { opacity: 1; pointer-events: auto; }
.gf-sheet { position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); max-height: calc(88% - var(--kb, 0px)); display: flex; flex-direction: column; background: var(--gf-surface); border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); border-top: 1px solid var(--gf-border); transform: translateY(105%); transition: transform var(--t-move) var(--ease); z-index: 11; padding-bottom: env(safe-area-inset-bottom, 0px); }
.gf-sheet:not(.gf-on), .gf-picker:not(.gf-on) { visibility: hidden; transition: transform var(--t-move) var(--ease), visibility 0s linear var(--t-move); }
.gf-sheet.gf-on { transform: translateY(0); visibility: visible; }
.gf-sheet .gf-handle { width: 2.6rem; height: .3rem; border-radius: var(--r-pill); background: var(--gf-border); margin: var(--sp-2) auto var(--sp-1); }
.gf-sheet-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-4) var(--sp-3); }
.gf-sheet-head h2 { flex: 1; margin: 0; font-family: var(--font-brand); font-size: var(--fs-title); font-weight: 600; }
.gf-sheet-body > * { min-width: 0; }
.gf-sheet-body { overflow-y: auto; padding: 0 var(--sp-4) var(--sp-4); display: grid; grid-auto-rows: max-content; gap: var(--sp-3); }
/* Phase 10.1 (14.10.2026): grid-auto-rows max-content – sonst staucht das Raster Listen mit overflow:hidden (.gf-list) auf die Sheet-Höhe, sie werden abgeschnitten statt dass das Sheet scrollt */
.gf-dialog { position: absolute; left: 1.2rem; right: 1.2rem; top: 50%; transform: translateY(-40%) scale(.96); opacity: 0; pointer-events: none; background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-xl); padding: var(--sp-4); z-index: 12; transition: transform var(--t-fade), opacity var(--t-fade); }
.gf-dialog.gf-on { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.gf-dialog h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-title); }
.gf-dialog p { margin: 0 0 var(--sp-4); color: var(--gf-text-secondary); font-size: var(--fs-ui); line-height: var(--lh-text); }
.gf-dialog .gf-acts { display: grid; gap: var(--sp-2); }
.gf-dialog.gf-danger h2 { color: var(--gf-danger); }

.gf-field { display: grid; gap: var(--sp-1); }
.gf-field label { font-size: var(--fs-sm); color: var(--gf-text-secondary); }
/* Phase 10.1 (14.10.2026): Eingabefelder – eine gemeinsame Regel für Höhe, Hintergrund, Rahmen, Rundung, Fokus und Platzhalter.
   Je Feldart bleiben nur Breite, Innenabstand (Zahlenfelder 8 px, Textfelder 12 px), Ausrichtung und gleich breite Ziffern. */
.gf-field input, .gf-field textarea, .gf-search, .gf-sets input, .gf-vrow input, .gf-grow input, .gf-amt input, select.gf-sel, .gf-pick-btn { min-height: var(--gf-input-h); background: var(--gf-page-bg); border: 1px solid var(--gf-border); border-radius: var(--r-md); }
.gf-field input:focus, .gf-field textarea:focus, .gf-search:focus, .gf-sets input:focus, .gf-vrow input:focus, .gf-grow input:focus, .gf-amt input:focus { border-color: var(--gf-primary); outline: none; }
.gf-field input::placeholder, .gf-field textarea::placeholder, .gf-search::placeholder, .gf-sets input::placeholder, .gf-vrow input::placeholder, .gf-grow input::placeholder, .gf-amt input::placeholder { color: var(--gf-muted); opacity: 1; }
.gf-field input, .gf-field textarea, .gf-search { padding: var(--sp-1) var(--sp-3); width: 100%; }
.gf-field textarea { resize: none; overflow-y: auto; } /* Phase 10: wächst mit dem Inhalt (site.js growTa) */
/* Phase 10.1 (Christian 17.10.2026): Notiz im Formular – der Kasten ist das Textfeld (kein Rahmen im Rahmen) */
.gf-card.gf-notefield { padding: 0; }
.gf-notefield textarea { display: block; width: 100%; min-height: calc(2 * var(--gf-input-h)); padding: var(--sp-3) var(--sp-4); background: transparent; border: 0; border-radius: var(--r-lg); color: inherit; font: inherit; resize: none; overflow-y: auto; }
.gf-notefield textarea:focus { outline: none; }
.gf-notefield textarea::placeholder { color: var(--gf-muted); opacity: 1; }
.gf-notefield:focus-within { border-color: var(--gf-primary); }
.gf-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gf-check { display: flex; align-items: center; gap: var(--sp-3); min-height: 2.6rem; }
.gf-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--gf-success); }
/* Phase 10.1 (14.10.2026): Sheets mit Suchliste scrollen als Ganzes wie alle Sheets, das Suchfeld bleibt oben stehen (vorher eigene Scrollfläche .gf-pick, 50 % Höhe) */
.gf-search-wrap { position: sticky; top: 0; background: var(--gf-surface); padding-bottom: var(--sp-2); z-index: 1; display: grid; gap: var(--sp-2); }

/* Timer */
.gf-timer-disp { font-family: var(--font-brand); font-size: 4.2rem; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); line-height: 1; padding: var(--sp-3) 0; }
.gf-timer-disp.gf-cd { color: var(--gf-warning); }
.gf-seg { height: var(--gf-seg-h); display: grid; grid-template-columns: 1fr 1fr; background: var(--gf-page-bg); border: 1px solid var(--gf-border); border-radius: var(--r-md); padding: var(--sp-1); }
.gf-seg button { border: 0; background: none; padding: var(--sp-2); border-radius: var(--r-sm); color: var(--gf-text-secondary); font-weight: 600; }
.gf-seg button.gf-on { background: var(--gf-surface-emphasis); color: var(--gf-text); }
.gf-timer-ctl { display: flex; justify-content: center; gap: var(--sp-4); }
.gf-timer-ctl .gf-ib { min-width: 4rem; min-height: 4rem; border-radius: 50%; }

.gf-toast { position: absolute; left: 50%; bottom: calc(var(--tabbar-h) + 1rem); transform: translate(-50%, 1rem); opacity: 0; background: var(--gf-surface-emphasis); border: 1px solid var(--gf-border); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-ui); z-index: 20; transition: opacity var(--t-fade), transform var(--t-fade); pointer-events: none; max-width: 90%; width: max-content; display: flex; align-items: center; gap: var(--sp-2); }
.gf-toast.gf-on { opacity: 1; transform: translate(-50%, 0); }
.gf-toast .gf-icon { color: var(--gf-success); }

.gf-btiles { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.gf-btile { position: relative; flex: 1 1 calc((100% - 2 * var(--sp-3)) / 3); display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); padding: var(--sp-3) var(--sp-1); border-radius: var(--r-lg); border: 1px solid var(--gf-border); background: var(--gf-surface); text-align: center; min-width: 0; }
.gf-btile:active { transform: scale(.96); }
.gf-btile .gf-n { font-size: var(--fs-sm); color: var(--gf-text-secondary); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-btile .gf-v { font-family: var(--font-brand); font-size: var(--fs-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-btile .gf-delta { font-size: var(--fs-sm); color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; }
.gf-btile .gf-dt { font-size: var(--fs-xs); color: var(--gf-muted); font-variant-numeric: tabular-nums; }
.gf-tag-home { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps-sm); text-transform: uppercase; color: var(--gf-primary); border: 1px solid var(--gf-primary); border-radius: var(--r-pill); padding: var(--sp-0) var(--sp-2); vertical-align: 2px; margin-left: var(--sp-1); }
.gf-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); }
.gf-hero-v { font-family: var(--font-brand); font-size: 2.2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.gf-hero-d { text-align: right; font-size: var(--fs-text); font-weight: 600; color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; }
.gf-meta { font-size: var(--fs-sm); color: var(--gf-text-secondary); }
.gf-chart { position: relative; }
.gf-chart svg { width: 100%; height: 190px; display: block; touch-action: pan-y; }
.gf-chart .gf-cg { stroke: var(--gf-border); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.gf-chart .gf-ct { fill: var(--gf-muted); font-size: var(--fs-xs); font-family: var(--font-body); }
.gf-chart .gf-ca { fill: var(--gf-primary-bg); stroke: none; }
.gf-chart .gf-cl { fill: none; stroke: var(--gf-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gf-chart .gf-cdot { fill: var(--gf-primary); stroke: var(--gf-surface); stroke-width: 2; }
.gf-chart .gf-cx { stroke: var(--gf-text-secondary); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gf-ctip { position: absolute; top: 0; transform: translateX(-50%); background: var(--gf-surface-emphasis); border: 1px solid var(--gf-border); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--gf-text-secondary); pointer-events: none; white-space: nowrap; text-align: center; }
.gf-ctip b { color: var(--gf-text); font-variant-numeric: tabular-nums; }
.gf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gf-vrow { cursor: text; }
.gf-vrow input { width: var(--gf-num-w); padding: 0 var(--sp-2); text-align: right; font-variant-numeric: tabular-nums; }
.gf-vrow .gf-vunit { width: 2.1rem; font-size: var(--fs-sm); color: var(--gf-muted); }
.gf-vrow.gf-sub .gf-title { font-weight: 400; color: var(--gf-text-secondary); padding-left: var(--sp-3); }
select.gf-sel { padding: 0 var(--sp-3); width: 100%; } /* Phase 10.1 (F1): nur das Auswahlfeld – .gf-sel heißt im Uhrzeit-Rad und Kalender „gewählt“ */
.gf-daynav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gf-daylabel { flex: 1; position: relative; background: none; border: 0; color: var(--gf-text); text-align: center; font-weight: 600; font-size: var(--fs-text); min-height: 2.25rem; display: grid; place-items: center; border-radius: var(--r-md); }
.gf-daylabel input { position: absolute; inset: 0; opacity: 0; width: 100%; }
.gf-ib[disabled] { opacity: .35; pointer-events: none; }
.gf-kc { font-family: var(--font-brand); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-nmore { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--gf-border); font-size: var(--fs-ui); }
.gf-nmore div { display: flex; justify-content: space-between; color: var(--gf-text-secondary); }
.gf-nmore b { color: var(--gf-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-amt { display: flex; align-items: center; gap: var(--sp-3); }
.gf-amt input { flex: 0 0 var(--gf-num-w); width: var(--gf-num-w); padding: 0 var(--sp-2); text-align: right; font-variant-numeric: tabular-nums; }
.gf-amt span { color: var(--gf-text-secondary); min-width: 4.5rem; }
.gf-chips.gf-wrap { flex-wrap: wrap; overflow: visible; }
.gf-imgph { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 5rem; border: 1px dashed var(--gf-border); border-radius: var(--r-lg); background: transparent; color: var(--gf-muted); font-size: var(--fs-ui); }
.gf-seg.gf-five { grid-template-columns: repeat(5, 1fr); }
.gf-seg.gf-five button { padding: var(--sp-2) var(--sp-1); font-size: var(--fs-ui); }
.gf-pick-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; padding: 0 var(--sp-3); text-align: left; font-variant-numeric: tabular-nums; }
.gf-pick-btn .gf-icon { color: var(--gf-muted); }
.gf-pback { position: absolute; inset: 0; background: var(--gf-backdrop); opacity: 0; pointer-events: none; transition: opacity var(--t-fade); z-index: 14; }
.gf-pback.gf-on { opacity: 1; pointer-events: auto; }
.gf-picker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--gf-surface); border-top: 1px solid var(--gf-border); border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); padding: 0 var(--sp-4) calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform var(--t-move) var(--ease); }
.gf-picker.gf-on { transform: translateY(0); visibility: visible; }
.gf-picker .gf-sheet-head { padding-inline: 0; }
.gf-wheels { position: relative; display: flex; justify-content: center; align-items: center; gap: var(--sp-2); height: 220px; margin: var(--sp-1) 0 var(--sp-4); }
.gf-wheels .gf-band { position: absolute; left: 12%; right: 12%; top: 88px; height: 44px; border-radius: var(--r-md); background: var(--gf-surface-emphasis); border: 1px solid var(--gf-border); pointer-events: none; }
.gf-wheel { position: relative; width: 5.5rem; height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.gf-wheel::-webkit-scrollbar { display: none; }
.gf-wi { height: 44px; display: grid; place-items: center; scroll-snap-align: center; font-family: var(--font-brand); font-size: 1.5rem; color: var(--gf-muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.gf-wi.gf-sel { color: var(--gf-text); font-size: 1.9rem; }
.gf-colon { font-family: var(--font-brand); font-size: 1.8rem; z-index: 1; }
.gf-pk-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gf-pk-acts.gf-one { grid-template-columns: 1fr; margin-top: var(--sp-3); }
.gf-pk-quick { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gf-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.gf-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); text-align: center; }
.gf-cal .gf-wd { font-size: var(--fs-xs); color: var(--gf-muted); text-transform: uppercase; letter-spacing: var(--ls-caps-sm); padding: var(--sp-1) 0; }
.gf-cal .gf-cd { aspect-ratio: 1; max-height: 2.9rem; border: 0; background: none; border-radius: 50%; font-variant-numeric: tabular-nums; font-size: var(--fs-text); }
.gf-cal .gf-cd.gf-tod { box-shadow: inset 0 0 0 1px var(--gf-primary); color: var(--gf-primary); }
.gf-cal .gf-cd.gf-sel { background: var(--gf-primary); color: var(--gf-on-color); font-weight: 700; }
.gf-device.gf-kb .gf-footer-bar, .gf-device.gf-kb .gf-tabbar { display: none; }
.gf-device.gf-kb .gf-content { padding-bottom: 40vh; }
.gf-ptiles { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.gf-ptile { flex: 1 1 calc((100% - var(--sp-3)) / 2); position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg); border: 1px solid var(--gf-border); background: var(--gf-surface); cursor: pointer; min-width: 0; }
.gf-ptile:active { background: var(--gf-surface-emphasis); }
.gf-ptile .gf-pn { font-weight: 700; font-size: var(--fs-text); overflow-wrap: anywhere; }
.gf-ptile .gf-meta { line-height: var(--lh-text); }
.gf-prow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.gf-prow .gf-meta { min-width: 0; white-space: nowrap; }
.gf-lastd { display: inline-flex; align-items: center; gap: var(--sp-1); }
.gf-icon.gf-xs { width: .8rem; height: .8rem; }
.gf-prow .gf-ib { flex: 0 0 auto; }
.gf-ptile.gf-free { border: 1.5px dashed var(--gf-success-line); background: var(--gf-success-bg); }
.gf-inwrap { position: relative; display: inline-block; width: 100%; max-width: 5.4rem; }
.gf-inwrap input { padding-right: var(--sp-5); padding-left: var(--sp-1); }
.gf-insfx { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: var(--fs-sm); color: var(--gf-muted); pointer-events: none; }
.gf-seg.gf-four { grid-template-columns: repeat(4, 1fr); }
.gf-seg.gf-four button { padding: var(--sp-2) var(--sp-1); font-size: var(--fs-text); }
.gf-gbar { height: 4px; border-radius: var(--r-pill); background: var(--gf-border); margin: var(--sp-1) var(--sp-1) 0; overflow: hidden; }
.gf-gbar span { display: block; height: 100%; background: var(--gf-success); border-radius: var(--r-pill); }
.gf-gbar span.gf-over { background: var(--gf-warning); }
.gf-gl { font-size: var(--fs-xs); color: var(--gf-muted); margin-top: var(--sp-0); font-variant-numeric: tabular-nums; }
.gf-mgroup { background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-lg); margin-top: var(--sp-3); overflow: hidden; }
.gf-mg-head { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-3) var(--sp-2); background: var(--gf-surface-emphasis); }
.gf-mg-head b { font-size: var(--fs-text); }
.gf-mg-head span { font-size: var(--fs-ui); color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; }
.gf-mgroup .gf-row:first-of-type { border-top: 1px solid var(--gf-border); }
.gf-thumb { width: 3.4rem; height: 3.4rem; flex: 0 0 auto; border-radius: var(--r-md); display: grid; place-items: center; background: var(--gf-surface-emphasis); color: var(--gf-muted); border: 1px solid var(--gf-border); }
.gf-rrow { min-height: 4.4rem; }
.gf-chart .gf-cb { fill: var(--gf-primary); opacity: .85; }
.gf-chart .gf-cgoal { stroke: var(--gf-success); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.gf-chart .gf-cavg { fill: none; stroke: var(--gf-text-secondary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gf-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; font-size: var(--fs-sm); color: var(--gf-text-secondary); padding: var(--sp-2) 0 var(--sp-1); }
.gf-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.gf-legend i { display: inline-block; }
.gf-lg-bar { width: .6rem; height: .7rem; border-radius: var(--r-xs); background: var(--gf-primary); }
.gf-lg-avg { width: 1rem; height: 2px; background: var(--gf-text-secondary); }
.gf-lg-goal { width: 1rem; border-top: 2px dashed var(--gf-success); }
.gf-avgt { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.gf-avgt .gf-btile { flex: none; }
.gf-avgt .gf-btile.gf-cur { border-color: var(--gf-primary); }
.gf-tag-home.gf-tile { position: absolute; top: .45rem; right: .45rem; margin: 0; width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%; background: var(--gf-primary); font-size: 0; }
.gf-sp-head { display: flex; align-items: center; gap: var(--sp-3); }
.gf-sp-head .gf-main { flex: 1; min-width: 0; display: grid; }
.gf-sp-head .gf-title { font-weight: 600; }
.gf-card-center { text-align: center; font-weight: 600; font-size: var(--fs-text); }
.gf-tapcard { display: block; width: 100%; text-align: left; }
.gf-tapcard:active { background: var(--gf-surface-emphasis); }
.gf-delta.gf-warn, .gf-nmore b.gf-warn { color: var(--gf-warning); }
.gf-nmore small { color: var(--gf-muted); font-weight: 400; }
.gf-grow { align-items: center; }
.gf-grow .gf-main { display: grid; gap: var(--sp-1); }
.gf-grow input { width: 5rem; padding: 0 var(--sp-2); text-align: right; }
.gf-grow .gf-vunit { width: 2.1rem; font-size: var(--fs-sm); color: var(--gf-muted); }
.gf-gmode { display: inline-flex; width: max-content; border: 1px solid var(--gf-border); border-radius: var(--r-pill); overflow: hidden; }
.gf-gmode button { border: 0; background: none; font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); color: var(--gf-text-secondary); }
.gf-gmode button.gf-on { background: var(--gf-surface-emphasis); color: var(--gf-text); }
.gf-exp .gf-icon { transition: transform var(--t-fade); }
/* Pfeil zum Aufklappen unten mittig in der Karte, knapp am Rand (Christian, 03.10.2026: appweit gleich, Ernährung + Beschreibung) */
.gf-exp-row { display: flex; justify-content: center; margin: var(--sp-0) 0 calc(-1 * var(--sp-3)); }
.gf-exp-row .gf-exp { min-height: var(--gf-btn-s); }
.gf-exp.gf-open .gf-icon { transform: rotate(180deg); }
.gf-chip .gf-icon.gf-xs { display: inline; vertical-align: -1px; }
.gf-chip[disabled] { opacity: .45; }
.gf-mrow .gf-ex-row { padding-right: var(--sp-3); }
.gf-pwwrap { position: relative; }
.gf-pwwrap input { padding-right: 2.8rem; }
.gf-pweye { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border: 0; background: none; color: var(--gf-muted); display: grid; place-items: center; border-radius: var(--r-sm); }
.gf-pweye.gf-on { color: var(--gf-primary); }
.gf-orline { display: flex; align-items: center; gap: var(--sp-3); color: var(--gf-muted); font-size: var(--fs-sm); }
.gf-orline::before, .gf-orline::after { content: ""; flex: 1; border-top: 1px solid var(--gf-border); }
.gf-acc-card { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-1); }
.gf-avatar { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--gf-primary-strong); color: var(--gf-primary); font-family: var(--font-brand); font-weight: 600; font-size: var(--fs-num); border: 1px solid var(--gf-primary); }
.gf-avatar.gf-sm { width: 2.3rem; height: 2.3rem; font-size: var(--fs-text); }
.gf-avatar.gf-off { background: var(--gf-warning-bg); color: var(--gf-warning); border-color: var(--gf-warning); }
.gf-acc-name { font-family: var(--font-brand); font-size: var(--fs-title); font-weight: 600; }
.gf-danger-row .gf-title, .gf-danger-row .gf-lead { color: var(--gf-danger); }
.gf-row[disabled] { opacity: .45; }
.gf-pwshow { font-family: ui-monospace, Consolas, monospace; font-size: var(--fs-text); letter-spacing: var(--ls-tight); background: var(--gf-page-bg); border: 1px solid var(--gf-border); border-radius: var(--r-md); padding: var(--sp-3); text-align: center; word-break: break-all; user-select: all; }
.gf-login { position: absolute; inset: 0; z-index: 30; background: var(--gf-page-bg); overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-5) var(--sp-4); }
.gf-login-in { width: 100%; max-width: 22rem; display: grid; gap: var(--sp-4); }
.gf-logo { display: block; width: 12rem; height: 12rem; max-width: 100%; margin: 0 auto var(--sp-1); border-radius: 22%; box-shadow: 0 10px 30px var(--gf-shadow); }
.gf-login-brand { text-align: center; font-family: var(--font-brand); font-size: var(--fs-brand); font-weight: 600; color: var(--gf-primary); margin-bottom: var(--sp-3); }
.gf-login-brand.gf-sm { font-size: var(--fs-h1); color: var(--gf-text); margin: 0; text-align: left; }
/* Phase 10.1 (Christian 18.10.2026, V2): Anmeldeseite – Logo/Schriftzug größer, Login-Block bleibt an seiner Stelle,
   der gewonnene Platz geht zwischen Schriftzug und Benutzername (unten mehr Innenabstand gleicht die Mitte aus) */
.gf-login-start { padding-bottom: calc(var(--sp-5) + var(--sp-6) + var(--sp-3) - var(--gf-input-h)); } /* Christian 18.10.: Login-Block um eine Feldhöhe tiefer, Logo bleibt */
.gf-login-start .gf-login-brand { font-size: var(--fs-hero); margin-bottom: calc(var(--sp-5) + var(--gf-input-h)); }
.gf-steps { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.gf-steps span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--gf-border); }
.gf-steps span.gf-on { background: var(--gf-primary); }
.gf-unitpick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.gf-uchoice { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-2); border-radius: var(--r-lg); border: 1px solid var(--gf-border); background: var(--gf-surface); }
.gf-uchoice b { font-family: var(--font-brand); font-size: var(--fs-brand); }
.gf-uchoice span { color: var(--gf-text-secondary); font-size: var(--fs-ui); }
.gf-uchoice.gf-on { border-color: var(--gf-success); background: var(--gf-success-bg); }
.gf-btn[disabled] { opacity: .45; }
.gf-toast.gf-err { top: 4.4rem; bottom: auto; transform: translate(-50%, -1rem); background: var(--gf-danger-surface); border: 1.5px solid var(--gf-danger); color: var(--gf-text); font-size: var(--fs-text); font-weight: 600; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl); white-space: normal; text-align: left; z-index: 40; box-shadow: 0 8px 24px var(--gf-shadow); }
.gf-toast.gf-err.gf-on { transform: translate(-50%, 0); }
.gf-toast.gf-err .gf-icon { color: var(--gf-danger); width: 1.3rem; height: 1.3rem; }
.gf-emptybox { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5) var(--sp-4); border: 1px dashed var(--gf-border); border-radius: var(--r-lg); margin: var(--sp-3) 0; color: var(--gf-text-secondary); }
.gf-emptybox .gf-icon { color: var(--gf-muted); width: 2rem; height: 2rem; }
.gf-emptybox b { color: var(--gf-text); font-size: var(--fs-text); }
.gf-emptybox span { font-size: var(--fs-ui); line-height: var(--lh-text); max-width: 18rem; }
.gf-emptybox .gf-btn { margin-top: var(--sp-2); }
.gf-steps-card { display: grid; gap: var(--sp-0); }
.gf-srow-wrap { display: flex; align-items: center; border-top: 1px solid var(--gf-border); }
.gf-srow-wrap .gf-srow { border-top: 0; }
.gf-skipx { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border: 0; background: none; color: var(--gf-muted); display: grid; place-items: center; border-radius: var(--r-sm); }
.gf-chip.gf-sm { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); text-transform: none; letter-spacing: 0; font-weight: 500; }
.gf-srow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); border: 0; border-top: 1px solid var(--gf-border); background: none; text-align: left; font-weight: 600; width: 100%; }
.gf-srow span:nth-child(2) { flex: 1; }
.gf-srow .gf-sck { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--gf-border); display: grid; place-items: center; flex: 0 0 auto; }
.gf-srow.gf-done { color: var(--gf-muted); text-decoration: line-through; }
.gf-srow.gf-done .gf-sck { border-color: var(--gf-success); background: var(--gf-success); color: var(--gf-on-color); }
.gf-bval { display: flex; flex-direction: column; align-items: flex-end; line-height: var(--lh-tight); }
.gf-bval .gf-v { font-family: var(--font-brand); font-size: var(--fs-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.gf-bval .gf-delta { font-size: var(--fs-sm); color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; }
.gf-hint { font-size: var(--fs-sm); color: var(--gf-muted); line-height: var(--lh-text); }
.gf-empty { color: var(--gf-muted); font-size: var(--fs-ui); padding: var(--sp-1) 0; }

/* =====================================================================================
   Phase 05 – Anpassungen für die echte App (nur das technisch Nötige)
   ===================================================================================== */

/* Eingebautes Kennwort-Auge von Edge ausblenden, sonst erscheinen zwei Augen im Feld (password-toggle.js). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Tab-Leiste: im Prototyp <button>, in der App echte Links (Seitenaufrufe). */
a.gf-tab,
a.gf-tab:hover,
a.gf-tab:focus {
  text-decoration: none;
}

a.gf-tab:not(.gf-on):hover {
  color: var(--gf-muted);
}

a.gf-tab.gf-on:hover {
  color: var(--gf-primary);
}

/* Listenzeilen und Buttons als Links (Navigation zu anderen Seiten). */
a.gf-row,
a.gf-row:hover,
a.gf-btn,
a.gf-btn:hover,
a.gf-ib,
a.gf-ib:hover {
  color: inherit;
  text-decoration: none;
}

a.gf-ib {
  color: var(--gf-neutral-action);
}

/* Antippen-Rückmeldung wie bei den Prototyp-Zeilen (button.gf-row:active). */
a.gf-row:active {
  background: var(--gf-surface-emphasis);
}

/* Weitere Prototyp-Buttons, die in der App Links sind (Seitenwechsel): ohne Unterstreichung, Textfarbe
   wie beim Button. :where() hält die Spezifität niedrig, Farbregeln der Klassen (z. B. .gf-chip) gelten weiter. */
a:where(.gf-btile, .gf-card, .gf-chip, .gf-srow, .gf-ptile),
:where(.gf-quick) a {
  color: inherit;
  text-decoration: none;
}

/* Schnell erfassen (Start) und Kacheln/Diagramme (Körper): Optik der Prototyp-Buttons für Links. */
.gf-quick a { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-1); border-radius: var(--r-lg); border: 1px solid var(--gf-border); background: var(--gf-surface); font-size: var(--fs-ui); font-weight: 600; }
.gf-quick a:active { transform: scale(.96); }

/* Zeitraumleiste: im Prototyp Buttons, in der App Links (Zeitraum steht in der Adresse). */
.gf-seg a {
  border: 0;
  background: none;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--gf-text-secondary);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.gf-seg a.gf-on {
  background: var(--gf-surface-emphasis);
  color: var(--gf-text);
}

.gf-seg.gf-five a {
  padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-ui);
}

/* Training: „Pläne“ und „Übungen“ nebeneinander in der Breite der Plan-Kacheln
   (Ergänzung zum Prototyp, Christian 03.10.2026; dort untereinander als .list.navlist). */
.gf-navgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.gf-navgrid > .gf-row { border: 1px solid var(--gf-border); border-radius: var(--r-lg); background: var(--gf-surface); padding: var(--sp-3); gap: var(--sp-2); }

/* Fotos (Christian, 03.10.2026): breites Bild (wie Prototyp .rimg) bzw. Kachel neben den Werten, Auge = Tippen
   vergrößert, Großansicht schließt mit Tipp daneben; Bild in Listen wie Prototyp .thumb (Rezepte). */
.gf-photo { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 12rem; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gf-border); padding: 0; background: var(--gf-surface-emphasis); }
.gf-photo img, .gf-phototile img, .gf-thumb.gf-has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-photo-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
.gf-zoom-ind { position: absolute; right: .4rem; bottom: .4rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--gf-scrim); color: var(--gf-on-photo); pointer-events: none; }
.gf-herorow { display: flex; gap: var(--sp-3); align-items: stretch; }
.gf-herorow > .gf-hero { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.gf-herorow .gf-hero-d { text-align: left; display: flex; align-items: baseline; gap: var(--sp-1); }
.gf-phototile { position: relative; width: 6.2rem; flex: 0 0 auto; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gf-border); padding: 0; background: var(--gf-surface-emphasis); }
/* Bild bestimmt die Höhe nicht mit: die Kachel ist so hoch wie der Werte-Block daneben (Christian, 03.10.2026). */
.gf-phototile img { position: absolute; inset: 0; }
.gf-thumb.gf-has-img { overflow: hidden; }
.gf-zoomview { position: absolute; inset: 0; z-index: 40; background: var(--gf-scrim-strong); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--t-fade); }
.gf-zoomview.gf-on { opacity: 1; pointer-events: auto; }
.gf-zoomview img { max-width: 100%; max-height: 100%; min-height: 0; border-radius: var(--r-md); }
.gf-zoomview img:not(:only-child) { max-height: 62%; }
.gf-zoomtext { width: 100%; max-height: 34%; overflow-y: auto; background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-3); font-size: var(--fs-ui); line-height: var(--lh-text); color: var(--gf-text); }
.gf-zoomtext .gf-zt { white-space: pre-line; }
/* Kleine Überschrift in einer Karte, Stil wie .gf-section-label (Christian, 03.10.2026) */
.gf-card-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--gf-muted); font-weight: 600; margin: 0 0 var(--sp-1); }
.gf-zoomtext:only-child { max-height: 85%; }
/* Beschreibung auf der Übungsseite: max. 3 Zeilen, Pfeil wenn länger (Christian, 03.10.2026) */
.gf-desc { margin-top: var(--sp-3); font-size: var(--fs-ui); line-height: var(--lh-text); color: var(--gf-text-secondary); }
.gf-desc .gf-more-t { white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.gf-desc.gf-open .gf-more-t { display: block; -webkit-line-clamp: unset; line-clamp: none; }
.gf-desc .gf-exp-row { display: none; }
.gf-desc.gf-can-more { cursor: pointer; }
.gf-desc.gf-can-more .gf-exp-row { display: flex; }
/* Symbol-Knopf mit Markierung (z. B. Notiz vorhanden) */

/* Ernährung: Reiter Tag/Verlauf/Rezepte/Zutaten (Prototyp .seg.four button). */
/* Phase 10: Umschalter mit drei Teilen (Körper: Aktuell | Verlauf | Fotobuch), gleiche Höhe wie bei Ernährung */
.gf-seg.gf-three { grid-template-columns: repeat(3, 1fr); }

/* Phase 10: Hauptmenü der Bereiche (Tag/Verlauf/…, Körper, Training) auf Text-Stufe (Christian 12.10.2026) */
.gf-seg.gf-four a, .gf-seg.gf-three a {
  padding: var(--sp-2) var(--sp-1);
  font-size: var(--fs-text);
}

/* Auswahlfeld ohne Wert (Pflichtfeld noch leer). */
.gf-pick-btn .gf-pv.gf-empty-value {
  color: var(--gf-muted);
}

/* ---- Seitenübergänge: Werte wie .view.enter / .behind / .leave im Prototyp ------------ */

@view-transition {
  navigation: auto;
}

/* Tab-Leiste bleibt beim Seitenwechsel stehen. */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--t-fade);
}

html:active-view-transition-type(forward)::view-transition-old(root) {
  animation: var(--t-move) var(--ease) both gf-vt-behind;
}

html:active-view-transition-type(forward)::view-transition-new(root) {
  animation: var(--t-move) var(--ease) both gf-vt-enter;
}

html:active-view-transition-type(back)::view-transition-old(root) {
  z-index: 1;
  animation: var(--t-move) var(--ease) both gf-vt-leave;
}

html:active-view-transition-type(back)::view-transition-new(root) {
  animation: var(--t-move) var(--ease) both gf-vt-unbehind;
}

@keyframes gf-vt-enter { from { transform: translateX(100%); } }
@keyframes gf-vt-behind { to { transform: translateX(-22%); opacity: 0.6; } }
@keyframes gf-vt-leave { to { transform: translateX(100%); } }
@keyframes gf-vt-unbehind { from { transform: translateX(-22%); opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Phase 06: Nährwertscan auf der Zutatseite – vom Scan markierte Felder (unsicher, Grenzwert, fehlt, nicht lesbar) */
.gf-vrow.gf-scan-warn .gf-title { color: var(--gf-warning); }
.gf-vrow.gf-scan-warn input { border-color: var(--gf-warning); }
.gf-vrow .gf-scan-hint { color: var(--gf-warning); white-space: normal; }

/* ---------- Phase 07: Fotobuch (Vorschau vorschau_fotobuch_1–4.png) ---------- */
.gf-fb-list { display: grid; gap: var(--sp-3); }
.gf-fb-day { display: block; padding: var(--sp-3) var(--sp-3) var(--sp-3); }
.gf-fb-dh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gf-fb-dh b { font-size: var(--fs-text); white-space: nowrap; }
.gf-fb-dh span { font-size: var(--fs-sm); color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gf-fb-th { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.gf-fb-ph { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--gf-border); background: var(--gf-surface-emphasis); padding: 0; }
.gf-fb-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-fb-ph i { position: absolute; left: .3rem; bottom: .3rem; max-width: calc(100% - .6rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: var(--fs-xs); background: var(--gf-scrim); color: var(--gf-on-photo); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); }
.gf-fb-more { position: absolute; left: .3rem; top: .3rem; background: var(--gf-primary); color: var(--gf-on-color); font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); }
/* blauer Punkt wie bei den Körperwert-Kacheln („auf Start“), auf Fotos mit dünnem dunklem Saum (Christian 04.10.2026) */
.gf-fb-dot { position: absolute; top: .45rem; right: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gf-primary); box-shadow: 0 0 0 1.5px var(--gf-shadow); }
.gf-fb-note { font-size: var(--fs-sm); color: var(--gf-text-secondary); margin-top: var(--sp-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-fb-prev { display: flex; gap: var(--sp-3); align-items: center; }
.gf-fb-prev img { width: 5.5rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--gf-border); }
.gf-chip.gf-fb-new { border-style: dashed; }
/* Großansicht mit Wischen */
.gf-fb-viewer { position: absolute; inset: 0; z-index: 40; background: var(--gf-photo-bg); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity var(--t-fade); touch-action: pan-y; }
.gf-fb-viewer.gf-on { opacity: 1; pointer-events: auto; }
.gf-fb-vtop { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.gf-fb-vt { flex: 1; min-width: 0; }
.gf-fb-vt b { display: block; font-size: var(--fs-text); }
.gf-fb-vt span { font-size: var(--fs-sm); color: var(--gf-text-secondary); }
.gf-fb-vimg { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--sp-4); }
.gf-fb-vimg img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); user-select: none; -webkit-user-drag: none; }
.gf-fb-dots { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); }
.gf-fb-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--gf-photo-dot); }
.gf-fb-dots i.gf-on { background: var(--gf-photo-dot-on); }
.gf-fb-vval { text-align: center; font-size: var(--fs-ui); color: var(--gf-text-secondary); font-variant-numeric: tabular-nums; }
.gf-fb-vacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
/* Vergleich: Schieberegler / Nebeneinander */
#fb-cmp-wrap[data-mode="slider"] .gf-fb-side, #fb-cmp-wrap[data-mode="side"] .gf-fb-cmp { display: none; }
.gf-fb-cmp { --x: 50%; position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--gf-border); background: var(--gf-photo-bg); touch-action: none; user-select: none; }
.gf-fb-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gf-fb-cmp .gf-fb-b { clip-path: inset(0 0 0 var(--x)); }
.gf-fb-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: var(--gf-on-photo); transform: translateX(-1px); pointer-events: none; }
.gf-fb-knob { position: absolute; top: 50%; left: var(--x); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gf-on-photo); color: var(--gf-on-color); transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px var(--gf-shadow); pointer-events: none; }
.gf-fb-lab { position: absolute; top: .5rem; font-size: var(--fs-xs); background: var(--gf-scrim); color: var(--gf-on-photo); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); pointer-events: none; }
.gf-fb-la { left: .5rem; }
.gf-fb-lb { right: .5rem; }
.gf-fb-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.gf-fb-side figure { margin: 0; }
.gf-fb-side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--gf-border); display: block; }
.gf-fb-side figcaption { font-size: var(--fs-sm); color: var(--gf-text-secondary); text-align: center; margin-top: var(--sp-1); }
.gf-fb-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.gf-fb-pick button { padding: 0; border: 0; background: none; display: grid; gap: var(--sp-0); }
.gf-fb-pick img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-sm); border: 2px solid transparent; display: block; }
.gf-fb-pick .gf-on img { border-color: var(--gf-primary); }
.gf-fb-pick span { font-size: var(--fs-xs); color: var(--gf-muted); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Phase 08 – Auswertungen (Christian, 06./07.10.2026) ---------- */
/* Schmale Umschaltleiste (Zeitraum, Kennzahl): kleinere Schrift, Punkte nach Textbreite gleichmäßig verteilt */
.gf-seg.gf-slim { display: flex; height: var(--gf-seg-slim-h); }
.gf-seg.gf-slim a, .gf-seg.gf-slim button { flex: 1 1 auto; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-1); white-space: nowrap; }
/* Übungsverlauf: „Vergleichen mit“ und Diagrammkarte */
.gf-cmp { margin: var(--sp-3) 0 var(--sp-2); }
/* Phase 10: „Vergleichen mit“ wie eine Abschnittsüberschrift (.gf-section-label), nur mit weniger Abstand oben (Christian 12.10.2026) */
.gf-cmp-l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--gf-muted); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
.gf-chartcard { padding: var(--sp-3) var(--sp-2) var(--sp-1); margin-top: var(--sp-2); }
.gf-chartttl { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--gf-text-secondary); padding: var(--sp-0) var(--sp-2) var(--sp-1); }
.gf-chartttl.gf-second { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--gf-border); }
.gf-chart-hint { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--gf-text-secondary); background: var(--gf-surface-emphasis); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); margin: var(--sp-1); }
.gf-chart-hint .gf-icon { color: var(--gf-muted); margin-top: 1px; }
.gf-chart-hint b { color: var(--gf-text); }
/* Liniendiagramm: Marken an der Zeitachse, Punkte bei wenigen Werten */
.gf-chart .gf-cv { stroke: var(--gf-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gf-chart .gf-pt { fill: var(--gf-primary); stroke: var(--gf-surface); stroke-width: 1.5; }
/* Text-Box (Notiz, Zubereitung): Kopfzeile mit Stift, 2 Zeilen + Pfeil, leer = „Noch keine …“ */
.gf-desc.gf-note .gf-more-t { -webkit-line-clamp: 2; line-clamp: 2; }
.gf-desc.gf-note.gf-open .gf-more-t { -webkit-line-clamp: unset; line-clamp: none; }
.gf-note-empty { color: var(--gf-muted); font-style: italic; }
.gf-desc.gf-note-leer { cursor: pointer; }
.gf-boxhead { display: flex; align-items: center; justify-content: space-between; margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) var(--sp-1) 0; }
.gf-boxhead .gf-card-label { margin: 0; }
.gf-boxhead .gf-ib { color: var(--gf-primary); }
.gf-notebox { margin: var(--sp-1) 0 var(--sp-3); }
/* Training: Notiz und Beschreibung innerhalb der aufgeklappten Übung */
.gf-ex-body .gf-desc { margin-top: 0; background: var(--gf-surface-emphasis); border-color: transparent; padding: var(--sp-3) var(--sp-3); }
.gf-ex-body .gf-desc .gf-exp-row { margin-bottom: calc(-1 * var(--sp-2)); }
/* Knopfleiste der Übung: blau umrandet = Inhalt vorhanden, blau hinterlegt = gerade offen */
.gf-ib.gf-act-on { background: var(--gf-primary-strong); color: var(--gf-primary); border-color: var(--gf-primary); }
/* Körper-Tab, Ansicht „Diagramme“ als Auswertung (Phase 08, Christian 07.10.2026) */
.gf-cmp.gf-kw-cmp { margin-bottom: var(--sp-3); }
.gf-kw-card { margin-bottom: var(--sp-3); }
.gf-kw-card[hidden] { display: none; }
a.gf-kw-head { padding: var(--sp-0) var(--sp-2) var(--sp-1); color: inherit; text-decoration: none; }
/* Ernährung · Verlauf (Phase 08, Christian 07.10.2026): Zielband, Balken über Ziel, Makro-Anteile, Tagesliste */
.gf-chart .gf-cband { fill: var(--gf-success); opacity: .13; }
.gf-chart .gf-cbw { fill: var(--gf-warning); }
.gf-lg-band { width: 1rem; height: .7rem; border-radius: var(--r-xs); background: var(--gf-success-band); }
.gf-lg-barw { width: .6rem; height: .7rem; border-radius: var(--r-xs); background: var(--gf-warning); }
.gf-macrocard { padding: var(--sp-3); margin-top: var(--sp-3); } /* Phase 10.1: steht direkt unter dem Diagramm */
.gf-macrocard .gf-card-label { margin: 0; }
.gf-macro { display: flex; height: .7rem; border-radius: var(--r-pill); overflow: hidden; margin: var(--sp-2) 0 var(--sp-2); }
.gf-macro i { display: block; height: 100%; }
.gf-mleg { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--gf-text-secondary); }
.gf-mleg span { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.gf-mleg b { color: var(--gf-text); font-variant-numeric: tabular-nums; }
.gf-mleg i { width: .6rem; height: .6rem; border-radius: var(--r-xs); display: inline-block; }
.gf-c-p { background: var(--gf-primary); }
.gf-c-k { background: var(--gf-c-kh); }
.gf-c-f { background: var(--gf-c-fat); }
.gf-btile .gf-dt.gf-gkg { color: var(--gf-primary); font-weight: 600; }
.gf-wdot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gf-warning); flex: 0 0 auto; margin-right: var(--sp-1); }
/* Chip-Leisten (Phase 08, Christian 08.10.2026): eine Zeile zum Wischen, Pfeil nur wenn in die Richtung noch Chips kommen (site.js initChips).
   Auswahlfelder in Formularen (gf-chips gf-wrap) brechen weiter um. */
.gf-chipbar { position: relative; --gf-fade: var(--gf-page-bg); }
.gf-sheet .gf-chipbar, .gf-card .gf-chipbar { --gf-fade: var(--gf-surface); }
.gf-chipbar > .gf-chips { margin: 0; scroll-behavior: smooth; }
.gf-chipnav { position: absolute; top: 0; bottom: .2rem; width: 2.2rem; display: flex; align-items: center; border: 0; padding: 0; color: var(--gf-text-secondary); cursor: pointer; z-index: 1; }
.gf-chipnav[hidden] { display: none; }
.gf-chipnav.gf-l { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--gf-fade) 45%, transparent); }
.gf-chipnav.gf-r { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--gf-fade) 45%, transparent); }
/* Löschen-Zeile im Kasten (Mein Konto, Benutzerverwaltung): Rahmen und Füllung rot wie „Abmelden“ (Phase 08, Christian 08.10.2026) */
.gf-list.gf-danger-list { background: var(--gf-danger-bg); border-color: var(--gf-danger-line); }

/* Phase 10 (Christian 11.10.2026): Umschalter immer gleich hoch, egal wie viele Teile (vorher 45/43/41/39 px je nach Schrift).
   Die Schrift darf bei vielen Teilen kleiner sein, die Höhe kommt nur aus --gf-seg-h bzw. --gf-seg-slim-h.
   Steht bewusst am Ende, damit es die Innenabstände der einzelnen Varianten oben überschreibt. */
.gf-seg a, .gf-seg button,
.gf-seg.gf-three a, .gf-seg.gf-four a, .gf-seg.gf-four button, .gf-seg.gf-five a, .gf-seg.gf-five button,
.gf-seg.gf-slim a, .gf-seg.gf-slim button { display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }

/* =====================================================================================
   Phase 10.1 (Christian 12.10.2026): Hilfsklassen statt Inline-Styles (style="…").
   Abstände nur aus der Skala --sp-*; Zahl = Stufe --sp-n (mt = oben, mb = unten), n = negativ, none = 0.
   Stehen bewusst am Ende der Datei, damit sie wie vorher die Inline-Angaben Vorrang vor den Grundregeln haben.
   Inline bleiben nur Werte, die erst zur Laufzeit feststehen (Balkenbreiten, Diagrammhöhe).
   ===================================================================================== */
.gf-m-none { margin: 0; }
.gf-mt-none { margin-top: 0; }
.gf-mt-0 { margin-top: var(--sp-0); }
.gf-mt-1 { margin-top: var(--sp-1); }
.gf-mt-2 { margin-top: var(--sp-2); }
.gf-mt-3 { margin-top: var(--sp-3); }
.gf-mt-4 { margin-top: var(--sp-4); }
.gf-mt-5 { margin-top: var(--sp-5); }
.gf-mt-n1 { margin-top: calc(-1 * var(--sp-1)); }
.gf-mt-n2 { margin-top: calc(-1 * var(--sp-2)); }
.gf-mb-none { margin-bottom: 0; }
.gf-mb-2 { margin-bottom: var(--sp-2); }
.gf-mb-3 { margin-bottom: var(--sp-3); }
.gf-mb-4 { margin-bottom: var(--sp-4); }
.gf-p-3 { padding: var(--sp-3); }
.gf-p-4 { padding: var(--sp-4); }
.gf-center { text-align: center; }
.gf-chips.gf-center { justify-content: center; }
.gf-warn { color: var(--gf-warning); }
.gf-text-2 { color: var(--gf-text-secondary); }
.gf-border-danger { border-color: var(--gf-danger); }
.gf-dashed { border-style: dashed; }
.gf-hrow { display: flex; align-items: center; gap: var(--sp-3); }   /* Symbol + Text nebeneinander (Withings) */
.gf-split { display: flex; justify-content: space-between; align-items: center; }
.gf-stack { display: grid; gap: var(--sp-3); }
.gf-flex1 { flex: 1; }
.gf-spacer { width: var(--sp-3); }                                    /* Platzhalter statt Verschiebe-Griff (Stammdaten) */
.gf-row-check { min-height: 3.4rem; }                                 /* Häkchen-Zeilen in Listen = normale Zeilenhöhe (vorher 3,2 bzw. 3,6 rem) */
.gf-tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gf-prewrap { white-space: pre-wrap; word-break: break-word; }
.gf-icon.gf-inl { display: inline; }                                  /* Symbol im Fließtext */
.gf-icon.gf-xs.gf-inl { vertical-align: -2px; }
.gf-icon.gf-sm.gf-inl { vertical-align: -3px; }
.gf-lead.gf-warn { color: var(--gf-warning); }                         /* gegen .gf-row .gf-lead (laufendes Training in der Liste) */
.gf-meta.gf-warn { color: var(--gf-warning); }                         /* Phase 10.1 (F2): gegen .gf-row .gf-meta (Nährwertscan-Testseite) */