/* ERZEUGT AUS frontend_build/pmf_palette.json - NICHT VON HAND AENDERN.
 * Wer einen Wert braucht, den es nicht gibt, ergaenzt ihn dort mit Namen
 * und einem Satz, wofuer er da ist, und baut neu:
 *     python scripts/a1047_palette_bauen.py
 * Fassung 4, Stand 2026-09-29 (A.1047 Teil 1).
 */

:root {
  /* farben */
  --pmf-papier:                #fafaf7;   /* Der Hintergrund der Seite. Ruhiger als reines Weiß, damit die Flächen darauf stehen. */
  --pmf-flaeche:               #ffffff;   /* Eine Fläche, auf der etwas steht: Karte, Tabelle, Eingabefeld. */
  --pmf-flaeche-still:         #fbfbfa;   /* Eine Fläche, die zurücktritt: Vorrat, Leiste, Beispielkasten. */
  --pmf-flaeche-betont:        #f2f2f0;   /* Tabellenkopf und Zeilenstreifen — betont ohne Farbe. */
  --pmf-linie:                 #d4d4d0;   /* Die gewöhnliche Trennlinie: Rahmen, Tabellengitter. */
  --pmf-linie-zart:            #ececea;   /* Eine Linie, die nur ordnet und nicht trennt. */
  --pmf-text:                  #1b1b1b;   /* Der gewöhnliche Text. */
  --pmf-text-still:            #6b6b6b;   /* Beschriftung, Einheit, Erläuterung neben der Zahl. */
  --pmf-text-leise:            #9a9a96;   /* Was da ist, aber nicht gelesen werden muss: Nummern, Platzhalter. */
  --pmf-akzent:                #4a7ca8;   /* Was anklickbar ist: Verweis, Knopf, gewähltes Feld. */
  --pmf-akzent-dunkel:         #2e5278;   /* Derselbe Akzent unter dem Zeiger oder gedrückt. */
  --pmf-gut-flaeche:           #e3f0dc;   /* Zustand gut — Fläche (belegt, grün, bestätigt). */
  --pmf-gut-text:              #24502a;   /* Zustand gut — Text darauf. */
  --pmf-gut-linie:             #a8c79c;   /* Zustand gut — Rahmen. */
  --pmf-warn-flaeche:          #fbf0dd;   /* Zustand Warnung — Fläche (fachlich sinnlos, Hinweis, Bedingung). */
  --pmf-warn-text:             #6b5a34;   /* Zustand Warnung — Text darauf. */
  --pmf-warn-linie:            #d9c48a;   /* Zustand Warnung — Rahmen. */
  --pmf-schlecht-flaeche:      #f5eceb;   /* Zustand schlecht — Fläche (widerlegt, abgewiesen, technisch unmöglich). */
  --pmf-schlecht-text:         #8f332c;   /* Zustand schlecht — Text darauf. Auch die Schrift einer Fundstelle. */
  --pmf-schlecht-linie:        #d9b3ae;   /* Zustand schlecht — Rahmen. */
  --pmf-ruhig-flaeche:         #eaf0f6;   /* Zustand ohne Urteil — Fläche (nie geprüft, offen, neutral). */
  --pmf-ruhig-text:            #25405c;   /* Zustand ohne Urteil — Text darauf. */
  --pmf-ruhig-linie:           #b6c7d8;   /* Zustand ohne Urteil — Rahmen. */
  --pmf-herkunft-flaeche:      #f0eef5;   /* Herkunft — Fläche. Kennzeichnet, was aus einer fremden Quelle kam (A.1044). */
  --pmf-herkunft-text:         #4f4868;   /* Herkunft — Text darauf. */
  --pmf-herkunft-linie:        #cdc6dd;   /* Herkunft — Rahmen und Zitatstrich. */
  --pmf-beobachtet-flaeche:    #eef3e0;   /* Zustand beobachtet — Fläche. Eigener Zustand neben „gut“: gemessen und im Blick, aber nicht belegt. */
  --pmf-beobachtet-text:       #4d5a1f;   /* Zustand beobachtet — Text darauf. */
  --pmf-schleier:              rgba(0, 0, 0, 0.4);   /* Der Schleier über der Seite, solange ein Fenster darüber liegt — die einzige halbdurchsichtige Farbe der Oberfläche. */
  /* abstaende */
  --pmf-abstand-null:          0;   /* Kein Abstand — ausdrücklich gesetzt, nicht vergessen. */
  --pmf-abstand-hauch:         1px;   /* Der kleinste sichtbare Abstand — innen in einer Marke, die in einer Zeile mitläuft, und dort, wo null zu eng wäre. */
  --pmf-abstand-winzig:        2px;   /* Zwischen zwei Zeilen, die zusammengehören. */
  --pmf-abstand-eng:           4px;   /* Innen in einer Marke, einem Kästchen, einer kleinen Zelle. */
  --pmf-abstand-knapp:         6px;   /* Zwischen Beschriftung und Feld. */
  --pmf-abstand-normal:        8px;   /* Der gewöhnliche Abstand: innen in einer Zelle, zwischen zwei Gliedern. */
  --pmf-abstand-weit:          12px;   /* Zwischen zwei Gruppen innerhalb einer Karte. */
  --pmf-abstand-luftig:        16px;   /* Innen in einer Karte, zwischen zwei Karten. */
  --pmf-abstand-sehr-weit:     24px;   /* Zwischen zwei Abschnitten einer Seite. */
  /* schriftgroessen */
  --pmf-schrift-winzig:        10px;   /* Herkunft, Nummer, Randvermerk — das Kleinste, das noch lesbar ist. */
  --pmf-schrift-klein:         11px;   /* Beschriftung, Einheit, Erläuterung neben der Zahl. */
  --pmf-schrift-normal:        12px;   /* Der gewöhnliche Text der Arbeitsflächen. */
  --pmf-schrift-gross:         13px;   /* Hervorgehobene Zeile und Tabellenkopf. */
  --pmf-schrift-kopf:          15px;   /* Die Überschrift einer Karte. */
  --pmf-schrift-titel:         18px;   /* Die Überschrift einer Seite. */
  --pmf-schrift-kennzahl:      20px;   /* Die große Zahl auf einer Kachel. */
  /* zeilenhoehen */
  --pmf-zeile-eng:             1.25;   /* Tabellen und Marken — eine Zeile je Zeile. */
  --pmf-zeile-normal:          1.45;   /* Fließtext auf einer Arbeitsfläche, damit er lesbar bleibt. */
  /* radien */
  --pmf-radius-keiner:         0;   /* Tabelle, Karte, Feld — die Fläche bleibt eckig. */
  --pmf-radius-klein:          2px;   /* Ein Knopf — gerade so viel, dass er als Knopf zu erkennen ist. */
  --pmf-radius-rund:           3px;   /* Kästchen und Namensmarke, die in einer Zeile mitlaufen. */
  --pmf-radius-pille:          9px;   /* Zustandsmarke (passt, sinnlos, unmöglich, offen, aus der Quelle). */
  /* schatten */
  --pmf-schatten-keiner:       none;   /* Der Normalfall. Die Oberfläche arbeitet mit Linien, nicht mit Tiefe. */
  --pmf-schatten-karte:        0 1px 2px rgba(0, 0, 0, 0.04);   /* Eine Karte, die über der Seite liegt. */
  --pmf-schatten-gewaehlt:     0 0 0 1px currentColor inset;   /* Das gewählte Glied oder die gewählte Zeile. */
  --pmf-schatten-leiste:       0 2px 8px rgba(0, 0, 0, 0.08);   /* Eine Leiste, die über dem Inhalt liegt: Navigation, aufgeklapptes Feld. Sie soll sich abheben, nicht schweben. */
  --pmf-schatten-fenster:      0 25px 50px -12px rgba(0, 0, 0, 0.25);   /* Ein Fenster, das vor der Seite steht und sie verdeckt. */
  /* linienbreiten */
  --pmf-linie-breite-haar:     1px;   /* Jede gewöhnliche Linie: Rahmen, Tabellengitter, Trennlinie. */
  --pmf-linie-breite-betont:   2px;   /* Zitatstrich und die linke Kante einer Meldung. */
  --pmf-linie-breite-dick:     4px;   /* Die farbige Kante einer Kopfzeile mit Zustand. */
}

