/* ============================================================
   Praxis-Finanzen — Design-System „Concrete / Floating-Nav" (Variante C)
   Akzent: Kobalt. Zentrale Tokens als CSS-Variablen, darauf aufbauend
   die Komponenten-Klassen (Nav, Karten, KPIs, Tabellen, Steuer …).
   Ergänzt das per CDN geladene Tailwind; Layout/Optik laufen über diese
   semantischen Klassen.
   ============================================================ */

:root{
  /* Beton-Grau Leinwand (kühl, leicht blau) */
  --canvas:      #C7C9CE;
  --canvas-top:  #D5D7DB;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAFB;

  /* Tinte (kühles Near-Black) */
  --ink:   #16171B;
  --ink-2: #54565C;
  --ink-3: #83858C;
  --on-ink:#EDEEF1;            /* Text auf dunklen Flächen */

  /* Linien */
  --line:        #E7E8EB;      /* Haarlinie auf Weiß */
  --line-strong: #D9DBDF;
  --card-bd:     rgba(20,22,26,.10);
  --card-sh:     0 1px 2px rgba(20,22,26,.05), 0 14px 30px -20px rgba(20,22,26,.30);

  /* Semantik */
  --pos:#1C7C53; --pos-soft:#E2EFE9;
  --neg:#C23A29; --neg-soft:#F7E6E2;
  --warn:#B45309; --warn-soft:#FBF1DD;

  /* AKZENT — Kobalt (festgelegt) */
  --accent:#2340D6; --accent-strong:#1A30B4; --accent-soft:#E6E8FB;
  --accent-line:#C6CCF5; --accent-on:#FFFFFF; --accent-bright:#A7B6FF;
  --series-2:#20222A;

  --radius:14px; --radius-s:10px;
  --font-display:"Archivo", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
}

/* ---------- Grundgerüst ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.5;
  background:
    radial-gradient(1200px 720px at 70% -10%, var(--canvas-top), transparent 62%),
    var(--canvas);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
button{ cursor:pointer; }
/* Minimaler Reset (ersetzt das frühere Tailwind-Preflight) */
button, input, optgroup, select, textarea{ font:inherit; color:inherit; margin:0; }
h1,h2,h3,h4,h5,h6,p{ margin:0; }
table{ border-collapse:collapse; }
img,svg{ vertical-align:middle; }
::selection{ background:var(--accent); color:var(--accent-on); }

