/* Layout und Gestaltung der Anwendung.
 *
 * Basecoat liefert die Komponenten (.btn, .card, .input, .table, .badge,
 * .alert) samt Farbtokens. Die Tailwind-HILFSKLASSEN sind in seinem
 * CDN-Build NICHT enthalten - Tailwind erzeugt die normalerweise erst
 * beim Bauen aus dem gescannten Markup. Statt dafuer einen Build-Schritt
 * einzufuehren, stehen die benoetigten Klassen hier.
 *
 * WICHTIG - eine Falle, die man genau einmal lernt:
 * Tailwind v4 legt saemtliche Regeln in @layer. Nach der CSS-Kaskade
 * schlagen UNGESCHICHTETE Regeln jede geschichtete Regel, unabhaengig von
 * der Spezifitaet. Ein schlichtes  a { color: inherit; }  hier haette also
 * die Knopffarbe aus .btn ueberschrieben - dunkle Schrift auf dunklem
 * Grund. Deshalb steht alles ausdruecklich in einer eigenen Schicht.
 */
@layer theme, base, components, app, utilities;

@layer app {

/* ===================================================================
   Grundlagen
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Betraege und Zahlen IMMER mit gleich breiten Ziffern. Sonst tanzen die
   Nachkommastellen in einer Spalte untereinander und man kann Betraege
   nicht mehr auf einen Blick vergleichen. */
.zahl, td.zahl, th.zahl, .kennzahl, .betrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.klein { font-size: .8125rem; color: var(--color-muted-foreground); line-height: 1.45; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .875em; }
/* NUR Verweise OHNE eigene Klasse erben die Textfarbe.
   Ein blankes  a { color: inherit }  waere hier fatal: diese Schicht steht
   NACH 'components', und nach der Kaskade schlaegt eine spaetere Schicht
   jede fruehere - unabhaengig von der Spezifitaet. Der Elementselektor
   haette also .btn ueberschrieben, und jeder Verweis, der als Knopf
   gestaltet ist, haette dunkle Schrift auf dunklem Grund bekommen.
   Genau das war passiert. */
a:not([class]) { color: inherit; }
a:not([class]) { text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
a:not([class]):hover { text-decoration-color: currentColor; }

/* Verweise in Tabellen und Kacheln sollen die Textfarbe erben, aber ihre
   Knopfgestaltung behalten, wenn sie eine haben. */
table.liste a:not(.btn), .kachel .fuss a:not(.btn), .marke { color: inherit; }

/* ===================================================================
   Geruest: Seitenleiste links, Inhalt rechts
   =================================================================== */
.geruest { display: flex; min-height: 100dvh; }

.seitenleiste {
  width: 15rem; flex: 0 0 15rem;
  border-right: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-muted) 45%, var(--color-background));
  padding: 1.25rem .75rem;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.marke { display: flex; align-items: center; gap: .625rem; padding: 0 .5rem; }
.marke .zeichen {
  width: 1.875rem; height: 1.875rem; flex: 0 0 1.875rem;
  display: grid; place-items: center; border-radius: .5rem;
  background: var(--color-primary); color: var(--color-primary-foreground);
  font-weight: 700; font-size: .875rem;
}
.marke .name { font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.marke .ort { font-size: .6875rem; color: var(--color-muted-foreground); }

.navgruppe { display: flex; flex-direction: column; gap: .125rem; }
.navgruppe > .titel {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--color-muted-foreground);
  padding: .375rem .5rem .25rem;
}
.navgruppe a {
  display: block; padding: .4375rem .5rem; border-radius: .375rem;
  font-size: .875rem; text-decoration: none; color: var(--color-foreground);
  transition: background-color .12s ease;
}
.navgruppe a:hover { background: color-mix(in oklab, var(--color-accent) 70%, transparent); }
.navgruppe a.aktiv {
  background: var(--color-background);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--color-foreground) 8%, transparent);
}

.leisten-fuss { margin-top: auto; padding: 0 .5rem; }

.kopfzeile { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; }
.navbereich { display: flex; flex-direction: column; gap: 1.25rem; }

/* Der Schalter fuer das eingeklappte Menue. Auf breiten Geraeten gibt es
   ihn nicht - dort steht die Navigation immer offen. */
.menuknopf { display: none; }
.menuknopf .balken {
  display: block; width: 1.125rem; height: 2px; border-radius: 2px;
  background: currentColor;
}
.menuknopf .balken + .balken { margin-top: .25rem; }

.inhalt { flex: 1 1 auto; min-width: 0; }
.inhaltsflaeche { padding: 1.75rem 2rem 4rem; max-width: 84rem; }

/* Kopfzeile auf schmalen Geraeten */
.mobilkopf { display: none; }

/* ===================================================================
   Seitenkopf: Titel, Erlaeuterung, Aktionen
   =================================================================== */
