/* ============================================================
   funk it.consulting — Design System v3 ("Kante statt Schatten")
   Ablöst funk-it-ds-v2.css. Farbwelt & Schrift: Marke Logo 2A
   (Stand 23.08.2026, siehe Skill funk-it-brand-guidelines).
   Schrift: Inter (UI). Belegnummern/IBAN laufen auf der System-
   Monospace — die Marke kennt keine eigene Mono, Ausrichtung der
   Ziffern ist hier Funktion, nicht Gestaltung.
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap
   ============================================================ */

:root, [data-theme="light"] {
  /* Flächen */
  --bg: #F7F8FA;             /* App-Hintergrund */
  --surface: #FFFFFF;        /* Karten, Panels, Tabellen */
  --tint: #F0F5FB;           /* Hinweisboxen, ruhige Hinterlegungen */
  --thead: #F7F8FA;          /* Tabellenkopf */

  /* Linien — Trennung über Kante, nicht Schatten */
  --line: #E3E8EF;           /* Standard-Rahmen (Karten, Tabellenkopf) */
  --line-soft: #EDF0F4;      /* Zeilentrenner innerhalb von Panels */
  --line-strong: #C9D2DD;    /* Input-Rahmen, Sekundärbutton */

  /* Text */
  --ink: #16263D;            /* Fließtext, Werte — Navy (Marke Logo 2A) */
  --ink-2: #5B7091;          /* Sekundärtext (Marke: Subline/Muted) */
  --ink-3: #627084;          /* Labels, Eyebrows, Metatext — 4,5:1 auch auf --tint/--thead
                                (07.09.2026: vorher #8593A3 mit 3,1:1; unterscheidet sich von
                                --ink-2 jetzt über den Farbton (neutral statt blau), nicht über Helligkeit) */

  /* Marke (Logo 2A) */
  --navy: #16263D;           /* Navy: Chrome (Header + Seitenleiste), Volltonfläche, KEIN Verlauf */
  --blue: #2B4A76;           /* Blau (Wortmarke): Links, Belegnummern, Diagramme */
  --hl: #D9E8F7;             /* Eisblau (heller Logo-Balken): Auswahl, aktive Filterchips, Icon-Hintergründe */

  /* Signal-Orange (Logo-Balken) — EINZIGE Akzentfarbe:
     Primärbutton, aktiver Tab, aktive Navigation, Fokusring, Zähler-Badges */
  --orange: #F4581C;
  --orange-hover: #D94A12;   /* Hover dunkelt ab — dort steht Weiß dann auf 4,25:1 */
  --orange-bg: #FDECE3;
  --on-orange: #FFFFFF;      /* Text auf Orange: Weiß (Entscheidung Bernd, 07.09.2026 — Navy wirkte trübe).
                                Auf ruhendem Orange sind das 3,36:1: erfüllt AA für Großtext (ab 18,66px
                                fett), nicht für normalen Text. Bewusst so gewählt; wer den Wert braucht,
                                hebt die Schrift auf 18,66px/700 statt die Markenfarbe zu ändern. */

  /* Semantik — Rot NIE als Primärbutton */
  --red: #C0261A;    --red-bg: #FBEAE8;    /* Löschen, Fehler, Mahnstufen */
  --green: #2F7D3B;  --green-bg: #E9F4EA;
  --amber: #8A6008;  --amber-bg: #FBF3DC;   /* 5,0:1 auf amber-bg (07.09.2026: #9A6C09 lag bei 4,2:1 — Warnzeilen fielen durch AA) */

  /* Chrome (Navy-Fläche) */
  --chrome: #16263D;
  --chrome-line: rgba(255,255,255,0.12);
  --chrome-ink: rgba(255,255,255,0.75);

  /* Typografie (Marke: nur Inter; Mono = System, rein funktional) */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Radien: 10 Karten / 6 Controls / 999 Badges. Tabellen scharfkantig im gerundeten Container. */
  --radius-card: 10px;
  --radius-ctl: 6px;
  --radius-pill: 999px;

  /* Dichte (Default = mittel; pro App via data-density überschreiben)
     Fließtext nie unter 16px (= 1rem): die Oberflächen werden am Wandbildschirm
     und mit Lesebrille bedient (Entscheidung 09.08.2026, siehe PORTAL.md).
     Der Handoff-Entwurf sah 13px vor — Bedienbarkeit schlägt Vorlage.
     Alle Schrift- und Dichtemaße in rem: wer im Browser "Schrift größer"
     einstellt, bekommt größere Oberflächen — nicht abgeschnittene. */
  --row-py: 0.75rem;         /* vertikales Zeilen-Padding (12px) */
  --ctl-h: 2.5rem;           /* Control-Höhe (40px) */
  --fs-body: 1rem;           /* 16px */

  /* 8px-Raster: alle Abstände 8 / 16 / 24 / 32 / 48 (skaliert mit rem) */
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 3rem;
}

