/*
Wiederverwendbare Komponenten. Kartenformate, Tabellen, Ampel etc.
Klassennamen für Karten/Tabellen bewusst kompatibel zum bestehenden
Dashboard gehalten (kpi-card, chart-card, corr-card, rec-card, ...).
*/
/* ===== Sidebar-Navigation ===== */
/* Beta 7.3 Punkt 60: Sidebar bekommt eine eigene, sichtbar dunklere Flaeche als der Content-
Bereich (vorher: implizit transparent, nahm die Page-Background 1:1 an — Sidebar und Content
waren farblich kaum unterscheidbar) + eine sehr duenne Marken-Gradient-Linie am rechten Rand
statt einer neutralen Border. Echte strukturelle Unterscheidung, kein reiner Alias-Wechsel.
Nutzerauftrag 2026-08-29 ("Menueband etwas transparent, in Dark UND Light Mode"): --nav-bg-top/
-bottom sind jetzt RGBA (siehe tokens.css/tokens-light.css) statt opakem Hex — backdrop-filter
haelt den Nav-Text trotzdem lesbar, dasselbe Milchglas-Prinzip wie --surface-hero bei den Karten. */
.app-nav {
/* Beta 10.0 FINAL CLOSURE PASS (echter, per Nutzer-Video reproduzierter Bug): vorher
position:sticky als Grid-Spalten-Kind von .app-shell — .app-shell spannt per
position:relative+z-index:1 einen eigenen Stacking-Context auf (base.css), der JEDEN
z-index-Wert eines Kindelements auf diese Ebene deckelt, egal wie hoch er lokal gesetzt ist.
Die waehrend des Ladens auf z-index:100 geboostete Welle (page-loader.css, ein GESCHWISTER von
.app-shell) konnte die Sidebar dadurch trotz ihres eigenen hoeheren z-index ueberdecken — real
reproduziert (Nutzer-Bildschirmaufzeichnung, Sidebar wurde beim Loading-Screen sichtbar
"transparent"). Fix: #app-nav-slot/.app-nav sind jetzt ein GESCHWISTER von .app-shell (siehe
pages/*.html), NICHT mehr ihr Kind — position:fixed statt sticky ersetzt den bisherigen
Grid-Spalten-Platzhalter (siehe .app-shell padding-left in base.css als Ersatz dafuer),
unconditional statt nur auf Mobile (siehe entfernte @media-Ueberschreibung unten). */
position: fixed; top: 0; left: 0;
width: var(--nav-width);
height: 100vh;
/* Escaped jetzt tatsaechlich ueber die Welle (z-index:100) UND den Seiten-Loader (z-index:500) —
ein einziger, durchgehend hoher Wert statt der vorherigen zwei unterschiedlichen (150 Desktop/
510 Mobile), die beide ohnehin wirkungslos waren, solange .app-nav noch in .app-shells
Stacking-Context gefangen war. */
z-index: 510;
background: linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bottom) 100%);
backdrop-filter: blur(20px) saturate(130%);
-webkit-backdrop-filter: blur(20px) saturate(130%);
border-right: 1px solid var(--border-soft);
padding: 24px 16px;
display: flex; flex-direction: column; gap: 4px;
overflow-y: auto;
/* Nutzerauftrag 2026-08-30 ("Menuefeld soll so gross sein, dass kein Scrollbalken erscheint"):
"overflow-y: auto" allein laesst den Browser per CSS-Spezifikation "overflow-x" ebenfalls auf
"auto" auflaufen (sobald eine Achse nicht "visible" ist, wird die andere von "visible" zu
"auto" gezwungen) — das zeigt bereits bei einem einzigen Sub-Pixel Rundungsfehler (z.B. durch
border-right, grid-template-columns-Rundung, Backdrop-Filter) einen horizontalen Scrollbalken,
live vom Nutzer reproduziert. Die Sidebar sollte nie horizontal scrollen — explizit auf
"hidden" gesetzt, unabhaengig von der genauen Rundungsursache. */
overflow-x: hidden;
}
.app-nav::after {
content: ''; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; pointer-events: none;
background: linear-gradient(180deg, rgba(0,122,255,0.35) 0%, rgba(0,229,255,0.12) 45%, rgba(122,92,255,0.20) 100%);
}
.app-nav .brand {
font-family: var(--font-display); font-weight: 600; font-size: 16px;
padding: 4px 10px 20px 10px; color: var(--nav-text);
}
/* TALVAXO Rebranding (Nutzerauftrag Punkt 12/17): Logo-Mark (Dynamic X) + Wordmark statt reinem
Text — .brand-x wird per -- gleiche Optik wie vorher (uppercase,
mono, gedaempfte Farbe), jetzt aber interaktiv (Hover/Focus-Ring/Cursor) statt totem Text. */
.nav-group-toggle {
display: flex; align-items: center; justify-content: space-between; width: 100%;
padding: 2px 10px 4px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--nav-text-dim); font-family: var(--font-mono);
background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-group-toggle:hover { color: var(--nav-text-muted); background: var(--nav-hover-bg); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Mandat §20: "aktive Route muss ihren Elternknoten sichtbar zeigen" -- der Gruppen-Header selbst
hebt sich hervor, wenn eine seiner Kind-Seiten gerade aktiv ist (siehe nav.js has-active-Logik),
unabhaengig davon, ob die Gruppe gerade expandiert oder (kurzzeitig, vor dem Auto-Expand) noch
collapsed ist. */
.nav-group-toggle.has-active { color: var(--nav-active-accent); }
.nav-group-chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform 160ms ease; }
.nav-group.is-collapsed .nav-group-chevron { transform: rotate(0deg); }
.nav-group:not(.is-collapsed) .nav-group-chevron { transform: rotate(90deg); }
/* Collapsible Liste ueber grid-template-rows 0fr/1fr -- animiert ohne JS-Hoehenmessung, braucht
keine feste px-Hoehe (Gruppen haben unterschiedlich viele Kinder). Ein bewusst kurzer, einziger
Transition-Wert (160ms) statt einer aufwendigen Choreografie (Mandat §22: "no excessive
animation" fuer collapsible Gruppen). */
.nav-group-list {
display: grid; grid-template-rows: 1fr; transition: grid-template-rows 160ms ease;
}
.nav-group-list-inner { display: flex; flex-direction: column; gap: 4px; overflow: hidden; min-height: 0; }
.nav-group.is-collapsed .nav-group-list { grid-template-rows: 0fr; }
@media (prefers-reduced-motion: reduce) {
.nav-group-chevron, .nav-group-list { transition: none; }
}
/* Beta 7.7 (Punkt 91-93, "Sidebar Footer sauberer gestalten"): eigener, klar abgesetzter Block statt
loser Text+Button-Stapelung — Trennlinie nach oben, konsistentes Padding um Zeitstempel + Logout
gemeinsam statt zweier unabhängig platzierter Elemente. */
.nav-foot-block { position: relative; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.nav-foot { padding: 4px 10px 2px 10px; font-size: 10.5px; color: var(--nav-text-dim); font-family: var(--font-mono); }
/* Login/Logout (Nutzerauftrag Punkt 37) — bewusst zurueckhaltend platziert (kein bestehendes
Profil-/User-Menue vorhanden, siehe docs/auth/README.md), keine visuelle Konkurrenz zur
Hauptnavigation, aber gut auffindbar (Beta 7.7 Punkt 93) am festen Fuss der Sidebar. */
/* Dark/Light-Mode-Umschalter (Nutzerauftrag 2026-08-29) — lebt im Sidebar-Fuss wie Logout/Konto,
nutzt dieselben --nav-*-Tokens wie der Rest der Sidebar (siehe Begruendung in tokens.css), die
inzwischen pro Theme unterschiedlich aufgeloest werden (tokens-light.css). */
/* CURRENT UPDATE addendum ("Sidebar cleanup"): der Benachrichtigungs-Button/-Panel und der
Theme-Toggle lebten frueher hier (Platform Finish II Part K / Nutzerauftrag 2026-08-29) — beide
sind jetzt Teil des globalen Top-Right-Utility-Clusters (siehe .talvaxo-topbar weiter unten in
dieser Datei, von partials/topbar.html gerendert). .nav-notif-item/.nav-notif-empty werden dort mit den
IDENTISCHEN Klassennamen neu gestylt (notifications.js generiert dieselbe Markup-Struktur,
unabhaengig davon, in welchem Panel sie erscheint). */
.nav-logout {
display: flex; align-items: center; gap: 8px;
margin: 2px 10px 8px 10px; padding: 8px 10px; text-align: left; width: calc(100% - 20px);
background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
color: var(--nav-text-dim); font-size: 12px; font-family: var(--font-body);
}
.nav-logout::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--nav-text-dim); opacity: 0.5;
}
.nav-logout:hover, .nav-logout:focus-visible { background: var(--nav-hover-bg); color: var(--crimson); }
.nav-logout:hover::before { background: var(--crimson); opacity: 1; }
/* Platform Finish II (Part L, Feedback-Modal — von assets/js/feedback.js zur Laufzeit in
eingehaengt, dieselbe Karten-/Formular-Sprache wie der Rest der App). */
.feedback-modal-overlay {
position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
background: var(--loader-scrim); padding: 20px;
}
/* Ohne dies gewinnt obiges "display:flex" (Klassen-Selektor) gegen den UA-Default fuer [hidden]
(display:none) — das Overlay bliebe sichtbar/klickbar, obwohl JS .hidden=true gesetzt hat. Echter,
live beim Testen des Onboarding-Flows gefundener Bug (Feedback-Modal erschien ungewollt auf
frisch geladenen Seiten). */
.feedback-modal-overlay[hidden] { display: none; }
.feedback-modal {
width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto;
background: var(--panel); border: 1px solid var(--border-soft);
border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px;
}
.feedback-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.feedback-modal-head h2 { font-size: 16px; color: var(--text); }
.feedback-modal-close {
background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer;
width: 28px; height: 28px; border-radius: var(--radius-sm);
}
.feedback-modal-close:hover, .feedback-modal-close:focus-visible { background: var(--nav-hover-bg); color: var(--text); }
.feedback-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12.5px; color: var(--text-muted); }
.feedback-field select, .feedback-field textarea, .feedback-field input[type="text"] {
font-family: var(--font-body); font-size: 13px; color: var(--text); background: var(--panel-alt);
border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 9px 10px; resize: vertical;
width: 100%; box-sizing: border-box;
}
.feedback-field select:focus-visible, .feedback-field textarea:focus-visible, .feedback-field input:focus-visible { outline: 2px solid var(--talvaxo-blue); outline-offset: 1px; }
.feedback-field em { color: var(--text-dim); font-style: normal; font-weight: 400; }
.feedback-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feedback-modal-hint { font-size: 11.5px; color: var(--text-dim); }
.feedback-modal-hint--success { color: var(--teal); font-weight: 600; }
.feedback-modal-hint--error { color: var(--crimson); font-weight: 600; }
.feedback-submit {
background: var(--talvaxo-blue); color: #fff; border: none; border-radius: var(--radius-sm);
padding: 9px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer;
flex-shrink: 0;
}
.feedback-submit:hover { background: var(--talvaxo-cyan); color: #05141F; }
.feedback-submit:disabled { opacity: 0.6; cursor: default; }
/* CURRENT UPDATE addendum ("FEEDBACK SYSTEM REDESIGN") — Kategorie/Bereich nebeneinander, Bug-
Detail-Bloecke (progressive disclosure), Screenshot-Dropzone+Vorschau. */
.feedback-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feedback-bug-details {
border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 14px;
}
.feedback-bug-details[hidden] { display: none; }
.feedback-dropzone {
display: flex; align-items: center; justify-content: center; text-align: center;
border: 1.5px dashed var(--border-soft); border-radius: var(--radius-sm); padding: 18px 12px;
font-size: 12.5px; color: var(--text-muted); cursor: pointer; transition: border-color 160ms ease, background 160ms ease;
}
.feedback-dropzone:hover, .feedback-dropzone:focus-visible { border-color: var(--talvaxo-cyan); color: var(--text); outline: none; }
.feedback-dropzone.is-dragover { border-color: var(--talvaxo-cyan); background: color-mix(in srgb, var(--talvaxo-cyan) 8%, transparent); }
.feedback-dropzone u { color: var(--talvaxo-cyan); text-decoration: underline; }
.feedback-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feedback-preview { position: relative; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-soft); }
.feedback-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feedback-preview-remove {
position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer;
}
.feedback-privacy-hint { font-size: 11px; color: var(--text-dim); margin: 8px 0 0 0; }
@media (max-width: 560px) {
.feedback-grid-2 { grid-template-columns: 1fr; }
.feedback-modal { max-width: 100%; }
.feedback-modal-foot { flex-direction: column; align-items: stretch; }
.feedback-submit { width: 100%; }
}
/* V7.1 (Mandat Teil I, Punkt 51-57, "Mobile UX P1"): die vorherige Lösung (Zeile-mit-Umbruch,
`flex-direction: row; flex-wrap: wrap`) lief bei 390px sichtbar horizontal über den Viewport
hinaus bzw. quetschte die 12 Nav-Einträge unleserlich zusammen — real im V7.0-QA-Screenshot
beobachtet. Hamburger + Off-Canvas-Drawer gewählt (statt Bottom Navigation): die bestehende
Sidebar ist bereits eine reichhaltige, mehrzeilige Vertikal-Navigation (12 Einträge + Brand +
Datenstand-Fußzeile) — das passt strukturell besser zu einem ausklappbaren Drawer (der einfach
dieselbe Sidebar unverändert zeigt) als zu einer auf 4-5 Icons begrenzten Bottom-Nav, die 12
Einträge ohnehin nicht sinnvoll fassen könnte. Kein horizontaler Umbruch mehr nötig — die
Sidebar bleibt strukturell identisch zur Desktop-Version, nur off-canvas positioniert. */
@media (max-width: 900px) {
.app-nav {
/* position/top/left/height/z-index sind jetzt bereits in der Basis-Regel oben identisch gesetzt
(Beta 10.0 FINAL CLOSURE PASS) — hier nur noch das, was auf Mobile tatsaechlich abweicht:
schmalere Breite (Off-Canvas-Drawer statt volle --nav-width), Off-Canvas-Transform/Transition,
eigener Schatten. */
width: min(280px, 85vw);
background: var(--nav-bg-top, #0b0e14); border-right: 1px solid var(--border-soft); border-bottom: none;
flex-direction: column; flex-wrap: nowrap;
transform: translateX(-100%); transition: transform 220ms ease;
box-shadow: var(--shadow-hover);
}
.app-nav.is-open { transform: translateX(0); }
.app-nav .brand { display: block; }
.nav-foot { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.app-nav { transition: none; }
}
/* Hamburger-Toggle + Backdrop (V7.1, von nav.js erzeugt, siehe dort) — nur bei ≤900px sichtbar,
auf Desktop nie im Layout (keine Auswirkung auf die bestehende, unveränderte Desktop-Sidebar).
z-index 210 -> 511 (Nutzerauftrag 2026-08-30, siehe .app-nav-Kommentar oben): der Hamburger ist
auf Mobile der "immer sichtbare Menue-Zugang" — muss ueber dem Loader (z-index 500) bleiben. */
.nav-hamburger {
display: none; position: fixed; top: 14px; left: 14px; z-index: 511;
width: 42px; height: 42px; align-items: center; justify-content: center;
background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
color: var(--text); cursor: pointer;
}
.nav-hamburger:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* TALVAXO PUBLIC WEBSITE + DEMO MODE (Mandat Teil 19 "Demo Visual Marker" — subtil, klar
erkennbar, nicht stoerend). Wird von assets/js/nav.js nur fuer is_demo-Sessions injiziert. */
.talvaxo-demo-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 600;
display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
background: var(--talvaxo-gradient); color: #fff; font-size: 12.5px; font-weight: 600;
padding: 8px 16px; text-align: center;
}
.talvaxo-demo-banner a { color: #fff; text-decoration: underline; font-weight: 600; }
html[data-talvaxo-demo="true"] .app-shell { padding-top: 34px; }
html[data-talvaxo-demo="true"] .app-nav { top: 34px; height: calc(100vh - 34px); }
/* v10.2.3 Mobile-Sidebar-QA-Fund (Mandat §24-25, "mobile nav QA muss die Open/Closed-States
tatsaechlich belegen"): der Hamburger-Button (position:fixed, top:14px) hatte -- anders als
.app-shell/.app-nav oben -- NIE einen Demo-Banner-Offset bekommen. Das Banner sitzt mit
z-index:600 (hoeher als der Hamburger, 511) direkt darueber und ueberdeckt ihn komplett bei
jeder Demo-Session auf Mobile (<=900px) -- ein echter, live reproduzierter Bug (Klick landete auf
dem Banner statt dem Hamburger, Navigation liess sich in einer Demo-Session auf Mobile nicht
oeffnen), nicht nur ein QA-Artefakt. Betrifft NICHT den echten Owner-Account (kein Banner dort). */
html[data-talvaxo-demo="true"] .nav-hamburger { top: 48px; }
@media (max-width: 720px) {
html[data-talvaxo-demo="true"] .app-shell { padding-top: 44px; }
html[data-talvaxo-demo="true"] .app-nav { top: 44px; height: calc(100vh - 44px); }
html[data-talvaxo-demo="true"] .nav-hamburger { top: 58px; }
}
.nav-hamburger svg { width: 20px; height: 20px; }
.nav-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 190;
}
/* ===== Top-Right Utility Cluster (CURRENT UPDATE addendum, "GLOBAL TOP-RIGHT UTILITY AREA") =====
LEFT SIDEBAR = Produktnavigation, TOP RIGHT = globale Konto-/System-Utilities (Theme/
Benachrichtigungen/Profil-Menue) -- von assets/js/nav.js als eigenes direkt an
gehaengt (siehe dortiger Kommentar), NICHT Teil von .app-shell, damit derselbe fixed-Positions-/
z-index-Ansatz wie .app-nav (510) gilt: ein Geschwister von .app-shell entkommt dessen
Stacking-Context, ein Kind waere darin gefangen (realer, bereits einmal behobener Bug bei
.app-nav selbst, siehe dortiger Kommentar). z-index 512 haelt den Cluster ueber Sidebar (510)
UND Ladebildschirm (500), aber unter dem Demo-Banner (600) -- derselbe Offset-Mechanismus wie
bei .nav-hamburger unten haelt ihn bei aktiver Demo-Session unterhalb des Banners sichtbar.
".talvaxo-topbar" statt ".app-topbar": Letzterer Klassenname gehoert bereits seit v10.1 einer
voellig anderen Komponente (Seitentitel-/System-Health-Zeile, assets/js/overview.js +
dashboard.css) -- ein realer, per Nutzer-Screenshot gemeldeter Bug in einer frueheren Fassung
dieses Codes: beide teilten sich dieselben position:fixed/top-right-Regeln, wodurch die
Overview-Seitentitelzeile aus dem Layout gerissen und über diesen Cluster gelegt wurde. */
.talvaxo-topbar {
position: fixed; top: 16px; right: 24px; z-index: 512;
display: flex; align-items: center; gap: 10px;
border-radius: 999px;
backdrop-filter: blur(20px) saturate(130%);
-webkit-backdrop-filter: blur(20px) saturate(130%);
}
html[data-talvaxo-demo="true"] .talvaxo-topbar { top: 50px; }
@media (max-width: 720px) {
html[data-talvaxo-demo="true"] .talvaxo-topbar { top: 60px; }
}
@media (max-width: 900px) {
.talvaxo-topbar { top: 12px; right: 14px; gap: 6px; }
}
.topbar-theme-toggle, .topbar-notif-btn, .topbar-avatar-btn {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
background: var(--panel); border: 1px solid var(--border-soft);
color: var(--text-muted); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%);
transition: border-color 160ms ease, color 160ms ease;
}
.topbar-theme-toggle:hover, .topbar-notif-btn:hover { border-color: var(--talvaxo-cyan); color: var(--talvaxo-cyan); }
.topbar-theme-toggle:focus-visible, .topbar-notif-btn:focus-visible, .topbar-avatar-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.topbar-theme-toggle svg, .topbar-notif-btn svg { width: 19px; height: 19px; }
.topbar-notif-wrap, .topbar-profile-wrap { position: relative; }
.topbar-notif-badge {
position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px; background: var(--crimson, #ff453a); color: #fff;
font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
border: 2px solid var(--bg);
}
.topbar-notif-panel, .topbar-profile-menu {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 520;
width: 320px; max-width: calc(100vw - 32px);
background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-md, 14px);
box-shadow: var(--shadow-hover); overflow: hidden;
}
.topbar-notif-panel-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; font-weight: 600;
}
.topbar-notif-mark-all {
background: none; border: none; color: var(--talvaxo-cyan); font-size: 12px; cursor: pointer; padding: 0;
}
.topbar-notif-list { max-height: 360px; overflow-y: auto; }
.nav-notif-item {
display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
padding: 11px 16px; border-bottom: 1px solid var(--hairline); color: var(--text);
}
.nav-notif-item:last-child { border-bottom: none; }
.nav-notif-item:hover { background: var(--panel-alt); }
.nav-notif-item.is-unread { background: color-mix(in srgb, var(--talvaxo-cyan) 6%, transparent); }
.nav-notif-item-title { display: block; font-size: 13px; font-weight: 600; }
.nav-notif-item-body { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.nav-notif-item-time { display: block; font-size: 10.5px; color: var(--text-dim); margin-top: 4px; font-family: var(--font-mono); }
.nav-notif-empty { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }
.topbar-avatar {
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: var(--talvaxo-gradient); color: #fff; font-family: var(--font-display); font-size: 13px; font-weight: 700;
background-size: cover; background-position: center;
}
.topbar-profile-menu-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.topbar-avatar--menu { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; }
.topbar-profile-menu-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar-profile-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
padding: 11px 16px; background: none; border: none; text-align: left; cursor: pointer; text-decoration: none;
color: var(--text); font-size: 13px; font-family: var(--font-body);
}
/* v10.4.3 (real, confirmed bug: "Adminoberflaeche"-Menuepunkt blieb fuer JEDEN eingeloggten Nutzer
sichtbar, unabhaengig von is_admin) -- .topbar-profile-menu-item's eigenes `display: flex` hat
dieselbe CSS-Spezifitaet (eine einzelne Klasse) wie die User-Agent-Regel `[hidden] { display:
none }` und gewinnt als spaeter geladene Autoren-Regel den Tie-Break, macht `element.hidden = true`
(assets/js/nav.js, topbar-admin-link) dadurch fuer dieses Element wirkungslos -- der JS-Zustand war
die ganze Zeit korrekt, nur CSS zeigte das Element trotzdem an. Live in allen fuenf getesteten
Rollen bestaetigt (Founder/Admin-mit-MFA: sichtbar+korrekt; Admin-ohne-MFA/normales Mitglied/Demo-
ohne-Admin: nach diesem Fix korrekt verborgen, vorher faelschlich sichtbar bei allen dreien).
[hidden] steht hier bewusst NACH der Basisregel, um die Spezifitaets-Bindung zugunsten von
[hidden] aufzuloesen, statt display:none anderswo mit !important zu erzwingen. */
.topbar-profile-menu-item[hidden] { display: none; }
.topbar-profile-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); }
.topbar-profile-menu-item:hover { background: var(--panel-alt); color: var(--talvaxo-cyan); }
.topbar-profile-menu-item:hover svg { color: var(--talvaxo-cyan); }
.topbar-profile-menu-logout:hover { color: #ff453a; }
.topbar-profile-menu-logout:hover svg { color: #ff453a; }
/* v10.3.7 UX addendum ("GLOBAL UTILITY RULE"): DE/EN-Umschaltung lebt jetzt in der globalen
Top-Right-Utility-Reihe statt im Profil-Menue (siehe partials/topbar.html) -- .topbar-lang-pills/
.topbar-lang-pill bleiben unveraendert (gleiche Optik/IDs), nur der `--global`-Modifier gibt der
Pille dieselbe kreisfoermige 40px-Home-Row-Hoehe wie Theme-Toggle/Notifications/Avatar daneben,
statt der kompakteren Menue-interne-Zeile-Groesse. */
.topbar-lang-pills { display: flex; gap: 4px; background: var(--panel-alt); border-radius: var(--radius-pill); padding: 2px; }
.topbar-lang-pills--global { height: 40px; align-items: center; padding: 3px; border: 1px solid var(--border-soft); backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); }
.topbar-lang-pill {
border: none; background: none; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-pill);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-dim);
}
.topbar-lang-pills--global .topbar-lang-pill { padding: 6px 11px; font-size: 11.5px; }
.topbar-lang-pill:hover { color: var(--text-muted); }
.topbar-lang-pill.is-active { background: var(--talvaxo-cyan); color: #05141F; }
@media (max-width: 900px) {
.topbar-lang-pills--global { height: 36px; }
}
/* "Back to Website" -- same circular icon-button treatment as Theme (Mandat SS40 "must remain
clearly distinct from Logout": an outbound-globe icon + its own tooltip, never placed adjacent
to the Logout row). ``, not `` -- a plain navigation, not a stateful client action, so
no JS handler is needed or attached (see assets/js/nav.js's own comment at the topbar profile
wiring for why this is safe: it carries no session side effect). */
.topbar-website-btn { text-decoration: none; }
.topbar-profile-menu-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.topbar-profile-menu-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.topbar-profile-menu-goal { font-size: 11.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same visual language as assets/css/members.css's .mem-badge/.mem-badge--* (Member Directory),
duplicated rather than shared: members.css is only loaded on pages/members.html, but the topbar
(and this badge) is injected on every page -- see components.css's own load-everywhere role. */
.topbar-profile-menu-badge {
flex-shrink: 0; display: inline-flex; align-items: center; font-family: var(--font-mono);
font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius-pill);
padding: 3px 8px;
}
/* v10.4.3: same latent bug class as .topbar-profile-menu-item[hidden] above (own `display` value
at equal specificity beats the UA [hidden] rule) -- assets/js/nav.js sets `badgeEl.hidden = true`
whenever session.user.account_type is falsy, so this element needs the identical guard even
though that branch is rarely hit in practice (every real account currently has an account_type). */
.topbar-profile-menu-badge[hidden] { display: none; }
.topbar-profile-menu-badge--founder { color: var(--talvaxo-violet); background: color-mix(in srgb, var(--talvaxo-violet) 16%, transparent); }
.topbar-profile-menu-badge--beta_tester { color: var(--talvaxo-cyan); background: color-mix(in srgb, var(--talvaxo-cyan) 14%, transparent); }
.topbar-profile-menu-badge--member { color: var(--text-muted); background: var(--panel-alt); }
.topbar-profile-menu-badge--demo { color: var(--color-attention); background: color-mix(in srgb, var(--color-attention) 14%, transparent); }
.topbar-profile-menu-badge--test { color: var(--text-dim); background: var(--status-neutral-dim); }
.topbar-profile-menu-divider { height: 1px; margin: 6px 0; background: var(--hairline); }
@media (max-width: 900px) {
.topbar-theme-toggle, .topbar-notif-btn, .topbar-avatar-btn, .topbar-avatar { width: 36px; height: 36px; }
}
@media (max-width: 900px) {
.nav-hamburger { display: flex; }
.nav-backdrop.is-open { display: block; }
}
/* ===== Status-Strip / Ampel ===== */
.status-strip {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
background: var(--border-soft); border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden; margin-bottom: 28px;
}
.status-item {
background: var(--surface-hero); padding: 14px 14px; position: relative;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.status-item .slabel {
font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.good { background: var(--status-good); box-shadow: 0 0 8px var(--status-good); }
.status-dot.warn { background: var(--status-warn); box-shadow: 0 0 8px var(--status-warn); }
.status-dot.bad { background: var(--status-bad); box-shadow: 0 0 8px var(--status-bad); }
.status-dot.neutral { background: var(--status-neutral); box-shadow: none; }
.status-item .svalue { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.1; }
.status-item .sword { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
@media (max-width: 1100px) { .status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* V7.1 (Mandat Teil I, Punkt 54): minmax(0,1fr) statt 1fr — sonst schrumpfen die 2 Spalten bei
390px nicht unter ihren Inhalt (dieselbe Falle wie bei .cal-grid/.kpi-grid, siehe dortige
Kommentare) und der Status-Strip ragt über den Viewport hinaus. */
@media (max-width: 600px) { .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Info-Tooltip (Nutzerauftrag "Tooltips", Teil AW) — kurzer Kontext für komplexe Kennzahlen, per
Hover ODER Tastatur-Fokus erreichbar (Teil AX: Hover niemals einzige Informationsquelle). In
components.css statt dashboard.css, weil status-strip.html seitenübergreifend eingebunden wird
(Übersicht, Training, Empfehlungen), nicht nur auf der Übersichtsseite. */
.info-dot {
display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
border-radius: 50%; background: var(--neutral-chip-bg); color: var(--text-dim);
font-size: 9.5px; font-family: var(--font-body); cursor: help; position: relative; vertical-align: middle;
}
.info-dot:hover, .info-dot:focus-visible { background: var(--teal-dim); color: var(--teal); outline: none; }
.info-dot::after {
content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
width: 220px; padding: 8px 10px; border-radius: 8px; background: var(--panel-raised); border: 1px solid var(--border-soft);
color: var(--text-muted); font-family: var(--font-body); font-size: 11.5px; line-height: 1.45; text-transform: none; letter-spacing: normal;
box-shadow: 0 8px 20px rgba(0,0,0,0.28); opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}
.info-dot:hover::after, .info-dot:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
.info-dot::after { transition: none; }
}
/* ===== Vitals-Strip ===== */
.vitals-strip {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
background: var(--border-soft); border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden;
}
.vital {
background: var(--surface-hero); padding: 18px 20px; position: relative;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.vital .vlabel {
font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.vital .vvalue {
font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1;
display: flex; align-items: baseline; gap: 6px;
}
.vital .vunit { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.vital .vdelta { margin-top: 8px; font-size: 12px; font-family: var(--font-mono); }
.vital.teal .vvalue { color: var(--teal); text-shadow: 0 0 18px rgba(47,217,196,0.35); }
.vital.amber .vvalue { color: var(--amber); text-shadow: 0 0 18px rgba(240,169,78,0.35); }
.vital.indigo .vvalue { color: var(--indigo); text-shadow: 0 0 18px rgba(139,149,246,0.35); }
.vital.crimson .vvalue { color: var(--crimson); text-shadow: 0 0 18px rgba(239,91,107,0.35); }
.vital.moss .vvalue { color: var(--moss); text-shadow: 0 0 18px rgba(168,201,114,0.35); }
.delta.good { color: var(--teal); }
.delta.bad { color: var(--crimson); }
.delta.flat { color: var(--text-dim); }
@media (max-width: 900px) { .vitals-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== KPI Grid ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Complete Visual Redesign Mandat §29/§75: Recovery's supporting grid dropped from 4 to 3 cards
(readiness/recovery-time promoted out to its own dominant panel below) -- scoped to this one
page's instance rather than changing the shared 4-column default other pages still rely on. */
#recovery-kpi .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { #recovery-kpi .kpi-grid { grid-template-columns: 1fr; } }
/* Complete Visual Redesign Mandat §29/§75 ("one dominant Recovery Decision... RECOVERY STATUS,
MAIN LIMITING FACTOR, RECOVERY TIME, TODAY'S TRAINING IMPLICATION"). Reuses this app's
established elevated-surface hero language (same --surface-hero/border/radius vocabulary as
.kpi-card and Overview's ov-zone-1) rather than inventing a new visual system for one panel. */
.recovery-decision-panel {
background: linear-gradient(180deg, var(--surface-section) 0%, var(--surface-base) 100%);
border: 1px solid var(--border-soft); border-radius: var(--radius-lg, 20px);
padding: 26px 28px; margin-bottom: var(--zone-gap, 24px);
}
.recovery-decision-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--talvaxo-cyan); text-transform: uppercase; }
.recovery-decision-main { display: flex; align-items: center; gap: 22px; margin-top: 14px; }
.recovery-decision-score { font-family: var(--font-display); font-size: 56px; font-weight: 700; line-height: 1; color: var(--text); }
.recovery-decision-level-block { display: flex; flex-direction: column; gap: 4px; }
.recovery-decision-level { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--text); }
.recovery-decision-time { font-size: 13px; color: var(--text-muted); }
.recovery-decision-implication { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 14.5px; line-height: 1.6; color: var(--text-muted); max-width: 70ch; }
@media (max-width: 480px) {
.recovery-decision-panel { padding: 20px 18px; }
.recovery-decision-score { font-size: 44px; }
}
/* Visual Redesign Execution Pass §7/27-31 ("PRIMARY METRIC typography level... Running/Health/
Recovery answer 'how am I developing' at a glance"): this ONE component is shared by 9 pages
(Running/Health/Sleep/Forecasts/Training/Coach/Nutrition/Recovery/Load) -- kvalue at 24px read as
a secondary label, not the primary number these pages exist to show. Boosted moderately (not to
the 34px+ used on Overview/Operations) specifically because a documented real overflow bug (see
V7.1 note below, kpi-card on load.html at 390px) means some kvalue strings run long -- a smaller,
safer increase here, width-tested again after the change rather than assumed safe. */
.kpi-card {
background: var(--surface-hero); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 18px 20px; border-left: 3px solid var(--border);
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.kpi-card .klabel { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.kpi-card .kvalue { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin-bottom: 4px; line-height: 1.1; }
.kpi-card .ksub { font-size: 11.5px; color: var(--text-dim); }
.kpi-card.b-teal { border-left-color: var(--teal); }
.kpi-card.b-amber { border-left-color: var(--amber); }
.kpi-card.b-crimson { border-left-color: var(--crimson); }
.kpi-card.b-indigo { border-left-color: var(--indigo); }
.kpi-card.b-moss { border-left-color: var(--moss); }
@media (max-width: 900px) {
/* V7.1 (Mandat Teil I, Punkt 54): dieselbe 1fr-min-width:auto-Falle wie bei .cal-grid — Fix
ebenfalls mit minmax(0, 1fr), sonst schrumpft eine KPI-Karte mit langem kvalue-Text nicht
und ragt über den Viewport hinaus (real gefunden: .kpi-card auf /pages/load.html bei 390px). */
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-card { min-width: 0; }
}
/* ===== Charts ===== */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.chart-card {
background: var(--surface-hero); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 18px 20px 14px 20px;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.chart-card h3 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.chart-card .chart-note { font-size: 11.5px; color: var(--text-dim); margin-bottom: 10px; }
.chart-card.full { grid-column: 1 / -1; }
.chart-canvas-holder { position: relative; width: 100%; height: 280px; }
.chart-card.full .chart-canvas-holder { height: 360px; }
.range-toggle { display: inline-flex; gap: 2px; background: var(--panel-alt); border-radius: var(--radius-sm); padding: 2px; }
.range-toggle button {
font-family: var(--font-body); font-size: 11px; padding: 5px 10px; border-radius: 4px;
background: transparent; border: none; color: var(--text-muted); cursor: pointer;
}
.range-toggle button.active { background: var(--panel-raised); color: var(--teal-on-panel); }
.range-toggle button:hover:not(.active) { color: var(--text); }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-legend-extra { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.chart-legend-extra span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend-extra .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
@media (max-width: 900px) { .chart-grid { grid-template-columns: 1fr; } }
/* ===== Tabelle ===== */
.table-wrap {
background: var(--surface-hero); border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden; overflow-x: auto;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 760px; }
thead th {
background: var(--panel-alt); text-align: right; padding: 12px 16px;
font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); font-weight: 500;
border-bottom: 1px solid var(--border);
}
thead th:first-child { text-align: left; }
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,0.015); }
td.metric-name { text-align: left; color: var(--text); font-weight: 500; }
td.metric-name .note { display: block; font-size: 10.5px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
td.num { text-align: right; font-family: var(--font-mono); color: var(--text-muted); }
td.range { color: var(--text-dim); font-size: 12px; }
td.trend { text-align: center; }
td.trend .arrow { display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; font-weight: 700; }
td.trend.good .arrow { background: var(--teal-dim); color: var(--teal); }
td.trend.bad .arrow { background: var(--crimson-dim); color: var(--crimson); }
td.trend.flat .arrow { background: var(--neutral-chip-bg); color: var(--text-dim); }
/* Records table on mobile: the shared table's 760px min-width pushed the VALUE column (the
actual personal-best numbers) off-screen by default, leaving only record names visible until
a user noticed the table scrolls. The third column (records.js) only ever renders "no date" or
nothing -- any real date is already shown inline under the record name -- so hiding it here loses
no information and lets RECORD + VALUE both fit without horizontal scroll. */
@media (max-width: 480px) {
#records-table table { min-width: 0; }
#records-table thead th:last-child, #records-table tbody td:last-child { display: none; }
}
/* ===== Overview / Info-Karten ===== */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* V7.1 (Mandat Teil I, Punkt 54): min-width:0 nötig, sonst verhindert der Default-min-width:auto
von Grid-Items, dass die Karte schrumpft, wenn ein Kind (z.B. .table-wrap mit einer breiten
Tabelle) von sich aus viel Platz beansprucht — die Karte (und mit ihr die ganze Seite) wurde
dadurch auf /pages/forecasts.html bei 390px über den Viewport hinaus breit gezogen, obwohl
.table-wrap selbst schon overflow-x:auto besitzt. Gleiche Fehlerklasse wie .app-main (V5.4). */
.overview-card {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px 24px; min-width: 0;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.overview-card h3 { font-family: var(--font-display); font-size: 16px; margin-bottom: 4px; }
.overview-card .period { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 16px; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-stat { background: var(--panel-alt); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.mini-stat .mlabel { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.mini-stat .mvalue { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.overview-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; }
.overview-card p + p { margin-top: 10px; }
@media (max-width: 900px) { .overview-grid { grid-template-columns: 1fr; } }
/* ===== Korrelationen ===== */
.corr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.corr-card {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.corr-card .ctag { display: inline-block; font-family: var(--font-body); font-size: 10.5px; padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: 12px; letter-spacing: 0.03em; }
.corr-card.strong .ctag { background: var(--teal-dim); color: var(--teal); }
.corr-card.moderate .ctag { background: var(--amber-dim); color: var(--amber); }
.corr-card.weak .ctag { background: var(--neutral-chip-bg); color: var(--text-dim); }
.corr-card h3 { font-family: var(--font-display); font-size: 15px; margin-bottom: 10px; }
.corr-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
@media (max-width: 900px) { .corr-grid { grid-template-columns: 1fr; } }
/* ===== Empfehlungen / Coach ===== */
/* Visual Redesign Execution Pass §26/59 ("Coach must feel like TALVAXO briefing the athlete, not
another analytics page... clear PRIMARY recommendation" -- 3 equal columns gave Today/Tomorrow/
Week identical visual weight, exactly the "another dashboard" feeling the mandate names). Today
now spans two grid tracks and gets a real headline size + tinted surface; Tomorrow/Week stay
equal-weight secondary context beside it, matching the acceptance criterion's own ordering
(today's message first, everything else supporting). */
.rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 14px; }
.rec-card {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; border-top: 3px solid var(--border);
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.rec-card.today {
grid-column: 1 / -1; border-top-color: var(--teal); padding: 26px 28px;
background: linear-gradient(160deg, color-mix(in srgb, var(--teal) 10%, var(--surface-hero)) 0%, var(--surface-hero) 60%);
}
.rec-card.tomorrow { border-top-color: var(--amber); }
.rec-card.week { border-top-color: var(--indigo); }
.rec-card .rlabel { font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 8px; }
.rec-card h3 { font-family: var(--font-display); font-size: 17px; margin-bottom: 10px; }
.rec-card.today h3 { font-size: 26px; line-height: 1.15; max-width: 65%; }
.rec-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 10px; }
.rec-card.today p { font-size: 14.5px; max-width: 70ch; }
.rec-card .why { font-size: 12px; color: var(--text-dim); border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 10px; }
.rec-card .why b { color: var(--text-muted); }
@media (max-width: 900px) {
.rec-grid { grid-template-columns: 1fr; }
.rec-card.today h3 { max-width: none; }
}
/* ===== Fehlende Daten ===== */
.missing-list {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 6px 0;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.missing-item { display: flex; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); }
.missing-item:last-child { border-bottom: none; }
.missing-item .midx { font-family: var(--font-body); color: var(--amber); flex-shrink: 0; }
/* ===== Badges ===== */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 10px; padding: 3px 8px; border-radius: var(--radius-pill); letter-spacing: 0.04em; }
.badge.native { background: var(--teal-dim); color: var(--teal); }
.badge.calculated { background: var(--indigo-dim); color: var(--indigo); }
.badge.sparse { background: var(--amber-dim); color: var(--amber); }
/* ===== Trainingsplan: Session-Typen (Farbcodierung) ===== */
.session-type-rest { --stc: var(--text-dim); }
.session-type-recovery { --stc: var(--indigo); }
.session-type-easy { --stc: var(--teal); }
.session-type-long_run { --stc: var(--moss); }
.session-type-threshold { --stc: var(--amber); }
.session-type-intervals { --stc: var(--crimson); }
.session-type-marathon_pace { --stc: var(--indigo); }
.session-type-race { --stc: var(--crimson); }
.session-type-strength { --stc: var(--moss); }
.session-type-unplanned { --stc: var(--indigo); }
/* ===== View-Toggle (Heute/Woche/Monat) ===== */
.view-toggle { display: inline-flex; gap: 2px; background: var(--panel-alt); border-radius: var(--radius-sm); padding: 2px; margin-bottom: 20px; }
.view-toggle button { font-family: var(--font-body); font-size: 12.5px; padding: 7px 16px; border-radius: 5px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; }
.view-toggle button.active { background: var(--panel-raised); color: var(--teal-on-panel); }
.view-toggle button:hover:not(.active) { color: var(--text); }
/* ===== Phase-Banner ===== */
.phase-banner {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-left: 3px solid var(--teal); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 20px;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.phase-banner .phase-label { font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); margin-bottom: 6px; }
.phase-banner h2 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; }
.phase-banner p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
/* ===== Sync-Status-Banner ===== */
.sync-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 18px; border: 1px solid var(--border-soft); }
.sync-banner.ok { background: var(--teal-dim); color: var(--teal); border-color: transparent; }
.sync-banner.stale { background: var(--amber-dim); color: var(--amber); border-color: transparent; }
.sync-banner.bad { background: var(--crimson-dim); color: var(--crimson); border-color: transparent; align-items: flex-start; }
/* ===== Backup-Seite: Aktions-Buttons + Datei-Auswahl ===== */
.action-btn {
font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 10px 18px;
border-radius: var(--radius-sm); border: 1px solid var(--border-soft); background: var(--panel-raised);
color: var(--text); cursor: pointer;
}
.action-btn:hover { border-color: var(--teal); color: var(--teal); }
.action-btn.primary { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.action-btn.primary:hover { color: var(--bg); opacity: 0.9; }
.action-btn.danger { border-color: var(--crimson); color: var(--crimson); background: transparent; }
.action-btn.danger:hover { background: var(--crimson-dim); }
.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.action-btn:disabled:hover { border-color: var(--border-soft); color: var(--text); }
.backup-file-input { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.backup-error-list { list-style: none; padding: 0; margin: 8px 0 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.backup-error-list li::before { content: "· "; color: var(--crimson); }
.backup-summary-list { list-style: none; padding: 0; margin: 8px 0 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.8; }
/* ===== Today-Session-Karte ===== */
.today-session {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.today-session .ts-head { padding: 22px 24px; border-left: 4px solid var(--stc, var(--teal)); }
.today-session .ts-type { font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stc, var(--teal)); margin-bottom: 6px; }
.today-session h2.ts-title { font-family: var(--font-display); font-size: 24px; margin-bottom: 8px; }
.today-session .ts-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-body); }
.today-session .ts-body { padding: 0 24px 24px; }
.today-session .ts-structure { list-style: none; margin: 12px 0; }
.today-session .ts-structure li { padding: 10px 14px; background: var(--panel-alt); border-radius: 8px; margin-bottom: 6px; font-size: 13.5px; }
.today-session .ts-why { background: var(--panel-alt); border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-top: 14px; }
.today-session .ts-why b { color: var(--text); }
/* ===== Wochenansicht: Weekly Training Canvas =====
Complete Visual Redesign Mandat §21/§22/§72 ("ONE WEEKLY TRAINING CANVAS... MON TUE WED THU FRI
SAT SUN... Quality sessions: strong. Long Run: strong. Easy Runs: quieter. Rest: minimal...
Avoid 7 heavy cards"). Was a vertical stack of 7 uniform-weight rows (same padding/font for a
rest day and a threshold session) -- now a real 7-column grid on desktop with type-driven visual
weight, so the week's actual shape (build days vs. quiet days) reads at a glance instead of
requiring the rider to read every row's text to find the hard days. draggable="true"/dragstart/
dragover (training.js) are plain event listeners on each row, not position-math -- unaffected by
the column vs. row axis change. */
.week-days { display: flex; flex-direction: column; gap: 8px; }
.week-day-row {
display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; background: var(--surface-hero); border: 1px solid var(--border-soft); border-left: 3px solid var(--stc, var(--border)); border-radius: 8px; padding: 12px 16px; cursor: pointer;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.week-day-row:hover { background: var(--panel-alt); }
.week-day-row .wd-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.week-day-row .wd-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
.week-day-row .wd-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.week-day-row .wd-status { font-family: var(--font-body); font-size: 10.5px; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
/* Beta 9.2 (Desktop Drag & Drop): zieh-/ablegbare Tage optisch erkennbar. */
.week-day-row[draggable="true"] { cursor: grab; }
.week-day-row[draggable="true"]:active { cursor: grabbing; }
.week-day-row.wd-drop-target { outline: 2px dashed var(--teal); outline-offset: 2px; }
.wd-status.status-good { background: var(--teal-dim); color: var(--teal); }
.wd-status.status-warn { background: var(--amber-dim); color: var(--amber); }
.wd-status.status-bad { background: var(--crimson-dim); color: var(--crimson); }
.wd-status.status-neutral { background: var(--neutral-chip-bg); color: var(--text-dim); }
@media (min-width: 901px) {
.week-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.week-day-row {
grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 6px;
border-left: none; border-top: 3px solid var(--stc, var(--border));
align-items: start; text-align: left;
}
.week-day-row .wd-status { justify-self: start; }
/* Rest / recovery / easy: minimal weight -- the week's quiet days recede instead of matching a
hard session's visual footprint. */
.week-day-row.session-type-rest, .week-day-row.session-type-recovery, .week-day-row.session-type-easy {
padding: 10px 12px; opacity: 0.72;
}
.week-day-row.session-type-rest { border-top-style: dashed; background: transparent; box-shadow: none; }
.week-day-row.session-type-rest .wd-title, .week-day-row.session-type-recovery .wd-title { font-size: 13px; font-weight: 500; }
/* Quality sessions + Long Run: strong -- the week's anchor days, sized and weighted to read as
the visual center of their column. */
.week-day-row.session-type-threshold, .week-day-row.session-type-intervals,
.week-day-row.session-type-long_run, .week-day-row.session-type-marathon_pace {
padding: 18px 14px; border-top-width: 4px; box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.week-day-row.session-type-threshold .wd-title, .week-day-row.session-type-intervals .wd-title,
.week-day-row.session-type-long_run .wd-title, .week-day-row.session-type-marathon_pace .wd-title {
font-size: 16px;
}
/* Race day: distinctive, never confusable with a normal hard session. */
.week-day-row.session-type-race {
border-top-width: 4px; padding: 18px 14px;
background: linear-gradient(180deg, var(--crimson-dim) 0%, var(--surface-hero) 65%);
box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}
.week-day-row.session-type-race .wd-title { font-size: 16px; }
}
/* ===== Monatskalender ===== */
/* V7.1 (Mandat Teil I, Punkt 54): `repeat(7, 1fr)` hat wie das V5.4-Bugfix-Beispiel bei .app-main
per Spezifikation `min-width: auto` je Spalte — auf schmalen Viewports weigerten sich die
Kacheln zu schrumpfen und wurden statt eines sichtbaren Scrollbalkens einfach vom
`overflow-x: hidden` auf html/body rechts abgeschnitten (document.scrollWidth blieb dadurch
unauffällig == clientWidth, obwohl einzelne Kacheln weit über den Viewport hinausragten).
`minmax(0, 1fr)` erlaubt den Spalten, tatsächlich auf die verfügbare Breite zu schrumpfen. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-weekday-label { font-family: var(--font-body); font-size: 10.5px; text-transform: uppercase; color: var(--text-dim); text-align: center; padding-bottom: 6px; }
.cal-tile {
background: var(--surface-hero); border: 1px solid var(--border-soft); border-top: 3px solid var(--stc, var(--border)); border-radius: 8px; padding: 8px 9px; min-height: 78px; min-width: 0; font-size: 11px; overflow-wrap: break-word;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.cal-tile[data-detail-date] { cursor: pointer; }
.cal-tile:hover { background: var(--panel-alt); }
.cal-tile.outside-month { opacity: 0.35; }
.cal-tile.is-today { outline: 2px solid var(--teal); outline-offset: -2px; }
.cal-tile.cal-state-missed { border-top-color: var(--crimson); }
.cal-tile.cal-state-unplanned { border-top-style: dashed; }
.cal-tile .ct-daynum { font-family: var(--font-mono); color: var(--text-dim); margin-bottom: 4px; }
.cal-tile .ct-badge { display: inline-block; font-family: var(--font-body); font-size: 8.5px; letter-spacing: 0.04em; padding: 1px 5px; border-radius: var(--radius-pill); margin-bottom: 4px; }
.cal-tile .ct-badge.status-good { background: var(--teal-dim); color: var(--teal); }
.cal-tile .ct-badge.status-warn { background: var(--amber-dim); color: var(--amber); }
.cal-tile .ct-badge.status-bad { background: var(--crimson-dim); color: var(--crimson); }
.cal-tile .ct-badge.status-neutral { background: var(--neutral-chip-bg); color: var(--text-dim); }
.cal-tile .ct-title { font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 3px; }
.cal-tile .ct-km { color: var(--text-muted); }
@media (max-width: 900px) {
.cal-grid { gap: 4px; }
.cal-tile { min-height: 62px; padding: 6px; font-size: 9.5px; }
.cal-tile .ct-badge { font-size: 7.5px; }
.today-session .ts-meta { gap: 10px; }
/* V7.1 (Mandat Teil I, Punkt 54): bei langen Status-Labels ("INTENSIVER ALS GEPLANT" etc.)
sprengte die feste `auto`-Spalte des week-day-row-Grids den Kartenrand (Badge lief mit
white-space:nowrap über die rechte Kante hinaus, ohne dass der Seiten-Scrollwidth-Check
das erkannte, da die Karte selbst innerhalb des Viewports blieb). Fix: Badge bekommt auf
schmalen Viewports eine eigene volle Zeile unter Datum/Titel und darf umbrechen. */
.week-day-row {
grid-template-columns: 70px 1fr;
grid-template-rows: auto auto;
}
.week-day-row .wd-status {
grid-column: 1 / -1;
justify-self: start;
white-space: normal;
text-align: left;
}
}
/* ===== Detail-Panel (Klick auf Tag) ===== */
.day-detail-panel {
background: var(--surface-hero); border: 1px solid var(--teal); border-radius: var(--radius); padding: 20px 24px; margin-top: 16px;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.day-detail-panel .dd-close { float: right; background: none; border: none; color: var(--text-dim); cursor: pointer; font-family: var(--font-body); font-size: 12px; }
/* ===== Training Editor (Beta 9.2, Klick auf zukünftige Session -> Bearbeiten) ===== */
.dd-edit-btn, .dd-reset-btn, .dd-edit-preview-btn, .dd-edit-confirm-btn, .dd-edit-cancel-btn {
font-family: var(--font-body); font-size: 12.5px; padding: 8px 14px; border-radius: 6px; cursor: pointer;
border: 1px solid var(--border-soft); background: var(--panel-alt); color: var(--text);
}
.dd-edit-btn:hover, .dd-edit-preview-btn:hover, .dd-edit-confirm-btn:hover { border-color: var(--teal); }
.dd-edit-confirm-btn { background: var(--teal); border-color: var(--teal); color: var(--bg); font-weight: 600; }
.dd-edit-cancel-btn { background: none; }
.dd-edit-form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.dd-edit-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); }
.dd-edit-label select, .dd-edit-label input, .dd-edit-label textarea {
font-family: var(--font-body); font-size: 13px; color: var(--text); background: var(--panel-alt);
border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px 10px; width: 100%;
}
.dd-edit-label select:focus, .dd-edit-label input:focus, .dd-edit-label textarea:focus { outline: none; border-color: var(--teal); }
.dd-impact-preview { font-size: 13px; color: var(--text); line-height: 1.6; }
/* ===== RPE-Eingabe (subjektive Belastung) ===== */
.rpe-input { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.rpe-input label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.rpe-label-value { color: var(--text); }
.rpe-scale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rpe-btn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--panel-alt); color: var(--text); font-family: var(--font-body); font-size: 12.5px; cursor: pointer; }
.rpe-btn:hover { border-color: var(--teal); }
.rpe-btn.active { background: var(--teal); border-color: var(--teal); color: var(--bg); font-weight: 600; }
/* ===== Änderungshistorie ===== */
.change-log-item { border-left: 2px solid var(--border-soft); padding: 4px 0 14px 16px; margin-left: 4px; position: relative; }
.change-log-item::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.change-log-item .cl-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.change-log-item .cl-change { font-size: 13.5px; color: var(--text); margin: 3px 0; font-weight: 500; }
.change-log-item .cl-reason { font-size: 12.5px; color: var(--text-muted); }
/* ===== Ladezustand / leere Seiten (Etappe 1 Platzhalter) ===== */
.placeholder-panel {
background: var(--surface-hero); border: 1px dashed var(--border);
border-radius: var(--radius); padding: 40px; text-align: center;
color: var(--text-dim); font-size: 13.5px;
backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%);
}
.placeholder-panel b { color: var(--text-muted); }
/* Beta 10.0 Platform Finish — "noch keine Daten" ist kein Fehler, wirkt aber sonst identisch zur
Fehler-Huelle; eigener Modifier haellt den Ton ruhiger (durchgezogener statt gestrichelter
Rahmen, kein technisches Rot) und traegt einen optionalen zweiten, kleineren Hinweistext. */
.placeholder-panel--empty { border-style: solid; color: var(--text-muted); }
.placeholder-panel--empty .ep-message { color: var(--text); font-size: 14.5px; margin-bottom: 6px; }
.placeholder-panel--empty .ep-hint { color: var(--text-dim); font-size: 12.5px; }
/* TALVAXO UX/Performance Update (Mandat Teil F, "Skeleton darf nicht ewig stehen bleiben — klarer
Fehlerzustand + Retry") — eigener Modifier, unterscheidbar von --empty (kein "alles gut,
nur noch keine Daten", sondern "hier ist etwas schiefgelaufen"): schwacher Crimson-Unterton statt
neutral/gestrichelt. */
.placeholder-panel--error { border-style: solid; border-color: var(--crimson); color: var(--text-muted); }
.placeholder-panel--error .ep-message { color: var(--text); font-size: 14.5px; margin-bottom: 12px; }
.placeholder-panel--error .error-retry-btn { margin: 0 auto; }
/* ============================================================
SKELETON LOADING (TALVAXO UX/Performance Update, Mandat Teil D) — verschoben von dashboard.css
(nur auf overview.html geladen) hierher, da Training/Health/Coach ebenfalls Seiten-foermige
Skeletons brauchen und components.css bereits ueberall eingebunden ist. Funktional unveraendert
gegenueber der bisherigen Overview-Version. Theme-neutral (nutzt --panel-alt/--panel-raised,
loest in Dark UND Light automatisch korrekt auf). Reduced-motion: statischer Block statt
Shimmer, kein Flackern.
============================================================ */
.skel { background: linear-gradient(90deg, var(--panel-alt) 25%, var(--panel-raised) 50%, var(--panel-alt) 75%); background-size: 200% 100%; animation: skel-shimmer 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-line { height: 12px; margin-bottom: 8px; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-40 { width: 40%; }
.skel-line.w-80 { width: 80%; }
.skel-block { height: 140px; border-radius: var(--radius); }
.skel-line-title { height: 26px; margin-bottom: 8px; }
.skel-block-hero { height: 260px; }
.skel-block-md { height: 160px; }
.skel-block-md2 { height: 200px; }
.skel-block-sm { height: 120px; }
.skel-block-strip { height: 110px; margin-top: var(--space-4); }
.skel-block-row { height: 180px; }
/* v10.2 "APP VISUAL EXPERIENCE" (Mandat Teil 51, "large Intelligence Stage skeleton + supporting
metric skeletons, not generic identical grey rectangles"): der vorherige Overview-Skeleton naeherte
nur EIN generisches "hero-zone"-Rechteck an, das gar nicht der tatsaechlichen obersten Struktur
(Morning Briefing -> Intelligence Stage -> Metric-Tiles-Reihe) entsprach -- neue, eigene
Groessenvarianten dafuer statt eines weiteren generischen Blocks. Bewusst NEUE Klassennamen (nicht
.skel-block-hero/-md/etc. veraendert) -- diese Basisklassen werden auch von Training/Health
verwendet (siehe Kommentar oben), eine Groessenaenderung dort haette diese unveraendert bleiben
sollenden Seiten mitverschoben. --radius-xl matcht den echten .daily-hero-modules-Radius, damit
der Uebergang Skeleton->Inhalt keinen sichtbaren Formsprung zeigt. */
.skel-block-briefing { height: 148px; margin-bottom: var(--space-4); }
.skel-block-stage { height: 360px; border-radius: var(--radius-xl); margin-bottom: var(--zone-gap); }
.skel-block-tiles { height: 260px; margin-bottom: var(--zone-gap); }
/* Page-shaped skeleton layouts (Mandat §17 "Training braucht ein Training-foermiges Skeleton,
nicht denselben generischen Spinner wie ueberall") — reine Grid-Huellen aus den Bausteinen oben,
je Seite grob im Umriss der tatsaechlichen Struktur (Status-Zeile + Hero + Karten-Reihen). */
.skel-page-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.skel-page-grid .skel-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.skel-page-grid .skel-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) {
.skel-page-grid .skel-row-3, .skel-page-grid .skel-row-4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.skel { animation: none; }
}
/* v10.3.5 (Session Navigation, Mandat §12 "Session Expiry UX"): ersetzt den gesamten
document.body-Inhalt (siehe assets/js/nav.js showSessionExpiredState()) -- volle
Viewport-Hoehe/-Breite noetig, da nichts anderes im DOM verbleibt, das den Hintergrund traegt. */
.talvaxo-session-expired {
min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 14px; padding: 24px; text-align: center; background: var(--bg);
color: var(--text); box-sizing: border-box;
}
.talvaxo-session-expired img { display: block; opacity: 0.92; margin-bottom: 6px; }
.talvaxo-session-expired h1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0; }
.talvaxo-session-expired p { font-size: 14px; color: var(--text-muted); margin: 0 0 6px; }
.talvaxo-session-expired-btn {
display: inline-flex; align-items: center; background: var(--talvaxo-gradient); color: #fff;
border: none; border-radius: 10px; padding: 12px 26px; font-family: var(--font-display);
font-weight: 600; font-size: 14px; text-decoration: none; transition: filter 160ms ease;
}
.talvaxo-session-expired-btn:hover, .talvaxo-session-expired-btn:focus-visible { filter: brightness(1.1); }