/* ==========================================================================
   Design-Schicht 2026 – Feinschliff nach bewährten Mustern aus Mobbin
   (Stripe Dashboard, Mercury, Linear, Monarch, Airbnb Host, Notion).
   Wird NACH app.css und objekt.css geladen und ändert nur das Aussehen:
   keine Funktion, keine Logik, keine Texte.

   Leitlinien
   - Präzise statt verspielt: kleinere Radien (Stripe/Mercury), feine 1px-Kanten
     statt weicher Schatten, ruhige Flächen, klare Hierarchie.
   - Zahlen sind der Star: Inter mit tabellarischen Ziffern, große Beträge eng gesetzt.
   - Der Akzent (Blau) nur als Signal: aktive Navigation, Fokus, Verläufe.
   - Tabellen wie bei Stripe: Kopfzeile in Versalien, ruhige Zeilen, Hover.
   ========================================================================== */

/* Tokens stehen nur in css/app.css */

/* ---------------- Grundschrift ---------------- */
body {
  font-feature-settings: "cv11", "ss01", "ss03";   /* Inter: ruhigere 1, a und Ziffern */
  letter-spacing: -.006em;
  background-image: none;
}
.big, .hero-num, .kpi-kachel b, .w-kpi .big, .metric-tile .big, .dq-top .big {
  font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.h2 { font-weight: 600; letter-spacing: -.03em; font-size: 26px; }
.h3 { font-weight: 600; letter-spacing: -.012em; }
.eyebrow, .nav-group { letter-spacing: .06em; font-size: 11px; }
.label { color: var(--ink-3); }
table, .tab, .num, .flow-row span:last-child, .kv .v { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-klein); }

/* ---------------- Seitenleiste: wie Linear/Mercury ----------------
   ruhige Fläche, kompakte Zeilen, aktiver Punkt als weiße "Karte" */
