/* Design-Tokens (Schwarz/Weiss + Gold, Motion-Vertrag) ausgelagert nach tokens.css —
   EINE Quelle, geteilt mit dem Coach-Panel (admin.css). @import muss ganz oben stehen. */
@import url("/static/css/tokens.css");

  /* Client-spezifischer Layout-Token: Freiraum unter der fixen Tab-Leiste (inkl. iPhone-Home-Leiste) */
  :root { --tabbar-clearance: calc(7.5rem + env(safe-area-inset-bottom)); }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; background:var(--bg); }
  html { height:100%; overflow:hidden; -webkit-tap-highlight-color: transparent; }   /* tap-highlight aus + Dokument unbeweglich */
  /* APP-SHELL FIXIERT: Der Dokument-/Fenster-Scroller bewegt sich NIE — kein iOS-Gummiband,
     keine wandernde Sticky-Kopfleiste. Gescrollt wird ausschliesslich im inneren .wrap-Container
     (overscroll-behavior:contain). Exakt das Muster, mit dem der Chat seinen Header schon
     bombenfest oben haelt. Die fixe Kopfleiste (.appbar/.subbar, sticky top:0) klebt damit
     garantiert an der Decke, egal ob man wischt, ueberscrollt oder Tabs wechselt. */
  body {
    /* An den SICHTBAREN Viewport gebunden: iOS SCHWENKT beim Tippen die sichtbare Fläche hoch
       (Tastatur deckt unten ab, der fokussierte Bereich rutscht hoch). --vvtop ist genau dieser
       Versatz -> die fixe Shell geht mit, sonst rutscht ALLES weg (Header verschwindet, Chat weiß).
       --vvtop wird in 15_fx.js NUR gesetzt, solange ein Eingabefeld aktiv ist; sonst hart 0
       (kein Mitwandern beim Doppel-Tipp). Höhe folgt --vvh (Fläche schrumpft von unten). */
    position: fixed; left: 0; right: 0; top: var(--vvtop, 0px); height: var(--vvh, 100%); overflow: hidden;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    accent-color: var(--gold);   /* native Checkbox/Radio/Datum -> Gold */
    letter-spacing: -.005em;
  }
  ::selection { background: rgba(251,191,36,.3); color: var(--ink); }
  ::-moz-selection { background: rgba(251,191,36,.3); color: var(--ink); }
  /* BOUNCE-SICHER gegen den hellen Aufblitzer am oberen Rand ("blitzt noch"): jede dunkle
     Kopfleiste zieht ihre Farbe als MITSCROLLENDES ::before weit nach oben (100vh). Egal wie
     weit iOS am oberen Rand federt — darüber ist IMMER Schwarz, nie hell. Bei Ruhe liegt die
     Verlängerung off-screen über dem Kopf (kein dunkler Streifen, und nur dort, wo es einen
     dunklen Kopf gibt — heller Login-Screen bleibt unberührt). position:absolute -> in den
     Flex-Köpfen (.appbar/.subbar) KEIN Flex-Item, Layout bleibt unberührt. */
  .appbar::before, .subbar::before, .kal-header::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
    height: 100vh; background: var(--ink); pointer-events: none;
  }
  .wrap {
    position: absolute; inset: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: none;   /* none statt contain: killt das iOS-Gummiband am oberen Rand ("Decke runterziehen") — kein PTR vorhanden, also gefahrlos */
    max-width: 480px; margin: 0 auto;
    padding: 1.25rem 1.25rem 3rem;
  }
  body.with-tabs .wrap { padding-bottom: var(--tabbar-clearance); }

  /* ===== Tastatur offen (body.kb-open aus 15_fx.js) =====
     Native Apps blenden die Boden-Leiste aus, sobald man tippt. Genau das: die fixe Tab-Leiste und
     alle schwebenden Boden-Buttons (FAB) verschwinden, solange die Tastatur offen ist — sonst kleben
     sie über der Tastatur und „blitzen" beim Auf-/Zugehen. Der Body ist bereits auf die sichtbare
     Höhe (--vvh) geschrumpft, die Eingabe sitzt also sauber direkt über der Tastatur.
     Die volle Tabbar-Clearance unten entfällt dann (kein Tabbar mehr da -> kein Leerraum). */
  body.kb-open .tabbar { transform: translateX(-50%) translateY(110%); pointer-events: none; }
  body.with-tabs.kb-open .wrap { padding-bottom: 1.5rem; }
  h1 { color: var(--text); margin: 0 0 .25rem; font-size: 1.75rem; letter-spacing: -.02em; }
  h2 { margin: 0 0 .75rem; font-size: 1.15rem; letter-spacing: -.015em; }
  h3 { margin: 0 0 .75rem; font-size: 1rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .sub { color: var(--muted); margin: 0 0 2rem; }
  .card {
    background: var(--card);
    border:1px solid var(--border);
    border-radius:var(--r-card);
    padding:1.25rem;
    box-shadow: var(--sh-1);
    transition: box-shadow var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);
  }
  /* Lift nur dort, wo ein echter Cursor existiert — nie auf Touch (kein klebendes :hover auf iOS) */
  @media (hover:hover) and (pointer:fine) {
    .card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
  }
  .card + .card { margin-top: 1rem; }
  p { margin: 0 0 1rem; line-height: 1.5; }
  .muted { color: var(--muted); }
  .small { color: var(--muted); font-size: .85rem; }

  form { display: flex; flex-direction: column; gap: .75rem; }
  label { font-size: .9rem; font-weight: 500; }
  input, select {
    width: 100%;
    font-size: 16px;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
  }
  input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
  }
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.5rem;
  }
  textarea {
    width: 100%; font-size: 16px; padding: .7rem .85rem;
    border: 1px solid var(--border); border-radius: 11px;
    background: #fff; color: var(--text); font-family: inherit;
    resize: vertical; line-height: 1.45;
    transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
  }
  textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
  button {
    font-size: 1rem;
    font-weight: 500;
    padding: .75rem 1rem;
    min-height: 44px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    color: var(--text);                       /* iOS malt Button-Text sonst system-blau */
    -webkit-text-fill-color: currentColor;    /* hartnaeckiges WebKit-Button-Blau abschalten */
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-2) var(--ease-std),
                transform var(--dur-1) var(--ease-std),
                box-shadow var(--dur-2) var(--ease-std);
  }
  /* universelles taktiles Eindruecken — niemals auf disabled */
  button:active:not(:disabled) { transform: scale(.97); }

  button.primary { background: var(--ink); color: #fff; }
  button.primary:hover:not(:disabled) { background: #27272a; }
  button.primary:disabled { opacity: .5; cursor: not-allowed; }

  /* Hero-CTA: Ink-Button mit weichem Gold-Schein fuer DIE eine Hauptaktion. Opt-in: class="primary cta-gold". */
  button.primary.cta-gold { box-shadow: var(--sh-gold); }
  button.primary.cta-gold:active:not(:disabled) { transform: scale(.97); box-shadow: var(--sh-gold); }

  button.ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
  }
  button.ghost:hover { background: var(--bg); color: var(--text); }
  button:disabled { transform: none !important; }   /* disabled niemals skalieren */

  /* --- Kollisions-Overrides: Elemente, die schon eine eigene transform nutzen --- */
  /* Bottom-Tab: Druck spuerbar am Icon, nicht an der ganzen Spalte */
  .tab:active:not(:disabled) { transform: none; }
  .tab:active:not(:disabled) .tab-icon { transform: scale(.92); }

  /* Opt-in Druck-Feedback fuer klickbare Nicht-Buttons (.todo, .convo-row, .lb-row, .media-row, .folder-card) */
  .press { transition: transform var(--dur-1) var(--ease-std); }
  .press:active { transform: scale(.985); }

  .banner {
    padding: .75rem .9rem;
    border-radius: 11px;
    margin-top: 1rem;
    font-size: .95rem;
    line-height: 1.4;
    animation: bannerIn var(--dur-3) var(--ease-out);
  }
  @keyframes bannerIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
  .banner.success { background: var(--success-bg); color: var(--success-text); }
  .banner.error   { background: var(--error-bg);   color: var(--error-text); }

  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
  }
  [hidden] { display: none !important; }

  .spinner {
    display: inline-block;
    width: 1rem; height: 1rem;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -2px; margin-right: .4rem;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ===== Boot-Ladebildschirm (erster Paint, rein CSS) =====
     Schwarzes Vollbild-Overlay (matcht PWA-background_color #18181b) mit
     zentrierter goldener Indeterminate-Progressbar (durchlaufender Komet) + Label. */
  .boot {
    position: fixed; inset: 0; z-index: 100;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    padding: env(safe-area-inset-top) 1.25rem env(safe-area-inset-bottom);
    animation: bootFade var(--dur-4) var(--ease-out);
  }
  @keyframes bootFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .boot-stage {
    display: flex; flex-direction: column; align-items: center;
    gap: 1.1rem; width: 100%; max-width: 220px;
  }
  /* Indeterminate-Progressbar: dezenter Track auf Schwarz + goldener Komet */
  .boot-bar {
    position: relative; width: 100%; height: 6px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.14); overflow: hidden;
  }
  .boot-bar-comet {
    position: absolute; top: 0; bottom: 0; left: -45%;
    width: 42%; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    box-shadow: 0 0 12px rgba(251,191,36,.55);
    animation: bootComet 1.4s var(--ease-std) infinite;
    will-change: left;
  }
  @keyframes bootComet { 0% { left: -45%; } 100% { left: 100%; } }
  /* Label */
  .boot-label {
    margin: 0; font-size: .9rem; font-weight: 500;
    letter-spacing: .02em; color: rgba(255,255,255,.72);
    animation: bootLabel 1.8s var(--ease-std) infinite;
  }
  @keyframes bootLabel { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
  /* Reduced-Motion: statisch sichtbar (gefuellte Bar statt leerem Track) */
  @media (prefers-reduced-motion: reduce) {
    .boot-bar-comet { left: 0; width: 100%; box-shadow: none; }
    .boot-mark { box-shadow: var(--sh-2); }
  }

  /* ==================== 05_touch — Native-Touch-Schicht (Eingabe-Härtung) ====================
     Macht jeden Tap "App-nativ", OHNE Struktur oder Optik zu verändern. Schliesst die drei
     Lücken, die eine PWA sonst als Website verraten:

       1) touch-action: manipulation  → killt den ~300 ms iOS-Doppeltipp-Zoom-Delay.
          Taps lösen SOFORT aus (Touch-Ack < 100 ms, siehe mobile-touch-Skill). Scrollen
          und Pinch-Zoom bleiben erhalten — nur die Doppeltipp-Zoom-Wartezeit fällt weg.

       2) -webkit-touch-callout: none  → Long-Press auf einem Button/einer Karte ploppt KEIN
          iOS-Kontextmenü (Kopieren/Teilen/Bild sichern) mehr auf. Native Apps tun das nicht.

       3) user-select: none            → kein versehentliches Text-Markieren (blaue Auswahl),
          wenn man eine Schaltfläche/Zeile nur antippt oder gedrückt hält.

     Bewusst NUR auf Bedien-Elemente angewendet. Inhalts-Text (Chat-Blasen .bubble-text,
     Notizen .note-text, Eingabefelder) ist hier NICHT gelistet und bleibt damit voll
     markier-/kopierbar — genau wie in einer nativen App. Die Druck-Skalierung (:active
     scale) wohnt weiterhin in 00_base.css/10_motion.css; diese Datei ergänzt sie nur. */

  /* (1)+(2)+(3): Echte Bedien-Elemente härten. Liste deckt native <button>/Rollen sowie alle
     bekannten klickbaren Nicht-Buttons (das bestehende .press-Vokabular) ab.
     WICHTIG: touch-action VERERBT sich NICHT — muss direkt auf den Elementen stehen
     (eine html-Regel allein wirkt nur aufs Dokument). manipulation killt den Doppeltipp-
     Zoom auf Schaltflächen (Scroll & Pinch bleiben). Spezifischere Regeln wie die
     Chat-Lightbox (touch-action:none) gewinnen weiterhin. */
  button, label, summary,
  [role="button"], [role="tab"], [role="switch"], [role="menuitem"],
  .press, .tab, .fab, .icon-btn, .avatar, .back-btn,
  .metric-tab, .daychip, .folder-card, .media-row, .lb-row,
  .convo-row, .todo, .trk-card-head, .food-entry, .drink-summary,
  .trn-plan-card {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Sicherheitsnetz: Eingaben & bewusst markierbarer Inhalt bleiben selektierbar,
     falls ein Element doppelt getroffen wird (z. B. ein <label> um ein Input). */
  input, textarea, select, [contenteditable="true"],
  .bubble-text, .bubble-text *, .note-text, .selectable {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  /* Deko-Icons nicht "geistern" lassen: kein Ghost-Drag-Bild beim Aufnehmen/Long-Press.
     Nur SVG-Icons — Inhalts-<img> (z. B. Chat-Fotos) bleiben unangetastet/speicherbar. */
  svg { -webkit-user-drag: none; }
  /* ==================== Premium-Fundament (Motion / Skeleton / View-Wechsel) ==================== */

  /* GLOBALER Reduced-Motion-Schutz (muss als Letztes gewinnen -> !important) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* View-Wechsel-Überblendung (navViewEnter/.view-enter) bewusst entfernt (2026-06-14):
     Header soll beim Tab-Wechsel ruhig stehen, nicht mit rein-faden. Content lädt über Skeletons. */
  @keyframes navViewBack {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(12px, 0, 0); }
  }
  .view-leave-back { animation: navViewBack var(--dur-2) var(--ease-in) forwards; }

  /* ---------- Skeleton-System (gefuehlte Geschwindigkeit) ----------
     Warm-grauer Block + wandernder, leicht goldener Glanz via ::after. Nur transform (GPU). */
  .skel { position: relative; overflow: hidden; background: #ececee; border-radius: 8px; }
  .skel::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%,
      rgba(251,191,36,.10) 50%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%);
    animation: skelSweep 1.25s var(--ease-std) infinite; will-change: transform;
  }
  @keyframes skelSweep { to { transform: translateX(100%); } }
  .skel-line { height: 12px; border-radius: var(--r-pill); }
  .skel-line.lg { height: 16px; }
  .skel-line.sm { height: 10px; }
  .skel-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.25rem; box-shadow: var(--sh-1); }
  .skel-row { display: flex; align-items: center; gap: .85rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: .85rem 1rem; }
  .skel-row.flat { background: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: .85rem .35rem; }
  /* matcht .trn-plan-card 1:1 (Box, Padding, Radius) -> kein Layout-Sprung beim Daten-Swap */
  .skel-plancard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.05rem; }
  .skel-av { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; }
  .skel-av.big { flex: 0 0 50px; width: 50px; height: 50px; }
  .skel-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
  .skel-row .skel-icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; }
  .skel-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.2rem; }
  .skel-tile .skel-tileicon { width: 56px; height: 56px; border-radius: 14px; }
  .skel-donut { width: 130px; height: 130px; flex: 0 0 130px; border-radius: 50%;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 51px, #000 52px);
            mask: radial-gradient(circle at 50% 50%, transparent 51px, #000 52px); }
  .skel-chart { width: 100%; aspect-ratio: 320 / 168; border-radius: 12px; }
  @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; opacity: 0; } }

  /* Topbar */
  .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; min-height: 44px; }
  .topbar-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
  .icon-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text); padding: 0; position: relative;
    box-shadow: var(--sh-1);
    transition: background var(--dur-2) var(--ease-std),
                box-shadow var(--dur-2) var(--ease-std),
                transform var(--dur-1) var(--ease-std);
  }
  .icon-btn:hover { background: var(--bg); }
  .icon-btn:active:not(:disabled) { transform: scale(.92); }
  .icon-btn svg { width: 22px; height: 22px; }
  .avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ink); color: #fff; border: none;
    font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(24,24,27,.18), var(--sh-1);
    transition: transform var(--dur-1) var(--ease-spring);
  }
  .avatar:active:not(:disabled) { transform: scale(.92); }
  .badge-dot {
    position: absolute; top: -6px; right: -5px;
    min-width: 19px; height: 19px; padding: 0 6px;
    border-radius: var(--r-pill); background: var(--gold); color: var(--ink);
    font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
    border: 1.5px solid var(--ink);
    font-variant-numeric: tabular-nums;
    animation: badgePop var(--dur-3) var(--ease-spring);
  }
  @keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } }
  .back-btn {
    background: transparent; border: none; color: var(--accent); font-weight: 600;
    display: flex; align-items: center; gap: .25rem; padding: .25rem .25rem .25rem 0; min-height: 44px;
    transition: transform var(--dur-1) var(--ease-std), opacity var(--dur-1) var(--ease-std);
  }
  .back-btn:active:not(:disabled) { transform: translateX(-2px); opacity: .7; }
  .back-btn svg { width: 18px; height: 18px; }

  /* Dashboard */
  .dash-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 .15rem; letter-spacing: -.02em; color: var(--text); }
  .dash-greet { color: var(--muted); margin: 0 0 1.5rem; }

  /* Dunkle, dauerhaft fixierte Kopfleiste (Dashboard/Guides/Logbook/Training) — gleiche Optik wie
     die Kalender-Kopfleiste (.kal-header), mit Titel + Kontext-Zeile. Voll-Bleed via Negativ-Margin,
     sticky am Fenster-Scroller (eine Scroll-Ebene -> kein Inner-Scroller, Pull-to-Refresh bleibt heil). */
  .appbar {
    position: sticky; top: -1.25rem; z-index: 40;   /* -1.25rem = .wrap padding-top: klebt bündig an y=0 (innerer Scroller) */
    display: flex; align-items: center; gap: .75rem;
    margin: -1.25rem -1.25rem 1.25rem;
    padding: calc(env(safe-area-inset-top) + 1.05rem) 1.25rem 1.15rem;
    background: var(--ink); color: #fff;
  }
  .appbar-head { flex: 1 1 auto; min-width: 0; }
  .appbar-title { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
  .appbar-sub { margin: .14rem 0 0; font-size: .88rem; color: rgba(255,255,255,.6); }
  .appbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
  /* Dashboard-Icons auf dunklem Grund: weiße Kreise mit dunklem Symbol -> klarer Kontrast */
  .appbar .icon-btn { background: #fff; border-color: #fff; color: var(--ink); box-shadow: none; }
  .appbar .icon-btn:hover { background: rgba(255,255,255,.88); }
  .appbar .avatar { background: #fff; color: var(--ink); box-shadow: none; }
  /* Guides: Titel + Suchleiste zusammen in der dunklen, fixierten Kopfleiste (Suche bleibt erreichbar).
     Suchfeld bleibt weiß (klar erkennbar + dunkler Text gut lesbar) — nur der Extra-Abstand entfaellt. */
  .appbar-guides { flex-direction: column; align-items: stretch; gap: .85rem; }
  .appbar-guides .search-bar { margin: 0; }

  /* Einheitliche dunkle UNTERSEITEN-Kopfleiste (Zurück + Titel) — konsistent mit den Tab-Kopfleisten.
     Ersetzt das alte helle "‹ Zurück + kleines Icon + Titel"-Muster auf Detail-/Unterseiten. */
  .subbar {
    position: sticky; top: -1.25rem; z-index: 40;   /* -1.25rem = .wrap padding-top: klebt bündig an y=0 (innerer Scroller) */
    display: flex; align-items: center; gap: .5rem;
    margin: -1.25rem -1.25rem 1.25rem;
    padding: calc(env(safe-area-inset-top) + .8rem) 1rem .8rem;
    background: var(--ink); color: #fff;
  }
  /* iOS-artig: dünner Chevron ohne Kreis, halbfetter Titel */
  .subbar-back {
    flex: 0 0 auto; min-width: 40px; min-height: 40px; padding: 0; margin-left: -.45rem; border: none;
    background: none; color: #fff; display: flex; align-items: center; justify-content: flex-start;
  }
  .subbar-back:active { opacity: .5; }
  .subbar-back svg { width: 27px; height: 27px; stroke-width: 1.75; }
  .subbar-icon { flex: 0 0 auto; display: flex; align-items: center; color: #fff; }
  .subbar-icon svg { width: 22px; height: 22px; }
  .subbar-icon:empty { display: none; }   /* falls (noch) kein Symbol gesetzt ist */
  .subbar-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .75rem; }
  .section-head h3 { margin: 0; }
  .done-count { font-size: .9rem; color: var(--muted); }
  .done-count b { color: var(--text); font-size: 1rem; }

  .heute-list { display: flex; flex-direction: column; gap: .6rem; }
  .todo {
    display: flex; align-items: center; gap: .85rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: .85rem 1rem; cursor: pointer;
    text-align: left; width: 100%; font: inherit; color: var(--text);
    -webkit-tap-highlight-color: transparent;
  }
  .todo:hover { border-color: #cbd5e1; }
  .todo .check {
    width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%;
    border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
    color: #fff; background: transparent;
    transition: background var(--dur-2) var(--ease-std),
                border-color var(--dur-2) var(--ease-std),
                transform var(--dur-2) var(--ease-spring);
  }
  .todo:active .check { transform: scale(.9); }
  .todo.done .check { background: var(--done); border-color: var(--done); color: var(--ink); animation: fxCheckPop var(--dur-3) var(--ease-spring); }
  .todo .check svg { width: 15px; height: 15px; opacity: 0; overflow: visible; }
  .todo.done .check svg { opacity: 1; }
  @keyframes fxCheckPop { 0% { transform: scale(1); } 45% { transform: scale(.82); } 100% { transform: scale(1); } }
  /* Strich-Einzeichnen des Hakens (polyline ~18 Einheiten -> 22 zur Sicherheit) */
  .chk-path { stroke-dasharray: 22; stroke-dashoffset: 22; }
  .todo.done .check .chk-path,
  .trk-check.on .chk-path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-3) var(--ease-out) .04s; }
  .trk-card-status .chk-path { stroke-dashoffset: 0; }   /* Status-Haken sofort sichtbar (kein Einzeichnen) */
  .todo:not(.done) .check .chk-path,
  .trk-check:not(.on) .chk-path { transition: none; stroke-dashoffset: 22; }
  .todo-body { flex: 1; min-width: 0; }
  .todo-title { font-weight: 600; font-size: 1rem; }
  .todo.done .todo-title { text-decoration: line-through; color: var(--muted); }
  .todo-sub { font-size: .82rem; color: var(--muted); margin-top: .1rem; }

  /* ---- Einheitliche Occurrence-Zeile (Dashboard + Kalender): flache Zeile + optional aufklappbare Felder ---- */
  .occ-row-wrap { display: block; }
  /* Aufklappbare Wert-Zeile (Tracker/Körper) = EINE Karte: Kopf + Felder ENTHALTEN (nicht frei schwebend,
     1:1 wie im Logbuch). Der Kopf (.todo) wird transparent, die Karte umschliesst Kopf + Felder. */
  .occ-row-wrap.occ-expandable { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .occ-row-wrap.occ-expandable:hover { border-color: #cbd5e1; }
  .occ-row-wrap.occ-expandable > .todo { background: transparent; border: none; border-radius: 0; }
  .occ-row-fields { display: none; padding: .25rem 1rem 1rem; }
  .occ-row-wrap.open .occ-row-fields { display: block; }
  /* Wert-Zeilen (Tracker/Körper): "done" füllt nur den Kreis, streicht den Titel NICHT durch */
  .todo.occ-val.done .todo-title { text-decoration: none; color: var(--text); }

  /* Kurzer Bestätigungs-Toast (schwebt über der Tab-Leiste, faded weg) */
  .fx-toast {
    position: fixed; left: 50%; bottom: calc(6.2rem + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(8px);
    z-index: 1500; max-width: 90vw; white-space: nowrap;
    background: var(--ink); color: #fff; font-size: .9rem; font-weight: 600;
    padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--sh-3);
    opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  }
  .fx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  .progress-card { display: flex; align-items: center; gap: 1.25rem; }
  .donut { width: 130px; height: 130px; flex: 0 0 130px; }
  .donut-seg { transition: stroke-dashoffset var(--dur-4) var(--ease-out); transition-delay: var(--seg-delay, 0ms); }
  #heute-count, #lm-latest, .lm-latest-val,
  #lg-done, #lg-missed, #lg-todo, #donut-num { font-variant-numeric: tabular-nums; }
  .legend { flex: 1; min-width: 0; }
  .legend .lg-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .6rem; font-weight: 600; }
  .legend-item { display: flex; align-items: center; gap: .55rem; font-size: .95rem; margin-bottom: .45rem; }
  .legend-item:last-child { margin-bottom: 0; }
  .legend-item .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; }
  .legend-item b { font-variant-numeric: tabular-nums; }

  /* Placeholder-Tabs */
  .ph-card { text-align: center; padding: 3rem 1.5rem; }
  .ph-emoji { font-size: 2.5rem; margin-bottom: .75rem; }

  /* Profil */
  .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
  .field-row { display: flex; gap: .75rem; }
  .field-row .field { flex: 1; }
  .field-row .field.plz { flex: 0 0 38%; }
  .radio-group { display: flex; gap: .5rem; }
  .radio-group label {
    flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: .65rem;
    text-align: center; cursor: pointer; background: #fff; min-height: 44px;
    display: flex; align-items: center; justify-content: center; font-weight: 500;
  }
  .radio-group input { position: absolute; opacity: 0; width: 0; height: 0; }
  .radio-group label:has(input:checked) { border-color: var(--accent); background: var(--note-bg); color: var(--accent); }
  .step-nav { display: flex; gap: .75rem; margin-top: 1.25rem; }
  .step-nav button { flex: 1; }
  .progress-dots { display: flex; gap: .4rem; margin: 0 0 1.25rem; }
  .progress-dots .dot { flex: 1; height: 4px; border-radius: 999px; background: var(--border); }
  .progress-dots .dot.active { background: var(--accent); }
  .step { display: none; }
  .step.active { display: block; }
  .review-list, .profile-data { list-style: none; margin: 0 0 .5rem; padding: 0; }
  .review-list li, .profile-data li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .6rem 0; border-bottom: 1px solid var(--border);
  }
  .review-list li:last-child, .profile-data li:last-child { border-bottom: 0; }
  .review-list .rk, .profile-data .pk { color: var(--muted); font-size: .9rem; }
  .review-list .rv, .profile-data .pv { font-weight: 500; text-align: right; }
  .form-error { color: var(--danger); font-size: .85rem; }

  /* Chat: Inbox (Gespraechsliste) */
  .convo-list { display: flex; flex-direction: column; }
  .convo-row {
    display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
    background: none; border: none; color: var(--text); padding: .85rem .35rem; cursor: pointer;
    -webkit-tap-highlight-color: transparent; border-bottom: 1px solid var(--border); border-radius: 12px;
    transition: transform var(--dur-1) var(--ease-std), background var(--dur-2) var(--ease-std);
  }
  .convo-row:last-child { border-bottom: none; }
  .convo-row:active { transform: scale(.985); background: var(--note-bg); }
  .convo-av { position: relative; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
  /* Coach-Profilfoto statt Initialen (Liste + Chat-Header teilen sich .convo-av) */
  .convo-av.has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
  .convo-row.has-unread .convo-av { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); }
  .convo-mid { flex: 1; min-width: 0; }
  .convo-top { display: flex; align-items: baseline; gap: .5rem; }
  .convo-name { flex: 1; min-width: 0; font-weight: 700; font-size: 1rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
  .convo-time { flex: 0 0 auto; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .convo-row.has-unread .convo-time { color: var(--accent-hover); font-weight: 700; }
  .convo-bot { display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
  .convo-preview { flex: 1; min-width: 0; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .convo-prev-ic { display: inline-flex; vertical-align: -.18em; margin-right: .3rem; color: var(--muted); }
  .convo-prev-ic svg { width: 15px; height: 15px; }
  .convo-row.has-unread .convo-preview { color: var(--text); font-weight: 500; }
  .convo-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; animation: convoBadgePop var(--dur-2) var(--ease-spring); }
  @keyframes convoBadgePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

  /* Chat: Unterhaltung (immersiv, Vollbild) */
  .chat-convo-face { position: fixed; top: var(--vvtop, 0px); height: var(--vvh, 100dvh); bottom: auto; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 480px; display: flex; flex-direction: column; background: #e7e7ea; z-index: 1000; overflow: hidden; }
  /* Solange der Chat offen ist: Seite komplett einfrieren (kein Scroll/Rubber-Band), nur der Nachrichten-Bereich scrollt. */
  html.chat-locked { overflow: hidden; height: 100%; }
  body.chat-locked { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  .chat-convo-face.slide-in { animation: chatFaceSlide var(--dur-3) var(--ease-out); }
  @keyframes chatFaceSlide { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }
  .chat-head { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--sh-1); position: relative; z-index: 2; }
  .chat-head-back { background: none; border: none; padding: .2rem; min-height: auto; color: var(--ink); cursor: pointer; display: flex; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-std); }
  .chat-head-back:active { transform: scale(.85); }
  .chat-head-back svg { width: 24px; height: 24px; }
  .chat-head .convo-av { width: 38px; height: 38px; font-size: .95rem; box-shadow: none; }
  .chat-head-info { min-width: 0; }
  .chat-head-name { font-weight: 700; font-size: 1rem; line-height: 1.15; letter-spacing: -.01em; }
  .chat-head-sub { font-size: .78rem; color: var(--muted); }
  .chat-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 1rem;
    /* Neutrale, moderne Struktur als fixer Backdrop (background-attachment:scroll = bleibt hinter den
       scrollenden Nachrichten stehen): feines diagonales Rauten-Netz + zarter Top-Sheen fuer Tiefe. */
    background-color: #e7e7ea;
    background-image:
      repeating-linear-gradient(45deg, rgba(24,24,27,.035) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(-45deg, rgba(24,24,27,.035) 0 1px, transparent 1px 26px),
      linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 32%); }
  /* Sticky Tag-Trenner: schwebt waehrend des Scrollens */
  /* Datums-Trenner im normalen Fluss (NICHT sticky): bekommt eine eigene Zeile und kann so nie
     ueber/auf einer Medien-Blase oder Text liegen. (Sticky-Overlay kollidierte mit randlosen Medien.) */
  .chat-day { align-self: center; color: #52525b; font-size: .72rem; font-weight: 700; padding: .25rem .75rem; border-radius: var(--r-pill); margin: .65rem 0; box-shadow: var(--sh-1); background: #dfe0e3; }
  /* Gruppierung: eng innerhalb einer Gruppe, Luft zwischen Gruppen */
  /* flex-shrink:0 ist KRITISCH: der Thread ist ein scrollender column-flex. Medienblasen
     haben overflow:hidden -> ihr min-height:auto wird 0 -> bei ueberlaufendem Thread wuerde
     flex-shrink sie sonst auf Hoehe 0 quetschen (der eigentliche iOS-Streifen-/Kollaps-Bug). */
  .bubble { max-width: 80%; flex-shrink: 0; padding: .5rem .8rem .35rem; border-radius: 18px; font-size: .95rem; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; position: relative; box-shadow: 0 1px 2px rgba(24,24,27,.10), 0 1px 1px rgba(24,24,27,.06); transition: transform var(--dur-1) var(--ease-std); }
  .bubble.them { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
  .bubble.me { align-self: flex-end; background: var(--ink); color: #fff; border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
  .bubble.grp-start { margin-top: .55rem; }
  .chat-thread > .bubble:first-of-type.grp-start { margin-top: 0; }
  .bubble.them.grp-end { border-bottom-left-radius: 5px; }
  .bubble.me.grp-end { border-bottom-right-radius: 5px; }
  /* iMessage-Tail: nur an der letzten Blase einer Gruppe */
  .bubble.grp-end::after { content: ''; position: absolute; bottom: 0; width: 14px; height: 14px; }
  .bubble.them.grp-end::after { left: -6px; background: radial-gradient(circle at 0 0, transparent 14px, var(--card) 15px); }
  .bubble.me.grp-end::after { right: -6px; background: radial-gradient(circle at 100% 0, transparent 14px, var(--ink) 15px); }
  /* Randlose Medien-Blasen haben keinen Sprech-Tail (sonst klebt ein farbfremder Zipfel an der Bildecke). */
  .bubble.has-media.grp-end::after { display: none; }
  /* Meta+Haken: nur an der letzten Blase einer Gruppe (Medien-Blasen immer) */
  .bubble-meta { display: none; align-items: center; justify-content: flex-end; gap: .25rem; margin-top: .15rem; }
  .bubble.grp-end .bubble-meta { display: flex; }
  .bubble.has-media .bubble-meta { display: flex; }
  .bubble-text { white-space: pre-wrap; }
  .bubble-text a { color: inherit; -webkit-text-fill-color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .bubble.them .bubble-text a { color: var(--accent-hover); -webkit-text-fill-color: var(--accent-hover); }
  .bubble-meta .ts { font-size: .66rem; opacity: .7; font-variant-numeric: tabular-nums; }
  .bubble.me .bubble-meta .ts { opacity: .75; }
  /* Fehlgeschlagene Nachricht: Grund + "Erneut senden" */
  .bubble-fail { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; font-size: .72rem; line-height: 1.2; }
  .bubble-fail .bf-txt { color: #ff8a8a; }
  .bubble.them .bubble-fail .bf-txt { color: var(--danger); }
  .bubble-retry { background: none; border: none; padding: 0; min-height: auto; font-size: .72rem; font-weight: 700; color: var(--gold); text-decoration: underline; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bubble.them .bubble-retry { color: var(--accent-hover); }
  /* Spring-Eingang neuer Blasen */
  .bubble-in { animation: chatBubblePop var(--dur-3) var(--ease-spring); transform-origin: bottom; }
  .bubble.them.bubble-in { transform-origin: bottom left; }
  /* Eigene Nachricht: spuerbar vom Senden-Knopf "abgeschossen" — mehr Energie + Ueberschwung (ease-spring) */
  .bubble.me.bubble-in { animation: chatSendLaunch var(--dur-3) var(--ease-spring); transform-origin: bottom right; }
  @keyframes chatBubblePop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes chatSendLaunch { from { opacity: 0; transform: translateY(16px) scale(.8); } to { opacity: 1; transform: none; } }
  /* Lesehaken */
  .tick { display: inline-flex; color: rgba(255,255,255,.7); transition: color var(--dur-2) var(--ease-std); }
  .tick svg { width: 15px; height: 15px; display: block; }
  .tick-read { color: var(--gold); }
  .tick-read.tick-justread { animation: chatTickPop var(--dur-3) var(--ease-spring); }
  @keyframes chatTickPop { 0% { transform: scale(.6); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
  .tick-error { color: #fca5a5; }
  .tick-sending { animation: chatTickPulse 1.1s ease-in-out infinite; }
  @keyframes chatTickPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
  /* Medien-Blase: Medium RANDLOS; die Blase clippt auf ihre eigene Rundung (wie iMessage/WhatsApp).
     Blasenbreite = Medienbreite -> Caption bricht darin um, kein schwarzer Streifen neben dem Medium. */
  .bubble.has-media { padding: 0; border-radius: 18px; overflow: hidden; width: 240px; max-width: 72vw; isolation: isolate; }
  .bubble.has-media .bubble-media { border-radius: 0; }
  /* NUR Medium (keine Caption): Zeit/Haken als kompakter Glas-Chip AUF dem Medium.
     KEIN dunkler Vollflaechen-Scrim mehr (der wirkte auf hellen Fotos wie ein schwarzer Rahmen) —
     der Chip mit eigenem Blur-Hintergrund bleibt auf jedem Bild lesbar. */
  .bubble.media-only .bubble-meta { position: absolute; right: 10px; bottom: 10px; z-index: 2; margin: 0; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .bubble.media-only .bubble-meta .ts { color: #fff; opacity: .95; }
  .bubble.media-only .tick { color: #fff; }
  .bubble.media-only .tick-read { color: var(--gold); }
  /* Medium + Caption: Text + Zeit normal gepolstert UNTER dem Medium */
  .bubble.has-media:not(.media-only) .bubble-text { padding: .5rem .7rem .1rem; }
  .bubble.has-media:not(.media-only) .bubble-meta { padding: 0 .7rem .5rem; margin-top: .15rem; }
  /* Medien-Box mit EXPLIZITER Pixel-Hoehe (--media-h, per JS aufs echte, geclampte
     Verhaeltnis gesetzt; Default reserviert die Box schon vor dem Laden). Bewusst KEIN
     aspect-ratio: WebKit/iOS zaehlt die aspect-ratio-Hoehe eines Kindes NICHT zur Auto-
     Hoehe des Block-Elternteils -> die Blase kollabierte auf 0. Eine echte px-Hoehe zaehlt
     immer mit. */
  /* Lade-Hintergrund neutral-grau statt schwarz (kein harter schwarzer Rahmen vor dem Laden;
     bei object-fit:cover fuellt das Medium die Box ohnehin randlos). */
  .bubble-media { position: relative; width: 100%; height: var(--media-h, 280px); border-radius: 0; overflow: hidden; line-height: 0; background: #d4d4d8; }
  .chat-media { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: transparent; cursor: pointer; transition: transform var(--dur-1) var(--ease-std); }
  /* Eigener Play-Button ueber dem Video-Thumbnail (statt nackter iOS-Controls) */
  .chat-play { position: absolute; inset: 0; margin: auto; z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1.5px solid rgba(255,255,255,.6); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; min-height: 0; cursor: pointer; transition: transform var(--dur-1) var(--ease-spring); }
  .chat-play:active { transform: scale(.88); }
  .chat-play svg { width: 26px; height: 26px; margin-left: 2px; }
  .chat-media:active { transform: scale(.985); }
  .bubble.is-sending .chat-media { filter: brightness(.72); }
  .media-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.28); }
  .media-prog-bar { height: 100%; width: 0; background: var(--gold); transition: width .15s linear; }
  .chat-empty-state { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: .4rem; padding: 2rem; text-align: center; }
  /* Skelett-Thread waehrend des Ladens */
  .chat-skel { flex: 1 1 auto; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
  .chat-skel-b { height: 34px; border-radius: 18px; max-width: 62%; background: linear-gradient(100deg, var(--border) 30%, #eeeef0 50%, var(--border) 70%); background-size: 200% 100%; animation: chatSkelShimmer 1.3s linear infinite; }
  .chat-skel-b.them { align-self: flex-start; border-bottom-left-radius: 5px; }
  .chat-skel-b.me { align-self: flex-end; border-bottom-right-radius: 5px; background-color: #e7e7ea; }
  .chat-skel-b.w1 { width: 55%; } .chat-skel-b.w2 { width: 40%; height: 48px; } .chat-skel-b.w3 { width: 48%; }
  @keyframes chatSkelShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  /* "Neue Nachricht"-Pille — schwebt ueber dem Composer */
  .chat-newpill { position: absolute; left: 50%; transform: translateX(-50%) translateY(14px) scale(.9); bottom: calc(100% + 10px); z-index: 5; display: inline-flex; align-items: center; gap: .4rem; background: var(--gold); color: var(--ink); font-weight: 700; font-size: .82rem; padding: .45rem .85rem; border-radius: var(--r-pill); box-shadow: var(--sh-gold); cursor: pointer; opacity: 0; pointer-events: none; white-space: nowrap; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-std); }
  .chat-newpill.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
  .chat-newpill svg { width: 15px; height: 15px; }
  /* Composer */
  .chat-compose { position: relative; flex: 0 0 auto; background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--sh-2); }
  .chat-attach-preview { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid var(--border); }
  /* gleitet sanft ein, statt hart zu erscheinen (laeuft genau einmal, wenn der Anhang gewaehlt wird) */
  .chat-attach-preview:not([hidden]) { animation: attachIn var(--dur-2) var(--ease-out); }
  @keyframes attachIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .attach-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: var(--note-bg); }
  .attach-info { flex: 1; min-width: 0; }
  .attach-name { font-weight: 600; font-size: .85rem; }
  .attach-size { font-size: .75rem; }
  .attach-remove { flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px; border: none; background: var(--note-bg); border-radius: 50%; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform var(--dur-1) var(--ease-std); }
  .attach-remove:active { transform: scale(.85); }
  .attach-remove svg { width: 16px; height: 16px; }
  /* Tippbare Anhang-Vorschau: Bild oder Video-Frame; Video zeigt Canvas-Poster als Hintergrund + Play. */
  .attach-thumb-img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .attach-thumb-video { position: relative; padding: 0; border: none; background-color: #1c1c1e; background-image: linear-gradient(135deg, #3a3a3c, #1c1c1e); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
  .attach-thumb-video.has-poster { background-image: none; }   /* echter Poster-Frame ersetzt den Platzhalter-Verlauf */
  .attach-thumb-video .attach-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity var(--dur-1) var(--ease-std); }
  .attach-thumb-video .attach-play svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  /* Shimmer, solange der Poster-Frame im Hintergrund gezogen wird (statt leerem Standbild) */
  .attach-thumb-video.is-busy .attach-play { opacity: .4; }
  .attach-thumb-video.is-busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 28%, rgba(255,255,255,.45) 50%, transparent 72%); background-size: 220% 100%; animation: attachShimmer 1.1s linear infinite; }
  @keyframes attachShimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }
  .chat-lb-video { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: var(--sh-3); background: #000; }
  .chat-input-bar { display: flex; flex-direction: row; gap: .4rem; align-items: flex-end; padding: .6rem .7rem; }
  /* Premium-Anhang-Sheet (docked) — ersetzt das native, in der Luft haengende iOS-Quellenmenue */
  .chat-sheet { position: fixed; inset: 0; z-index: 1090; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); transition: background var(--dur-3) var(--ease-out); }
  .chat-sheet.in { background: rgba(0,0,0,.4); }
  .chat-sheet-dock { width: 100%; max-width: 480px; padding: 0 .5rem calc(.5rem + env(safe-area-inset-bottom)); transform: translateY(115%); transition: transform var(--dur-3) var(--ease-out); will-change: transform; }
  .chat-sheet.in .chat-sheet-dock { transform: translateY(0); }
  .chat-sheet-group { background: var(--card); border-radius: 18px; box-shadow: var(--sh-3); padding: .35rem .4rem .5rem; }
  .chat-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: .35rem auto .5rem; }
  .chat-sheet-opt { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .4rem .8rem; border: none; background: none; color: var(--ink); font-size: 1.02rem; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; border-radius: 13px; -webkit-tap-highlight-color: transparent; transition: background var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std); }
  .chat-sheet-opt:active { background: var(--note-bg); transform: scale(.98); }
  .chat-sheet-opt .cso-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--note-bg); display: flex; align-items: center; justify-content: center; color: var(--ink); }
  .chat-sheet-opt .cso-ic svg { width: 21px; height: 21px; }
  .chat-sheet-cancel { width: 100%; min-height: 54px; margin-top: .5rem; border: none; background: var(--card); color: var(--ink); font-size: 1.02rem; font-weight: 700; font-family: inherit; cursor: pointer; border-radius: 16px; box-shadow: var(--sh-3); -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-std); }
  .chat-sheet-cancel:active { transform: scale(.98); background: var(--note-bg); }
  @media (prefers-reduced-motion: reduce) { .chat-sheet, .chat-sheet-dock { transition: none; } .chat-sheet-dock { transform: translateY(0); } }
  .chat-attach { flex: 0 0 auto; width: 42px; height: 42px; min-height: 42px; border: none; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-spring); }
  .chat-attach:active { transform: scale(.82); }
  .chat-attach svg { width: 24px; height: 24px; }
  .chat-input-bar textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; resize: none; font-size: 16px; padding: .55rem .95rem; border: 1px solid var(--border); border-radius: 21px; font-family: inherit; line-height: 1.35; background: var(--bg); transition: border-color var(--dur-2) var(--ease-std); }
  /* Ruhige Pille — KEIN Gold-Halo (globalen textarea:focus-Ring hier bewusst aufheben) */
  .chat-input-bar textarea:focus { outline: none; border-color: #d4d4d8; box-shadow: none; }
  /* Senden-Knopf: ohne Inhalt geschrumpft+blass; mit Inhalt voller Gold-Pop */
  /* Ruhiger grauer Knopf, der gold wird, sobald Inhalt da ist (Telegram-Logik) */
  .chat-send { flex: 0 0 auto; width: 42px; height: 42px; min-height: 42px; border-radius: 50%; border: none; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transform: scale(.92); transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-std); }
  .chat-send.ready { background: var(--gold); color: var(--ink); transform: scale(1); box-shadow: var(--sh-gold); }
  .chat-send.ready:active { transform: scale(.9); }
  .chat-send svg { width: 20px; height: 20px; }
  /* "Abschuss": der Papierflieger schnellt kurz hoch-rechts und federt zurueck (nur beim Senden) */
  .chat-send.firing svg { animation: chatSendFire var(--dur-3) var(--ease-spring); }
  @keyframes chatSendFire { 0% { transform: none; } 25% { transform: translate(3px,-3px) scale(.86); } 60% { transform: translate(-1px,1px) scale(1.07); } 100% { transform: none; } }
  /* Premium-Bild-Lightbox (frosted + Wisch-nach-unten) */
  /* Solides schwarzes Overlay (kein backdrop-filter): zuverlaessig auf jeder Engine + performant
     auf echten Geraeten; gibt dem Bild echten Modal-Fokus (iMessage-Stil). */
  .chat-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0); transition: background var(--dur-3) var(--ease-out); }
  .chat-lightbox.in { background: rgba(0,0,0,.92); }
  .chat-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: var(--sh-3); transform: scale(.86); opacity: 0; touch-action: none; will-change: transform; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-out); }
  .chat-lightbox.in img { transform: scale(1); opacity: 1; }
  .chat-lightbox.dragging img { transition: none; }
  .chat-lightbox.zoomed img { transition: transform var(--dur-2) var(--ease-out); }
  .chat-lb-close { position: absolute; top: calc(env(safe-area-inset-top) + .6rem); right: .7rem; width: 40px; height: 40px; min-height: 40px; border-radius: 50%; background: rgba(40,40,40,.55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.18); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; transition: transform var(--dur-1) var(--ease-std); }
  .chat-lb-close:active { transform: scale(.86); }
  .chat-lb-close svg { width: 22px; height: 22px; }
  .empty { color: var(--muted); text-align: center; padding: .5rem 0; font-size: .9rem; }

  /* Kalender */
  .kal-header {
    position: sticky; top: -1.25rem; z-index: 40;   /* -1.25rem = .wrap padding-top: klebt bündig an y=0 (innerer Scroller, wie .appbar/.subbar) */
    background: var(--ink); color: #fff;
    margin: -1.25rem -1.25rem 1.25rem;
    padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem 1.5rem;
    border-radius: 0;
  }
  .kal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
  .seg { display: inline-flex; background: rgba(255,255,255,.12); border-radius: 11px; padding: 3px; }
  .seg button {
    background: none; border: none; color: rgba(255,255,255,.7);
    padding: .45rem 1rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
    min-height: auto; cursor: pointer;
  }
  .seg button.active { background: #fff; color: var(--ink); }
  .kal-nav { display: flex; align-items: center; gap: .5rem; }
  .kal-nav button {
    background: rgba(255,255,255,.12); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 8px; padding: 0; min-height: auto;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .kal-nav button:hover { background: rgba(255,255,255,.2); }
  .kal-nav button svg { width: 16px; height: 16px; }
  .kal-h { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
  .kal-sub { color: rgba(255,255,255,.65); font-size: .9rem; margin: .1rem 0 0; }
  .week-strip { display: flex; justify-content: space-between; margin-top: 1.1rem; }
  .day-cell {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    background: none; border: none; cursor: pointer; flex: 1; padding: .15rem 0; min-height: auto;
    color: rgba(255,255,255,.55);
  }
  .day-cell .dow { font-size: .7rem; font-weight: 700; text-transform: uppercase; }
  .day-cell .dnum {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: .92rem; font-weight: 600; color: #fff;
  }
  .day-cell.today .dnum { box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
  .day-cell.selected .dnum { background: var(--accent); color: var(--ink); }
  .day-cell .dot-slot { height: 6px; display: flex; align-items: center; justify-content: center; }
  .day-cell.has-items .dot-slot::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  }
  .kal-day-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1.25rem 0 .6rem; }
  .kal-day-label:first-child { margin-top: 0; }
  .kal-list { display: flex; flex-direction: column; gap: .6rem; }
  .type-icon {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); border: 1px solid var(--border); background: var(--bg);
  }
  .type-icon svg { width: 19px; height: 19px; }

  /* Gewohnheiten verwalten */
  .habit-li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
  .habit-li:last-child { border-bottom:0; }
  .habit-li .h-title { font-weight:600; }
  .hb-del { background:transparent; border:none; color:var(--muted); width:38px; height:38px; min-height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0; flex:0 0 38px; }
  .hb-del:hover { background:var(--error-bg); color:var(--danger); }
  .hb-del svg { width:18px; height:18px; }
  .day-chips { display:flex; gap:.4rem; flex-wrap:wrap; }
  .daychip { flex:1 0 auto; min-width:38px; border:1px solid var(--border); border-radius:10px; padding:.55rem .2rem; background:#fff; color:var(--muted); font-weight:600; font-size:.85rem; min-height:40px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .daychip.active { border-color:var(--accent); background:var(--note-bg); color:var(--accent); }
  .manage-btn { margin-top:.7rem; width:100%; }

  /* Guides */
  #guides-home .dash-title { margin-bottom: 1.25rem; }
  .search-bar { display:flex; align-items:center; gap:.5rem; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:0 .85rem; margin:0 0 1rem; }
  .search-bar svg { width:18px; height:18px; color:var(--muted); flex:0 0 18px; }
  .search-bar input { border:none; background:transparent; padding:.7rem 0; min-height:44px; font-size:16px; flex:1; }
  .search-bar input:focus { outline:none; box-shadow:none; }
  .folder-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem .7rem; }
  /* Die Ordner-FORM ist die Kachel: Rechteck mit Reiter oben-links (kein Icon-in-Karte mehr) */
  .folder-card {
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
    margin-top:13px; min-height:104px;
    background:var(--ink); border:1px solid var(--ink);   /* schwarze Ordner-Kachel mit hellen Icons */
    border-radius:2px 14px 14px 14px; padding:.95rem 1rem 1rem;
    text-align:left; color:#fff; cursor:pointer;
    box-shadow:var(--sh-1); -webkit-tap-highlight-color:transparent;
    transition:border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std), transform var(--dur-1) var(--ease-std);
  }
  .folder-card::before {   /* der Ordner-Reiter — gleiche schwarze Farbe, nahtlos */
    content:''; position:absolute; top:-13px; left:-1px;
    width:52%; height:14px; background:var(--ink);
    border:1px solid var(--ink); border-bottom:0; border-radius:7px 11px 0 0;
  }
  .folder-card:hover { border-color:#3f3f46; }
  .folder-card:active { transform:scale(.985); }
  .fc-icon { width:42px; height:42px; border-radius:12px; background:var(--note-bg); color:var(--ink); display:flex; align-items:center; justify-content:center; flex:0 0 42px; }
  .fc-icon svg { width:23px; height:23px; }
  /* Kategorie-Glyphe direkt auf dem Ordner (kein eigener Kasten) */
  .folder-card .fc-icon { width:auto; height:auto; flex:none; background:none; border-radius:0; color:#fff; }
  .folder-card .fc-icon svg { width:24px; height:24px; transform:none; }
  .folder-card .fc-text { display:flex; flex-direction:column; gap:.1rem; margin-top:auto; }
  .folder-card .fc-name { font-weight:700; font-size:1rem; line-height:1.2; }
  .folder-card .fc-count { font-size:.8rem; color:rgba(255,255,255,.6); }
  /* Folder-Detail-Header behaelt das schwarze Ordner-Symbol (unveraendert) */
  #gf-icon { background:transparent; border-radius:0; position:relative; overflow:visible; }
  #gf-icon::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2318181b' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #gf-icon svg { position:relative; z-index:1; color:#fff; transform:translateY(3px); }
  .gf-head { display:flex; align-items:center; gap:.7rem; margin:.25rem 0 1rem; }
  .gf-head .fc-icon { width:40px; height:40px; border-radius:11px; flex:0 0 40px; }
  .gf-head .fc-icon svg { width:22px; height:22px; }
  .gf-head h2 { margin:0; }
  .media-row { display:flex; align-items:center; gap:.85rem; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.85rem 1rem; cursor:pointer; width:100%; text-align:left; color:var(--text); -webkit-tap-highlight-color:transparent; }
  .media-row:hover { border-color:#cbd5e1; }
  .media-row .m-title { font-weight:600; flex:1; min-width:0; }
  .media-row .todo-body { flex:1; min-width:0; }
  /* Vorschaubild im kleinen Typ-Icon-Quadrat (Spiegel: coFilesThumb im Coach-Panel).
     Icon = Fallback; das Thumbnail liegt darueber und blendet erst bei Erfolg ein (.has-img). */
  .type-thumb { position:relative; overflow:hidden; flex-shrink:0; }
  .type-thumb-ico { line-height:0; color:var(--muted); display:flex; align-items:center; justify-content:center; }
  .type-thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
  .type-thumb.has-img .type-thumb-img { opacity:1; }
  .type-thumb.has-img .type-thumb-ico { display:none; }
  .type-thumb-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; background:rgba(20,20,20,.55); color:#fff; display:grid; place-items:center; line-height:0; box-shadow:0 1px 4px rgba(0,0,0,.3); }
  .type-thumb-play svg { width:12px; height:12px; margin-left:1px; }

  /* Logbook-Hub + Metriken */
  .lb-sub { margin:0 0 1.25rem; }
  .lb-list { display:flex; flex-direction:column; gap:.7rem; }
  .lb-row { display:flex; align-items:center; gap:.9rem; width:100%; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.95rem 1rem; color:var(--text); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .lb-row:hover { border-color:#cbd5e1; }
  .lb-row.soon { opacity:.55; }
  .lb-row .fc-text { flex:1; min-width:0; }
  /* Klare Hierarchie in Listen-Zeilen (v.a. Fragebögen): Titel fett, Meta darunter heller grau */
  .lb-row .fc-name { font-weight:700; font-size:1rem; line-height:1.3; color:var(--text); }
  .lb-row .fc-count { margin-top:.15rem; font-size:.85rem; font-weight:400; line-height:1.35; color:var(--muted); }
  .lb-chevron { flex:0 0 auto; color:var(--muted); display:flex; }
  .lb-chevron svg { width:18px; height:18px; }
  .metric-tabs { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.35rem; margin-bottom:.9rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .metric-tabs::-webkit-scrollbar { display:none; }
  .metric-tab { flex:0 0 auto; padding:.5rem .85rem; min-height:38px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:.85rem; font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .metric-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
  .lm-chart-card { padding-bottom:1rem; }
  .lm-latest { display:flex; align-items:baseline; gap:.35rem; margin-bottom:.4rem; }
  .lm-latest-val { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--text); }
  .lm-latest-unit { font-size:1rem; color:var(--muted); font-weight:600; }
  .lm-chart { width:100%; }
  .lm-chart svg { width:100%; height:auto; display:block; }
  .lm-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
  .lm-delta { font-size:.8rem; font-weight:700; color:var(--muted); white-space:nowrap; }
  .metric-history { list-style:none; margin:0; padding:0; }
  .metric-history li { display:flex; align-items:center; gap:.75rem; padding:.65rem 0; border-bottom:1px solid var(--border); }
  .metric-history li:last-child { border-bottom:none; }
  .mh-val { font-weight:700; flex:0 0 auto; min-width:74px; }
  .mh-date { color:var(--muted); font-size:.85rem; flex:1; }
  .mh-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:.4rem; min-height:38px; min-width:38px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
  .mh-del svg { width:17px; height:17px; }
  .mh-del:hover { color:#ef4444; }

  /* Body Update: Segmented-Umschalter + Progress Pics */
  .bodyseg { display:flex; gap:.3rem; background:#e9eaec; border:1px solid var(--border); border-radius:999px; padding:.3rem; margin-bottom:1.1rem; }
  .bodyseg-btn { flex:1; min-height:38px; padding:.5rem; border:none; border-radius:999px; background:none; font-size:.92rem; font-weight:700; color:var(--muted); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .bodyseg-btn.active { background:var(--ink); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.22); }
  .bp-add-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1.1rem; }
  .bp-add-btn svg { width:18px; height:18px; }
  .bp-daygroup { margin-bottom:1.2rem; }
  .bp-daylabel { font-size:.8rem; font-weight:700; color:var(--muted); margin-bottom:.5rem; }
  .bp-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
  .bp-thumb { position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--note-bg); cursor:pointer; }
  .bp-thumb img { width:100%; height:100%; object-fit:cover; display:block; image-orientation:from-image; }
  .bp-pose-badge { position:absolute; left:.3rem; bottom:.3rem; background:rgba(0,0,0,.62); color:#fff; font-size:.65rem; font-weight:700; padding:1px 6px; border-radius:999px; }
  .bp-thumb-del { position:absolute; top:.25rem; right:.25rem; width:28px; height:28px; min-height:28px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:none; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .bp-thumb-del svg { width:14px; height:14px; }
  .bp-photo-preview { position:relative; margin-bottom:.8rem; }
  .bp-photo-preview img { width:100%; max-height:300px; object-fit:contain; border-radius:12px; display:block; background:var(--note-bg); image-orientation:from-image; }
  .bp-cam-row { display:flex; gap:.5rem; }
  .bp-cam-row .ghost { flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem; }
  .bp-cam-row .ghost svg { width:18px; height:18px; }

  /* Ernährungsprotokoll (Food Diary) */
  #food-day { padding-bottom: var(--tabbar-clearance); }
  #lf-daylabel { text-align:center; }
  .food-header .kal-top { margin-bottom:.4rem; }
  /* Datum-Sprung: echtes <input type=date> transparent UEBER dem Kalender-Knopf.
     iOS oeffnet den nativen Datum-Picker zuverlaessig nur beim direkten Tippen auf
     ein sichtbares Input — showPicker()/.click() auf einem versteckten Input war
     unzuverlaessig (toter Knopf). opacity:0 bleibt voll antippbar. */
  .lf-jump-wrap { position:relative; display:inline-flex; }
  .lf-jump-wrap > input[type="date"] { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none; font-size:16px; }
  .food-icon-btn { background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:8px; padding:0; min-height:auto; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .food-icon-btn svg { width:16px; height:16px; }
  .food-title { font-size:1.15rem; font-weight:800; margin:0; color:#fff; letter-spacing:-.01em; }
  .food-empty { text-align:center; padding:2.75rem 1rem; }
  .food-empty-emoji { font-size:2.4rem; margin-bottom:.5rem; opacity:.5; }
  .food-entry { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.85rem 1rem; cursor:pointer; }
  .food-entry .fe-body { min-width:0; }
  .food-entry .fe-head { display:flex; align-items:center; gap:.25rem; }
  .food-entry .fe-meal { font-weight:700; font-size:.95rem; }
  .food-entry .fe-chevron { color:var(--muted); display:flex; }
  .food-entry .fe-chevron svg { width:16px; height:16px; }
  .food-entry .fe-text { color:var(--note-text); font-size:.9rem; margin-top:.1rem; white-space:pre-wrap; word-break:break-word; }
  .food-entry .fe-photo { margin-top:.55rem; }
  .food-entry .fe-photo img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; display:block; cursor:pointer; image-orientation:from-image; }
  .food-entry .fe-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:.35rem; min-height:38px; min-width:38px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
  .food-entry .fe-del svg { width:16px; height:16px; }
  .food-entry .fe-del:hover { color:#ef4444; }
  .ff-photo-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem; }
  .ff-photo-btn svg { width:18px; height:18px; }
  .ff-photo-name { margin-top:.6rem; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; word-break:break-all; }
  .ff-photo-name button { background:none; border:none; color:#ef4444; cursor:pointer; padding:.2rem .4rem; min-height:auto; font-size:.85rem; }
  .ff-photo-preview { position:relative; margin-bottom:.6rem; }
  .ff-photo-preview img { width:100%; max-height:220px; object-fit:cover; border-radius:12px; display:block; image-orientation:from-image; }
  .ff-photo-remove { position:absolute; top:.5rem; right:.5rem; width:32px; height:32px; min-height:32px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; display:flex; align-items:center; justify-content:center; padding:0; font-size:1rem; line-height:1; cursor:pointer; }
  .ff-delete { width:100%; margin-top:.6rem; color:#ef4444; border-color:#f1c4c4; }
  .ff-delete:hover { background:#fef2f2; color:#ef4444; }

  /* Check-Ins */
  .ci-group-head { margin:.3rem .15rem -.1rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .ci-divider { height:1px; background:var(--border); margin:.6rem .15rem .2rem; }
  .ci-status { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; }
  .ci-status.open { background:var(--note-bg); color:var(--muted); }
  .ci-status.done { background:#e7f6ec; color:#1a7f44; }
  .ci-status svg { width:13px; height:13px; }
  .ci-done-banner { display:flex; align-items:center; gap:.5rem; background:#e7f6ec; color:#1a7f44; border-radius:12px; padding:.7rem .9rem; font-weight:600; font-size:.9rem; margin-bottom:1rem; }
  .ci-done-banner svg { width:18px; height:18px; flex:0 0 auto; }
  .ci-q { margin-bottom:1.4rem; }
  .ci-q .ci-q-label { font-weight:600; font-size:.95rem; margin-bottom:.6rem; line-height:1.35; }
  .ci-q textarea { width:100%; }
  .ci-scale { display:flex; flex-wrap:wrap; gap:.4rem; }
  .ci-scale button { flex:0 0 auto; width:42px; height:42px; min-height:42px; padding:0; border-radius:11px; border:1px solid var(--border); background:var(--card); color:var(--ink); font-weight:600; font-size:.95rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .ci-scale button.sel { background:var(--ink); color:#fff; border-color:var(--ink); }

  /* Tracking (selbst angelegte Tracker) */
  .trk-daybar { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
  .trk-daybar > button[id="trk-prev"], .trk-daybar > button[id="trk-next"] { width:38px; height:38px; min-height:38px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
  .trk-daybar > button svg { width:16px; height:16px; }
  #trk-daylabel { position:relative; flex:1; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; font-size:.95rem; background:var(--card); border:1px solid var(--border); border-radius:10px; min-height:38px; cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; }
  /* transparentes echtes Datums-Input ueber dem Label -> oeffnet auf iOS zuverlaessig den nativen Picker (kein toter Knopf) */
  #trk-jump-input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; font-size:16px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; }
  .trk-list { display:flex; flex-direction:column; gap:.7rem; }
  /* Zuklappbare Tracker-Karte */
  .trk-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
  .trk-card-head { display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
  .trk-card-head .fc-icon { flex:0 0 auto; }
  .trk-card-titles { flex:1; min-width:0; }
  .trk-card-name { font-weight:700; font-size:1rem; color:var(--text); }
  .trk-card-chev { color:var(--muted); display:flex; flex:0 0 auto; transition:transform .2s ease; }
  .trk-card-chev svg { width:18px; height:18px; }
  .trk-card.open .trk-card-chev { transform:rotate(90deg); }
  /* Status-Häkchen: nur sichtbar, wenn heute ein Wert erfasst ist (gold, dezent) */
  .trk-card-status { width:20px; height:20px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:var(--ink); display:none; align-items:center; justify-content:center; }
  .trk-card-status svg { width:12px; height:12px; }
  .trk-card.has-entry .trk-card-status { display:flex; }
  /* Aufgeklappter Körper */
  .trk-card-body { display:none; padding:0 1rem .9rem; }
  .trk-card.open .trk-card-body { display:block; }
  .trk-card-desc { font-size:.85rem; color:var(--muted); line-height:1.45; padding:.1rem 0 .9rem; }
  .trk-card-more { margin-top:.7rem; background:none; border:none; padding:0; color:var(--muted); font-size:.82rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .trk-field { padding:.55rem 0; }
  .trk-field-label { font-size:.8rem; color:var(--muted); margin-bottom:.45rem; font-weight:600; }
  /* Checkbox-Eingabe (wie Heute-Haken) */
  .trk-check { width:40px; height:40px; min-height:40px; flex:0 0 auto; border-radius:11px; border:1.5px solid var(--border); background:var(--card); color:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
    transition: background var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), transform var(--dur-1) var(--ease-spring); }
  .trk-check:active { transform: scale(.92); }
  .trk-check svg { width:20px; height:20px; overflow:visible; }
  .trk-check.on { background:var(--done); border-color:var(--done); color:var(--ink); animation: fxCheckPop var(--dur-3) var(--ease-spring); }
  /* Zahl-Eingabe — Einheit dezent ins Feld getuckt */
  .trk-num { position:relative; }
  .trk-num input { width:100%; text-align:left; font-size:16px; padding:.6rem .8rem; padding-right:2.6rem; min-height:44px; border:1px solid var(--border); border-radius:11px; background:var(--card); }
  .trk-num .trk-unit { position:absolute; right:.85rem; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--muted); pointer-events:none; }
  /* Notiz-Eingabe (Freitext) mit eigenem Speichern-Knopf */
  .trk-note-wrap { display:flex; flex-direction:column; gap:.5rem; }
  .trk-note { width:100%; font-size:16px; padding:.6rem .8rem; min-height:64px; resize:vertical; border:1px solid var(--border); border-radius:11px; background:var(--card); font-family:inherit; line-height:1.4; }
  .trk-note-save { align-self:flex-end; background:var(--ink); color:#fff; border:none; border-radius:9px; padding:.45rem 1rem; font-size:.85rem; font-weight:600; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .trk-note-save:disabled { opacity:.4; }
  /* Speicher-Feedback (gruener Puls): verfeinerte Version siehe Premium-Politur-Block am Dateiende. */
  /* Skala-Eingabe — eine Reihe, gleich breit */
  .trk-scale { display:flex; gap:5px; }
  .trk-scale button { flex:1; min-width:0; height:42px; padding:0; border-radius:9px; border:1px solid var(--border); background:var(--card); color:var(--ink); font-weight:600; font-size:.9rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .trk-scale button.sel { background:var(--ink); color:#fff; border-color:var(--ink); }
  .trk-add-btn { width:100%; margin-top:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; background:var(--ink); color:#fff; border:none; border-radius:12px; padding:.85rem; font-weight:700; font-size:.95rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .trk-add-btn svg { width:18px; height:18px; }
  /* Symbol-Picker */
  .trk-icons { display:flex; flex-wrap:wrap; gap:.5rem; }
  .trk-icons button { width:46px; height:46px; min-height:46px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
  .trk-icons button svg { width:22px; height:22px; }
  .trk-icons button.sel { background:var(--ink); color:#fff; border-color:var(--ink); }
  .trk-switch { display:flex; align-items:center; gap:.6rem; margin-bottom:1.2rem; font-size:.9rem; cursor:pointer; }
  .trk-switch input { width:20px; height:20px; flex:0 0 auto; }
  /* Felder-Editor */
  .trk-fields { display:flex; flex-direction:column; gap:.7rem; margin-bottom:.7rem; }
  .trk-fedit { border:1px solid var(--border); border-radius:12px; padding:.75rem; background:var(--note-bg); }
  .trk-fedit-row { display:flex; gap:.5rem; align-items:flex-start; }
  .trk-fedit-row .field { flex:1; margin:0; }
  .trk-fedit input, .trk-fedit select { font-size:16px; }
  .trk-fedit-sub { display:flex; gap:.5rem; margin-top:.5rem; }
  .trk-fedit-sub .field { flex:1; margin:0; }
  .trk-fedit-del { background:none; border:none; color:var(--muted); cursor:pointer; padding:.4rem; min-height:38px; min-width:38px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
  .trk-fedit-del svg { width:16px; height:16px; }
  .trk-fedit-del:hover { color:#ef4444; }
  .trk-addfield-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:.4rem; }
  .trk-addfield-btn svg { width:16px; height:16px; }
  .trk-edit-btn { margin:-.4rem 0 1rem; }
  .trk-detail-field { margin-bottom:1.6rem; }
  .trk-detail-field h3 { margin:0 0 .5rem; font-size:1rem; }
  .trk-detail-latest { display:flex; align-items:baseline; gap:.35rem; margin-bottom:.4rem; }
  .trk-detail-latest b { font-size:1.8rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
  .trk-detail-latest span { font-size:.9rem; color:var(--muted); font-weight:600; }

  /* Eintrag-Plus: rundes "+" zentriert oben (Optik wie der fruehere FAB, nur hier statt schwebend).
     Tap klappt ein kleines Menue (Essen/Getraenke) nach UNTEN auf. BEWUSST ohne Vollbild-Scrim
     -> kein iOS-Stacking-Problem; Schliessen per Tap ausserhalb (Listener in 60_food.js). */
  .food-add-top { position:relative; display:flex; justify-content:center; margin:.2rem 0 .9rem; z-index:6; }
  /* Abdunkel-Schleier hinter dem offenen Menue. LEBT IM SELBEN Stacking-Context wie Knopf+Menue
     (innerhalb .food-add-top, z6) -> dimmt die Seite, liegt aber UNTER Knopf(z2)+Menue(z30).
     Genau diese Context-Gleichheit verhindert die iOS-Falle von frueher (Scrim ueber den Knoepfen). */
  .food-add-scrim { position:fixed; inset:0; z-index:1; background:rgba(24,24,27,.34); opacity:0; transition:opacity var(--dur-2) var(--ease-out); pointer-events:none; }
  .food-add-scrim.on { opacity:1; pointer-events:auto; }
  .food-add-fab { position:relative; z-index:2; width:56px; height:56px; border-radius:50%; background:#fff; color:var(--ink); border:1px solid var(--border); box-shadow:var(--sh-2); display:flex; align-items:center; justify-content:center; padding:0; min-height:auto; cursor:pointer; transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-std); will-change:transform; }
  .food-add-fab svg { width:26px; height:26px; transition:transform var(--dur-3) var(--ease-spring); }
  .food-add-fab.open { transform:rotate(45deg); box-shadow:var(--sh-3); }
  .food-add-fab:active:not(:disabled) { transform:scale(.94); }
  .food-add-fab.open:active:not(:disabled) { transform:rotate(45deg) scale(.94); }
  .food-add-menu { position:absolute; top:calc(100% + .55rem); left:50%; display:flex; flex-direction:column; gap:.15rem;
    background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-3); padding:.35rem; min-width:190px; z-index:30;
    transform:translateX(-50%); animation:foodMenuIn var(--dur-2) var(--ease-out); }
  .food-add-menu[hidden] { display:none; }
  @keyframes foodMenuIn { from { opacity:0; transform:translateX(-50%) translateY(-6px) scale(.96); } to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); } }
  .food-add-opt { display:flex; align-items:center; gap:.65rem; width:100%; justify-content:flex-start; background:none; border:none; padding:.65rem .7rem; border-radius:10px; font-weight:600; font-size:1rem; color:var(--text); cursor:pointer; min-height:auto; }
  .food-add-opt:active { background:var(--bg); }
  .food-add-opt svg { width:20px; height:20px; color:var(--ink); flex-shrink:0; }

  /* Getränke: Übersicht in der Tagesansicht */
  .drink-summary { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:.85rem 1rem; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .drink-summary-head { display:flex; align-items:center; gap:.6rem; }
  .drink-summary .fe-meal { font-weight:700; font-size:1rem; flex:1; }
  .ds-edit { width:32px; height:32px; border-radius:9px; background:var(--note-bg); color:var(--muted); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .ds-edit svg { width:16px; height:16px; }
  .ds-chips { display:flex; flex-wrap:wrap; gap:1rem 1.45rem; margin-top:1rem; }
  .ds-item { position:relative; color:var(--ink); display:flex; }
  .ds-item > svg { width:30px; height:30px; }
  .ds-badge { position:absolute; top:-7px; right:-14px; background:var(--note-bg); color:var(--text); font-size:.7rem; font-weight:700; line-height:1; border-radius:999px; padding:2px 5px; }

  /* Getränke: Bottom-Sheet mit Steppern */
  .sheet-overlay { position:fixed; inset:0; z-index:210; display:flex; align-items:flex-end; justify-content:center;
    background:rgba(24,24,27,.45); -webkit-backdrop-filter: var(--blur-sheet); backdrop-filter: var(--blur-sheet);
    opacity:0; transition: opacity var(--dur-3) var(--ease-out); }
  .sheet-overlay.is-open { opacity:1; }
  .sheet-overlay.is-closing { opacity:0; }
  .sheet { background:var(--card); width:100%; max-width:480px; border-radius:18px 18px 0 0; max-height:88vh; display:flex; flex-direction:column; box-shadow: var(--sh-3);
    transform: translate3d(0,100%,0); transition: transform var(--dur-3) var(--ease-out); will-change: transform; }
  .sheet-overlay.is-open .sheet { transform: translate3d(0,0,0); }
  .sheet-overlay.is-closing .sheet { transform: translate3d(0,100%,0); transition-timing-function: var(--ease-in); }
  @media (prefers-reduced-motion: reduce) {
    .sheet-overlay, .sheet { transition:none !important; }
    .sheet { transform:none; }
    .sheet-overlay { opacity:1; -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  .sheet-head { display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem .4rem; }
  .sheet-head h3 { margin:0; font-size:1.05rem; }
  .sheet-close { background:none; border:none; color:var(--muted); cursor:pointer; padding:.3rem; min-height:auto; display:flex; }
  .sheet-close svg { width:22px; height:22px; }
  .sheet-body { overflow-y:auto; padding:.25rem 0; }
  .drink-row { display:flex; align-items:center; gap:.9rem; padding:.7rem 1.1rem; border-bottom:1px solid var(--border); }
  .drink-row:last-child { border-bottom:none; }
  .drink-row .dr-icon { width:30px; display:flex; justify-content:center; color:var(--ink); flex:0 0 30px; }
  .drink-row .dr-icon svg { width:24px; height:24px; }
  .drink-row .dr-name { flex:1; font-weight:600; }
  .stepper { display:flex; align-items:center; gap:.6rem; }
  .stepper button { width:38px; height:38px; min-height:38px; border-radius:10px; background:var(--note-bg); border:none; color:var(--ink); font-size:1.25rem; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
  .stepper button:disabled { opacity:.35; }
  .stepper .dr-count { min-width:24px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
  .sheet-foot { padding:.8rem 1.1rem calc(.9rem + env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
  .sheet-foot button { width:100%; }

  /* Vollbild-Player (Video + Bild, wie YouTube-App) */

/* ---- Klient-Reminder (Kalender-Tagesansicht: selbst anlegen) ---- */
.kal-add-reminder {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:.85rem; padding:.7rem; min-height:44px;
  border:1px dashed var(--border); border-radius:12px; background:transparent;
  color:var(--muted); font-size:.95rem; font-weight:600; cursor:pointer;
}
.kal-add-reminder svg { width:18px; height:18px; }
.kal-add-reminder:active { background:rgba(0,0,0,.03); }
.rem-form .field { margin-bottom:.75rem; }
.rem-form label { display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:.3rem; }
.rem-form input, .rem-form select {
  width:100%; font-size:16px; padding:.6rem .7rem;
  border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
}
.rem-wd { display:flex; gap:.3rem; flex-wrap:wrap; }
.rem-wdchip {
  flex:1; min-width:38px; min-height:38px; padding:0;
  border:1px solid var(--border); border-radius:9px; background:#fff;
  font-size:.85rem; font-weight:600; color:var(--text); cursor:pointer;
}
.rem-wdchip.on { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.rem-dur { display:flex; gap:.5rem; align-items:center; }
.rem-dur input { flex:0 1 5.5rem; min-width:0; }
.rem-durunit { flex:0 0 auto; font-size:16px; color:var(--text); white-space:nowrap; }
  .video-overlay { position:fixed; inset:0; background:#000; z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem;
    opacity:0; transition: opacity var(--dur-3) var(--ease-out); }
  .video-overlay.is-open { opacity:1; }
  .video-overlay.is-closing { opacity:0; }
  .video-overlay .vo-inner { width:100%;
    transform: scale(.94); opacity:0;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); will-change: transform, opacity; }
  .video-overlay.is-open .vo-inner { transform: scale(1); opacity:1; }
  @media (prefers-reduced-motion: reduce) {
    .video-overlay, .video-overlay .vo-inner { transition:none !important; transform:none !important; opacity:1 !important; }
  }
  .video-overlay .video-wrap { position:relative; padding-top:56.25%; width:100%; background:#000; }
  .video-overlay iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .video-overlay .vo-img { display:block; margin:0 auto; max-width:100%; max-height:86vh; width:auto; height:auto; border-radius:8px; object-fit:contain; image-orientation:from-image; }
  .vo-close { position:absolute; top:calc(env(safe-area-inset-top) + .6rem); right:.7rem; width:44px; height:44px; min-height:44px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; font-size:1.25rem; line-height:1; }

  /* ===== PDF-Viewer (PDF.js): Vollbild, zoombar, Lade-Spinner ===== */
  .pdf-overlay { position:fixed; inset:0; z-index:210; background:#3a3a3c; opacity:0; transition:opacity var(--dur-2) var(--ease-out); }
  .pdf-overlay.is-open { opacity:1; }
  .pdf-overlay.is-closing { opacity:0; }
  @media (prefers-reduced-motion: reduce) { .pdf-overlay { transition:none !important; opacity:1; } }
  .pdf-scroll { position:absolute; inset:0; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
  .pdf-pages { width:100%; transform-origin:0 0; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); }
  .pdf-page { display:block; width:100%; margin:0 auto 6px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.35); }
  .pdf-spinner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  .pdf-spin { width:46px; height:46px; border:4px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:pdfSpin .8s linear infinite; }
  @keyframes pdfSpin { to { transform:rotate(360deg); } }
  .pdf-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:2rem; font-size:.95rem; }

  /* Bottom Tab-Leiste */
  .tabbar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
    width: 100%; max-width: 480px;
    display: flex; justify-content: space-around; align-items: flex-start;
    background: #fffdf6; border-top: 1px solid var(--border);
    padding: .6rem .4rem calc(.6rem + env(safe-area-inset-bottom));
    z-index: 50;
    transition: transform var(--dur-3) var(--ease-out);   /* weiches Aus-/Einfahren bei offener Tastatur */
  }
  .tab {
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    flex: 1; padding: .15rem; min-height: auto;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-icon {
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-2) var(--ease-std),
                color var(--dur-2) var(--ease-std),
                transform var(--dur-1) var(--ease-spring);
  }
  .tab-icon svg { width: 25px; height: 25px; }
  .tab.active .tab-icon { background: var(--gold); color: var(--ink); }
  .tab-label { font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; transition: color var(--dur-2) var(--ease-std); }
  .tab.active .tab-label { color: var(--text); }
  /* "Landung" der aktiven Kachel: kurzer Spring-Ueberschwinger beim Aktivieren */
  @keyframes navTabPop { 0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .tab-icon.tab-active-pop { animation: navTabPop var(--dur-3) var(--ease-spring); }
  @media (prefers-reduced-motion: reduce) { .tab-icon.tab-active-pop { animation: none !important; } }

  /* "Zur App hinzufügen"-Hinweis (pwa-Prefix, eigener Namensraum) */
  .pwa-install {
    display: flex; align-items: center; gap: .7rem;
    margin: 0 0 1.25rem;
    background: var(--ink); color: #fff;
    border-radius: 14px; padding: .7rem .8rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }
  .pwa-install .pwa-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    background: var(--gold); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
  .pwa-install .pwa-ico svg { width: 20px; height: 20px; }
  .pwa-install .pwa-txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .pwa-install .pwa-txt strong { display: block; font-size: .92rem; }
  .pwa-install .pwa-txt span { display: block; font-size: .78rem; color: #d4d4d8; }
  .pwa-install .pwa-act {
    flex: 0 0 auto; background: var(--gold); color: var(--ink);
    font-weight: 600; font-size: .85rem; padding: .5rem .8rem; min-height: 38px;
    border-radius: 9px;
  }
  .pwa-install .pwa-x {
    flex: 0 0 auto; background: transparent; color: #a1a1aa;
    width: 30px; height: 30px; min-height: 30px; padding: 0; font-size: 1.1rem; line-height: 1;
    border-radius: 8px;
  }
  .pwa-install .pwa-inline-ico { display: inline-flex; vertical-align: -.18em; }
  .pwa-install .pwa-inline-ico svg { width: 1.05em; height: 1.05em; color: var(--gold); }
  .pwa-install.pwa-tap { cursor: pointer; }

  /* Installier-Anleitung-Overlay */
  .pwa-guide { position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 300; }
  .pwa-guide-card {
    position: absolute; left: 50%; transform: translateX(-50%); top: 33%;
    width: calc(100% - 2.5rem); max-width: 420px;
    background: var(--card); color: var(--text);
    border-radius: 16px; padding: 1.3rem 1.3rem 1.4rem;
    box-shadow: 0 14px 44px rgba(0,0,0,.45);
  }
  .pwa-guide-card h3 { margin: 0 0 1.1rem; font-size: 1.15rem; }
  .pwa-guide-steps { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
  .pwa-guide-steps li { display: flex; gap: .7rem; align-items: flex-start; line-height: 1.45; font-size: 1rem; }
  .pwa-guide-steps .pwa-step-n {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    background: var(--gold); color: var(--ink); font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
  }
  .pwa-guide .pwa-inline-ico { display: inline-flex; vertical-align: -.22em; }
  .pwa-guide .pwa-inline-ico svg { width: 1.2em; height: 1.2em; color: var(--ink); }
  #pwa-guide-ok { width: 100%; }

  /* Toggle-Schalter (Benachrichtigungen) */
  .push-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .push-row-txt { min-width: 0; }
  .switch {
    flex: 0 0 auto; width: 52px; height: 31px; border-radius: 999px;
    background: var(--border); position: relative; padding: 0; border: none;
    transition: background .2s; -webkit-tap-highlight-color: transparent; min-height: 31px;
  }
  .switch[aria-checked="true"] { background: var(--gold); }
  .switch .switch-knob {
    position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s;
  }
  .switch[aria-checked="true"] .switch-knob { left: 24px; }
  .switch:disabled { opacity: .45; }

  /* ==================== Training (Trainingsplan) ==================== */
  #view-training { padding-bottom: 2rem; }
  #training-home .dash-title { margin-bottom: .1rem; }

  /* Plan-Liste */
  .trn-plan-list { display: flex; flex-direction: column; gap: .7rem; }
  .trn-plan-card {
    display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 1rem 1.05rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .trn-plan-card:hover { border-color: #cbd5e1; }
  .trn-plan-main { flex: 1; min-width: 0; }
  .trn-plan-name { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; }
  .trn-plan-meta { color: var(--muted); font-size: .85rem; margin-top: .15rem; }
  .trn-badge {
    flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--muted);
    background: var(--note-bg); border-radius: 999px; padding: .2rem .6rem;
  }

  /* Plan-Detail */
  .trn-plan-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: .35rem 0 .15rem; color: var(--text); }
  .trn-plan-desc { margin: 0 0 1.1rem; }
  .trn-unit {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 1.1rem 1.05rem; margin-bottom: 1rem;
  }
  .trn-unit-head { margin-bottom: .65rem; }
  .trn-unit-title {
    margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: .02em;
    text-transform: uppercase; color: var(--text);
  }
  .trn-phase-label {
    display: flex; align-items: center; gap: .6rem; text-align: center;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin: 1.25rem 0 .65rem;
  }
  .trn-phase-label::before,
  .trn-phase-label::after { content: ''; flex: 1; border-top: 1px dashed var(--border); }
  .trn-ex-list { display: flex; flex-direction: column; gap: .5rem; }

  .trn-done-btn {
    width: 100%; margin-top: 1.1rem; min-height: 48px; border-radius: 12px;
    border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
    font-weight: 700; font-size: .95rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .trn-done-btn:disabled { opacity: .55; }
  .trn-done-btn.is-done { background: var(--success-bg); color: var(--success-text); border-color: var(--gold); }

  /* ================= Training-Logging (Logging-Karte + Overlays) ================= */
  .trn-ic { display: inline-flex; }
  .trn-ic svg { width: 20px; height: 20px; }

  /* Workout-Bereich bewusst luftig: KEIN harter Rahmen (sonst Rand-um-Rand-um-Rand), nur dezenter Schatten + mehr Platz. */
  .trn-logcard { background: var(--card); border-radius: 16px; padding: 1rem 1rem 1.05rem; margin-bottom: 1.15rem; box-shadow: 0 1px 3px rgba(24,24,27,.06), 0 1px 2px rgba(24,24,27,.04); }
  .trn-logcard.is-locked { opacity: .92; }
  .trn-logcard-head { display: flex; align-items: center; gap: .5rem; }
  .trn-logcard-name { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -.01em; flex: 1; min-width: 0; }
  .trn-alt-badge { flex: 0 0 auto; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); background: var(--accent); padding: .15rem .45rem; border-radius: 999px; }
  .trn-soll { margin-top: .25rem; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

  .trn-alt-icon { flex: 0 0 auto; width: 38px; height: 38px; margin: -.35rem -.35rem -.35rem 0; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--accent-hover); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .trn-alt-icon .trn-ic svg { width: 22px; height: 22px; }
  .trn-alt-icon:active { opacity: .55; }

  .trn-sets { margin-top: .7rem; display: flex; flex-direction: column; }
  /* Spalten-Kopf: Labels EINMAL oben (Set · Wdh · kg · Sek · …), danach je Satz nur EINE Zeile.
     Skaliert automatisch mit weiteren Parametern (z.B. spaeter "Rest"). */
  /* Grid: 26px (Set-Nr.) + N gleich breite, schrumpfbare Spalten (minmax(0,1fr)!) + 42px (Haken).
     --cols wird je Uebung per JS gesetzt. minmax(0,1fr) erlaubt Schrumpfen UNTER die Feld-Mindestbreite
     -> Zeile passt immer in 360px, egal wie viele Parameter. Kopf nutzt dasselbe Raster -> Spalten fluchten. */
  .trn-set-head,
  .trn-logset { display: grid; gap: .4rem; }  /* grid-template-columns setzt JS explizit je Karte (iOS-sicher, kein repeat(var())) */
  .trn-set-head { align-items: end; padding-bottom: .35rem; border-bottom: 1px solid var(--border); }
  .trn-set-col { font-size: .62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  .trn-set-hcell { min-width: 0; font-size: .62rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; text-align: center; line-height: 1.15; overflow-wrap: anywhere; word-break: break-word; }

  .trn-logset { align-items: center; padding: .42rem 0; border-top: 1px solid var(--border); }
  .trn-sets-body .trn-logset:first-child { border-top: none; }
  .trn-set-no { display: flex; align-items: center; min-height: 42px; font-size: .9rem; font-weight: 800; color: var(--text); }
  .trn-field-in { width: 100%; min-width: 0; box-sizing: border-box; min-height: 42px; padding: .35rem .25rem; font-size: 16px; font-weight: 700; color: var(--text); background: #fafafa; border: 1px solid var(--border); border-radius: 9px; text-align: center; }
  .trn-field-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(251,191,36,.3); }
  /* Pause/REST: reine Anzeige (Coach-Vorgabe), kein Eingabefeld -> grau, ohne Rahmen */
  .trn-rest-cell { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--muted); font-weight: 700; font-size: .92rem; white-space: nowrap; }

  /* Satz hinzufuegen: kompakte, MITTIG zentrierte Zeile mit Trennstrich oben (wie zwischen den
     Saetzen). Bewusst flach -> wenig Abstand zwischen den zwei Linien (Platz sparen, ablenkungsfrei).
     Entfernen: der letzte selbst hinzugefuegte, noch nicht abgehakte Satz zeigt statt seiner Nummer
     ein "−". WICHTIG: globale button{min-height:44px} hier aufheben (min-height:0), sonst werden die
     kleinen Kreise zu hohen Ovalen gestaucht. Unsichtbare ::after-Flaeche haelt das Tap-Target bei
     ~44px, ohne den Kreis zu vergroessern (beim "−" nur vertikal, damit es keine Klicks der
     WDH-Spalte abfaengt). */
  .trn-set-addrow { display: flex; justify-content: center; align-items: center; padding: .3rem 0 .1rem; border-top: 1px solid var(--border); }
  .trn-set-plus, .trn-set-minus { flex: 0 0 auto; position: relative; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .trn-set-plus::after, .trn-set-minus::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 44px; }
  .trn-set-plus::after { width: 44px; }
  .trn-set-minus::after { width: 28px; }
  .trn-set-plus { width: 26px; height: 26px; border: 1px dashed var(--border); border-radius: 50%; color: var(--accent-hover); font-size: 1.2rem; font-weight: 700; }
  .trn-set-plus:active { background: #f4f4f5; }
  .trn-set-minus { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 1.15rem; }
  .trn-set-minus:active { background: #f4f4f5; }

  /* Satz-Haken: in Ruhe antippen, wenn der Satz erledigt ist (speichert) */
  .trn-set-check { flex: 0 0 auto; align-self: center; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 1.5px solid var(--border); border-radius: 50%; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease; }
  .trn-set-check svg { width: 20px; height: 20px; opacity: .4; }
  .trn-set-check.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .trn-set-check.on svg { opacity: 1; }
  .trn-set-check:disabled { opacity: .5; }
  .trn-logset.is-done .trn-set-no { color: var(--accent-hover); }

  .trn-logcard-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; margin-top: .45rem; padding-top: .6rem; border-top: 1px solid var(--border); }
  .trn-foot-info { min-width: 0; }
  .trn-last { min-width: 0; }
  .trn-last-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .trn-last-val { font-size: .85rem; font-weight: 700; color: var(--text); margin-top: .05rem; }
  .trn-foot-icons { flex: 0 0 auto; display: flex; gap: .35rem; }
  .trn-icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .trn-icon-btn:active { background: #f4f4f5; }

  .trn-note-bubble { margin-top: .6rem; font-size: .8rem; font-weight: 600; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 9px; padding: .4rem .6rem; }

  /* --- Anleitung-Overlay (dunkel, auf schwarzem video-overlay) --- */
  .trn-instr { color: #fff; max-width: 440px; margin: 0 auto; max-height: 86vh; overflow-y: auto; padding: 2.6rem .2rem 1rem; }
  .trn-instr-head { margin-bottom: .9rem; }
  .trn-instr-name { font-size: 1.2rem; font-weight: 800; }
  .trn-instr-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--accent); margin-top: .2rem; }
  .trn-instr-vid { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; }
  .trn-instr-steps { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
  .trn-instr-steps li { color: #e4e4e7; line-height: 1.5; font-size: .95rem; }
  .trn-instr-empty { color: #a1a1aa; }

  /* --- Verlauf-/Sheet-/Video-Overlays (weisse Karte auf schwarzem Overlay) --- */
  .trn-hist, .trn-altsheet, .trn-vc { background: var(--card); color: var(--text); max-width: 440px; margin: 0 auto; max-height: 86vh; overflow-y: auto; border-radius: 16px; padding: 1.1rem 1.1rem 1.3rem; }
  .trn-hist-title, .trn-altsheet-title, .trn-vc-title { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 800; color: var(--text); }
  .trn-hist-empty, .trn-vc-empty { color: var(--muted); margin: 0; }
  .trn-hist-kpis { display: flex; gap: .5rem; margin-bottom: 1rem; }
  .trn-hist-kpi { flex: 1; background: #fafafa; border: 1px solid var(--border); border-radius: 12px; padding: .6rem .4rem; text-align: center; }
  .trn-hist-kpi-val { font-size: 1.05rem; font-weight: 800; color: var(--text); }
  .trn-hist-kpi-lbl { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-top: .15rem; }
  .trn-hist-chart { margin-bottom: 1rem; }
  .trn-hist-chart svg { width: 100%; height: auto; display: block; }
  .trn-hist-chart polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .trn-hist-chart circle { fill: var(--accent); }
  .trn-hist-table { display: flex; flex-direction: column; }
  .trn-hist-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--border); font-size: .88rem; }
  .trn-hist-date { color: var(--muted); }
  .trn-hist-val { font-weight: 700; color: var(--text); text-align: right; }

  .trn-vc-item { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .8rem; }
  .trn-vc-video { width: 100%; border-radius: 10px; background: #000; max-height: 60vh; }
  .trn-vc-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .45rem; }
  .trn-vc-status { font-size: .8rem; font-weight: 700; }
  .trn-vc-status.pending { color: var(--accent-hover); }
  .trn-vc-status.ok { color: #16a34a; }
  .trn-vc-date { font-size: .76rem; color: var(--muted); }
  .trn-vc-feedback { margin-top: .5rem; background: #fafafa; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: .55rem .7rem; font-size: .88rem; color: var(--text); line-height: 1.45; }
  .trn-vc-del { margin-top: .5rem; background: none; border: none; padding: .2rem 0; color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
  .trn-vc-add { width: 100%; margin-top: 1.1rem; min-height: 46px; background: var(--ink); color: #fff; border: none; border-radius: 12px; font-size: .92rem; font-weight: 700; cursor: pointer; }

  .trn-altsheet-sub { margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); }
  .trn-altsheet-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 56px; padding: .7rem .8rem; margin-bottom: .5rem; background: #fafafa; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left; }
  .trn-altsheet-row.active { border-color: var(--accent); background: #fffbeb; }
  .trn-altsheet-body { flex: 1; min-width: 0; }
  .trn-altsheet-name { font-weight: 700; color: var(--text); }
  .trn-altsheet-rowsub { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
  .trn-altsheet-check { flex: 0 0 auto; color: var(--accent-hover); font-weight: 800; font-size: 1.1rem; }

  /* --- Einheit-Auswahl: "heute erledigt"-Badge --- */
  .trn-badge-done { background: var(--accent); color: var(--ink); border: none; }

  /* --- Footer-Kamera (Video-Check, einmal je Übung) aktiv --- */
  .trn-cam-btn.has { color: var(--accent-hover); border-color: var(--accent); position: relative; }
  .trn-cam-btn.has::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .trn-cam-btn.loading { opacity: .5; }

  /* --- gesperrtes (abgeschlossenes) Workout --- */
  .trn-locked-note { background: #fffbeb; border: 1px solid var(--accent); border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; font-weight: 700; font-size: .88rem; color: var(--ink); }
  .trn-field-in:disabled { background: #f4f4f5; color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }

  /* --- Workout abschließen (Bestätigung + Bewertung 1–10 + Notiz) --- */
  .trn-complete { background: var(--card); color: var(--text); max-width: 440px; margin: 0 auto; max-height: 86vh; overflow-y: auto; border-radius: 16px; padding: 1.2rem 1.1rem 1.3rem; }
  .trn-complete-title { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; }
  .trn-complete-sub { margin: 0 0 1.1rem; font-size: .86rem; color: var(--muted); line-height: 1.4; }
  .trn-complete-q { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 .5rem; }
  .trn-rate-scale { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
  .trn-rate-scale button { flex: 1 0 auto; min-width: 40px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #fafafa; font-size: 1rem; font-weight: 700; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .trn-rate-scale button.sel { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .trn-complete-note { width: 100%; box-sizing: border-box; min-height: 70px; padding: .6rem .7rem; font-size: 16px; border: 1px solid var(--border); border-radius: 10px; resize: vertical; margin-bottom: 1.1rem; color: var(--text); }
  .trn-complete-note:focus { outline: none; border-color: var(--accent); }
  .trn-complete-actions { display: flex; gap: .6rem; }
  .trn-complete-cancel { flex: 1; min-height: 48px; background: none; border: 1px solid var(--border); border-radius: 12px; font-size: .95rem; font-weight: 700; color: var(--text); cursor: pointer; }
  .trn-complete-ok { flex: 2; min-height: 48px; background: var(--ink); color: #fff; border: none; border-radius: 12px; font-size: .95rem; font-weight: 800; cursor: pointer; }

  /* Trainingslog-Knopf (auf der Einheiten-Auswahl) */
  .trn-log-btn { width: 100%; margin-top: 1.2rem; min-height: 48px; background: none; border: 1px solid var(--border); border-radius: 12px; font-size: .92rem; font-weight: 700; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* "Hurra"-Feier (auf schwarzem Overlay) */
  .trn-celebrate { text-align: center; color: #fff; max-width: 360px; margin: 0 auto; padding: 2rem 1rem; }
  .trn-celebrate-emoji { font-size: 4rem; line-height: 1; animation: trnPop .5s cubic-bezier(.2,1.3,.4,1) both; }
  .trn-celebrate-title { font-size: 1.5rem; font-weight: 800; margin-top: .8rem; }
  .trn-celebrate-sub { color: #d4d4d8; margin-top: .3rem; }
  @keyframes trnPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

  /* Trainingslog-Overlay (weisse Karte) */
  .trn-log { background: var(--card); color: var(--text); max-width: 440px; margin: 0 auto; max-height: 86vh; overflow-y: auto; border-radius: 16px; padding: 1.1rem 1.1rem 1.3rem; }
  .trn-log-title { margin: 0 0 .9rem; font-size: 1.1rem; font-weight: 800; }
  .trn-log-empty { color: var(--muted); margin: 0; line-height: 1.5; }
  .trn-log-item { border-top: 1px solid var(--border); padding: .85rem 0; }
  .trn-log-item:first-of-type { border-top: none; }
  .trn-log-head { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
  .trn-log-unit { font-weight: 800; color: var(--text); }
  .trn-log-date { font-size: .76rem; color: var(--muted); flex: 0 0 auto; }
  .trn-log-rating { font-size: .8rem; font-weight: 700; color: var(--accent-hover); margin-top: .15rem; }
  .trn-log-ex { display: flex; justify-content: space-between; gap: .8rem; margin-top: .45rem; font-size: .85rem; }
  .trn-log-exname { color: var(--text); font-weight: 600; min-width: 0; }
  .trn-log-exsets { color: var(--muted); text-align: right; flex: 0 0 auto; }
  .trn-log-note { margin-top: .5rem; font-size: .85rem; color: var(--text); background: #fafafa; border-left: 3px solid var(--accent); border-radius: 6px; padding: .45rem .6rem; }

  /* ==================== Premium-Politur (Micro-Interaktionen / Charts / Links) ==================== */

  /* iOS-PWA: Links erben die Textfarbe statt System-Blau. -webkit-text-fill-color killt den
     hartnaeckigen blauen iOS-Auto-Link (Telefon/Datum). Spezifischere Chat-Bubble-Regeln gewinnen. */
  a { color: inherit; -webkit-text-fill-color: currentColor; }

  /* Skala-/Check-In-Buttons: taktiler Druck + weiche Auswahl, kleiner Pop beim Selektieren */
  .trk-scale button, .ci-scale button {
    transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std),
                border-color var(--dur-2) var(--ease-std), transform var(--dur-1) var(--ease-spring);
  }
  .trk-scale button:active, .ci-scale button:active { transform: scale(.92); }
  .trk-scale button.sel, .ci-scale button.sel { animation: fxSelPop var(--dur-2) var(--ease-spring); }
  @keyframes fxSelPop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
  /* Segmented-/Filter-Chips */
  .metric-tab { transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std),
                border-color var(--dur-2) var(--ease-std), transform var(--dur-1) var(--ease-spring); }
  .metric-tab:active { transform: scale(.95); }

  /* Antippbare Div-Zeilen (keine <button>) bekommen denselben taktilen Druck */
  .media-row, .food-entry, .drink-summary, .trk-card-head, .lb-row, .habit-li .h-title {
    transition: transform var(--dur-1) var(--ease-std), border-color var(--dur-2) var(--ease-std); }
  .media-row:active, .food-entry:active, .drink-summary:active, .trk-card-head:active { transform: scale(.985); }

  /* Chart-Linien zeichnen sich selbst ein (metricChartSvg: Klassen lm-line/lm-area/lm-dot) */
  .lm-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxLineDraw var(--dur-4) var(--ease-out) forwards; }
  .lm-area { opacity: 0; animation: fxAreaFade var(--dur-4) var(--ease-out) .12s forwards; }
  .lm-dot { opacity: 0; transform-box: fill-box; transform-origin: center;
    animation: fxDotIn var(--dur-2) var(--ease-spring) forwards;
    animation-delay: calc(var(--dur-4) * .55 + var(--dot-i, 0) * 30ms); }
  @keyframes fxLineDraw { to { stroke-dashoffset: 0; } }
  @keyframes fxAreaFade { to { opacity: .14; } }
  @keyframes fxDotIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

  /* Speicher-Puls (Tracking): verfeinert — gruener Ring + dezenter Tick. GRUEN, nicht Gold. */
  @keyframes trkSavedFlash {
    0%   { box-shadow: 0 0 0 0 rgba(26,127,68,.55); }
    35%  { box-shadow: 0 0 0 5px rgba(26,127,68,.30); }
    100% { box-shadow: 0 0 0 8px rgba(26,127,68,0); }
  }
  @keyframes trkSavedTick { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
  .trk-saved-flash { animation: trkSavedFlash var(--dur-4) var(--ease-out), trkSavedTick var(--dur-3) var(--ease-spring); border-radius: 11px; }

  /* Reduced-Motion: Micro-Interaktionen ruhigstellen + Endzustaende sofort zeigen */
  @media (prefers-reduced-motion: reduce) {
    .lm-line, .lm-area, .lm-dot, .trk-scale button, .ci-scale button, .metric-tab, .trk-saved-flash { animation: none !important; transition: none !important; }
    .lm-line { stroke-dashoffset: 0 !important; }
    .lm-area, .lm-dot { opacity: 1 !important; }
  }
  /* ==================== Training: Verlauf-Log + Statistik (57_training_stats.js) ==================== */

  /* Segment-Switcher (Pläne · Verlauf · Statistik) — nutzt .bodyseg-Optik */
  .trn-seg { margin: .25rem 0 1.15rem; }

  /* Zeitraum-Chips (rechtsbündig, dezent) */
  .trn-period { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; margin-bottom: 1rem; }
  .trn-period-btn {
    min-height: 0; padding: .34rem .72rem; font-size: .78rem; font-weight: 700;
    border-radius: 999px; border: 1px solid var(--border); background: var(--card);
    color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
  }
  .trn-period-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .trn-period-btn:active { transform: scale(.95); }

  /* ---------------- Verlauf (Log-Pane) ---------------- */
  .trn-log-list { display: flex; flex-direction: column; gap: .7rem; }
  #trn-pane-log .trn-log-item {
    border-top: none; background: var(--card); border: 1px solid var(--border);
    border-radius: 14px; padding: .9rem 1rem; margin: 0;
    overflow: hidden; transition: opacity .2s ease, height .2s ease, padding .2s ease, margin .2s ease;
  }
  #trn-pane-log .trn-log-item.trn-log-removing { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; }
  .trn-log-headtext { min-width: 0; }
  #trn-pane-log .trn-log-head { align-items: flex-start; }
  .trn-log-metarow { font-size: .76rem; color: var(--muted); margin-top: .25rem; }
  /* Übungszeile gestapelt: Name oben, Sätze darunter (lange Satz-Strings kleben sonst am Namen) */
  #trn-pane-log .trn-log-ex { flex-direction: column; align-items: flex-start; gap: .1rem; margin-top: .5rem; }
  #trn-pane-log .trn-log-exname { font-weight: 700; }
  #trn-pane-log .trn-log-exsets { text-align: left; color: var(--muted); }
  .trn-log-del {
    flex: 0 0 auto; width: 34px; height: 34px; margin: -.2rem -.2rem 0 0; display: flex; align-items: center; justify-content: center;
    padding: 0; background: none; border: none; border-radius: 9px; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .trn-log-del svg { width: 18px; height: 18px; }
  .trn-log-del.armed { color: #b91c1c; background: #fef2f2; }
  .trn-log-del.armed svg { transform: scale(1.1); }
  .trn-log-empty { color: var(--muted); margin: .3rem 0; line-height: 1.5; }

  /* ---------------- Statistik (Stats-Pane) ---------------- */
  .trn-stat-chips { margin-bottom: 1.1rem; }
  .trn-stat-body { display: block; }
  .trn-stat-hint, .trn-stat-empty { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: .6rem 0; }
  .trn-exstat { display: flex; flex-direction: column; gap: 1.1rem; }

  /* KPI-Kacheln */
  .trn-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.15rem; }
  .trn-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .7rem; text-align: center; }
  .trn-kpi-val { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
  .trn-kpi-lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-top: .2rem; }

  /* Chart-Karten (metricChartSvg) */
  .trn-chart-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: .9rem 1rem 1rem; margin-bottom: 1rem; }
  .trn-chart-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: .5rem; }
  .trn-chart-box svg { width: 100%; height: auto; display: block; }

  /* Bestwerte / PRs */
  .trn-prs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .trn-pr {
    background: #fffdf5; border: 1px solid var(--accent); border-radius: 13px;
    padding: .65rem .55rem; text-align: center; position: relative;
  }
  .trn-pr-val { font-size: 1.12rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
  .trn-pr-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-hover); margin-top: .15rem; }
  .trn-pr-date { font-size: .66rem; color: var(--muted); margin-top: .2rem; }

  /* Soll-Ist */
  .trn-sollist { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: .9rem 1rem 1rem; }
  .trn-sollist-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: .6rem; }
  .trn-sollist-bar { height: 12px; background: #f1f1f3; border-radius: 999px; overflow: hidden; }
  .trn-sollist-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 999px; transition: width .7s var(--ease-out); }
  .trn-sollist-meta { font-size: .82rem; font-weight: 700; color: var(--text); margin-top: .55rem; }
  .trn-sollist-cmp { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

  /* Form-Check-Aufnahmen je Übung (gebündelt) */
  .trn-vh { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: .9rem 1rem 1rem; }
  .trn-vh-title { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: .6rem; }
  .trn-vh-list { display: flex; flex-direction: column; gap: .9rem; }
  .trn-vh-empty { color: var(--muted); font-size: .86rem; margin: 0; }
  .trn-vh-item { border-top: 1px solid var(--border); padding-top: .9rem; }
  .trn-vh-list .trn-vh-item:first-child { border-top: none; padding-top: 0; }
  .trn-vh-video { width: 100%; border-radius: 10px; background: #000; max-height: 56vh; }
  .trn-vh-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .45rem; }
  .trn-vh-date { font-size: .76rem; color: var(--muted); }
  .trn-vh-rating { font-size: .82rem; font-weight: 700; color: var(--accent-hover); margin-top: .4rem; }

  /* Übungs-Verlauf-Overlay (Chart-Icon der Logging-Karte): heller Karton wie .trn-hist.
     Der Statistik-Block .trn-exstat liegt darin; Karten brauchen dort keinen Doppelrahmen. */
  .trn-hist .trn-exstat .trn-chart-card,
  .trn-hist .trn-exstat .trn-sollist,
  .trn-hist .trn-exstat .trn-vh { border-color: var(--border); }

  @media (min-width: 520px) {
    .trn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .trn-prs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }