/* tages-app.css — Tages-App auf eigener Adresse heute.html (Plan 01.10.2026).
   heute.html entsteht per bin/build_heute.py aus planung.html; planung.html bleibt unverändert (Daniel 01.10.).
   Kanon: cockpit-ux-ui.md — Tokens der Seite, System-Schrift, Tap-Ziele ≥ 44 px, Farbe nie allein. */
#tagesapp { display:none; }
html.app-mode #tagesapp { display:block; }
html.app-mode .wrap { display:none; }

:root {
  --ta-isha-bg:#e6ecf5; --ta-isha-fg:#2f4a73;
  --ta-netz-bg:#efe9f7; --ta-netz-fg:#5b3f86;
  --ta-priv-bg:#eeeae2; --ta-priv-fg:#5b5548;
  --ta-geld-bg:#fdf1da; --ta-geld-fg:#7a5b16;
  --ta-kunde-bg:#e3f3eb; --ta-kunde-fg:#1f6b47;
  --ta-muted:#6e6e6e;
  --ta-now-bg:#2b2e33; --ta-now-fg:#f7f6f3; --ta-now-sub:#cfccc4; --ta-now-btn:#3a3d43; --ta-now-line:#4a4d54;
}
html[data-theme="dark"] {
  --ta-isha-bg:#1e2a3d; --ta-isha-fg:#9db7e0;
  --ta-netz-bg:#2b2340; --ta-netz-fg:#c4b0e8;
  --ta-priv-bg:#2c2a26; --ta-priv-fg:#c9c2b3;
  --ta-geld-bg:#3a2e18; --ta-geld-fg:#e5b35d;
  --ta-kunde-bg:#1f3a2d; --ta-kunde-fg:#4cc192;
  --ta-muted:#9a9ca3;
  --ta-now-bg:#2f3239; --ta-now-fg:#f2f0ea; --ta-now-sub:#b9b7b0; --ta-now-btn:#3c4048; --ta-now-line:#4d515a;
}

/* Fühlt sich an wie eine App: kein Nachfedern, kein seitliches Verschieben, kein Zoomen per Doppeltipp oder zwei Fingern */
html.app-mode, html.app-mode body { overflow-x:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.app-mode { touch-action:pan-y; }
html.app-mode body { -webkit-tap-highlight-color:transparent; }

#tagesapp { min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; }
.ta-shell { max-width:560px; margin:0 auto; padding:calc(18px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
@media (min-width:960px) {
  .ta-shell { max-width:1040px; padding-top:calc(28px + env(safe-area-inset-top)); }
  .ta-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
}
.ta-col { display:flex; flex-direction:column; gap:20px; }
.ta-cols > .ta-col + .ta-col { margin-top:20px; }
@media (min-width:960px) { .ta-cols > .ta-col + .ta-col { margin-top:0; } }

.ta-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:18px; }
.ta-eyebrow { font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ta-muted); }
.ta-h1 { margin:4px 0 0; font-size:27px; line-height:1.15; font-weight:700; }
.ta-meta { text-align:right; font-size:12.5px; color:var(--ta-muted); line-height:1.5; }
.ta-meta .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; vertical-align:1px; }
.ta-meta button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; min-height:24px; }