.brand { padding: 4px 6px; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.nav-group { margin: 18px 10px 6px; color: var(--ink-3); font-weight: 600; }
.nav a { height: 34px; gap: 10px; padding: 0 10px; border-radius: var(--r-klein); font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.nav a .ic { width: 17px; height: 17px; color: var(--ink-3); transition: color var(--dauer-1); }
.nav a:hover .ic { color: var(--ink-2); }
.nav a.active { background: transparent; color: var(--accent-text); font-weight: 600; box-shadow: none; }
.nav a.active .ic { color: var(--accent-text); }
.nav .count { height: 18px; min-width: 18px; padding: 0 5px; border-radius: var(--r-klein); font-size: 10.5px; }

/* ---------------- Kopfzeile ---------------- */
.head { padding: 10px 32px; }
.head.scrolled { border-bottom-color: var(--line); }
.iconbtn { width: 36px; height: 36px; border-radius: var(--r-mittel); border-color: var(--line-2); box-shadow: 0 1px 1px rgba(17,19,21,.03); }
.iconbtn:hover { box-shadow: var(--shadow-hover); }
.content { padding: 8px 32px 56px; }
@media (max-width: 1023.98px) { .head { padding: 10px 16px; } .content { padding: 4px 16px calc(112px + env(safe-area-inset-bottom, 0px)); } }

/* ---------------- Seitenkopf ---------------- */
.page-head { margin: 16px 0 var(--abstand-karten); align-items: flex-end; }
.page-head .h2 + .prose, .page-head .prose { font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 62ch; }

/* ---------------- Karten & Widgets: Stripe-Kanten ---------------- */
.card, .widget { border-radius: var(--r-gross); box-shadow: var(--shadow); }
.card { padding: 20px 22px; }
.widget { padding: 18px 20px; }
.widget:hover, .card.hover:hover { box-shadow: var(--shadow-hover); }
.card-head { margin-bottom: 16px; }
.card-head .h3, .w-head .h3 { font-size: 14.5px; }
.inset, .sum-block, .flow-col { border-radius: var(--r-mittel); }
@media (max-width: 640px) { .card, .widget { border-radius: var(--r-gross); } }

/* Kennzahl-Kacheln einheitlich (Stripe "Your overview"):
   weiß mit Kante – vorher teils grau, teils weiß */
.metric-tile { background: var(--card); box-shadow: var(--shadow); border-radius: var(--r-mittel); padding: 16px 18px; }
.metric-tile .big { font-size: 26px; margin-top: 8px; }
.kpi-kachel { border-radius: var(--r-mittel); padding: 16px 18px; gap: 6px; }
.kpi-kachel:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.kpi-kachel b { font-size: 23px; }

/* Flussübersicht (Einnahmen/Ausgaben) */
.flow-col { padding: 18px; }
.flow-row { border-bottom-style: solid; border-bottom-color: var(--line); padding: 8px 0; }

/* ---------------- Buttons: abgerundete Rechtecke (Stripe/Mercury) ---------------- */
.btn { height: 36px; padding: 0 14px; border-radius: var(--r-mittel); font-weight: 550; font-size: 13.5px; gap: 7px;
  box-shadow: 0 1px 1px rgba(17,19,21,.04); }
.btn:hover { box-shadow: var(--shadow-hover); }
.btn .ic { width: 16px; height: 16px; }
.btn.primary { box-shadow: 0 1px 2px rgba(17,19,21,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.btn.ghost, .btn.soft { box-shadow: none; }
.btn.sm { height: 30px; padding: 0 10px; border-radius: var(--r-klein); font-size: 12.5px; }
.btn.icon-only { width: 36px; }
.btn.sm.icon-only { width: 30px; }

/* Segment-Umschalter (Zeiträume wie Perplexity/Robinhood) */
.seg { border-radius: var(--r-mittel); padding: 2px; }
.seg button { height: 28px; border-radius: var(--r-mittel); padding: 0 12px; font-weight: 550; }
.seg .thumb { border-radius: var(--r-klein); top: 2px; bottom: 2px; box-shadow: 0 0 0 1px rgba(17,19,21,.06), 0 1px 3px rgba(17,19,21,.10); }
.seg.sm button { height: 24px; border-radius: var(--r-mittel); }

/* Reiter: Unterstreichung wie Stripe/Zillow statt schwebender Pillen */
.tabs { gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; padding-bottom: 0; }
.tabs a { height: 40px; border-radius: var(--r-mittel); padding: 0 12px; color: var(--ink-3); position: relative; font-size: 13.5px; }
.tabs a:hover { background: transparent; color: var(--ink); }
.tabs a.active { background: transparent; box-shadow: none; color: var(--ink); }
.tabs a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: var(--r-mittel); background: var(--ink); }

/* Chips & Status-Pillen (Mercury) */
.chip { height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 520; border-radius: var(--r-klein); }
button.chip, a.chip { cursor: pointer; border-color: var(--line); background: var(--card); }
button.chip:hover, a.chip:hover { border-color: var(--line-2); }
button.chip[aria-pressed="true"], a.chip.active, button.chip.active { background: var(--ink); color: var(--card); border-color: var(--ink); }

/* ---------------- Formularfelder ---------------- */
.input, .select, .textarea { height: 38px; border-radius: var(--r-mittel); padding: 0 12px; box-shadow: 0 1px 1px rgba(17,19,21,.03); }
.textarea { height: auto; padding: 10px 12px; }
.input:focus, .select:focus, .textarea:focus { box-shadow: var(--ring); }
.field > label, .field > .flabel { font-weight: 550; color: var(--ink-2); }

/* ---------------- Tabellen: Stripe-Stil ---------------- */
.table-wrap { border-radius: var(--r-mittel); }
table.t { font-size: 13.5px; }
table.t th {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
  padding: 10px 12px; background: var(--inset); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.t thead tr th:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
table.t thead tr th:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
table.t thead th { border-bottom: 0; }
table.t td { padding: 13px 12px; border-bottom-color: var(--line); }
table.t tr.click:hover td, table.t tbody tr:hover td { background: var(--hover); }
table.t .strong { font-weight: 560; }
/* lange Spaltenköpfe sauber umbrechen (mit Silbentrennung, nicht mitten im Wort) */
table.t.kompakt th, #report table.t th, .cmp-table th {
  white-space: normal; text-transform: none; letter-spacing: 0; font-size: 11.5px; line-height: 1.3;
  -webkit-hyphens: auto; hyphens: auto; vertical-align: bottom;
}
table.t th .btn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; height: auto; min-height: 0;
  padding: 0; border: 0; border-radius: var(--r-mittel); background: none; box-shadow: none; white-space: inherit; text-align: inherit; gap: 4px; }
table.t th .btn:hover { color: var(--ink); box-shadow: none; }

/* ---------------- Mobile Tab-Leiste ---------------- */
@media (max-width: 1023.98px) {
}

/* ---------------- Overlays ---------------- */
.modal { border-radius: var(--r-gross) !important; }
.toast { border-radius: var(--r-gross) !important; }
.pop, .menu, .palette { border-radius: var(--r-gross); }
.tip { border-radius: var(--r-klein); }

/* ---------------- Demo-Hinweis: dezenter (Stripe "Test mode") ---------------- */
.demo-leiste { border-radius: var(--r-mittel) !important; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------------- Vorschaubilder / Initialen ---------------- */
.thumb { border-radius: var(--r-klein); }
.thumb.ini { font-weight: 650; font-size: 11.5px; }
.avatar { font-weight: 600; }

/* ---------------- Bewegung zurückhaltend ---------------- */
@media (prefers-reduced-motion: reduce) {
  .kpi-kachel:hover { transform: none; }
}