/* ===========================================================================
   RAHMEN 100.2.1 — das einzige Stylesheet der Hülle.

   ┌───────────────────────────────────────────────────────────────────────┐
   │  IN DIESER DATEI STEHT KEIN EINZIGER FARBWERT MEHR.                   │
   │                                                                       │
   │  Bis 100.2.3 trug ihr Kopf einen Block VORLÄUFIGER Werte. Sie sind    │
   │  seit dem 20.9.2026 ersetzt: alle Farben, Schriften, Größen, Abstände │
   │  und Rundungen stehen im ERSCHEINUNGSBILD (Modul 100.2.3) und kommen  │
   │  über `/erscheinungsbild.css` herein, das das Grundgerüst VOR dieser  │
   │  Datei einbindet. Hier wird nur noch `var(--…)` abgegriffen.          │
   │                                                                       │
   │  Bewacht von `proben/test_keine_farbe_im_geruest.py`: die Probe sucht │
   │  seit 100.2.3 über den ganzen Baum des Quelltextes — jede Vorlage und │
   │  jedes Stylesheet im Haus, ausgenommen die Dateien, die sich selbst   │
   │  als Werte-Datei ausweisen. Keine Ausnahmeliste.                      │
   └───────────────────────────────────────────────────────────────────────┘

   WAS HIER BLEIBT UND WARUM: die ANORDNUNG. Wo das Menü sitzt, wie die
   Kopfzeile bestückt ist, was beim Drucken wegfällt — das gehört dem Rahmen
   (Notiz 918 am Baukonzept 100.2.3: „Werte ja, Anordnung nein"). Der einzige
   eigene Wert unten ist die Höhe von Kopf- und Fußzeile, und auch die ist an
   die Grundgröße des Erscheinungsbilds gebunden, damit sie mitwächst.
   =========================================================================== */

:root {
  /* Der EINE eigene Maßwert des Rahmens — seine Anordnung, nicht sein Aussehen. */
  --rahmen-kopf-hoehe: calc(var(--grundgroesse) * 3.25);
}

/* --- Grundlage ------------------------------------------------------------ */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schriftart);
  font-size: var(--schrift-text);
  line-height: var(--zeilenhoehe);
  color: var(--schrift-2);
  background-color: var(--grund);
  /* Der Lichtschein oben rechts — er liegt ÜBER dem Grund und wandert nicht mit. */
  background-image: var(--grund-schein);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a { color: var(--akzent); }

/* Ziffern in Spalten gleich breit — sonst tanzen die Spalten. */
code, kbd, samp, .kennung { font-family: var(--schriftart-zahlen);
                            font-variant-numeric: tabular-nums; }

/* Der Sprung zum Inhalt: sichtbar nur, wenn er den Tastatur-Fokus hat. */
.sprung {
  position: absolute;
  left: -9999px;
}
.sprung:focus {
  left: var(--luft);
  top: var(--luft);
  z-index: 10;
  background: var(--grund);
  color: var(--schrift-1);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  padding: var(--luft);
}

/* --- Kopfzeile ------------------------------------------------------------ */

.kopf {
  display: flex;
  align-items: center;
  gap: var(--luft-gross);
  min-height: var(--rahmen-kopf-hoehe);
  padding: 0 var(--luft-gross);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-1);
  font-size: var(--schrift-ueberschrift);
}

.kopf-marke { font-weight: 600; }

.kopf-akteur {
  display: flex;
  align-items: center;
  gap: var(--luft);
  flex-wrap: wrap;
  margin-left: auto;
  font-size: var(--schrift-bedien);
  color: var(--schrift-3);
}

.kopf-akteur select {
  font: inherit;
  padding: 0.15rem var(--luft);
  color: var(--schrift-1);
  background: var(--karte);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-bedien);
}

/* WER IST DA — seit 100.2.5 Phase B steht hier ein Name statt eines Eingabefelds.
   Der Verweis hinaus sitzt daneben, nicht im Menü: abmelden ist keine Ansicht. */