.ta-sec { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.ta-sec button, .ta-sec a { font:inherit; font-size:13.5px; font-weight:650; color:var(--ta-muted); background:none; border:0; cursor:pointer; min-height:32px; padding:0 2px; text-decoration:none; }
.ta-card { background:var(--card); border:1px solid var(--line); border-radius:14px; }

/* Jetzt */
.ta-now { background:var(--ta-now-bg); border-color:var(--ta-now-bg); color:var(--ta-now-fg); padding:16px; display:flex; flex-direction:column; gap:12px; }
.ta-now-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.ta-now-t { font-size:21px; font-weight:700; line-height:1.2; }
.ta-now-s { font-size:14.5px; color:var(--ta-now-sub); margin-top:3px; font-variant-numeric:tabular-nums; }
.ta-now-f { font-size:15px; line-height:1.4; }
.ta-now-pill { font-size:12px; font-weight:700; padding:3px 9px; border-radius:8px; background:var(--senfgelb); color:#2b2e33; white-space:nowrap; }
.ta-btns { display:flex; flex-wrap:wrap; gap:8px; }
.ta-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; border-radius:10px;
  font:inherit; font-size:14.5px; font-weight:650; cursor:pointer; text-decoration:none;
  background:var(--card); color:var(--ink); border:1px solid var(--line); }
.ta-now .ta-btn { background:var(--ta-now-btn); border-color:var(--ta-now-line); color:var(--ta-now-fg); }
/* Jetzt-Karte: eine Hauptaktion groß, alles Weitere hinter ••• (Runde 3) */
.ta-now-acts { display:flex; gap:8px; }
.ta-now-acts > .ta-btn:first-child:not(.ta-more) { flex:1; background:var(--senfgelb); border-color:var(--senfgelb); color:#2b2e33; }
.ta-now .ta-more { flex:0 0 56px; padding:0; font-size:18px; letter-spacing:1px; }
.ta-btn .ta-ico { line-height:1; }
.ta-btn.on { background:var(--pill-ok); border-color:var(--ok); color:var(--ink); }
.ta-btn.primary { background:var(--anthrazit); border-color:var(--anthrazit); color:var(--bg); }

/* Listenzeilen */
.ta-row { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 14px; box-sizing:border-box;
  background:none; border:0; border-top:1px solid var(--line); font:inherit; color:inherit; text-align:left; cursor:pointer; }
.ta-row:first-child { border-top:0; }
.ta-row:hover { background:color-mix(in srgb, var(--senfgelb) 6%, transparent); }
.ta-row.done .ta-rt { text-decoration:line-through; color:var(--ta-muted); }
.ta-zeit { width:46px; flex-shrink:0; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.ta-rmain { flex:1; min-width:0; }
.ta-rt { font-size:15px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.ta-rs { font-size:13.5px; color:var(--ta-muted); line-height:1.3; margin-top:1px; overflow-wrap:anywhere; }
.ta-wann { font-size:12.5px; font-weight:700; white-space:nowrap; color:var(--ta-muted); font-variant-numeric:tabular-nums; }
.ta-wann.hot { color:var(--crit-text, var(--crit)); }
.ta-tag { font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:6px; white-space:nowrap; flex-shrink:0; min-width:58px; text-align:center; box-sizing:border-box; }
.ta-tag.geld { background:var(--ta-geld-bg); color:var(--ta-geld-fg); }
.ta-tag.isha { background:var(--ta-isha-bg); color:var(--ta-isha-fg); }
.ta-tag.kunde { background:var(--ta-kunde-bg); color:var(--ta-kunde-fg); }
.ta-tag.netzwerk { background:var(--ta-netz-bg); color:var(--ta-netz-fg); }
.ta-tag.privat { background:var(--ta-priv-bg); color:var(--ta-priv-fg); }
.ta-tag.intern { background:var(--line); color:var(--ink); }
.ta-tick { width:44px; height:44px; flex-shrink:0; border-radius:12px; border:1.5px solid var(--line); background:var(--card); color:var(--ta-muted); font-size:18px; cursor:pointer; }
.ta-tick.on { background:var(--ok); border-color:var(--ok); color:#fff; }
.ta-empty { padding:14px; font-size:14.5px; color:var(--ta-muted); }
.ta-hint { font-size:13.5px; color:var(--ta-muted); line-height:1.45; margin:4px 2px 0; }

.ta-chev { color:var(--ta-muted); opacity:.7; font-size:20px; line-height:1; flex-shrink:0; margin-left:2px; }
.ta-warn { color:var(--warn-text, var(--warn)); }
.ta-betrag { font-size:15px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
a.ta-row { text-decoration:none; color:inherit; }

/* Lagekacheln: 1–2 Werte je Bereich, Tipp öffnet den Bereich */
.ta-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.ta-tile { display:flex; flex-direction:column; gap:3px; min-height:88px; padding:12px 13px; box-sizing:border-box; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px; font:inherit; color:inherit; cursor:pointer; }
.ta-tile:hover { border-color:color-mix(in srgb, var(--senfgelb) 45%, var(--line)); }
.ta-tile .k { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ta-muted); }
.ta-tile .v { font-size:17px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ta-tile .d { font-size:13px; color:var(--ta-muted); line-height:1.3; overflow-wrap:anywhere; }
.ta-col > .ta-nur-schmal:empty { display:none; }
.ta-nur-breit { display:none !important; }
@media (min-width:960px) { .ta-nur-breit { display:flex !important; } .ta-nur-schmal { display:none; } }

/* Kunde: Ziel → Fokus → Fortschritt → nächster Schritt */
.ta-steps { display:flex; flex-direction:column; gap:12px; margin:4px 0 16px; }
.ta-step { display:flex; gap:10px; }
.ta-step .n { width:22px; height:22px; border-radius:11px; background:var(--line); color:var(--ink); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ta-lbl { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ta-muted); }
.ta-steptext { font-size:14.5px; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; }
.ta-fold > summary { list-style:none; }
.ta-fold > summary::-webkit-details-marker { display:none; }
.ta-fold[open] > summary .ta-chev { transform:rotate(90deg); }

/* Geld: Ausblick */
.ta-big { padding:16px; display:flex; flex-direction:column; gap:8px; }
.ta-bigv { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.ta-bar { height:10px; border-radius:5px; background:var(--line); overflow:hidden; }
.ta-bar span { display:block; height:100%; border-radius:5px; background:var(--senfgelb); }

/* Unterseiten */
.ta-back { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; margin:-6px 0 6px -4px;
  font:inherit; font-size:15px; font-weight:650; color:var(--ink); background:none; border:0; cursor:pointer; }
.ta-link { display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 14px; border-top:1px solid var(--line); color:inherit; text-decoration:none; }
.ta-link:first-child { border-top:0; }
.ta-link .ico { width:38px; height:38px; border-radius:12px; background:var(--ta-geld-bg); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }

/* Leiste */
.ta-dock { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card); border-top:1px solid var(--line);
  padding:6px 4px calc(10px + env(safe-area-inset-bottom)); }
.ta-dock-in { max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
.ta-dock button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px;
  font:inherit; font-size:11.5px; font-weight:650; color:var(--ta-muted); background:none; border:0; cursor:pointer; }
.ta-dock button[aria-current="page"] { color:var(--ink); }
.ta-dock .badge { position:absolute; top:2px; right:calc(50% - 20px); min-width:18px; height:18px; border-radius:9px; background:var(--crit); color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; box-sizing:border-box; }
.ta-dock svg { width:22px; height:22px; }

/* Aktions-Blatt (nutzt .backdrop + #pop der Seite → closePop/Escape wirken) */
.pop.ta-sheet { position:fixed; left:50% !important; top:auto !important; bottom:0; transform:translateX(-50%);
  width:min(560px, 100vw); max-height:80vh; overflow:auto; box-sizing:border-box;
  border-radius:18px 18px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
.pop.ta-sheet h4 { margin:0 0 4px; font-size:19px; font-weight:700; color:var(--ink); text-transform:none; letter-spacing:0; }
.ta-row .ta-rs { display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ta-sheet .ta-sh-sub { font-size:14.5px; color:var(--ta-muted); line-height:1.45; margin-bottom:14px; overflow-wrap:anywhere; }
.ta-grab { width:40px; height:5px; border-radius:3px; background:var(--line); margin:-6px auto 12px; }
.ta-sheet .ta-sh-acts, .ta-side .ta-sh-acts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ta-sheet .ta-btn, .ta-side .ta-btn { width:100%; justify-content:flex-start; }
.ta-sh-prim { margin-bottom:8px; }
.ta-sh-prim .ta-btn { justify-content:center !important; background:var(--anthrazit); border-color:var(--anthrazit); color:var(--bg); }
.ta-sh-prim .ta-btn.on { background:var(--pill-ok); border-color:var(--ok); color:var(--ink); }
.ta-sheet .ta-sh-note, .ta-side .ta-sh-note { font-size:12.5px; color:var(--ta-muted); margin-top:12px; line-height:1.4; }

/* Runde 4.1 (Daniel 03.10.): die Leiste ist IMMER sichtbar — über dem Abdunkeln, Blätter öffnen sich über ihr */
:root { --ta-dock-h: calc(66px + env(safe-area-inset-bottom)); }
html.app-mode .ta-dock { z-index:55; }
html.app-mode .backdrop { z-index:40; }
html.app-mode .pop { z-index:60; }
@media (max-width:1099px) {
  .pop.ta-sheet { bottom:var(--ta-dock-h); max-height:calc(100vh - var(--ta-dock-h) - 24px); border-radius:18px;
    padding-bottom:18px; box-shadow:0 -8px 30px rgba(0,0,0,.18); }
  html.app-mode .pop:not(.ta-sheet) { max-height:calc(100vh - var(--ta-dock-h) - 20px); }
}

/* Runde 4.2: Woche · 4 Wochen · Tag */
.ta-seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:12px; background:var(--line); }
.ta-seg button { min-height:40px; border:0; border-radius:9px; background:none; font:inherit; font-size:14px; font-weight:650; color:var(--ta-muted); cursor:pointer; }
.ta-seg button[aria-selected="true"] { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ta-innen { background:none; border:0; padding:6px 0; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.ta-daycard.heute { border-color:color-mix(in srgb, var(--senfgelb) 60%, var(--line)); }
.ta-daykopf .ta-rt { font-weight:700; }
.ta-daycard .ta-zeit { font-weight:600; color:var(--ta-muted); }

/* Mac ab 1100 px: Leiste links als Schiene, rechts eine Detailspalte statt Blatt von unten */
.ta-side { display:none; }
@media (min-width:1100px) {
  .ta-dock { top:0; bottom:0; right:auto; width:84px; border-top:0; border-right:1px solid var(--line); padding:18px 0; }
  .ta-dock-in { display:flex; flex-direction:column; gap:4px; max-width:none; }
  .ta-dock button { margin:0 8px; border-radius:12px; min-height:58px; }
  .ta-dock button[aria-current="page"] { background:var(--line); }
  .ta-shell { margin-left:84px; margin-right:400px; max-width:none; padding:28px 32px 40px; }
  .ta-side { display:block; position:fixed; top:0; right:0; bottom:0; width:400px; box-sizing:border-box; overflow:auto;
    background:var(--card); border-left:1px solid var(--line); padding:28px 24px; }
  .ta-side h4 { margin:0 0 4px; font-size:20px; color:var(--ink); }
  .ta-side .ta-sh-sub { font-size:14.5px; color:var(--ta-muted); line-height:1.45; margin-bottom:14px; overflow-wrap:anywhere; }
}

/* Der Demo-Knopf der Kommandozentrale läge auf der Leiste — in der App nicht nötig */
html.app-mode #kz-present-btn { display:none !important; }

:focus-visible { outline:2px solid var(--senfgelb); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { #tagesapp * { transition:none !important; animation:none !important; } }