/* =========================================================================
   Heilpflanzen-Sammelkalender
   -------------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Tokens (Farben, Typo, Raster)      5. Jahresband (Signaturbauteil)
     2. Reset und Grundlagen               6. Pflanzenkarten und Filter
     3. Layout und Kopfbereich             7. Detailansicht
     4. Bedienelemente                     8. Matrix, Merkliste, Textseiten
                                           9. Druck
   Es werden keine externen Schriften geladen. Die Schriftfamilien kommen
   aus dem System; die Rollenverteilung ist bewusst gewaehlt:
     - Serif kursiv  = botanische Namen (botanische Schreibkonvention)
     - Monospace     = Daten, Monate, Kuerzel (Herbarschild, Tabellenzelle)
     - Sans          = Fliesstext und Bedienung
   ========================================================================= */

/* == 1. Tokens ========================================================== */

:root {
  /* Papier und Tinte: gruenstichiges Papier statt Creme, kuehle Tinte */
  --paper:      #f2f4ef;
  --paper-2:    #e8ebe3;
  --paper-3:    #dde2d6;
  --ink:        #14181a;
  --ink-2:      #4c554e;
  --ink-3:      #586158;   /* AA auf allen drei Papiertoenen: 5.81 / 5.34 / 4.88 */
  --line:       #c6cec0;
  --line-soft:  #dbe0d4;
  --shadow:     0 1px 2px rgba(20, 24, 26, .06), 0 4px 16px rgba(20, 24, 26, .05);
  --warn-bg:    #fbeceb;
  --warn-ink:   #8c2b26;
  --warn-line:  #e2b3af;
  --stop-bg:    #f6ecf3;
  --stop-ink:   #7a2a5c;
  --stop-line:  #ddb4cd;

  /* Pflanzenteile. Reihenfolge folgt dem Wachstum: Knospe -> Rinde */
  /* Diese Werte sind nachgerechnet, nicht gegriffen: jede Farbe traegt
     weisse Schrift mit mindestens 4.6:1 und hebt sich als Rahmen mit
     mindestens 3:1 vom Papier ab. */
  --t-knospe: #7c68a6;
  --t-trieb:  #2b8367;
  --t-blatt:  #408335;
  --t-bluete: #a0691b;
  --t-frucht: #ab3b42;
  --t-wurzel: #806340;
  --t-rinde:  #566575;

  /* Typografie */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.28rem + .85vw, 2rem);
  --step-3:  clamp(1.8rem, 1.4rem + 2vw, 3rem);

  /* Raster */
  --gap: 1rem;
  --pad: clamp(1rem, .6rem + 2vw, 2rem);
  --radius: 3px;
  --tap: 44px;
  --maxw: 78rem;

  color-scheme: light dark;
}

/* Jahreszeiten-Akzent. Der Farbverlauf laeuft einmal durch das Jahr:
   kaltes Blau im Januar, Gruen im Fruehjahr, Gold im Hochsommer,
   Rost im Herbst, kaltes Violett im Dezember - dann schliesst sich der Ring. */
/* Jeder Akzent traegt weisse Schrift und ist zugleich selbst als Text auf
   Papier lesbar - beides mit mindestens 4.6:1. Deshalb sind die Sommertoene
   dunkler, als man sie intuitiv waehlen wuerde. */
