@import url("schrift.css");

/* ---------- Farbwelt: aus gartenbauvereine.org übernommen ----------

   Die Werte stammen nicht aus einer erfundenen Palette, sondern aus dem
   Stylesheet des Landesverbands (layout.verwaltungsportal.de/17577):
   ein tiefes Petrolgrün als Leitfarbe, ein helles Apfelgrün als Akzent,
   viel Weiß und ein leicht warmes Grau als Grund. Auch die Hausschrift
   Asap ist von dort.                                                      */
:root {
  --papier: #f6f4f4;          /* Grund der Seite, warmes Hellgrau */
  --papier-tief: #ececec;     /* eine Stufe kräftiger für Hinterlegungen */
  --karte: #ffffff;           /* Inhaltsflächen bleiben weiß */
  --tinte: #252525;           /* Fast-Schwarz des Fließtexts, nicht #000 */
  --tinte-leise: #6b6a68;     /* Grau für Bildunterschriften und Quellen */
  --linie: #dedcd9;           /* Haarlinien */

  --gruen: #006b59;           /* Leitfarbe: Kopf, Links, Rubriken */
  --gruen-hell: #008571;      /* aufgehellt, für Verläufe und Hover */
  --gruen-tief: #285b5c;      /* dunkler Zweitton */
  --gruen-matt: #76aba2;      /* stumpfes Petrol, für Flächen */
  --apfel: #83ac18;           /* Akzent: Marken, Balken, aktive Reiter */
  --apfel-hell: #dae6b9;      /* Apfelgrün aufgehellt, für Flächen */
  --leuchte: #e6f0ec;         /* Petrol aufgehellt, für Kästen */
  --warnung: #b0442b;

  /* Die durchgehenden Farbbänder oben und unten. Sie brauchen eigene Werte,
     weil auf ihnen immer weiße Schrift steht - auch im Dunkelmodus, wo
     --gruen zur hellen Leitfarbe wird und weiß darauf nicht mehr lesbar wäre. */
  --band: #006b59;
  --band-tief: #00543f;

  --radius: 3px;
  --schatten: 0 1px 2px rgba(37, 37, 37, .06);
  --font-ui: "Asap", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* Dunkelmodus: Die Verbandsseite hat keinen - aber ein Bildschirm wird auch
   abends gelesen. Wir drehen den Grund um und halten das Petrolgrün als
   Leitfarbe, aufgehellt, damit es auf dunklem Grund noch trägt. */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14181a;
    --papier-tief: #0e1113;
    --karte: #1c2224;
    --tinte: #e7eae9;
    --tinte-leise: #9aa3a1;
    --linie: #303839;
    --gruen: #4fbfa6;
    --gruen-hell: #6ad0b8;
    --gruen-tief: #a2ddcf;
    --gruen-matt: #3d6b64;
    --apfel: #a6cf35;
    --apfel-hell: #2f3d18;
    --leuchte: #172c28;
    --schatten: none;
    /* Gedämpftes Petrol statt der hellen Leitfarbe - die Bänder tragen auch
       nachts weiße Schrift. */
    --band: #0c2b25;
    --band-tief: #08201c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
a { color: var(--gruen); }
a:hover { color: var(--gruen-hell); }

/* Zahlen in Listen und Registern sollen untereinander fluchten. */
.jahr-marke, .firma .jahre, .cover div, .quelle-zeile, .treffer-zahl,
.register-tabelle { font-variant-numeric: tabular-nums; }

/* Kolumnentitel: gesperrte Versalien, das Motiv aus dem Seitenkopf des Hefts. */
.kolumnentitel {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--tinte-leise);
}
.kolumnentitel b { font-weight: 600; color: var(--gruen); }

/* ---------- Kopf ---------- */

/* Die Kopfleiste trägt die Leitfarbe als Fläche, nicht nur als Strich.
   Der Zeitschriftenkopf steht damit auf Petrolgrün wie das Verbandslogo auf
   seinem Grund - und die Leiste bleibt beim Blättern als durchgehendes Band
   stehen, das die Seite zusammenhält. */
header.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--band);
  border-bottom: 4px solid var(--apfel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
/* Schmale Zeile ganz oben, nur für den Abmeldelink. */
.kopfzeile-oben {
  max-width: 1220px; margin: 0 auto; padding: 4px 22px 0;
  display: flex; justify-content: flex-end;
}
.kopfzeile-oben .seitenlink { padding: 3px 0; }

.kopf-innen {
  max-width: 1220px; margin: 0 auto; padding: 5px 22px 9px;
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
}

/* Der Zeitschriftenkopf: „Der praktische Gartenratgeber“ steht im Heft
   dreizeilig, hier nebeneinander, damit die Leiste flach bleibt. */
/* Kein gemeinsamer gap: Die beiden Abstände in der Marke – Blatt zum
   Schriftzug, Schriftzug zum Trennstrich – sollen sich einzeln einstellen
   lassen. Über den gap ginge nur beides zugleich. */
.marke { display: flex; align-items: baseline; gap: 0; text-decoration: none; }
/* align-self: baseline setzt bei einem SVG die Unterkante des Kastens auf die
   Schriftlinie. Weil der Kasten auf die Zeichnung beschnitten ist, sitzt damit
   der Stängel selbst auf der Linie – bündig mit dem G von „Garten“. */
.marke .blatt {
  height: 21px; width: auto; flex: none; color: var(--apfel);
  align-self: baseline;
}
/* Titel und Zusatz stehen übereinander; das Blatt bleibt an der Schriftlinie
   der ersten Zeile. Der Textblock gibt seine Grundlinie an die Marke weiter,
   deshalb trägt align-items: baseline auch hier. */
.marke-text {
  display: flex; flex-direction: column; align-items: flex-start;
  margin-left: 3px;        /* Abstand Blatt -> Schriftzug */
}
.marke .titel {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1; color: #fff;
}
.marke .titel i {
  font-style: normal; font-weight: 400; color: rgba(255, 255, 255, .74);
}
/* Untereinander braucht es keinen Trennstrich mehr – der Zeilenwechsel
   trennt schon. Etwas weiter gesperrt, damit der Zusatz die Breite des
   Titels ungefähr aufnimmt. */
.marke .zusatz {
  font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .74);
  text-transform: uppercase; letter-spacing: .215em;
  margin-top: 4px;
}

/* Eine Zeile, immer – rechts neben der Marke. Reicht die Breite nicht, lässt
   sich die Leiste seitwärts schieben, statt umzubrechen: Ein Umbruch verschöbe
   den ganzen Inhalt darunter und ließe die Kopfhöhe je Ansicht springen. */
nav.reiter {
  /* Rechtsbündig: Weil „Abmelden“ jetzt eine eigene Zeile hat, ist die
     rechte Seite frei – die Reiter rücken dorthin, und zwischen Marke und
     Navigation entsteht Luft. */
  margin-left: auto;
  flex: 0 1 auto; min-width: 0;
  display: flex; gap: 1px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
nav.reiter::-webkit-scrollbar { height: 5px; }
nav.reiter::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .28); border-radius: 3px;
}
nav.reiter button {
  font: 500 13px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: .04em; padding: 11px 10px 10px; white-space: nowrap;
  border: 0; border-bottom: 3px solid transparent; background: transparent;
  color: rgba(255, 255, 255, .84); cursor: pointer; border-radius: 2px 2px 0 0;
}
nav.reiter button:hover {
  color: #fff; background: rgba(255, 255, 255, .12);
}
nav.reiter button[aria-current="page"] {
  color: #fff; border-bottom-color: var(--apfel); font-weight: 600;
  background: rgba(255, 255, 255, .1);
}

.seitenlink {
  font: 500 13px/1 var(--font-ui); color: rgba(255, 255, 255, .74);
  text-decoration: none; padding: 10px 12px; white-space: nowrap;
}
.seitenlink:hover { color: #fff; }

/* „Hören" steht neben den Reitern, ist aber keiner: Der Knopf führt auf eine
   eigene Seite, nicht in eine Ansicht des Portals. Der Rahmen sagt das - ein
   flacher Text daneben hätte ausgesehen wie ein zehnter Reiter, der sich
   bloß nicht markieren lässt. */
.hoerknopf {
  flex: none; margin-left: 14px; white-space: nowrap; text-decoration: none;
  font: 600 12.5px/1 var(--font-ui); text-transform: uppercase;
  letter-spacing: .05em; color: #fff;
  border: 1.5px solid var(--apfel); border-radius: 999px;
  padding: 8px 14px; transition: background .12s, color .12s;
}
.hoerknopf:hover { background: var(--apfel); color: #fff; }

/* ---------- Suchzeile ---------- */

/* Eine Stufe dunkler als die Kopfleiste: Das Suchfeld sitzt sichtbar *in*
   der Marke, statt darunter zu schweben. */
.suchzeile-band { background: var(--band-tief); }
.suchzeile {
  max-width: 1220px; margin: 0 auto;
  padding: 12px 22px; display: flex; gap: 10px; flex-wrap: wrap;
}
.suchfeld {
  flex: 1 1 340px; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid transparent;
  border-radius: var(--radius); padding: 0 12px;
}
.suchfeld:focus-within {
  border-color: var(--apfel); box-shadow: 0 0 0 3px rgba(131, 172, 24, .45);
}
.suchfeld svg { color: var(--gruen); flex: none; }
.suchfeld input {
  flex: 1; border: 0; background: transparent; color: #252525;
  font: 400 15px/1 var(--font-ui); padding: 11px 0; min-width: 0;
}
.suchfeld input:focus { outline: none; }
/* Die Auswahlfelder in der Suchzeile stehen auf Grün und brauchen deshalb
   einen eigenen, hellen Grund - die Regel weiter unten gilt dem Rest. */
.suchzeile select {
  background: rgba(255, 255, 255, .93); border-color: transparent;
  color: #252525;
}
.suchzeile select:hover { background: #fff; border-color: var(--apfel); }

select, .knopf {
  font: 400 14px/1 var(--font-ui); color: var(--tinte);
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 10px 11px; cursor: pointer;
}
select:hover, .knopf:hover { border-color: var(--gruen); }
.knopf.stark {
  background: var(--gruen); color: #fff; border-color: var(--gruen);
  font-weight: 600;
}
.knopf.stark:hover { background: var(--gruen-hell); }

/* ---------- Bühne ---------- */

main { max-width: 1220px; margin: 0 auto; padding: 26px 22px 80px; }

.hinweis {
  background: var(--leuchte); border-left: 5px solid var(--gruen);
  padding: 14px 18px; margin-bottom: 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.5px; line-height: 1.58; color: var(--gruen-tief);
}
.hinweis b { color: var(--gruen); }

/* Zweifarbige Unterstreichung: ein kurzer Apfelgrün-Balken auf der grauen
   Linie. Er markiert den Abschnittsanfang, ohne eine zweite Fläche zu
   brauchen. */
h2.abschnitt {
  position: relative;
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gruen);
  border-bottom: 1px solid var(--linie); padding-bottom: 8px; margin: 32px 0 16px;
}
h2.abschnitt::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 46px; height: 3px; background: var(--apfel);
}
.treffer-zahl { color: var(--tinte-leise); font-size: 14px; margin-bottom: 14px; }
.leer {
  text-align: center; color: var(--tinte-leise); padding: 60px 20px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
}

/* ---------- Trefferkarten ---------- */

.treffer { display: grid; gap: 14px; }
/* Ein Grünstreifen links, der beim Überfahren aufleuchtet: Die Karte bekommt
   damit eine Leserichtung, ohne dass eine zweite Farbfläche nötig wäre. */
article.karte {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 88px 1fr; gap: 16px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--schatten);
  transition: border-color .12s, box-shadow .12s;
}
article.karte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gruen); opacity: 0; transition: opacity .12s;
}
article.karte:hover {
  border-color: var(--gruen-matt);
  box-shadow: 0 2px 10px rgba(0, 107, 89, .12);
}
article.karte:hover::before { opacity: 1; }
article.karte img {
  width: 100%; border: 1px solid var(--linie); background: var(--papier-tief);
  aspect-ratio: 210 / 297; object-fit: cover; object-position: top;
}
/* Alle Überschriften gleich - auch die, die im Heft keine sind.
   Vorher standen ersetzte Überschriften grau und echte schwarz nebeneinander.
   Der Unterschied war zwar richtig, aber nirgends erklärt: Wer die Liste
   überfliegt, hält zwei Grautöne für einen Fehler, nicht für eine Auskunft.
   Die Auskunft steht jetzt im Klartext in der Quellenzeile. */
article.karte h3 { margin: 0 0 5px; font-size: 17.5px; }
article.karte h3 a { color: var(--tinte-leise); text-decoration: none; }
article.karte h3 a:hover { color: var(--gruen); }
.ohne-ueberschrift { font-style: italic; }
.ausriss { margin: 0 0 9px; font-size: 14.5px; color: var(--tinte-leise); line-height: 1.55; }
.ausriss mark { background: var(--apfel-hell); color: var(--tinte); padding: 0 2px; }

.marken { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.marke-chip {
  font: 500 11.5px/1 var(--font-ui); border: 1px solid var(--linie);
  background: var(--papier); color: var(--tinte-leise);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
}
.marke-chip:hover { border-color: var(--gruen); color: var(--gruen); }
.marke-chip.thema { background: var(--leuchte); color: var(--gruen); border-color: transparent; }
.marke-chip.verein { background: var(--apfel-hell); color: #40530b; border-color: transparent; }
.marke-chip.pflanze { font-style: italic; }
.quelle-zeile { font-size: 12.5px; color: var(--tinte-leise); }
.quelle-zeile a { color: var(--gruen); }

/* ---------- Raster (Titelbilder, Anzeigen) ---------- */

.raster {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.cover {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  box-shadow: var(--schatten);
}
.cover:hover { border-color: var(--gruen); }
.cover img { width: 100%; display: block; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; }
.cover div { padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.cover div b { font-weight: 600; }
.cover div span { color: var(--tinte-leise); }

/* ---------- Zeitstrahl ---------- */

.jahr-block { position: relative; padding-left: 22px; margin-bottom: 12px; }
.jahr-block::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 0;
  width: 2px; background: var(--linie);
}
.jahr-marke {
  position: relative; font-weight: 600; color: var(--gruen); font-size: 15px;
  margin-bottom: 4px;
}
.jahr-marke::before {
  content: ""; position: absolute; left: -21px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--apfel); border: 2px solid var(--karte);
}

/* ---------- Ortskarte ---------- */

.ortskarte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--schatten);
}
.ortskarte svg { width: 100%; height: auto; display: block; }

/* Der Kartengrund: das Land ringsum in Grau, Bayerns Bezirke in sieben
   Abstufungen der Leitfarbe. So hebt sich der Freistaat ab, ohne dass die
   Nachbarn verschwinden - erst dadurch lässt sich ein Punkt einordnen. */
.grund { fill: var(--papier-tief); }

/* Die Kulisse wird nur gezeichnet, nicht gefüllt.
   Vorher lag jedes Nachbarland als weiße Fläche auf grauem Grund. Weil die
   Umrisse einzeln vereinfacht sind, decken sich gemeinsame Grenzen nicht auf
   den Punkt – zwischen zwei Nachbarn blieben schmale Keile offen, durch die
   der graue Grund schien. Das sah aus wie Schatten und war keiner. Ohne
   Füllung kann keine Lücke entstehen; das Land ringsum bleibt eine Fläche,
   über der nur die Grenzlinien liegen. */
.kulisse { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.bezirk { stroke: var(--karte); stroke-width: 1.6; }
.bezirksname {
  text-anchor: middle; pointer-events: none;
  font: 600 13px var(--font-ui); letter-spacing: .18em;
  fill: var(--gruen-tief); fill-opacity: .72;
  paint-order: stroke; stroke: var(--karte); stroke-width: 3.5px;
  stroke-opacity: .5; stroke-linejoin: round;
}

.ortspunkt { cursor: pointer; }
.ortspunkt circle {
  fill: var(--gruen); fill-opacity: .72;
  stroke: var(--karte); stroke-width: 1.6;
}
.ortspunkt:hover circle { fill: var(--apfel); fill-opacity: .95; }
.ortspunkt text { text-anchor: middle; pointer-events: none; }
/* Die Zahl steht im Kreis - sie ist die Auskunft, auf die es ankommt. */
.ortspunkt text.wert { font: 600 13px var(--font-ui); fill: #fff; }
.ortspunkt text.name {
  font: 500 11.5px var(--font-ui); fill: var(--gruen-tief);
  paint-order: stroke; stroke: var(--karte); stroke-width: 3px;
  stroke-linejoin: round;
}
.ortspunkt:hover text.name { fill: var(--tinte); }
.karten-legende {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--tinte-leise); margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--linie);
}

/* ---------- Filterzeile ---------- */

