/* Kapther Fluid — Gestaltung.
 *
 * Uebernommen aus dem Design-System von kapther-guard (base.html, Stand
 * origin/main). Gleiche Token-Namen, gleiche Werte, gleiche Schriften. Ein
 * Kunde, der beide Anwendungen sieht, soll dieselbe Handschrift erkennen.
 *
 * DIE ZENTRALE REGEL (Max, in Guard als DJ9 festgehalten):
 *   "Keine farbigen Hintergrundflaechen. Ampelsystem strikt nur als dezenter
 *    Punkt. Pills, Rahmen und Texte bleiben neutral."
 *
 * Daraus folgt: Banner und Statusflaechen sind grau. Farbe erscheint nur an
 * drei Stellen — als Ampelpunkt, als schmale Markierung am linken Rand, und
 * als Handlungsfarbe auf der Hauptschaltflaeche. Nichts sonst.
 *
 * Farben ausschliesslich ueber Tokens. Ein fester Farbwert in einem Bauteil
 * bricht den Dunkelmodus, und in Guard laeuft dafuer ein eigener Waechter.
 */

:root {
  --background:            oklch(0.99 0 0);
  --foreground:            oklch(0.15 0 0);
  --card:                  oklch(1 0 0);
  --card-foreground:       oklch(0.15 0 0);
  --primary:               oklch(0.65 0.135 50);   /* Kapther-Orange */
  --primary-foreground:    oklch(1 0 0);
  --secondary:             oklch(0.97 0 0);
  --secondary-foreground:  oklch(0.2 0 0);
  --muted:                 oklch(0.97 0 0);
  --muted-foreground:      oklch(0.5 0 0);
  --destructive:           oklch(0.577 0.245 27.325);
  --border:                oklch(0.91 0 0);
  --input:                 oklch(0.91 0 0);
  --ring:                  oklch(0.65 0.135 50);
  --radius:                0.625rem;

  --primary-hover:         oklch(0.57 0.135 50);
  --primary-bg:            color-mix(in oklch, var(--primary) 9%, var(--card));
  --border-soft:           oklch(0.94 0 0);
  --background-subtle:     oklch(0.97 0 0);

  /* Banner: durchweg neutral. */
  --banner-bg:             oklch(0.97 0 0);
  --banner-border:         oklch(0.90 0 0);
  --banner-fg:             oklch(0.35 0 0);

  /* Status: Flaeche und Text neutral, nur -solid traegt Farbe. */
  --status-bg:             oklch(0.97 0 0);
  --status-fg:             oklch(0.35 0 0);
  --status-border:         oklch(0.90 0 0);
  --status-ok-solid:       oklch(0.50 0.15 145);
  --status-warn-solid:     oklch(0.65 0.135 50);
  --status-crit-solid:     oklch(0.55 0.22 27);
  --status-info-solid:     oklch(0.50 0 0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background:           oklch(0.25 0 0);
    --foreground:           oklch(0.93 0 0);
    --card:                 oklch(0.22 0 0);
    --card-foreground:      oklch(0.93 0 0);
    --secondary:            oklch(0.3 0 0);
    --secondary-foreground: oklch(0.93 0 0);
    --muted:                oklch(0.3 0 0);
    --muted-foreground:     oklch(0.65 0 0);
    --destructive:          oklch(0.704 0.191 22.216);
    --border:               oklch(1 0 0 / 12%);
    --input:                oklch(1 0 0 / 14%);
    --border-soft:          oklch(1 0 0 / 8%);
    --background-subtle:    oklch(0.28 0 0);
    --banner-bg:            oklch(0.28 0 0);
    --banner-border:        oklch(1 0 0 / 12%);
    --banner-fg:            oklch(0.80 0 0);
    --status-bg:            oklch(0.28 0 0);
    --status-fg:            oklch(0.80 0 0);
    --status-border:        oklch(1 0 0 / 12%);
    --status-ok-solid:      oklch(0.62 0.15 145);
    --status-crit-solid:    oklch(0.65 0.20 27);
  }
}

/* Kapthers Marken-Schriften: Outfit im Fliesstext, Space Grotesk in den
 * Ueberschriften. So auf kapther.de und so in `kapther-docs/branding/fonts`
 * hinterlegt. Guards Anwendung nutzt im Fliesstext noch Inter; fuer ein
 * Produkt, das beim Kunden steht, gilt die Marke. */
* { box-sizing: border-box; font-family: 'Outfit', system-ui, -apple-system, sans-serif; }
h1, h2, h3, .sg { font-family: 'Space Grotesk', 'Outfit', sans-serif; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 .3rem; text-wrap: balance; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 .7rem; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .4rem; }
p  { margin: 0 0 .7rem; }
a  { color: var(--primary); text-underline-offset: 2px; }

