:root{
  --bg:#0a0d14; --panel:#151a24; --panel2:#1e2431; --border:#2b3340;
  --text:#f3f5fa; --muted:#8b96aa; --accent:#16a34a; --accent-hi:#22c55e; --accent2:#4c9ffb;
  --green:#2ecc8f; --red:#fb6d6d; --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg) radial-gradient(1100px 520px at 50% -15%, rgba(22,163,74,.08), transparent 70%) no-repeat;
  color:var(--text); padding:24px;
}
.wrap{max-width:960px;margin:0 auto;}
h1{font-size:1.5rem;margin:0 0 4px;}
.sub{color:var(--muted);margin:0 0 24px;font-size:.92rem;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;cursor:default;}
.card.clickable{cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;}
.card.clickable:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25);}
.card .label{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;}
.card .value{font-size:1.5rem;font-weight:700;margin-top:4px;}
.card .sub2{color:var(--muted);font-size:.76rem;margin-top:4px;}
.progress-bar{background:var(--panel2);border-radius:8px;height:8px;overflow:hidden;margin-top:8px;}
.progress-bar > div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));}
section{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
section h2{margin:0 0 14px;font-size:1.05rem;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:end;}
label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:4px;}
input,select,textarea{
  width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);
  padding:9px 11px;border-radius:10px;font-size:.88rem;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.18);
}
button{
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font-size:.88rem;font-weight:600;cursor:pointer;
  box-shadow:0 2px 10px rgba(22,163,74,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
button.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);box-shadow:none;}
button.danger{background:#3a1414;color:var(--red);border:1px solid #5c1f1f;box-shadow:none;}
button:disabled{opacity:.5;cursor:not-allowed;}
button:hover:not(:disabled){filter:brightness(1.08);}
/* Runde/quadratische Icon-Knöpfe für Kopfzeilen-Aktionen (Abmelden, Ansicht). Bewusst
   ohne den Farbverlauf/Schatten der Standard-Buttons, damit sie schlicht wirken. */
.icon-btn{
  width:40px;height:40px;padding:0;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  box-shadow:none;transition:background .15s,border-color .15s,color .15s;
}
.icon-btn:hover:not(:disabled){filter:none;background:var(--panel);border-color:var(--accent);color:var(--accent);}
.icon-btn svg{width:19px;height:19px;display:block;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
table{width:100%;border-collapse:collapse;font-size:.85rem;}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;}
.badge{padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:600;}
.badge.bike{background:#16a34a22;color:var(--accent);}
.badge.strength{background:#3b82f622;color:var(--accent2);}
.badge.other{background:#22c55e22;color:var(--green);}
.badge.run{background:#a855f722;color:#a855f7;}
.badge.goal-reached{background:#22c55e22;color:var(--green);}
.empty{color:var(--muted);text-align:center;padding:20px 0;font-size:.88rem;}
.hint{color:var(--muted);font-size:.78rem;margin-top:6px;line-height:1.5;}
.status{padding:10px 14px;border-radius:8px;font-size:.85rem;margin:12px 0;display:none;}
.status.show{display:block;}
.status.ok{background:#0f2e1c;color:var(--green);border:1px solid #1e4d31;}
.status.err{background:#3a1414;color:var(--red);border:1px solid #5c1f1f;}
.center-screen{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.center-screen h1{font-size:1.8rem;}
.big-btn{padding:16px 32px;font-size:1rem;border-radius:12px;}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:50;
}
.overlay.hidden{display:none;}
.modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;}
.modal h3{margin-top:0;}
.close-btn{position:absolute;top:14px;right:18px;}
.actions button{padding:4px 10px;font-size:.72rem;}
/* Desktop/Tablet: normale Fusszeile im Textfluss. Fixiert wird sie nur im mobilen
   Layout (siehe @media unten), damit sie auf dem iPhone auch nach dem Login sichtbar
   bleibt, ohne im Desktop-Browser dauerhaft einen Balken einzublenden. */
footer{color:var(--muted);font-size:.76rem;text-align:center;margin-top:10px;}
.file-input-label{
  display:inline-block;background:var(--panel2);border:1px solid var(--border);color:var(--text);
  padding:10px 18px;border-radius:8px;font-size:.88rem;cursor:pointer;
}
.estimate-box{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:10px;}

/* ---- Apple-Watch-artige Ringe (Kalorien/Kohlenhydrate/Fett/Protein), siehe
   renderActivityRings() in app.js ---- */
.rings-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.rings-svg{width:200px;height:200px;flex-shrink:0;}
.rings-legend{display:flex;flex-direction:column;gap:8px;min-width:180px;}
.ring-legend-item{display:flex;align-items:center;gap:8px;font-size:.85rem;}
.ring-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.ring-legend-label{color:var(--muted);min-width:100px;}
.ring-legend-value{font-weight:600;}

/* ---- Nährwert-Zusammenfassung (Ballaststoffe/Zucker + Mikronährstoffe) ---- */
.nutrient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.nutrient-item{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.nutrient-label{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;}
.nutrient-value{font-size:.92rem;font-weight:600;}

/* ---- Aufklappbare Eintragsliste (z.B. "Kalorien heute"), siehe loadCalories() ----
   Kopfzeile: Zeit / Gericht / kcal in EINHEITLICHER Schriftgrösse; Tippen klappt die
   Nährwerte auf, statt sie seitlich wegzuscrollen. */
.entry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.entry{background:var(--panel2);border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.entry-row{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
  background:none;border:none;box-shadow:none;color:var(--text);
  padding:11px 14px;text-align:left;cursor:pointer;font-family:inherit;
}
.entry-row:hover:not(:disabled){filter:none;background:var(--panel);}
.entry-row:active:not(:disabled){transform:none;opacity:.75;}
/* Statische Zeilen (ohne Detail, z.B. Schritte/Sessions) sind nicht anklickbar. */
.entry-row.static{cursor:default;}
.entry-row.static:hover{background:none;}
/* Alle drei Kopf-Angaben teilen sich exakt dieselbe Schriftgrösse (.9rem). */
.entry-time{color:var(--muted);font-size:.9rem;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.entry-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Aufgeklappt den vollen Gerichtnamen zeigen (nicht mehr abschneiden). */
.entry.open .entry-name{white-space:normal;overflow:visible;}
.entry-tag{font-size:.82rem;}
.entry-kcal{font-size:.9rem;font-weight:700;color:var(--accent);white-space:nowrap;}
.entry-kcal-unit{font-size:.68rem;font-weight:600;color:var(--muted);margin-left:3px;}
.entry-caret{color:var(--muted);font-size:1rem;line-height:1;transition:transform .2s ease;}
.entry.open .entry-caret{transform:rotate(180deg);}
.entry-detail{display:none;padding:0 14px 12px;}
.entry.open .entry-detail{display:block;}
.macro-grid{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 0;margin-bottom:4px;border-top:1px solid var(--border);}
.macro{display:flex;flex-direction:column;gap:2px;min-width:58px;}
.macro-val{font-size:.98rem;font-weight:700;}
.macro-unit{font-size:.68rem;font-weight:600;color:var(--muted);margin-left:2px;}
.macro-lbl{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
/* Zusatzzeile im Detail (z.B. Quelle-Badge). Trennlinie oben, ausser eine Kachelzeile
   liefert die Linie bereits. */
.entry-badge-row{padding:12px 0 4px;border-top:1px solid var(--border);}
.macro-grid + .entry-badge-row{border-top:none;padding-top:0;}

/* ---- Wasser-Tracking (siehe loadWater() in dashboard.js) ---- */
.water-total{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;}
.water-total .water-unit{font-size:.9rem;font-weight:600;color:var(--muted);}
/* Schnell-Knöpfe füllen die Zeile gleichmässig. */
.water-actions{flex-wrap:nowrap;}
.water-actions button{flex:1;padding-left:0;padding-right:0;}

/* ---- Trainingsprogramm ansehen / wechseln (siehe loadPhases() in dashboard.js) ---- */
/* Klickbarer Programm-Text unter dem Titel. */
.phase-chip{cursor:pointer;}
.phase-chip::after{content:" ⇅";opacity:.6;font-size:.85em;}
.phase-chip:hover{color:var(--text);}
.phase-item{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.phase-item:last-child{margin-bottom:0;}
.phase-item.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.phase-item-main{min-width:0;}
.phase-item-label{font-weight:700;font-size:.92rem;}
.phase-item-meta{color:var(--muted);font-size:.76rem;margin-top:2px;}
.phase-item button{flex-shrink:0;padding:6px 12px;font-size:.8rem;}

/* ---- Mobile ---- */
@media (max-width:640px){
  body{padding:14px 12px;}
  .wrap{max-width:100%;}
  h1{font-size:1.25rem;}
  .sub{font-size:.82rem;margin-bottom:16px;}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px;}
  .card{padding:12px;}
  .card .value{font-size:1.15rem;}
  .card .label{font-size:.68rem;}
  .card .sub2{font-size:.7rem;}
  section{padding:14px;margin-bottom:14px;}
  section h2{font-size:.95rem;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .row{gap:8px;}
  button{padding:10px 14px;font-size:.85rem;}
  /* Tabellen sind oft breiter als der Bildschirm - horizontal scrollbar statt
     das ganze Seitenlayout zu sprengen (kaputt/ungestylt wirkende Ansicht). */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  th,td{padding:7px 8px;font-size:.8rem;}
  .modal{padding:16px;max-height:90vh;}
  .center-screen h1{font-size:1.4rem;}
  .big-btn{padding:14px 24px;font-size:.92rem;}
  .rings-wrap{gap:14px;justify-content:center;}
  .rings-svg{width:160px;height:160px;}
  .nutrient-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:400px){
  .cards{grid-template-columns:1fr;}
  /* Formulare bleiben auch auf schmalen Handys 2-spaltig: ein volle-Breite-Feld nur
     für eine 2-stellige Zahl (Gewicht, Wdh., Satz-Nr.) wirkte deutlich zu gross. */
}

/* ---- Ansichtseinstellungen (Theme + Dichte), siehe app.js initViewSettings() ---- */
:root[data-theme="light"]{
  --bg:#f5f6f9; --panel:#ffffff; --panel2:#eef1f5; --border:#e1e5ec;
  --text:#141821; --muted:#5c6676; --accent:#15803d; --accent-hi:#22c55e; --accent2:#2563eb;
  --green:#12a668; --red:#dc2626;
}
:root[data-theme="light"] body{
  background:var(--bg) radial-gradient(1100px 520px at 50% -15%, rgba(22,163,74,.06), transparent 70%) no-repeat;
}
/* Helles Theme: Lösch-/Fehler-Flächen dezent hell statt dunkelrot. */
:root[data-theme="light"] button.danger{background:#fdecec;border-color:#f3c4c4;}
:root[data-theme="light"] .status.err{background:#fdecec;border-color:#f3c4c4;}
:root[data-theme="light"] .status.ok{background:#e7f7ee;border-color:#bfe6cf;}
body.compact .cards{gap:8px;margin-bottom:12px;}
body.compact .card{padding:10px;}
body.compact .card .value{margin-top:2px;}
body.compact section{padding:12px;margin-bottom:12px;}
body.compact section h2{margin-bottom:8px;}
body.compact th,body.compact td{padding:5px 6px;}
body.compact .form-grid{gap:8px;}

/* Zahnrad sitzt normalerweise in der Kopfzeile (siehe initViewSettings) als Icon-Knopf
   (.icon-btn) neben den übrigen Aktionen - so überlappt er keine Formularfelder.
   Fallback für Seiten ohne Kopfzeile (z.B. Login): frei schwebender Knopf unten rechts. */
.view-settings-btn.floating{
  position:fixed;bottom:18px;right:18px;z-index:60;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.view-settings-panel{
  position:fixed;top:92px;right:24px;background:var(--panel);border:1px solid var(--border);
  border-radius:12px;padding:14px;width:200px;z-index:70;display:none;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.view-settings-panel.open{display:block;}
.view-settings-panel h4{margin:0 0 10px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.view-settings-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.view-settings-row:last-child{margin-bottom:0;}
.view-settings-row label{margin:0;font-size:.82rem;color:var(--text);}
.view-settings-row select{width:auto;padding:5px 8px;font-size:.8rem;}

/* ---- iOS-App-Feeling für iPhones: Safe-Areas, untere Tab-Bar, große Titelzeile,
   Karten ohne harte Kanten, Press-Feedback auf Buttons. Siehe initMobileTabBar()
   und initHeaderScrollShadow() in app.js. Nur unterhalb von 640px aktiv, damit sich
   Desktop/Tablet nicht verändert. ---- */
.tab-bar{display:none;}

@media (max-width:640px){
  body{
    padding-top:calc(14px + env(safe-area-inset-top));
    /* Platz für die fixierte Tab-Bar am unteren Rand. */
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color:transparent;
  }

  /* Kopfzeile jeder Seite: großer, fetter Titel wie ein iOS-"Large Title",
     sticky mit Weichzeichner-Hintergrund (Blur), Trennlinie erscheint erst beim Scrollen. */
  .wrap > .row:first-of-type{
    position:sticky;
    top:calc(-14px - env(safe-area-inset-top));
    z-index:40;
    /* Titel links, Aktion rechts - nie umbrechen (sonst springt der Button unter
       den grossen Titel und die Kopfzeile wird unterschiedlich hoch). */
    flex-wrap:nowrap;
    gap:10px;
    margin:calc(-14px - env(safe-area-inset-top)) -12px 14px;
    padding:calc(14px + env(safe-area-inset-top)) 12px 12px;
    background:rgba(10,13,20,.82);
    backdrop-filter:blur(20px) saturate(1.6);
    -webkit-backdrop-filter:blur(20px) saturate(1.6);
    border-bottom:1px solid transparent;
    transition:border-color .2s ease;
  }
  :root[data-theme="light"] .wrap > .row:first-of-type{
    background:rgba(245,246,249,.82);
  }
  .wrap > .row:first-of-type.scrolled{
    border-bottom-color:var(--border);
  }
  /* Titelblock darf schrumpfen, damit der Aktions-Button rechts Platz behält. */
  .wrap > .row:first-of-type > div:first-child{min-width:0;}
  /* Aktions-Gruppe rechts (z.B. Abmelden + Ansicht) NICHT umbrechen - sonst rutscht das
     Zahnrad unter den Abmelden-Knopf. Icon-Knöpfe sind schmal genug für eine Zeile. */
  .wrap > .row:first-of-type > .row{flex-wrap:nowrap;flex-shrink:0;gap:8px;}
  .wrap > .row:first-of-type h1{
    font-size:1.4rem;font-weight:700;letter-spacing:-.01em;
  }
  .wrap > .row:first-of-type .sub{
    margin-bottom:0;
  }

  /* Redundante Navigations-Buttons ausblenden - die untere Tab-Bar übernimmt das. */
  .nav-only{display:none !important;}

  /* Karten/Sektionen ohne sichtbaren Rahmen, dafür weicher Schatten + Ring - wirkt
     wie iOS-Gruppierungen (z.B. Einstellungen-App) statt flacher Web-Boxen. */
  section,.card{
    border:none;
    border-radius:20px;
    box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 1px var(--border);
  }

  /* Druck-Feedback beim Antippen, ähnlich dem "Haptik"-Look nativer Apple-Apps. */
  button,.file-input-label{
    -webkit-tap-highlight-color:transparent;
  }
  button:active:not(:disabled),.file-input-label:active{
    transform:scale(.96);
    opacity:.85;
  }

  /* Fallback-FAB (nur Seiten ohne Kopfzeile) über die Tab-Bar heben. */
  .view-settings-btn.floating{bottom:calc(80px + env(safe-area-inset-bottom));}
  /* Einstellungs-Panel als Dropdown direkt unter der (niedrigeren) mobilen Kopfzeile. */
  .view-settings-panel{top:calc(64px + env(safe-area-inset-top));right:12px;}

  /* Untere Tab-Bar: fixiert, Weichzeichner-Hintergrund, respektiert Home-Indicator-Bereich. */
  .tab-bar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;z-index:100;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    background:rgba(21,26,36,.9);
    backdrop-filter:blur(24px) saturate(1.8);
    -webkit-backdrop-filter:blur(24px) saturate(1.8);
    border-top:1px solid var(--border);
    /* Erzwingt eine eigene Compositing-Ebene - vermeidet, dass Safari die fixierte Bar
       beim Scrollen kurzzeitig falsch/gar nicht neu zeichnet ("verschwindet teilweise"). */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    will-change:transform;
  }
  :root[data-theme="light"] .tab-bar{
    background:rgba(255,255,255,.86);
  }
  .tab-bar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    text-decoration:none;color:var(--muted);font-size:.66rem;font-weight:600;
    padding:4px 0;
  }
  .tab-bar a .tab-icon{font-size:1.3rem;line-height:1;}
  .tab-bar a.active{color:var(--accent);}

  /* Solange ein Eingabefeld fokussiert ist, deckt die iOS-Tastatur den unteren Bildschirm-
     bereich ab. Die fixierte Tab-Bar rutscht dann teilweise dahinter statt sauber darüber -
     deshalb blenden wir sie aus, bis das Feld wieder verlassen wird (siehe app.js). */
  body.kbd-open .tab-bar{display:none;}
}

/* ---- Rezepte + Empfehlungen (essen.mgraf.dev) ---- */
.recipe-card-title{font-weight:700;font-size:1rem;line-height:1.25;}
.recipe-photo-dot{font-size:.85rem;}
.recipe-card-tags{color:var(--muted);font-size:.74rem;margin-top:4px;}
.recipe-card-macros{color:var(--accent);font-size:.8rem;font-weight:600;margin-top:8px;}
.recipe-h{margin:14px 0 6px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.recipe-text{white-space:pre-wrap;line-height:1.5;font-size:.9rem;}
.recommend-summary{font-size:.92rem;margin:0 0 10px;}
.recommend-item{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.recommend-item:last-child{margin-bottom:0;}
.recommend-item.clickable{cursor:pointer;transition:border-color .15s;}
.recommend-item.clickable:hover{border-color:var(--accent);}
.recommend-title{font-weight:700;font-size:.92rem;}
.recommend-reason{color:var(--muted);font-size:.82rem;margin-top:4px;line-height:1.45;}