/* ============================================================================
   Zahlenassistent -- Oberflaeche
   ----------------------------------------------------------------------------
   EINE FARBWELT ("Kontor"): warmes Papier statt kaltem Tech-Weiss, Serifen in
   den Ueberschriften -- Buchhaltung, Papier, Vertrauen. Alle Farb-, Radius- und
   Schrift-Entscheidungen liegen als Variablen im :root. Darunter wird KEINE
   Farbe mehr hart notiert: neue Regeln immer nur mit var(--...), sonst brechen
   sie still, sobald jemand an den Variablen dreht.
   ============================================================================ */

:root {
  /* --- Kontor: warmes Papier statt kaltem Tech-Weiss --- */
  --bg: #F3EDE1;
  --surface: #FFFFFF;
  --surface-alt: #ECE4D5;
  --surface-warm: #FBF6EC;

  --primary: #12514A;          /* Bodensee-Teal: Nav, Buttons */
  --primary-hover: #0C3E38;
  --primary-contrast: #FDFBF6; /* Creme-Text auf dunklen Flaechen */
  --accent: #7C3B54;           /* Beere: NUR das KI-Band */
  --accent-deep: #6A3049;
  --text: #221F1A;
  --muted: #6C655A;

  /* Ampel/Status: reserviert, nie als Chart-Serienfarbe */
  --positive: #2E7D4E;
  --negative: #B0392C;
  --warning: #C08417;

  --hairline: #0000001a;
  --hairline-strong: #00000026;
  --shadow-ai: 0 10px 30px -8px rgba(124, 59, 84, .35);
  --shadow-card: none;
  --shadow-btn: 0 1px 2px rgba(34, 31, 26, .12);
  --radius-card: 6px;
  --radius-input: 4px;
  --radius-ai: 10px;
  --radius-pill: 999px;

  /* Kategoriale Chart-Palette -- feste Reihenfolge, nie rotieren.
     Acht Farben fuer das Kosten-Kreisdiagramm. Mit dem dataviz-Validator
     erarbeitet, JEDES Paar geprueft (nicht nur benachbarte -- im Kreis steht
     jede Farbe gegen jede): alle vier Checks bestanden, schwaechstes Paar
     ΔE 9,5. Das liegt im Floor-Band 8-12 und ist damit nur zulaessig, WEIL das
     Kreisdiagramm eine Legende mit Textlabels und 2px-Trennluecken hat --
     beides bitte nie entfernen. Zum Vergleich: die urspruengliche Palette hatte
     mit Cyan/Magenta ein Paar bei ΔE 5,1, also faktisch dieselbe Farbe.
     Beim Aendern IMMER neu validieren:
     node scripts/validate_palette.js "<hex,...>" --mode light */
  --cat-1: #00A88A;
  --cat-2: #1F5FA8;
  --cat-3: #8A4B24;
  --cat-4: #D96BB8;
  --cat-5: #62914A;
  --cat-6: #A87C1C;
  --cat-7: #5E3D8A;
  --cat-8: #D9573F;
  --cat-1-soft: rgba(0, 168, 138, .10);
  --grid: #00000010;

  --font-heading: "Charter", "Bitstream Charter", "Sitka Text", Georgia,
                  "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --heading-tracking: 0;
  --heading-weight: 700;
  --nav-bg: var(--surface);
  --nav-text: var(--primary);
  --page-glow: none;
}


* { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  background-image: var(--page-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, h2, h3 {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking); margin: 0 0 .3rem;
}
h1 { font-size: 1.6rem; margin-bottom: 1.2rem; }
h2 { font-size: 1.25rem; margin-top: 0; }
h3 { font-size: 1rem; }

.kicker {
  display: block; font-family: var(--font-body); font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin-bottom: .25rem;
}

/* Euro-Betraege immer gleichbreite Ziffern -- saubere Spaltenflucht */
.hero-value, .kpi-value, td.num, th.num, .money, .stat-value {
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Navigation --- */
nav {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  padding: .8rem 1.2rem; background: var(--nav-bg);
  border-bottom: 1px solid var(--hairline-strong);
}
nav strong {
  font-family: var(--font-heading); font-size: 1.15rem;
  letter-spacing: var(--heading-tracking);
}
nav a {
  color: var(--nav-text); text-decoration: none; font-weight: 500;
  padding: .25rem .1rem; border-bottom: 2px solid transparent;
}
nav a:hover { border-bottom-color: var(--hairline-strong); }
/* Aktive Seite markieren. Ohne das weiss man beim Navigieren nie, wo man ist --
   das war kein Schoenheitsfehler, sondern fehlende Orientierung. */
nav a[aria-current="page"] {
  border-bottom-color: var(--primary); font-weight: 700;
}
nav .nav-spacer { flex: 1; }

/* Zweite Zeile: die Seiten der aktiven Gruppe. Ruhiger als die Hauptzeile --
   sie ordnet unter, sie konkurriert nicht. Bewusst kein Aufklapp-Menü: ein
   Dropdown versteckt genau das, was gesucht wird, und braucht JavaScript für
   etwas, das eine zweite Zeile umsonst kann. */
nav.subnav {
  gap: 1.1rem; padding: .5rem 1.2rem; background: var(--surface-warm);
  border-bottom: 1px solid var(--hairline);
}
nav.subnav a { font-size: .92rem; font-weight: 400; color: var(--muted); }
nav.subnav a[aria-current="page"] { color: var(--text); font-weight: 600; }

main { padding: 1.5rem 1rem 3rem; max-width: 1180px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   SEITEN-GERUEST. Jede Seite: page-head (Titel + ein Satz Einordnung), danach
   Inhalt in .panel-Karten. Vorher hatte jede Seite ihren eigenen Aufbau --
   das Dashboard mit Karten, die spaeteren Seiten als rohe Stapel aus
   Ueberschrift und Tabelle. Genau das liess die Software unfertig wirken.
   --------------------------------------------------------------------------- */
.page-head { margin-bottom: 1.3rem; }
.page-head h1 { margin-bottom: .3rem; }
.page-head .lead { margin: 0; }
.page-head + .seg-row { margin-top: -.4rem; }

/* Karten stehen selbststaendig (ausserhalb von .chart-grid) mit festem Rhythmus */
main > .panel, main > form.panel { margin-bottom: 1rem; }
.panel > h2:first-child, .panel > .section-head:first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
/* Tabelle als letztes Element einer Karte: bis an den Rand, ohne Doppel-Polster */
.panel > .table-scroll:last-child { margin: .4rem -1rem -1rem; }
.panel > .table-scroll:last-child table { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* Leerzustand: sagt, was zu tun ist -- statt nur "keine Daten" */
.empty {
  text-align: center; padding: 2rem 1rem; color: var(--muted);
  border: 1px dashed var(--hairline-strong); border-radius: var(--radius-card);
  background: var(--surface-warm);
}
.empty strong { display: block; color: var(--text); margin-bottom: .3rem; }
.empty a { color: var(--primary); }

/* --- Monatswechsler: Pfeile inline in der Ueberschrift --- */
.month-head a {
  color: var(--primary); text-decoration: none; padding: 0 .3rem;
}
.month-head a:hover { text-decoration: underline; }
.month-head .badge { vertical-align: middle; margin-left: .4rem; }

/* --- Masthead: Gewinn-Hero + KPI-Kacheln --- */
.masthead { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.hero {
  grid-column: span 5; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 1.4rem; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.hero-value { font-family: var(--font-heading); font-size: 2.9rem; line-height: 1.1; letter-spacing: var(--heading-tracking); }
.hero-context { color: var(--muted); font-size: .85rem; margin-top: .4rem; }
.hero-spark { margin-top: auto; padding-top: .9rem; }

.kpis { grid-column: span 7; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.kpi-tile {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: .9rem 1rem; box-shadow: var(--shadow-card);
}
.kpi-label { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.kpi-value { font-size: 1.35rem; font-weight: 700; }
.kpi-tile small { color: var(--muted); }

/* Delta-Chip: Vergleich zum Vormonat, Richtung nicht nur als Farbe (Pfeil dazu) */
.delta { font-size: .8rem; font-weight: 600; white-space: nowrap; }
.delta.up { color: var(--positive); }
.delta.down { color: var(--negative); }
.delta.flat { color: var(--muted); }

.pos { color: var(--positive); }
.neg { color: var(--negative); }

.ampel { display: inline-block; width: .85em; height: .85em; border-radius: 50%; margin-right: .4em; vertical-align: middle; }
.ampel.green { background: var(--positive); }
.ampel.yellow { background: var(--warning); }
.ampel.red { background: var(--negative); }
.ampel.none { background: var(--hairline-strong); }

/* --- KI-Band: das eine dunkle, schwebende Element der Seite --- */
.ai-band {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--primary-contrast); border-radius: var(--radius-ai);
  box-shadow: var(--shadow-ai); padding: 2rem; margin-bottom: 1.4rem;
}
.ai-badge {
  display: inline-block; font-family: var(--font-body); font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  background: rgba(255, 255, 255, .14); padding: .3rem .7rem; border-radius: var(--radius-pill);
  margin-bottom: .8rem;
}
.ai-band h2 { color: var(--primary-contrast); font-size: 1.8rem; margin-top: 0; }
.ai-subline { color: rgba(255, 255, 255, .8); margin-bottom: 1.1rem; }
.ai-band form { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .8rem; }
.ai-band input[type="text"] {
  flex: 1 1 420px; background: var(--surface); color: var(--text); border: 0;
  border-radius: var(--radius-input); padding: .8rem 1rem; font-size: 1.05rem;
}
.ai-band > form button {
  background: var(--primary); color: var(--primary-contrast); border: 0;
  border-radius: var(--radius-input); padding: .8rem 1.3rem; font-weight: 600; cursor: pointer;
}
.ai-band > form button:hover { background: var(--primary-hover); }
.ai-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.chip {
  background: transparent; color: var(--primary-contrast);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-pill);
  padding: .4rem .9rem; font-size: .85rem; cursor: pointer; font-family: var(--font-body);
}
.chip:hover { background: rgba(255, 255, 255, .12); }
.ai-answer {
  background: rgba(255, 255, 255, .1); border-radius: var(--radius-input);
  padding: .9rem 1.1rem; margin-top: .6rem; font-family: var(--font-heading);
  white-space: pre-line;
}
.ai-answer strong { display: block; margin-bottom: .3rem; font-family: var(--font-body); }
.ai-trust { font-size: .78rem; color: rgba(255, 255, 255, .65); margin-top: .8rem; margin-bottom: 0; }

/* --- Fortschritt: ehrlich unterscheiden --------------------------------------
   .bar.indeterminate  -> Dauer unbekannt (KI denkt). Laeuft endlos durch und
                          behauptet NICHT, bei 80 % zu stehen.
   .bar > .bar-fill[style=width] -> echter Anteil (X von N Belegen fertig).
   Ein Fake-Prozentbalken bei einer KI-Anfrage waere gelogen -- deshalb zwei
   getrennte Varianten statt einer huebschen Luege.                            */
.bar {
  position: relative; height: 6px; border-radius: var(--radius-pill);
  background: var(--hairline-strong); overflow: hidden; width: 100%;
}
.bar-fill {
  height: 100%; background: var(--primary); border-radius: inherit;
  transition: width .35s ease;
}
.bar.on-dark { background: rgba(255, 255, 255, .25); }
.bar.on-dark .bar-fill { background: var(--primary-contrast); }
.bar.indeterminate .bar-fill {
  width: 40%; animation: bar-slide 1.15s ease-in-out infinite;
}
@keyframes bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
/* Wer "keine Bewegung" eingestellt hat, bekommt einen ruhigen Balken statt
   Dauerbewegung -- der Zustand bleibt trotzdem sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .bar.indeterminate .bar-fill { animation: none; width: 100%; opacity: .55; }
  .bar-fill { transition: none; }
}
.progress-note {
  display: flex; align-items: center; gap: .6rem; font-size: .85rem;
  color: var(--muted); margin-top: .5rem;
}
.progress-note .bar { flex: 1; }
.ai-band .progress-note { color: rgba(255, 255, 255, .85); }
[hidden] { display: none !important; }

/* Mehrere kleine Aktions-Buttons in einer Tabellenzelle (Dauerbuchungen u.a.) */
td.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }
td.row-actions form { display: inline; margin: 0; }

/* Einleitungs-/Nebentext, wiederverwendbar (Kasse-Seite u.a.) */
.lead { color: var(--muted); max-width: 62ch; margin: .3rem 0 1.2rem; }
p.muted, td.muted, .muted { color: var(--muted); }
.alert-ok { background: var(--surface-warm); border-left: 4px solid var(--positive); padding: .7rem 1rem; margin: .5rem 0; border-radius: 0 var(--radius-input) var(--radius-input) 0; }

/* --- Handlungsbedarf: Verlustquellen / Plan / Radar --- */
.alert-loss { background: var(--surface-warm); border-left: 4px solid var(--warning); padding: .7rem 1rem; margin: .5rem 0; border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.radar { background: var(--surface-warm); border-left: 4px solid var(--primary); padding: .7rem 1rem; margin: .5rem 0; border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.warn { background: var(--surface-warm); border-left: 4px solid var(--warning); padding: .6rem 1rem; margin: .4rem 0; border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.radar form { display: inline; }
.radar button, .btn-quiet {
  background: transparent; color: var(--primary); border: 1px solid var(--hairline-strong);
  padding: .3rem .7rem; font-size: .85rem; font-weight: 600;
  box-shadow: none; min-height: 0;
}
.radar button:hover, .btn-quiet:hover { border-color: var(--primary); background: var(--surface); }

/* Vertrags-Radar: Rueckfragen, keine Alarme -- deshalb einklappbar und
   zurueckhaltender als die Verlustquellen darueber. */
.radar-group > summary {
  cursor: pointer; padding: .7rem 1rem; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  list-style: none;
}
.radar-group > summary::-webkit-details-marker { display: none; }
.radar-group > summary::before {
  content: "▸"; display: inline-block; margin-right: .5rem; color: var(--muted);
}
.radar-group[open] > summary::before { content: "▾"; }
.radar-group[open] > summary { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.radar-group > summary .kicker { display: inline; margin-right: .5rem; }
.radar-list { border: 1px solid var(--hairline); border-top: 0; padding: .4rem .6rem; }
.radar-list .radar {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; background: transparent; border-left: 0;
  border-bottom: 1px solid var(--hairline); border-radius: 0;
  margin: 0; padding: .5rem .4rem;
}
.radar-list .radar:last-child { border-bottom: 0; }
.radar-actions { display: flex; gap: .4rem; }

/* --- Sektionen: klare Zonen statt loser Bloecke --- */
.section { margin: 1.8rem 0 0; }
.section-head {
  display: flex; align-items: baseline; gap: .75rem; margin-bottom: .7rem;
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head .hint { color: var(--muted); font-size: .85rem; }

/* --- Chart-Raster ------------------------------------------------------------
   Charts liegen in einer Box mit FESTER Hoehe. Chart.js bekommt sonst vom
   Grid keine aufloesbare Hoehe und rechnet sich per Aspect-Ratio klein --
   genau der "abgeschnitten"-Effekt. Deshalb: feste Hoehe + maintainAspectRatio:
   false im JS. Beides gehoert zusammen.                                        */
.chart-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 1rem; box-shadow: var(--shadow-card);
  min-width: 0;   /* sonst sprengt ein breites Canvas die Grid-Spalte */
}
.panel h3 { margin-bottom: .15rem; }
.panel .hint { color: var(--muted); font-size: .8rem; margin: 0 0 .7rem; }
.span-12 { grid-column: span 12; }
.span-8  { grid-column: span 8; }
.span-7  { grid-column: span 7; }
.span-6  { grid-column: span 6; }
.span-5  { grid-column: span 5; }
.span-4  { grid-column: span 4; }

.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.chart-box.short { height: 150px; }
/* Der Gewinnverlauf im Hero traegt jetzt die Erklaerung, die vorher als
   Fliesstext darunter stand -- deshalb ordentlich Hoehe statt Sparkline-Streifen. */
.chart-box.hero-chart { height: 128px; }

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; }
  .hero, .kpis { grid-column: 1 / -1; }
  .chart-grid > [class*="span-"] { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr; }
  nav { font-size: .9rem; }
  .hero-value { font-size: 2.2rem; }
  .chart-box { height: 210px; }
}

/* --- Tabellen --- */
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .55rem .5rem; border-bottom: 1px solid var(--hairline); text-align: left; }
th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* Zwei Umschalter nebeneinander (Zeitraum + Gliederung), auf Mobil untereinander */
.seg-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.seg-row .seg { margin-bottom: 1.2rem; }

/* Segment-Umschalter (Monat / Jahr) auf der Auswertung */
.seg { display: inline-flex; margin: .2rem 0 1.2rem; border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-input); overflow: hidden; }
.seg a { padding: .4rem .95rem; font-size: .88rem; color: var(--muted); text-decoration: none; }
.seg a + a { border-left: 1px solid var(--hairline-strong); }
.seg a.on { background: var(--primary); color: #fff; }
.seg a:not(.on):hover { background: var(--surface-warm); }

/* KPI-Dreifachzeile: Vorjahr + Plan unter dem Ist-Wert */
.triple { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem;
  font-size: .85rem; color: var(--muted); }

/* BWA-Tabelle: Strukturzeilen hervorheben, Unterposten (Drilldown) einruecken */
.bwa-revenue td, .bwa-rohertrag td, .bwa-gesamtkosten td,
.bwa-betriebsergebnis td, .bwa-ergebnis td { font-weight: 700; }
.bwa-rohertrag td, .bwa-betriebsergebnis td { border-top: 1px solid var(--hairline-strong); }
.bwa-ergebnis td { border-top: 2px solid var(--hairline-strong); font-size: 1.02rem; }
.bwa-sub td { color: var(--muted); font-size: .88rem; border-bottom: 0; padding-top: .2rem; padding-bottom: .2rem; }
.bwa-info td { font-style: italic; }
td.indent { padding-left: 1.7rem; }

/* --- Auffaelligkeiten -------------------------------------------------------
   Rot/Gelb markiert IMMER ein Regelwerk, nie die KI (siehe services/anomalies).
   Deshalb steht neben jeder Faerbung auch ein Wort: die Aussage darf nie an der
   Farbe allein haengen -- weder bei Farbfehlsichtigkeit noch im Ausdruck. */
tr.warn-rot td:first-child { box-shadow: inset 3px 0 0 var(--negative); }
tr.warn-gelb td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
tr.warn-rot td, tr.warn-gelb td { background: var(--surface-warm); }

.rowflag {
  display: inline-block; margin-left: .45rem; padding: .05rem .4rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--radius-input); vertical-align: middle; white-space: nowrap;
}
.rowflag-rot { background: color-mix(in srgb, var(--negative) 14%, transparent);
  color: var(--negative); }
.rowflag-gelb { background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: #8a5e07; }

.warnpanel .warnlist { list-style: none; margin: 0; padding: 0; }
.warnpanel .warnlist > li {
  border-left: 4px solid var(--warning); background: var(--surface-warm);
  padding: .7rem .9rem; margin: .5rem 0;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.warnpanel .warnlist > li.warn-rot { border-left-color: var(--negative); }
/* Gewinner-Zeile im Umsatz-Drilldown: dieselbe Karte, gruen statt gelb. */
.mover-list > li.warn-gruen { border-left-color: var(--positive); }
.mover-list > li { border-left: 4px solid var(--warning); background: var(--surface-warm);
  padding: .7rem .9rem; margin: .5rem 0;
  border-radius: 0 var(--radius-input) var(--radius-input) 0; }
.mover-list { list-style: none; margin: 0; padding: 0; }
/* Schlichte Aufzaehlung ohne Punkte -- z.B. die Artikel, die im selben
   Zeitraum zugelegt haben. */
/* Nur fuer Screenreader: Beschriftungen, die visuell aus dem Zusammenhang der
   Tabellenzeile hervorgehen, aber vorgelesen fehlen wuerden. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.plain { list-style: none; margin: .3rem 0 0; padding: 0; }
.plain li { padding: .25rem 0; border-bottom: 1px solid var(--hairline); }
.plain li:last-child { border-bottom: 0; }
.mover-list .warn-head { display: flex; gap: .5rem; align-items: baseline;
  flex-wrap: wrap; }
.warn-head { line-height: 1.45; }
.warn-head .rowflag { margin-left: 0; margin-right: .5rem; }
.warn-detail { margin: .35rem 0 0; color: var(--muted); font-size: .92rem; }
/* Der KI-Satz hebt sich bewusst ab: er ist Einordnung, nicht Befund. */
.ki-satz { margin: .45rem 0 0; font-size: .92rem; font-style: italic;
  padding-left: .7rem; border-left: 2px solid var(--hairline-strong); }
.warnpanel .warnlist .drill { display: inline-block; margin-top: .5rem;
  font-size: .88rem; }

/* Sortierbare Tabelle (Kalkulation): Kopf klickbar, aktive Spalte hervorgehoben */
table.sortable th[data-key] { user-select: none; cursor: pointer; }
table.sortable th.sort-active { color: var(--text); }

/* Gericht-Formular: Felder nebeneinander statt untereinander -- vier kurze
   Eingaben sind eine Zeile, kein Fragebogen. */
/* Gleiche Ausrichtungs-Regel wie bei .field-row: gleich hohe Zellen, Feld
   unten -- sonst verschiebt eine zweizeilige Beschriftung ihr Eingabefeld
   gegen die Nachbarn. */
.dish-form { display: flex; flex-wrap: wrap; gap: .8rem .9rem; align-items: stretch; }
.dish-form label {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  margin: 0; flex: 1 1 12rem;
}
.dish-form input, .dish-form select { width: 100%; }
.dish-form button { flex: 0 0 auto; align-self: flex-end; }

/* Legende der Renner/Penner-Matrix. Das aktuelle Gericht ist hervorgehoben --
   Farbe allein traegt die Aussage nie, der Text steht daneben (dataviz-Regel). */
.quad-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .6rem; margin-top: .9rem; }
.quad-item { padding: .55rem .7rem; border: 1px solid var(--hairline);
  border-radius: var(--radius-input); background: var(--surface); }
.quad-item.on { border-color: var(--primary); background: var(--surface-warm); }
.quad-item small { display: block; color: var(--muted); margin-top: .15rem; }
.dot.quad-renner { background: var(--cat-1); }
.dot.quad-arbeitspferd { background: var(--cat-6); }
.dot.quad-chance { background: var(--cat-2); }
.dot.quad-ladenhueter { background: var(--muted); }

/* Drilldown: die BWA-Zeile ist anklickbar. Zurueckhaltend gestaltet -- die
   Tabelle soll ruhig bleiben, der Hinweis kommt beim Darueberfahren. */
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--hairline-strong); }
a.drill:hover { color: var(--primary); border-bottom-color: var(--primary); }
.crumb { margin: 0 0 .6rem; font-size: .9rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--primary); }

/* Aufklappzeile unter einer Tabellenzeile (abweichende Monatsbetraege). Ruhig
   halten: gedaempfter Hintergrund, kein zweiter Rahmen um die innere Tabelle. */
tr.sub-row > td { background: var(--surface-alt, var(--surface-warm)); padding: .3rem .5rem .6rem; }
tr.sub-row summary { cursor: pointer; font-size: .85rem; color: var(--muted); padding: .25rem 0; }
tr.sub-row table { background: transparent; margin-top: .4rem; }
tr.sub-row .dish-form { margin-top: .5rem; }

/* Als Button gestalteter Link (z.B. "Bearbeiten" in Tabellenzeilen) */
a.btn-quiet {
  display: inline-flex; align-items: center; text-decoration: none;
  border-radius: var(--radius-input); white-space: nowrap;
}

/* Der Farbpunkt neben einem Label: Identitaet nie nur ueber Farbe, immer mit
   Text daneben (dataviz-Regel). */
.dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; }

/* Plan-Treffer-Ampel auf der Ist-Spalte. Getoente Flaeche statt bunter Schrift:
   eingefaerbte Zahlen lesen sich schlecht und kollidieren mit der
   Abweichungsspalte daneben. Die Farbe ist Beiwerk -- die Aussage steht als
   Prozentwert direkt daneben, damit sie nie an der Farbe allein haengt. */
td.hit-green { background: color-mix(in srgb, var(--positive) 14%, transparent); }
td.hit-red   { background: color-mix(in srgb, var(--negative) 14%, transparent); }
td.hit-amber { background: color-mix(in srgb, var(--warning) 18%, transparent); }
td.hit-green, td.hit-red, td.hit-amber { font-weight: 600; }

/* --- Formulare -------------------------------------------------------------
   Gestaltete Controls statt Browser-Rohzustand. Labels bleiben bewusst
   Fliess-Layout (Text + Feld inline) -- einige Formulare sind ganze Saetze
   ("Alarm, wenn mehr als [x] % unter Plan ..."), ein starres Grid wuerde die
   zerreissen. */
form label { display: block; margin: .8rem 0; color: var(--muted); font-size: .92rem; }
form label small { color: var(--muted); }

input, select, textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-input); padding: .5rem .7rem; min-height: 2.4rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input::placeholder { color: var(--muted); opacity: .7; }

/* Select: eigener Chevron statt des Browser-Pfeils. Neutralgrau, damit er in
   beiden Themes funktioniert (data-URIs koennen keine CSS-Variablen lesen). */
select {
  appearance: none; padding-right: 2.1rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E7480' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
}

input[type="checkbox"], input[type="radio"] {
  min-height: 0; width: 1.05rem; height: 1.05rem;
  accent-color: var(--primary); vertical-align: -2px;
}

/* Checkbox-Label als saubere Zeile: Kaestchen und Text nebeneinander. */
form label.check { display: flex; align-items: center; gap: .5rem; cursor: pointer;
  color: var(--text); }

/* Formularfelder nebeneinander statt als endlose Spalte. Vier kurze Eingaben
   sind eine Zeile, kein Fragebogen -- genau das liess die Formulare vorher wie
   rohes HTML aussehen. */
/* Feldreihe. align-items war frueher flex-end -- damit rutschte JEDES Feld,
   dessen Beschriftung eine Zeile laenger war oder einen Hinweis trug, gegen die
   anderen. Genau das sah "versetzt" und "aneinandergeklebt" aus.
   Jetzt: gleich hohe Zellen (stretch), und in jeder Zelle sitzt das Eingabefeld
   UNTEN. Dadurch fluchten alle Felder, egal wie lang die Beschriftung ist. */
.field-row { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: stretch; }
.field-row label {
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  margin: .4rem 0; flex: 1 1 13rem;
}
/* Feste Hoehe fuer alle Eingaben einer Reihe: ein <input type="date"> ist von
   sich aus 2 px hoeher als ein Textfeld, und genau das sieht man in einer
   Reihe nebeneinander. */
.field-row input, .field-row select,
.dish-form input, .dish-form select { width: 100%; height: 2.6rem; }
/* Hinweise gehoeren UNTER die Reihe, nicht in ein einzelnes Feld -- sonst
   bestimmt der laengste Hinweis die Hoehe genau einer Zelle. */
.field-hint { margin: .4rem 0 0; color: var(--muted); font-size: .82rem; }
/* Abstand zwischen Feldern und dem, was darunter kommt. Ohne das kleben
   Knoepfe direkt an den Eingabefeldern. */
.field-row + button, .field-row + .btn-row, .field-hint + button,
form > button, form > .btn-row { margin-top: 1.1rem; }
form h3 { margin: 1.3rem 0 .2rem; }
form .hint { color: var(--muted); font-size: .85rem; margin: 0 0 .4rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.btn-row form { display: inline; margin: 0; }

button {
  font-family: var(--font-body); font-size: 1rem; min-height: 2.4rem;
  background: var(--primary); color: var(--primary-contrast); border: 0;
  border-radius: var(--radius-input); padding: .55rem 1.2rem; cursor: pointer;
  font-weight: 600; box-shadow: var(--shadow-btn);
  transition: background .12s ease, transform .05s ease;
}
button:hover { background: var(--primary-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: default; transform: none; }
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.btn-block { width: 100%; margin-top: .6rem; }

/* --- Belegsuche --- */
.search-band { margin: 1rem 0 1.4rem; }
.search-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.search-form input[type="search"] { flex: 1 1 340px; }
.search-form button { white-space: nowrap; }
.search-explain { color: var(--muted); margin: .2rem 0 1rem; }
.match-chip {
  display: inline-block; background: var(--surface-warm);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-pill);
  padding: .15rem .6rem; font-size: .82rem; margin: .1rem .2rem .1rem 0;
}

/* --- Login: zentrierte Karte statt nackter Seite --- */
.auth-wrap { max-width: 400px; margin: 9vh auto 0; }
.auth-card { padding: 2rem; }
.auth-brand {
  font-family: var(--font-heading); font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking); font-size: 1.5rem;
  margin-bottom: 1rem;
}
.auth-card input { width: 100%; }

.error { color: var(--negative); }
.field-uncertain { background: var(--surface-warm); box-shadow: inset 0 0 0 2px var(--warning); }

/* --- Theme-Auswahl in den Einstellungen --- */
/* Der Radiopunkt bleibt SICHTBAR. Versteckt (opacity:0) war ueberhaupt nicht
   erkennbar, was gerade ausgewaehlt ist -- die Auswahl las sich wie "der Knopf
   macht nichts". Die :has()-Markierung kommt obendrauf, nicht statt dessen:
   aeltere Browser kennen :has() nicht, der Radiopunkt zeigt es trotzdem. */
.swatches { display: flex; gap: .3rem; }
.swatch { width: 1.6rem; height: 1.6rem; border-radius: 4px; border: 1px solid var(--hairline); }

/* --- Upload: Mehrfachauswahl --- */
.dropzone {
  border: 2px dashed var(--hairline-strong); border-radius: var(--radius-card);
  padding: 1.6rem; text-align: center; background: var(--surface); margin: .6rem 0;
}
.dropzone.hot { border-color: var(--primary); background: var(--surface-warm); }
.dropzone input[type="file"] { display: block; margin: .8rem auto 0; }
.file-list { list-style: none; padding: 0; margin: .8rem 0 0; }
.file-list li {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  border: 1px solid var(--hairline); border-radius: var(--radius-input);
  margin-bottom: .35rem; font-size: .9rem; background: var(--surface);
}
.file-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { color: var(--muted); font-size: .8rem; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--radius-pill);
  background: var(--surface-alt); color: var(--muted);
}
.badge.ok { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
.badge.bad { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); }
.badge.wait { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }

/* Loeschen steht am Seitenende und abgesetzt: es ist erreichbar, aber nichts,
   worauf man versehentlich klickt. */
.doc-danger { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }

/* Beleg-Fusszeile: bearbeiten und loeschen nebeneinander, abgesetzt vom Inhalt. */
.doc-danger { display: flex; gap: .6rem; align-items: center; margin-top: 2rem;
  padding-top: 1rem; border-top: 1px solid var(--hairline); }
.doc-danger form { margin: 0; }
/* Zahlenfelder in der Positions-Tabelle: schmal, damit die Tabelle nicht
   auseinanderlaeuft. */
.num-input { width: 6.5rem; text-align: right; }
.unit-input { width: 4.5rem; }

/* Betreiberbereich (eigene Anwendung, eigene Vorlagen -- deshalb hier nur der
   Kopf; alles andere erbt die vorhandenen Regeln). */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hairline-strong);
}