/* [data-theme="light"]: helle Werte auch unter einem dunklen , z. B. für das Teilen-Bild (js/22-share.js). */ :root, [data-theme="light"] { /* Farben */ --accent: #8B2942; --accent-mid: #B97F8E; --accent-light: #DCBFC6; --page: #FAFAF9; --card: #FFFFFF; --border: #E7E5E4; --text: #1C1917; --text-2: #57534E; --text-3: #78716C; --dark-page: #0C0C0D; --dark-card: #1A1A1C; --dark-text: #FAFAF9; --dark-text-2: #A8A29E; --champagne: #E8DCC8; --error-color: #B91C1C; --error-bg: #FFF0ED; --warning-color: #92400E; --warning-bg: #FFF6E5; /* Abstände */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; /* Radien */ --radius-card: 12px; --radius-button: 10px; --radius-pill: 999px; --radius-progress: 3px; --radius-sheet: 16px; /* Typografie */ --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-size-label: 11px; --font-size-error: 12px; --font-size-list: 13px; --font-size-value: 15px; --font-size-section: 13px; --font-size-hero: 30px; --font-size-tab-root: 24px; --font-size-subscreen: 17px; /* 11 px wie alle übrigen Beschriftungen (vorher 10 px, Stand 28.09.2026: kleiner ist schwer lesbar). */ --font-size-tab: 11px; /* Zeilenabstand immer als feste Zahl, nie «normal» (Stand 28.09.2026): «normal» nimmt die Masse der Schrift auf dem Gerät (Segoe UI unter Windows 1.33, SF Pro auf dem iPhone rund 1.2, DejaVu Sans unter Linux 1.16). Grundwert für Text 1.35 (so wie bisher unter Windows), Eingabefelder und Auswahlfelder 1.3 wie Knöpfe und Pills. */ --line-height-text: 1.35; --line-height-control: 1.3; /* Balken und Icons */ --progress-height: 5px; --progress-height-small: 3px; --icon-size: 18px; --control-height: 44px; --pill-height: 32px; --quantity-field-min-width: 60px; /* Breite Bildschirme (ab 1024 px): Breite der linken Spalte bei zwei Spalten (Coach, Labor, Ernährung). */ --split-list-width: calc(var(--control-height) * 9); --viewport-bottom-offset: 0px; --tab-bar-height: calc(var(--control-height) + var(--space-2) + max(var(--space-2), env(safe-area-inset-bottom)) + var(--space-2)); --tab-bar-max-width: 560px; --tab-bar-surface: color-mix(in srgb, var(--card) 72%, transparent); --tab-bar-active: color-mix(in srgb, var(--accent) 10%, transparent); --tab-bar-clearance: calc(var(--tab-bar-height) + var(--viewport-bottom-offset)); --workout-rest-timer-height: calc(var(--control-height) + var(--space-4)); } .ui-card { padding: var(--space-3); color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); } .ui-progress { width: 100%; height: var(--progress-height); overflow: hidden; background: var(--border); border-radius: var(--radius-progress); } .ui-progress--small { height: var(--progress-height-small); } .ui-progress__fill { width: var(--progress-value, 0%); height: 100%; background: var(--accent); border-radius: inherit; } .ui-list-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: var(--space-3) 0; color: var(--text); font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system); border-bottom: 1px solid var(--border); } /* Beschriftungen in Pills und Knöpfen dürfen umbrechen (lange Namen, Französisch, Italienisch): Zeilenabstand 1.3 und Innenabstand oben und unten, damit ein zweizeiliger Text nicht an den Rand stösst; die Mindesthöhe bleibt. */ .ui-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--pill-height); padding: var(--space-1) var(--space-3); color: var(--text-2); font: var(--font-weight-regular) var(--font-size-list) / 1.3 var(--font-system); text-align: center; background: var(--page); border: 0; border-radius: var(--radius-pill); } .ui-pill.is-active, .ui-pill[aria-pressed="true"] { color: var(--card); background: var(--accent); } .ui-metric-tile { display: grid; gap: var(--space-1); padding: var(--space-3); color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); } .ui-metric-tile__label { color: var(--text-3); font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system); } .ui-metric-tile__value { color: var(--text); font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system); } /* Heldenzahl (Stand 28.09.2026, docs/DESIGN-SYSTEM.md «Heldenzahl»): höchstens eine je Tab-Screen, in Body je Ansicht. Die font-Kurzform setzt die Ziffernart zurück, darum steht tabular-nums danach. Die Heldenzahl in Ernährung setzt ihre Grösse in css/nutrition.css und bekommt hier die tabellarischen Ziffern. */ .ui-hero-number { color: var(--text); font: var(--font-weight-medium) var(--font-size-hero) / 1.2 var(--font-system); font-variant-numeric: tabular-nums; } .nutrition-calories__value { font-variant-numeric: tabular-nums; } .ui-primary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-4); color: var(--card); font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system); text-align: center; background: var(--accent); border: 0; border-radius: var(--radius-button); cursor: pointer; }