.filterzeile { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.filterknopf {
  font: 500 13px/1 var(--font-ui); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: 8px 13px; cursor: pointer; color: var(--tinte-leise);
  display: inline-flex; align-items: center; gap: 6px;
}
.filterknopf span {
  background: var(--papier-tief); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; color: var(--tinte-leise);
}
.filterknopf:hover { border-color: var(--gruen); color: var(--gruen); }
.filterknopf.an {
  background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 600;
}
.filterknopf.an span { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Themenwelten ---------- */

.welten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Jede Themenwelt bekommt einen grünen Kopf - das ist die Gliederung, die
   im Heft die Rubrikzeile leistet. */
.welt {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.welt-kopf {
  background: var(--band); color: #fff; padding: 12px 16px;
  border-bottom: 3px solid var(--apfel);
}
.welt h3 { margin: 0; font-size: 16.5px; color: #fff; }
.welt .zahl { font-size: 12.5px; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.welt .marken { gap: 5px; padding: 15px 16px 16px; }

/* ---------- Register (gedrucktes Stichwortverzeichnis) ---------- */

.register-tabelle {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
.register-zeile {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; padding: 9px 15px; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.register-zeile:last-child { border-bottom: 0; }
.register-zeile:hover { background: var(--leuchte); }
/* Das Stichwort ist ein Knopf, sieht aber aus wie Text – erst beim
   Überfahren zeigt es, dass dahinter die Volltextsuche steckt. */
.register-zeile .stichwort {
  font: 500 16px/1.5 var(--font-ui); text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--tinte);
}
.register-zeile .stichwort:hover { color: var(--gruen); text-decoration: underline; }
.register-zeile .stichwort .unter { font-weight: 400; color: var(--tinte-leise); }
.register-zeile .fund { font-size: 13px; color: var(--tinte-leise); white-space: nowrap; }
.register-zeile .fund a { margin-left: 8px; }

/* ---------- Gartenjahr ---------- */

.monate { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.monat {
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 5px solid var(--gruen-matt);
  border-radius: var(--radius); padding: 15px; cursor: pointer;
  box-shadow: var(--schatten); transition: border-color .12s, box-shadow .12s;
}
.monat:hover {
  border-color: var(--linie); border-left-color: var(--gruen);
  box-shadow: 0 2px 10px rgba(0, 107, 89, .14);
}
.monat h3 { margin: 0; font-size: 17px; color: var(--gruen); }
.monat .zahl { font-size: 12.5px; color: var(--tinte-leise); margin-bottom: 10px; }

/* ---------- Rezepte ---------- */

/* Aufklappbar statt verlinkt: Ein Rezept ist kurz genug, um an Ort und Stelle
   gelesen zu werden – wer blättert, will nicht für jede Zutatenliste die
   Seite wechseln. */
.rezepte { display: grid; gap: 8px; }
details.rezept {
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--apfel); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
details.rezept[open] { border-left-color: var(--gruen); }
details.rezept summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 12px 15px; cursor: pointer; list-style: none;
}
details.rezept summary::-webkit-details-marker { display: none; }
details.rezept summary::before {
  content: "▸"; color: var(--gruen); font-size: 13px; line-height: 1.4;
}
details.rezept[open] summary::before { content: "▾"; }
details.rezept summary:hover { background: var(--leuchte); }
.rezept-name { font-weight: 600; font-size: 16px; }
.rezept-art {
  font-size: 11.5px; font-weight: 500; color: var(--gruen);
  background: var(--leuchte); border-radius: 999px; padding: 3px 10px;
}
.rezept summary .quelle-zeile { margin-left: auto; }
.rezept-inhalt {
  padding: 4px 15px 16px 32px; border-top: 1px solid var(--linie);
  margin-top: 2px;
}
.rezept-inhalt h4 {
  margin: 14px 0 4px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinte-leise);
}
.rezept-inhalt p { margin: 0; font-size: 15px; line-height: 1.62; }
.rezept-inhalt .zutatenliste { color: var(--tinte-leise); }
.rezept-inhalt .marken { margin-top: 10px; }
.marke-chip.zutat { background: var(--apfel-hell); color: #40530b; border-color: transparent; }
.marke-chip.zutat.an { background: var(--gruen); color: #fff; }
.marke-chip.zutat b { font-weight: 600; opacity: .65; }

/* ---------- Hörfassung ---------- */

.folgen { display: grid; gap: 6px; }
.folge {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: center; cursor: pointer;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: var(--radius); padding: 11px 15px; box-shadow: var(--schatten);
}
.folge:hover { border-color: var(--gruen-matt); background: var(--leuchte); }
.folge.laeuft { border-left-color: var(--apfel); background: var(--leuchte); }
.folge .abspielen {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%;
  background: var(--gruen); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; display: grid; place-items: center;
}
.folge:hover .abspielen, .folge.laeuft .abspielen { background: var(--gruen-hell); }
.folge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.folge-text b { font-weight: 600; font-size: 15.5px; }
.folge .dauer {
  font-size: 13px; color: var(--tinte-leise); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Der Fortschrittsbalken erscheint erst, wenn der Beitrag läuft – sonst
   stünden unter jeder Zeile leere Striche. */
.fortschritt { display: none; height: 3px; background: var(--papier-tief); margin-top: 5px; }
.folge.laeuft .fortschritt { display: block; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--apfel); }

/* ---------- Mondkalender ---------- */

/* Zwei Achsen je Tag, deshalb zwei Streifen unter der Zahl: oben die
   Lichtgestalt, unten der Stand der Bahn. Ein einzelnes Farbfeld könnte nur
   eine der beiden zeigen – und die untere ist im Gartenbau die wichtigere. */
.mondmonat {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--schatten);
}
.mondgitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mw {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--tinte-leise); text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 4px;
}
.mt {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); cursor: pointer; padding: 7px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mt.leer { border: 0; background: none; cursor: default; }
.mt:hover { border-color: var(--gruen); background: var(--leuchte); }
/* Der heutige Tag wird gefüllt, nicht nur umrandet - eine Linie von zwei
   Pixeln übersieht man in einem Raster aus 31 Kästchen. */
.mt.heute {
  border-color: var(--apfel); border-width: 2px; background: var(--apfel-hell);
}
.mt .tz {
  font-size: 14px; font-weight: 600; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.mt .streifen { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.mt .streifen i {
  display: block; height: 6px; border-radius: 3px; background: var(--papier-tief);
}

/* Die vier Phasen bekommen je eine eigene Farbfamilie. Vorher waren die
   Lichtgestalten zwei Grüntöne und die Bahn Apfelgrün und Senf - vier Farben
   aus derselben Ecke des Farbkreises, die nebeneinander schwer zu
   unterscheiden sind und bei einer Rot-Grün-Schwäche vollends zusammenfallen.

   Jetzt trennen sich die beiden Achsen schon an der Temperatur der Farbe:
   Die **Lichtgestalt** läuft von Gold (der Mond nimmt zu, das Licht wächst)
   nach Blau (er nimmt ab, die Nacht kommt zurück), die **Bahn** von
   Apfelgrün (der Saft steigt) nach Terrakotta (er sinkt in die Wurzel).
   Drei Werte je Phase: die kräftige Farbe für Streifen und Ränder, eine
   helle Fläche für Kästchen und Karten, ein dunkler Ton für Schrift darauf -
   so steht nie heller Text auf hellem Grund. */
:root {
  --phase-zu: #e09b23;       --phase-zu-flaeche: #fbeacc;     --phase-zu-schrift: #6d4406;
  --phase-ab: #5d80bb;       --phase-ab-flaeche: #dfe8f6;     --phase-ab-schrift: #294464;
  --phase-auf: #7ba316;      --phase-auf-flaeche: #dfeabf;    --phase-auf-schrift: #40530b;
  --phase-nieder: #c06a34;   --phase-nieder-flaeche: #f7e2d3; --phase-nieder-schrift: #6b3413;
}
@media (prefers-color-scheme: dark) {
  :root {
    --phase-zu: #f0b350;       --phase-zu-flaeche: #3b2f14;     --phase-zu-schrift: #f6dba7;
    --phase-ab: #86a6de;       --phase-ab-flaeche: #1d2841;     --phase-ab-schrift: #d3dff4;
    --phase-auf: #a6cf35;      --phase-auf-flaeche: #2f3d18;    --phase-auf-schrift: #d8eaa7;
    --phase-nieder: #dd9264;   --phase-nieder-flaeche: #3b2418; --phase-nieder-schrift: #f3d0b7;
  }
}

i.zu, .mb.zu, .mondphase.zu, .mondmarke.zu,
.mondbahnknopf.zu, .mondradhaelfte.zu {
  --mf: var(--phase-zu); --mf-flaeche: var(--phase-zu-flaeche);
  --mf-schrift: var(--phase-zu-schrift);
}
i.ab, .mb.ab, .mondphase.ab, .mondmarke.ab,
.mondbahnknopf.ab, .mondradhaelfte.ab {
  --mf: var(--phase-ab); --mf-flaeche: var(--phase-ab-flaeche);
  --mf-schrift: var(--phase-ab-schrift);
}
i.auf, .mb.auf, .mondphase.auf, .mondmarke.auf,
.mondbahnknopf.auf, .mondradhaelfte.auf {
  --mf: var(--phase-auf); --mf-flaeche: var(--phase-auf-flaeche);
  --mf-schrift: var(--phase-auf-schrift);
}
i.nieder, .mb.nieder, .mondphase.nieder, .mondmarke.nieder,
.mondbahnknopf.nieder, .mondradhaelfte.nieder {
  --mf: var(--phase-nieder); --mf-flaeche: var(--phase-nieder-flaeche);
  --mf-schrift: var(--phase-nieder-schrift);
}
.mt .streifen i.zu, .mt .streifen i.ab,
.mt .streifen i.auf, .mt .streifen i.nieder { background: var(--mf); }
i.mb {
  display: inline-block; width: 16px; height: 6px; border-radius: 2px;
  background: var(--mf); vertical-align: 1px; margin-right: 4px;
}

.mondphasen {
  display: grid; gap: 14px; margin-top: 6px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.mondphase {
  background: color-mix(in srgb, var(--mf-flaeche) 45%, var(--karte));
  border: 1px solid var(--linie);
  border-top: 4px solid var(--mf); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--schatten);
}
.mondphase.gewaehlt { background: var(--mf-flaeche); border-color: var(--mf); }
.mondphase h3 { margin: 0 0 2px; font-size: 16px; color: var(--mf-schrift); }
.mondphase .zahl { font-size: 12.5px; color: var(--tinte-leise); margin-bottom: 10px; }
.mondphase ul { margin: 0; padding-left: 18px; }
.mondphase li { font-size: 14.5px; line-height: 1.55; margin-bottom: 7px; }
.mondphase .woher {
  display: block; font-size: 11.5px; color: var(--tinte-leise);
  text-decoration: none;
}
.mondphase .woher:hover { color: var(--gruen); text-decoration: underline; }

/* ---------- Vereine ---------- */

.vereinsliste { display: grid; gap: 10px; }
.verein {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--apfel);
  border-radius: var(--radius); padding: 12px 15px; cursor: pointer;
  box-shadow: var(--schatten);
}
.verein:hover {
  border-color: var(--gruen-matt); border-left-color: var(--gruen);
  background: var(--leuchte);
}
.verein b { font-weight: 600; }
.verein .herkunft { font-size: 13px; color: var(--tinte-leise); }
.verein .anzahl {
  font-size: 12.5px; color: var(--gruen); background: var(--leuchte);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap; font-weight: 600;
}

/* ---------- Anzeigen-Chronik ---------- */

.firmen { display: grid; gap: 8px; }
.firma {
  display: grid; grid-template-columns: minmax(160px, 2fr) 90px 1fr 110px;
  gap: 14px; align-items: center; cursor: pointer;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 11px 15px;
}
.firma:hover { border-color: var(--gruen); }
.firma b { font-weight: 600; }
.firma .jahre { font-size: 13px; color: var(--tinte-leise); }
.balken { background: var(--papier-tief); border-radius: 999px; height: 9px; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--apfel); }

/* Der Ampelpunkt vor dem Firmennamen: Wer aussetzt, soll in der Liste
   auffallen, ohne dass man jede Zeile lesen muss. */
.punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
}
.punkt.aktiv { background: var(--apfel); }
.punkt.pause { background: var(--warnung); }
.pause-text { color: var(--warnung); font-weight: 600; }

/* ---------- Kundenblatt für den Anzeigenverkauf ---------- */

.kundenkopf {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; margin-bottom: 20px;
}
.kundenkopf h1 { margin: 0 0 4px; font-size: 26px; }
.kundenkopf .quelle-zeile { margin: 0; }
.lage {
  font-size: 13px; font-weight: 500; border-radius: 999px; padding: 7px 14px;
}
.lage.aktiv { background: var(--apfel-hell); color: #40530b; }
.lage.pause { background: #f6e2dd; color: var(--warnung); }

.kennzahlen {
  display: grid; gap: 10px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.kennzahl {
  background: var(--karte); border: 1px solid var(--linie);
  border-top: 3px solid var(--gruen); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--schatten);
}
.kennzahl b {
  display: block; font-size: 22px; font-weight: 600; color: var(--gruen);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.kennzahl span { font-size: 12.5px; color: var(--tinte-leise); }

/* Belegungsraster: Jahre als Zeilen, Monate als Spalten. Drei Zustände –
   gebucht, nicht gebucht, Ausgabe fehlt. Der dritte ist der wichtigste:
   Ohne ihn hielte der Verkauf eine Archivlücke für einen Kundenverlust. */
.belegung {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--schatten);
  overflow-x: auto;
}
.rz { display: grid; grid-template-columns: 46px repeat(12, 1fr); gap: 4px; align-items: center; }
.rz + .rz { margin-top: 4px; }
.rz.kopfzeile { margin-bottom: 6px; }
.rj {
  font-size: 12.5px; font-weight: 600; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.rm { font-size: 10.5px; color: var(--tinte-leise); text-align: center; }
.rf { display: block; height: 22px; border-radius: 2px; }
i.rf { display: inline-block; width: 16px; height: 11px; vertical-align: -1px; margin-right: 4px; }
.rf.voll { background: var(--gruen-matt); cursor: pointer; }
.rf.voll.gross { background: var(--gruen); }
.rf.voll:hover { background: var(--apfel); }
.rf.frei { background: var(--papier-tief); }
/* Schraffur statt Fläche: „liegt nicht vor" ist kein Zustand des Kunden. */
.rf.fehlt {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px,
    var(--linie) 3px, var(--linie) 5px);
}

.saison { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.saisonmonat { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.saisonmonat .balken {
  width: 100%; height: 56px; border-radius: 2px;
  display: flex; align-items: flex-end;
}
.saisonmonat .balken i { width: 100%; background: var(--gruen-matt); border-radius: 2px; }
.saisonmonat .mz {
  font-size: 12px; font-weight: 600; color: var(--gruen);
  font-variant-numeric: tabular-nums; min-height: 16px;
}
.saisonmonat .mn { font-size: 10.5px; color: var(--tinte-leise); }
.saisonmonat.ohne .balken { opacity: .5; }

/* ---------- Detailansicht ---------- */

.detail { display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: start; }
.detail img.seitenbild {
  width: 100%; border: 1px solid var(--linie); box-shadow: var(--schatten);
  background: var(--karte);
}
.seitenkopf {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--linie); padding-bottom: 6px; margin-bottom: 14px;
}
.seitenfuss {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--linie); padding-top: 6px; margin-top: 26px;
}
.detail h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.2; }
.ersatz-hinweis {
  margin: -2px 0 14px; font-size: 13.5px; font-style: italic;
  color: var(--tinte-leise);
}
.detail .fliess { font-size: 16.5px; line-height: 1.72; white-space: pre-wrap; }
.bildunterschrift {
  margin-top: 20px; padding: 12px 15px; background: var(--papier-tief);
  border-radius: var(--radius); font-size: 14px; color: var(--tinte-leise);
}
.bildunterschrift b { color: var(--tinte); }

.zurueck {
  background: none; border: 0; color: var(--gruen); cursor: pointer;
  font: 500 14px/1 var(--font-ui); padding: 0 0 16px;
}
.zurueck:hover { text-decoration: underline; }

/* ---------- Anmeldung ---------- */

.anmelde-kasten {
  max-width: 430px; margin: 9vh auto; background: var(--karte);
  border: 1px solid var(--linie); border-top: 4px solid var(--gruen);
  border-radius: var(--radius); padding: 34px; box-shadow: var(--schatten);
}
.anmelde-kasten h1 { margin: 0 0 6px; font-size: 22px; color: var(--gruen); }
.anmelde-kasten p { margin: 0 0 22px; color: var(--tinte-leise); font-size: 14.5px; }
.anmelde-kasten input[type="password"] {
  width: 100%; padding: 12px; font: 400 16px var(--font-ui);
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier); color: var(--tinte);
}
.anmelde-kasten input:focus {
  outline: none; border-color: var(--gruen); box-shadow: 0 0 0 3px var(--leuchte);
}
.anmelde-kasten button { width: 100%; margin-top: 14px; padding: 12px; }
.fehler { color: var(--warnung); font-size: 14px; margin-top: 12px; min-height: 20px; }

/* ---------- Fußbereich ---------- */

/* Das Gegenstück zur Kopfleiste: dasselbe Petrolgrün, eine Stufe dunkler,
   schließt die Seite unten ab. Impressum und Datenschutz waren bisher nur
   von der Anmeldeseite aus erreichbar - das ist zu wenig. */
footer.fuss {
  background: var(--band-tief); color: rgba(255, 255, 255, .8);
  border-top: 4px solid var(--apfel); margin-top: 40px;
}
.fuss-innen {
  max-width: 1220px; margin: 0 auto; padding: 26px 22px;
  display: flex; gap: 26px; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start;
  font-size: 13.5px; line-height: 1.6;
}
.fuss-innen b { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
.fuss-innen span { display: block; }
.fuss-innen nav { display: flex; gap: 20px; flex-wrap: wrap; }
.fuss-innen nav a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.fuss-innen nav a:hover { color: var(--apfel); border-bottom-color: var(--apfel); }

/* Die letzte Zeile der Seite. Über eine Haarlinie vom Rest abgesetzt und
   leiser gesetzt - sie ist ein Vermerk, keine Auskunft. */
.fuss-schluss {
  max-width: 1220px; margin: 0 auto; padding: 14px 22px 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px; color: rgba(255, 255, 255, .62);
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  max-width: 760px; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 34px;
}
.rechtstext h1 { font-size: 26px; margin: 0 0 20px; color: var(--gruen); }
.rechtstext h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--gruen); margin: 32px 0 10px;
  border-bottom: 1px solid var(--linie); padding-bottom: 6px;
}
.rechtstext h3 { font-size: 16px; margin: 22px 0 6px; }
.rechtstext p, .rechtstext li { font-size: 15px; line-height: 1.65; }

/* Post-, Haus- und Kontaktanschrift nebeneinander, solange Platz ist –
   untereinander wäre das eine unnötig lange Kolonne. */
.anschriften {
  display: grid; gap: 18px 26px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  font-size: 15px; line-height: 1.6;
}
.anschriften b {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinte-leise); margin-bottom: 3px;
}

.preise { border-collapse: collapse; font-size: 15px; margin: 6px 0 14px; }
.preise td { padding: 5px 0; border-bottom: 1px solid var(--linie); }
.preise td:last-child {
  text-align: right; padding-left: 26px; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600;
}

/* ---------- Schmale Schirme ---------- */

@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr; gap: 20px; }
  .detail img.seitenbild { max-width: 230px; }
  .firma { grid-template-columns: 1fr auto; }
  .firma .balken { display: none; }
  /* Auf schmalen Schirmen die Reiter etwas engersetzen, damit weniger
     geschoben werden muss. Umbrechen sollen sie weiterhin nicht. */
  nav.reiter { padding: 0 14px; }
  nav.reiter button { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 560px) {
  article.karte { grid-template-columns: 62px 1fr; gap: 12px; }
  main { padding: 18px 14px 60px; }
  .kopf-innen, .suchzeile { padding-left: 14px; padding-right: 14px; }
  .detail h1 { font-size: 24px; }
}

/* Die Bestandsangabe neben dem Monatsfeld: Sie nennt, wie viele Ausgaben der
   Mondkalender abdeckt – und welche nicht. Beiläufig gesetzt, aber lesbar;
   eine Lücke im Archiv soll man finden, ohne danach zu suchen. */
.bestand {
  margin-left: 12px; font-size: 13px; color: var(--tinte-leise);
}

/* ---------------- Mondkalender: heute, Rückwärtssuche, Jahreslauf --------- */

/* Die Zeile zum Blättern. Sie ersetzt das alte Auswahlfeld, das nur die
   Monate des Archivs kannte - jetzt ist jeder Monat erreichbar. */
.mondzeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.mondzeile input[type="month"] {
  font: inherit; font-size: 14px; padding: 6px 9px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); color: var(--tinte);
}
.mondzeile .knopf { padding: 6px 12px; }

