* { box-sizing: border-box; }
/* Scrollbar-Platz immer reservieren → fixe Elemente (z.B. Finn) stehen auf JEDER Seite an derselben Stelle,
egal ob die Seite scrollt oder nicht (verhindert das seitliche Springen zwischen Seiten). */
html { scrollbar-gutter: stable; }
body {
margin: 0; background: var(--surface-page); color: var(--text-body);
font-family: var(--font-body); font-size: 14px; line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Formular-Steuerelemente: durchgängig token-basiert (dark-sicher) */
input, select, textarea {
font-family: var(--font-body); color: var(--text-body);
background: var(--surface-card); border: 1px solid var(--border-subtle);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select option { color: var(--text-body); background: var(--surface-card); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-secondary); }
/* Such-Feld: einheitlicher Baustein für alle Seiten (Bank, Belege, Panels …) */
.search-wrap { flex: 1; min-width: 200px; position: relative; display: flex; align-items: center; }
.search-wrap .ic { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.search-wrap input {
flex: 1; width: 100%; padding: 10px 14px 10px 38px; font-size: 13px; border-radius: 999px;
}
/* Jahr-/Zeitraum-Auswahl (Pille mit Dropdown) — Teil der Kontroll-Gruppen-Vokabel */
.yr-sel { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border-subtle);
border-radius: 999px; background: var(--surface-card); color: var(--text-muted); box-shadow: var(--shadow-card); }
.yr-sel select { border: none; background: transparent; color: var(--text-body); font-family: var(--font-display);
font-weight: 600; font-size: 14px; outline: none; cursor: pointer; }
/* Segmentierte Umschalter (Ein/Aus, Sortierung …) — geteilter Baustein */
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button { padding: 8px 14px; font-size: 12px; font-family: var(--font-display); font-weight: 600; border-radius: 999px;
background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-subtle); cursor: pointer;
transition: all 140ms var(--ease-out); display: inline-flex; align-items: center; gap: 5px; }
.seg button:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.seg button.on { background: var(--color-primary); color: var(--on-brand); border-color: var(--color-primary); }
.seg-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-faint); align-self: center; }
/* ---------- Layout: Sidebar + Main ---------- */
.layout { display: flex; min-height: 100vh; }
/* ---- Icon-Rail (66px) + Kontextpanel (186px) ---- */
.rail { width: 66px; flex-shrink: 0; background: var(--surface-card); border-right: 1px solid var(--border-subtle);
position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center;
padding: 14px 0 12px; z-index: var(--z-nav); }
.rail-logo { display: block; margin-bottom: 10px; }
.rail-logo img { height: 24px; width: auto; }
.rail-logo .logo-c { display: var(--logo-light); } .rail-logo .logo-w { display: var(--logo-dark); }
.rail-items { flex: 1; display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; overflow-y: auto; }
.rail-item { width: 54px; padding: 8px 4px 6px; border-radius: 12px; display: flex; flex-direction: column;
align-items: center; gap: 4px; color: var(--text-muted); text-decoration: none; transition: all 140ms var(--ease-out); }
.rail-item span { font-family: var(--font-display); font-size: 8.5px; font-weight: 600; text-align: center; line-height: 1.1; }
.rail-item:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
.rail-item.active { background: var(--color-primary-soft); color: var(--color-primary); }
.rail-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
.rail-btn { width: 38px; height: 38px; border-radius: 999px; border: none; background: none; color: var(--text-muted);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 140ms var(--ease-out); }
.rail-btn:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
.ctxpanel { width: 248px; flex-shrink: 0; background: var(--sidebar-bg); border-right: 1px solid var(--border-subtle);
position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; z-index: calc(var(--z-nav) - 1); }
/* Cockpit ohne Favoriten: Layer 2 aus, Content + sticky-head rücken auf (nur Rail 66px) */
.layout.ctx-hidden .ctxpanel { display: none; }
.layout.ctx-hidden .sticky-head { left: 66px; }
/* … aber Hover auf einen Rail-Bereich zeigt sein Untermenü als Flyout (überlagert, schiebt nichts) */
.layout.ctx-hidden .ctxpanel.flyout { display: flex; position: fixed; left: 66px; top: 0; height: 100vh;
z-index: var(--z-nav); box-shadow: var(--shadow-panel, 0 10px 34px rgba(0,51,96,.16)); }
.ctx-logo { display: block; padding: 4px 8px 16px; }
.ctx-logo img { height: 30px; width: auto; max-width: 100%; display: block; }
.ctx-logo .logo-w { display: none; }
html[data-theme="dark"] .ctx-logo .logo-c { display: none; }
html[data-theme="dark"] .ctx-logo .logo-w { display: block; }
/* Bereichs-Panels: aktiver sichtbar; Hover auf Rail zeigt Vorschau */
.ctx-areas { display: flex; flex-direction: column; }
.ctx-area { display: none; flex-direction: column; }
.ctx-area.active { display: flex; }
.ctx-areas.previewing .ctx-area.active { display: none; }
.ctx-areas.previewing .ctx-area.preview { display: flex; }
.ctx-arrow { margin-left: 2px; color: var(--text-faint); flex-shrink: 0; transition: transform .2s var(--ease-out); }
.ctx-toggle.open .ctx-arrow { transform: rotate(90deg); }
.ctx-head { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-primary); padding: 2px 8px 12px; display: flex; align-items: center; gap: 7px; }
/* Favoriten stehen unter den Cockpit-Ansichten → klarer Abstand + dezenter Trenner */
.ctx-favs { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--divider); }
.ctx-favs .ctx-head { font-size: 13px; padding-bottom: 8px; }
.ctx-sec { font-family: var(--font-display); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint); padding: 12px 10px 6px; display: flex; align-items: center; gap: 5px; }
.ctx-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; color: var(--text-body);
text-decoration: none; font-size: 13.5px; transition: all 140ms var(--ease-out); width: 100%; border: none; background: none;
font-family: inherit; text-align: left; cursor: pointer; }
.ctx-item > span:not(.ctx-badge):not(.soon) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-item:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
.ctx-item.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.ctx-subs { display: none; flex-direction: column; margin: 2px 0 6px 30px; }
.ctx-subs.open { display: flex; }
.ctx-subs a { padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-subs a:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
.ctx-subs a.on { color: var(--color-primary); font-weight: 600; background: var(--color-primary-soft); }
.ctx-item .soon { margin-left: auto; font-size: 8.5px; }
/* Benachrichtigungs-Badge (Zahl, orange) + dezenter Rail-Punkt */
.ctx-badge { flex-shrink: 0; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--color-accent);
color: var(--on-brand); font-family: var(--font-display); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rail-item { position: relative; }
.rail-dot { position: absolute; top: 7px; right: 12px; width: 9px; height: 9px; border-radius: 999px;
background: var(--color-accent); box-shadow: 0 0 0 2px var(--surface-card); }
.ctx-ver { margin-top: auto; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 11px;
font-family: var(--font-display); font-weight: 600; padding: 12px 10px 2px; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.ctx-ver:hover { color: var(--color-secondary); }
/* Mobile Tab-Leiste unten (auf Desktop komplett aus) */
.mtabs { display: none; }
.mmore, .mmore-scrim { display: none; }
.brand-logo { padding: 0 8px 8px; }
.brand-logo img { height: 34px; width: auto; max-width: 100%; }
.brand-logo .logo-c { display: var(--logo-light); }
.brand-logo .logo-w { display: var(--logo-dark); }
.brand-ver { display: inline-flex; align-items: center; margin: 1px 0 0 8px;
padding: 2px 0; border: none; background: none; cursor: pointer;
color: var(--text-muted); font-size: 11px; font-family: var(--font-display);
font-weight: 600; letter-spacing: .2px; transition: color .15s var(--ease-out); }
.brand-ver:hover { color: var(--color-secondary); }
/* Changelog-Modal: Zeitleiste der letzten Commits */
.cl-list { list-style: none; margin: 0; padding: 0; }
.cl-item { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--divider); }
.cl-item:first-child { border-top: none; padding-top: 2px; }
.cl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.cl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary); flex-shrink: 0; }
.cl-item:not(:last-child) .cl-rail::after { content: ""; width: 2px; flex: 1; margin-top: 4px; background: var(--divider); }
.cl-body { min-width: 0; flex: 1; }
.cl-subject { font-size: 13px; color: var(--text-body); line-height: 1.4; word-break: break-word; }
.cl-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; font-size: 11px; color: var(--text-faint); }
.cl-hash { font-family: var(--font-mono, ui-monospace, monospace); }
.nav-scroll { flex: 1; overflow-y: auto; margin-top: 8px; }
.nav-group { margin-top: 14px; }
/* Globale Suche (Trigger in der Sidebar) */
.nav-search { display: flex; align-items: center; gap: 8px; width: 100%; margin: 10px 0 2px;
padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border-subtle);
background: var(--surface-page); color: var(--text-faint); font-family: var(--font-body);
font-size: 13px; cursor: pointer; transition: all 140ms var(--ease-out); }
.nav-search:hover { border-color: var(--color-secondary); color: var(--text-muted); }
.nav-search span { flex: 1; text-align: left; }
.nav-search-kbd { border: 1px solid var(--border-subtle); border-radius: 5px; padding: 1px 6px;
font-family: ui-monospace, monospace; font-size: 10px; color: var(--text-faint); }
/* Favoriten-Stern im Seitenkopf */
.mm-fav-star { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border-subtle);
background: var(--surface-card); color: var(--text-faint); display: inline-flex; align-items: center;
justify-content: center; cursor: pointer; transition: all 140ms var(--ease-out); flex-shrink: 0; }
.mm-fav-star:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mm-fav-star.on { border-color: var(--color-accent); color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.mm-fav-star.on svg { fill: currentColor; }
.nav-group-title {
font-family: var(--font-display); font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint);
padding: 0 10px 6px;
}
/* Hover-Flyout mit Unterseiten (nach rechts) */
.nav-item-wrap { position: relative; }
.nav-item-wrap .flyarrow { margin-left: auto; opacity: .45; }
.nav-flyout { position: fixed; display: none; z-index: var(--z-flyout); background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-panel);
padding: 6px; min-width: 190px; }
.nav-item-wrap:hover .nav-flyout { display: block; }
.nav-flyout a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--text-body); white-space: nowrap; }
.nav-flyout a:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
@media (max-width: 1024px) { .nav-flyout { display: none !important; } }
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: 999px; font-size: 13px; color: var(--text-body);
margin-bottom: 2px; transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.nav-item:hover { background: var(--nav-hover-bg); color: var(--color-secondary); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; }
.nav-item .ic { color: inherit; }
.nav-item .soon {
margin-left: auto; font-family: var(--font-display); font-size: 9px; font-weight: 600;
letter-spacing: 0.08em; color: var(--text-faint); background: var(--surface-muted);
border-radius: 999px; padding: 2px 7px;
}
/* Sidebar-Footer: Avatar + Name + Theme-Toggle */
.sidebar-foot { border-top: 1px solid var(--divider); padding-top: 12px; margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: var(--color-primary); color: var(--on-brand); display: flex; align-items: center;
justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
button.avatar { border: none; cursor: pointer; padding: 0; }
button.avatar:hover { filter: brightness(1.08); }
.sidebar-foot .who { min-width: 0; }
.sidebar-foot .who .nm { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who .rl { font-size: 11px; color: var(--text-muted); }
.theme-toggle {
margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px;
border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-muted);
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.theme-toggle:hover { color: var(--color-secondary); border-color: var(--color-secondary); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: inline-flex; }
.main { flex: 1; min-width: 0; }
.container { max-width: 1440px; margin: 0 auto; padding: 30px 40px 52px; }
/* Mobile-Header (nur < 1024px sichtbar) */
.mobile-header { display: none; }
.burger, .sidebar-close { background: none; border: none; cursor: pointer; color: var(--text-body); padding: 8px; border-radius: 999px; }
.sidebar-close { display: none; }
.scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-scrim); }
/* ---------- Seitenkopf ---------- */
header.page-head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--divider);
}
h1 { margin: 0; font-family: var(--font-display); font-size: 29px; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; line-height: 1.1; }
.stand { color: var(--text-muted); font-size: 12px; font-feature-settings: 'tnum'; }
.page-head .badge-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
h2 {
margin: 28px 0 12px; font-family: var(--font-display); font-size: 11px; font-weight: 600;
color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em;
}
.mm-overline {
font-family: var(--font-display); font-weight: 600; font-size: 10px;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
/* ---------- KPI-Kacheln ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi {
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px;
padding: 20px 22px; box-shadow: var(--shadow-card); position: relative;
transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
/* Status-Badge oben rechts in der KPI-Kachel (Handoff: „gut" / „+18 %" / „unter Reserve") */
.kpi > .mm-kpi-badge { position: absolute; top: 16px; right: 16px; margin: 0; }
.kpi:hover {
transform: translateY(-4px); box-shadow: var(--shadow-panel);
border-color: color-mix(in srgb, var(--color-secondary) 55%, var(--border-subtle));
}
.kpi-label {
font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px;
}
.kpi-value {
font-family: var(--font-display); font-size: 32px; font-weight: 300; margin: 0;
color: var(--number-color); font-feature-settings: 'tnum','lnum'; letter-spacing: -0.01em; line-height: 1.05;
}
.kpi-sub { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; font-feature-settings: 'tnum'; }
/* Mini-Fortschrittsbalken in KPI-Kacheln (Handoff: Bezahlt-Quote etc.) */
.kpi-bar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin: 10px 0 2px; }
.kpi-bar > span { display: block; height: 100%; border-radius: 999px; transform-origin: left;
background: linear-gradient(90deg, var(--color-secondary), var(--success)); animation: mmW .8s var(--ease-out) .2s both; }
@media (prefers-reduced-motion: reduce) { .kpi-bar > span { animation: none; } }
.kpi-sub.success { color: var(--success); }
.kpi-sub.warning { color: var(--warning); }
.kpi-sub.danger { color: var(--danger); }
.kpi-value.danger { color: var(--danger); }
.kpi-value.warning { color: var(--warning); }
.kpi-value.success { color: var(--success); }
/* ---------- Cards & Charts ---------- */
.chart-card, .card {
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px;
padding: 20px 24px; margin: 18px 0; box-shadow: var(--shadow-card);
}
.chart-wrap { position: relative; width: 100%; }
/* ---------- Geteilte Layout-Primitives (einmal, statt pro Seite neu erfinden) ---------- */
/* Zwei-Spalten-Layout: Hauptspalte + Seitenpanel. Beide Kinder sind .card → am Zeilenanfang
ausgerichtet (align-items:start), Überschriften gehören IN die Card, damit beide oben bündig
stehen. Panelbreite via --split-side überschreibbar. Mobil einspaltig. */
.split { display: grid; grid-template-columns: 1fr var(--split-side, 340px); gap: 16px;
align-items: start; margin-top: 16px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
/* Spec-Liste: Icon · Label(+Beschreibung) · rechtsbündiger Wert (tabular). EINE saubere
Label→Wert-Ausrichtung statt Fließtext mit versetzten Zahlen. */
.spec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.spec-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px;
padding: 8px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.spec-list li:first-child { border-top: none; }
.spec-list .sl-ic { display: inline-flex; margin-top: 1px; color: var(--color-secondary); }
.spec-list .sl-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spec-list .sl-desc { color: var(--text-muted); font-size: 11.5px; }
.spec-list .sl-val { font-family: var(--font-display); font-weight: 600; text-align: right;
white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ---------- Mobile-Utilities + Überlauf-Schutz ----------
Cockpit ist primär für den PC; die mobile Ansicht ist zum Checken unterwegs. Nicht-essentielle
Hinweise/Texte bekommen .mobile-hide (mobil ausgeblendet), damit nichts unnötig voll wird oder
aus dem Panel läuft. Globaler Schutz: die Seite scrollt nie horizontal. */
body { overflow-x: hidden; }
@media (max-width: 640px) {
.mobile-hide { display: none !important; }
/* Sicherheitsnetz: kein Kind sprengt den Viewport nach rechts */
.container, .card, .chart-card, .kpi { max-width: 100%; }
img, canvas, svg, table { max-width: 100%; }
}
.mobile-only { display: none; }
@media (max-width: 640px) { .mobile-only { display: revert; } }
/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
th {
text-align: left; padding: 9px 6px; color: var(--text-muted); font-family: var(--font-display);
font-weight: 600; border-bottom: 1px solid var(--divider); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.1em;
}
td { padding: 10px 6px; border-bottom: 1px solid var(--divider); font-feature-settings: 'tnum','lnum'; }
/* Die letzte Zeile schließt ohne Trennlinie ab — sonst endet jede Tabelle mit
einem Strich und darunter noch Karten-Polster, was unfertig aussieht. */
tbody tr:last-child > td { border-bottom: none; }
td.num, th.num { text-align: right; }
td.danger { color: var(--danger); }
td.success { color: var(--success); }
td.warning { color: var(--warning); }
/* ---------- Alert = weiße Card + Status-Punkt (keine roten Flächen) ---------- */
.alert {
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px;
padding: 14px 18px; margin: 16px 0; font-size: 13px; color: var(--text-body);
box-shadow: var(--shadow-card); display: flex; align-items: flex-start; gap: 12px;
}
.alert::before {
content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
background: var(--danger); margin-top: 6px;
}
.alert.warning::before { background: var(--warning); }
.alert.success::before { background: var(--success); }
.alert.info::before { background: var(--color-secondary); }
.alert strong { font-weight: 600; }
/* ---------- Buttons (Pillen) ---------- */
.btn {
display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display);
font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 999px;
border: 2px solid transparent; cursor: pointer; transition: all 140ms var(--ease-out);
background: var(--color-primary); color: var(--on-brand); line-height: 1;
}
.btn:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn.outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn.outline:hover { background: var(--color-primary-soft); }
.btn.ghost { background: transparent; color: var(--color-primary); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover { background: var(--nav-hover-bg); transform: none; }
.btn.accent { background: var(--color-accent); color: var(--on-brand); }
.btn.accent:hover { background: var(--color-accent-hover); }
.btn.danger-ghost { background: transparent; color: var(--danger); border-color: transparent; }
.btn.danger-ghost:hover { background: rgba(210,59,59,.08); transform: none; }
.btn.sm { padding: 6px 13px; font-size: 12px; }
.btn.neutral { background: transparent; border-color: var(--border-subtle); color: var(--text-muted); }
.btn.neutral:hover { background: var(--surface-muted); border-color: var(--border-strong, var(--text-faint)); color: var(--text-body); }
/* ---------- Chips / Badges / Punkte ---------- */
.badge {
display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--font-display);
font-size: 11px; font-weight: 600; background: var(--color-primary-soft); color: var(--color-primary);
}
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
font-family: var(--font-display); font-size: 12px; font-weight: 600; cursor: pointer;
border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--text-muted);
transition: all 140ms var(--ease-out); white-space: nowrap;
}
.chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--on-brand); }
/* ---------- Kontroll-Gruppen (Design-System-Vokabel) ----------
Auswahl-Leisten oben auf jeder Seite sind feste, benannte Bausteine — wie H1/H2 bei Überschriften —
damit sich das Design konsequent durchzieht:
.page-head = Seitentitel (H1)
.switchbar + .chip = Filter/Umschalter (Konten, Gesellschaften, Jahr) — überall gleich
.mm-tabs + .mm-tab = Abschnitts-Reiter innerhalb einer Seite
.btn (+ Varianten) = Aktionen
Immer diese Klassen nutzen, keine per-Seite-Sonderstyles. */
.switchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 18px; }
.switchbar + .switchbar { margin-top: -10px; }
.switchbar-label {
display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display);
font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--text-faint); margin-right: 2px;
}
/* ---------- Modal (wiederverwendbarer Baustein) ---------- */
.mm-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
.mm-modal.open { display: flex; }
.mm-modal-scrim { position: absolute; inset: 0; background: var(--scrim); }
.mm-modal-card { position: relative; z-index: 1; width: 430px; max-width: 100%; max-height: 90vh; overflow-y: auto;
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px;
box-shadow: var(--shadow-panel); padding: 22px; }
.mm-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mm-modal-head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.mm-modal-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; display: inline-flex; }
.mm-modal-x:hover { color: var(--text-body); }
/* === Formularfeld-Kanon (EINE Wahrheit) ===
.mm-field = Label-Feld-Wrapper; funktioniert für beide Strukturen:
UND .
.mm-input = einzelnes Feld ohne Wrapper (Inline-Inputs in Tabellen/Zeilen). */
.mm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px;
font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--text-muted); }
.mm-field > label { display: block; }
.mm-field :is(input, select, textarea),
.mm-input {
width: 100%; font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0;
text-transform: none; color: var(--text-body); background: var(--surface-card);
border: 1px solid var(--border-subtle); border-radius: 10px; padding: 9px 12px; }
.mm-input { width: auto; }
.mm-field textarea, textarea.mm-input { resize: vertical; min-height: 60px; }
.mm-field .hint { font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0;
text-transform: none; color: var(--text-faint); margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .mm-modal.open .mm-modal-card { animation: mm-fade-up .2s var(--ease-out) both; } }
/* ---------- Detail-Panel (Drawer rechts / Bottom-Sheet mobil) — geteilter Baustein ---------- */
.detail-host { position: fixed; inset: 0; z-index: var(--z-panel); display: none; }
.detail-host.open { display: block; }
.detail-host .p-scrim { position: absolute; inset: 0; background: var(--scrim); }
.detail-panel { position: absolute; top: 0; right: 0; height: 100%; width: 360px; max-width: 92vw;
background: var(--surface-card); box-shadow: var(--shadow-panel); border-left: 1px solid var(--border-subtle);
overflow-y: auto; padding: 22px; }
.detail-panel.w-380 { width: 380px; }
.detail-panel.w-420 { width: 420px; max-width: 94vw; }
.detail-panel.multi { display: none; }
.detail-panel.multi.active { display: block; }
.detail-panel.flush { padding: 0; display: flex; flex-direction: column; }
.p-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.p-head .avatar { width: 44px; height: 44px; font-size: 14px; }
.p-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; flex-shrink: 0; }
@media (max-width: 640px) {
.detail-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: auto;
max-height: 90vh; border-left: none; border-radius: 20px 20px 0 0; }
}
/* === R4 Split-View (Durcharbeiten): Liste links + In-Page-Detail rechts; mobil Bottom-Sheet === */
.mm-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
.mm-split-list { min-width: 0; }
.mm-split-detail { position: sticky; top: 14px; }
.mm-split-empty { border: 1px dashed var(--border-subtle); border-radius: 16px; padding: 44px 20px; text-align: center;
color: var(--text-muted); font-size: 13px; background: var(--surface-card); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mm-split-scrim { display: none; }
.mm-split .selected { border-color: var(--color-secondary) !important; box-shadow: 0 0 0 3px rgba(0, 140, 210, .12) !important; }
@media (max-width: 1080px) {
.mm-split { grid-template-columns: 1fr; }
.mm-split-empty { display: none; }
.mm-split-detail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: var(--z-panel);
transform: translateY(100%); transition: transform 280ms var(--ease-out); max-height: 88vh; overflow-y: auto;
background: var(--surface-card); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0, 51, 96, .18); }
.mm-split.detail-open .mm-split-detail { transform: translateY(0); }
.mm-split-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-panel) - 1); }
.mm-split.detail-open .mm-split-scrim { display: block; }
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dot.danger { background: var(--danger); } .dot.warning { background: var(--warning); }
.dot.success { background: var(--success); } .dot.info { background: var(--color-secondary); }
.status-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
}
.status-chip.warn { background: var(--warn-soft-bg); color: var(--warn-soft-text); }
.status-chip.ok { background: var(--ok-soft-bg); color: var(--ok-soft-text); }
.status-chip.muted { background: var(--surface-muted); color: var(--text-muted); }
.status-chip.info { background: var(--info-soft-bg); color: var(--color-secondary); }
.info-box { background: var(--surface-info); border-radius: 12px; padding: 12px 16px; font-size: 13px; color: var(--color-primary); }
/* ---------- Sticky-Kopf: blendet beim Scrollen smooth ein, oben weg ---------- */
.sticky-head {
position: fixed; top: 0; left: 314px; right: 0; z-index: var(--z-sticky);
background: var(--surface-page); border-bottom: 1px solid var(--divider); box-shadow: var(--shadow-card);
opacity: 0; transform: translateY(-10px); pointer-events: none;
transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.sticky-head.show { opacity: 1; transform: none; pointer-events: auto; }
.sticky-head-inner { max-width: 1200px; margin: 0 auto; padding: 11px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.scroll-sentinel { height: 1px; width: 100%; }
/* ---------- Bewegung (dezent) — respektiert prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes mm-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kpi, .card, .chart-card, .cc-tile, .sub-card, .abo-card, .pf-card, .emp-card, .win, .alert, .warn-card {
animation: mm-fade-up .34s var(--ease-out) both;
}
.win-grid .win:nth-child(2), .kpi-grid .kpi:nth-child(2) { animation-delay: .04s; }
.win-grid .win:nth-child(3), .kpi-grid .kpi:nth-child(3) { animation-delay: .08s; }
.win-grid .win:nth-child(4), .kpi-grid .kpi:nth-child(4) { animation-delay: .12s; }
.win-grid .win:nth-child(5) { animation-delay: .16s; }
.win-grid .win:nth-child(6) { animation-delay: .20s; }
/* In Overlays/Panels/Popovern/Sticky NICHT zusätzlich einblenden — sonst Doppel-Bewegung
(Slide-in des Panels + Fade der Karten darin), das wirkt unruhig. */
.assign-panel :is(.kpi,.card,.chart-card,.cc-tile,.sub-card,.abo-card,.pf-card,.emp-card,.win,.alert,.warn-card),
.panel-host :is(.kpi,.card,.chart-card,.cc-tile,.sub-card,.abo-card,.pf-card,.emp-card,.win,.alert,.warn-card),
.mm-modal :is(.kpi,.card,.chart-card,.cc-tile,.sub-card,.abo-card,.pf-card,.emp-card,.win,.alert,.warn-card),
.mm-pop-body :is(.card,.alert), .finn-panel :is(.card,.alert), .sticky-head :is(.kpi) {
animation: none;
}
/* Hover-Lift auf klickbaren Kacheln — kräftig, mit Rahmen-Akzent */
.win, a.card, .cc-tile, .abo-card, .pf-card, .emp-card {
transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
}
.win:hover, a.card:hover, .cc-tile:hover, .abo-card:hover, .pf-card:hover, .emp-card:hover {
transform: translateY(-4px); box-shadow: var(--shadow-panel);
border-color: color-mix(in srgb, var(--color-secondary) 50%, var(--border-subtle));
}
/* Statische Karten heben sich dezent an (mehr Leben, ohne Klick-Erwartung) */
.chart-card, .card:not(a) {
transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.chart-card:hover, .card:not(a):hover {
transform: translateY(-2px); box-shadow: var(--shadow-panel);
}
}
/* ---------- Info-Popover „Wie wird das berechnet?" ---------- */
.mm-pop { position: relative; display: inline-flex; vertical-align: middle; }
.mm-pop > .mm-pop-btn { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--border-subtle);
background: var(--surface-card); color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.mm-pop > .mm-pop-btn:hover { color: var(--color-secondary); border-color: var(--color-secondary); }
.mm-pop > .mm-pop-body { position: absolute; z-index: var(--z-popover); top: calc(100% + 8px); left: 0; width: 288px; max-width: 78vw;
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-panel);
padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-body); display: none; text-align: left; }
.mm-pop.open > .mm-pop-body { display: block; animation: mm-fade-up .18s var(--ease-out) both; }
.mm-pop-body h4 { margin: 0 0 6px; font-size: 12px; font-family: var(--font-display); }
.mm-pop-body .r { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.mm-pop-body .r b { font-feature-settings: 'tnum'; }
/* ---------- Kachel-Pagination-Leiste ---------- */
.mm-pagefoot { display: none; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 2px; }
.mm-pagefoot .mm-page-info { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; }
/* ---------- Unterstrich-Reiter (wie Google Ads) ---------- */
.mm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--divider); margin: 2px 0 18px; overflow-x: auto; }
.mm-tab { appearance: none; background: none; border: none; cursor: pointer; padding: 10px 15px; font-family: var(--font-display);
font-weight: 600; font-size: 14px; color: var(--text-muted); white-space: nowrap; border-bottom: 2px solid transparent;
margin-bottom: -1px; transition: color .15s var(--ease-out), border-color .15s var(--ease-out); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.mm-tab:hover { color: var(--text-body); }
a.mm-tab { text-decoration: none; } /* Reiter, der eine Seite nachlädt (statt clientseitig zu schalten) */
.mm-tab.active { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }
/* Zähler im Reiter als Pille — hält die Zahl vom Wort getrennt lesbar */
.mm-tab-n { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
font-size: 10.5px; font-weight: 600; font-feature-settings: 'tnum';
background: var(--surface-muted); color: var(--text-muted); vertical-align: middle; }
.mm-tab-n.warn { background: var(--warn-soft-bg); color: var(--warn-soft-text); }
.mm-tab.active .mm-tab-n { background: var(--color-primary-soft); color: var(--color-primary); }
.mm-tab.active .mm-tab-n.warn { background: var(--warn-soft-bg); color: var(--warn-soft-text); }
/* ---------- Finn: globaler Chat-Assistent (jede Seite) ---------- */
/* z-index-Ebenen (eine Skala für alle Overlays):
sticky-head 30 · Nav-Scrim/Sidebar 39/40 · [Finn 34] · Detail-Panels/Popover 50–60 · Flyout 80 · Modal 90.
Finn liegt bewusst UNTER allen Overlays → sobald ein Panel/Menü/Modal aufgeht, verschwindet Finn dahinter. */
.finn-fab { position: fixed; right: 22px; bottom: 22px; z-index: var(--z-finn); width: 54px; height: 54px; border-radius: 50%;
border: none; cursor: pointer; background: var(--color-primary); color: var(--on-brand); box-shadow: var(--shadow-panel);
display: flex; align-items: center; justify-content: center; transition: transform .18s var(--ease-out); }
.finn-fab:hover { transform: translateY(-2px) scale(1.04); }
.finn-panel { position: fixed; right: 22px; bottom: 86px; z-index: var(--z-finn); width: 360px; max-width: calc(100vw - 32px);
height: 460px; max-height: calc(100vh - 120px); background: var(--surface-card); border: 1px solid var(--border-subtle);
border-radius: 18px; box-shadow: var(--shadow-panel); display: none; flex-direction: column; overflow: hidden; }
.finn-panel.open { display: flex; }
.finn-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.finn-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: var(--on-brand); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.finn-head b { font-family: var(--font-display); }
.finn-head .finn-sub { font-size: 11px; color: var(--text-muted); }
.finn-head .finn-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 22px; line-height: 1; }
.finn-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.finn-msg { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.finn-msg.bot { background: var(--surface-muted); color: var(--text-body); align-self: flex-start; border-bottom-left-radius: 4px; }
.finn-msg.me { background: var(--color-primary); color: var(--on-brand); align-self: flex-end; border-bottom-right-radius: 4px; }
.finn-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--divider); }
.finn-input input { flex: 1; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 9px 14px;
background: var(--surface-card); color: var(--text-body); font-family: var(--font-body); font-size: 13.5px; outline: none; }
.finn-input input:focus { border-color: var(--color-secondary); }
.finn-input button { border: none; background: var(--color-primary); color: var(--on-brand); border-radius: 50%; width: 38px; height: 38px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ls-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.ls-stat {
display: inline-flex; align-items: baseline; gap: 8px; padding: 1px 22px; white-space: nowrap;
border-left: 1px solid var(--border-subtle);
font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.09em;
text-transform: uppercase; color: var(--text-muted);
}
.ls-stat:first-child { border-left: none; padding-left: 0; }
.ls-stat b { font-family: var(--font-display); font-weight: 300; font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--number-color); font-feature-settings: 'tnum','lnum'; }
.ls-stat.danger b { color: var(--danger); } .ls-stat.success b { color: var(--success); } .ls-stat.warning b { color: var(--warning); }
/* ---------- „Weitere laden" ---------- */
@media (max-width: 1024px) { .sticky-head { left: 0; top: 60px; } .sticky-head-inner { padding: 9px 16px; } .ls-stat { padding: 1px 14px; } .ls-stat b { font-size: 16px; } }
/* ---------- Warnzeile (Hinweis-Cards mit Status-Punkt) ---------- */
.warn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 4px 0 20px; }
.warn-card {
background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px;
padding: 14px 16px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 12px;
}
.warn-card .dot { margin-top: 2px; flex-shrink: 0; }
.warn-card .wc-body { min-width: 0; flex: 1; }
.warn-card .wc-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 3px; }
.warn-card .wc-text { font-size: 13px; color: var(--text-body); }
.warn-card .wc-text strong { font-family: var(--font-display); font-weight: 600; }
.warn-card .wc-link {
margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--color-secondary); white-space: nowrap;
}
.warn-card .wc-link:hover { color: var(--color-primary); }
.footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--divider); color: var(--text-muted); font-size: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Platzhalter-Seiten (Module in Arbeit) */
.placeholder { background: var(--surface-card); border: 1px dashed var(--border-subtle); border-radius: 16px; padding: 44px; text-align: center; margin-top: 24px; box-shadow: var(--shadow-card); }
.placeholder .big { display: inline-flex; color: var(--text-faint); margin-bottom: 12px; }
.placeholder h3 { font-family: var(--font-display); color: var(--text-heading); margin: 0 0 8px; }
.placeholder p { color: var(--text-muted); max-width: 460px; margin: 6px auto; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.rail, .ctxpanel { display: none; }
.sticky-head { left: 0; }
/* Bottom-Tab-Leiste */
.mtabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
background: var(--surface-card); border-top: 1px solid var(--border-subtle);
padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(0,51,96,.07); }
.mtab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px;
min-height: 50px; justify-content: center; background: none; border: none; cursor: pointer;
color: var(--text-muted); font-family: var(--font-display); font-size: 9px; font-weight: 600; text-decoration: none; }
.mtab .mt-ic { width: 42px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.mtab-dot { position: absolute; top: 1px; right: 7px; width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent); box-shadow: 0 0 0 2px var(--surface-card); }
.mtab.active { color: var(--color-primary); }
.mtab.active .mt-ic { background: var(--color-primary-soft); }
.main { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
/* Finn über die Bottom-Tab-Leiste heben (sonst verschwindet er dahinter) */
.finn-fab { bottom: calc(78px + env(safe-area-inset-bottom)); right: 16px; }
.finn-panel { bottom: calc(140px + env(safe-area-inset-bottom)); right: 16px;
max-height: calc(100vh - 210px - env(safe-area-inset-bottom)); }
/* „Mehr"-Sheet */
.mmore-scrim.open { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-nav) + 1); }
.mmore { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-nav) + 2);
background: var(--surface-card); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px rgba(0,51,96,.18);
padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 280ms var(--ease-out);
max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mmore.open { transform: translateY(0); }
.mmore::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--border-subtle);
margin: 4px auto 12px; position: sticky; top: 0; }
.mmore a { display: flex; align-items: center; gap: 11px; padding: 12px 12px; border-radius: 12px; color: var(--text-body); text-decoration: none; font-size: 14px; }
.mmore a.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
/* Aufklappbarer Eltern-Punkt: Zeile mit Pfeil togglt die eingerückte Unterliste (keine Pillen) */
.mmore .msheet-parent { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px; border: none;
background: none; border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--text-body);
text-align: left; cursor: pointer; }
.mmore .msheet-arrow { margin-left: auto; color: var(--text-faint); transition: transform .2s var(--ease-out); }
.mmore .msheet-item.open .msheet-arrow { transform: rotate(180deg); }
.mmore .msheet-subs { display: none; flex-direction: column; }
.mmore .msheet-item.open .msheet-subs { display: flex; }
.mmore .msheet-sub { display: flex; align-items: center; padding: 10px 12px 10px 47px; border-radius: 12px;
color: var(--text-muted); font-size: 13.5px; }
.mmore .msheet-sub.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.mt-lbl { display: inline-flex; align-items: center; gap: 2px; }
.mt-more-hint { opacity: .5; }
.mobile-header {
display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px;
background: var(--sidebar-bg); border-bottom: 1px solid var(--border-subtle);
position: sticky; top: 0; z-index: var(--z-sticky);
}
.mobile-header .m-logo img { height: 26px; width: auto; }
.mobile-header .m-logo .logo-c { display: var(--logo-light); }
.mobile-header .m-logo .logo-w { display: var(--logo-dark); }
.mobile-header .spacer { flex: 1; }
.container { padding: 20px 16px 40px; }
}
@media (max-width: 640px) {
.kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi-value { font-size: 27px; }
h1 { font-size: 21px; }
header.page-head { flex-wrap: wrap; }
.container { padding: 16px 16px 36px; }
}