/* ==========================================================================
 * Die Bauteile. Jedes sieht auf jeder Seite gleich aus; ein neues entsteht
 * nur, wenn kein vorhandenes passt (Konzept Gestaltung §1).
 * ========================================================================== */

/* -- Kopfzeile ------------------------------------------------------------ */
.pmf-kopfzeile {
  font-size: var(--pmf-schrift-titel);
  line-height: var(--pmf-zeile-eng);
  color: var(--pmf-text);
  margin: var(--pmf-abstand-null) var(--pmf-abstand-null) var(--pmf-abstand-weit);
  padding-bottom: var(--pmf-abstand-knapp);
  border-bottom: var(--pmf-linie-breite-haar) solid var(--pmf-linie);
}
.pmf-kopfzeile--gut      { border-left: var(--pmf-linie-breite-dick) solid var(--pmf-gut-linie);
                           padding-left: var(--pmf-abstand-normal); }
.pmf-kopfzeile--warnung  { border-left: var(--pmf-linie-breite-dick) solid var(--pmf-warn-linie);
                           padding-left: var(--pmf-abstand-normal); }
.pmf-kopfzeile--schlecht {
  border-left: var(--pmf-linie-breite-dick) solid var(--pmf-schlecht-linie);
  padding-left: var(--pmf-abstand-normal);
}

