/* Ein ruhiges Lesewerkzeug, kein Dashboard-Feuerwerk.
   Bootstrap trägt Raster und Bausteine; hier steht der Charakter:
   eine Serifenschrift für Überschriften, eine gedeckte Palette und
   Karten, die sich wie Zeitungsspalten lesen. */

:root {
  --fn-tinte: #1c1b19;
  --fn-papier: #faf8f5;
  --fn-karte: #ffffff;
  --fn-linie: #e3ded6;
  /* Abstand zum Fensterrand: 0,6rem auf einem schmalen Handy,
     höchstens 1,5rem auf einem breiten Bildschirm. */
  --fn-rand: clamp(.6rem, 3vw, 1.5rem);
  --fn-akzent: #1f5d50;
  --fn-akzent-hell: #e7f0ed;
  /* Schrift auf satter Fläche. Eigene Angabe, weil die Fläche in beiden
     Themen von entgegengesetzter Helligkeit ist -- ein festes Weiß wäre im
     dunklen Thema unlesbar. */

  /* Die Farben der Rubrikknöpfe. Je Art eine, und sie hat zwei Rollen:
     inaktiv ist sie die Schrift auf durchsichtigem Grund, aktiv die Fläche
     unter weißer Schrift.
     Grün für die Rubriken, Rot für "alle" und "neue" -- die beiden sind
     keine Rubriken, sondern Regeln darüber, welche gelten. */
  --fn-rubrik-farbe: #146c43;
  --fn-sonder: #b3261e;
  --fn-sonder-hell: #fdecea;
  --fn-gedaempft: #6b6660;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fn-tinte: #e8e5e0;
    --fn-papier: #16171a;
    --fn-karte: #1e2024;
    --fn-linie: #2f3238;
    --fn-akzent: #7fc9b6;
    --fn-akzent-hell: #1c2a28;

    /* Im dunklen Thema ziehen die beiden Rollen auseinander: Weiße Schrift
       will eine dunkle Fläche, lesbare Schrift auf der dunklen Karte will
       eine helle Farbe. Rechnerisch sind höchstens 4,0:1 für beides
       zugleich erreichbar (Karte #1e2024, Schrift weiß) -- diese Werte
       schöpfen das aus. Wer sie ändert, verschlechtert eine der beiden
       Rollen; heller heißt: die aktive Fläche wird schlechter lesbar. */
    --fn-rubrik-farbe: #169149;
    --fn-sonder: #eb3b2f;
    --fn-sonder-hell: #2c1714;
    --fn-gedaempft: #9a958e;
  }
}

