/* Life HUD - Oberflaeche.
   Aus index.html herausgeloest, damit die Datei wieder lesbar wird und
   der Browser Stil und Markup getrennt zwischenspeichern kann.
   Reihenfolge der Abschnitte wie gehabt: Farben, Grundgeruest, Kopfzeile,
   Tab-Leiste, dann die Bereiche in der Reihenfolge der Tabs. */

  /* ---- Farbpalette: futuristisch/verspielt ---- */
  :root {
    --bg: #05060d;
    --card: #0d1121;
    --card2: #141a30;
    --border: #263056;
    --text: #eaeeff;
    --muted: #7783ad;
    --cyan: #00e5ff;
    --pink: #ff2ec4;
    --purple: #a855f7;
    --green: #39ff9d;
    --yellow: #ffd93d;
    --red: #ff5c7a;

    /* Ein Satz Kurven für die ganze App. Die eingebauten CSS-Easings sind zu
       weich - sie lassen jede Bewegung unentschlossen wirken.
       --ease-out für alles, was hereinkommt oder hinausgeht (startet schnell,
       fühlt sich sofort an), --ease-in-out für alles, was sich auf dem Schirm
       von A nach B bewegt. ease-in gibt es hier absichtlich nicht: es fängt
       langsam an, also genau dort, wo man am genauesten hinschaut. */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);

    /* Höhe der unteren Tab-Leiste - an mehreren Stellen gebraucht */
    --tableiste: 62px;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background:
      radial-gradient(circle at 20% 0%, rgba(168,85,247,.15), transparent 40%),
      radial-gradient(circle at 80% 20%, rgba(0,229,255,.12), transparent 40%),
      var(--bg);
    color: var(--text);
    padding: 24px;
    /* Platz für die feste Tab-Leiste am unteren Rand. env(safe-area-inset-bottom)
       hält den Inhalt über der Home-Leiste des iPhones - die Seite läuft mit
       viewport-fit=cover sonst darunter. */
    padding-bottom: calc(var(--tableiste) + env(safe-area-inset-bottom) + 24px);
    min-height: 100vh;
  }
  @media (max-width: 480px) {
    body { padding: 12px; padding-bottom: calc(var(--tableiste) + env(safe-area-inset-bottom) + 16px); }
  }
  .wrap { max-width: 920px; margin: 0 auto; }

  /* --- Kopfzeile ---
     Vorher drei gestapelte Blöcke (Titel, Level-Karte, Karte mit zwei seltenen
     Knöpfen) = 375 px, und zwar auf jedem Tab dieselben. Jetzt eine Zeile.
     Alles, was man einmal liest statt täglich, liegt hinter dem ⋯. */
  .kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .levelring {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(from 180deg, var(--cyan), var(--purple), var(--pink), var(--cyan));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: #05060d;
    box-shadow: 0 0 14px rgba(0,229,255,.4);
  }
  /* Der Ring dreht sich nicht mehr endlos, sondern genau einmal - beim
     Aufstieg. Dauerbewegung ohne Aussage lenkt nur ab; so heißt Bewegung
     wieder „etwas ist passiert". */
  .levelring.stufe-auf { animation: ringdreh 900ms var(--ease-in-out); }
  @keyframes ringdreh { from { transform: rotate(0); } to { transform: rotate(360deg); } }

  .kopf-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .kopf-zahlen { display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; font-size: 12px; color: var(--muted); }
  .kopf-mehr {
    background: none; border: 1px solid var(--border); color: var(--muted);
    width: 38px; height: 38px; padding: 0; border-radius: 12px; font-size: 16px;
    flex-shrink: 0; line-height: 1; font-weight: 700;
  }
  .kopf-mehr[aria-expanded="true"] { color: var(--cyan); border-color: rgba(0,229,255,.45); }

  .kopf-menue { margin-bottom: 16px; }
  .kopf-menue h1 {
    font-size: 20px; margin: 0 0 4px; letter-spacing: .03em;
    background: linear-gradient(90deg, var(--cyan), var(--pink));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    display: inline-block;
  }
  .kopf-menue .sub { color: var(--muted); font-size: 12px; margin-bottom: 14px; line-height: 1.5; }
  .kopf-werte { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px;
    color: var(--muted); margin-bottom: 12px; }

  .bar { height: 10px; background: var(--border); border-radius: 8px; overflow: hidden; }
  .bar > div {
    height: 100%; border-radius: 8px;
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
    background-size: 200% 100%;
    transition: width .45s var(--ease-out);
    box-shadow: 0 0 12px rgba(0,229,255,.6);
  }
  /* Der Farbverlauf fließt nur, wenn gerade XP dazugekommen sind - nicht rund
     um die Uhr. Gesetzt und wieder entfernt von xpBalkenBeleben(). */
  .bar > div.fliesst { animation: flow 1.5s linear 1; }
  @keyframes flow { to { background-position: 200% 0; } }

  .streakbadge {
    font-size: 12px; padding: 3px 9px; border-radius: 20px;
    background: rgba(255,217,61,.12); color: var(--yellow); border: 1px solid rgba(255,217,61,.3);
    white-space: nowrap;
  }

  /* --- Untere Tab-Leiste ---
     Vorher neun Kacheln in drei Zeilen ganz oben: jeder Bereichswechsel kostete
     erst „nach oben scrollen". Unten sind sie in Daumenreichweite und immer da,
     egal wie weit man in einer Liste steckt. */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: rgba(10,13,26,.85);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    position: relative; z-index: 1; flex: 0 0 auto; width: 68px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: var(--tableiste); padding: 0 4px;
    background: none; border: none; border-radius: 0; cursor: pointer;
    font-size: 10px; font-weight: 500; color: var(--muted);
    transition: color 150ms ease;
  }
  .tab-icon { font-size: 19px; line-height: 1; transition: transform 220ms var(--ease-out); }
  .tab-text { white-space: nowrap; }
  .tab.active { color: var(--text); font-weight: 700; }
  .tab.active .tab-icon { transform: translateY(-1px) scale(1.12); }
  .tab:active .tab-icon { transform: scale(.88); }

  /* Statt neun gleichzeitiger Farbwechsel eine Marke, die hinüberfährt: der
     Wechsel wird zur Bewegung statt zum Sprung. Position setzt tabMarkeSetzen(). */
  .tab-marke {
    position: absolute; top: 5px; left: 0; width: 0;
    height: calc(var(--tableiste) - 10px);
    border-radius: 13px; pointer-events: none; z-index: 0;
    background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(168,85,247,.20));
    border: 1px solid rgba(0,229,255,.35);
    transition: transform 260ms var(--ease-out), width 260ms var(--ease-out);
  }
  /* Beim ersten Zeichnen soll die Marke dastehen, nicht von links hereinfahren */
  .tab-marke.stumm { transition: none; }

  @media (min-width: 720px) {
    .tab { flex: 1 1 0; width: auto; max-width: 108px; font-size: 11px; }
    .tabs { justify-content: center; overflow-x: hidden; }
  }

  .panel { display: none; }
  /* Dass der Bereich gewechselt hat, erzählt schon die Marke in der Leiste
     unten. Hier reicht ein kurzer Überblender ohne Versatz: Tabs drückt man
     dutzendfach am Tag, da fühlt sich jede zusätzliche Zehntelsekunde nach
     Warten an, und ein Verschieben des Inhalts liest sich wie ein Ruckeln. */
  .panel.active { display: block; animation: fadein 140ms ease; }
  @keyframes fadein { from { opacity: 0; } }

  .card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; padding: 18px; margin-bottom: 16px;
  }
  .card h2 { font-size: 14px; margin: 0 0 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .06em; }
  /* Schritt-für-Schritt-Anleitung (Kurzbefehl für Apple Health) */
  .shortcut-steps { font-size: 13px; line-height: 1.6; }
  .shortcut-steps p { margin: 0 0 12px; }
  .shortcut-steps ol { margin: 0 0 12px; padding-left: 20px; }
  .shortcut-steps li { margin-bottom: 7px; }
  .shortcut-steps code {
    background: var(--card2); border: 1px solid var(--border); border-radius: 5px;
    padding: 2px 6px; font-size: 12px; word-break: break-all;
  }
  .shortcut-steps code.copyable { cursor: pointer; color: var(--cyan); }
  .shortcut-steps code.copyable:active { background: var(--border); }
  .shortcut-steps a { color: var(--cyan); }

  .row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  input, select {
    background: var(--card2); border: 1px solid var(--border); color: var(--text);
    padding: 9px 12px; border-radius: 10px; font-size: 16px; flex: 1; min-width: 100px;
  }
  input:focus, select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,229,255,.2); }
  button {
    background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #05060d; border: none; padding: 10px 18px;
    border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700;
    transition: transform 160ms var(--ease-out), filter 160ms ease;
  }
  /* Am Handy löst ein Tipp den Hover-Zustand aus und lässt ihn danach stehen -
     der Knopf bleibt fälschlich hell. Deshalb nur für echte Zeigegeräte. */
  @media (hover: hover) and (pointer: fine) {
    button:hover { filter: brightness(1.1); }
  }
  /* Druckfeedback. Das billigste Detail der ganzen App und das mit der
     größten Wirkung: ohne es fragt man sich bei jedem Tipp, ob er ankam.
     Die Tabs sind ausgenommen, dort schrumpft nur das Symbol. */
  button:active:not(.tab) { transform: scale(.97); }
  button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); box-shadow: none; }
  button.danger { background: var(--red); color: white; }

  ul.list { list-style: none; margin: 0; padding: 0; }
  ul.list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; gap: 8px; flex-wrap: wrap;
  }
  ul.list li:last-child { border-bottom: none; }
  ul.list li.done span.label { text-decoration: line-through; color: var(--muted); }
  .left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--card2); color: var(--muted); }
  .tag.hr { background: rgba(255,92,122,.12); color: var(--red); border: 1px solid rgba(255,92,122,.3); }
  .tag.diff-easy { background: rgba(57,255,157,.1); color: var(--green); border: 1px solid rgba(57,255,157,.3); }
  .tag.diff-medium { background: rgba(255,217,61,.12); color: var(--yellow); border: 1px solid rgba(255,217,61,.3); }
  .tag.diff-hard { background: rgba(255,92,122,.12); color: var(--red); border: 1px solid rgba(255,92,122,.3); }
  /* --- To-Dos ---
     Die Gruppe einer Aufgabe ergibt sich aus ihrem Datum, nicht aus einer Spalte.
     Deshalb gibt es hier keine Spalten mehr und keinen Ziehgriff, sondern eine
     Liste mit Überschriften. */
  .todo-kopfzeile { display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 12px; flex-wrap: wrap; }
  .todo-kopf-xp { color: var(--cyan); font-weight: 700; white-space: nowrap; }
  .todo-eingabe-vorschau { font-size: 12px; color: var(--cyan); min-height: 16px; margin: -4px 0 10px; }
  .todo-eingabe-vorschau.leer { color: var(--muted); }
  .todo-details { display: none; }
  .todo-details.offen { display: block; }

  .todo-gruppe { margin-bottom: 18px; }
  .todo-gruppe:last-child { margin-bottom: 0; }
  /* Bleibt beim Scrollen oben stehen, solange man in der Gruppe ist - sonst
     weiß man nach zwanzig Zeilen nicht mehr, ob das noch „Heute" ist.
     Die negativen Ränder ziehen den Hintergrund über die Polsterung der Karte
     hinaus, sonst schiene der Inhalt links und rechts daran vorbei. */
  .todo-gruppe-kopf { display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    position: sticky; top: 0; z-index: 2; background: var(--card);
    margin: 0 -18px 4px; padding: 6px 18px;
    border-bottom: 1px solid var(--border); }
  .todo-gruppe.g-ueberfaellig .todo-gruppe-kopf { color: var(--red); border-bottom-color: rgba(255,92,122,.35); }
  .todo-gruppe.g-heute .todo-gruppe-kopf { color: var(--cyan); border-bottom-color: rgba(0,229,255,.35); }
  .todo-gruppe-zahl { font-weight: 700; }

  .todo-item {
    display: flex; align-items: center; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--border); position: relative; background: var(--card);
    touch-action: pan-y;
    transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
  }
  .todo-item:last-child { border-bottom: none; }
  .todo-item.wischt { transition: none; }
  /* Abgang: die Zeile gleitet hinaus, *bevor* der Zustand sich ändert und die
     Liste neu gezeichnet wird. Ohne das ist der Knoten weg, ehe die Bewegung
     anfängt - man kann nicht animieren, was man wegwirft. */
  .todo-item.geht { transform: translateX(-30px); opacity: 0; }
  .todo-item.geht-weg { transform: translateX(-100%); opacity: 0; }
  /* Zugang: nur die Zeilen, die beim letzten Zeichnen noch nicht dastanden */
  .todo-item.neu { animation: zeileRein 260ms var(--ease-out); }
  @keyframes zeileRein { from { opacity: 0; transform: translateY(-8px); } }
  .todo-item.loeschbereit { background: rgba(255,92,122,.14); }
  /* Der Hinweis sitzt *innerhalb* der Zeile - außerhalb würde er die Seite
     waagerecht scrollbar machen. */
  .todo-item.loeschbereit::after {
    content: '🗑'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 15px; pointer-events: none;
  }
  .todo-check {
    width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--border); background: var(--card2);
    flex-shrink: 0; padding: 0; font-size: 15px; line-height: 1; color: transparent;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s var(--ease-out), background-color .15s ease,
                border-color .15s ease, box-shadow .15s ease, color .15s ease;
  }
  .todo-check:active { transform: scale(.88); }
  .todo-check.erledigt { background: linear-gradient(135deg, var(--green), var(--cyan));
    border-color: transparent; color: #05060d; box-shadow: 0 0 12px rgba(57,255,157,.35); }
  .todo-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
  .todo-text { font-size: 14px; word-break: break-word; }
  .todo-item.erledigt .todo-text { text-decoration: line-through; color: var(--muted); }
  .todo-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
  .todo-faellig { white-space: nowrap; }
  .todo-faellig.ist-ueberfaellig { color: var(--red); font-weight: 700; }
  .todo-faellig.ist-heute { color: var(--cyan); font-weight: 700; }
  .todo-rechts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .todo-pin { font-size: 13px; }
  .todo-leer { font-size: 13px; color: var(--muted); padding: 6px 0; }

  /* Aufklappbare Blöcke (erledigt / Archiv) */
  .todo-klapper { display: block; width: 100%; text-align: left; margin-top: 14px; }
  .todo-klappinhalt { display: none; margin-top: 6px; }
  .todo-klappinhalt.offen { display: block; }

  /* Blatt zum Bearbeiten einer Aufgabe */
  .blatt-feld { margin-bottom: 14px; }
  .blatt-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
  .blatt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .blatt-chip {
    background: var(--card2); border: 1px solid var(--border); color: var(--muted);
    border-radius: 20px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  }
  .blatt-chip.aktiv { background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #05060d; border-color: transparent; }

  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 12px; margin-bottom: 12px; }
  .chart-wrap { position: relative; height: 180px; }
  .chart-wrap canvas { width: 100% !important; height: 100% !important; }

  /* Prüfungsmodus-Banner */
  .exam-banner { background: rgba(255,217,61,.1); border: 1px solid rgba(255,217,61,.35); color: var(--yellow);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }

  /* Habits */
  .habit-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .habit-row:last-child { border-bottom: none; }
  .habit-check { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--border); background: var(--card2);
    display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; flex-shrink: 0;
    transition: transform .15s var(--ease-out), background-color .15s ease,
                border-color .15s ease, box-shadow .15s ease; }
  .habit-check:active { transform: scale(.88); }
  .habit-check.done { background: linear-gradient(135deg, var(--green), var(--cyan)); border-color: transparent; box-shadow: 0 0 14px rgba(57,255,157,.4); }
  .habit-name { flex: 1; font-size: 14px; }
  .habit-streak { font-size: 11px; color: var(--yellow); white-space: nowrap; }
  .heatmap-block { margin-bottom: 18px; }
  .heatmap-title { font-size: 13px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
  .heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
  .heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; }
  .heatmap-cell { width: 11px; height: 11px; border-radius: 2px; background: #1a2140; }
  .heatmap-cell.on { background: var(--green); box-shadow: 0 0 6px rgba(57,255,157,.5); }
  .heatmap-cell.future { opacity: .25; }
  .heatmap-legend { font-size: 11px; color: var(--muted); margin-top: 4px; }

  /* Ernährung */
  .kcal-ring-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .kcal-ring { width: 140px; height: 140px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--cyan) 0deg, var(--purple) 0deg, var(--border) 0deg);
    display: flex; align-items: center; justify-content: center; }
  .kcal-ring-inner { width: 108px; height: 108px; border-radius: 50%; background: var(--card);
    display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .kcal-value { font-size: 26px; font-weight: 800; color: var(--cyan); }
  .kcal-label { font-size: 11px; color: var(--muted); }
  .macro-bars { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; }
  .macro-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .macro .bar { height: 8px; }
  #barcodeReader { margin: 12px 0; border-radius: 12px; overflow: hidden; }
  .food-result { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .food-result:last-child { border-bottom: none; }
  .food-pending { background: var(--card2); border: 1px solid var(--cyan); border-radius: 12px; padding: 14px; margin-top: 12px; }

  /* Ernährung 2.0 */
  .day-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
  .day-nav button { padding: 6px 12px; font-size: 14px; }
  .sub-head { font-size: 12px; color: var(--cyan); text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 8px; }
  .quick-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 6px; }
  .quick-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .quick-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--card2);
    border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
  .quick-chip span { font-size: 10px; color: var(--muted); font-weight: 400; }
  @media (hover: hover) and (pointer: fine) {
    .quick-chip:hover { border-color: var(--cyan); }
  }
  .preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .preset-chip { background: var(--card2); border: 1px solid var(--border); color: var(--muted);
    border-radius: 20px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-weight: 600; }
  .preset-chip.active { background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #05060d; border-color: transparent; }
  .meal-block { margin-bottom: 16px; }
  .meal-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--cyan);
    text-transform: uppercase; letter-spacing: .05em; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
  .meal-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; }
  .meal-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .meal-item-sub { font-size: 11px; color: var(--muted); }
  .meal-kcal { color: var(--cyan); font-weight: 700; white-space: nowrap; }
  .icon-btn { padding: 4px 8px !important; font-size: 13px; }
  .water-glasses { display: flex; gap: 6px; flex-wrap: wrap; font-size: 22px; }
  .glass { opacity: .3; transition: opacity .2s; }
  .glass.full { opacity: 1; }
  .nutri-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
  .nutri-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #05060d; }
  .nutri-a, .tag.nutri-a { background: #2e9b4f; color: #fff; }
  .nutri-b, .tag.nutri-b { background: #86bc2a; color: #05060d; }
  .nutri-c, .tag.nutri-c { background: #fcd53f; color: #05060d; }
  .nutri-d, .tag.nutri-d { background: #f08000; color: #fff; }
  .nutri-e, .tag.nutri-e { background: #e2231a; color: #fff; }
  .tag.nutri-a, .tag.nutri-b, .tag.nutri-c, .tag.nutri-d, .tag.nutri-e { border: none; font-weight: 700; }

  /* Lernen */
  .flashcard { background: linear-gradient(135deg, var(--card2), var(--card)); border: 1px solid var(--border);
    border-radius: 16px; padding: 28px 20px; text-align: center; min-height: 130px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
  .flashcard .side-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
  .flashcard .content { font-size: 18px; font-weight: 600; }
  .rating-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
  .rating-buttons button { font-size: 13px; padding: 10px 4px; }
  .rate-again { background: var(--red); color: #fff; }
  .rate-hard { background: #ff8a5c; color: #05060d; }
  .rate-good { background: var(--green); color: #05060d; }
  .rate-easy { background: var(--cyan); color: #05060d; }
  .deck-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .deck-item:last-child { border-bottom: none; }
  .due-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: rgba(0,229,255,.12); color: var(--cyan); border: 1px solid rgba(0,229,255,.3); }

  /* Übungssuche (Modal) */
  .modal-overlay { position: fixed; inset: 0; background: rgba(5,6,13,.8); backdrop-filter: blur(4px);
    z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
  .modal { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px;
    width: 100%; max-width: 620px; max-height: 88vh; display: flex; flex-direction: column; }
  .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .modal-head h2 { margin: 0; font-size: 14px; color: var(--cyan); text-transform: uppercase; letter-spacing: .06em; }
  .modal-body { overflow-y: auto; flex: 1; }
  .exercise-result { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .exercise-result:last-child { border-bottom: none; }
  .exercise-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--card2); flex-shrink: 0; }
  .exercise-info { flex: 1; min-width: 0; }
  .exercise-name { font-size: 14px; font-weight: 600; }
  .exercise-meta { font-size: 11px; color: var(--muted); }
  .exercise-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .exercise-actions button { padding: 7px 12px; font-size: 12px; }
  .exercise-images { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .exercise-detail-img { width: 48%; border-radius: 10px; }
  .exercise-steps { font-size: 13px; line-height: 1.6; color: var(--text); padding-left: 18px; margin: 0 0 14px; }

  /* Strecken / GPS-Aktivitäten */
  .karte { height: 300px; border-radius: 12px; overflow: hidden; margin-top: 12px; background: var(--card2); }
  /* Leaflet bringt eigene helle Farben mit - hier ans dunkle Design anpassen */
  .leaflet-container { background: #0d1121; font-family: inherit; }
  /* Karten-Kacheln ans dunkle Design anpassen.
     Reihenfolge ist entscheidend: erst invertieren (heller Kartenhintergrund
     wird dunkel), dann den Farbton zurückdrehen, damit Wasser wieder blau und
     Parks wieder grün wirken - sonst kommen Falschfarben heraus. */
  .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9) saturate(.55); }
  .leaflet-control-attribution { background: rgba(5,6,13,.75) !important; color: var(--muted) !important; font-size: 10px; }
  .leaflet-control-attribution a { color: var(--cyan) !important; }
  .leaflet-control-zoom a { background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
  .splits { display: flex; flex-direction: column; gap: 6px; }
  .split-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
  .split-km { width: 46px; color: var(--muted); flex-shrink: 0; }
  .split-bar { flex: 1; height: 14px; background: var(--card2); border-radius: 4px; overflow: hidden; }
  .split-bar > div { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); border-radius: 4px; }
  .split-zeit { width: 56px; text-align: right; font-weight: 700; color: var(--cyan); flex-shrink: 0; }
  .split-hr { width: 34px; text-align: right; font-size: 11px; color: var(--red); flex-shrink: 0; }
  .segment-block { border-bottom: 1px solid var(--border); padding: 12px 0; }
  .segment-block:last-child { border-bottom: none; }
  .segment-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .segment-liste { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
  .segment-liste li { display: flex; justify-content: space-between; padding: 4px 0; color: var(--muted); }
  .segment-liste li.bestzeit { color: var(--green); font-weight: 700; }
  input[type=file] { padding: 8px; font-size: 13px; }
  .stat { background: var(--card2); border-radius: 12px; padding: 12px; text-align: center; border: 1px solid var(--border); }
  .stat .n { font-size: 22px; font-weight: 800; color: var(--cyan); }
  .stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; }

  .reward-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 10px; }
  .reward-item:last-child { border-bottom: none; }
  .reward-item.locked { opacity: .5; }

  .footer-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
  /* Mit Rückgängig-Knopf muss der Toast anklickbar sein - ohne bleibt er
     durchlässig, damit er nie einen Knopf darunter blockiert. */
  .toast {
    position: fixed; left: 50%; z-index: 30;
    /* Über der Tab-Leiste, nicht dahinter - und über der Home-Leiste des iPhones */
    bottom: calc(var(--tableiste) + env(safe-area-inset-bottom) + 14px);
    display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
    background: linear-gradient(90deg, var(--cyan), var(--green)); color: #05060d;
    padding: 10px 20px; border-radius: 12px;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.45), 0 0 20px rgba(0,229,255,.35);
    /* Er fährt von unten herein statt aus dem Nichts zu erscheinen - aus
       derselben Richtung, in der er auch wieder verschwindet. Hinein darf er
       sich Zeit lassen, hinaus geht es schneller: der Weg zurück ist Antwort
       des Systems, nicht Ankündigung. */
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(150%) scale(.96);
    transition: opacity 140ms var(--ease-out), transform 180ms var(--ease-out);
  }
  .toast.show {
    opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity 200ms var(--ease-out), transform 280ms var(--ease-out);
  }
  .toast.mit-undo { pointer-events: auto; }
  .toast-undo {
    background: rgba(5,6,13,.22); color: #05060d; border: none; border-radius: 8px;
    padding: 5px 10px; font-size: 12px; font-weight: 800; flex-shrink: 0;
  }
  .loading { text-align: center; color: var(--muted); padding: 60px 0; }

  .avatar-wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
  .avatar-svg-holder { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; width: 260px; }
  #muscleAvatar { width: 100%; }
  .avatar-flip { font-size: 12px; padding: 6px 12px; }
  .avatar-info { flex: 1 1 220px; min-width: 200px; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
  .avatar-info h3 { margin: 0 0 8px; font-size: 15px; color: var(--cyan); }
  .avatar-info .progress-pct { font-size: 26px; font-weight: 800; }
  .avatar-info .progress-pct.pos { color: var(--green); }
  .avatar-info .progress-pct.neutral { color: var(--muted); }

  .workout-timer { font-size: 40px; font-weight: 800; text-align: center; letter-spacing: .04em; color: var(--cyan); text-shadow: 0 0 20px rgba(0,229,255,.4); }
  .workout-exercise { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
  .workout-exercise-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .workout-exercise-title strong { font-size: 14px; }
  .set-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 12px; margin: 3px 4px 3px 0; }
  .set-badge.warmup { color: var(--yellow); border-color: rgba(255,217,61,.3); }
  .set-badge.pr { color: var(--green); border-color: rgba(57,255,157,.4); background: rgba(57,255,157,.08); }
  .set-badge button { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; }
  .set-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
  .set-form input { min-width: 70px; }
  .set-form label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .last-weight-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }

  /* --- Trainingsbildschirm: Routinen, Pausentimer, schnelles Eintragen --- */
  .routine-läuft { text-align: center; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
  .routine-wahl { display: flex; flex-direction: column; gap: 8px; }
  .routine-knopf {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--card2); border: 1px solid var(--border); color: var(--text);
    border-radius: 12px; padding: 12px 14px; font-size: 14px;
  }
  .routine-knopf.vorschlag { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.18); }
  .routine-icon { font-size: 22px; flex-shrink: 0; }
  .routine-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
  .routine-text small { color: var(--muted); font-size: 11px; font-weight: 400; }
  .routine-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan);
    border: 1px solid rgba(0,229,255,.4); border-radius: 20px; padding: 3px 8px; flex-shrink: 0; }

  .routine-block { border-bottom: 1px solid var(--border); padding: 4px 0; }
  .routine-block:last-of-type { border-bottom: none; }
  .routine-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; cursor: pointer; font-size: 14px; }
  .routine-inhalt { padding: 4px 0 12px; }
  .routine-uebung { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
  .routine-ziele { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; flex-shrink: 0; }
  .routine-ziele input { width: 48px; min-width: 0; padding: 5px 4px; font-size: 12px; text-align: center; }
  .routine-ziele .pause-select { width: 62px; min-width: 0; padding: 5px 4px; font-size: 12px; }
  .plan-block { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--card2); }
  .routine-ziele .paar-knopf { padding: 5px 8px; font-size: 13px; line-height: 1; }
  .routine-ziele .paar-knopf.aktiv { color: var(--cyan); border-color: rgba(0,229,255,.5); }
  /* Supersatz-Paar optisch zusammenziehen */
  .workout-exercise.paar-oben { margin-bottom: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
  .workout-exercise.paar-unten { border-top-left-radius: 4px; border-top-right-radius: 4px;
    border-left: 2px solid rgba(0,229,255,.4); }
  .paar-marke { color: var(--cyan); }

  /* Notiz zur Übung (Maschineneinstellung) */
  .uebungs-notiz { background: rgba(255,217,61,.08); border: 1px solid rgba(255,217,61,.25);
    color: var(--yellow); border-radius: 8px; padding: 6px 10px; font-size: 12px;
    margin-top: 8px; cursor: pointer; }

  /* Progressionsvorschlag */
  .vorschlag { display: flex; align-items: center; gap: 10px; justify-content: space-between;
    border-radius: 10px; padding: 8px 10px; margin-top: 8px; font-size: 12px; line-height: 1.45; }
  .vorschlag button { flex-shrink: 0; padding: 6px 12px; font-size: 12px; font-weight: 700; }
  .vorschlag.steigern { background: rgba(57,255,157,.08); border: 1px solid rgba(57,255,157,.3); color: var(--green); }
  .vorschlag.steigern button { border-color: rgba(57,255,157,.45); color: var(--green); }
  .vorschlag.zu-hoch { background: rgba(255,92,122,.08); border: 1px solid rgba(255,92,122,.3); color: var(--red); }
  .vorschlag.zu-hoch button { border-color: rgba(255,92,122,.45); color: var(--red); }
  .vorschlag.halten { background: var(--card); border: 1px solid var(--border); color: var(--muted); }

  /* Rekorde und Plateau-Warnung */
  .plateau-box { background: rgba(255,217,61,.08); border: 1px solid rgba(255,217,61,.3);
    color: var(--yellow); border-radius: 10px; padding: 10px 12px; font-size: 12px;
    line-height: 1.5; margin-bottom: 12px; }
  .rekord-zeile { padding: 9px 0; border-bottom: 1px solid var(--border); }
  .rekord-zeile:last-child { border-bottom: none; }
  .rekord-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
  .rekord-1rm { color: var(--cyan); font-weight: 800; white-space: nowrap; }
  .rekord-detail { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--muted); margin-top: 3px; }

  /* --- Unteransichten im Kraft-Tab --- */
  .unterleiste { display: flex; gap: 6px; margin-bottom: 14px; }
  .unter-tab {
    flex: 1; background: var(--card2); border: 1px solid var(--border); color: var(--muted);
    border-radius: 12px; padding: 11px 8px; font-size: 13px; font-weight: 600;
  }
  .unter-tab.active {
    background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(168,85,247,.18));
    border-color: var(--cyan); color: var(--text);
  }
  /* Nur die Karten der gewählten Ansicht zeigen. Das Umschalten passiert rein
     über CSS - so bleibt der Zustand der Formulare erhalten. */
  #panel-kraft[data-ansicht="training"]   .kraft-auswertung { display: none; }
  #panel-kraft[data-ansicht="auswertung"] .kraft-training   { display: none; }
  /* Drei Ansichten: Eintragen ist eine Tagesarbeit, Planen eine Wochenarbeit.
     Zusammen waren sie 4,5 Bildschirmlaengen, davon 71 % Meal Prep - bis zur
     Eintragsliste musste man an der ganzen Wochenplanung vorbeiscrollen. */
  #panel-nutrition[data-ansicht="tagebuch"]   .ess-auswertung,
  #panel-nutrition[data-ansicht="tagebuch"]   .ess-planen     { display: none; }
  #panel-nutrition[data-ansicht="planen"]     .ess-tagebuch,
  #panel-nutrition[data-ansicht="planen"]     .ess-auswertung { display: none; }
  #panel-nutrition[data-ansicht="auswertung"] .ess-tagebuch,
  #panel-nutrition[data-ansicht="auswertung"] .ess-planen     { display: none; }
  /* Läuft ein Training, zählt nur das laufende Training. */
  #panel-kraft.training-laeuft .card,
  #panel-kraft.training-laeuft .unterleiste { display: none; }
  #panel-kraft.training-laeuft #workoutContainer { display: block; }
  #panel-kraft.training-laeuft #workoutContainer .card { display: block; }

  /* --- Kopfzeile "Heute" --- */
  .heute-karte:empty { display: none; }
  .heute-zeile { display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
  .heute-ziel { color: var(--cyan); font-weight: 700; white-space: nowrap; }
  .heute-start {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: linear-gradient(90deg, var(--cyan), var(--purple)); color: #05060d;
    border: none; border-radius: 14px; padding: 14px 16px; font-size: 15px;
  }
  .heute-start > span:first-child { font-size: 22px; }
  .heute-start-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .heute-start-text small { font-size: 11px; font-weight: 500; opacity: .75; }
  .heute-pfeil { font-size: 15px; opacity: .8; }

  /* --- Einklappbare Erklärtexte --- */
  .erklaerung { display: none; font-size: 11px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
  .erklaerung.offen { display: block; }
  .erklaerung-knopf { display: block; margin-top: 12px; padding: 6px 12px; font-size: 11px; }

  /* --- Ballaststoffe, Zucker, Salz unter den Makros --- */
  .zusatz-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
    padding-top: 12px; border-top: 1px solid var(--border); }
  .zusatz-wert { display: flex; flex-direction: column; gap: 1px; flex: 1 1 70px;
    background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
    padding: 7px 10px; font-size: 14px; font-weight: 700; }
  .zusatz-wert small { font-size: 10px; font-weight: 500; color: var(--muted); }
  .zusatz-hinweis { font-size: 11px; color: var(--muted); margin-top: 6px; }

  /* --- Gemessener Kalorienverbrauch --- */
  .verbrauch-box { background: var(--card2); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; margin-top: 14px; font-size: 13px; }
  .verbrauch-box.wartet { color: var(--muted); }
  .verbrauch-box.wartet strong { color: var(--text); display: block; margin-bottom: 4px; }
  .verbrauch-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .verbrauch-zahl { color: var(--cyan); font-size: 19px; font-weight: 800; white-space: nowrap; }
  .verbrauch-detail { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
  .verbrauch-vergleich { font-size: 12px; margin-top: 6px; color: var(--muted); }
  .verbrauch-vergleich.auffaellig { color: var(--yellow); font-weight: 600; }
  .verbrauch-box button { margin-top: 10px; padding: 7px 14px; font-size: 12px; }
  .verbrauch-hinweis { font-size: 11px; margin-top: 6px; line-height: 1.5; }

  /* --- Karte "Übungen" --- */
  .uebung-block { border-bottom: 1px solid var(--border); }
  .uebung-block:last-child { border-bottom: none; }
  .uebung-block .rekord-kopf { padding: 10px 0; cursor: pointer; }
  .uebung-pfeil { color: var(--muted); margin-left: 6px; }
  .uebung-detail { padding: 0 0 14px; }
  .notiz-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
    padding: 7px 10px; margin-top: 10px; font-size: 12px; }
  .notiz-zeile button { padding: 5px 10px; font-size: 11px; flex-shrink: 0; }
  .letzte-saetze { margin-top: 10px; }
  .letzte-saetze .set-badge { gap: 4px; }

  /* Pausentimer */
  .rest-box { text-align: center; margin-top: 12px; padding: 12px; border-radius: 12px;
    background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.3); }
  .rest-box.fertig { background: rgba(57,255,157,.1); border-color: rgba(57,255,157,.45); }
  .rest-zeit { font-size: 30px; font-weight: 800; color: var(--cyan); letter-spacing: .04em; }
  .rest-box.fertig .rest-zeit { color: var(--green); }
  .rest-text { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .rest-knoepfe { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
  .pause-wahl { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap;
    margin-top: 12px; font-size: 12px; color: var(--muted); }

  /* Sätze eintragen */
  .workout-exercise.geschafft { border-color: rgba(57,255,157,.35); }
  .ziel-text { display: block; font-size: 11px; color: var(--cyan); margin-bottom: 6px; }
  .vorlage-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 4px; }
  .vorlage-label { font-size: 11px; color: var(--muted); width: 100%; }
  .vorlage-chip { background: var(--card); border: 1px dashed var(--border); color: var(--muted);
    border-radius: 20px; padding: 5px 11px; font-size: 12px; }
  .vorlage-chip:active { border-color: var(--cyan); color: var(--cyan); }
  .satz-eingabe { display: flex; gap: 8px; margin-top: 8px; }
  /* min-width:0 auf BEIDEN Ebenen: Flex-Elemente schrumpfen sonst nicht unter
     ihre Inhaltsbreite, und Eingabefelder haben global min-width:100px.
     Ohne das läuft die Zeile am Handy über den Rand hinaus. */
  .zahl-feld { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
  .zahl-feld input { flex: 1; min-width: 0; width: 100%; text-align: center; font-size: 16px; font-weight: 700; padding: 10px 4px; }
  .zahl-feld button { padding: 10px 0; width: 36px; flex-shrink: 0; font-size: 17px; line-height: 1; }
  .satz-knoepfe { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
  .satz-knoepfe > button:first-child { flex: 1; }
  .satz-knoepfe label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }

  /* --- Wochenvolumen je Muskelgruppe --- */
  .volumen-zeile { padding: 8px 0; cursor: pointer; }
  .volumen-kopf { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
  .volumen-kopf span:last-child { font-weight: 700; }
  .volumen-bar { position: relative; height: 8px; background: var(--card2); border-radius: 20px; overflow: hidden; }
  /* Zwei Füllungen übereinander: blass = inklusive indirektem Volumen,
     kräftig = nur direkte Zielarbeit. */
  .volumen-fuellung { position: absolute; left: 0; top: 0; height: 100%; border-radius: 20px; transition: width .3s; }
  .volumen-fuellung.indirekt { opacity: .35; }
  /* Markierung der Untergrenze - ab hier ist der Zielbereich erreicht */
  .volumen-marke { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,.35); }
  .volumen-info { background: var(--card2); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; margin: 8px 0; font-size: 13px; }
  .luecken-liste { display: flex; flex-wrap: wrap; gap: 6px; }
  .luecke-chip { background: rgba(255,217,61,.1); border: 1px solid rgba(255,217,61,.3); color: var(--yellow);
    border-radius: 20px; padding: 4px 10px; font-size: 12px; }

  .rating-scale { display: flex; justify-content: space-between; gap: 4px; margin: 16px 0 6px; }
  .rating-option { flex: 1; text-align: center; cursor: pointer; padding: 10px 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--card2); font-size: 10px; color: var(--muted);
    transition: transform .15s var(--ease-out), border-color .15s ease, color .15s ease; }
  .rating-option .dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 6px; background: var(--border); }
  .rating-option:active { transform: scale(.95); }
  @media (hover: hover) and (pointer: fine) {
    .rating-option:hover { border-color: var(--cyan); }
  }
  .rating-option:nth-child(1) .dot { background: #ff5c7a; }
  .rating-option:nth-child(2) .dot { background: #ff8a5c; }
  .rating-option:nth-child(3) .dot { background: #ffb85c; }
  .rating-option:nth-child(4) .dot { background: #ffd93d; }
  .rating-option:nth-child(5) .dot { background: #c3e05c; }
  .rating-option:nth-child(6) .dot { background: #7ee06a; }
  .rating-option:nth-child(7) .dot { background: #39ff9d; }
  .workout-summary { text-align: center; margin-bottom: 6px; }
  .workout-summary .n { font-size: 28px; font-weight: 800; color: var(--cyan); }

  /* --- Wer weniger Bewegung eingestellt hat, bekommt weniger Bewegung ---
     Nicht gar keine: Farben und Deckkraft dürfen weiter wechseln, die tragen
     Bedeutung. Weg fällt alles, was sich über den Schirm schiebt, dreht oder
     hüpft - genau das löst Übelkeit aus. Der JS-Teil fragt dasselbe über
     bewegungReduziert() ab und überspringt dort die Abgänge. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .toast { transform: translateX(-50%) !important; }
    .toast.show { transform: translateX(-50%) !important; }
    .tab.active .tab-icon { transform: none; }
  }

/* --- Zusammenhänge (Belohnungen-Tab) --- */
/* Die beiden Reihen nebeneinander, damit "A gegen B" in einer Zeile lesbar
   bleibt; der Versatz darunter über die volle Breite. */
.zh-wahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.zh-wahl select { font-size: 13px; padding: 8px 10px; }
.zh-wahl #zhReiheA, .zh-wahl #zhReiheB { flex: 1 1 0; min-width: 0; }
.zh-wahl #zhVersatz { flex: 1 1 100%; min-width: 0; }
.zh-gegen { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.zh-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zh-r { font-size: 26px; font-weight: 800; white-space: nowrap; }
.zh-wort { font-size: 13px; color: var(--text); }
.zh-sub { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.zh-hinweis { font-size: 11px; color: var(--muted); line-height: 1.55; margin-top: 10px; }
/* Zu wenig Daten ist keine Fehlermeldung, sondern eine Aufgabe - deshalb
   derselbe Balken, den auch der XP-Fortschritt benutzt. */
.zh-leer { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* --- Wochenrückblick (Belohnungen-Tab) --- */
.wr-text { font-size: 13px; line-height: 1.7; color: var(--text); margin-bottom: 14px; }
.wr-text div { display: flex; gap: 6px; }
.wr-einheit { font-size: 13px; font-weight: 500; color: var(--muted); }
/* Der Vergleich zur Vorwoche sitzt in der Kachel, klein unter dem Wert -
   ohne ihn ist eine Zahl nur eine Zahl. */
.wr-diff { display: block; font-size: 11px; font-weight: 700; margin-top: 3px; }

/* Noch nicht beim Server angekommen. Klein, aber sichtbar - ohne diesen Hinweis
   hält man eine offline gemachte Änderung für gespeichert. */
.offen-hinweis {
  font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: rgba(255,217,61,.12); color: var(--yellow);
  border: 1px solid rgba(255,217,61,.3);
}

/* --- Empfangsprotokoll des Health-Kurzbefehls --- */
.lieferung { border-left: 2px solid var(--green); padding: 6px 0 6px 10px; margin-top: 8px; font-size: 12px; }
.lieferung.schlecht { border-left-color: var(--red); }
.lieferung-kopf { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.lieferung-status { white-space: nowrap; font-weight: 700; }
.lieferung-gut { color: var(--green); margin-top: 2px; }
.lieferung-fehler { color: var(--red); margin-top: 2px; line-height: 1.45; }
/* Der Rohtext ist beim Einrichten das Wichtigste: daran sieht man, ob der
   Kurzbefehl überhaupt einen Wert mitschickt oder ein leeres Feld. */
.lieferung-roh { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted);
  background: var(--card2); border-radius: 6px; padding: 4px 7px; margin-top: 4px; word-break: break-all; }
.lieferung-leer { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* --- Herzfrequenzzonen --- */
.zone-kopf { display: flex; align-items: baseline; gap: 10px; }
.zone-anteil { font-size: 26px; font-weight: 800; }
.zone-wort { font-size: 13px; color: var(--muted); }
.zone-sub { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.zone-liste { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.zone-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.zone-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.zone-name { flex: 1; }
.zone-bereich { color: var(--muted); white-space: nowrap; }
.zone-hinweis { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.zone-leer { font-size: 13px; color: var(--muted); line-height: 1.5; }
.zone-vorschau { font-size: 12px; font-weight: 600; min-height: 16px; margin-top: -4px; }

/* --- Bewegungskalorien direkt in der Tagesansicht --- */
.verbrauch-zeile { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.verbrauch-flamme { font-size: 16px; flex-shrink: 0; }
.verbrauch-zeile input { flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px; }
.verbrauch-folge { font-size: 12px; margin-top: 6px; }

/* --- Routinen nach Plan gruppiert --- */
.routine-gruppe { margin-bottom: 16px; }
.routine-gruppe:last-of-type { margin-bottom: 0; }
.routine-gruppe-kopf { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.routine-gruppe-kopf small { font-weight: 700; color: var(--muted); margin-left: 6px; }
.routine-gruppe-knoepfe { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.routine-aktiv-marke { font-size: 10px; font-weight: 800; color: var(--green);
  border: 1px solid rgba(57,255,157,.4); border-radius: 20px; padding: 2px 8px; }
/* Ruhende Pläne bleiben sichtbar, treten aber zurück - gelöscht ist nichts. */
.routine-gruppe.aktiv .routine-gruppe-kopf { color: var(--green); border-bottom-color: rgba(57,255,157,.35); }
.routine-gruppe.ruht .routine-block { opacity: .5; }

/* --- Meal Prep --- */
.mp-leer { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 4px 0 8px; }
.mp-vorrat { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); }
.mp-vorrat:last-of-type { border-bottom: none; }
.mp-vorrat-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-vorrat-mitte small, .mp-zeile-name small, .mp-einkauf-name small {
  font-size: 11px; color: var(--muted); }
.mp-knoepfe { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.mp-knoepfe button { padding: 6px 12px; font-size: 12px; white-space: nowrap; }

.mp-plan { border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  margin-bottom: 10px; background: var(--card2); }
.mp-plan-kopf { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px; }
/* Die Tagessumme ist der eigentliche Zweck des Tagesplans: sie sagt VOR dem
   Kochen, ob der Tag aufgeht. Deshalb steht sie direkt unter dem Namen. */
.mp-summe { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.mp-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.mp-zeile-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mp-einkauf-kopf { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.mp-einkauf { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.mp-einkauf:last-of-type { border-bottom: none; }
.mp-einkauf.erledigt .mp-einkauf-name { text-decoration: line-through; color: var(--muted); }
.mp-haken { font-size: 16px; flex-shrink: 0; }
.mp-einkauf-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-menge { color: var(--cyan); font-weight: 700; white-space: nowrap; }

.mp-woche { display: flex; flex-direction: column; gap: 6px; }
.mp-wochentag { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mp-wochentag > span { width: 28px; color: var(--muted); flex-shrink: 0; }
.mp-wochentag select { flex: 1; min-width: 0; font-size: 13px; padding: 7px 10px; }

/* ---- Meal Prep: Vorschläge und Vorlieben ---------------------------------
   Die Karte ist lang, deshalb tragen die Vorschläge sichtbare Ränder und der
   Rest nicht: so erkennt man beim Scrollen sofort, wo ein Gericht anfängt und
   aufhört. */
.mp-slots { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.mp-slot { padding: 6px 12px; font-size: 12px; border-radius: 999px;
  background: var(--card2); color: var(--muted); border: 1px solid var(--border); }
.mp-slot.an { background: var(--accent); color: #fff; border-color: var(--accent); }
.mp-ziel { font-size: 11px; color: var(--muted); margin-bottom: 10px; }

.mp-bewaehrt { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.mp-chip { padding: 5px 10px; font-size: 12px; border-radius: 999px;
  background: var(--card2); color: var(--fg); border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 5px; }
.mp-chip small { font-size: 10px; color: var(--muted); }
.mp-chip.stark { border-color: var(--accent); }
/* Gemiedenes wird durchgestrichen statt nur eingefärbt - das liest sich auch
   ohne Farbe als "kommt nicht vor". */
.mp-chip.aus { opacity: .55; text-decoration: line-through; }
.mp-chip.gut { border-color: var(--green); color: var(--green); }

.mp-neu { width: 100%; padding: 9px; font-size: 13px; margin-bottom: 10px; }

.mp-vorschlag { border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  margin-bottom: 10px; background: var(--card2); }
.mp-vorschlag-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.mp-vorschlag-kopf small { font-size: 11px; color: var(--muted); }
.mp-werte { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px;
  color: var(--muted); margin-bottom: 8px; }
.mp-werte span:first-child { color: var(--fg); font-weight: 600; }
.mp-hinweis { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
/* Anmerkungen sagen, wo das Gericht das Ziel NICHT trifft. Sie stehen bewusst
   am Gericht und nicht im Kleingedruckten - sonst kocht man vier Portionen und
   merkt erst beim Eintragen, dass 19 g Eiweiß fehlen. */
.mp-anmerkung { font-size: 12px; line-height: 1.5; margin-bottom: 8px;
  padding: 7px 9px; border-radius: 8px; background: var(--card);
  border-left: 3px solid var(--yellow); color: var(--fg); }
.mp-zutaten { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px;
  color: var(--muted); margin-bottom: 10px; }
.mp-zutaten b { color: var(--fg); font-weight: 600; }
.mp-schritte { margin: 0 0 10px; padding-left: 20px; font-size: 12px;
  line-height: 1.6; color: var(--fg); }
.mp-schritte li { margin-bottom: 4px; }

.mp-vegi { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mp-vegi small { font-size: 11px; color: var(--muted); }
.mp-gruppe { margin-bottom: 6px; }
.mp-gruppe > small { font-size: 11px; color: var(--muted); }

@media (hover: hover) {
  .mp-slot:hover, .mp-chip:hover { border-color: var(--accent); }
}

/* ---- Ernährung: Nährwerte vor dem Eintragen und je Mahlzeit ---------------
   Die Zahl steht fett, die Bezeichnung daneben mager: beim Überfliegen sucht
   man den Wert, nicht das Wort. */
.naehrwert-zeile { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px;
  color: var(--muted); line-height: 1.7; }
.naehrwert-zeile b { color: var(--fg); font-weight: 700; }

.pending-hundert { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.pending-hundert button { padding: 3px 8px; font-size: 11px; flex-shrink: 0; }
.pending-korrigiert { font-size: 11px; color: var(--yellow); margin-bottom: 8px; }
/* Zwei Spalten: acht Nährwerte untereinander wären eine Bildschirmlänge. */
.pending-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  margin: 8px 0; }
.pending-felder label { display: flex; flex-direction: column; gap: 2px; }
.pending-felder small { font-size: 10px; color: var(--muted); }
.pending-felder input { padding: 6px 8px; font-size: 13px; width: 100%; }
.pending-hinweis { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 8px; }
.pending-vorschau { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.pending-vorschau small { font-size: 11px; color: var(--muted); display: block; margin-bottom: 3px; }

.meal-makros { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px;
  color: var(--muted); margin: -2px 0 6px; }
.meal-makros b { color: var(--fg); font-weight: 600; }
/* Das "+" heißt: mindestens so viel, es fehlen Angaben. Kein Fehler, aber die
   Summe ist eine Untergrenze. */
.meal-makros i { font-style: normal; color: var(--yellow); }
.meal-item.bearbeiten { flex-direction: column; align-items: stretch; gap: 6px;
  background: var(--card2); border-radius: 10px; padding: 10px; }

/* ---- Meal Prep: Gerichtsfotos ---------------------------------------------
   Randlos oben in der Karte, feste Höhe, zugeschnitten statt verzerrt - die
   Fotos kommen aus unterschiedlichen Quellen und haben jedes Seitenverhältnis.
   Der Nachweis steht am Bild, weil die Lizenzen ihn verlangen; klein genug,
   um nicht zu stören, groß genug, um lesbar zu sein. */
.mp-bild { margin: -12px -12px 10px; position: relative; }
.mp-bild img { width: 100%; height: 150px; object-fit: cover; display: block;
  border-radius: 11px 11px 0 0; background: var(--card); }
.mp-bild small { position: absolute; right: 6px; bottom: 6px; font-size: 9px;
  color: rgba(255,255,255,.82); background: rgba(0,0,0,.55);
  padding: 2px 6px; border-radius: 6px; max-width: 70%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Training: Aufwärmsätze und die Stelle im Training --------------------
   Aufwärmsätze sehen anders aus als Arbeitssätze, sonst tippt man beim
   Übernehmen versehentlich das Aufwärmgewicht als Arbeitssatz ein. */
.vorlage-chip.warmup { opacity: .65; border-style: dashed; }
/* Die Reihenfolge ist die stille Erklärung für ein abweichendes Gewicht.
   Ruhig, solange sie nichts bedeutet - hervorgehoben, sobald sie den
   Vergleich verzerrt. */
.position-hinweis { display: block; width: 100%; font-size: 11px; line-height: 1.45;
  color: var(--yellow); margin-top: 6px; }
.position-hinweis.ruhig { color: var(--muted); }
.position-hinweis.einspruch { padding: 7px 9px; border-radius: 8px;
  background: var(--card2); border-left: 3px solid var(--yellow); margin: 8px 0; }