/* -- Kachel --------------------------------------------------------------- */
.pmf-kachel {
  background: var(--pmf-flaeche);
  border: var(--pmf-linie-breite-haar) solid var(--pmf-linie);
  border-radius: var(--pmf-radius-keiner);
  padding: var(--pmf-abstand-luftig);
  margin-bottom: var(--pmf-abstand-luftig);
  box-shadow: var(--pmf-schatten-karte);
}
.pmf-kachel--still { background: var(--pmf-flaeche-still); box-shadow: var(--pmf-schatten-keiner); }
.pmf-kachel > h2 {
  font-size: var(--pmf-schrift-kopf);
  line-height: var(--pmf-zeile-eng);
  color: var(--pmf-text);
  margin: var(--pmf-abstand-null) var(--pmf-abstand-null) var(--pmf-abstand-normal);
}

/* -- Tabelle -------------------------------------------------------------- */
.pmf-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pmf-schrift-normal);
  line-height: var(--pmf-zeile-eng);
  color: var(--pmf-text);
  background: var(--pmf-flaeche);
}
.pmf-tabelle th,
.pmf-tabelle td {
  border: var(--pmf-linie-breite-haar) solid var(--pmf-linie);
  padding: var(--pmf-abstand-eng) var(--pmf-abstand-normal);
  text-align: left;
  vertical-align: top;
}
.pmf-tabelle th {
  background: var(--pmf-flaeche-betont);
  font-size: var(--pmf-schrift-klein);
  font-weight: 600;
  color: var(--pmf-text-still);
}
.pmf-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.pmf-tabelle tbody tr:hover { background: var(--pmf-flaeche-betont); }
.pmf-tabelle tr.gewaehlt { box-shadow: var(--pmf-schatten-gewaehlt); color: var(--pmf-text); }

/* -- Knopf ---------------------------------------------------------------- */
.pmf-knopf {
  display: inline-block;
  font: inherit;
  font-size: var(--pmf-schrift-normal);
  line-height: var(--pmf-zeile-eng);
  color: var(--pmf-flaeche);
  background: var(--pmf-akzent);
  border: var(--pmf-linie-breite-haar) solid var(--pmf-akzent);
  border-radius: var(--pmf-radius-klein);
  padding: var(--pmf-abstand-knapp) var(--pmf-abstand-weit);
  cursor: pointer;
}
.pmf-knopf:hover  { background: var(--pmf-akzent-dunkel); border-color: var(--pmf-akzent-dunkel); }
.pmf-knopf:active { background: var(--pmf-akzent-dunkel); }
.pmf-knopf:focus-visible { outline: var(--pmf-linie-breite-betont) solid var(--pmf-akzent-dunkel);
                           outline-offset: var(--pmf-abstand-winzig); }
.pmf-knopf[disabled], .pmf-knopf--gesperrt {
  background: var(--pmf-flaeche-betont);
  border-color: var(--pmf-linie);
  color: var(--pmf-text-leise);
  cursor: not-allowed;
}
.pmf-knopf--still {
  background: var(--pmf-flaeche);
  border-color: var(--pmf-linie);
  color: var(--pmf-text);
}
.pmf-knopf--still:hover { background: var(--pmf-flaeche-betont); }