.kopf-wer {
  display: flex;
  align-items: center;
  gap: var(--luft);
  font-size: var(--schrift-bedien);
  color: var(--schrift-3);
}

.kopf-angemeldet { color: var(--schrift-4); }
.kopf-name { color: var(--schrift-1); font-weight: 600; }
.kopf-abmelden { color: var(--schrift-3); }

/* Das Zahnrad (100.2.2): der Weg zu den Einstellungen, in der Kopfzeile
   statt im Menü. Es trägt keinen eigenen Farbwert — das Icon bringt sein
   Bild mit, alles andere sind Werte des Erscheinungsbilds. */
.kopf-zahnrad { display: inline-flex; align-items: center; position: relative; }
.kopf-blase {
  position: absolute;
  top: -.35em;
  right: -.45em;
  min-width: 1.5em;
  padding: 0 .35em;
  border-radius: var(--rund-pille);
  background: var(--kritisch);
  color: var(--grund);
  font-size: var(--schrift-pille);
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}
.kopf-zahnrad img {
  width: var(--icon-groesse);
  height: var(--icon-groesse);
  border-radius: var(--rund-bedien);
  object-fit: contain;
}

/* --- Das Haus: Menü links, Inhalt rechts ---------------------------------- */

.haus {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--rahmen-kopf-hoehe) - var(--rahmen-kopf-hoehe));
}

.menue {
  flex: 0 0 var(--leiste-breite);
  padding: var(--luft) 0;
  border-right: 1px solid var(--linie);
  background: var(--seitenleiste);
}

.menue h2 { font-size: var(--schrift-spaltenkopf); text-transform: uppercase;
             letter-spacing: 0.08em; text-align: center;
             color: var(--schrift-4); margin: 0 0 var(--luft); }
.menue h3 { font-size: var(--schrift-spaltenkopf); text-align: center;
             color: var(--schrift-4); margin: var(--luft) 0 0.25rem; }
.menue ul { list-style: none; margin: 0; padding: 0;
            display: grid; justify-items: center; gap: var(--luft); }
.menue li { margin: 0; }

/* ┌────────────────────────────────────────────────────────────────────────┐
   │  DIE ICON-KACHEL. Jedes Maß daran ist ein WERT des Erscheinungsbilds — │
   │  Kantenlänge, Icon-Größe, Beschriftung, Rundung, Relief. Hier steht    │
   │  keine Zahl: „die Kacheln sind mir zu groß" ist ein Zahlentausch in    │
   │  `bilder/dunkel.css` und kein Bau-Auftrag an dieser Datei.             │
   │                                                                        │
   │  DER ORANGENE RAND IST EIN ECHTER LINKER RAND der Kachel, kein         │
   │  darübergelegter Streifen: ein aufgelegter Streifen wird vom Glanz der │
   │  Kachel ausgewaschen (verworfen am 20.9.2026). Als Rand folgt er der   │
   │  Rundung. Die inaktive Kachel trägt ihn durchsichtig, damit beim       │
   │  Wechsel nichts springt.                                               │
   └────────────────────────────────────────────────────────────────────────┘ */
.menue a {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  width: var(--kachel-groesse);
  height: var(--kachel-groesse);
  padding-bottom: 0.2em;
  border-left: var(--rand-aktiv) solid transparent;
  border-radius: var(--rund-kachel);
  background: var(--karte);
  box-shadow: var(--tiefe-kachel);
  color: var(--schrift-3);
  font-size: var(--label-groesse);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}

/* Das Icon der Kachel (Phase B, 100.2.3). Der Weg ist FEST verabredet zwischen
   Rahmen und Erscheinungsbild — `/erscheinungsbild/icon/{name}` — keine
   Python-Kopplung, derselbe Kniff wie `/erscheinungsbild.css` oben im Kopf.
   Ein unbekannter Name liefert dort selbst schon das Ersatz-Icon; hier steht
   nur die Größe, aus dem Erscheinungsbild wie jedes andere Maß der Kachel. */
.menue-icon {
  width: var(--icon-groesse);
  height: var(--icon-groesse);
  border-radius: var(--rund-bedien);
  object-fit: contain;
}