.seitenkopf {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: .75rem 1.5rem; margin-bottom: 1.5rem;
}
.seitenkopf h1 {
  margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
}
.seitenkopf .erlaeuterung {
  margin: .3125rem 0 0; font-size: .8125rem; max-width: 62ch;
  color: var(--color-muted-foreground);
}
.seitenkopf .aktionen { margin-left: auto; display: flex; gap: .5rem;
                        align-items: center; flex-wrap: wrap; }

.abschnitt { margin-top: 2rem; }
.abschnitt > h2 {
  margin: 0 0 .75rem; font-size: 1rem; font-weight: 650; letter-spacing: -.01em;
}
.abschnitt > h2 + .klein { margin-top: -.5rem; margin-bottom: .75rem; }

/* ===================================================================
   Kennzahlkacheln: die ZAHL ist der Held, nicht der Knopf
   =================================================================== */
.kacheln { display: grid; gap: .875rem; }
@media (min-width: 62rem) { .kacheln.drei { grid-template-columns: repeat(3, 1fr); }
                            .kacheln.zwei { grid-template-columns: repeat(2, 1fr); } }

.kachel {
  border: 1px solid var(--color-border); border-radius: var(--radius, .625rem);
  background: var(--color-card, var(--color-background));
  padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .125rem;
}
.kachel .marke-zeile {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
  color: var(--color-muted-foreground); text-transform: uppercase;
}
.kachel .wert {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: .25rem;
}
.kachel .wert.klein-wert { font-size: 1.25rem; }
.kachel .nebensatz { font-size: .8125rem; color: var(--color-muted-foreground); }
.kachel .fuss { margin-top: .875rem; }
.kachel .fuss a {
  font-size: .8125rem; font-weight: 500; text-decoration: none;
  color: var(--color-muted-foreground);
}
.kachel .fuss a:hover { color: var(--color-foreground); text-decoration: underline; }

/* Bedeutung durch Farbe - sparsam, nur wo sie etwas aussagt */
.wert.gut     { color: var(--farbe-gut); }
.wert.schlecht{ color: var(--farbe-schlecht); }
.wert.achtung { color: var(--farbe-achtung); }

:root {
  --farbe-gut: oklch(.52 .13 152);
  --farbe-schlecht: oklch(.55 .19 25);
  --farbe-achtung: oklch(.55 .13 75);
}
:root:not([data-thema="hell"]) {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --farbe-gut: oklch(.72 .15 152);
    --farbe-schlecht: oklch(.70 .18 25);
    --farbe-achtung: oklch(.76 .14 80);
  }
}

/* ===================================================================
   Zustandsmarken: gleich aussehende Marken fuer gegenteilige Sachverhalte
   waren der groesste Mangel. Jetzt traegt die Farbe die Bedeutung.
   =================================================================== */
.marke-zustand {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .125rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 550; white-space: nowrap;
  border: 1px solid transparent;
}
.marke-zustand::before {
  content: ""; width: .375rem; height: .375rem; border-radius: 999px;
  background: currentColor; flex: 0 0 auto;
}
.m-entwurf {
  color: var(--color-muted-foreground);
  border-color: var(--color-border);
  background: color-mix(in oklab, var(--color-muted) 50%, transparent);
}
.m-fest {
  color: var(--farbe-gut);
  border-color: color-mix(in oklab, var(--farbe-gut) 28%, transparent);
  background: color-mix(in oklab, var(--farbe-gut) 10%, transparent);
}
.m-storno {
  color: var(--farbe-schlecht);
  border-color: color-mix(in oklab, var(--farbe-schlecht) 28%, transparent);
  background: color-mix(in oklab, var(--farbe-schlecht) 10%, transparent);
}
.m-offen {
  color: var(--farbe-achtung);
  border-color: color-mix(in oklab, var(--farbe-achtung) 30%, transparent);
  background: color-mix(in oklab, var(--farbe-achtung) 12%, transparent);
}
.marke-zustand.ohne-punkt::before { display: none; }

/* ===================================================================
   Tabellen
   =================================================================== */
.tabellenrahmen {
  border: 1px solid var(--color-border); border-radius: var(--radius, .625rem);
  overflow: hidden; background: var(--color-card, var(--color-background));
}
/* Rollt die Tabelle waagerecht, zeigt das aber auch an: ein Schatten am
   rechten Rand, solange noch etwas ausserhalb liegt. Ohne diesen Hinweis
   sieht eine abgeschnittene Spalte wie ein Fehler aus. */