/* -- Feld ----------------------------------------------------------------- */
.pmf-feld { display: block; margin-top: var(--pmf-abstand-knapp); }
.pmf-feld > label,
label.pmf-feld-beschriftung {
  display: block;
  font-size: var(--pmf-schrift-klein);
  color: var(--pmf-text-still);
  margin-bottom: var(--pmf-abstand-winzig);
}
.pmf-feld input, .pmf-feld select, .pmf-feld textarea {
  width: 100%;
  font: inherit;
  font-size: var(--pmf-schrift-normal);
  color: var(--pmf-text);
  background: var(--pmf-flaeche);
  border: var(--pmf-linie-breite-haar) solid var(--pmf-linie);
  border-radius: var(--pmf-radius-keiner);
  padding: var(--pmf-abstand-eng) var(--pmf-abstand-knapp);
}
.pmf-feld input:focus, .pmf-feld select:focus, .pmf-feld textarea:focus {
  outline: none;
  border-color: var(--pmf-akzent);
}
.pmf-feld input.abgewiesen, .pmf-feld select.abgewiesen, .pmf-feld textarea.abgewiesen {
  border-color: var(--pmf-schlecht-text);
  background: var(--pmf-schlecht-flaeche);
}
.pmf-feld-fehler {
  display: block;
  font-size: var(--pmf-schrift-klein);
  color: var(--pmf-schlecht-text);
  margin-top: var(--pmf-abstand-winzig);
}

/* -- Meldung -------------------------------------------------------------- */
.pmf-meldung {
  font-size: var(--pmf-schrift-normal);
  line-height: var(--pmf-zeile-normal);
  border: var(--pmf-linie-breite-haar) solid var(--pmf-linie);
  border-left-width: var(--pmf-linie-breite-dick);
  padding: var(--pmf-abstand-normal) var(--pmf-abstand-weit);
  margin: var(--pmf-abstand-normal) var(--pmf-abstand-null);
  background: var(--pmf-flaeche-still);
  color: var(--pmf-text);
}
.pmf-meldung--gut {
  background: var(--pmf-gut-flaeche);
  border-color: var(--pmf-gut-linie);
  color: var(--pmf-gut-text);
}
.pmf-meldung--warnung {
  background: var(--pmf-warn-flaeche);
  border-color: var(--pmf-warn-linie);
  color: var(--pmf-warn-text);
}
.pmf-meldung--schlecht {
  background: var(--pmf-schlecht-flaeche);
  border-color: var(--pmf-schlecht-linie);
  color: var(--pmf-schlecht-text);
}
.pmf-meldung--ruhig {
  background: var(--pmf-ruhig-flaeche);
  border-color: var(--pmf-ruhig-linie);
  color: var(--pmf-ruhig-text);
}

/* -- Marke ---------------------------------------------------------------- */
.pmf-marke {
  display: inline-block;
  font-size: var(--pmf-schrift-klein);
  line-height: var(--pmf-zeile-eng);
  border-radius: var(--pmf-radius-pille);
  padding: var(--pmf-abstand-winzig) var(--pmf-abstand-normal);
  background: var(--pmf-flaeche-betont);
  color: var(--pmf-text-still);
}
.pmf-marke--gut      { background: var(--pmf-gut-flaeche);      color: var(--pmf-gut-text); }
.pmf-marke--warnung  { background: var(--pmf-warn-flaeche);     color: var(--pmf-warn-text); }
.pmf-marke--schlecht { background: var(--pmf-schlecht-flaeche); color: var(--pmf-schlecht-text); }
.pmf-marke--ruhig    { background: var(--pmf-ruhig-flaeche);    color: var(--pmf-ruhig-text); }
.pmf-marke--herkunft { background: var(--pmf-herkunft-flaeche); color: var(--pmf-herkunft-text); }

/* -- Text, der zuruecktritt ----------------------------------------------- */
.pmf-still {
  font-size: var(--pmf-schrift-klein);
  line-height: var(--pmf-zeile-normal);
  color: var(--pmf-text-still);
}
.pmf-leise { font-size: var(--pmf-schrift-winzig); color: var(--pmf-text-leise); }