/* ---------- Floating-Navigation ---------- */
/* gleicher Container/Padding wie .wrap → Pille fluchtet mit dem Inhalt */
/* CSS-only Drawer-Schalter: optisch versteckt, aber per Label klick- und per Tastatur fokussierbar. */
.navtoggle{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.fnav-wrap{ position:sticky; top:16px; z-index:50; margin:16px auto 0; max-width:1240px; padding:0 32px; }
.fnav{ display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 12px; border-radius:18px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(20,22,26,.10);
  box-shadow:0 12px 34px -14px rgba(20,22,26,.34), 0 2px 6px rgba(20,22,26,.06); }
.wordmark{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:11px; transition:background .12s; }
.wordmark:hover{ background:rgba(20,22,26,.05); }
.wordmark .mk{ width:28px; height:28px; border-radius:8px; background:var(--ink); display:grid; place-items:center; flex:none; }
.wordmark b{ font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.fnav .links{ display:flex; align-items:center; gap:2px; margin:0 auto; }
.fnav .links a{ padding:8px 10px; border-radius:9px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap; transition:.12s; }
.fnav .links a:hover{ background:rgba(20,22,26,.06); color:var(--ink); }
.fnav .links a.active{ background:var(--accent-soft); color:var(--accent-strong); }
.fnav-right{ display:flex; align-items:center; gap:8px; flex:none; }
.fnav .cta{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:10px;
  background:var(--ink); color:var(--on-ink); font-size:12px; font-weight:700; white-space:nowrap; transition:.15s; }
.fnav .cta:hover{ background:#000; }
.acct{ width:32px; height:32px; border-radius:999px; background:var(--ink); color:var(--on-ink);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:11.5px; letter-spacing:.04em; flex:none; }
.acct:hover{ background:#000; }
.fnav-logout{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); font-size:12px; font-weight:700; transition:.15s; }
.fnav-logout:hover{ border-color:var(--ink); color:var(--ink); }
/* Konto-Dropdown (JS-frei via <details>) – Abmelden sicher weggeraeumt */
.acctmenu{ position:relative; flex:none; }
.acctmenu > summary{ list-style:none; cursor:pointer; }
.acctmenu > summary::-webkit-details-marker{ display:none; }
.acctmenu[open] > summary.acct{ background:#000; }
.acctmenu-pop{ position:absolute; right:0; top:calc(100% + 8px); min-width:188px;
  background:#fff; border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 14px 34px -10px rgba(20,22,26,.28); padding:6px; z-index:60;
  display:flex; flex-direction:column; gap:2px; }
.acctmenu-head{ padding:8px 10px 6px; font-size:10.5px; color:var(--ink-3); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.acctmenu-pop a, .acctmenu-pop button{ display:block; width:100%; text-align:left; font:inherit;
  padding:9px 10px; border-radius:8px; border:0; background:transparent; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink-2); }
.acctmenu-pop a:hover, .acctmenu-pop button:hover{ background:rgba(20,22,26,.06); color:var(--ink); }
.burger{ display:none; width:36px; height:36px; border-radius:10px; border:1px solid rgba(20,22,26,.16);
  place-items:center; color:var(--ink-2); background:rgba(255,255,255,.5); cursor:pointer; }
.burger:hover{ color:var(--ink); border-color:var(--ink); }

/* Mobile-Drawer (CSS-only via .navtoggle-Checkbox) */
.drawer-ov{ position:fixed; inset:0; z-index:60; background:rgba(20,22,26,.45);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; cursor:pointer; }
.drawer{ position:fixed; z-index:61; top:0; left:0; height:100%; width:84%; max-width:320px;
  background:rgba(250,250,251,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-right:1px solid var(--line-strong); display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.1,1); box-shadow:0 0 70px rgba(20,22,26,.28); }
.navtoggle:checked ~ .drawer-ov{ opacity:1; visibility:visible; }
.navtoggle:checked ~ .drawer{ transform:none; }
body:has(.navtoggle:checked){ overflow:hidden; }
.drawer .dhead{ display:flex; align-items:center; justify-content:space-between; padding:18px 16px 8px; }
.drawer .dclose{ width:34px; height:34px; border-radius:999px; border:1px solid var(--line-strong); background:none;
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.drawer .dclose:hover{ color:var(--ink); border-color:var(--ink); }
.drawer .dlinks{ display:grid; gap:1px; padding:8px 12px; overflow-y:auto; }
.drawer .dlinks a{ padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.drawer .dlinks a:hover{ background:rgba(20,22,26,.05); color:var(--ink); }
.drawer .dlinks a.active{ background:var(--accent-soft); color:var(--accent-strong); }
.drawer .dfoot{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:16px; border-top:1px solid var(--line); }

/* ---------- Layout ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:38px 32px 80px; }

/* ---------- Hero-Kopf ---------- */
.hero{ position:relative; margin-bottom:34px; }
.eyebrow{ font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.bigtitle{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(40px,6vw,72px); line-height:.94; margin:0; color:var(--ink); }
.lede{ max-width:540px; color:var(--ink); font-size:17px; font-weight:600; margin:18px 0 0; }
.herometa{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 20px; margin-top:14px; }
.herometa .hm{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.herometa .hm::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:none; }
.herometa .hm b{ font-weight:600; color:var(--ink); }
.herometa a.hm-go{ color:var(--accent-strong); font-weight:600; }
.herometa a.hm-go::before{ background:var(--accent); }
.herometa a.hm-go:hover{ text-decoration:underline; }
.hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------- Formularelemente ---------- */
.yearpick{ display:flex; align-items:center; gap:9px; }
.yearpick label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.select{ appearance:none; -webkit-appearance:none; border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
  padding:9px 36px 9px 16px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2383858C' stroke-width='1.8'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
.select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* Monatsnavigation (Dashboard) */
.monthbar{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.monthnav{ display:flex; align-items:center; gap:8px; }
.monthpick{ display:flex; align-items:center; gap:8px; }
.navarrow{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  border:1px solid var(--line-strong); background:var(--surface); border-radius:999px; color:var(--ink-2); transition:.15s; }
.navarrow:hover{ border-color:var(--ink); color:var(--ink); }
.navarrow.disabled{ opacity:.34; pointer-events:none; }
.yearlink{ font-size:12.5px; font-weight:700; color:var(--accent-strong); }
.yearlink:hover{ text-decoration:underline; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.input{ border:1px solid var(--line-strong); background:var(--surface); border-radius:var(--radius-s);
  padding:10px 13px; font-family:var(--font-body); font-size:14px; color:var(--ink); width:100%; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.02em; border:1px solid transparent; transition:.15s; white-space:nowrap; }
.btn-primary{ background:var(--ink); color:var(--on-ink); }
.btn-primary:hover{ background:#000; }
.btn-accent{ background:var(--accent); color:var(--accent-on); }
.btn-accent:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn-danger{ background:transparent; border-color:var(--neg); color:var(--neg); }
.btn-danger:hover{ background:var(--neg); color:#fff; }

/* ---------- Karten / Raster ---------- */
.grid{ display:grid; gap:18px; }
.kpis{ grid-template-columns:repeat(4,1fr); }
.card{ background:var(--surface); border:1px solid var(--card-bd); border-radius:var(--radius); box-shadow:var(--card-sh); }

.kpi{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:14px; min-height:148px; }
.kpi .cap{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.kpi .num{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; line-height:1;
  font-size:34px; margin-top:auto; font-feature-settings:"tnum" 1; }
.kpi .num .dec{ font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.kpi .meta{ font-size:12px; color:var(--ink-3); }
.kpi.pos .num{ color:var(--pos); }
.kpi.neg .num{ color:var(--neg); }
.kpi .trend{ font-weight:700; }
.kpi .trend.up{ color:var(--pos); } .kpi .trend.down{ color:var(--neg); }

/* Flag-Kachel (Akzent) – auf <a> (klickbar) und <div> */
.kpi.flag{ border-color:var(--accent-line); background:linear-gradient(180deg,#fff,var(--accent-soft)); }
.kpi.flag .cap{ color:var(--accent-strong); }
.kpi.flag .num{ color:var(--accent-strong); }
.kpi.flag .meta{ color:var(--accent-strong); }
a.kpi.flag:hover{ box-shadow:0 1px 2px rgba(20,22,26,.05), 0 18px 36px -22px var(--accent); }

/* Steuer-Hinweis: invertierte dunkle Karte (minimalistisches Signal) */
.taxbar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:18px; padding:24px 26px; border-radius:var(--radius); background:var(--ink); color:var(--on-ink); }
.taxbar .lead{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,238,241,.6); }
.taxbar .big{ font-family:var(--font-display); font-weight:800; font-size:36px; letter-spacing:-.02em; margin-top:8px; color:var(--accent-bright); }
.taxbar .rt{ text-align:right; font-size:13px; color:rgba(237,238,241,.72); line-height:1.8; }
.taxbar .rt b{ font-family:var(--font-display); font-weight:700; color:var(--on-ink); }
.taxbar .go{ display:inline-flex; gap:7px; align-items:center; color:var(--accent-bright); font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; margin-top:6px; }
.taxbar a.go:hover{ text-decoration:underline; }
.taxbar .methode a{ color:var(--accent-bright); font-weight:700; }
.taxbar .methode a:hover{ text-decoration:underline; }

/* Panels */
.panels{ grid-template-columns:1fr 1fr; margin-top:18px; }
.panel{ padding:24px; }
.panel h2{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:14px; margin:0 0 20px; color:var(--ink); }
.panel .h2row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.panel .h2row h2{ margin:0; }
.legend{ display:flex; gap:16px; font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:9px; height:9px; border-radius:2px; }

/* Kategorie-Balken */
.catrow{ margin-bottom:15px; }
.catrow:last-child{ margin-bottom:0; }
.catrow .top{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:7px; gap:12px; }
.catrow .nm{ color:var(--ink-2); font-weight:500; }
.catrow .am{ font-family:var(--font-display); font-weight:700; font-size:13px; font-feature-settings:"tnum" 1; white-space:nowrap; }
.track{ height:8px; background:#EDEEF0; border-radius:2px; overflow:hidden; }
.fill{ height:100%; background:var(--accent); border-radius:2px; }
.empty{ font-size:13px; color:var(--ink-3); }

/* Monatsverlauf */
.chart{ display:flex; align-items:flex-end; gap:9px; height:184px; }
.chart a.mo{ text-decoration:none; color:inherit; }
.chart .mo{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0;
  padding:6px 0 0; border-radius:10px; transition:background .15s; cursor:pointer; }
.chart .mo:hover{ background:rgba(20,22,26,.05); }
.chart .mo.sel{ background:rgba(35,64,214,.08); }
.chart .mo:focus{ outline:none; }
.chart .mo:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
.chart .bars{ width:100%; height:148px; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.chart .bars i{ width:38%; border-radius:3px 3px 0 0; transition:filter .15s, box-shadow .15s; }
.chart .bars .ein{ background:var(--accent); }
.chart .bars .aus{ background:var(--series-2); }
.chart .mo:hover .bars .ein,.chart .mo.sel .bars .ein{ filter:brightness(1.16) saturate(1.12); box-shadow:0 6px 16px -6px var(--accent); }
.chart .mo:hover .bars .aus,.chart .mo.sel .bars .aus{ filter:brightness(1.5); }
.chart .mo:hover .lab,.chart .mo.sel .lab{ color:var(--ink); }
.chart .lab{ font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--ink-3); text-transform:uppercase; transition:color .15s; }
/* Wertanzeige unter dem Chart (Tap/Hover/Fokus eines Monats) */
.chart-readout{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2); min-height:24px; }
.chart-readout b{ font-family:var(--font-display); font-weight:800; color:var(--ink);
  text-transform:uppercase; letter-spacing:.04em; font-size:12px; }
.chart-readout span{ display:inline-flex; align-items:center; gap:7px; font-feature-settings:"tnum" 1; }
.chart-readout i{ width:9px; height:9px; border-radius:2px; flex:none; }
.chart-readout .ein i{ background:var(--accent); }
.chart-readout .aus i{ background:var(--series-2); }
.chart-readout .cr-hint{ color:var(--ink-3); }

/* ---------- Tabellen ---------- */
.sectlabel{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  margin:30px 2px 12px; display:flex; align-items:center; gap:10px; }
.sectlabel .ct{ color:var(--ink-3); font-family:var(--font-display); }
.tablewrap{ overflow:auto; }
/* Kopfzeile innerhalb einer Tabellen-Karte (z. B. Jahr + Summe bei Einnahmen) */
.jahrhead{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line-strong); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl tbody td{ padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl .r{ text-align:right; }
.tbl .num{ font-family:var(--font-display); font-weight:600; color:var(--ink); font-feature-settings:"tnum" 1; white-space:nowrap; }
.tbl .strong{ color:var(--ink); font-weight:600; }
/* Aktions-Link – funktioniert auf <a> und auf <button> (Storno/Löschen-Formulare) */
.act{ color:var(--accent-strong); font-weight:700; font-family:inherit; font-size:inherit;
  background:none; border:0; padding:0; cursor:pointer; white-space:nowrap; }
.act:hover{ text-decoration:underline; }
.act.mut{ color:var(--ink-3); }
.act.danger{ color:var(--neg); }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; }
.badge.warn{ background:var(--accent-soft); color:var(--accent-strong); } .badge.warn::before{ background:var(--accent); }
.badge.ok{ background:var(--pos-soft); color:var(--pos); } .badge.ok::before{ background:var(--pos); }
.badge.neg{ background:var(--neg-soft); color:var(--neg); } .badge.neg::before{ background:var(--neg); }
.badge.mut{ background:#ECEDEF; color:var(--ink-3); } .badge.mut::before{ background:var(--ink-3); }
.chip{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  background:#EFF0F2; border:1px solid var(--line); padding:3px 9px; border-radius:6px; }
.chip.dark{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
.cardtitle{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:13px; margin:0; color:var(--ink); }

/* Steuer-Berechnung */
.calc{ width:100%; border-collapse:collapse; font-size:13px; }
.calc td{ padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.calc td.r{ text-align:right; font-family:var(--font-display); font-weight:600; color:var(--ink); font-feature-settings:"tnum" 1; }
.calc tr.sum td{ font-weight:700; color:var(--ink); border-bottom:1px solid var(--line-strong); }
.calc tr.total td{ font-weight:800; color:var(--ink); border-bottom:0; padding-top:13px; font-family:var(--font-display); }
.calc tr.total td.r{ color:var(--accent-strong); }
.note{ font-size:12px; color:var(--ink-3); line-height:1.6; }
.callout{ display:flex; gap:12px; padding:15px 18px; border-radius:var(--radius-s);
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-strong); font-size:12.5px; margin-bottom:22px; }
.callout svg{ flex:none; margin-top:1px; }
.callout.warn{ background:var(--warn-soft); border-color:#F0D9A8; color:var(--warn); }

/* ---------- Sub-Seiten-Kopf (Formulare/Detailseiten) ---------- */
.narrow{ max-width:680px; }
.backlink{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.backlink:hover{ color:var(--ink); }
.pagehead{ margin-bottom:26px; }
.pagetitle{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(28px,3.4vw,40px); line-height:1; margin:0; color:var(--ink); }
.pagelede{ max-width:580px; color:var(--ink-2); font-size:14px; margin:12px 0 0; line-height:1.6; }
.crumb{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; font-size:13px; color:var(--ink-2); }
.crumb .sep{ color:var(--ink-3); }

/* ---------- Alerts / Flash-Meldungen ---------- */
.alert{ border-radius:var(--radius-s); padding:12px 16px; font-size:13px; border:1px solid; margin-bottom:18px; line-height:1.5; }
.alert b,.alert strong{ font-weight:700; }
.alert-ok{ background:var(--pos-soft); border-color:#BFE0CF; color:var(--pos); }
.alert-err{ background:var(--neg-soft); border-color:#F0CFC8; color:var(--neg); }
.alert-warn{ background:var(--warn-soft); border-color:#F0D9A8; color:var(--warn); }
.alert-info{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-strong); }
.alert-mut{ background:#ECEDEF; border-color:var(--line); color:var(--ink-3); }

/* ---------- Formulare ---------- */
.formcard{ padding:24px; display:flex; flex-direction:column; gap:18px; }
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.formactions{ display:flex; align-items:center; gap:16px; padding-top:2px; flex-wrap:wrap; }
.hint{ font-size:12px; color:var(--ink-3); margin-top:5px; line-height:1.5; }
.hint.warn{ color:var(--warn); }
.formgrid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:620px){ .formgrid.cols-3{ grid-template-columns:1fr; } }
.checkline{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); }
.checkline input{ width:16px; height:16px; accent-color:var(--accent); }
/* Tabellen-Fußzeile (z. B. AfA-Summe) + klickbarer Status-Badge (htmx-Toggle) */
.tbl tfoot td{ padding:14px 18px; border-top:1px solid var(--line-strong); background:var(--surface-2);
  font-weight:700; color:var(--ink); }
.tbl tr.sumrow td{ border-top:1px solid var(--line-strong); font-weight:700; color:var(--ink); }
button.badge{ border:0; cursor:pointer; }
button.badge:hover{ filter:brightness(.96); }
/* .field/.input liegen weiter oben; select & textarea teilen sich die .input-Optik */
select.input{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2383858C' stroke-width='1.8'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
textarea.input{ resize:vertical; min-height:64px; line-height:1.5; }

/* Datei-Upload Dropzone */
.dropzone{ display:block; border:2px dashed var(--line-strong); border-radius:var(--radius); padding:34px 24px;
  text-align:center; cursor:pointer; transition:.15s; background:var(--surface-2); }
.dropzone:hover,.dropzone.drag{ border-color:var(--accent); background:var(--accent-soft); }
.dropzone .dz-emoji{ font-size:30px; margin-bottom:8px; }
.dropzone .dz-text{ font-size:13px; color:var(--ink-2); }
.dropzone .dz-text u{ color:var(--ink); font-weight:600; }
.filelist{ font-size:13px; color:var(--ink-2); margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }

/* ---------- Layout-Helfer ---------- */
.layout-2{ display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:start; }
/* Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen – sonst sprengt eine breite
   Tabelle die Spalte (und am Handy die Fensterbreite). Die Tabelle scrollt in .tablewrap. */
.layout-2 > *{ min-width:0; }
.preview-pane{ background:var(--surface); border:1px solid var(--card-bd); border-radius:var(--radius); box-shadow:var(--card-sh); padding:12px; }
.preview-pane iframe,.preview-pane img{ width:100%; border-radius:var(--radius-s); border:1px solid var(--line); display:block; }
.preview-pane pre{ white-space:pre-wrap; font-size:13px; color:var(--ink-2); max-height:75vh; overflow:auto; margin:0; }
@media (max-width:980px){ .layout-2{ grid-template-columns:1fr; } }

/* details/summary (Einzelerfassung etc.) */
details.card{ padding:20px 22px; }
details.card>summary{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:13px; cursor:pointer; list-style:none; color:var(--ink); }
details.card>summary::-webkit-details-marker{ display:none; }
details.card>summary::after{ content:"+"; float:right; color:var(--ink-3); font-weight:700; }
details.card[open]>summary::after{ content:"–"; }

/* ---------- Login / Auth (eigenständige Seite ohne Nav) ---------- */
.authpage{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.authbox{ width:100%; max-width:380px; }
.authhead{ text-align:center; margin-bottom:24px; }
.authmark{ width:52px; height:52px; border-radius:14px; background:var(--ink); display:inline-grid; place-items:center; margin-bottom:14px; }
.authhead h1{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:20px; margin:0; color:var(--ink); }
.authhead p{ font-size:13px; color:var(--ink-3); margin:6px 0 0; }
.authfoot{ text-align:center; font-size:11px; color:var(--ink-3); margin-top:18px; }

/* ---------- Sicherheit / 2FA ---------- */
.qrbox{ display:inline-block; background:#fff; padding:14px; border-radius:var(--radius-s); border:1px solid var(--line-strong); }
.qrbox svg{ display:block; width:200px; height:200px; }
.mono-key{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:15px; letter-spacing:.08em;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:10px 14px; color:var(--ink); word-break:break-all; user-select:all; }
.codes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.codes code{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:15px; letter-spacing:.06em;
  text-align:center; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:10px 8px; color:var(--ink); user-select:all; }
@media (max-width:480px){ .codes{ grid-template-columns:1fr; } }
.devlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.devlist li{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-s); }
.devlist .note{ font-size:12px; color:var(--ink-3); margin-top:2px; }
@media (max-width:480px){ .devlist li{ flex-direction:column; align-items:flex-start; } }

/* ---------- Einblend-Animation (respektiert reduzierte Bewegung) ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.anim{ animation:rise .55s cubic-bezier(.2,.7,.2,1) backwards; }
.anim:nth-child(1){ animation-delay:.03s; }
.anim:nth-child(2){ animation-delay:.08s; }
.anim:nth-child(3){ animation-delay:.13s; }
.anim:nth-child(4){ animation-delay:.18s; }
.kpis .anim:nth-child(1){ animation-delay:.05s; }
.kpis .anim:nth-child(2){ animation-delay:.11s; }
.kpis .anim:nth-child(3){ animation-delay:.17s; }
.kpis .anim:nth-child(4){ animation-delay:.23s; }
@media (prefers-reduced-motion:reduce){ .anim{ animation:none !important; } }

/* ---------- Responsiv ---------- */
@media (max-width:1080px){
  .fnav .links{ display:none; }
  .fnav .cta{ display:none; }
  .fnav-logout{ display:none; }
  .fnav-right{ margin-left:auto; }   /* ohne die zentrierenden .links: KM + Burger nach rechts */
  .fnav{ padding-right:12px; }       /* gleicher Seitenabstand wie das Logo links */
  .burger{ display:grid; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .panels{ grid-template-columns:minmax(0,1fr); }  /* Spur darf unter Inhaltsbreite schrumpfen */
}
@media (max-width:620px){
  .fnav-wrap,.wrap{ padding-left:14px; padding-right:14px; }
  .kpis{ grid-template-columns:1fr; }
  .wrap{ padding-top:26px; }
  .panel{ padding:18px; }            /* weniger Kartenpolster am Handy */
  .formgrid, .formgrid.cols-3{ grid-template-columns:1fr; }  /* Formulare einspaltig */
  /* Monatsverlauf auf schmale Screens einpassen (12 Spalten + Labels) */
  .chart{ gap:4px; }
  .chart .bars{ gap:2px; }
  .chart .lab{ font-size:9px; letter-spacing:.02em; }
}