/* Der Tageskopf: die Antwort auf die Frage, die ein Heft nicht stellen kann. */
.mondheute {
  background: linear-gradient(118deg, var(--leuchte) 0%, var(--mondheute-warm) 100%);
  border: 1px solid var(--gruen-matt);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 22px;
}
.mondheute-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.mondheute-datum { font-size: 17px; font-weight: 700; color: var(--gruen); }
.mondheute .mondphasen { margin-top: 0; }

/* Ein farbiges Schildchen für die Phase - dieselben Farben wie die Streifen
   im Tagesraster, damit man den Zusammenhang ohne Legende sieht. */
/* Helle Fläche mit farbigem Rand statt einer vollen Farbfläche mit weißer
   Schrift: Auf Gold und Apfelgrün ist Weiß kaum zu lesen, und ein Dutzend
   satter Farbflecke nebeneinander wirkt unruhig. */
.mondmarke {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--mf-flaeche); color: var(--mf-schrift);
  border: 1px solid var(--mf); white-space: nowrap;
}

.mondantwort { margin: 14px 0 4px; }
.mondfenster {
  font-size: 16px; margin: 0 0 10px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.mondregelliste { margin: 10px 0 0; padding-left: 18px; }
.mondregelliste li { font-size: 14.5px; line-height: 1.55; margin-bottom: 8px; }
.mondregelliste .woher, .mondphase .woher { color: var(--tinte-leise); }

/* Der Jahreslauf: zwölf Karten, in jeder die Regeln nach Phase sortiert. */
.mondregelblock { margin-top: 12px; }
.mondregelblock ul { margin: 7px 0 0; padding-left: 18px; }
.mondregelblock li {
  font-size: 13.5px; line-height: 1.5; margin-bottom: 6px;
}
.mondregelblock .woher { display: block; font-size: 11.5px; }

#ics-adresse {
  display: inline-block; margin-top: 4px; padding: 3px 8px;
  background: var(--papier-tief); border-radius: var(--radius);
  font-size: 13px; user-select: all;
}