[data-monat="1"]  { --accent: #4a6c87; }
[data-monat="2"]  { --accent: #566a92; }
[data-monat="3"]  { --accent: #527841; }
[data-monat="4"]  { --accent: #417b36; }
[data-monat="5"]  { --accent: #377c33; }
[data-monat="6"]  { --accent: #537824; }
[data-monat="7"]  { --accent: #69741d; }
[data-monat="8"]  { --accent: #846a22; }
[data-monat="9"]  { --accent: #956325; }
[data-monat="10"] { --accent: #955227; }
[data-monat="11"] { --accent: #78472f; }
[data-monat="12"] { --accent: #524e69; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #0f1310;
    --paper-2:    #171d17;
    --paper-3:    #202719;
    --ink:        #e9eee4;
    --ink-2:      #a5b1a0;
    --ink-3:      #93a090;   /* AA auf allen drei Papiertoenen: 6.84 / 6.26 / 5.62 */
    --line:       #2e3729;
    --line-soft:  #232b20;
    --shadow:     0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --warn-bg:    #2c1614;
    --warn-ink:   #f0a49e;
    --warn-line:  #6b302b;
    --stop-bg:    #2a1524;
    --stop-ink:   #e4a8ce;
    --stop-line:  #63304f;

    --t-knospe: #a996d0;
    --t-trieb:  #56bd9c;
    --t-blatt:  #74bd63;
    --t-bluete: #e0a752;
    --t-frucht: #e0777c;
    --t-wurzel: #b89467;
    --t-rinde:  #90a1b2;
  }
  [data-monat="1"]  { --accent: #7ba7c6; }
  [data-monat="2"]  { --accent: #8c9ed0; }
  [data-monat="3"]  { --accent: #8fc078; }
  [data-monat="4"]  { --accent: #7fc86c; }
  [data-monat="5"]  { --accent: #6cc465; }
  [data-monat="6"]  { --accent: #a0cf58; }
  [data-monat="7"]  { --accent: #c3ce4d; }
  [data-monat="8"]  { --accent: #dcb954; }
  [data-monat="9"]  { --accent: #dda257; }
  [data-monat="10"] { --accent: #d68655; }
  [data-monat="11"] { --accent: #bc8060; }
  [data-monat="12"] { --accent: #9a95bb; }
}

/* Traegerklassen fuer die Teilfarbe. Ersetzen die frueheren
   style-Attribute, damit die Content-Security-Policy ohne
   'unsafe-inline' fuer Stile auskommt. */
.t-knospe { --teil-farbe: var(--t-knospe); }
.t-trieb  { --teil-farbe: var(--t-trieb); }
.t-blatt  { --teil-farbe: var(--t-blatt); }
.t-bluete { --teil-farbe: var(--t-bluete); }
.t-frucht { --teil-farbe: var(--t-frucht); }
.t-wurzel { --teil-farbe: var(--t-wurzel); }
.t-rinde  { --teil-farbe: var(--t-rinde); }

/* Der Piktogramm-Vorrat haengt unsichtbar im Dokument */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* == 2. Reset und Grundlagen ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: var(--step-3); letter-spacing: -.03em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--accent, var(--ink));
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: .5rem; }

/* Botanischer Name: kursive Serife, so wie es die Botanik schreibt */
.botanisch { font-family: var(--f-serif); font-style: italic; letter-spacing: 0; }
/* Daten, Kuerzel, Monate: Monospace wie auf einem Herbarschild */
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* == 3. Layout und Kopfbereich ========================================== */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

.kopf {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.kopf__zeile {
  display: flex; align-items: baseline; gap: 1rem 1.5rem;
  flex-wrap: wrap; padding-block: 1rem .75rem;
}
.marke {
  font-weight: 700; font-size: var(--step-1); letter-spacing: -.03em;
  text-decoration: none; display: flex; align-items: baseline; gap: .5rem;
}
.marke__punkt {
  width: .6em; height: .6em; border-radius: 50%;
  background: var(--accent); flex: none; transition: background .4s ease;
}
.marke__sub {
  font-family: var(--f-mono); font-size: var(--step--1);
  color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase;
}

.hauptnav { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
.hauptnav a, .hauptnav button {
  padding: .5rem .7rem; min-height: var(--tap); display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none; font-size: var(--step--1); font-weight: 600;
  color: var(--ink-2); border: 0; background: none; border-radius: var(--radius); cursor: pointer;
}
.hauptnav a:hover, .hauptnav button:hover { background: var(--paper-2); color: var(--ink); }
.hauptnav a[aria-current="page"],
.hauptnav button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
#merkzaehler {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em;
  padding-inline: .3em; border-radius: 100px; font-size: .78em;
  background: var(--accent); color: #fff; font-weight: 700;
}
@media (prefers-color-scheme: dark) { #merkzaehler { color: #10140f; } }
#merkzaehler[hidden] { display: none; }

/* Grundgroesse fuer die Sprite-Piktogramme; einzelne Stellen ueberschreiben sie */
svg[aria-hidden="true"] use { color: inherit; }
.kopf svg, .haftung svg, .knopf svg, .teilknopf svg, .teilchip svg,
.merkknopf svg, .zettel__weg svg, .legende svg, .suchfeld svg,
.karte__standort svg, .teiletabelle__name svg, .feld svg, .detail__schliessen svg {
  display: inline-block; vertical-align: middle;
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }

/* Haftungshinweis: sichtbar, aber nicht im Weg */
.haftung {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.haftung__inner { padding-block: .6rem; display: flex; gap: .6rem; align-items: flex-start; }
.haftung strong { color: var(--ink); }
.haftung svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .15em; color: var(--warn-ink); }

.fuss {
  margin-top: 4rem; border-top: 1px solid var(--line);
  padding-block: 2rem 3rem; font-size: var(--step--1); color: var(--ink-2);
}
.fuss__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.fuss h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .35rem; }

/* == 4. Bedienelemente ================================================== */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: var(--tap); padding: .55rem 1rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--paper-3); border-color: var(--ink-3); }
.knopf--stark { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .knopf--stark { color: #10140f; } }
.knopf--stark:hover { filter: brightness(1.08); }
.knopf[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.suchfeld {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding-inline: .75rem;
}
.suchfeld:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.suchfeld svg { width: 1.1em; height: 1.1em; color: var(--ink-3); flex: none; }
.suchfeld input {
  flex: 1; min-width: 0; min-height: var(--tap);
  border: 0; background: none; color: inherit; font: inherit; padding: 0;
}
.suchfeld input:focus { outline: none; }
.suchfeld button {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  width: var(--tap); height: var(--tap); flex: none;
}

/* == 5. Jahresband ====================================================== */
/* Das Signaturbauteil. Zwoelf Zellen fuer zwoelf Monate, in drei Groessen:
   gross als Monatsnavigation, klein auf jeder Pflanzenkarte, ganzseitig
   in der Jahresmatrix. Immer dieselbe Leserichtung, immer dieselbe Logik. */

.band {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px; width: 100%;
}

/* -- 5a. Als Monatsnavigation ------------------------------------------ */
.monatsleiste {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding-block: .6rem;
}
.monatsleiste .band { gap: 3px; }
.monatsknopf {
  appearance: none; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--paper-2); cursor: pointer; padding: .5rem .1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: var(--tap);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.monatsknopf__kuerzel {
  font-family: var(--f-mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .02em; line-height: 1;
}
.monatsknopf:hover { background: var(--paper-3); border-color: var(--ink-3); }
.monatsknopf[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .monatsknopf[aria-pressed="true"] { color: #10140f; }
}
/* Der laufende Kalendermonat bekommt eine Marke, auch wenn er nicht gewaehlt ist */
.monatsknopf--heute::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .55;
}

/* Auf schmalen Geraeten muessen zwoelf Knoepfe nebeneinander passen.
   Weniger Innenabstand und ein kleinerer Schriftgrad reichen dafuer;
   die Trefferflaeche bleibt ueber die Hoehe bei 44 px. */
@media (max-width: 30rem) {
  .monatsleiste .wrap { padding-inline: .5rem; }
  .monatsleiste .band { gap: 2px; }
  .monatsknopf { padding-inline: 0; }
  .monatsknopf__kuerzel { font-size: .72rem; letter-spacing: -.02em; }
  /* Der Zusatz neben dem Markennamen kostet auf dem Handy nur eine Zeile */
  .marke__sub { display: none; }
}

/* -- 5b. Als Mini-Streifen auf der Karte ------------------------------- */
.miniband {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;
  height: 1.1rem; margin-top: .6rem;
  border: 1px solid var(--line-soft); border-radius: 2px; overflow: hidden;
  background: var(--line-soft);
}
.miniband__zelle { background: var(--paper-2); position: relative; }
.miniband__zelle--aktiv { background: var(--accent); }
.miniband__zelle--jetzt { box-shadow: inset 0 0 0 2px var(--ink); }

/* == 6. Filter und Pflanzenkarten ======================================= */

.ansicht { padding-block: 1.5rem 0; }
.ansicht[hidden] { display: none; }

.monatskopf { padding-block: 1.5rem .5rem; }
.monatskopf__eyebrow {
  font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
/* Der Vorschaukasten und die Kartenliste bekommen reservierte Hoehen,
   weil sie vom Skript gefuellt werden - ohne das springt das Layout
   beim Laden. Die Ueberschrift braucht keine: ihr Platzhaltertext ist
   so lang wie der echte und bricht deshalb gleich um. */
.monatskopf h1 { margin-block: .1em .2em; }
.monatskopf h1 em { font-style: normal; color: var(--accent); }
.monatskopf__zahl { font-family: var(--f-mono); color: var(--ink-2); font-size: var(--step--1); }

.vorschau {
  border-left: 3px solid var(--accent); background: var(--paper-2);
  padding: .8rem 1rem; margin-block: 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1); min-height: 5.5rem;
}
.vorschau strong { display: block; margin-bottom: .2rem; }
.vorschau__liste { color: var(--ink-2); }
.vorschau button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; text-decoration: underline; text-underline-offset: .18em; font: inherit;
}

.filter { margin-block: 1.25rem; }
.filter__zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.filter__zeile + .filter__zeile { margin-top: .7rem; }
.filter__label {
  font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); flex: none; min-width: 6.5rem;
}
.filter .suchfeld { flex: 1 1 16rem; }
.filter select {
  min-height: var(--tap); padding: .4rem .6rem; font: inherit; font-size: var(--step--1);
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}

.teilfilter { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.teilknopf {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: var(--tap); padding: .4rem .7rem;
  border: 1px solid var(--line); border-radius: 100px; background: var(--paper-2);
  font-size: var(--step--1); font-weight: 600; cursor: pointer;
}
.teilknopf svg { width: 1.1em; height: 1.1em; color: var(--teil-farbe, var(--ink-2)); }
.teilknopf:hover { border-color: var(--ink-3); }
.teilknopf[aria-pressed="true"] {
  background: var(--teil-farbe); border-color: var(--teil-farbe); color: #fff;
}
.teilknopf[aria-pressed="true"] svg { color: #fff; }
@media (prefers-color-scheme: dark) {
  .teilknopf[aria-pressed="true"] { color: #10140f; }
  .teilknopf[aria-pressed="true"] svg { color: #10140f; }
}

.trefferzeile {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: baseline;
  padding-block: 1rem .5rem; border-top: 1px solid var(--line-soft);
  font-size: var(--step--1); color: var(--ink-2);
}
.trefferzeile output { font-family: var(--f-mono); color: var(--ink); font-weight: 600; }

.karten {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  min-height: 70vh;
}
.karten[aria-busy="true"] { min-height: 70vh; }

.karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1rem 1rem 1.1rem;
  transition: border-color .15s ease, transform .15s ease;
}
.karte:hover { border-color: var(--ink-3); }
.karte--gesperrt { background: var(--stop-bg); border-color: var(--stop-line); }

.karte__kopf { display: flex; gap: .6rem; align-items: flex-start; }
.karte__titel { flex: 1; min-width: 0; }
.karte__name {
  font-size: var(--step-1); font-weight: 650; letter-spacing: -.02em;
  margin: 0; line-height: 1.15;
}
.karte__name button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.karte__name button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.karte__bot { display: block; font-size: var(--step--1); color: var(--ink-2); margin-top: .15rem; }

.merkknopf {
  position: relative; z-index: 1; flex: none;
  width: var(--tap); height: var(--tap); margin: -.35rem -.35rem 0 0;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-3);
}
.merkknopf:hover { border-color: var(--line); color: var(--ink); background: var(--paper); }
.merkknopf svg { width: 1.3em; height: 1.3em; }
.merkknopf[aria-pressed="true"] { color: var(--accent); }
.merkknopf[aria-pressed="true"] svg { fill: currentColor; }

.karte__teile { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }
/* Die Beschriftung steht in Tintenfarbe, nicht in der Teilfarbe: als
   kleiner Text auf getoentem Grund kaeme die Teilfarbe nie auf 4.5:1.
   Die Zuordnung tragen Rahmen und Piktogramm. */
.teilchip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .03em;
  padding: .18rem .45rem; border-radius: 100px;
  border: 1px solid var(--teil-farbe);
  color: var(--ink); background: color-mix(in srgb, var(--teil-farbe) 10%, transparent);
}
.teilchip svg { width: .95em; height: .95em; color: var(--teil-farbe); }

.karte__meta {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem;
}
.marker {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .2rem .45rem; border-radius: 2px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
}
.marker--gift   { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg); }
.marker--stop   { color: var(--stop-ink); border-color: var(--stop-line); background: var(--stop-bg); }
.marker--schwer { color: var(--warn-ink); border-color: var(--warn-line); background: var(--warn-bg); }

.karte__standort {
  margin-top: .7rem; font-size: var(--step--1); color: var(--ink-2);
  display: flex; gap: .4rem; align-items: baseline;
}
.karte__standort svg { width: .95em; height: .95em; flex: none; color: var(--ink-3); }

.leer {
  padding: 3rem 1rem; text-align: center; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--radius); margin-top: 1rem;
}
.leer p { margin-bottom: 1rem; }

/* == 7. Detailansicht =================================================== */

.detail {
  border: 0; padding: 0; max-width: 46rem; width: min(96vw, 46rem);
  max-height: min(88vh, 52rem); overflow: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.detail::backdrop { background: rgba(10, 14, 10, .55); backdrop-filter: blur(2px); }

.detail__kopf {
  position: sticky; top: 0; background: var(--paper); z-index: 2;
  border-bottom: 1px solid var(--line); padding: 1.25rem var(--pad) 1rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
.detail__kopf h2 { margin: 0; font-size: var(--step-2); }
.detail__kopf .botanisch { display: block; font-size: var(--step-0); color: var(--ink-2); margin-top: .1rem; }
.detail__familie { font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink-3); }
.detail__schliessen {
  flex: none; width: var(--tap); height: var(--tap); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--paper-2); cursor: pointer;
  display: grid; place-items: center;
}
.detail__schliessen svg { width: 1.2em; height: 1.2em; }
.detail__koerper { padding: 1.25rem var(--pad) 2rem; }

.detail__volksnamen {
  font-size: var(--step--1); color: var(--ink-2); margin-bottom: 1.25rem;
}
.detail__volksnamen span { font-family: var(--f-mono); }

.teiletabelle { margin-bottom: 1.5rem; }
.teiletabelle__zeile {
  display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: .6rem; align-items: center; padding-block: .3rem;
}
.teiletabelle__name {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--f-mono); font-size: var(--step--1); color: var(--ink);
}
.teiletabelle__name svg { width: 1.1em; height: 1.1em; color: var(--teil-farbe); }
.teiletabelle .band { gap: 1px; height: 1.5rem; }
.teiletabelle__zelle {
  background: var(--paper-2); border-radius: 1px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .6rem; color: var(--ink-3);
}
.teiletabelle__zelle--aktiv { background: var(--teil-farbe); color: #fff; }
@media (prefers-color-scheme: dark) { .teiletabelle__zelle--aktiv { color: #10140f; } }

.feld { margin-bottom: 1.25rem; }
.feld > h3 {
  font-family: var(--f-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); font-weight: 600; margin-bottom: .35rem;
}
.feld--warnung {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-left-width: 4px; border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1rem;
}
.feld--warnung > h3 { color: var(--warn-ink); display: flex; align-items: center; gap: .4rem; }
.feld--warnung > h3 svg { width: 1.2em; height: 1.2em; }
.feld--stop {
  background: var(--stop-bg); border: 1px solid var(--stop-line);
  border-left-width: 4px; border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1rem;
}
.feld--stop > h3 { color: var(--stop-ink); }

.detail__fuss {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding-top: 1rem; border-top: 1px solid var(--line-soft);
}

/* == 8. Matrix, Merkliste, Textseiten =================================== */

.matrix-scroll {
  overflow-x: auto; margin-top: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.matrix { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: var(--step--1); }
.matrix caption { text-align: left; padding: .75rem 1rem; color: var(--ink-2); font-size: var(--step--1); }
.matrix th, .matrix td { border-bottom: 1px solid var(--line-soft); padding: 0; }
.matrix thead th {
  position: sticky; top: 0; background: var(--paper-2); z-index: 1;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; padding: .5rem .2rem; text-align: center;
  border-bottom: 1px solid var(--line);
}
.matrix thead th:first-child { text-align: left; padding-inline: .75rem; min-width: 13rem; }
.matrix th[scope="row"] {
  text-align: left; font-weight: 600; padding: .35rem .75rem; line-height: 1.25;
  background: var(--paper); position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--line-soft);
}
.matrix th[scope="row"] .botanisch { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-3); }
.matrix th[scope="row"] button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: inherit; text-align: left; width: 100%;
}
.matrix th[scope="row"] button:hover { text-decoration: underline; }
.matrix td { text-align: center; vertical-align: middle; height: 2.1rem; }
.matrix td.jetzt { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.matrix thead th.jetzt { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

.zelleteile { display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; padding: 2px; }
.zellepunkt {
  width: 100%; max-width: .95rem; height: .95rem; border-radius: 2px;
  background: var(--teil-farbe);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .52rem; font-weight: 700; color: #fff;
  letter-spacing: -.02em;
}
@media (prefers-color-scheme: dark) { .zellepunkt { color: #10140f; } }

.legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem;
  font-size: var(--step--1); color: var(--ink-2); list-style: none; padding: 0;
}
@media print {
  .legende { margin: 0 0 2mm; gap: .3rem .8rem; font-size: 7pt; }
  .monatskopf { padding: 0 0 2mm; }
  .monatskopf__zahl { margin: 0; }
  .trefferzeile { border: none; padding: 0; margin: 0 0 1mm; }
}
.legende li { display: flex; align-items: center; gap: .4rem; }
.legende svg { width: 1.1em; height: 1.1em; color: var(--teil-farbe); }
.legende .zellepunkt { width: .95rem; flex: none; }

.merkliste__leer { margin-top: 1rem; }
.zettel { list-style: none; padding: 0; margin: 1rem 0 0; }
.zettel li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .8rem 0; border-bottom: 1px solid var(--line-soft);
}
.zettel__haken { flex: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--ink-3); border-radius: 2px; margin-top: .25rem; }
.zettel__text { flex: 1; min-width: 0; }
.zettel__name { font-weight: 650; }
.zettel__detail { font-size: var(--step--1); color: var(--ink-2); }
.zettel__weg {
  flex: none; width: var(--tap); height: var(--tap); border: 0; background: none;
  cursor: pointer; color: var(--ink-3); border-radius: var(--radius);
}
.zettel__weg:hover { color: var(--warn-ink); background: var(--warn-bg); }
.zettel__weg svg { width: 1.1em; height: 1.1em; }

.prosa { max-width: 42rem; padding-block: 2rem 1rem; }
.prosa h2 { margin-top: 2.5rem; }
.prosa h3 { margin-top: 1.75rem; }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li { margin-bottom: .5rem; }
.prosa__lead { font-size: var(--step-1); color: var(--ink-2); }
.prosa dt { font-weight: 650; margin-top: 1rem; }
.prosa dd { margin: .2rem 0 0; color: var(--ink-2); }

.merksatz {
  border-left: 4px solid var(--accent); background: var(--paper-2);
  padding: 1rem 1.25rem; margin-block: 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.merksatz p:first-child { font-weight: 650; }

.gefahr {
  border: 1px solid var(--warn-line); border-left-width: 4px;
  background: var(--warn-bg); color: var(--ink);
  padding: 1rem 1.25rem; margin-block: 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.gefahr h2, .gefahr h3 { color: var(--warn-ink); margin-top: 0; font-size: var(--step-1); }

.paartabelle { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: var(--step--1); }
.paartabelle th, .paartabelle td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.paartabelle thead th { border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.paartabelle td:first-child { font-weight: 650; }

.platzhalter {
  background: var(--paper-2); border: 1px dashed var(--line);
  padding: .15rem .4rem; border-radius: 2px;
  font-family: var(--f-mono); font-size: .85em; color: var(--ink-2);
}

/* == 9. Druck =========================================================== */
/* Drei Druckbilder, je nach aktiver Ansicht:
   - Monatsansicht -> ein A4-Blatt fuer den gewaehlten Monat
   - Jahresmatrix  -> A4 quer zum Aufhaengen
   - Merkliste     -> Sammelzettel zum Abhaken
   Alles schwarz-weiss lesbar: Farbflaechen werden zu Rahmen und Kuerzeln. */

@page { size: A4 portrait; margin: 12mm 10mm; }

@media print {
  :root {
    --paper: #fff; --paper-2: #fff; --paper-3: #fff;
    --ink: #000; --ink-2: #333; --ink-3: #555;
    --line: #000; --line-soft: #999;
    --accent: #000;
    --shadow: none;
    --step-0: 9.5pt; --step--1: 8pt; --step-1: 12pt; --step-2: 15pt; --step-3: 20pt;
  }
  body { background: #fff; color: #000; font-size: 9.5pt; line-height: 1.35; }

  .kopf, .hauptnav, .monatsleiste, .filter, .fuss, .skip-link, .haftung,
  .merkknopf, .vorschau button, .detail__fuss, .trefferzeile button,
  .nur-bildschirm { display: none !important; }

  .wrap { max-width: none; padding: 0; }
  .ansicht { padding: 0; }

  /* Druckkopf: erscheint nur auf Papier */
  .druckkopf { display: block !important; border-bottom: 1.5pt solid #000; padding-bottom: 4mm; margin-bottom: 5mm; }
  .druckkopf__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .druckkopf h1 { font-size: 20pt; margin: 0; }
  .druckkopf__quelle { font-family: var(--f-mono); font-size: 7.5pt; color: #333; }
  .druckkopf__haftung { font-size: 7.5pt; color: #333; margin-top: 2mm; }

  .monatskopf { padding: 0; }
  .monatskopf__eyebrow { color: #000; }

  /* Monatsblatt: eine Zeile je Pflanze, drei Spalten. Nur so passt auch
     der Juni mit 88 Arten auf ein einziges A4-Blatt. Der botanische Name
     entfaellt hier bewusst - er steht auf der Jahresmatrix. */
  .karten {
    display: block; columns: 3; column-gap: 5mm; margin: 0;
    min-height: 0;
  }
  .karte {
    break-inside: avoid; page-break-inside: avoid;
    border: none; border-bottom: .3pt dotted #bbb; border-radius: 0;
    padding: 0 0 .8mm; margin: 0 0 .8mm; background: none;
    display: block; line-height: 1.3;
  }
  .karte__kopf, .karte__titel { display: inline; }
  .karte__name { display: inline; font-size: 8.8pt; font-weight: 700; }
  .karte__name button { display: inline; }
  .karte__bot, .karte__standort, .karte__meta, .miniband { display: none; }
  .karte__teile { display: inline; margin: 0; }
  .teilchip {
    display: inline; border: none; color: #000; background: none;
    font-size: 7.4pt; padding: 0; margin-left: .6mm;
  }
  .teilchip svg { display: none; }
  /* Giftige und schwierige Arten bleiben auch schwarz-weiss erkennbar */
  .karte--gift .karte__name::after { content: " ⚠"; }
  .karte--sicher .karte__name::after { content: " ‼"; }
  .karte--gesperrt { display: none; }

  /* Jahresmatrix: hochkant, weil so die meisten Zeilen auf ein Blatt gehen.
     Alle 141 Arten belegen zwei A4-Seiten - enger waere nicht mehr lesbar.
     Wer ein echtes Ein-Blatt-Poster will, filtert vorher (zum Beispiel auf
     Anfaengerpflanzen) und druckt dann. Die Kopfzeile wiederholt sich auf
     jeder Seite, weil sie in einem thead steht. */
  .matrix-scroll { overflow: visible; border: none; }
  .matrix { min-width: 0; width: 100%; font-size: 6pt; }
  .matrix thead { display: table-header-group; }
  .matrix thead th { background: none; border-bottom: .8pt solid #000; padding: .8mm .2mm; font-size: 5.5pt; }
  .matrix thead th:first-child { min-width: 0; }
  .matrix th[scope="row"] { font-size: 6pt; padding: .1mm 1mm; background: none; line-height: 1.05; }
  .matrix th[scope="row"] .botanisch { font-size: 4.8pt; line-height: 1; }
  .matrix td { height: auto; border-bottom: .25pt solid #ccc; padding: 0; }
  .matrix td.jetzt, .matrix thead th.jetzt { background: none; box-shadow: none; }
  .matrix tr { page-break-inside: avoid; }
  .zelleteile { padding: 0; gap: .3mm; }
  .zellepunkt {
    background: none !important; color: #000; border: .25pt solid #000;
    font-size: 4.5pt; height: 2.1mm; max-width: 2.1mm; border-radius: .5mm;
  }

  /* Sammelzettel */
  .zettel li { border-bottom: .3pt solid #999; padding: 1.5mm 0; page-break-inside: avoid; }
  .zettel__haken { border: .6pt solid #000; width: 4mm; height: 4mm; }
  .zettel__weg { display: none; }

  .prosa { max-width: none; }
  .merksatz, .gefahr { border: .6pt solid #000; background: none; page-break-inside: avoid; }
  a { text-decoration: none; }
  .detail { display: none; }
}

/* Der Druckkopf ist auf dem Bildschirm unsichtbar */
.druckkopf { display: none; }

/* Die Matrix wird hochkant gedruckt: bei zwoelf schmalen Monatsspalten
   und einer breiten Namensspalte gewinnt man im Querformat nichts an
   Spalten, verliert aber Zeilen je Seite. */