body {
  background: var(--fn-papier);
  color: var(--fn-tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, .fn-marke, .fn-zahl {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.9rem; margin-bottom: .2em; }
h2 { font-size: 1.35rem; margin-top: 1.6rem; }

.fn-nav {
  background: var(--fn-karte);
  border-bottom: 1px solid var(--fn-linie);
}
.fn-marke { font-size: 1.3rem; font-weight: 700; color: var(--fn-akzent); }

/* Wo man gerade ist. Fett und in der Akzentfarbe -- kein Kasten, kein
   Balken: Die Leiste soll ruhig bleiben, und Fettschrift liest sich auch
   dann noch als „hier“, wenn jemand Farben nicht unterscheidet. */
.fn-nav-aktiv { font-weight: 700; color: var(--fn-akzent); }

/* Die zweite Menüzeile (Verwaltung). Sie sieht aus wie die erste und steht
   unmittelbar darunter -- sie ist deren zweite Ebene, kein Inhalt der
   Seite. Auf schmalen Displays bricht sie um, statt seitlich zu schieben. */
.fn-unternav {
  background: var(--fn-karte);
  border-bottom: 1px solid var(--fn-linie);
  font-size: .95rem;
}
.fn-unternav > .container {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.1rem;
  padding-block: .45rem;
  padding-inline: var(--fn-rand);
}
.fn-unternav-punkt {
  color: var(--fn-gedaempft);
  text-decoration: none;
  padding: .15rem 0;
}
.fn-unternav-punkt:hover { color: var(--fn-akzent); }
.fn-konto { font-size: .85rem; color: var(--fn-gedaempft); }
/* Ein kleiner Abstand zum Rand -- auf schmalen Displays besonders klein.
   Dort ist jeder Millimeter Breite kostbar; auf einem großen Bildschirm sieht
   Text, der am Glas klebt, dagegen unfertig aus.

   Nötig, weil die Kurzschreibweise "padding: 2rem 0 3rem" hier den seitlichen
   Abstand von Bootstraps .container auf null setzte -- .fn-inhalt IST der
   Container. Deshalb steht die Angabe jetzt vollständig da. */
.fn-inhalt { flex: 1 0 auto; padding: 2rem var(--fn-rand) 3rem; max-width: 60rem; }

/* Kopf- und Fußzeile führen denselben Abstand, damit die Marke oben und der
   Text unten mit dem Inhalt fluchten. */
.fn-nav > .container,
.fn-fuss > .container { padding-inline: var(--fn-rand); }
.fn-fuss {
  border-top: 1px solid var(--fn-linie);
  padding: 1rem 0;
  color: var(--fn-gedaempft);
  font-size: .85rem;
}
.fn-fuss a { color: var(--fn-gedaempft); }

.fn-vorspann { color: var(--fn-gedaempft); font-size: 1.05rem; max-width: 42em; }

/* Modulkarte: Titel, erwartete Menge, Rubriken, ein Schalter. */
.fn-karte {
  background: var(--fn-karte);
  border: 1px solid var(--fn-linie);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: .9rem;
  transition: border-color .15s ease;
}
.fn-karte:hover { border-color: var(--fn-akzent); }

.fn-modulname { font-size: 1.15rem; font-weight: 600; margin: 0; }

/* Das Sinnbild der Quelle. Es wird beim Abruf einmal im Monat von der Website
   geholt und liegt als data:-URI in der Datenbank -- die Seite lädt dafür
   nichts nach.

   In „Deine Quellen“ steht es links neben dem zweizeiligen Block aus Name und
   Adresse und ist so hoch wie beide Zeilen zusammen. Deshalb ein flex-Kasten
   mit align-items:stretch statt eines vertical-align: das Bild soll oben und
   unten mit dem Text abschließen, nicht auf einer Grundlinie sitzen.
   Fehlt das Bild, rückt der Text nach links -- kein Platzhalter, kein Loch. */
.fn-modulkopf { display: flex; gap: .7rem; align-items: stretch; }
.fn-modulbild {
  width: 2.6rem; height: 2.6rem;
  flex: 0 0 auto;
  align-self: center;
  border-radius: 6px;
  object-fit: contain;
}
.fn-modultitel { min-width: 0; }

/* Module aus mehreren Seiten (kaffee, kultur, tesla) haben kein eigenes
   Zeichen, sondern das ihrer Seiten. Bis zu drei davon stehen diagonal
   gefächert übereinander -- von oben links nach unten rechts, wie drei
   hingeworfene Karten.

   Der Punkt der Diagonale ist der Platz: Das umfassende Quadrat ist genau
   so groß wie ein einzelnes Sinnbild. Nebeneinander bräuchte die Collage
   dreimal so viel Breite, und die Zeile begänne bei jedem Mehrseitenmodul
   weiter rechts als bei den übrigen.

   Deshalb ein Kasten fester Größe mit absolut gesetzten Bildern: Jedes ist
   0,62 der Kante groß, das erste sitzt oben links, das letzte unten
   rechts, die Schritte dazwischen ergeben sich aus ihrer Zahl (--fn-schritt
   in der Vorlage). Der helle Rand trennt sie voneinander -- ohne ihn
   verschwimmen zwei dunkle Zeichen zu einem Fleck. */
.fn-collage {
  position: relative;
  display: inline-block;
  vertical-align: -.25em;
  width: 1.15em;
  height: 1.15em;
  margin-right: .4em;
}
.fn-collage img {
  position: absolute;
  width: 62%;
  height: 62%;
  object-fit: contain;
  border-radius: 2px;
  border: 1px solid var(--fn-karte);
  background: var(--fn-karte);
}
/* Die Lagen. Die Vorlage schreibt die Zahl als Klasse dazu, damit hier
   nichts erschlossen werden muss: Bei zweien sitzen sie in den Ecken, bei
   dreien kommt die Mitte dazu. Das jeweils spätere Bild liegt oben -- das
   ergibt sich aus der Reihenfolge und braucht kein z-index. */
.fn-collage--2 img:nth-child(1) { top: 0; left: 0; }
.fn-collage--2 img:nth-child(2) { bottom: 0; right: 0; }

.fn-collage--3 img:nth-child(1) { top: 0; left: 0; }
.fn-collage--3 img:nth-child(2) { top: 19%; left: 19%; }
.fn-collage--3 img:nth-child(3) { bottom: 0; right: 0; }

/* In der Quellenliste an der Stelle des großen Bildes -- dieselbe
   Rechnung, nur größer. */
.fn-collage--gross { width: 2.6rem; height: 2.6rem; margin-right: 0; }
.fn-collage--gross img { border-radius: 4px; border-width: 2px; }

/* Dieselben Bilder in Tabellen und Listen: dort steht das Sinnbild in einer
   Textzeile, hier ist vertical-align also richtig. */
.fn-zeilenbild {
  width: 1.15em; height: 1.15em;
  vertical-align: -.2em;
  margin-right: .4em;
  object-fit: contain;
}
.fn-quelle { font-size: .85rem; color: var(--fn-gedaempft); word-break: break-all; }

.fn-zahl { font-size: 1.6rem; font-weight: 700; color: var(--fn-akzent); line-height: 1; }
.fn-zahl-klein { font-size: .8rem; color: var(--fn-gedaempft); display: block; }

/* Kennzahlen der Verwaltung */
.fn-kennzahl {
  background: var(--fn-karte);
  border: 1px solid var(--fn-linie);
  border-radius: 10px;
  padding: 1rem;
  height: 100%;
}
.fn-kennzahl .fn-zahl { font-size: 2rem; }

/* Ein Balkendiagramm ohne JavaScript: die Breite steht im style-Attribut. */
.fn-balken { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
/* Die Spur ist ein Flex-Behälter, die Abschnitte liegen darin nebeneinander.
 * Vorher war der Wert ein einfaches <span>: An einem Inline-Element wirkt
 * keine Breite, also blieb von jedem Balken nur die blasse Spur übrig. */
.fn-balken-spur {
  flex: 1;
  display: flex;
  background: var(--fn-linie);
  border-radius: 3px;
  height: 12px;
  overflow: hidden;
}
.fn-balken-wert { display: block; height: 12px; background: var(--fn-akzent); }
.fn-balken-spur .fn-balken-wert:first-child { border-radius: 3px 0 0 3px; }
.fn-balken-spur .fn-balken-wert:last-child { border-radius: 0 3px 3px 0; }

/* Acht Farben für die Aufteilung je Modul. Gleiche Sättigung und
 * Helligkeit, nur der Farbton wandert -- so wirkt kein Modul lauter als
 * das andere, und im dunklen Fenster tragen dieselben Töne. */
.fn-farbe-0 { background: hsl(210 68% 52%); }
.fn-farbe-1 { background: hsl(150 55% 42%); }
.fn-farbe-2 { background: hsl(28 82% 55%); }
.fn-farbe-3 { background: hsl(280 48% 58%); }
.fn-farbe-4 { background: hsl(348 65% 57%); }
.fn-farbe-5 { background: hsl(188 62% 42%); }
.fn-farbe-6 { background: hsl(48 78% 48%); }
.fn-farbe-7 { background: hsl(258 45% 62%); }
.fn-farbtupfer {
  display: inline-block;
  width: .7rem; height: .7rem;
  border-radius: 2px;
  margin-right: .45rem;
  vertical-align: baseline;
}
.fn-balken-tag { font-size: .75rem; color: var(--fn-gedaempft); width: 5.5rem; }
.fn-balken-zahl { font-size: .75rem; color: var(--fn-gedaempft); width: 3rem; text-align: right; }

table { color: var(--fn-tinte); }
.table > :not(caption) > * > * { background: transparent; }
.fn-tabelle th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
                 color: var(--fn-gedaempft); font-weight: 600; }

.fn-formular { background: var(--fn-karte); border: 1px solid var(--fn-linie);
               border-radius: 10px; padding: 1.5rem; max-width: 32rem; }
.fn-formular--breit { max-width: 100%; }
.fn-hinweis { font-size: .82rem; color: var(--fn-gedaempft); }

.btn-primary { background: var(--fn-akzent); border-color: var(--fn-akzent); }
.btn-primary:hover { filter: brightness(1.1); }
a { color: var(--fn-akzent); }

/* --- Konfigurationsseite -------------------------------------------------
   Die Erklärungen sind der Punkt dieser Seite: Ein Wert wie "clean" oder
   "data-uri" sagt aus sich heraus nichts. Sie stehen deshalb dauerhaft da
   und nicht in einem Tooltip, den auf dem Handy niemand aufbekommt. */
.fn-gruppentext { max-width: 46em; }

/* Der Erklärkasten oben auf einer Seite. Er braucht Luft nach unten: Ohne
   sie klebte die erste Quellenkarte am Text und las sich wie ein Teil
   davon. */
.fn-erklaerung { margin-bottom: 1.8rem; }

.fn-einstellung + .fn-einstellung {
  border-top: 1px solid var(--fn-linie);
  padding-top: 1rem;
}

/* Der Schlüssel, unter dem der Wert in der config.ini steht -- damit sich
   Formular und Datei ohne Raten zuordnen lassen. */
.fn-schluessel {
  display: block;
  font-size: .78rem;
  color: var(--fn-gedaempft);
  font-weight: normal;
}

.fn-wahlhilfe { font-size: .85rem; }
.fn-wahlhilfe dt { font-weight: 600; margin-top: .45rem; }
.fn-wahlhilfe dd { margin: 0 0 0 1rem; color: var(--fn-gedaempft); }

/* Welche Fassung gerade läuft. Steht in der Fußzeile, weil die rechtlichen
   Hinweise darauf verweisen: Änderungen werden nicht angekündigt, also muss
   wenigstens erkennbar sein, ob man dieselbe Fassung sieht wie zuvor. */
/* Die Fußzeile ist eine Zeile: Name, Fassung, Stand, dann der Rest, durch
   Mittelpunkte getrennt. Umbrechen darf sie auf schmalen Displays. */
.fn-fuss .container { display: flex; flex-wrap: wrap; gap: .3rem; align-items: baseline; }

/* Rubriken sind Knöpfe, keine Beschriftungen: ein Klick wählt sie.
   Zwei Zustände, und die Farbe wechselt die Rolle:

     inaktiv  durchsichtiger Grund, Farbe als Schrift und Rahmen
     aktiv    Farbe als Fläche, weiße Schrift

   Grün für die Rubriken, Rot für "alle" und "neue". */
.fn-rubrik {
  display: inline-block;
  font-size: .78rem;
  padding: .15rem .55rem;
  margin: .15rem .2rem .15rem 0;
  border: 1px solid var(--fn-rubrik-farbe);
  border-radius: 999px;
  background: transparent;
  color: var(--fn-rubrik-farbe);
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}
.fn-rubrik:hover { background: var(--fn-akzent-hell); }

.fn-rubrik--gewaehlt,
.fn-rubrik--gewaehlt:hover {
  background: var(--fn-rubrik-farbe);
  border-color: var(--fn-rubrik-farbe);
  color: #ffffff;
  font-weight: 600;
}
.fn-rubrik--gewaehlt:hover { filter: brightness(1.12); }

/* Solange "alle" gilt, stehen die einzelnen Rubriken blass da: Sie sind
   anklickbar, aber ohne Wirkung auf das, was gerade zugestellt wird. */
.fn-rubrik--ruht { opacity: .45; }
.fn-rubrik--ruht:hover { opacity: 1; }

.fn-rubrik--alle,
.fn-rubrik--neue {
  border-color: var(--fn-sonder);
  color: var(--fn-sonder);
  font-weight: 600;
}
.fn-rubrik--alle:hover,
.fn-rubrik--neue:hover { background: var(--fn-sonder-hell); }

.fn-rubrik--alle.fn-rubrik--gewaehlt,
.fn-rubrik--neue.fn-rubrik--gewaehlt,
.fn-rubrik--alle.fn-rubrik--gewaehlt:hover,
.fn-rubrik--neue.fn-rubrik--gewaehlt:hover {
  background: var(--fn-sonder);
  border-color: var(--fn-sonder);
  color: #ffffff;
}
.fn-rubrik--alle.fn-rubrik--gewaehlt:hover,
.fn-rubrik--neue.fn-rubrik--gewaehlt:hover { filter: brightness(1.12); }

/* Ein Strich trennt die beiden Regeln von den Rubriken, die sie regeln. */
.fn-rubrik--neue { margin-right: .8rem; }

/* „nur neue, noch keine da“: ein stiller Zustand, der wie ein Fehler
   aussieht. Deshalb steht er ausdrücklich in der Zeile. */
.fn-wartehinweis {
  font-size: .82rem;
  color: var(--fn-gedaempft);
  border-left: 2px solid var(--fn-akzent);
  padding-left: .7rem;
}

/* Zwischenüberschrift innerhalb eines Blocks -- die letzten Zustellungen
   stehen im selben Kasten wie der Zustand der Zustellung, sie gehören
   zusammen. */
.fn-unterkopf {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fn-gedaempft);
  margin: 1.6rem 0 .5rem;
}

/* Das Zustellprotokoll reicht weit zurück, der Kasten dafür bleibt gleich
   groß: feste Höhe, eigener Scrollbereich, Nachschub beim Erreichen des
   Endes (static/js/zustellungen.js). Die Kopfzeile bleibt dabei stehen,
   sonst scrollt man nach zwanzig Zeilen ohne Beschriftung.

   Die Höhe ist in Zeilen gedacht, nicht in Pixeln: etwa zehn Zeilen zu
   2,6rem. Auf einem kurzen Bildschirm darf sie nicht die ganze Sicht
   einnehmen -- daher zusätzlich der Deckel von 60vh. */
.fn-zustellrahmen {
  max-height: min(26rem, 60vh);
  overflow-y: auto;
  border: 1px solid var(--fn-linie);
  border-radius: 8px;
}
.fn-zustellrahmen thead th {
  position: sticky;
  top: 0;
  background: var(--fn-karte);
  z-index: 1;
}
.fn-zustellrahmen .table > :not(caption) > * > * { background: transparent; }

/* Die Rückmeldung nach dem Speichern ohne Seitenaufbau. Sie steht oben und
   verschwindet nach ein paar Sekunden wieder: Eine Meldung, die stehen
   bleibt, wird beim nächsten Speichern für die neue gehalten. */
.fn-meldung { margin-bottom: 1rem; }

/* Ein Befehl zum Abtippen oder Kopieren. Er darf umbrechen -- auf einem
   Handy ist die Zeile sonst breiter als die Seite, und die ganze Seite
   schöbe sich seitlich. */
.fn-befehl {
  background: var(--fn-akzent-hell);
  border-radius: 6px;
  padding: .6rem .8rem;
  font-size: .85rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 .6rem;
}

/* Im Zustellprotokoll und in der Erklärung ist die Rubrik eine Auskunft,
   kein Knopf: gleiche Form und Farbe, aber nichts zum Klicken. In der
   Erklärung steht sie mitten im Satz -- der Zeilenabstand darf davon nicht
   auseinandergehen. */
.fn-zustelltabelle .fn-rubrik,
.fn-erklaerung .fn-rubrik { cursor: default; }
.fn-erklaerung .fn-rubrik { margin: 0; vertical-align: baseline; }
.fn-zustelltabelle td { vertical-align: middle; }


/* Zugangsdaten: aufklappbare Blöcke.
 *
 * <details> statt eines eigenen Schalters -- der Browser kann das, ohne
 * dass jemand den Zustand nachhält, und es funktioniert auch ohne
 * JavaScript. Der Pfeil wird ersetzt, damit die Zeile links mit dem
 * Zustand beginnt und nicht mit einem Dreieck. */
.fn-zugang > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
}
.fn-zugang > summary::-webkit-details-marker { display: none; }
.fn-zugangoeffner::after { content: " ▸"; }
.fn-zugang[open] > summary .fn-zugangoeffner::after { content: " ▾"; }
.fn-zugangoeffner { margin-left: auto; }
.fn-zugangstand { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fn-badge-leer { color: var(--fn-gedaempft); border: 1px solid var(--fn-linie); }

/* Eine Seite innerhalb einer Quelle aus mehreren: eingerückt und mit
 * eigener Linie, damit sichtbar bleibt, wozu der Block gehört. */
.fn-zugang--seite {
  border-left: 2px solid var(--fn-linie);
  padding-left: .8rem;
  margin: .3rem 0 .3rem .2rem;
}
.fn-seitenname { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.fn-seitenbild {
  width: 1.2rem; height: 1.2rem;
  border-radius: 3px;
  object-fit: contain;
}

/* Aktionsmenü — ein <details>, kein Bootstrap-Dropdown.
 *
 * Das Dropdown braucht JavaScript, und ohne wäre keine der Aktionen mehr
 * erreichbar. <details> kann der Browser selbst; es klappt beim Klick auf
 * die Zusammenfassung auf und schließt beim nächsten Klick. */
.fn-menue { position: relative; display: inline-block; text-align: left; }
.fn-menue > summary { list-style: none; cursor: pointer; }
.fn-menue > summary::-webkit-details-marker { display: none; }
.fn-menue > summary::after { content: " ▾"; }
.fn-menue-inhalt {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 13rem;
  padding: .35rem 0;
  background: var(--fn-karte);
  border: 1px solid var(--fn-linie);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.fn-menue-punkt {
  display: block;
  width: 100%;
  padding: .4rem .9rem;
  border: 0;
  background: none;
  color: var(--fn-tinte);
  text-align: left;
  text-decoration: none;
  font-size: .9rem;
  white-space: nowrap;
}
.fn-menue-punkt:hover { background: var(--fn-linie); color: var(--fn-tinte); }
.fn-menue-gefahr { border-top: 1px solid var(--fn-linie); margin-top: .35rem; padding-top: .35rem; }
.fn-menue-punkt--rot { color: var(--bs-danger, #c0392b); }

/* Die zweite Zahl an Artikel/Tag: was die ganze Quelle bringt. Kleiner und
 * blasser als die erste — die eigene Auswahl ist die Auskunft, die andere
 * der Maßstab dazu. */
.fn-zahl-von { font-size: 1rem; font-weight: 400; color: var(--fn-gedaempft); }