/* ---------------- Die Mondscheibe und das Mondrad ------------------------ */

/* Die Scheibe: heller Teil auf dunklem Grund, dazu eine feine Randlinie,
   damit auch der Neumond als Kreis erkennbar bleibt und nicht verschwindet. */
.mondscheibe { display: block; overflow: visible; }

/* Nicht auf .mondscheibe einschraenken: Dieselben Teile werden auch als
   Gruppe in das Mondrad gesetzt, und dort gaebe es sonst keine Fuellung -
   der Mond waere durchweg schwarz. */
.mondnacht { fill: var(--mondnacht); }
.mondlicht { fill: var(--mondlicht); }
.mondrand { fill: none; stroke: var(--mondkante); stroke-width: .8; }

:root {
  --mondnacht: #38446e;      /* Nachtseite: tiefes Nachtblau, kein Schwarz */
  --mondlicht: #ffe6a8;      /* Lichtseite: warmes Mondgold (Rückfallwert) */
  --mondkante: #aeb8d4;
  --mondschein: rgba(240, 190, 90, .5);
  --mondhimmel: rgba(206, 224, 245, .5);   /* Wasch hinter dem Mondrad */
  --mondheute-warm: #fdf3dd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --mondnacht: #171f3d;
    --mondlicht: #f7dfa6;
    --mondkante: #4a5680;
    --mondschein: rgba(240, 190, 90, .34);
    --mondhimmel: rgba(52, 70, 112, .42);
    --mondheute-warm: #21302c;
  }
}