.tabellenrahmen > .rollbar {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--color-card, var(--color-background)) 30%,
                    transparent),
    linear-gradient(to left, var(--color-card, var(--color-background)) 30%,
                    transparent) 100% 0,
    linear-gradient(to right, color-mix(in oklab, var(--color-foreground) 12%, transparent),
                    transparent 12px),
    linear-gradient(to left, color-mix(in oklab, var(--color-foreground) 12%, transparent),
                    transparent 12px) 100% 0;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, .75rem 100%, .75rem 100%;
  background-attachment: local, local, scroll, scroll;
}
table.liste { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.liste thead th {
  text-align: left; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-muted-foreground);
  padding: .625rem .875rem; white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-muted) 35%, var(--color-background));
}
table.liste tbody td {
  padding: .625rem .875rem; border-bottom: 1px solid
    color-mix(in oklab, var(--color-border) 60%, transparent);
  vertical-align: middle;
}
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tbody tr:hover {
  background: color-mix(in oklab, var(--color-muted) 40%, transparent);
}
table.liste tfoot td {
  padding: .75rem .875rem; font-weight: 650;
  border-top: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-muted) 30%, var(--color-background));
}
table.liste .hauptzelle { font-weight: 550; white-space: nowrap; }
/* Belegnummern und Daten duerfen nie umbrechen - eine ueber drei Zeilen
   gebrochene Rechnungsnummer ist unlesbar und macht die Zeilenhoehen
   ungleich. */
table.liste .nichtbrechen, table.liste td.datum, table.liste th.datum
  { white-space: nowrap; }
/* Lange Beschreibungen einzeilig halten und abschneiden, statt die ganze
   Tabelle in die Hoehe zu ziehen. Der volle Text steht im title-Attribut. */
table.liste .gekuerzt {
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
table.liste .leer { padding: 2.5rem 1rem; text-align: center;
                    color: var(--color-muted-foreground); }

/* ===================================================================
   Formulare
   =================================================================== */
.formraster { display: grid; gap: .875rem 1rem; }
@media (min-width: 46rem) { .formraster.zwei { grid-template-columns: repeat(2,1fr); }
                            .formraster.drei { grid-template-columns: repeat(3,1fr); } }
.feld { display: flex; flex-direction: column; gap: .3125rem; min-width: 0; }
.feld > .label { font-size: .8125rem; font-weight: 550; }
.feld > .klein { margin: 0; }
.ganze-zeile { grid-column: 1 / -1; }
.knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ===================================================================
   Meldungen
   =================================================================== */
.meldungen { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.meldung {
  border: 1px solid var(--color-border); border-left-width: 3px;
  border-radius: .5rem; padding: .6875rem .875rem; font-size: .875rem;
}
.meldung.ok    { border-left-color: var(--farbe-gut); }
.meldung.warn  { border-left-color: var(--farbe-achtung); }
.meldung.error { border-left-color: var(--farbe-schlecht);
                 background: color-mix(in oklab, var(--farbe-schlecht) 6%, transparent); }
.meldung ul { margin: .375rem 0 0; padding-left: 1.125rem; }
.meldung li + li { margin-top: .1875rem; }

/* ===================================================================
   Schmale Geraete: Seitenleiste wird zur Kopfzeile
   =================================================================== */
@media (max-width: 61.99rem) {
  .geruest { flex-direction: column; }
  .seitenleiste {
    width: auto; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    border-right: 0; border-bottom: 1px solid var(--color-border);
    flex-direction: column; gap: 0; padding: .625rem .75rem;
    background: var(--color-background);
  }
  .kopfzeile { padding: 0; }
  .marke .ort { display: none; }

  /* Eingeklappt: die Navigation belegt keinen Platz. Sonst fuellte sie auf
     dem Handy den kompletten ersten Bildschirm, und der Inhalt begaenne
     erst darunter. */
  .menuknopf {
    display: grid; place-content: center; margin-left: auto;
    width: 2.25rem; height: 2.25rem; border-radius: .5rem; cursor: pointer;
    border: 1px solid var(--color-border);
  }
  .navbereich { display: none; padding-top: .75rem; gap: .75rem; }
  .menuschalter:checked ~ .navbereich { display: flex; }
  .menuschalter:checked ~ .leisten-fuss { display: block; }
  .leisten-fuss { display: none; margin-top: .75rem; padding: .75rem .5rem 0;
                  border-top: 1px solid var(--color-border); }

  .navgruppe { flex-direction: column; gap: .125rem; }
  .navgruppe > .titel { display: block; }

  .inhaltsflaeche { padding: 1.25rem 1rem 3rem; }
  .seitenkopf h1 { font-size: 1.25rem; }
  .seitenkopf .aktionen { margin-left: 0; width: 100%; }
  .kachel .wert { font-size: 1.5rem; }
}

/* ===================================================================
   Kleinkram
   =================================================================== */
.reihe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.rechts { margin-left: auto; }
.trenner { height: 1px; background: var(--color-border); margin: 1.5rem 0; }
.w-schmal { width: 6rem; } .w-mittel { width: 9rem; } .w-breit { width: 14rem; }

@media print {
  .seitenleiste, .seitenkopf .aktionen, .knopfzeile { display: none !important; }
  .inhaltsflaeche { padding: 0; max-width: none; }
  .tabellenrahmen { border: 0; }
}

}