/* Dark Mode — Chrome bleibt dunkles Navy, Orange bleibt identisch.
   Blau-Töne aus der Weiß-auf-Dunkel-Logovariante (#8FB4DC). */
[data-theme="dark"] {
  --bg: #11161D; --surface: #1A212B; --tint: #1D2836; --thead: #1F2833;
  --line: #2A3441; --line-soft: #232D39; --line-strong: #3B4757;
  --ink: #E7ECF2; --ink-2: #A9B5C2; --ink-3: #8A96A4;   /* ink-3: 4,9:1 auf --tint/--thead */
  --navy: #1C3252; --blue: #8FB4DC; --hl: #22344E;
  --orange: #F4581C; --orange-hover: #D94A12; --orange-bg: #3A2412;   /* Hover auch hier abdunkeln:
                                mit weisser Schrift waere der hellere Ton nur 2,8:1 */
  --red: #E05A4E; --red-bg: #3A1F1C;
  --green: #6FBF7A; --green-bg: #1D3220;
  --amber: #D9A93F; --amber-bg: #33290F;
  --chrome: #101927; --chrome-line: rgba(255,255,255,0.10); --chrome-ink: rgba(255,255,255,0.70);
}

/* Dichte pro App:
   kompakt      → Kalkulator, Offene Posten (Schreibtisch, Zahlenkolonnen)
   komfortabel  → Auftragserfassung, CRM (auch mobil/Tablet, Ziele ≥44px) */
[data-density="kompakt"]      { --row-py: 0.625rem; --ctl-h: 2.25rem;  --fs-body: 1rem; }
[data-density="komfortabel"]  { --row-py: 0.875rem; --ctl-h: 2.75rem; --fs-body: 1.0625rem; }

/* ---------- Basis ---------- */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
table { font-variant-numeric: tabular-nums; }  /* Beträge stehen sauber untereinander */
input, select, textarea, button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ---------- Chrome ---------- */
/* Header: 60px, sticky top:0, z-index:100. KEIN Verlauf, KEIN Schatten.
   Abweichung von "Kante statt Schatten" (Freigabe Bernd 23.08.2026, apple-design):
   der Header ist Navy-Glas — halbtransparent mit backdrop-blur, Inhalt scrollt
   sichtbar darunter durch. Fallback auf Vollton weiter unten. */
.app-header {
  height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: color-mix(in srgb, var(--chrome) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--chrome-line);
  position: sticky; top: 0; z-index: 100; color: #fff;
}
/* Seitenleiste: 248px, gleiche Fläche, border-right 1px var(--chrome-line). */
.app-sidebar {
  width: 248px; background: var(--chrome); border-right: 1px solid var(--chrome-line);
  display: flex; flex-direction: column; padding: 16px 12px;
  position: sticky; top: 0; height: 100vh; box-sizing: border-box;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-ctl); font-size: 1rem; font-weight: 500;
  color: rgba(255,255,255,0.72); transition: background 0.15s ease;
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,0.10); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--orange);   /* Orange-Indikator, einzige erlaubte "Schatten"-Nutzung */
}

/* ---------- Karten & Panels ---------- */
/* Schatten gibt es NUR für echte Ebenen: Dropdown, Dialog, Toast. Karten sind flach. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px;
}
.card-interactive:hover { border-color: var(--blue); background: var(--tint); }
.panel-title {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
  font-size: 0.84375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.overlay {                    /* Dropdown / Dialog / Toast — die einzigen Schattenträger */
  /* Material statt Vollton (apple-design): leicht durchscheinend + Blur,
     damit Menüs als eigene Ebene über dem Inhalt lesbar sind. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(16, 24, 38, 0.16);
}

/* Ohne Blur-Unterstützung bzw. bei reduzierter Transparenz: Vollton. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-header { background: var(--chrome); }
  .overlay { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .app-header { background: var(--chrome); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .overlay { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Buttons ---------- */