/* Die Lichtseite bekommt einen Verlauf statt einer flachen Fläche: innen fast
   weiß, zum Rand hin golden. Das ist der ganze Unterschied zwischen einem
   ausgeschnittenen Stück Papier und etwas, das leuchtet. Der Verlauf steht
   einmal im Dokument (index.html) und wird von jeder Scheibe benutzt; die
   Zeile mit var(--mondlicht) darüber bleibt als Rückfall stehen. */
.mondlicht { fill: url(#mondlicht-verlauf); }

/* Nur die große Scheibe im Tageskopf bekommt einen Schein - im Tagesraster
   läge er sonst 31-mal als Schleier über dem Gitter. */
.mondscheibe.gross { filter: drop-shadow(0 0 7px var(--mondschein)); }

/* Das Rad: Kreis und Bahnwahl nebeneinander, auf schmalem Schirm untereinander. */
.mondrad {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 14px 18px; margin-bottom: 16px;
}
.mondrad > svg {
  width: 420px; max-width: 100%; height: auto; flex: none;
  /* Ein Hauch Nachthimmel hinter der Bahn - er hebt die Scheiben heraus,
     ohne dass eine zweite Fläche gezeichnet werden müsste. */
  background: radial-gradient(circle at 50% 50%,
    var(--mondhimmel) 0%, transparent 64%);
}

.mondradbahn { fill: none; stroke: var(--linie); stroke-width: 1.2; }

/* Die beiden Hälften sind Schaltflächen - unsichtbar, bis man darüberfährt.
   Ein dauerhaft gefärbter Halbkreis würde mit den Scheiben darauf streiten. */
.mondradhaelfte { fill: transparent; cursor: pointer; }
.mondradhaelfte:hover, .mondradhaelfte.an { fill: var(--mf-flaeche); }

.mondradheute { fill: none; stroke: var(--apfel); stroke-width: 2.5; }
.mondradmarke {
  font: 500 10.5px var(--font-ui); fill: var(--tinte-leise);
  dominant-baseline: middle;
}
.mondradtitel {
  font: 600 17px var(--font-ui); fill: var(--gruen); text-anchor: middle;
}
.mondradtitel.klein {
  font-size: 12px; font-weight: 500; fill: var(--tinte-leise);
}

/* Die Bahnachse: eigene Zeichen, weil sie am Mond nicht abzulesen ist. */
.mondbahnwahl { flex: 1 1 210px; min-width: 200px; }
.mondbahnknopf {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-bottom: 8px; padding: 8px 12px; cursor: pointer; text-align: left;
  background: var(--karte); color: var(--tinte);
  border: 1px solid var(--linie); border-left: 4px solid var(--mf);
  border-radius: var(--radius); font: inherit;
}
.mondbahnknopf:hover { background: var(--mf-flaeche); }
.mondbahnknopf.an { background: var(--mf-flaeche); border-color: var(--mf); }
.mondbahnknopf svg { width: 40px; height: 24px; flex: none; }
.mondbahnknopf svg path { fill: none; stroke: var(--mf); stroke-width: 2.4; }
.mondbahnknopf svg path.spitze { fill: var(--mf); stroke: none; }
.mondbahnknopf span { font-size: 14px; font-weight: 600; }
.mondbahnknopf small {
  display: block; font-size: 12px; color: var(--tinte-leise); font-weight: 400;
}

/* Im Tagesraster steht die Scheibe über der Zahl. */
.mt .mondscheibe.klein { width: 22px; height: 22px; }
.mt.fern { opacity: .34; }
.karten-legende .mondscheibe.legende {
  width: 15px; height: 15px; display: inline-block; vertical-align: -3px;
  margin-right: 4px;
}

/* Die Zeichnung auf dem Rad darf keine Klicks abfangen: Wer auf eine Scheibe
   zielt, meint die Hälfte darunter - also die Phase. */
.mondradscheibe, .mondradmarke, .mondradtitel, .mondradheute {
  pointer-events: none;
}

/* Die Scheibe im Tageskopf: gross genug, dass die Gestalt sofort lesbar ist. */
.mondscheibe.gross { width: 42px; height: 42px; flex: none; }
.mondheute-datum small {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--tinte-leise); letter-spacing: 0;
}

/* Die Namensnennung unter der Karte. Sie ist keine Höflichkeit, sondern
   Bedingung der ODbL, unter der die OpenStreetMap-Daten stehen. */
.kartenquelle {
  margin: 8px 0 0; font-size: 12px; color: var(--tinte-leise);
}
.kartenquelle a { color: inherit; text-decoration: underline; }
.kartenquelle a:hover { color: var(--gruen); }

/* Ein Widerspruch zwischen Heft und Astronomie wird nicht stillschweigend
   geschluckt, sondern angezeigt - in Warnfarbe, aber ohne Alarm. */
.quelle-zeile.unstimmig {
  border-left: 3px solid var(--warnung); padding-left: 10px;
  color: var(--tinte);
}
.quelle-zeile.unstimmig b { color: var(--warnung); }

/* ---------- Aktuelle Ausgabe: Heftkopf und Rubriken ---------- */

/* Der Kopf zitiert die Anmutung des Hefts: Titelseite links, daneben die
   Angaben und die Rubriken als Kästchen. Auf schmalen Geräten rutscht die
   Titelseite über den Text - nebeneinander bliebe für beides zu wenig. */
.heftkopf {
  display: grid; grid-template-columns: 208px 1fr; gap: 30px;
  align-items: start; padding-bottom: 26px; margin-bottom: 30px;
  border-bottom: 2px solid var(--gruen);
}
@media (max-width: 700px) {
  .heftkopf { grid-template-columns: 116px 1fr; gap: 18px; }
}

.heftcover img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.heftcover:hover img { border-color: var(--gruen); }

.heftmarke {
  margin: 0; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--gruen);
}
.heftdaten h1 { margin: 4px 0 6px; font-size: 34px; line-height: 1.1; }
@media (max-width: 700px) { .heftdaten h1 { font-size: 24px; } }

.heftknoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.heftknoepfe .knopf { display: inline-block; text-decoration: none; }

.rubrikzeile {
  margin: 24px 0 8px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--tinte-leise);
}
.rubriken { display: flex; flex-wrap: wrap; gap: 6px; }

.rubrikkasten {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 7px 11px; cursor: pointer;
  background: var(--karte); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--radius);
  font: 400 13px var(--font-ui);
}
.rubrikkasten b { font-weight: 500; }
.rubrikkasten span { font-size: 11px; color: var(--tinte-leise); }
.rubrikkasten:hover { border-color: var(--gruen); background: var(--leuchte); }
.rubrikkasten.gewaehlt {
  background: var(--gruen); border-color: var(--gruen); color: #fff;
}
.rubrikkasten.gewaehlt span { color: rgba(255, 255, 255, .78); }

/* Der Weg zurück zu allen Beiträgen steht in der Abschnittszeile selbst -
   ein zweiter Kasten darunter wäre eine Zeile für nichts. */
.filter-weg {
  margin-left: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 11.5px var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; color: var(--apfel);
}
.filter-weg:hover { text-decoration: underline; }