.menue a:hover { color: var(--schrift-2); background: var(--zeile-drueber); }
.menue li.hier a { border-left-color: var(--akzent); color: var(--schrift-1); }
.menue .leer { color: var(--schrift-4); font-size: var(--schrift-spaltenkopf);
               text-align: center; padding: 0 0.4em; }

.inhalt {
  flex: 1 1 auto;
  padding: var(--luft-gross);
  min-width: 0;
}

/* --- Die EINE Meldungsstelle, drei Stufen --------------------------------- */

.meldungen:empty { display: none; }

.meldung {
  display: flex;
  align-items: center;
  gap: var(--luft);
  margin: 0 0 var(--luft);
  padding: var(--luft);
  border-left: var(--rand-aktiv) solid var(--linie-karte);
  border-radius: var(--rund-bedien);
  background: var(--karte);
  color: var(--schrift-1);
  font-size: var(--schrift-bedien);
}

.meldung span { flex: 1 1 auto; }
.meldung-zu { border: 0; background: none; font: inherit; cursor: pointer;
              color: var(--schrift-3); }

.stufe-erfolg  { border-left-color: var(--gut); }
.stufe-warnung { border-left-color: var(--achtung); }
.stufe-fehler  { border-left-color: var(--kritisch); }

/* --- Warte-Anzeige, Ausfall, Abweisung, Startseite ------------------------ */

.warte {
  padding: var(--luft);
  color: var(--schrift-3);
}
.warte[hidden] { display: none; }

.ausfall, .abweisung, .startseite {
  background: var(--karte);
  border: 1px solid var(--linie-karte);
  border-radius: var(--rund-flaeche);
  padding: var(--luft-gross);
  color: var(--schrift-2);
}

.ausfall h1, .abweisung h1, .startseite h1 {
  color: var(--schrift-1);
  font-size: var(--schrift-ueberschrift);
  margin-top: 0;
}

.ausfall .kennung {
  font-family: var(--schriftart-zahlen);
  font-size: var(--schrift-grosszahl);
  letter-spacing: 0.1em;
  color: var(--schrift-1);
}

/* --- Fußzeile ------------------------------------------------------------- */

.fuss {
  min-height: var(--rahmen-kopf-hoehe);
  display: flex;
  align-items: center;
  gap: var(--luft);
  padding: 0 var(--luft-gross);
  border-top: 1px solid var(--linie);
  color: var(--schrift-4);
  font-size: var(--schrift-pille);
}
/* Der Lizenz-Hinweis (Phase B): die Bedingung der kostenlosen Icon-Nutzung,
   nicht Zierde — siehe `icons.py`. Er trägt dieselbe Zurückhaltung wie der
   übrige Fußzeilen-Text, bleibt aber ein Link. */
.fuss a { color: var(--schrift-4); }
.fuss a:hover { color: var(--schrift-2); }

/* --- Schmale Fenster ------------------------------------------------------ */

@media (max-width: 40rem) {
  .haus { display: block; }
  .menue { flex: none; border-right: 0; border-bottom: 1px solid var(--linie); }
  .menue ul { grid-auto-flow: column; justify-content: start;
              overflow-x: auto; }
}

/* ===========================================================================
   DER DRUCK-BLOCK.

   Beim Drucken und beim PDF-Erzeugen fallen MENÜ, KOPFZEILE und MELDUNGSSTELLE
   weg — sie sind Bedien-Elemente und auf Papier nur Rauschen; die Meldungsstelle
   gehört ausserdem zum Vorgang, nicht zum Dokument. Was bleibt, ist die
   Inhaltsfläche und die Fußzeile.

   Bewacht von `proben/test_statische_dateien.py`: fällt der Block weg, ist sie rot.
   =========================================================================== */

@media print {
  .kopf,
  .menue,
  .meldungen,
  .warte,
  .sprung { display: none !important; }

  body { background: none; }
  .haus { display: block; }
  .inhalt { padding: 0; }
  .ausfall, .abweisung, .startseite { border: 0; padding: 0; }
}