.btn-primary {                /* genau EINER je Ansicht */
  height: var(--ctl-h); padding: 0 16px; border: none; border-radius: var(--radius-ctl);
  background: var(--orange); color: var(--on-orange); font-size: var(--fs-body); font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: var(--orange-hover); }
.btn-secondary {
  height: var(--ctl-h); padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl); background: var(--surface); color: var(--ink);
  font-size: var(--fs-body); font-weight: 500; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); }
.btn-tertiary { border: none; background: none; color: var(--blue); font-weight: 600; }
.btn-tertiary:hover { background: var(--tint); }
.btn-danger { border: 1px solid var(--red); background: none; color: var(--red); font-weight: 600; }
.btn-danger:hover { background: var(--red-bg); }
.btn[disabled] { background: var(--line-soft); color: var(--ink-3); cursor: not-allowed; }

/* Druck-Feedback (apple-design §1): Antwort im Moment des Drückens, nicht erst
   beim Loslassen. Gleiches Muster wie die Portal-Kacheln. */
.btn-primary, .btn-secondary, .btn-tertiary, .btn-danger, .chip, .tab, .nav-item {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.4, 1),
              background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary:active:not([disabled]), .btn-secondary:active:not([disabled]),
.btn-tertiary:active:not([disabled]), .btn-danger:active:not([disabled]),
.chip:active, .tab:active, .nav-item:active {
  transform: scale(0.97);
  transition-duration: 0.05s;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .btn-secondary:active, .btn-tertiary:active,
  .btn-danger:active, .chip:active, .tab:active, .nav-item:active { transform: none; }
}

/* ---------- Eingaben ---------- */
.input {
  height: var(--ctl-h); padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctl); font-size: var(--fs-body);
  background: var(--surface); color: var(--ink); box-sizing: border-box;
}
.input.error { border-color: var(--red); }
.input[readonly] { border-color: var(--line); background: var(--tint); color: var(--ink-3); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); }

/* ---------- Tabs (Unterstrich, kein Chip) ---------- */
.tabbar { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.tab {
  height: 42px; display: inline-flex; align-items: center; padding: 0 2px;
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--orange); font-weight: 600; border-bottom-color: var(--orange); }

/* ---------- Filterchips (Pill) ---------- */
.chip {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: none; color: var(--ink-2); font-size: 0.84375rem; font-weight: 500; cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip.active { border-color: transparent; background: var(--hl); color: var(--blue); font-weight: 600; }

/* ---------- Badges & Status ---------- */
.badge {
  font-size: 0.8125rem; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill);
}
.badge-info    { background: var(--hl);        color: var(--blue); }
.badge-success { background: var(--green-bg);  color: var(--green); }
.badge-warning { background: var(--amber-bg);  color: var(--amber); }
.badge-error   { background: var(--red-bg);    color: var(--red); }
.badge-neutral { background: var(--line-soft); color: var(--ink-2); }
.badge-count   { background: var(--orange); color: var(--on-orange); font-size: 0.875rem; font-weight: 700; padding: 2px 7px; }

/* ---------- Tabellen ---------- */
/* Scharfkantige Zellen im gerundeten Container (border-radius auf dem Wrapper, overflow:hidden). */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); color: var(--ink); }
.table th {
  text-align: left; padding: 10px 16px; background: var(--thead);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.table td { padding: var(--row-py) 16px; border-bottom: 1px solid var(--line-soft); }
.table tbody tr:hover { background: var(--tint); }
.table .doc-nr { color: var(--blue); font-weight: 600; font-family: var(--mono); font-size: 0.9375rem; }

/* ---------- Meldungen ---------- */
.note {                       /* "Hinweis:"-Box — kein Left-Border-Accent mehr */
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 12px 16px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2);
}
.note strong { color: var(--blue); }
.alert-success { background: var(--green-bg); color: var(--green); border-radius: var(--radius-ctl); padding: 11px 14px; font-weight: 500; }
.alert-warning { background: var(--amber-bg); color: var(--amber); border-radius: var(--radius-ctl); padding: 11px 14px; font-weight: 500; }
.alert-error   { background: var(--red-bg);   color: var(--red);   border-radius: var(--radius-ctl); padding: 11px 14px; font-weight: 500; }