/* Tracking Coach — one design system for browser and installed PWA. */
:root { color-scheme:dark; --bg:#101311; --surface:#191e1a; --surface-2:#222923; --text:#f1f4ee; --muted:#a8b4aa; --line:#343d35; --accent:#bcf27a; --accent-ink:#18220e; --error:#ffaaa0; --protein:#c5a5ff; --carbs:#eac471; --fat:#79bde7; --mint:var(--accent); --mint-strong:var(--accent); --coral:var(--protein); --gold:var(--carbs); --blue:var(--fat); --shadow:0 12px 35px #0000000c; --radius:22px; }
:root[data-theme=light] { color-scheme:light; --bg:#f3f5ef; --surface:#fff; --surface-2:#eef2e9; --text:#202b21; --muted:#5d6c60; --line:#dce3d6; --accent:#4d761d; --accent-ink:#fff; --error:#a33428; --protein:#8756b8; --carbs:#9d7118; --fat:#367fae; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button { color:inherit; }
button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline-offset:1px; }
a { color:var(--accent); text-underline-offset:4px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(30px,3.1vw,46px); line-height:1.13; letter-spacing:-1.7px; font-weight:700; margin-bottom:12px; }
h2 { font-size:23px; line-height:1.3; letter-spacing:-.65px; margin-bottom:8px; }
h3 { font-size:18px; line-height:1.4; margin-bottom:6px; }
p { margin-bottom:16px; }
small { font-size:13px; }
strong,b { font-weight:650; }
img,svg { max-width:100%; }
.icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.icon-sm { width:18px; height:18px; }.icon-lg { width:32px; height:32px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.muted,.section-description,.insight-description,.manual-hint,.hero-text,.performance-intro,.calendar-help,.modal-intro { color:var(--muted); }
.section-kicker,.eyebrow,.tools-label { color:var(--muted); font-size:11px; line-height:1.5; letter-spacing:1.8px; font-weight:750; margin-bottom:9px; }
.button,.today-button,.result-add,.theme-toggle,.exercise-library-toggle { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 17px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); font-size:14px; font-weight:650; text-decoration:none; transition:background .15s,transform .15s; }
.button:hover,.today-button:hover,.result-add:hover,.theme-toggle:hover { background:var(--line); }
.button-primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.button-primary:hover { background:var(--accent); filter:brightness(1.07); }
.button:active,.view-tab:active { transform:translateY(1px); }
.button-ghost { background:transparent; }
.link-button,.back-button { border:0; background:none; color:var(--accent); min-height:44px; padding:8px 0; font-weight:650; font-size:14px; display:inline-flex; align-items:center; gap:7px; text-align:left; }
.circle-button,.icon-button,.action-icon-button,.modal-close { width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; }
.circle-button { font-size:26px; }.icon-button:hover,.modal-close:hover { color:var(--text); background:var(--surface-2); }
.inline-actions,.top-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.app-shell { padding-left:232px; }
.topbar { min-height:93px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 40px; border-bottom:1px solid var(--line); }
.brand { position:fixed; top:30px; left:25px; display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; z-index:20; width:185px; }
.brand-mark { width:37px; height:37px; border-radius:11px; background:var(--accent); display:flex; align-items:center; justify-content:center; padding:5px; flex-shrink:0; }
.brand-mark svg { width:29px; stroke:var(--accent-ink); stroke-width:2.8; fill:none; }
.brand-copy strong { font-size:16px; letter-spacing:-.6px; display:block; }
.brand-copy small { font-size:8px; letter-spacing:1.6px; color:var(--muted); display:block; }
.view-tabs { position:fixed; left:0; top:0; bottom:0; width:232px; display:flex; flex-direction:column; gap:9px; padding:136px 18px 30px; background:var(--surface); border-right:1px solid var(--line); z-index:10; }
.view-tabs:after { content:"KLEINE SCHRITTE.\A ECHTER FORTSCHRITT."; white-space:pre; color:var(--muted); line-height:1.8; letter-spacing:1.5px; font-size:9px; position:absolute; bottom:30px; left:28px; }
.view-tab { display:flex; align-items:center; gap:14px; border:1px solid transparent; border-radius:13px; padding:15px; min-height:54px; background:transparent; color:var(--muted); font-weight:600; text-align:left; }
.view-tab:hover { background:var(--surface-2); color:var(--text); }
.view-tab.active { background:var(--accent); color:var(--accent-ink); }
.sync-status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.sync-status:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sync-status.error,.sync-status.locked { color:var(--error); }.sync-status.error:before,.sync-status.locked:before { background:var(--error); }
.sync-status.loading:before { background:var(--carbs); }
.sync-notice { background:var(--surface-2); border:1px solid var(--error); border-radius:16px; padding:20px; margin-bottom:24px; }
.sync-notice .inline-actions { margin-top:10px; }
.theme-toggle-label,#settingsBtn .button-label { display:none; }.theme-toggle,#settingsBtn { padding:10px 13px; }
.pdf-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; }
.page-content { max-width:1660px; margin:auto; padding:34px 40px 54px; }
.hero { display:flex; gap:24px; align-items:center; justify-content:space-between; margin:3px 0 28px; }
.hero-copy { max-width:710px; }.hero-text { margin-bottom:0; font-size:16px; }
.hero-visual,.mobile-day-bar { display:none; }
.date-control { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.date-display { min-width:154px; text-align:center; }.date-display strong,.date-label { display:none; }
.date-display input { width:157px; min-width:0; font-size:14px; padding:9px; background:var(--surface); }
.date-control .today-button { display:none; }
.view-panel { min-width:0; }.view-intro { margin-bottom:24px; }.view-intro h2 { font-size:28px; }
.back-button { margin-bottom:10px; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; min-width:0; box-shadow:var(--shadow); }
.section-heading,.preview-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:21px; }
.section-heading h2 { margin-bottom:0; }.section-heading p.section-description { margin:10px 0 0; }
.preview-heading { font-size:14px; font-weight:650; margin:20px 0 14px; }.preview-heading small { color:var(--muted); font-weight:400; }
.entry-count,.source-pill,.nutrient-count,.data-type,.selected-food-source { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; font-size:11px; font-weight:650; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); }
.home-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }.home-actions p { color:var(--muted); margin:0; font-size:14px; max-width:570px; }
.home-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr); gap:22px; }
#homeBalance>.panel,#homeWater>.panel { height:100%; }
.balance-panel { position:relative; }
.balance-panel .section-heading { margin-bottom:18px; }
.calorie-ring { width:220px; height:220px; border-radius:50%; padding:12px; margin:12px auto 24px; display:grid; place-items:center; background:conic-gradient(var(--accent) var(--progress,0%),var(--surface-2) 0); }
.calorie-ring-inner { background:var(--surface); border-radius:50%; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.calorie-ring-inner strong { font-size:46px; font-weight:650; line-height:1.2; letter-spacing:-2px; }.calorie-ring-inner span { font-size:12px; color:var(--muted); }
.calorie-summary { display:flex; justify-content:center; gap:26px; margin-bottom:26px; }
.calorie-summary>div { display:flex; flex-direction:column; text-align:center; }
.calorie-summary strong { font-size:20px; }.calorie-summary span { font-size:12px; color:var(--muted); }
.calorie-remaining.negative,.calorie-summary .over-goal { color:var(--error); }
.macro-list { display:grid; grid-template-columns:1fr 1fr; gap:19px 25px; }
.macro-row-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:7px; margin-bottom:8px; font-size:13px; }
.macro-label { display:flex; align-items:center; gap:6px; }.macro-amount { font-weight:650; }.macro-amount>span { color:var(--muted); font-size:11px; }
.macro-dot { width:6px; height:6px; border-radius:50%; }.macro-dot.protein,.progress-fill.protein { background:var(--protein); }.macro-dot.carbs,.progress-fill.carbs { background:var(--carbs); }.macro-dot.fat,.progress-fill.fat { background:var(--fat); }.macro-dot.fiber,.progress-fill.fiber { background:var(--accent); }
.progress-track,.water-track { height:6px; background:var(--surface-2); border-radius:10px; overflow:hidden; }.progress-fill,.water-progress { height:100%; border-radius:10px; transition:width .2s; }.water-progress { background:var(--fat); }
.home-training { position:relative; min-height:480px; overflow:hidden; border-radius:var(--radius); background:#1b211e; border:1px solid var(--line); color:#fff; display:flex; align-items:flex-end; }
.home-training>img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.65); }
.home-training:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 10%,#0d140fcc 65%,#0d140f 100%); }
.home-training>div { position:relative; z-index:1; padding:29px; width:100%; }.home-training h2 { font-size:30px; max-width:300px; }.home-training p { color:#d3dfd3; font-size:14px; }.home-training .section-kicker { color:#c5f891; font-size:10px; }
.activity-row { width:100%; display:flex; align-items:center; gap:14px; padding:17px 0; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; font-size:14px; }.activity-row:last-child { border-bottom:0; }.activity-row>span:nth-child(2) { flex:1; }.activity-row small { display:block; font-size:12px; color:var(--muted); }.activity-row b { margin-left:auto; }.activity-row b small { display:inline; }.activity-icon { display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; width:42px; height:42px; color:var(--accent); }
.empty-state,.search-empty,.log-empty,.training-summary-empty { padding:28px 12px; text-align:center; color:var(--muted); }.empty-state h3,.search-empty strong,.log-empty strong { color:var(--text); }.empty-state p { max-width:370px; margin:8px auto; font-size:14px; }.empty-symbol { display:grid; place-items:center; width:56px; height:56px; border:1px dashed var(--line); border-radius:50%; margin:10px auto 20px; color:var(--accent); font-size:24px; }.compact { padding:20px 0; text-align:left; font-size:14px; }
.water-overview { display:flex; align-items:center; gap:15px; margin:14px 0 22px; }.water-overview>div { display:flex; flex-direction:column; }.water-overview strong { font-size:38px; letter-spacing:-1px; line-height:1.3; }.water-overview span { color:var(--muted); font-size:12px; }.water-overview .water-icon { color:var(--fat); }.water-visual-card,.water-glasses,.water-note,.water-panel>.insight-description { display:none; }
.water-quick-add { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:22px 0 18px; }.water-quick-add button { min-height:42px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); font-size:13px; }.water-quick-add button:hover { border-color:var(--fat); }.water-custom-form { display:flex; align-items:end; gap:12px; }.water-custom-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; max-width:200px; align-items:center; }.water-custom-field span { grid-column:1/-1; font-size:12px; color:var(--muted); }.water-custom-field input { width:100%; }.water-custom-field b { font-size:12px; color:var(--muted); }.water-reset { color:var(--muted); font-size:12px; margin-top:4px; }
.recovery-panel { display:flex; align-items:center; gap:25px; margin-top:22px; }.recovery-panel>div { flex:1; }.recovery-panel p { font-size:13px; color:var(--muted); margin:0; }.recovery-panel form { display:flex; align-items:end; gap:12px; }.recovery-panel input { max-width:170px; }
input,select,textarea { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 12px; min-height:46px; max-width:100%; width:100%; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.7; }textarea { resize:vertical; }
.form-field,.weight-field { display:flex; flex-direction:column; gap:7px; min-width:0; }.form-field>span,.weight-field>span { font-size:13px; font-weight:550; color:var(--muted); }.form-field small { color:var(--muted); font-size:12px; }.form-grid { display:grid; gap:18px; }.two-columns { grid-template-columns:1fr 1fr; }.full-width { grid-column:1/-1; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; }.main-column,.sidebar { display:flex; flex-direction:column; gap:24px; min-width:0; }.nutrition-feature { display:none; }.source-pill { display:none; }.search-form { display:flex; gap:8px; flex-wrap:wrap; }.search-box { display:flex; align-items:center; gap:9px; flex:1 1 250px; position:relative; }.search-box .search-icon { position:absolute; left:13px; color:var(--muted); }.search-box input { padding-left:42px; }.search-box kbd { display:none; }.source-select-wrap { flex:1 1 160px; }.meal-preference { display:flex; justify-content:space-between; gap:12px; margin:22px 0; align-items:center; }.meal-preference-copy strong { display:block; font-size:14px; }.meal-preference-copy .tools-label { display:none; }.meal-preference-field { max-width:220px; }.search-tools { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }.search-tools>.tools-label { display:none; }.quick-tags { display:flex; flex-wrap:wrap; gap:7px; }.quick-tag { min-height:40px; padding:6px 12px; border:1px solid var(--line); border-radius:30px; color:var(--muted); background:transparent; font-size:12px; }.quick-tag svg { display:none; }.frequent-foods { margin-top:14px; }.frequent-foods:empty { display:none; }.frequent-food-title { font-size:12px; color:var(--muted); }.frequent-food-list { display:flex; flex-wrap:wrap; gap:7px; }.frequent-food-button { background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:10px; min-height:44px; padding:8px 10px; text-align:left; font-size:12px; }.frequent-food-button small { color:var(--muted); display:block; font-size:10px; }
.search-status { margin-top:14px; color:var(--muted); font-size:13px; }.search-status:empty { display:none; }.search-status.error { color:var(--error); }.search-empty { display:flex; align-items:center; gap:18px; text-align:left; padding:24px 0 0; }.search-empty p { font-size:14px; margin:3px 0; }.result-list { display:grid; gap:10px; margin-top:17px; max-height:610px; overflow-y:auto; }.food-result { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; }.food-result-main { flex:1; min-width:0; }.food-result h3 { font-size:15px; overflow-wrap:anywhere; }.food-result p { font-size:12px; color:var(--muted); margin:3px 0; }.result-title-line .data-type { font-size:10px; padding:2px 6px; }.result-kcal { text-align:right; font-size:19px; }.result-kcal small { display:block; font-size:10px; color:var(--muted); }.result-add { font-size:12px; padding:8px; }.result-add span { display:none; }
.meal-log-filter-bar { display:flex; justify-content:space-between; align-items:end; gap:15px; margin-bottom:22px; }.meal-log-filter { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); }.meal-group { margin-top:20px; }.meal-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line); }.meal-heading h3 { font-size:15px; display:flex; align-items:center; gap:9px; margin:0; }.meal-heading>span { font-size:13px; color:var(--muted); }.log-entry { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); }.log-entry-main { flex:1; min-width:0; }.log-entry h4,.entry-name { font-size:15px; margin:0; overflow-wrap:anywhere; }.log-entry p,.entry-meta { font-size:12px; color:var(--muted); margin:3px 0; }.entry-macros { font-size:11px; color:var(--muted); display:flex; gap:9px; flex-wrap:wrap; }.entry-calories { font-size:17px; font-weight:650; }.entry-calories small { display:block; color:var(--muted); font-size:10px; }.entry-actions { display:flex; gap:4px; }.entry-actions .icon-button { width:36px; min-height:44px; border:0; }.entry-kcal { white-space:nowrap; }
.nutrient-groups { display:grid; gap:12px; }.nutrient-group { border-top:1px solid var(--line); }.nutrient-group summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--muted); font-size:13px; font-weight:650; }.nutrient-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:12px; }.nutrient-name { color:var(--muted); }.nutrient-name small { display:none; }.nutrient-value { white-space:nowrap; }.nutrient-empty { font-size:13px; color:var(--muted); }.privacy-card { padding:20px; font-size:13px; color:var(--muted); }.privacy-card strong { color:var(--text); }.privacy-card p { margin-top:8px; }.app-footer,.site-footer { color:var(--muted); font-size:11px; margin-top:30px; }.footer-links { display:flex; gap:12px; }
.progress-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:22px; margin-bottom:22px; }.progress-grid+.panel { margin-bottom:22px; }.week-summary strong { font-size:32px; letter-spacing:-1px; }.week-summary>span { display:block; color:var(--muted); font-size:12px; }.week-chart { display:flex; height:184px; align-items:flex-end; gap:14px; margin:20px 0 14px; }.week-bar-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; font-size:12px; }.week-bar-track { height:130px; width:100%; display:flex; align-items:flex-end; background:var(--surface-2); border-radius:5px; overflow:hidden; }.week-bar-fill { width:100%; background:var(--accent); opacity:.5; border-radius:5px; }.week-bar-item.current .week-bar-fill { opacity:1; }.week-bar-item>span { color:var(--muted); margin-top:6px; }.week-bar-item>small { font-size:10px; height:17px; }.week-legend { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }.week-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }.week-stat { padding:10px; background:var(--surface-2); border-radius:10px; }.week-stat>span { display:block; font-size:10px; color:var(--muted); }.week-stat strong { font-size:16px; }.week-stat small { font-size:10px; color:var(--muted); }.week-table-header,.week-table-row { display:grid; grid-template-columns:1.4fr .8fr .9fr .9fr .9fr; gap:8px; padding:10px 0; font-size:12px; border-bottom:1px solid var(--line); }.week-table-header { font-size:10px; color:var(--muted); }.week-table-row small { display:block; font-size:9px; color:var(--muted); }.week-table-row strong { font-size:11px; }.weight-cell small { font-size:9px; }
.weight-form { display:grid; gap:14px; }.weight-field>div { display:flex; align-items:center; gap:9px; }.weight-latest { text-align:right; }.weight-latest strong { display:block; font-size:25px; }.weight-latest span { color:var(--muted); font-size:11px; }.weight-history { margin-top:17px; }.weight-history-item { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }.weight-history-item span,.weight-history-item small { display:block; font-size:12px; color:var(--muted); }.trend-chart { display:block; width:100%; max-height:260px; margin:18px 0; }.trend-chart circle { fill:var(--accent); }.trend-chart text { fill:var(--muted); font-size:12px; }.chart-grid { stroke:var(--line); stroke-dasharray:4 4; }#trainingTrend { margin-top:30px; }#trainingTrend p,#weightTrend>p { font-size:13px; color:var(--muted); }
.calendar-disclosure>summary { cursor:pointer; font-weight:650; }.calendar-disclosure .view-intro { display:none; }.calendar-disclosure .panel { border:0; padding:22px 0 0; box-shadow:none; }.calendar-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }.calendar-toolbar strong { font-size:14px; }.calendar-legend { display:flex; gap:14px; margin:15px 0; font-size:11px; color:var(--muted); }.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }.calendar-weekdays { color:var(--muted); font-size:12px; text-align:center; margin-bottom:9px; }.calendar-day { padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); min-height:90px; text-align:left; min-width:0; overflow:hidden; }.calendar-day.selected,.calendar-day.is-selected { border-color:var(--accent); background:var(--surface-2); }.calendar-day.outside-month { opacity:.35; }.calendar-day-number { font-size:14px; font-weight:650; }.calendar-day-today { color:var(--accent); }.calendar-day-metrics,.calendar-day-content { font-size:10px; color:var(--muted); }.calendar-day-metrics span,.calendar-day-content span { display:block; }.calendar-day small { font-size:9px; display:block; color:var(--muted); }.calendar-day strong { display:block; font-size:11px; }.calendar-help { font-size:12px; margin:15px 0 0; }
.training-layout { display:flex; flex-direction:column-reverse; gap:22px; }.training-type-hint { display:none; }.exercise-library-intro,.exercise-library-status,.exercise-library-empty { color:var(--muted); font-size:13px; }.exercise-filter-summary { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }.exercise-group-heading { grid-column:1/-1; display:flex; justify-content:space-between; margin-top:12px; font-size:12px; color:var(--muted); }.exercise-library-item strong { font-size:14px; }.exercise-library-item small { color:var(--muted); display:block; font-size:11px; }.exercise-library-item b { color:var(--accent); font-size:22px; }.training-weight-input { position:relative; }.training-weight-input input { padding-right:30px; }.training-weight-input b { position:absolute; right:9px; top:15px; color:var(--muted); font-size:11px; }.previous-performance:empty { display:none; }.performance-manual-actions { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:23px; }.performance-manual-status { font-size:13px; color:var(--muted); }.manual-hint { font-size:13px; margin-top:10px; }.training-session-card ul { font-size:14px; color:var(--muted); padding-left:19px; }.training-session-note { font-size:14px; margin:15px 0; } /* Layout von .training-meta-grid, .training-tools, .exercise-library-panel/-heading/-list, .training-exercise-row, .training-form-actions, .training-session-card/-heading sind konsolidiert in design-system.css, Abschnitt "TRAINING". */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.profile-grid p { font-size:14px; color:var(--muted); }.profile-grid .panel>h2 { margin-bottom:20px; }.profile-goals { margin:24px 0; }.profile-goals>div { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }.profile-goals span,.profile-goals small { color:var(--muted); }.stack-actions { display:grid; gap:12px; margin-top:20px; }.profile-grid .button-primary { margin-bottom:16px; }
.modal { border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--text); padding:0; max-width:680px; width:calc(100% - 32px); max-height:90dvh; overflow-y:auto; box-shadow:0 30px 100px #0005; }.modal::backdrop { background:#060b08bb; backdrop-filter:blur(5px); }.modal-card { padding:30px; }.modal-header { display:flex; justify-content:space-between; gap:20px; margin-bottom:23px; }.modal-header h2 { font-size:26px; }.modal-close { border:0; }.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:26px; }.selected-food-card { display:flex; align-items:center; gap:12px; padding:18px; background:var(--surface-2); border-radius:13px; margin-bottom:24px; }.selected-food-card>div { flex:1; }.selected-food-card strong { display:block; line-height:1.4; }.selected-food-card span:not(.selected-food-icon) { font-size:12px; color:var(--muted); }.food-preview { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.preview-metric { background:var(--surface-2); border-radius:12px; padding:12px; }.preview-metric span { display:block; font-size:11px; color:var(--muted); }.preview-metric strong { font-size:20px; }.preview-metric small { color:var(--muted); font-size:11px; }.manual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.manual-grid .form-field>span { font-size:12px; }.manual-grid { max-height:440px; overflow-y:auto; padding:5px; }.settings-block { margin-bottom:23px; }.settings-block-title { display:flex; gap:12px; margin-bottom:20px; }.settings-block-title p { color:var(--muted); font-size:13px; margin:3px 0; }.settings-note { color:var(--muted); font-size:13px; }.goal-warning { border:1px solid var(--line); border-radius:12px; padding:15px; margin-top:20px; font-size:13px; }.goal-warning p { margin-bottom:0; }.goal-warning.warning { border-color:var(--carbs); }.login-status { color:var(--error); font-size:14px; margin-top:15px; }.login-card .modal-actions .button { width:100%; }.performance-groups { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.performance-group { background:var(--bg); border-radius:14px; padding:18px; }.performance-group-title { font-size:16px; }.performance-row { display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--line); }.performance-row span { color:var(--muted); }.performance-note { color:var(--muted); font-size:12px; }
.entry-copy { flex:1; min-width:0; }.entry-copy strong { font-size:15px; line-height:1.45; display:block; overflow-wrap:anywhere; }.entry-copy>span { display:block; color:var(--muted); font-size:12px; margin-top:5px; }.entry-action { min-width:42px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--muted); }.entry-action:hover { color:var(--text); }.entry-action.delete:hover { color:var(--error); }.entry-kcal { font-size:14px; font-weight:650; }.entry-macros { max-width:105px; font-size:11px; }.meal-heading-left { display:flex; gap:9px; align-items:center; font-size:15px; }.meal-icon { color:var(--accent); }.frequent-foods { display:flex; flex-wrap:wrap; gap:8px; }.frequent-foods>.tools-label { width:100%; margin:5px 0 0; font-size:9px; }.frequent-tag { border:1px solid var(--line); background:var(--surface-2); border-radius:10px; padding:9px 12px; min-height:44px; color:var(--text); font-size:12px; text-align:left; display:inline-flex; align-items:center; gap:6px; max-width:100%; overflow-wrap:anywhere; }.frequent-empty { color:var(--muted); font-size:12px; }.preview-value { padding:15px; background:var(--surface-2); border-radius:12px; }.preview-value strong { display:block; font-size:22px; }.preview-value span { display:block; font-size:11px; color:var(--muted); }.weight-history-title,.weight-empty { color:var(--muted); font-size:13px; }.weight-empty { margin-top:15px; }.weight-history-row { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding:13px 0; }.weight-history-row span { display:block; color:var(--muted); font-size:12px; }.page-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; color:var(--muted); font-size:11px; margin-top:30px; }.page-footer p { margin:3px 0; }.footer-owner { display:flex; flex-direction:column; }.calendar-indicators { display:flex; gap:4px; margin:5px 0; }.calendar-indicator,.calendar-legend-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; }.calendar-indicator.water,.calendar-legend-dot.water { background:var(--fat); }.calendar-indicator.weight,.calendar-legend-dot.weight { background:var(--protein); }.calendar-indicator.training,.calendar-legend-dot.training { background:var(--carbs); }.calendar-day.today .calendar-day-number { color:var(--accent); }#wellnessView>.panel { margin-bottom:22px; }.profile-grid p { font-size:16px; }.training-history .activity-row>span:first-child { flex:1; }.sync-status.saving:before { background:var(--carbs); }
.toast { position:fixed; left:calc(50% + 116px); bottom:25px; transform:translate(-50%,15px); padding:14px 22px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 50px #0005; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:100; max-width:min(580px,90vw); width:max-content; font-size:14px; }.toast.visible { opacity:1; transform:translate(-50%,0); }
.app-splash { display:none; }.print-report { display:none; }
@media(min-width:1450px) { .balance-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:22px; }.balance-panel .section-heading { grid-column:1/-1; }.calorie-ring { grid-column:1; grid-row:2/4; margin:10px auto; }.calorie-summary { grid-column:2; margin:0 0 25px; }.macro-list { grid-column:2; grid-template-columns:1fr; gap:13px; }.home-training { min-height:380px; } }
@media(max-width:1200px) { .app-shell { padding-left:192px; }.brand { left:19px; width:163px; }.brand-copy strong { font-size:14px; }.brand-copy small { font-size:7px; }.view-tabs { width:192px; padding-left:13px; padding-right:13px; }.view-tab { font-size:14px; padding:14px 10px; }.page-content { padding:28px; }.topbar { margin:0 28px; }.hero { align-items:flex-start; }.date-control { margin-top:22px; }.date-control .circle-button { width:34px; }.hero-copy h1 { font-size:33px; }.home-grid { grid-template-columns:1.2fr 1fr; gap:18px; }.dashboard-grid { grid-template-columns:minmax(0,1fr) 280px; gap:18px; }.panel { padding:22px; }.progress-grid { grid-template-columns:1fr; }.recovery-panel { align-items:flex-start; flex-direction:column; }.recovery-panel form { width:100%; }.toast { left:calc(50% + 96px); } }
@media(max-width:960px) { .app-shell { padding-left:0; }.topbar { min-height:80px; padding-left:195px; }.brand { position:absolute; left:28px; top:22px; }.view-tabs { width:100%; height:auto; top:auto; bottom:0; padding:8px 18px calc(8px + env(safe-area-inset-bottom)); flex-direction:row; justify-content:space-around; gap:4px; border-right:0; border-top:1px solid var(--line); }.view-tabs:after { display:none; }.view-tab { display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; flex:1; padding:7px 4px; min-height:57px; font-size:11px; border-radius:11px; }.view-tab .icon { width:21px; height:21px; }.view-tab.active { background:var(--surface-2); color:var(--accent); }.page-content { padding-bottom:115px; }.toast { left:50%; bottom:100px; }.hero { gap:15px; }.hero-copy h1 { font-size:32px; }.hero-text { font-size:14px; }.dashboard-grid { grid-template-columns:minmax(0,1fr) 270px; gap:18px; }.home-actions { align-items:flex-start; }.sync-status { font-size:11px; }.profile-grid { gap:18px; } }
@media(max-width:720px) { .topbar { margin:0 20px; padding-left:0; flex-wrap:wrap; gap:8px; padding-top:18px; padding-bottom:14px; min-height:108px; }.brand { position:static; width:auto; order:0; }.brand-copy strong { font-size:15px; }.brand-copy small { font-size:7px; }.top-actions { margin-left:auto; gap:6px; order:1; }.top-actions .button,.top-actions .theme-toggle,.top-actions .action-icon-button { width:38px; height:42px; min-height:42px; padding:8px; }.sync-status { order:2; width:100%; font-size:11px; }.page-content { padding:25px 20px 110px; }.hero { display:block; margin-bottom:22px; }.hero-copy h1 { font-size:33px; letter-spacing:-1.3px; max-width:340px; }.hero-copy .eyebrow { font-size:9px; }.hero-text { max-width:350px; }.date-control { margin-top:20px; justify-content:space-between; border:1px solid var(--line); border-radius:12px; padding:5px; background:var(--surface); }.date-display { flex:1; }.date-display input { border:0; text-align:center; width:100%; font-size:15px; }.date-control .circle-button { border:0; width:40px; }.date-control .today-button { display:inline-flex; font-size:12px; min-height:40px; border:0; }.home-actions { flex-direction:column; gap:14px; }.home-actions>.button { width:100%; min-height:49px; }.home-actions p { font-size:13px; }.home-grid { grid-template-columns:1fr; gap:18px; }.home-training { min-height:290px; }.home-training img { object-position:center 42%; }.home-training>div { padding:25px; }.home-training h2 { font-size:27px; }.home-grid #homeActivity { order:3; }.home-grid #homeWater { order:4; }.panel { padding:22px; border-radius:19px; }h2 { font-size:21px; }.section-kicker { font-size:9px; }.calorie-ring { width:208px; height:208px; }.macro-list { gap:20px; }.calorie-summary { margin-bottom:25px; }.recovery-panel { padding:22px; }.recovery-panel form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.recovery-panel form button { grid-column:1/-1; }.recovery-panel input { max-width:100%; }.recovery-panel .form-field>span { font-size:11px; }.dashboard-grid { display:flex; flex-direction:column; }.sidebar { order:-1; }.sidebar>.panel:not(.nutrients-panel) { padding:18px; }.sidebar>.nutrients-panel,.sidebar>.privacy-card { order:1; }.sidebar .nutrients-panel { display:none; }.sidebar .privacy-card { padding:0 5px; }.sidebar .privacy-card p,.sidebar .privacy-card strong { display:none; }#nutritionMacros { display:grid; grid-template-columns:1fr 1fr; gap:12px; }#nutritionRemaining { font-size:13px; }#nutritionMacros .macro-row-top { font-size:11px; }#nutritionMacros .macro-amount>span { font-size:10px; }.add-panel .section-description { font-size:14px; }.search-form .button { flex:0 0 auto; }.search-box { flex-basis:100%; }.source-select-wrap { flex:1; min-width:0; }.meal-preference { align-items:flex-start; flex-direction:column; gap:7px; }.meal-preference-field { max-width:none; width:100%; }.quick-tag { font-size:11px; padding:5px 10px; }.meal-log-filter-bar { flex-direction:column; align-items:stretch; }.log-entry { flex-wrap:wrap; }.log-entry-main { flex-basis:calc(100% - 75px); }.entry-actions { margin-left:auto; }.result-list { max-height:520px; }.food-result { padding:13px; gap:9px; }.food-result h3 { font-size:14px; }.food-result p { font-size:11px; }.result-kcal { font-size:16px; }.result-kcal small { font-size:9px; }.food-result .result-add { min-width:34px; }.profile-grid { grid-template-columns:1fr; }.profile-grid .panel>h2 { font-size:24px; }.progress-grid { gap:18px; }.week-chart { gap:9px; }.week-stats { gap:7px; }.week-stat { padding:8px; }.week-stat strong { font-size:14px; }.week-table-header,.week-table-row { gap:5px; font-size:10px; }.week-table-row strong { font-size:10px; }.section-heading { gap:10px; flex-wrap:wrap; }.weight-latest { text-align:left; }.calendar-heading { display:block; }.calendar-toolbar { margin-top:15px; }.calendar-weekdays,.calendar-grid { gap:4px; }.calendar-day { padding:6px 4px; min-height:63px; border-radius:7px; }.calendar-day small { display:none; }.calendar-day strong { font-size:8px; }.calendar-day-metrics { font-size:8px; }.calendar-toolbar .today-button { width:100%; }.calendar-legend { flex-wrap:wrap; }.performance-manual-actions { flex-direction:column; align-items:stretch; gap:12px; }.modal-card { padding:23px; }.modal-header h2 { font-size:23px; }.modal { max-height:92dvh; border-radius:20px; }.two-columns { grid-template-columns:1fr 1fr; }.modal .form-field>span { font-size:12px; }.modal-actions { flex-wrap:wrap-reverse; }.modal-actions .button-primary { flex:1; }.manual-grid { grid-template-columns:1fr 1fr; }.food-preview { grid-template-columns:1fr 1fr; }.selected-food-source { display:none!important; }.performance-groups { grid-template-columns:1fr; }.view-tabs { padding-left:8px; padding-right:8px; }.view-tab { font-size:10px; }.toast { font-size:13px; }.inline-actions .button { font-size:12px; }.app-footer,.site-footer { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { :root { color-scheme:light; --text:#111; --muted:#555; --line:#ccc; --surface:#fff; --bg:#fff; }body { background:white; color:black; font-size:11px; }.app-shell { padding:0; }.topbar,.view-tabs,.hero,.sync-notice,.view-panel,.toast,.modal { display:none!important; }.page-content { padding:0; max-width:none; }.print-report { display:block; }.print-report-header { display:flex; justify-content:space-between; gap:20px; }.print-report h1 { font-size:28px; }.print-report h2 { font-size:17px; margin-top:22px; }.print-report-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.print-report-summary span,.print-report-summary small { display:block; }.print-report table { width:100%; border-collapse:collapse; }.print-report td,.print-report th { border-bottom:1px solid #ccc; text-align:left; padding:7px; }.print-report tr { break-inside:avoid; }.print-report-footnote { font-size:9px; margin-top:25px; } }