/* ── Kopfleiste ──────────────────────────────────────────────────────── */
.kopfleiste { background: var(--card); border-bottom: 1px solid var(--border); }
.kopfleiste .innen {
  max-width: 1040px; margin: 0 auto; padding: .8rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke { font-family: 'Space Grotesk', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.marke a { color: inherit; text-decoration: none; }
.wer { display: flex; align-items: center; gap: .8rem; font-size: .82rem; color: var(--muted-foreground); }
.wer form { margin: 0; }
.wer button { background: none; border: 0; color: var(--primary); font: inherit;
  font-size: .82rem; cursor: pointer; padding: 0; }

.rahmen { max-width: 1040px; margin: 0 auto; padding: 1.6rem 1.1rem 5rem; }
.unterzeile { color: var(--muted-foreground); margin: 0 0 1.4rem; }

/* ── Flaechen ────────────────────────────────────────────────────────── */
.block {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.reihe { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin-bottom: 1.2rem; }

/* ── Schaltflaechen ──────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .62rem 1.05rem; font: inherit; font-size: .92rem; font-weight: 500;
  background: var(--primary); color: var(--primary-foreground);
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; transition: background .12s ease;
}
.knopf:hover { background: var(--primary-hover); }
.knopf.zweit { background: var(--card); color: var(--foreground); border-color: var(--border); }
.knopf.zweit:hover { background: var(--secondary); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Tabellen ────────────────────────────────────────────────────────── */
.tabelle { overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .68rem .85rem;
  border-bottom: 1px solid var(--border-soft); vertical-align: top; }
th { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground); background: var(--background-subtle); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Status: neutral, Farbe nur als Punkt ────────────────────────────── */
.marker {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .16rem .55rem; border-radius: calc(var(--radius) - .25rem);
  background: var(--status-bg); color: var(--status-fg);
  border: 1px solid var(--status-border);
  font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.marker::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--status-info-solid); flex: none; }
.marker.gut::before     { background: var(--status-ok-solid); }
.marker.achtung::before { background: var(--status-warn-solid); }
.marker.warn::before    { background: var(--status-crit-solid); }
.marker.still::before   { background: var(--border); }

/* ── Banner: neutral, Signal ueber die schmale Kante links ───────────── */
.meldung {
  background: var(--banner-bg); color: var(--banner-fg);
  border: 1px solid var(--banner-border); border-left-width: 3px;
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.1rem;
  font-size: .92rem;
}
.meldung.gut    { border-left-color: var(--status-ok-solid); }
.meldung.warnung{ border-left-color: var(--status-warn-solid); }
.meldung.fehler { border-left-color: var(--status-crit-solid); }

/* ── Formulare ───────────────────────────────────────────────────────── */
label { display: block; font-weight: 500; margin: .95rem 0 .3rem; font-size: .9rem; }
input[type=text], input[type=date], select, textarea {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: 1rem;
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--input); border-radius: var(--radius);
}
textarea { min-height: 5rem; resize: vertical; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.schalter { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; font-weight: 400; }
.schalter input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.schalter label { margin: 0; }
.hinweis { font-size: .82rem; color: var(--muted-foreground); margin-top: .35rem; }
.leer { color: var(--muted-foreground); padding: 1.6rem 0; text-align: center; }

/* Auswahl als Schaltflaechen, fuer Handschuhe gross genug. */
.wahl { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .4rem; }
.wahl label {
  display: flex; align-items: center; gap: .45rem; margin: 0;
  padding: .55rem .85rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); cursor: pointer;
  font-weight: 400; font-size: .92rem;
}
.wahl input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.wahl label:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }

@media (max-width: 640px) { .feldpaar { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── Pruefformular ───────────────────────────────────────────────────── */
.kriterium { padding: .8rem 0; border-bottom: 1px solid var(--border-soft); }
.kriterium:last-child { border-bottom: 0; }
.kriterium label:first-child { margin-top: 0; }
/* Fehlende Pflichtangabe: schmale Kante statt farbiger Flaeche. */
.kriterium.fehlt { border-left: 3px solid var(--status-crit-solid);
  margin: 0 -1.25rem; padding-left: 1.1rem; padding-right: 1.25rem; }
.unterschriftfeld { width: 100%; max-width: 600px; height: 180px;
  background: oklch(1 0 0); border: 1px solid var(--input);
  border-radius: var(--radius); touch-action: none; display: block; }
.klein { font-size: .78rem; color: var(--muted-foreground); }
.pflicht { color: var(--primary); }

/* ── Hauptweg in der Kopfleiste ──────────────────────────────────────── */
.hauptweg { display: flex; gap: 1.1rem; margin-left: 1.6rem; }
.hauptweg a {
  color: var(--muted-foreground); text-decoration: none;
  font-size: .9rem; font-weight: 500; padding: .2rem 0;
  border-bottom: 2px solid transparent;
}
.hauptweg a:hover { color: var(--foreground); border-bottom-color: var(--border); }

/* Kopfzeile einer Karte: Titel links, Status rechts. */
.reihe.zwischen { justify-content: space-between; align-items: center; }

/* ── Kennzahlen: vier Zahlen nebeneinander, ohne Farbfläche ──────────── */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin: 1rem 0 1.2rem;
}
.kennzahl { background: var(--card); padding: 1rem 1.1rem; }
.kennzahl .zahl {
  font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kennzahl .wozu { color: var(--muted-foreground); font-size: .85rem; margin-top: .15rem; }
.kennzahl .klein { margin-top: .35rem; }

/* Ein übernommener Vorschlag, den noch niemand bestätigt hat. Bewusst nur
   eine Kante links, keine Fläche — die Regel gegen farbige Flächen gilt auch
   hier, und der Unterschied muss trotzdem auf einen Blick sichtbar sein. */
input.vorschlag, select.vorschlag {
  border-left: 3px solid var(--status-warn-solid);
}