/*
  Gartenplaner — eigener Entwurf in den Farben des GARTENS (FA-48 seit Verfassung 2.18.0,
  Feature 022). Kein CSS-Framework, keine UI-Bibliothek, keine Schrift aus dem Netz (FR-008).

  *** JEDE FARBE DER OBERFLAECHE KOMMT AUS DEM TOKENBLOCK DARUNTER — UND ZWAR ZWEIMAL. ***
  Der erste Block ist die HELLE Fassung und die Grundfassung: Jeder Token ist dort definiert
  (FR-004). Der zweite Block ueberschreibt im Medienblock `prefers-color-scheme: dark` nur
  WERTE — keine Regel, keine Anordnung (FR-002, FR-003). Beide Fassungen folgen allein dem
  Geraet; es gibt keinen Umschalter, keinen gespeicherten Zustand und kein Skript dafuer
  (research.md Punkt 1 zu 022). Weil das Stylesheet gilt, bevor der Browser das erste Mal
  zeichnet, ist die dunkle Fassung nie kurz hell (SC-006).

  Ein Hex-, rgb- oder hsl-Wert AUSSERHALB der beiden Bloecke ist ein Fehler (FR-001, SC-002).
  TokenTests liest diese Datei und jedes *.razor.css und nennt jede Fundstelle mit Zeile; die
  Markierungen `=== TOKENS HELL ===` und `=== TOKENS DUNKEL ===` sind das, woran er die
  Bloecke erkennt — sie duerfen nicht umbenannt werden.

  Jeder Wert ist GERECHNET, nicht geschaetzt: specs/022-oberflaeche-gruen/contracts/farben.md
  traegt jedes Paar mit seinem Kontrastverhaeltnis, und KontrastTests rechnet jedes Paar aus
  den Werten HIER nach (SC-003). Wer einen Token „nur ein bisschen" nachjustiert, wird rot.

  Die drei Schwellen der Navigation (contracts/navigation.md) — sie sind keine Farben und
  stehen deshalb nicht im Block, aber einmal als Kommentar daneben:
    --- unter 768 px: Pille unten            @media (max-width: 767px)
    --- ab 768 px:    fuenf Punkte oben      @media (min-width: 768px)
    --- ab 1180 px:   alle Punkte oben       @media (min-width: 1180px)
  Es gibt KEINE vierte Schwelle; NavigationsstufenTests prueft jede @media-Breitenabfrage.
*/

/* === TOKENS HELL === */
:root {
  /* Der Browser weiss, dass es beide Fassungen gibt: Formularfelder, Bildlaufleisten und die
     Auswahlfarbe folgen dann der Fassung mit. */
  color-scheme: light dark;

  /* Abschnitt 1 des Vertrags: die Grundtokens. Schmueckende Linie und Senke tragen keine
     Bedeutung (FA-48: keine Schranke); alles Bedeutungstragende steht auf --tinte, --leise,
     --akzent oder --signal. */
  --grund: #F1F3EF;
  --karte: #FFFFFF;
  --senke: #E7ECE6;
  --tinte: #12211A;
  --leise: #56655B;
  --linie: #DFE5DD;
  --akzent: #0F4B31;
  --akzent-auf: #FFFFFF;
  --akzent-flaeche: #E2EFE7;
  --signal: #B23A0F;
  --signal-auf: #FFFFFF;
  --band-a: #0C3524;
  --band-b: #1B5C3B;

  /* Abschnitt 6 des Vertrags: die Schrift AUF dem Band. Diese vier tragen in BEIDEN Bloecken
     denselben Wert, und das ist Absicht — dieselbe wie bei --bild-unterlage: Sie folgen nicht
     der Fassung, sondern der Flaeche, auf der sie stehen, und das Band ist in beiden Fassungen
     dunkel (--band-a/-b). Gerechnet: weiss 13,55:1 am Bandanfang und 7,95:1 am Bandende (hell),
     14,74:1 / 8,53:1 (dunkel); Bandgrau 8,72:1 / 5,12:1; Mint 8,89:1 / 5,22:1. */
  --band-schrift: #FFFFFF;
  --band-leise: #BAD6C6;
  --band-mint: #8FE3B0;
  /* Ueberfaellig AUF dem Band: --signal (#B23A0F) waere dort dunkelrot auf dunkelgruen. Der
     Vertrag rechnet dafuer #FF9166 — 6,12:1 am Bandanfang, 3,60:1 am Bandende. Es traegt nur
     die GROSSE Zahl (3 rem), fuer die 3:1 gilt; das Wort daneben steht in --band-schrift. */
  --band-signal: #FF9166;

  /* DIE FUENF PUNKTE DES JAHRESBANDS (Feature 023, FR-007). Sie stehen aus DEMSELBEN GRUND hier
     wie --band-schrift und --band-signal darueber: Das Band ist in BEIDEN Fassungen dasselbe
     dunkle Gruen, also sind ihre Werte in beiden Fassungen GLEICH.

     *** WARUM NICHT EINFACH --art-*-marke. *** Das war der erste Versuch, und der neue Waechter
     in KontrastTests hat ihn am 12.09.2026 zerlegt: Die Marke wechselt mit dem
     Erscheinungsbild — in der HELLEN Fassung ist sie die DUNKLE Variante, gerechnet fuer eine
     helle Karte. Auf dem dunklen Band ergibt das Schneiden #5B3C7E auf #0C3524: 1,54:1, und am
     helleren Bandende 1,10:1. Ein dunkelvioletter Punkt auf dunkelgruenem Grund — unsichtbar,
     in der Fassung, die die meisten sehen.

     Der Vertrag hatte recht und war nur nicht abrufbar: 022/contracts/farben.md Abschnitt 6
     nennt ausdruecklich „helle Fassungen der Artenfarben" und rechnet 6,16:1 bis 8,33:1. Genau
     diese fuenf Werte stehen jetzt unter eigenem Namen — sie sind dieselben, die --art-*-marke
     in der DUNKLEN Fassung traegt.

     Neun von zehn Paaren waren rot, bevor es diese Tokens gab. Kein anderer Test haette es
     gemerkt: Ein Punkt, der da ist und nichts zeigt, faellt in keinem Markup auf. */
  --band-art-schneiden: #B79BE0;
  --band-art-duengen: #D9B15A;
  --band-art-giessen: #6FB3E0;
  --band-art-ernten: #6FD79B;
  --band-art-aussaeen: #5FC7CE;

  /* Der Schatten der Karten (Entwurf „Saison kompakt"). Er ist ZIERDE und traegt nie eine
     Aussage — FR-007 sagt ausdruecklich „ein Schatten zaehlt nicht": Jede Zustandsflaeche haelt
     ihre 3:1 auch ohne ihn. Er steht hier, weil er Farbwerte enthaelt (SC-002). */
  --schatten: 0 1px 2px rgba(12, 53, 36, 0.05), 0 8px 18px -14px rgba(12, 53, 36, 0.4);
  --schatten-pille: 0 10px 22px -10px rgba(12, 53, 36, 0.55);

  /* Abschnitt 2: die fuenf Aufgabenarten als DREIKLANG — getoente Flaeche, Schrift darauf,
     Marke fuer Rand, Punkt und Symbol (FR-009, FR-010). Kein weisser Text auf gesaettigter
     Flaeche mehr (FR-011). Die Zuordnung Art -> Klasse steht in der Sektion „Die
     Aufgabenarten"; hier stehen nur die Werte.

     ERNTEN-MARKE: Der Vertrag nannte #35915C mit „3,00:1 gegen die Akzentfarbe" — gerechnet
     sind es 2,59:1 (aus 3,92:1 auf der Karte und 10,14:1 der Akzentfarbe folgt das zwingend).
     Deshalb auf #3CA066 nachjustiert: 3,10:1 gegen --akzent, 3,27:1 auf --karte — die
     Abweichung, die FR-005 erlaubt, wenn die Schranken halten. AufgabenfarbenTests haelt es
     fest und erklaert es. */
  --art-duengen-flaeche: #F6EAC9;
  --art-duengen-schrift: #12211A;
  --art-duengen-marke: #8A6A18;
  --art-giessen-flaeche: #DCEBF6;
  --art-giessen-schrift: #12211A;
  --art-giessen-marke: #2C6994;
  --art-ernten-flaeche: #DCF0E4;
  --art-ernten-schrift: #12211A;
  --art-ernten-marke: #3CA066;
  --art-aussaeen-flaeche: #D6EEEF;
  --art-aussaeen-schrift: #12211A;
  --art-aussaeen-marke: #0D6C72;
  --art-schneiden-flaeche: #E8DEF3;
  --art-schneiden-schrift: #12211A;
  --art-schneiden-marke: #5B3C7E;

  /* Abschnitt 9: Namen fuer Werte, die oben schon gerechnet sind.
     --schleier ersetzt jedes rgba(...) fuer Hover und Fokusflaechen ohne Bedeutung.
     --bild-unterlage ist der EINZIGE Token, der in beiden Bloecken gleich steht (FR-051):
     Ein Produktfoto mit weissem Grund stuende sonst im Dunkeln als heller Block. */
  --schleier: rgba(18, 33, 26, 0.06);
  /* --abdunkler legt sich hinter eine Rueckfrage (Feature 007) — die Seite bleibt sichtbar,
     tritt aber zurueck. Nachtrag beim Bauen von 022 (Phase 9): Der Vertrag kannte nur den
     Schleier fuer Hover; ein Abdunkler mit 6 % gaebe keine Rueckfrage zu erkennen. */
  --abdunkler: rgba(18, 33, 26, 0.6);
  --bild-unterlage: #E7ECE6;
  /* Die Schrift AUF der Bildunterlage („Kein Foto") — aus demselben Grund in beiden Bloecken
     gleich wie die Unterlage selbst: Sie folgt der Flaeche, nicht der Fassung (#282). Mit
     --leise stand sie im Dunkeln hellgrau auf hell, 2,03:1. */
  --bild-schrift: #56655B;

  /* Abschnitt 8: der Punkt des Erfassungsstands — geliehen aus Ocker und Blau, weil sie
     nie neben einer Aufgabenart derselben Farbe stehen. */
  --stand-neu: #8A6A18;
  --stand-arbeit: #2C6994;
  --stand-fertig: #0F4B31;

  /* Abschnitt 3: die vier Zustaende eines Zugangsmerkmals — Punkt MIT Wort (FR-047). */
  --zugang-gueltig: #0F4B31;
  --zugang-widerrufen: #B23A0F;
  --zugang-abgelaufen: #8A6A18;
  --zugang-gesperrt: #5B3C7E;

  /* Abschnitt 4: die drei Stufen der Erntejahre — EIN Ton, je neuer, je kraeftiger. Eine
     vierte Stufe gibt es nicht; mehr Jahre laufen ueber die Jahresauswahl (FR-041). */
  --jahr-aktuell: #0F4B31;
  --jahr-vor: #2F7D52;
  --jahr-vor2: #4E9E74;

  /* Der Fokusring (FR-055) — ein eigener Name, damit er unabhaengig von der Akzentfarbe
     nachjustiert werden kann. */
  --fokus: #0F4B31;
}
/* === ENDE TOKENS HELL === */

/* === TOKENS DUNKEL === */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0E1512;
    --karte: #18211C;
    --senke: #212B24;
    --tinte: #E7EEE8;
    --leise: #9AAA9F;
    --linie: #27322B;
    --akzent: #7FD3A2;
    --akzent-auf: #0B1F16;
    --akzent-flaeche: #1E3529;
    /* Der Verbindungshinweis wird HELLER, nicht dunkler: Eine dunkle Warnflaeche auf dunklem
       Grund verschwindet (FR-050, Vertrag Abschnitt 5). */
    --signal: #FF9166;
    --signal-auf: #2A1206;
    --band-a: #0A2E20;
    --band-b: #17573A;

    /* Dieselben Werte wie im hellen Block — das Band ist in beiden Fassungen dunkel, und die
       Schrift darauf folgt der Flaeche, nicht der Fassung (Vertrag Abschnitt 6). */
    --band-schrift: #FFFFFF;
    --band-leise: #BAD6C6;
    --band-mint: #8FE3B0;
    --band-signal: #FF9166;
    /* Dieselben fuenf Werte wie in der hellen Fassung — das Band ist in beiden dasselbe dunkle
       Gruen. Die Begruendung steht im hellen Block. */
    --band-art-schneiden: #B79BE0;
    --band-art-duengen: #D9B15A;
    --band-art-giessen: #6FB3E0;
    --band-art-ernten: #6FD79B;
    --band-art-aussaeen: #5FC7CE;

    --schatten: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 18px -12px rgba(0, 0, 0, 0.8);
    --schatten-pille: 0 10px 22px -10px rgba(0, 0, 0, 0.8);

    /* Die dunklen Flaechen liegen nur 1,19:1 bis 1,32:1 von der Karte entfernt — als Flaeche
       allein kaum zu sehen. Deshalb traegt JEDE Flaeche einen Rand in ihrer Marke (FR-010):
       Der Rand ist keine Zierde, er macht die Flaeche zur Flaeche (Vertrag, Befund 1). */
    --art-duengen-flaeche: #3A301A;
    --art-duengen-schrift: #E8C77C;
    --art-duengen-marke: #D9B15A;
    --art-giessen-flaeche: #1D3547;
    --art-giessen-schrift: #8CC6EC;
    --art-giessen-marke: #6FB3E0;
    --art-ernten-flaeche: #1A3A28;
    --art-ernten-schrift: #7FE0AA;
    --art-ernten-marke: #6FD79B;
    --art-aussaeen-flaeche: #16383D;
    --art-aussaeen-schrift: #72D7DE;
    --art-aussaeen-marke: #5FC7CE;
    --art-schneiden-flaeche: #322746;
    --art-schneiden-schrift: #C6AEEA;
    --art-schneiden-marke: #B79BE0;

    --schleier: rgba(231, 238, 232, 0.08);
    --abdunkler: rgba(0, 0, 0, 0.6);
    --bild-unterlage: #E7ECE6;
    --bild-schrift: #56655B;

    --stand-neu: #D9B15A;
    --stand-arbeit: #79B9E4;
    --stand-fertig: #7FD3A2;

    --zugang-gueltig: #7FD3A2;
    --zugang-widerrufen: #FF9166;
    --zugang-abgelaufen: #D9B15A;
    --zugang-gesperrt: #B79BE0;

    --jahr-aktuell: #7FD3A2;
    --jahr-vor: #4FA277;
    --jahr-vor2: #39795A;

    --fokus: #7FD3A2;
  }
}
/* === ENDE TOKENS DUNKEL === */

/* Masse und Schrift — KEINE Farben, deshalb ausserhalb der Tokenbloecke: Der dunkle Block
   ueberschreibt nur Farbwerte, und TokenTests verlangt, dass er genau die Namen des hellen
   traegt. Ein Mass steht in beiden Fassungen gleich und gehoert deshalb hierher. */
:root {
  --abstand: 1rem;
  --abstand-klein: 0.5rem;

  /* DIE RADIEN KOMMEN AUS DEM ENTWURF „Saison kompakt" — und sie waren beim ersten Bau falsch:
     4 px stand in Beobachtung 3 der Spec als BESCHREIBUNG DES ALTEN ZUSTANDS („jede Kachel traegt
     einen 1-px-Rand mit 4 px Radius; getrennt wird ueber Raender statt ueber Weissraum") und ist
     dort KRITIK, keine Vorgabe. Der Entwurf setzt 10 px fuer Knoepfe und Felder, 14 px fuer
     Karten und Kacheln, 20 px fuer die Pille. Nachgezogen am 09.09.2026 auf Norberts Befund
     „entspricht nicht den Farben aus dem Entwurf". */
  --radius: 10px;
  --radius-karte: 14px;
  --radius-pille: 20px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Die grosse Zahl der Uebersicht (FR-020) — das groesste Element im Bild. Beobachtung 5 der
     Spec: 24 / 18 / 14 px bildeten kaum eine Rangordnung; jetzt 3 rem / 1,75 rem / 1,25 rem /
     1 rem / 0,875 rem. */
  --zahl-gross: 3rem;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinte);
  background-color: var(--grund);
}

/* Die Rangordnung der Schriftgroessen (Beobachtung 5 der Spec zu 022): h1 1,75 rem, h2 1,25 rem,
   Fliesstext 1 rem, Nebentext 0,875 rem. Die grosse Zahl steht darueber (--zahl-gross). */
h1, h2, h3 {
  margin: 0 0 var(--abstand-klein);
  line-height: 1.25;
}

h1 {
  font-size: 1.75rem;
}

/* DA, ABER NICHT IM BILD (Issue #125, Norberts Befund am iPhone vom 11.09.2026: „Wir haben auf
   jeder Seite noch mal Arbeitsliste/Bereich/Dünger stehen, obwohl obendrueber schon das steht").

   Der Name der Seite steht im Band. Die Ueberschrift darunter war dieselbe Angabe ein zweites
   Mal und kostete auf 393 px rund 60 px — Platz, der auf der Uebersicht fehlt (FR-023, #106).

   SIE VERSCHWINDET TROTZDEM NICHT AUS DEM MARKUP: Sie ist das h1 der Seite. FocusOnNavigate
   setzt den Fokus nach jeder Navigation darauf, und ein Hilfsmittel liest daran die Gliederung
   ab. display: none naehme beides mit — deshalb aus dem Fluss genommen statt entfernt. Die
   Zeilen unten sind das uebliche Rezept dafuer; jede hat ihren Grund:
   Groesse 1 px statt 0 (manche Vorleser ueberspringen leere Rechtecke), clip-path (schneidet
   auch die Schrift weg), white-space: nowrap (sonst reisst ein langes Wort das Fenster auf). */
.nur-fuer-hilfsmittel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

h2 {
  font-size: 1.25rem;
}

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

/* Der Tastaturfokus (FR-055): ueberall derselbe Ring, in beiden Fassungen mit mindestens 3:1
   gegen den Grund (9,08:1 hell, 10,35:1 dunkel). Einmal hier fuer alles, was Fokus bekommen
   kann — nicht je Bedienelement einzeln. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}


/* ---------- Grundgerüst (Feature 022, FR-014, FR-018) ---------- */

/*
  *** DIE KOPFFLAECHE IST DAS BAND *** — eine dunkelgruene Flaeche mit dem Verlauf --band-a nach
  --band-b, Schrift darauf in --band-schrift (Entwurf „Saison kompakt", Vertrag Abschnitt 6).

  BEIM ERSTEN BAU WAR SIE HELL, und das war eine Fehldeutung von Beobachtung 1 der Spec. Die
  lautet: „Der dunkle Balken oben nimmt die oberste Flaeche und traegt darin NUR den Namen der
  App und einen Abmelden-Knopf — beides braucht man am seltensten." Kritisiert ist also nicht die
  Flaeche, sondern ihr leerer Inhalt. Der Entwurf behaelt sie und FUELLT sie: Marke, Seitentitel
  oder Navigation, und auf der Uebersicht die grosse Zahl (spaeter das Jahresband aus 023). Der
  Farbvertrag hat elf Kontrastwerte fuer Text auf dem Band gerechnet — die standen ungenutzt da.
  Nachgezogen am 09.09.2026 auf Norberts Befund.

  Sie BRICHT NIE UM: Was in einer Zeile nicht Platz hat, gehoert in die kleinere Stufe (FR-018).
  Der Inhalt der Uebersicht kommt ueber einen SectionOutlet dazu (MainLayout) — so bleibt es EINE
  Flaeche mit EINEM Verlauf statt zweier, die aneinanderstossen.
*/

.huelle {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kopf {
  background: linear-gradient(168deg, var(--band-a) 0%, var(--band-b) 122%);
  color: var(--band-schrift);
  padding: var(--abstand-klein) var(--abstand);
}

/* Die obere Zeile des Bandes: Marke, Seitentitel oder Navigation. */
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  min-height: 56px;
}

/* Die Marke: Blattsymbol und Wort, in --band-leise auf dem Band, das Symbol in Mint. Ein
   Verweis auf die Uebersicht — mindestens 44 px, weil er getroffen wird (FA-41). */
/*
  DER WEG EINE EBENE HOEHER (#235). Nur am Telefon: Ab 768 px bleibt die Kopfflaeche stehen
  (weiter unten), und damit ist die Navigation immer erreichbar — dort braucht es ihn nicht.

  *** WARUM ER UEBERHAUPT DA IST: *** Am Home-Bildschirm laeuft die App ohne Browserleiste und
  damit OHNE Zurueck-Knopf. Auf einer langen Detailseite war der einzige Weg zurueck bis zum
  19.09.2026, ganz nach oben zu scrollen.

  44 px Trefffläche wie jedes Bedienelement (FA-41); das Wort steht als aria-label am Verweis,
  nicht daneben — wie beim "+" (FR-012 aus 022: nie Bild allein).
*/
.kopf-zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin-left: calc(var(--abstand-klein) * -1);
  color: var(--band-schrift);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--band-leise);
  font-weight: 600;
  text-decoration: none;
}

.marke .navsymbol {
  width: 18px;
  height: 18px;
  color: var(--band-mint);
}

/* Der Seitentitel — unter 768 px das Einzige neben der Marke; ab 768 px steht dort die
   Kopfnavigation (unten). Auf dem Band in --band-schrift. */
.kopf-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--band-schrift);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Das „+" ganz rechts im Band — NUR unter 768 px (#158). Ab 768 px steht dort die
   Kopfnavigation und auf der Seite der beschriftete Knopf; ein Zeichen ohne Wort waere dort
   eine Verschlechterung, nicht eine Ersparnis.

   Ohne Medienabfrage ist es NICHT da — dieselbe Richtung wie bei der Pille: Was nur einer
   Stufe gehoert, wird in ihr eingeschaltet, nicht in allen anderen wieder aus. Sonst haengt
   die Zusage an zwei Regeln, und die zweite kann vergessen werden.

   44 px, weil es im Garten mit dem Daumen getroffen wird (FA-41) — das Zeichen darin ist 20 px
   gross, die Flaeche darum ist der Rest. In --band-mint wie das Blatt der Marke daneben. */
.kopf-anlegen {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: var(--band-mint);
  text-decoration: none;
}

.kopf-anlegen .navsymbol {
  width: 20px;
  height: 20px;
}

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--abstand);
}

/* ---------- Navigation in drei Stufen (Feature 022, FR-018; contracts/navigation.md) ----------

   Die Schublade aus 001 und ihr Hamburger sind weg (FR-014). An ihre Stelle treten ZWEI
   Bausteine mit denselben fuenf Zielen: die Pille unten (unter 768 px) und die Kopfnavigation
   (ab 768 px). Beide stehen immer im Markup; hier entscheidet sich je Breite, welche sichtbar
   ist — an KEINER Breite beide (FA-41). NavigationsstufenTests liest genau das nach.

   Die drei Schwellen, und nur diese drei (siehe Dateikopf):
     unter 768 px  -> Pille                    @media (max-width: 767px)
     ab 768 px     -> fuenf Punkte oben        @media (min-width: 768px)
     ab 1180 px    -> alle Punkte oben         @media (min-width: 1180px)
*/

/* Die Kopfnavigation: unter 768 px nicht da. */
.kopfnavigation {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

.kopfnavigation ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Der Punkt STEHT AUF DEM BAND: 44 px hoch (FA-41), Symbol und Wort in --band-leise (5,12:1 am
   Bandende), abgerundet — kein Unterstrich mehr, denn auf dem Band traegt der aktive Punkt eine
   Flaeche (unten).

   *** WARUM ENG UND EINE STUFE KLEINER. *** Seit Norberts Befund vom 09.09.2026 („die Headerbar
   ist schoener, mit Farbe und Icons vor den Texten") traegt JEDER Punkt sein Symbol. Zehn
   Symbole mit ihrem Abstand kosten 230 px — genau daran ist die Zeile bei 1180 px gerissen:
   gemessen 1111 px Punkte auf 1012 px Platz, „Konto" endete 123 px hinter dem Rand und war
   nicht mehr zu sehen. Der Vertrag laesst das nicht zu: „Die Kopffleache bricht nie um."
   Enger (0,5 statt 0,75 rem) und 0,875 rem Schrift bringen die Zeile auf 941 px — 71 px
   Reserve. Die Werte gelten in ALLEN Stufen, damit ein Punkt bei 800 px so aussieht wie bei
   1400 px; eine vierte Schwelle waere gegen FA-41. */
.nav-punkt {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--band-leise);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
}

.nav-punkt .navsymbol {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* Die Huelle um Symbol und Zaehler an „Arbeit" — dieselbe Bauart wie .pille-symbol, damit der
   Zaehler am PC dort sitzt, wo er am Handy sitzt (FR-016). */
.nav-marke {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;

  /* Der Zaehler ragt 10 px nach rechts aus dem Symbol (.pille-zaehler). Am Handy steht das
     Wort DARUNTER, am PC DANEBEN — ohne diesen Platz liegt die Blase auf dem Wort „Arbeit".
     Norberts Befund vom 09.09.2026 an der Kopfnavigation. */
  margin-right: 0.625rem;
}

@media (hover: hover) {
  .nav-punkt:hover {
    color: var(--band-schrift);
  }
}

/* AKTIVER PUNKT (FR-019): Mint als FLAECHE, Bandanfang als Schrift darauf, dazu Fettung —
   Farbe allein sagt bei Rot-Gruen-Schwaeche nichts.

   *** NICHT die 17-Prozent-Mintflaeche des Entwurfs. *** Nachgerechnet am 09.09.2026:
   rgba(143,227,176,.17) ueber --band-a ergibt #22533C und damit 1,53:1 gegen das Band — eine
   Zustandsflaeche muss nach FR-007 mindestens 3:1 halten. Mint gefuellt erreicht 8,89:1 (hell)
   und 9,67:1 (dunkel), die Schrift darauf dieselben Werte. Dritter Befund am Entwurf nach der
   Ernten-Marke; steht im Vertrag und an Issue #108. */
.nav-punkt.active {
  background-color: var(--band-mint);
  color: var(--band-a);
  font-weight: 700;
}

.nav-punkt.active .navsymbol {
  color: var(--band-a);
}

/* Die erweiterten Punkte und „Konto" gibt es erst ab 1180 px; „Mehr" faellt dort weg. Die
   Grundstellung ist „nicht da" — die Stufen unten schalten frei. */
.kopfnavigation .nav-erweitert,
.kopfnavigation .nav-konto {
  display: none;
}

/* DIE PILLE IST EINE PILLE (Entwurf „Saison kompakt"): ein schwebender, runder Balken IN DER
   BANDFARBE, nicht ein weisser Streifen am Rand. Sie liegt mit Abstand ueber dem unteren Rand,
   damit sie als Ding erkennbar bleibt. Unter 768 px sichtbar (siehe unten), sonst nicht.
   Fuenf gleiche Plaetze. */
.pillennavigation {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin: 0 12px calc(12px + env(safe-area-inset-bottom));
  background-color: var(--band-a);
  border-radius: var(--radius-pille);
  padding: 0.4375rem 0.3125rem;
  box-shadow: var(--schatten-pille);
}

/* Ein Platz: ein Fuenftel der Breite, mindestens 44 px hoch (FR-057), Symbol ueber Wort. */
.pille-platz {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 0.375rem 0.25rem;
  color: var(--band-leise);
  text-decoration: none;
  font-size: 0.6875rem;
  line-height: 1.2;
  border-radius: 15px;
}

/* AKTIV: Mint als FLAECHE, Bandanfang darauf, dazu Fettung (FR-019) — dieselbe Regel wie am
   Punkt der Kopfnavigation, weil beide auf dem Band stehen. 8,89:1 hell, 9,67:1 dunkel; das
   haelt auch bei Sonne, ohne Schatten (FR-007). Die 17-Prozent-Mintflaeche des Entwurfs hielte
   nur 1,53:1 — siehe die Bemerkung an .nav-punkt.active. */
.pille-platz.active {
  background-color: var(--band-mint);
  color: var(--band-a);
  font-weight: 700;
}

.pille-symbol {
  position: relative;
  display: inline-flex;
}

.pille-symbol .navsymbol {
  width: 22px;
  height: 22px;
}

.pille-wort {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Zaehler an „Arbeit" (FR-016): rund, mindestens 18 px, Signalfarbe mit --signal-auf,
   rechts oben am Symbol. Steht in der Kopfflaeche am selben Punkt in derselben Form. */
.pille-zaehler {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--signal);
  color: var(--signal-auf);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Am PC sitzt der Zaehler wie am Handy rechts oben am Symbol — die Huelle .nav-marke traegt
   ihn, deshalb braucht er hier keine eigene Stellung mehr. */

/* Das Symbol der Navigation (Navigationssymbol.razor): 16 x 16 in currentColor. */
.navsymbol {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* ---------- Die Seite „Mehr" (Feature 022, FR-017) ---------- */

.mehr-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--karte);
  border-radius: var(--radius);
}

/* Jede Zeile 44 px (FR-057), mit --linie-Trenner — Weissraum und Linie statt Rand je Zeile. */
.mehr-zeile {
  min-height: 44px;
  border-bottom: 1px solid var(--linie);
}

.mehr-zeile:last-child {
  border-bottom: 0;
}

.mehr-verweis,
.mehr-auskunft {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem var(--abstand);
  color: var(--tinte);
  text-decoration: none;
}

.mehr-verweis .navsymbol,
.mehr-auskunft .navsymbol {
  width: 20px;
  height: 20px;
  color: var(--akzent);
}

@media (hover: hover) {
  .mehr-verweis:hover {
    background-color: var(--schleier);
  }
}

/* Der Abmelden-Knopf sieht aus wie eine Zeile, ist aber ein Formular — Farben und Schrift
   erben, kein Knopfrahmen. */
.mehr-knopf {
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.abmelden-form {
  margin: 0;
}

.mehr-wort {
  flex: 1 1 auto;
}

/* Die Anzahl rechts, in --leise (6,16:1 auf der Karte). */
.mehr-anzahl {
  color: var(--leise);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Die Auskunft ueber das Erscheinungsbild ist kein Verweis — und sieht auch nicht so aus. */
.mehr-auskunft {
  cursor: default;
}

.angemeldet {
  margin: var(--abstand) 0 0;
  font-size: 0.875rem;
  color: var(--leise);
}

/* ---------- Die drei Stufen ---------- */

/* Unter 768 px: die Pille — und der Inhalt bekommt unten so viel Rand, dass nichts unter ihr
   verschwindet. */
@media (max-width: 767px) {
  .pillennavigation {
    display: flex;
  }

  /* Die Pille schwebt jetzt mit 12 px Abstand vom Rand — der Inhalt braucht darunter
     entsprechend mehr Luft, damit nichts unter ihr verschwindet. */
  .inhalt {
    padding: var(--abstand-klein);
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* Das Zeichen kommt ins Band (#158). Die andere Haelfte des Tauschs — der beschriftete
     Knopf, der dafuer weicht — steht WEITER UNTEN, hinter .knopf; der Grund dort. */
  .kopf-anlegen {
    display: inline-flex;
  }
}

/* Ab 768 px: die fuenf Punkte in der Kopfflaeche, „Mehr" eingeschlossen; der Seitentitel
   weicht ihnen. */
@media (min-width: 768px) {
  .kopfnavigation {
    display: block;
  }

  .kopf-titel {
    display: none;
  }

  .kopf-zurueck {
    display: none;
  }

  /*
    *** DIE KOPFFLAECHE BLEIBT STEHEN (#235) — ABER NICHT AUF DER UEBERSICHT. ***

    Norberts Vorgabe vom 18.09.2026: "Auf dem iPad und PC muesste die Header-Leiste fixiert
    sein, damit man nicht immer komplett scrollen muss."

    Die Einschraenkung mit :has ist der Punkt. In der Kopfflaeche steht auf der Uebersicht das
    JAHRESBAND samt grosser Zahl (FR-001 aus 022) — rund 250 px. Die festzunageln naehme auf
    einem 800 px hohen Fenster ein Drittel des Bildes, und zwar dauerhaft. Genau dort wird
    ohnehin kaum gescrollt; gescrollt wird im Kalender, in der Pflanzenliste und im Detail,
    und dort ist die Kopfzeile rund 72 px hoch.

    :has ist in dieser Datei nicht neu — der Verbindungshinweis blendet die Pille ueber
    body:has(#blazor-error-ui[style*="block"]) aus.
  */
  .kopf:not(:has(.jahresband)) {
    position: sticky;
    top: 0;
    /* Ueber dem Inhalt, aber unter der Rueckfrage und dem Verbindungshinweis. */
    z-index: 5;
  }
}

/* Ab 1180 px: alle Punkte, den Kalender eingeschlossen; „Mehr" entfaellt, weil nichts mehr
   dahinter steht — was bleibt (Kennwort, Erscheinungsbild, Abmelden), heisst „Konto". */
@media (min-width: 1180px) {
  .kopfnavigation .nav-erweitert,
  .kopfnavigation .nav-konto {
    display: inline-flex;
  }

  .kopfnavigation .nav-mehr {
    display: none;
  }

  /* *** UND DIESELBEN PUNKTE FALLEN AUF DER SEITE „MEHR" WEG (#213). *** „Mehr" zeigt den
     REST — was die Kopfflaeche bei dieser Breite schon zeigt, gehoert dort nicht noch einmal
     hin. Die Seite rendert alle Zeilen; welche gelten, entscheidet diese eine Regel: Der
     Server kennt die Fensterbreite nicht, und sie aendert sich ohne Neuladen.

     GENAU EINE SCHWELLE genuegt, weil unter 768 px die Pille und zwischen 768 und 1179 px die
     Kopfflaeche DIESELBEN fuenf Kernpunkte tragen — der Rest ist in beiden Faellen derselbe.

     Die Regel steht HINTER .mehr-zeile (Zeile 639) und ueberstimmt sie deshalb bei
     Gleichstand 0-1-0. Waere sie davor, stuende sie da und taete nichts — der Fehler aus
     #156 und #158, den DerTauschStehtHINTERDemKnopfDenErUeberstimmenMuss bewacht. */
  .mehr-erweitert {
    display: none;
  }
}

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

.anmelde-seite {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
}

.anmelde-karte {
  width: 100%;
  max-width: 24rem;
  padding: calc(var(--abstand) * 1.5);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.einleitung {
  color: var(--leise);
  margin-top: 0;
}

.nebenweg {
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

/* ---------- Formulare ---------- */

.formular-schmal {
  max-width: 24rem;
}

.feld {
  margin-bottom: var(--abstand);
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------
   DIESE REGEL IST AM 05.09.2026 UMGEDREHT WORDEN — T-59 ist damit geschlossen.

   Bis dahin zaehlte sie die Feldarten EINZELN auf, und jede neue fiel zunaechst heraus:
   ein Feld von 21 bis 27 px statt 44, ohne Hausgestalt, oft kaum bedienbar. Das ist
   DREIMAL passiert und jedes Mal erst einem Menschen aufgefallen, nicht einem Test:

     1. input[type="date"] fehlte seit Feature 005 — gefunden mit T-31.
     2. input[type="number"] fehlte seit Feature 003 — am 05.09.2026 gleich zweimal
        unabhaengig gefunden, beim Bauen der NPK-Felder und bei der Gestaltungsprobe zu
        Feature 016 (dort nachgemessen: 21 px).
     3. input[type="url"] fehlte seit demselben Tag — das Feld der Herstellerseite. Norbert
        hat es in der laufenden App gemeldet (FB-1): "zu klein, nicht anklickbar und auch
        nicht bearbeitbar".

   Beim dritten Mal wird aus dem Muster eine Regel: Statt aufzuzaehlen, WAS dazugehoert,
   nennt sie jetzt die wenigen Ausnahmen. Ein neuer Feldtyp faellt damit HINEIN statt
   heraus — der Fehler kann sich nicht mehr wiederholen.

   AUSGENOMMEN bleiben: checkbox und radio (eigene Gestalt, eigene Groesse), file (in
   dieser App immer versteckt hinter einer Beschriftung), hidden (nie sichtbar) sowie
   submit/button/reset — die App benutzt <button>, aber ein 100 % breiter Knopf waere die
   naechste Ueberraschung.

   Verkettete :not() statt einer Liste in einem :not(): Die Liste gibt es erst ab
   Safari 16.4, und diese App laeuft im Garten auf einem iPhone.

   FA-41 verlangt 44 px, und das gilt fuer JEDES Bedienelement — nicht fuer die, an die
   man gerade denkt.
   --------------------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  width: 100%;
  padding: 0.625rem;
  font: inherit;
  color: var(--tinte);
  background-color: var(--karte);
  /* Bedeutungstragender Rand (FR-039): --leise, nicht die schmueckende --linie. Ein Feld muss in
     beiden Fassungen als Feld erkennbar sein — die Linie erreicht auf der Karte nur 1,3:1. */
  border: 1px solid var(--leise);
  border-radius: var(--radius);
  min-height: 44px;
}

/* Der Fokusring steht seit 022 EINMAL am Dateianfang (:focus-visible auf --fokus, FR-055) und
   nicht mehr hier je Elementart — eine Liste, die aufzaehlt, WAS einen Ring bekommt, laesst
   das naechste Bedienelement aus (dieselbe Lehre wie bei der Sammelregel darueber). */

.hinweis {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--leise);
}

/* ---------- Schaltflächen ---------- */

.knopf {
  display: inline-block;
  padding: 0.625rem var(--abstand);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 44px;
}

/* Die Akzentfarbe als Flaeche mit --akzent-auf darauf, FETT — die zweite Auszeichnung neben der
   Farbe (Feature 022, Vertrag Abschnitt 7, Weg A). Gilt fuer den Hauptknopf einer Seite ebenso
   wie fuer den gewaehlten Chip der Fensterwahl, der Moduswahl und der Pflanzenfilter. */
.knopf-akzent {
  background-color: var(--akzent);
  color: var(--akzent-auf);
  font-weight: 700;
}

@media (hover: hover) {
  .knopf-akzent:hover {
    background-color: var(--band-b);
  }
}

.knopf-schlicht {
  background-color: transparent;
  color: var(--akzent);
  border-color: var(--leise);
}

/* .knopf-kopf (der helle Knopf in der alten Kopfzeile) ist mit Feature 022 gefallen — die
   Kopfflaeche traegt keinen Abmelden-Knopf mehr (FR-014, US1 Szenario 2). */

/*
  DAS ROTE GEGENSTUECK ZU .knopf-akzent (#238, #245). --signal ist die Signalfarbe des Vertrags,
  und die Paare --signal/--karte und --signal-auf/--signal stehen bereits im Kontrast-Waechter.
  Hier kommt keine neue Farbe dazu, nur ihr Gebrauch an Schaltflaechen.

  *** EINE GESTALT, NICHT ZWEI. *** Die erste Fassung hatte zwei Stufen: Umriss fuer den Knopf,
  der die Rueckfrage OEFFNET, Flaeche fuer den, der sie BEANTWORTET. Norberts Vorgabe vom
  18.09.2026 ist anders — "komplett rot, so wie der gruene Add-Button, also vollflaechig". Und
  sie ist die bessere: Ein Umriss-Knopf liest sich wie ein Nebenweg, und Loeschen ist keiner.
  Die Rueckfrage trennt weiterhin deutlich, weil ABBRECHEN daneben leise bleibt.

  Sie steht NACH .knopf-schlicht, und das ist nicht Zufall: Beide wiegen 0-1-0, also entscheidet
  die Reihenfolge in der Datei (die Falle aus #156 und #158).

  *** KEIN HOVER, UND DAS IST GEPRUEFT, NICHT VERGESSEN. *** .knopf-akzent wird beim Zeigen zu
  --band-b; fuer --signal gibt es im Farbvertrag kein zweites Glied. Ein Hover ueber die
  Deckkraft waere der naheliegende Ersatz und ist der falsche: Bei 0,88 auf weisser Karte faellt
  der Kontrast von 5,99:1 auf 4,82:1 — er haelt FR-029 gerade noch und waere eine erfundene
  Farbe an einer Stelle, an der FR-001 nur Token erlaubt. Wer einen Hover will, traegt ihn
  ZUERST in contracts/farben.md ein.
*/
.knopf-warnend {
  background-color: var(--signal);
  color: var(--signal-auf);
  font-weight: 700;
}


/*
  Die Knopfzeile aus Feature 029. *** SIE STAND IM MARKUP UND HATTE KEINE EINZIGE REGEL ***
  (#237): An fuenf Stellen der Schnittgruppen klebten die Knoepfe aneinander und am Block
  darueber. Dieselben Werte wie .rueckfrage-knoepfe — es ist dieselbe Sache.
*/
.formular-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-top: var(--abstand);
}

/* ---------- Meldungen und Platzhalter ---------- */

.meldung {
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}

.meldung-fehler {
  color: var(--signal);
  border-color: var(--signal);
  background-color: var(--schleier);
}

/* ---------- Die Dublettenwarnung (Feature 026, FR-002, FR-003a) ----------

   *** KEIN ÜBERLAGERNDER KASTEN *** — sie steht im Formular, zwischen den Feldern und dem Knopf.
   Feature 017 hat den Modaldialog für einen harmlosen Fall verworfen (research.md Punkt 7 dort):
   Was man beim dritten Mal blind wegklickt, warnt nicht mehr.

   Gehalten ist sie deshalb wie ein Hinweis und nicht wie ein Fehler: --akzent statt --signal.
   Eine zweite gleichnamige Pflanze ist erlaubt und kommt vor; rot wäre hier gelogen. */

.dubletten-warnung {
  margin: var(--abstand) 0;
  padding: var(--abstand-klein);
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  background-color: var(--schleier);
}

.dubletten-text {
  margin: 0 0 var(--abstand-klein);
}

.dubletten-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
}

/* .platzhalter und .platzhalter-marke sind mit Feature 022 (FR-040) gefallen: Der letzte
   Platzhalter — die Ernte-Ansicht — ist gebaut, den Baustein Platzhalterhinweis gibt es nicht
   mehr. */

/* ---------- Pflanzen: Seitenkopf und Bestand (Feature 002) ---------- */

.seiten-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--abstand);
}

.seiten-kopf h1 {
  margin: 0;
}

/* DIE ZWEITE HAELFTE DES TAUSCHS AUS #158 — und sie steht AUS EINEM GRUND hier unten und
   nicht oben bei den drei Stufen: `.knopf` steht in dieser Datei WEITER OBEN, aber HINTER
   dem Stufen-Abschnitt mit den drei Schwellen. Eine Medienabfrage hebt die Spezifitaet nicht an; `.anlegen-breit`
   und `.knopf` wiegen gleich schwer, und dann entscheidet die Reihenfolge. Oben eingetragen
   blieb der Knopf am Telefon einfach stehen — beide Wege zum Anlegen nebeneinander, und die
   Reihe, die gespart werden sollte, war noch da.

   Gesehen am laufenden Stand auf 375 px, nicht im Test: Die Stufentests lesen, WAS
   dasteht, nicht, WELCHE Regel am Ende gilt. NavigationsstufenTests haelt seither
   fest, dass dieser Block hinter .knopf bleibt. */
@media (max-width: 767px) {
  .anlegen-breit {
    display: none;
  }

  /* UND SEIN PLATZ GEHT MIT. Ohne diese Zeile bliebe der Aussenabstand des Seitenkopfs
     stehen, und der Tausch haette Hoehe gekostet statt gespart — der Kopf ist dann leer bis
     auf die Ueberschrift fuer Hilfsmittel, die ausser Fluss steht.

     :has, damit es NUR die Seiten trifft, die tatsaechlich getauscht haben. Die uebrigen
     Seitenkoepfe (Kalender, Ernte, Zugaenge) tragen sichtbaren Inhalt und brauchen ihren
     Abstand weiter. */
  .seiten-kopf:has(> .anlegen-breit) {
    margin-bottom: 0;
  }
}

.pflanzen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pflanzen-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75rem;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: var(--abstand-klein);
}

.pflanzen-liste a {
  font-weight: 600;
  /* Fingerfreundlich auch dort, wo die Zeile schmal ist (FA-41). */
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Der Erfassungsstand ist auf der Karte erkennbar, ohne das Detail zu oeffnen (SC-004) —
   ueber Text UND Form, nie ueber Farbe allein (FA-48). */
.stand-marke {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--leise);
  white-space: nowrap;
}

.leerer-bestand {
  padding: var(--abstand);
  background-color: var(--karte);
  border: 1px dashed var(--linie);
  border-radius: var(--radius);
}

.leerer-bestand h2 {
  margin-top: 0;
}

/* ---------- Pflanzen: die Abschnitte der Detailansicht ---------- */

/* Die Karte: Flaeche, 14 px Radius und ein Schatten statt eines 1-px-Rands (Beobachtung 3 der
   Spec: „getrennt wird ueber Raender statt ueber Weissraum" — das war die Kritik). */
.abschnitt {
  padding: var(--abstand);
  margin-bottom: var(--abstand);
  background-color: var(--karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
}

.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  align-items: baseline;
  justify-content: space-between;
}

.abschnitt-kopf h2 {
  margin: 0;
  font-size: 1.125rem;
}

/* Der Speicherstand steht als Wort da, nicht als Farbpunkt — bei Rot-Gruen-Schwaeche sagt
   Farbe allein nichts (FA-48, research.md 001 Punkt 11). */
.stand {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--leise);
  white-space: nowrap;
}

.stand-ungespeichert,
.stand-fehlgeschlagen {
  color: var(--signal);
}

.freitext {
  width: 100%;
  margin-top: var(--abstand-klein);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.nur-lesen {
  margin: var(--abstand-klein) 0 0;
  /* Zeilenumbrueche aus dem Freitext bleiben erhalten. */
  white-space: pre-wrap;
}

.leerer-abschnitt {
  margin: var(--abstand-klein) 0 0;
  color: var(--leise);
  font-style: italic;
}

.eigenschaften-liste {
  margin: var(--abstand-klein) 0 0;
}

.eigenschaften-liste dt {
  font-weight: 600;
}

.eigenschaften-liste dd {
  margin: 0 0 var(--abstand-klein);
}

.abschnitt .knopf {
  margin-top: var(--abstand-klein);
}

/* ---------- Die drei Feldgruppen des Steckbriefs (Feature 016, T063) ----------

   Der Abschnitt "Name und Eigenschaften" traegt seit Feature 016 dreizehn Felder statt
   fuenf. SC-006 verlangt, dass er dabei bedienbar bleibt — GEGLIEDERT, nicht nur
   verlaengert (research.md Punkt 9 dort).

   Ein <fieldset> je Gruppe mit <legend>. Kein <div class="gruppe">: Die Auszeichnung ist
   nicht Zierde, sie ist das, was ein Bildschirmleser vorliest, wenn er in ein Feld
   springt. Der Vorgabe-Rahmen von fieldset ist weg — die Gruppen sollen den Abschnitt
   nicht in drei Kaesten zerlegen; die Ueberschrift und ein Abstand reichen. */
.feldgruppe {
  min-inline-size: 0;
  padding: 0;
  margin: 0 0 var(--abstand);
  border: 0;
}

.feldgruppe legend {
  padding: 0;
  margin-bottom: var(--abstand-klein);
  font-size: 0.9375rem;
  font-weight: 700;
  /* Die Linie darunter TRENNT die Gruppen und traegt damit Bedeutung — deshalb --leise und nicht
     die schmueckende --linie (FA-48; seit 022 die Regel: bedeutungstragend --leise). */
  color: var(--leise);
  border-bottom: 1px solid var(--leise);
  inline-size: 100%;
}

/* Eine Beschriftung, die zu KEINEM einzelnen Feld gehoert — der Bluehzeitraum besteht aus
   zwei Auswahlrastern, das Wuchsmass aus zwei Zahlenfeldern. Ein <label for> waere hier
   falsch: Es zeigte auf eines von zweien. */
.feld-beschriftung {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* Die zwei Zahlenfelder eines Masses stehen PAARWEISE nebeneinander — und nur zu zweit.
   Vier in einer Reihe waeren auf 375 px je 80 px breit und einzeln nicht mehr zu treffen
   (FA-41, SC-005). Zwei bleiben auch dort ueber 150 px breit. */
.mass-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-klein);
}

.mass-ende label {
  font-size: 0.875rem;
  font-weight: 400;
}

/* Die zwei Enden des Bluehzeitraums stehen auf Telefonbreite UNTEREINANDER: Ein
   Auswahlraster hat sieben Spalten, und zwei davon nebeneinander ergaeben auf 375 px
   Zellen von 25 px — deutlich unter der Trefflaeche aus FA-41. Ab Tabletbreite passen sie
   nebeneinander (siehe unten). */
.bluehzeitraum-enden {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand);
}

/* Der Zeitraum als Ganzes, ueber den beiden Rastern — die Darstellung nach FA-29, die der
   Bearbeiter sonst nirgends zu sehen bekaeme (FR-016). */
.bluehzeitraum-ganz {
  margin: 0 0 var(--abstand-klein);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tinte);
}

/* Der ausgewaehlte Tag steht als Wort ueber dem Raster — sonst muesste man die markierte
   Zelle suchen, und bei "nicht erfasst" gibt es gar keine. */
.bluehzeitraum-wert {
  margin: 0 0 var(--abstand-klein);
  font-weight: 700;
  color: var(--tinte);
}

/* Ab Tabletbreite stehen die Paare nebeneinander. Auf 375 px NICHT — dort untereinander,
   und genau das ist der Punkt von SC-005. */
@media (min-width: 768px) {
  .bluehzeitraum-enden {
    grid-template-columns: 1fr 1fr;
  }
}

/* Termineingabe und Terminliste (Feature 003) — Teil der fuenf Pflegeabschnitte. */
.termineingabe {
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

.termineingabe-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
}

.termineingabe-feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

/* Ein Feld, das ein Auswahlraster traegt, braucht die ganze Zeilenbreite: Sonst teilen sich
   Von und Bis die Zeile, und auf 375 px sind die Tageszellen nur noch 26 px breit — unter
   der Trefflaeche aus FA-41. Bei der Handpruefung von Feature 010 aufgefallen; die Raster
   kamen mit Feature 008 in diese Flex-Zeile, und die Eingabeklappe hat es verschaerft.
   Auf breiten Fenstern stehen sie weiterhin nebeneinander. */
.termineingabe-feld:has(.auswahlraster) {
  flex: 1 1 17rem;
  min-width: 0;
}

.historie-feld:has(.auswahlraster) {
  flex: 1 1 17rem;
  min-width: 0;
}

.termineingabe-feld input,
.termineingabe-feld select {
  font: inherit;
  min-height: 44px;
}

.termineingabe-datum {
  display: flex;
  gap: 0.25rem;
}

.termineingabe-datum input {
  width: 4rem;
}

.termineingabe-vorschau {
  margin: var(--abstand-klein) 0 0;
  font-style: italic;
}

.terminliste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

.termin-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.termin-zeile .knopf {
  margin-top: 0;
  min-height: 44px;
}

.hinweis-einjaehrig {
  margin-top: var(--abstand-klein);
  padding: var(--abstand-klein);
  background-color: var(--senke);
  border-radius: var(--radius);
}

/* ---------- Rueckfrage bei ungespeicherten Aenderungen (FR-018) ---------- */

.rueckfrage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
  background-color: var(--abdunkler);
  z-index: 100;
}

.rueckfrage-karte {
  max-width: 28rem;
  padding: var(--abstand);
  background-color: var(--karte);
  border-radius: var(--radius);
}

.rueckfrage-karte h2 {
  margin-top: 0;
}

.rueckfrage-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-top: var(--abstand);
}

/* ---------- Pflanzen: A-Z-Leiste und Kartenraster (Feature 002, US2) ---------- */

/* Umbrechende Knopfreihe statt waagerechtem Scrollen: Auf 375 px passen 26 Knoepfe nur
   nebeneinander, wenn man sie umbrechen laesst (FA-41, FR-016). */
.az-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: var(--abstand);
}

.az-knopf {
  /* 44 px Trefferflaeche - mit dem Finger im Garten treffbar. */
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--tinte);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
}

@media (hover: hover) {
  .az-knopf:hover:not([disabled]) {
    border-color: var(--akzent);
  }
}

.az-knopf[disabled] {
  /* Ein gesperrter Buchstabe traegt das disabled-Attribut, das die Vorlesesoftware nennt — die
     leise Schrift allein sagt es nicht (FA-48). */
  color: var(--leise);
  background-color: transparent;
  border-color: var(--linie);
  cursor: default;
}

/* Der aktive Buchstabe ist durch Farbe UND Fettung UND Rahmen hervorgehoben (FR-019 sinngemaess). */
.az-knopf-aktiv {
  color: var(--akzent-auf);
  background-color: var(--akzent);
  border-color: var(--akzent);
  font-weight: 700;
}

.az-alle {
  min-height: 44px;
}

.bestandszahl {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  color: var(--leise);
}

/* ---------- Pflanzen: die Filterzeile und die Lueckenliste (Feature 022, FR-033, FR-034) ---------- */

/* Zwei Reihen — Erfassungsstand, Luecken — mit je drei Chips. Auf 375 px brechen die Chips
   einer Reihe um, statt zu scrollen (FA-41). */
.pflanzenfilter {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
}

.pflanzenfilter-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
}

/* HIER STAND .pflanzenfilter-titel — das Wort „Erfassungsstand" beziehungsweise „Luecken" vor
   seiner Reihe, 7 rem breit. Es hat die Chips angeschoben und den Umbruch an die unschoenste
   Stelle gelegt: „Fertig 0" allein in der zweiten Zeile, „ohne Pflegehinweis 1" allein in der
   vierten (Issue #126, Norbert am iPhone). Die Auskunft steht jetzt als aria-label an der
   Gruppe — fuer Hilfsmittel da, im Bild weg. */

/* Ein Filter ohne Treffer: er bleibt stehen, damit die uebrigen Chips nicht springen, wenn sich
   der Bestand aendert — aber er fuehrt nirgendwohin. Gedaempft wie ein unbelegter Buchstabe der
   A-Z-Leiste, und im Markup ein span statt eines Verweises. */
.filter-chip-leer {
  color: var(--leise);
  border-color: var(--linie);
  cursor: default;
}

/* Der Chip ist ein Verweis, den man im Garten mit dem Daumen trifft (FA-41): 44 px. Der
   Zaehler steht leise dahinter; auf dem gewaehlten Chip erbt er die Schrift der Flaeche. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0 var(--abstand-klein);
}

.filter-zaehler {
  font-weight: 400;
  color: var(--leise);
}

.knopf-akzent .filter-zaehler {
  color: inherit;
  opacity: 0.85;
}

/* Die Lueckenliste: je Bereich eine Ueberschrift und darunter die Zeilen auf der Karte, mit
   --linie-Trenner. Jede Zeile ist ein Verweis ins Detail — 44 px (FA-41). */
.lueckenliste,
.lueckenliste-zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lueckenliste-gruppe {
  margin-bottom: var(--abstand);
}

.lueckenliste-bereich {
  margin: 0 0 var(--abstand-klein);
  font-size: 1rem;
  color: var(--leise);
}

.lueckenliste-zeilen {
  background-color: var(--karte);
  border-radius: var(--radius);
  padding: 0 var(--abstand-klein);
}

.lueckenliste-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--abstand-klein);
  min-height: 44px;
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte);
  text-decoration: none;
}

.lueckenliste-zeilen > li:last-child > .lueckenliste-zeile {
  border-bottom: 0;
}

.lueckenliste-name {
  font-weight: 600;
}

.lueckenliste-sorte,
.lueckenliste-bereiche {
  font-size: 0.875rem;
  color: var(--leise);
}

.lueckenliste-bereichsname + .lueckenliste-bereichsname::before {
  content: " · ";
}

/* Was fehlt, steht in eigener Zeile unter dem Namen — die Auskunft, wegen der man die Liste
   aufgemacht hat. */
.lueckenliste-fehlt {
  flex: 1 0 100%;
  font-size: 0.875rem;
}

/* Ein leerer Filter (FR-048): ein Satz, kein leerer Rahmen. */
.filter-leer {
  color: var(--leise);
}

/* auto-fill statt fester Spaltenzahl: Das Raster waechst mit der Breite mit, von einer
   Spalte auf dem Handy bis zu vieren am Bildschirm (FA-41). */
.pflanzen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--abstand);
}

/* Die Karte ohne 1-px-Rand (Feature 022, Beobachtung 3: Weissraum statt Rand) — sie hebt sich
   als --karte vom --grund ab, und der Abstand des Rasters trennt sie von der Nachbarin. */
.pflanzen-karte {
  display: block;
  padding: var(--abstand);
  color: var(--tinte);
  text-decoration: none;
  background-color: var(--karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
}

/* Getrennt, nicht gemeinsam: Der FOKUS muss auch auf dem Telefon gelten, sobald jemand eine
   Tastatur ansteckt (FR-055) — der HOVER nicht, sonst klebt er dort am zuletzt angetippten
   Element (#121). Dieselbe Teilung an den vier weiteren Stellen unten. */
.pflanzen-karte:focus-visible {
  background-color: var(--akzent-flaeche);
}

@media (hover: hover) {
  .pflanzen-karte:hover {
    background-color: var(--akzent-flaeche);
  }
}

.karte-name {
  margin: 0 0 0.125rem;
  font-size: 1.125rem;
  color: var(--akzent);
  /* Lange Namen werden gekuerzt; vollstaendig stehen sie im title und in der Detailansicht. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Sortenzeile steht IMMER (FR-031) — mit Sorte in --leise, ohne Sorte kursiv „keine Sorte
   erfasst". So sind Karten mit und ohne Sorte gleich hoch, und das Raster springt nicht. */
/* Der Zusatz zum Namen auf der Karte (Feature 026, FR-011) — wie die Sorte gehalten, aber
   kursiv: Er ist kein Teil des Namens, sondern die Hilfe, die zwei gleiche trennt. */
.karte-zusatz {
  margin: 0 0 0.125rem;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karte-sorte {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.karte-sorte-leer {
  font-style: italic;
}

.karte-standort {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  color: var(--leise);
  /* Hoechstens zwei Zeilen, damit die Karten im Raster gleich hoch bleiben. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.karte-stand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--leise);
}

/* DER PUNKT MIT WORT — eine Regel fuer zwei Zustandsarten (Feature 022, FR-032, FR-047, T120):
   8 px rund, in der geliehenen Farbe des Zustands (Vertrag Abschnitt 3 und 8), IMMER mit dem
   Wort daneben, nie allein (FA-48). .stand-punkt traegt den Erfassungsstand der Pflanze,
   .zustand-punkt den Zustand eines Zugangsmerkmals oder Kontos. */
.stand-punkt,
.zustand-punkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.375rem;
  border-radius: 50%;
  vertical-align: middle;
  flex: 0 0 auto;
}

.karte-stand .stand-punkt {
  margin-right: 0;
}

.stand-punkt.stand-new {
  background-color: var(--stand-neu);
}

.stand-punkt.stand-inprogress {
  background-color: var(--stand-arbeit);
}

.stand-punkt.stand-complete {
  background-color: var(--stand-fertig);
}

.zustand-punkt.zustand-gueltig {
  background-color: var(--zugang-gueltig);
}

.zustand-punkt.zustand-widerrufen {
  background-color: var(--zugang-widerrufen);
}

.zustand-punkt.zustand-abgelaufen {
  background-color: var(--zugang-abgelaufen);
}

.zustand-punkt.zustand-gesperrt {
  background-color: var(--zugang-gesperrt);
}

.karte-naechste-aufgabe {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: var(--abstand-klein) 0 0;
  font-size: 0.8125rem;
  color: var(--leise);
}

/* Das Symbol der naechsten Aufgabe in der Marke seiner Art (FR-012) — die Karte traegt dafuer
   die Klasse art-<x> an dieser Zeile. */
.karte-naechste-aufgabe .artsymbol {
  color: var(--art-marke);
}

/* ---------- Das Foto (Feature 012) ---------- */

/*
  DER KASTEN HAT EIN FESTES SEITENVERHAELTNIS, und das ist die ganze Antwort auf FR-015:
  Karten mit und ohne Foto sind dadurch EXAKT GLEICH HOCH, und beim Nachladen der Bilder
  springt nichts. Ohne den Kasten kennt der Browser die Hoehe erst, wenn das Bild da ist -
  und schiebt die halbe Uebersicht nach unten. Das ist der sichtbarste Fehler, den dieses
  Feature machen kann.

  4 : 3, weil ein Telefon so aufnimmt. Ein Hochformat wird darin eingepasst (Detail) oder
  beschnitten (Karte), nie verzerrt.
*/
.fotokasten {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  /* --bild-unterlage ist der EINZIGE Token, der in beiden Fassungen gleich steht (FR-051): Ein
     Produktfoto mit weissem Grund stuende sonst im Dunkeln als heller Block auf einer dunklen
     Karte. Die Unterlage bleibt hell, und das Foto sitzt darauf wie auf Papier. */
  background-color: var(--bild-unterlage);
}

/* In der Detailansicht wird EINGEPASST: Das grosse Bild soll vollstaendig zu sehen sein. */
.fotokasten-detail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
  Auf der Karte wird BESCHNITTEN (cover), in der Detailansicht EINGEPASST (contain): Eine
  Miniatur soll die Flaeche fuellen, das grosse Bild soll vollstaendig zu sehen sein.

  Der Kasten ist auf der Karte dieselbe Regel wie im Detail -- und genau daran haengt FR-015:
  Hoch, Quer und Quadratisch fuellen dieselbe Flaeche, und ein Platzhalter ist so hoch wie ein
  Bild. Wuerde hier ein anderes Seitenverhaeltnis stehen, waeren die Karten wieder verschieden
  hoch.
*/
.fotokasten-karte {
  margin-bottom: var(--abstand-klein);
  border: 1px solid var(--linie);
}

.fotokasten-karte img {
  display: block;
  width: 100%;
  height: 100%;
  /* Beschnitten wird nur in der Anzeige, MITTIG, nie verzerrt (FR-052) — die Datei bleibt. */
  object-fit: cover;
  object-position: center;
}

/*
  Der Platzhalter ist DERSELBE Kasten - gleiches Seitenverhaeltnis, gleiche Hoehe (SC-012).

  Das Wort steht in --bild-schrift auf der hellen Bildunterlage — lesbar in beiden Fassungen,
  weil BEIDE in beiden Fassungen gleich sind (FR-051). Hier stand --leise, und das wechselt im
  Dunkeln auf Hellgrau: hell auf hell, 2,03:1 (#282). "Kein Foto" bedeutet etwas: Es ist der
  Unterschied zwischen "hier fehlt noch was" und einem kaputten Bild.
*/
.fotoplatzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bild-schrift);
  font-size: 0.875rem;
  border: 1px dashed var(--bild-schrift);
}

/* Das Dateifeld traegt die Hausgestalt und die Trefflaeche aus FA-41 - ohne diese Regel ist
   es das einzige Bedienelement der App, das seine eigene mitbringt. */
.foto-dateifeld {
  display: block;
  width: 100%;
  margin-top: var(--abstand-klein);
  padding: 0.5rem;
  font: inherit;
  color: var(--tinte);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  min-height: 44px;
}

/* Die Sorte unter der Ueberschrift der Detailansicht (Feature 022, FR-030) — leise, dicht unter
   dem Namen, wie die Sortenzeile der Karte. */
.detail-sorte {
  margin: calc(-1 * var(--abstand-klein)) 0 var(--abstand);
  font-size: 1rem;
  color: var(--leise);
}

.foto-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
}

/* ---------- Pflanzen: Erfassungsstand und Loeschen (Feature 002, US3) ---------- */

.stand-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-top: var(--abstand-klein);
}

/* Der Loeschknopf steht abgesetzt am Ende der Seite - nicht neben dem Speichern eines
   Abschnitts, wo ein Fehlgriff teuer waere. */
.abschnitt-gefahr {
  border-color: var(--signal);
}

.loeschen-name {
  font-weight: 600;
}

/* ---------- Die Aufgabenarten (Feature 003) ---------- */

/*
  Der Code fragt nie nach einer Farbe, sondern nach der ART - die Zuordnung steht hier,
  genau einmal. Farbe traegt nie allein Bedeutung: Jeder Balken nennt Pflanze und
  Taetigkeit, jede Aufgabenzeile die Art im Klartext, und die Legende ordnet Farbe und
  Wort einander zu (FR-024, FR-027, FR-028 aus 003).

  SEIT FEATURE 022 EIN DREIKLANG (FR-009, FR-010): Jede Art traegt eine getoente FLAECHE, eine
  SCHRIFT darauf und eine MARKE fuer Rand, Punkt und Symbol. Weisser Text auf gesaettigter
  Flaeche kommt nicht mehr vor (FR-011) — er erreichte auf dem neuen Ernten-Gruen nur 3,92:1.
  Die Klasse .art-<x> setzt die drei Rollen; wer sie traegt (Zeile, Balken, Chip, Punkt), liest
  nur noch --art-flaeche, --art-schrift, --art-marke. Die WERTE stehen im Tokenblock, in beiden
  Fassungen; AufgabenfarbenTests rechnet sie nach.

  In Graustufen liegen die fuenf Flaechen dicht beieinander (1,00:1 bis 1,13:1) — hingenommen,
  weil jede Zeile und jeder Balken Symbol UND Wort traegt (FR-012, Artsymbol.razor).
*/

.art-duengen {
  --art-flaeche: var(--art-duengen-flaeche);
  --art-schrift: var(--art-duengen-schrift);
  --art-marke: var(--art-duengen-marke);
}

.art-giessen {
  --art-flaeche: var(--art-giessen-flaeche);
  --art-schrift: var(--art-giessen-schrift);
  --art-marke: var(--art-giessen-marke);
}

.art-ernten {
  --art-flaeche: var(--art-ernten-flaeche);
  --art-schrift: var(--art-ernten-schrift);
  --art-marke: var(--art-ernten-marke);
}

.art-aussaeen {
  --art-flaeche: var(--art-aussaeen-flaeche);
  --art-schrift: var(--art-aussaeen-schrift);
  --art-marke: var(--art-aussaeen-marke);
}

.art-schneiden {
  --art-flaeche: var(--art-schneiden-flaeche);
  --art-schrift: var(--art-schneiden-schrift);
  --art-marke: var(--art-schneiden-marke);
}

/* Der Dreiklang als Flaeche: getoent, Schrift darauf, Rand in der Marke (FR-009, FR-010). Der
   Rand ist keine Zierde — in der dunklen Fassung liegt die Flaeche nur 1,2:1 von der Karte
   entfernt; erst der Rand macht sie zur Flaeche. */
.art-flaeche {
  background-color: var(--art-flaeche);
  color: var(--art-schrift);
  border: 1px solid var(--art-marke);
}

/* Nur ein Farbtupfer in der Marke, etwa in der Legende. */
.art-punkt {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 2px;
  background-color: var(--art-marke);
  flex: 0 0 auto;
}

/* Das Symbol der Art (Artsymbol.razor, FR-012): 16 x 16, in der Marke, neben dem Wort. Es
   erbt die Farbe ueber currentColor, damit es auf einer Artenflaeche die Schrift traegt und
   sonst die Marke. */
.artsymbol {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

/* ---------- Aufgabenliste und Aufgabenzeile (Feature 003, User Story 3) ---------- */

.aufgabenliste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

.aufgaben-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

/* DIE HUELLE UM ALLES NACH DEM NAMEN (#140) — am PC UNSICHTBAR.

   display: contents nimmt die Huelle aus dem Kasten-Baum: Ihre Kinder bleiben unmittelbare
   Flex-Elemente der Zeile, und am breiten Bildschirm sieht alles aus wie vorher. Norbert hat
   den PC-Stand gezeigt, und dort ist er richtig — es passt in eine Zeile, ein erzwungener
   Umbruch verschenkte nur Platz. Erst unter 768 px wird die Huelle zu einer eigenen Reihe. */
.aufgaben-angaben {
  display: contents;
}

/* UNTER 768 PX: fester Umbruch (Norberts Vorschlag #140 vom 12.09.2026).

     ◯  Heidelbeere · Brigitta Blue
        01.08.–30.09. · Ernte · 1. Aug 2026 · Zaun hinten

   Vorher brach die Zeile dort um, wo der Platz ausging — beim Schnitt rutschte der Zeitraum
   noch nach oben, bei Ernte und Duengen nicht. Das Auge sucht die Angaben dann in jeder Zeile
   woanders.

   DER GEWINN IST NICHT NUR ORDNUNG: Die HOEHE einer Zeile haengt sonst am Bestand — an der
   Laenge von Name, Sorte, Bereich und Duengername — statt am Layout. Genau daran ist die
   Messung zu #106 gescheitert: Im Pruefbestand war eine Zeile eine Textzeile hoch, im echten
   Garten sind es zwei bis drei. */
@media (max-width: 767px) {
  .aufgaben-zeile {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  /* KEIN eigenes row-gap: Das gap der Zeile gilt im Raster weiter, waagerecht wie senkrecht.
     Damit bleiben zwischen dem Verweis auf die Pflanze und dem Duenger-Chip darunter dieselben
     8 px, die vorher zwischen zwei umgebrochenen Flex-Reihen standen — beide sind 44 px hohe
     Trefflaechen (FA-41), und der Abstand zwischen ihnen ist Teil der Zusage aus T-31. Ein
     engeres row-gap hatte hier gestanden und die Luecke auf 2 px gedrueckt; gemessen am
     12.09.2026 im Browser, nicht geschaetzt. */

  /* Der Haken bleibt beim Namen — er gehoert zu dem, was man liest, bevor man abhakt. */
  .aufgaben-haken {
    grid-column: 1;
    grid-row: 1;
  }

  .aufgaben-titel {
    grid-column: 2;
    grid-row: 1;
  }

  /* Die Angaben nehmen die zweite Reihe, unter dem Namen und buendig mit ihm — nicht unter dem
     Haken. Innen wieder flex: Sie stehen NEBENEINANDER und duerfen untereinander umbrechen,
     wenn sie zu viert nicht in eine Reihe passen. */
  .aufgaben-angaben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-klein);
    grid-column: 2;

    /* *** DIE KETTE MUSS NACH UNTEN BEGRENZT SEIN (#261). ***

       Ohne dies hat jedes Glied — Huelle, Duenger-Zelle, Chip — `min-width: auto`, also
       mindestens seine eigene min-content. Beim `nowrap`-Chip ist das der GANZE Duengername:
       "COMPO BIO Rhododendron- und Hortensien Duenger mit Schafwolle" sind 414 px, und die
       Seite schob am Telefon um 111 px (gemessen am 19.09.2026, FA-41).

       DER FEHLER IST AELTER ALS #259 — dieselben 111 px mit und ohne dessen Behebung. Er
       brauchte nur diesen einen, sehr langen Namen, und am Telefon sieht ein abgeschnittener
       Chip nicht kaputt aus; man merkt es erst beim Wischen. */
    min-width: 0;
  }

  /* Die Fehlermeldung steht ueber die ganze Breite, nicht in der Namensspalte. */
  .aufgaben-zeile > .meldung {
    grid-column: 1 / -1;
  }
}

/* EINE Karte mit Trennlinien statt einer Karte je Zeile (Feature 022, FR-022): Die Liste traegt
   Flaeche und Rand, die Zeilen die Linie dazwischen — die letzte keine. Drei einzelne Kaesten
   kosteten auf 375 px die dritte Zeile, die FR-023 ohne Scrollen sehen will. */
.aufgabenkarte {
  padding: 0 var(--abstand-klein);
  background-color: var(--karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
}

.aufgabenkarte > .aufgaben-zeile:last-child {
  border-bottom: 0;
}

/* Die Sorte hinter dem Namen (FR-030) und der Zeitpunkt des Hakens (FR-038): Nebensachen in
   --leise (6,16:1 auf der Karte, 5,6:1 auf dem Grund) — lesbar, aber leiser als der Name. */
.aufgaben-sorte,
.aufgaben-zusatz,
.aufgaben-erledigt-am {
  font-size: 0.875rem;
  color: var(--leise);
}

.aufgaben-sorte,
.aufgaben-zusatz {
  margin-left: 0.25rem;
}

/* Der Zusatz zum Namen (Feature 026, FR-011) steht noch eine Spur zurueckhaltender als die
   Sorte: Er ist eine Hilfe fuer einen seltenen Fall und soll die Zeile nicht schwerer machen,
   die bei #106 und #120 schon zu eng war. */
.aufgaben-zusatz {
  font-style: italic;
}

/* Die Trefferflaeche der Checkbox ist mindestens 44 px - abgehakt wird einhaendig im Garten
   (SC-007, FA-41). */
/* RUNDE KREISE STATT KAESTCHEN (Issue #124, Norbert am 11.09.2026: „waere schoen, wenn die abhak
   Kaestchen runde Kreise waeren").

   Ein natives Kaestchen laesst sich nicht rund machen — Safari zeichnet seine eigene Form und
   schert sich nicht um border-radius. Deshalb appearance: none und die Form selbst gezeichnet:
   der Kreis als ::before, der Haken als zwei gedrehte Raender im ::after.

   KEIN SVG ALS HINTERGRUNDBILD: Das truege einen Farbwert im Stylesheet und verstiesse gegen
   SC-002 (kein Farbwert ausserhalb der Tokenbloecke). Zwei Raender kosten nichts und folgen der
   Tokenfarbe.

   DIE TREFFFLAECHE BLEIBT 44 px (FA-41) — der Kreis darf kleiner sein: getroffen wird die
   Flaeche, gesehen der Kreis. TreffflaechenTests haelt die 44 px weiterhin fest. */
.aufgaben-haken {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

.aufgaben-haken::before {
  content: "";
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 2px solid var(--leise);
  border-radius: 50%;
  background-color: var(--karte);
}

.aufgaben-haken:checked::before {
  background-color: var(--akzent);
  border-color: var(--akzent);
}

/* Der Haken: zwei Raender, um 45 Grad gedreht. Er steht erst, wenn abgehakt ist — vorher ist der
   Kreis leer, und das ist die ganze Auskunft. */
.aufgaben-haken:checked::after {
  content: "";
  grid-area: 1 / 1;
  width: 12px;
  height: 6px;
  border-left: 2.5px solid var(--akzent-auf);
  border-bottom: 2.5px solid var(--akzent-auf);
  transform: translateY(-2px) rotate(-45deg);
}

.aufgaben-titel {
  flex: 1 1 auto;
  /* Ein langer Pflanzenname bricht um, statt die Zeile zu sprengen. */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Feature 019, FR-022 und T-31: Die Zeile hat seit dem Hereinholen von 017 bis zu VIER
   Trefflaechen - Haken, Verweis auf die Pflanze, Duenger-Chips, Loeschen. In Feature 005
   standen zwei zu dicht beieinander, und am Telefon traf die falsche.
   Drei Massnahmen dagegen, und alle drei sind noetig:
   1. Der Verweis ist nur so breit wie der NAME (er steckt im Titelfeld, ist nicht das Feld).
   2. Er ist 44 px hoch, also so hoch wie Haken und Loeschen daneben - eine niedrigere
      Trefflaeche zwischen zwei hohen ist die Einladung zum Danebentippen.
   3. KEIN negativer Aussenabstand nach links. Hier stand einer, und er hat den Abstand zum
      Haken aufgefressen: GEMESSEN am 05.09.2026 auf 375 px waren es DREI Pixel zwischen
      Haken und Verweis - nicht die elf, die die Huelle daneben vortaeuschte. Die erste
      Messung galt dem <span> darum, nicht dem <a> darin; erst mit den Duenger-Chips aus 017
      in derselben Zeile ist es aufgefallen. Ohne den negativen Abstand sind es elf Pixel,
      und das ist der Abstand, den FR-022 meint. */
.aufgaben-pflanze {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--abstand-klein);
  border-radius: var(--radius);
}

@media (hover: hover) {
  .aufgaben-pflanze:hover {
    background-color: var(--schleier);
  }
}

/* Der Balken IST die Trefflaeche und hat keine zweite - er wird deshalb GANZ zum Verweis
   (FR-020). Farbe und Zuschnitt kommen unveraendert aus .kalender-balken; hier steht nur,
   dass ein Verweis darin nicht wie ein Verweis aussehen soll. Die Schrift kommt seit 022 aus
   dem Dreiklang der Art (FR-011: kein weisser Text auf Farbe).

   KEIN `display` HIER (#281): a.kalender-balken wiegt 0-1-1 und schlaegt das `flex` aus
   .kalender-balken (0-1-0) — egal, wo es steht. Mit `display: block` wurden Art und Text zu
   Inline-Elementen, an denen `text-overflow: ellipsis` nicht wirkt: Der Balken schnitt am
   Wochenende mitten im Wort ab. Gewacht von GartenbestandTests im Browser. */
a.kalender-balken {
  text-decoration: none;
  color: var(--art-schrift);
}

.aufgaben-titel-erledigt {
  text-decoration: line-through;
  color: var(--leise);
}

/* Die Art als getoente Flaeche mit Rand in der Marke und dunkler Schrift (Feature 022, FR-009,
   FR-010): der Dreiklang aus .art-<x>. Symbol und Wort stehen darin nebeneinander (FR-012). */
.aufgaben-art {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  white-space: nowrap;
  background-color: var(--art-flaeche);
  color: var(--art-schrift);
  border: 1px solid var(--art-marke);
}

.aufgaben-datum {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Ueberfaellig ist die Signalfarbe (FR-020, Vertrag Abschnitt 1) — und steht als WORT da. */
.aufgaben-ueberfaellig {
  color: var(--signal);
}

/* Bevorstehend (T-64, seit 05.09.2026): gedaempft, nicht betont - das Gegenstueck zu
   "ueberfaellig". Der Eintrag steht da, damit man ihn KOMMEN SIEHT; er soll den Blick nicht
   von dem wegziehen, was heute dran ist.

   Grau-dunkel und nicht blasser: Der Wert traegt 4,7:1 auf der Grundflaeche und bleibt damit
   lesbar (research.md Punkt 10 aus Feature 001). Die Aussage steht ausserdem im TEXT und nicht
   nur in der Farbe. */
.aufgaben-bevorstehend {
  color: var(--leise);
}

/* ---------- Feature 015: Zeitraum in der Zeile und Loeschen ---------- */

/* Der Zeitraum des TERMINS, neben der Faelligkeit (FR-023). Bewusst zurueckgenommen und
   abgesetzt: Er ist der Behaelter, in dem die Faelligkeit liegt, nicht die Faelligkeit selbst.
   Ohne den Unterschied laesen sich bei einem wiederholenden Termin zwei Datumsangaben
   nebeneinander, ohne dass klar waere, welche was bedeutet. */
.aufgaben-zeitraum {
  font-size: 0.8125rem;
  color: var(--leise);
  white-space: nowrap;
}

/* Die Trefferflaeche ist mindestens 44 px, wie die Checkbox daneben (SC-007, FA-41).

   *** BIS ZUM 19.09.2026 STAND HIER AUCH .aufgaben-loeschen (#252). *** Die Aufgabenzeile
   traegt kein Loeschen mehr; geloescht wird an der Pflanze. Uebrig bleibt der gartenweite Fall:
   Diese Aufgaben haben keine Pflanzenseite, also auch keinen anderen Ort. */
.gartenweite-loeschen {
  min-height: 44px;
  flex: 0 0 auto;
}

/*
  ===== DIE AUFGABENLISTE ALS RASTER, AB TABLETBREITE (#252) =====

  AM IPAD GEFUNDEN, 19.09.2026. Bis dahin war die Zeile ab 768 px ein Flusslayout: Wo etwas
  umbrach oder wie weit etwas nach rechts rutschte, entschied der INHALT — eine Zeile mit
  Duenger-Chip sah anders aus als eine ohne, eine mit Zeitraum schob Art und Faelligkeit weiter
  nach rechts als eine ohne. Das Auge sucht den rechten Rand dann in jeder Zeile woanders.

  *** DAS IST DER DRITTE ANLAUF AN DERSELBEN STELLE. *** #140 hat den Umbruch unter 768 px
  festgeschrieben, #156 das Loeschen unter 768 px in eine eigene Reihe — beide Male ein Flicken
  an EINER Breite. Dazwischen, genau dort, wo das iPad steht, blieb es beim Fluss.

  *** DAS RASTER GEHOERT AUF DIE LISTE, NICHT AUF DIE ZEILE — UND DAS IST HIER GEMESSEN. ***
  Der erste Anlauf setzte `display: grid` auf `.aufgaben-zeile`. Es sah richtig aus und richtete
  NICHTS aus: Spuren gelten je Rasterbehaelter, und jedes <li> war sein eigener. Am laufenden
  Stand bei 768 px nachgemessen, vier Zeilen: Spalte „Art" begann bei 465, 569, 551 und 551 px.
  Erst `subgrid` an der Zeile teilt die Spuren der Liste — und genau das ist die Zusage aus
  FR-066 von 022.

  *** JEDE SPALTE WIRD AUSDRUECKLICH ZUGEWIESEN. *** Fast alle Angaben sind optional: Der Haken
  fehlt dem Leser und jedem Termin, dessen Saison erst anbricht; Duenger, Zeitraum, Herkunft und
  „Erledigt am" stehen nur manchmal da. Bei automatischer Platzierung ruecken die uebrigen dann
  eine Spalte nach links — und die Flucht waere wieder dahin.

  *** column-gap: 0 UND MARGIN AM ELEMENT, NICHT gap AN DER LISTE. *** Eine leere Spalte
  verschwindet auf 0 Breite; ein gap daneben bliebe trotzdem stehen und ergaebe genau die
  ungleichen Abstaende, gegen die das Raster gebaut ist.

  *** DER NAME IST DIE HAUPTSACHE, DER DUENGER DIE BEIGABE (#259). ***
  Zuerst standen hier `minmax(0, 1fr)` fuer den Namen und `minmax(0, auto)` fuer den Duenger —
  die falsche Rangfolge, aufgefallen erst im echten Garten. `auto` heisst MAX-CONTENT: Die
  Duenger-Spur nimmt ihre volle Textbreite, und weil die Spuren ueber die GANZE Liste geteilt
  werden (subgrid), tut das die BREITESTE Zeile fuer alle. Eine einzige Zeile mit "COMPO BIO
  Rhododendron- und Hortensien Duenger mit Schafwolle" liess vom Namen in 53 Zeilen ein paar
  Dutzend Pixel uebrig. Norbert am 19.09.2026: "Der PflanzName ist viel zu kurz."

  Jetzt faellt der Name nie unter seine min-content — das laengste Wort — und bekommt beim
  Verteilen den DOPPELTEN Anteil; der Duenger teilt sich den Rest und bricht innen um. Spalte 3
  bleibt `minmax(0, auto)`: Bereichs-Chips sind kurz und klauen niemandem den Platz.

  *** DAMIT `min-content` ETWAS BEDEUTET, MUSS DER UMBRUCH MITSPIELEN. *** `.aufgaben-titel`
  traegt `overflow-wrap: anywhere` — und dessen min-content ist EIN ZEICHEN. Eine Spur mit
  `min-content` als Untergrenze waere damit so breit wie ein Buchstabe. Im Block unten steht
  deshalb `break-word` fuer die Zeilen IM RASTER; am Telefon bleibt `anywhere`.

  *** DIESER BLOCK MUSS HINTER `.aufgaben-zeile { display: flex }` STEHEN *** (die Lehre aus
  #156 und #158): Beide Waehler wiegen gleich, und eine Medienabfrage hebt die Spezifitaet nicht
  an. Steht er davor, bleibt die Zeile flex und das ganze Raster tut nichts. Ein Test haelt die
  Reihenfolge fest (AufgabenzeileFormTests).

  *** @supports IST HIER PFLICHT, NICHT VORSICHT. *** Ohne subgrid faellt `grid-template-columns`
  an der Zeile weg, und ihre Kinder landeten alle in EINER Spur — die Zeile waere unbrauchbar,
  nicht nur unausgerichtet. Mit der Abfrage bleibt in dem Fall schlicht das Flusslayout.
*/
@supports (grid-template-columns: subgrid) {
  @media (min-width: 768px) {
    .aufgabenliste {
      display: grid;
      grid-template-columns:
        auto            /* 1 Haken */
        minmax(min-content, 2fr) /* 2 Name, Sorte, Zusatz — die HAUPTSACHE */
        minmax(0, auto)          /* 3 Herkunft und Bereiche */
        minmax(0, 1fr)           /* 4 Duenger — die Beigabe: teilt, statt zu fordern */
        auto            /* 5 Zeitraum */
        auto            /* 6 Art */
        auto            /* 7 Faelligkeit */
        auto            /* 8 Erledigt am */
        auto;           /* 9 naechster Termin */
    }

    .aufgabenliste > .aufgaben-zeile {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: center;
      column-gap: 0;
    }

    .aufgabenliste > .aufgaben-zeile > .aufgaben-haken { grid-column: 1; }

    .aufgabenliste > .aufgaben-zeile > .aufgaben-titel {
      grid-column: 2;

      /* *** HIER UND NUR HIER: break-word STATT anywhere (#259). ***
         `anywhere` setzt die min-content-Breite auf EIN ZEICHEN — die Namensspur oben haette
         dann eine Untergrenze von einem Buchstaben, und genau so sah es aus:
         "Christros / e", "Prachtsp / iere". `break-word` bricht ein Wort erst, wenn es allein
         nicht passt, und laesst die min-content beim laengsten WORT.

         Unter 768 px bleibt `anywhere` richtig (siehe die Grundregel weiter oben): Dort steht
         der Name in einer schmalen zweiten Spalte, und ein unteilbares Wort spraengte die
         Zeile. */
      overflow-wrap: break-word;
    }
    .aufgabenliste .aufgaben-herkunft { grid-column: 3; }
    .aufgabenliste .aufgaben-duenger { grid-column: 4; }
    .aufgabenliste .aufgaben-zeitraum { grid-column: 5; }
    .aufgabenliste .aufgaben-art { grid-column: 6; }
    .aufgabenliste .aufgaben-datum { grid-column: 7; }
    .aufgabenliste .aufgaben-erledigt-am { grid-column: 8; }
    .aufgabenliste .aufgaben-naechster-termin { grid-column: 9; }

    /* Die Fehlermeldung steht ueber die ganze Breite, nicht in der Namensspalte — wie im
       Handy-Block aus #140. */
    .aufgabenliste > .aufgaben-zeile > .meldung {
      grid-column: 1 / -1;
    }

    .aufgabenliste .aufgaben-haken,
    .aufgabenliste .aufgaben-titel,
    .aufgabenliste .aufgaben-herkunft,
    .aufgabenliste .aufgaben-duenger,
    .aufgabenliste .aufgaben-zeitraum,
    .aufgabenliste .aufgaben-art,
    .aufgabenliste .aufgaben-datum,
    .aufgabenliste .aufgaben-erledigt-am {
      margin-inline-end: var(--abstand-klein);
    }
  }
}

/* ---------- Feature 015: die Liste der gartenweiten Aufgaben (US2) ---------- */

.gartenweite-liste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

.gartenweite-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.gartenweite-titel {
  flex: 1 1 auto;
  /* Ein sehr langer Titel bricht um, statt die Zeile zu sprengen (FR-025). */
  min-width: 0;
  overflow-wrap: anywhere;
}

.gartenweite-zeitraum {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ---------- Kalender: Werkzeuge, Monats-/Wochenansicht, Balken, Legende (Feature 003 US2) ---------- */

.kalender-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  justify-content: space-between;
  margin-bottom: var(--abstand);
}

.kalender-moduswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
}

/* ---------- Feature 019: die Kopfzeile des Kalenders (US2, FR-010 bis FR-016) ---------- */

/* Sie hat die alte .kalender-blaettern aus drei Wortknoepfen abgeloest: Angabe in der Mitte,
   je ein Pfeil links und rechts, der Weg zurueck zu heute dahinter. */
.kalender-kopf {
  display: flex;
  flex-wrap: wrap;
  /* Oben, nicht mittig: Bricht die Angabe um (Tagesansicht), blieben mittige Pfeile nicht an
     ihrem Platz, sondern rutschten um eine halbe Zeile nach unten (#283). Einzeilig ist beides
     gleich — Angabe und Pfeil sind je 44 px hoch. */
  align-items: flex-start;
  gap: var(--abstand-klein);
}

/* Die Angabe ist ein Knopf (sie oeffnet die Monats- und Jahresauswahl, FR-015), sieht aber
   wie eine Ueberschrift aus - der Kalender soll sagen, wo er steht, und nicht wie ein
   Bedienelement aussehen, das man erst finden muss. */
.kalender-kopf-angabe {
  min-height: 44px;
  padding: 0 var(--abstand-klein);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
  /* DIE PFEILE WANDERN NICHT (Spec 019, Edge Cases; #283). Das leistet die FESTE Breite: Mit
     min-width: 0 war die Angabe so breit wie ihr Text, und der rechte Pfeil stand bei
     "September" 62 px weiter rechts als bei "Juli". 12em fasst "September 2026" in einer Zeile
     und laesst auf 375 px beide Pfeile daneben; laengere Angaben (Tagesansicht) brechen um,
     wie die Spec es erlaubt. */
  text-align: center;
  flex: 0 0 12em;
  min-width: 0;
}

@media (hover: hover) {
  .kalender-kopf-angabe:hover {
    border-color: var(--leise);
  }
}

/* KLEIN AUSSEHEN, GROSS SEIN (FR-013, FA-41): Die Zeichnung ist ein Chevron von 12 px, die
   Trefffflaeche ist 44 x 44 px. "Vor/zurueck nur als kleine Pfeile wie im Outlook" heisst
   klein AUSSEHEN - der Innenabstand macht den Unterschied, nicht die Groesse des Bildes.
   Auf einem Telefon ist genau das der Unterschied zwischen treffen und danebentippen. */
.kalender-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius);
  color: var(--tinte);
}

@media (hover: hover) {
  .kalender-pfeil:hover {
    background-color: var(--karte);
  }
}

/* DER PLATZ DES "HEUTE"-KNOPFES, wo es ihn nicht gibt (Issue #121, Norberts Befund am iPhone vom
   11.09.2026). Er erscheint nur ausserhalb des heutigen Zeitraums — und liess beim Blaettern die
   ganze Zeile ruecken. visibility statt display: display: none gaebe den Platz wieder her und
   waere genau der Fehler zurueck. Die Knopfklassen stehen daneben, weil nur sie dieselbe Flaeche
   ergeben; im Markup ist es ein span mit aria-hidden, kein Verweis ohne Ziel. */
.kalender-heute-platz {
  visibility: hidden;
}

.kalender-pfeil-zeichnung {
  width: 12px;
  height: 20px;
}

/* ---------- Feature 019: die Filterleiste (US4, FR-023, FR-024) ---------- */

.artenfilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand);
}

/* Jeder Schalter traegt die Farbe seiner Art (FA-48) - im UNGEWAEHLTEN Zustand aber nur als
   Rand und Schrift, damit fuenf volle Farbflaechen die Seite nicht erschlagen und der
   gewaehlte Zustand ueberhaupt noch erkennbar bleibt. Die Farbe kommt aus .art-* (unten),
   dieselbe Quelle wie Balken, Zeile und Legende. */
.artenfilter-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 var(--abstand-klein);
  border: 2px solid var(--art-marke);
  border-radius: var(--radius);
  background-color: var(--karte);
  color: var(--tinte);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.artenfilter-schalter .artsymbol {
  color: var(--art-marke);
}

/* Gewaehlt ist die getoente Flaeche der Art (Feature 022, FR-009) — und aria-pressed sagt es
   der Vorlesesoftware. Kein weisser Text auf Farbe mehr (FR-011); die Schrift der Art steht
   auf ihrer Flaeche mit mindestens 4,5:1 (AufgabenfarbenTests). */
.artenfilter-schalter-gewaehlt {
  background-color: var(--art-flaeche);
  color: var(--art-schrift);
}

/* FR-028: kein leerer Kalender ohne Erklaerung. */
.filter-leer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
}

/* ---------- Feature 019: die beiden neuen Abschnitte (US1, US5) ---------- */

/* Ueberfaelliges steht ueber der Aufgabenliste und ist die dringlichere Aussage - der
   Akzentrand sagt das, ohne dass ein Wort dafuer noetig waere. Dunkelrot bleibt dem Akzent
   vorbehalten (FA-48) und ist hier keine Aufgabenart, sondern eine Hervorhebung. */
.ueberfaellige {
  border-left: 4px solid var(--signal);
  padding-left: var(--abstand-klein);
}

.erledigte {
  margin-top: var(--abstand);
}

/* Die Zusammenfassung ist die Trefflaeche zum Auf- und Zuklappen - 44 px hoch wie alles
   andere, was im Garten mit dem Daumen getroffen wird (FA-41). */
.erledigte-titel {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--leise);
  cursor: pointer;
}

/* Der Kalendersprung (Feature 010, US4). Zwei Raster nebeneinander, auf 375 px
   untereinander — die Raster selbst bringen ihre Masse aus .auswahlraster* (Feature 008)
   mit, hier steht nur die Anordnung. */
.kalender-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin-bottom: var(--abstand);
  padding: var(--abstand);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.kalender-sprung-teil {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Eine eigene Klasse statt .auswahlraster-titel: Der Titel dort benennt die angezeigte
   Seite des Rasters ("2016-2027"), diese Ueberschrift benennt das Raster selbst. */
.kalender-sprung-titel {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: var(--abstand-klein);
}

.monatsansicht,
.wochenansicht {
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand-klein);
  margin-bottom: var(--abstand);
  /* Kein waagerechtes Scrollen auf 375 px (FA-41) - die Spalten schrumpfen stattdessen. */
  overflow-x: hidden;
}

.monatsansicht-kopf,
.monatsansicht-tage,
.wochenansicht-kopf {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.monatsansicht-wochentag,
.wochenansicht-tagkopf {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

.wochenansicht-tagkopf {
  display: flex;
  flex-direction: column;
}

.monatsansicht-tag {
  text-align: center;
  font-size: 0.8125rem;
  padding: 0.125rem 0;
}

/* Abgeschwächt (FR-021 aus 003), aber lesbar: --leise statt --linie. Die Linienfarbe als Schrift
   stand bei 1,28 : 1 — die Verfassung verlangt 4,5 : 1 auch für den leisen Text. */
.monatsansicht-tag-fremd {
  color: var(--leise);
}

.monatsansicht-tag-heute,
.wochenansicht-tagkopf.monatsansicht-tag-heute {
  background-color: var(--senke);
  font-weight: 700;
  border-radius: var(--radius);
}

.monatsansicht-woche {
  margin-top: 2px;
}

.balkenreihe {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--zeilen, 1), 1.5rem);
  gap: 2px;
  margin-top: 2px;
}

/* Der Balken traegt den Dreiklang seiner Art (Feature 022, FR-009 bis FR-011): getoente Flaeche,
   Rand in der Marke, dunkle Schrift — kein weisser Text auf Farbe mehr. Symbol und Wort stehen
   vor dem Namen (FR-012); gekuerzt wird per CSS von rechts. */
.kalender-balken {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 2px;
  font-size: 0.75rem;
  padding: 0 0.25rem;
  color: var(--art-schrift);
  background-color: var(--art-flaeche);
  border: 1px solid var(--art-marke);
  overflow: hidden;
  white-space: nowrap;
}

.kalender-balken .artsymbol {
  color: var(--art-marke);
}

/*
  DIE ZUSAMMENGEKLAPPTE ZEILE (#239). Sie ist ein <button> und kein <a>: Sie fuehrt zu keiner
  Pflanze, sondern klappt auf. Der Browser gibt einem Knopf eigene Schrift, eigenen Rand und
  eigene Ausrichtung mit — die drei Zeilen hier nehmen sie zurueck, damit er in der Reihe
  aussieht wie jeder andere Balken.

  Die Schraffur ist die zweite Auszeichnung neben der Zahl (FR-012 aus 022: nie Farbe allein).
  Sie sagt "hier steckt mehr drin", bevor jemand die Zahl liest — und sie unterscheidet das
  Buendel von einem gewoehnlichen Balken, ohne eine sechste Farbe zu erfinden.
*/
.kalender-buendel {
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  cursor: pointer;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 5px,
    var(--art-marke) 5px,
    var(--art-marke) 6px);
}

.kalender-buendel[aria-expanded="true"] {
  /* Aufgeklappt traegt die Zeile keinen versteckten Inhalt mehr — dann ist die Schraffur eine
     Auskunft, die nicht mehr stimmt. */
  background-image: none;
}

/* DAS ARTWORT SCHRUMPFT ALS LETZTES — ABER ES SCHRUMPFT (#292).

   Mit `flex: 0 0 auto` gab es nie Breite ab. Bei einem Balken ueber einen EINZELNEN Tag ist am
   Telefon rund 48 px Platz; Symbol, Wort und Polster brauchen 66. Der Name hatte seine Breite
   da laengst vollstaendig abgegeben, und danach schnitt `overflow: hidden` am Knopf hart ab —
   mitten im Buchstaben, ohne Auslassungspunkte. Derselbe Fehler wie #281, nur an der anderen
   Spanne; am Knopf selbst wirkt `text-overflow` nicht, weil er ein Flex-Behaelter ist.

   Der hohe Schrumpffaktor am Namen haelt die Reihenfolge aus Balkenreihe.razor: Zuerst soll
   lesbar sein, WAS zu tun ist. Der Name gibt alles ab, bevor das Artwort den ersten Buchstaben
   verliert — im Browser nachgemessen: ab 90 px steht das Wort wieder vollstaendig da. */
.balken-art {
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.balken-text {
  flex: 1 100 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Die Marke der Legende: das Symbol der Art in ihrer Marke (FR-012). */
.legende-marke {
  display: inline-flex;
  color: var(--art-marke);
  flex: 0 0 auto;
}

.legende {
  margin-bottom: var(--abstand);
}

.legende-titel {
  font-size: 1rem;
  margin: 0 0 var(--abstand-klein);
}

.legende-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin: 0;
  padding: 0;
}

.legende-eintrag {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

/* ---------- Verbindungsverlust (Feature 022, FR-050) ---------- */

/*
  Der Hinweis am unteren Rand: Flaeche --signal, Schrift --signal-auf, Symbol und Wort. In der
  dunklen Fassung ist die Flaeche HELLER als der Grund — eine dunkle Warnflaeche auf dunklem
  Grund verschwindet (Vertrag Abschnitt 5: 5,99:1 / 7,99:1 Schrift, 5,37:1 / 8,37:1 gegen den
  Grund). Blazor schaltet ihn mit style="display: block" sichtbar; die Anordnung in einer
  Zeile kommt deshalb ueber den Kasten darin, nicht ueber display: flex hier.
*/
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem var(--abstand) calc(0.75rem + env(safe-area-inset-bottom));
  background-color: var(--signal);
  color: var(--signal-auf);
}

#blazor-error-ui .navsymbol {
  width: 20px;
  height: 20px;
  vertical-align: -0.25em;
  margin-right: 0.5rem;
}

#blazor-error-ui .reload {
  color: var(--signal-auf);
  margin-left: var(--abstand);
  font-weight: 600;
}

/* Fuer die Dauer des Hinweises ERSETZT er die Pille (FR-050): Zwei Balken uebereinander waeren
   auf 375 px ein Drittel des Bildes. Beide Elemente gehoeren dem Rahmenwerk — das eine wird
   ueber style sichtbar, das andere ueber das open-Attribut des <dialog>. :has() gibt es in
   Safari seit 15.4; die App laeuft auf einem aktuellen iPhone (research.md Punkt 15). */
body:has(#blazor-error-ui[style*="block"]) .pillennavigation,
body:has(#components-reconnect-modal[open]) .pillennavigation {
  display: none;
}

/* ---------- Schmale Geräte (FA-41) ---------- */

/* Die Schublade und der Hamburger standen bis Feature 022 hier — sie sind weg (FR-014). Die
   Pille und der Rand des Inhalts stehen in der Sektion „Die drei Stufen" weiter oben. Was
   hier bleibt, sind die Anpassungen einzelner Ansichten an 375 px. */
@media (max-width: 767px) {
  /* Die Erntetabelle wird auf schmalen Geraeten zu einer Kartenliste: Kopfzeile
     ausgeblendet, jede Zelle traegt ihre Beschriftung als Text davor (FR-009). */
  .erntetabelle thead {
    display: none;
  }

  .erntetabelle,
  .erntetabelle tbody,
  .erntetabelle tr,
  .erntetabelle td {
    display: block;
    width: 100%;
  }

  .erntetabelle tr {
    margin-bottom: var(--abstand-klein);
    border-bottom: 1px solid var(--linie);
  }

  .erntetabelle td {
    border-bottom: none;
    padding: 0.25rem var(--abstand-klein);
  }

  .erntetabelle td[data-titel]::before {
    content: attr(data-titel) ": ";
    font-weight: 600;
  }

  /* FR-032: Auf 375 px duennen die MONATSBESCHRIFTUNGEN aus — jeder zweite Monat bleibt
     stehen. Die WERTE duennen NICHT aus: Ein Diagramm ohne Achsenbeschriftung ist eine
     Zeichnung, keine Aussage. */
  .diagramm-monat-zweitrangig {
    display: none;
  }

  /* Die Schriftgroesse der Diagramme stand bis zum 07.09.2026 HIER — und wirkte nie. Sie ist
     ans Dateiende gewandert, hinter die Grundregel; die Begruendung steht dort (FB-11). */

  /* In der Kartendarstellung steht die Beschriftung links vor dem Wert; rechtsbuendig
     risse die Zeile auseinander. Die ausgerichteten Ziffern bleiben (FR-011). */
  .erntetabelle td.spalte-menge {
    text-align: left;
  }
}

/* ---------- Bereiche und Bewaesserung (Feature 004) ---------- */

.bereiche-raster {
  display: grid;
  gap: var(--abstand);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  margin-top: var(--abstand);
}

.bereich-panel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  background-color: var(--karte);
}

/* DIE KOPFZEILE IST DER GRIFF (Feature 027, FR-001; Issue #128). Sie ist ein <summary>, also
   anklickbar und mit der Tastatur erreichbar — und deshalb mindestens 44 px hoch (FA-41), wie
   jedes andere Bedienelement im Garten. */
.bereich-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-klein);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

/* Safari zeichnet den Marker sonst als eigenes Kaestchen davor; das Dreieck kommt unten selbst. */
.bereich-kopf::-webkit-details-marker {
  display: none;
}

/* Das Dreieck: gedreht, wenn aufgeklappt. Ein Zeichen und kein Bild — es folgt der Schrift und
   braucht keine zweite Fassung fuer die dunkle Ansicht. */
.bereich-kopf::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid var(--leise);
  border-bottom: 2px solid var(--leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 120ms ease;
}

.bereich-panel[open] > .bereich-kopf::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Was die zugeklappte Zeile ueber ihren Bereich sagt: wie viele Pflanzen, wie gegossen wird. */
.bereich-kurz {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--leise);
  white-space: nowrap;
}

.bereich-kurz-trenner {
  padding: 0 0.25rem;
}

/* Der Bewaesserungspunkt des Bereichs selbst und jeder Zuordnung - anklickbar, deshalb
   mindestens 44 px Trefferflaeche (FR-019, FA-41), auch wenn der sichtbare Punkt kleiner ist. */
.bewaesserungspunkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.bewaesserungspunkt::after {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
}

.bewaesserungspunkt-automatisch::after {
  background-color: var(--art-giessen-marke);
}

.bewaesserungspunkt-manuell::after {
  background-color: var(--tinte);
}

/* Nur zum Anzeigen, nicht anklickbar - auf der Pflanzenkarte (FR-024). */
.bewaesserungspunkt-anzeige {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.bewaesserungspunkt-anzeige.bewaesserungspunkt-automatisch {
  background-color: var(--art-giessen-marke);
}

.bewaesserungspunkt-anzeige.bewaesserungspunkt-manuell {
  background-color: var(--tinte);
}

/* ---------- Chips (FR-008, FR-011, FR-013) ---------- */

.chip-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-top: var(--abstand-klein);
  /* Umbruch statt waagerechtem Scrollen bei vielen Chips (SC-007). */
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding-left: var(--abstand-klein);
  background-color: var(--senke);
  font-size: 0.875rem;
}

.chip-name {
  color: inherit;
  text-decoration: none;
  padding: 0.5rem 0;
}

/* Name oben, Sorte und Zusatz darunter (Issue #201) — Norberts Vorgabe vom 15.09.2026: "in der
   Kachel dann bitte Name und auf neue Zeile Sorte + Zusatz".

   *** DER CHIP BLEIBT OHNE BEINAMEN GENAU WIE VORHER. *** display:block auf dem Hauptnamen
   aendert an einer einzeiligen Darstellung nichts — ein Block ohne Geschwister sieht aus wie
   der Text davor. Das ist der Grund, warum hier keine Fallunterscheidung noetig ist: Wo kein
   Beiname gesetzt ist, entsteht auch kein zweites Element. Bereichschips tragen deshalb
   unveraendert eine Zeile. */
.chip-hauptname {
  display: block;
}

.chip-beiname {
  display: block;
  color: var(--leise);
  font-size: 0.8125rem;

  /* Kein eigener Zeilenabstand: Die zwei Zeilen gehoeren zusammen und sollen als EIN Name
     gelesen werden, nicht als Name mit Fussnote. */
  line-height: 1.2;
}

/* T-58: Sobald der Name ein VERWEIS ist, ist er ein Bedienelement und braucht die 44 px
   (FA-41). Mit padding: 0.5rem 0 kam er auf rund 33 px — seit Feature 004, und aufgefallen
   erst beim Handdurchlauf von 017, als der neue Duenger-Chip mit 26 px danebenlag.

   Nur der Verweis, nicht der reine Text: Ein <span class="chip-name"> ist nichts, was man
   trifft, und FA-41 gilt fuer Bedienelemente. Auf der Pflanzenkarte, wo die Chips ohne
   Verweis stehen, bleibt der Chip deshalb so hoch wie bisher.

   inline-flex und align-items, nicht mehr Innenabstand: Der Chip richtet seine Kinder
   mittig aus (align-items: center); ein hoeherer Kasten mit mittigem Text ist dasselbe
   Ergebnis wie mehr Polsterung, aber die Zahl steht dann als 44 dort, wo der Test sie
   sucht — und nicht als eine Rechnung aus Schriftgroesse und rem. */
a.chip-name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

a.chip-name:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  a.chip-name:hover {
    text-decoration: underline;
  }
}

.chip-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--leise);
  font-size: 1.125rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.chip-fehler {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8125rem;
}

/* ---------- Die Auswahlliste (FR-009, FR-010) ---------- */

.auswahlliste-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  margin-top: var(--abstand-klein);
}

/* ---------- Duenger (Feature 017) ---------- */

/* Panels UNTEREINANDER, eine Spalte, volle Breite - kein Raster wie bei den Bereichen
   (research.md Punkt 10). Ein Duengerpanel traegt zehn Felder und dazu die Chips; auf 375 px
   ist eine Spalte ohnehin die einzige Moeglichkeit, und am PC ist eine lange Zeile lesbarer
   als zwei enge Spalten mit Fliesstext darin. */
/* Das Raster der Uebersicht (FR-033, Nachtrag vom 05.09.2026) — dieselben Masse wie
   .pflanzen-raster, damit beide Uebersichten sich gleich anfuehlen. Auf 375 px ergibt
   auto-fill mit 16rem von selbst eine Spalte (FA-41). */
.duenger-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--abstand);
  margin-top: var(--abstand);
}

.duenger-karte {
  display: block;
  padding: var(--abstand);
  color: var(--tinte);
  text-decoration: none;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.duenger-karte:focus-visible {
  border-color: var(--akzent);
}

@media (hover: hover) {
  .duenger-karte:hover {
    border-color: var(--akzent);
  }
}

.karte-hersteller {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die NPK-Kurzform. Ziffern mit fester Breite, damit die Zahlen dreier Karten
   untereinander stehen — bei "5,5 / 3 / 6" neben "15 / 8 / 10" faellt es sonst auf. */
.karte-npk {
  margin: 0 0 var(--abstand-klein);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}

.karte-npk-leer {
  font-size: 0.875rem;
  color: var(--leise);
}

.karte-pflanzenzahl {
  margin: 0;
  font-size: 0.875rem;
  color: var(--leise);
}

/* Bleibt: Die Detailseite traegt weiterhin genau ein .duenger-panel. */
.duenger-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand);
  margin-top: var(--abstand);
}

.duenger-panel {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  background-color: var(--karte);
}

.duenger-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--abstand-klein);
}

/* Der Hinweis auf einen doppelten Namen (research.md Punkt 7): eine Kennzeichnung, keine
   Warnung. Deshalb die ruhige Flaeche und nicht die Fehlerfarbe - zwei gleichnamige Duenger
   sind erlaubt. */
.duenger-dublette {
  align-self: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background-color: var(--senke);
  color: var(--leise);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.duenger-pflanzen-titel {
  margin: var(--abstand) 0 0;
  font-size: 1rem;
}

/* Was die Rolle Leser sieht: nur die erfassten Angaben, kein Feld und kein Knopf (FA-46). */
.duenger-angaben {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--abstand-klein);
  margin: var(--abstand-klein) 0 0;
}

.duenger-angaben dt {
  font-weight: 600;
  color: var(--leise);
}

.duenger-angaben dd {
  margin: 0;
}

.npk-gruppe {
  margin: 0 0 var(--abstand);
  padding: 0;
  border: none;
}

.npk-gruppe legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

/* DIE EINZIGE ENGE STELLE DES FEATURES (SC-006, research.md Punkt 10). Die drei Werte
   gehoeren zusammen und stehen deshalb nebeneinander; sie sind je zwei bis drei Ziffern breit.
   Auf 375 px bleiben nach dem Panelrand rund 311 px - drei Spalten zu 1fr mit dem kleinen
   Abstand dazwischen ergeben je rund 95 px, also weit mehr als die 44 px Trefferflaeche, die
   FA-41 verlangt. Kein Umbruch bei drei Feldern: Ein umgebrochenes drittes stuende allein und
   saehe aus wie eine andere Angabe. */
.npk-felder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand-klein);
}

.npk-felder .feld {
  margin-bottom: 0;
}

/* Ein Zahlenfeld braucht nicht die ganze Breite - aber im NPK-Raster fuellt es seine Spalte. */
.feld-zahl input {
  max-width: 8rem;
}

.npk-felder .feld-zahl input {
  max-width: 100%;
}

/* Die Duenger-Chips in der Aufgabenzeile des Kalenders (FR-018, FR-024). Kleiner als die
   Chips der Bereichsansicht und mit der Farbe der Aufgabenart Duengen als Rand - so sind sie
   von der Flaeche zum Abhaken unterscheidbar (die Warnung aus T-31). */
.aufgaben-duenger {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;

  /* *** DARF SCHRUMPFEN (#259). *** Als Rasterelement waere die kleinste Breite sonst die
     min-content — und die ist bei einem `nowrap`-Chip der GANZE Duengername. Er liefe damit
     ueber seine Spur und legte sich ueber Art und Faelligkeit. Genau so sah es aus. */
  min-width: 0;
}

/* 44 px hoch, nicht 26 - BEFUND AUS DER HANDPRUEFUNG am 05.09.2026. Der Chip ist ein
   Verweis, den man im Garten mit dem Daumen trifft, und FA-41 verlangt fuer Bedienelemente
   die Hausgroesse. Gemessen waren 26 px; die vorhandenen Chips der Bereichsansicht liegen
   mit rund 33 px ebenfalls darunter (eigener offener Punkt), aber das ist kein Grund, hier
   noch tiefer anzusetzen. Erreicht wird die Hoehe ueber min-height und inline-flex, damit
   der sichtbare Text mittig sitzt statt die Kapsel aufzublasen. */
.aufgaben-duenger .duenger-verweis {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--art-duengen-marke);
  border-radius: 999px;
  color: var(--tinte);
  background-color: var(--karte);
  font-size: 0.8125rem;
  text-decoration: none;

  /* `nowrap` BLEIBT: Ein Chip, dessen Text auf zwei Zeilen umbricht, ist keine Pille mehr.
     Statt dessen wird gekuerzt — FR-024 aus 003, dieselbe Antwort wie beim Zeitraum. */
  white-space: nowrap;
  max-width: 100%;
}

/* ===== DER DUENGER BEKOMMT IN DER SCHMALEN ANSICHT SEINE EIGENE REIHE (#262) =====

   Norberts Aufteilung vom 19.09.2026:

     Name - Sorte
     Termin - Art - Ueberfaellig
     Duenger

   VORHER STAND DER CHIP VOR ZEITRAUM UND ART und schob die FAELLIGKEIT auf eine dritte Reihe —
   und zwar nur bei den Zeilen, die einen Duenger tragen. Bei den anderen stand sie in der
   zweiten. Wo eine Angabe landet, entschied damit der BESTAND und nicht das Layout: dieselbe
   Unruhe wie in #252, nur eine Bildschirmstufe tiefer.

   `order` UND `flex-basis` — beides, und jedes fuer sich waere zu wenig: `order: 1` schiebt den
   Chip ans Ende der Huelle, `flex-basis: 100%` gibt ihm die ganze Reihe. Ohne das erste stuende
   er weiterhin vorn, ohne das zweite teilte er sich die Reihe mit dem, was gerade passt.

   NUR die Darstellung aendert sich. Im Markup bleibt der Chip, wo er ist — die Reihenfolge fuer
   Tastatur und Vorlesehilfe folgt dem Text, nicht dem Bild.

   *** DIESER BLOCK STEHT HINTER DER GRUNDREGEL DES CHIPS, UND ZWAR MIT ABSICHT. *** Beide
   Waehler wiegen 0-1-0, und eine Medienabfrage hebt die Spezifitaet nicht an (#156, #158).
   Stuende er davor, taete er nichts. */
@media (max-width: 767px) {
  .aufgaben-duenger {
    order: 1;
    flex-basis: 100%;
  }
}

/* Das Kuerzen sitzt am NAMEN und nicht am Chip: `text-overflow` wirkt auf einen Flex-Behaelter
   nicht, und der Chip ist einer (inline-flex, wegen der 44 px Hoehe aus FA-41). Der volle Name
   steht im title des Chips (#259). */
.aufgaben-duenger .duenger-name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.aufgaben-duenger .duenger-verweis:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .aufgaben-duenger .duenger-verweis:hover {
    text-decoration: underline;
  }
}

/* ---------- Anbau- und Ernte-Historie (Feature 005) ---------- */

.historie-liste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

.historie-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.historie-zeitraum {
  font-weight: 600;
}

.historie-kennzeichen {
  color: var(--leise);
}

.historie-notiz {
  flex-basis: 100%;
}

.historie-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-klein);
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

.historie-feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
}

.historie-feld input {
  font: inherit;
}

/* Kaestchen und Beschriftung sind EIN Ziel: Ein Klick auf das Wort schaltet mit, weil das
   Kaestchen in seinem <label> steckt. Getroffen werden muss deshalb die ganze Zeile — das
   Kaestchen allein war 13 x 13 px (T-31). 44 px direkt am Kaestchen, wie es der
   Aufgaben-Haken aus Feature 003 vormacht. */
.historie-feld-kasten {
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-klein);
  min-height: 44px;
  cursor: pointer;
}

.historie-feld-kasten input[type="checkbox"] {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.erntetabelle {
  width: 100%;
  margin-top: var(--abstand-klein);
  border-collapse: collapse;
}

.erntetabelle th,
.erntetabelle td {
  padding: var(--abstand-klein);
  text-align: left;
  border-bottom: 1px solid var(--linie);
}

/* Ausgerichtete Ziffern (FR-011): Ohne tabular-nums sind die Ziffern verschieden breit,
   und eine Mengenspalte franst aus, sobald eine 1 neben einer 8 steht. */
.erntetabelle td,
.erntetabelle .spalte-menge {
  font-variant-numeric: tabular-nums;
}

.erntetabelle th.spalte-menge,
.erntetabelle td.spalte-menge {
  text-align: right;
  white-space: nowrap;
}

.hinweis-leise {
  color: var(--leise);
  font-style: italic;
}

.knopf-sortieren {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.knopf-sortieren:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .knopf-sortieren:hover {
    text-decoration: underline;
  }
}

/* ---------- Auswahlraster: Monatstage und Jahre (Feature 008) ----------
   Dieselbe Grid-Technik wie .monatsansicht-tage weiter oben, hier fuer zwei
   klickbare Raster wiederverwendet: Monatstagauswahl (7 Spalten) und
   Jahresauswahl (3 Spalten, ueber --auswahlraster-spalten gesetzt). Keine
   neue Farbe - die Auswahl nutzt --akzent, dieselbe Rolle wie Schaltflaechen
   (FA-48). */

.auswahlraster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
}

.auswahlraster-titel {
  font-weight: 600;
  font-size: 0.875rem;
}

.auswahlraster-wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.auswahlraster-wochentag {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

.auswahlraster {
  display: grid;
  grid-template-columns: repeat(var(--auswahlraster-spalten, 7), 1fr);
  gap: 2px;
}

.auswahlraster-zelle {
  min-height: 44px;
  padding: 0.125rem 0;
  font: inherit;
  font-size: 0.8125rem;
  text-align: center;
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
}

@media (hover: hover) {
  .auswahlraster-zelle:hover {
    background-color: var(--senke);
  }
}

.auswahlraster-zelle-leer {
  visibility: hidden;
  cursor: default;
}

.auswahlraster-zelle-ausgewaehlt {
  background-color: var(--akzent);
  color: var(--akzent-auf);
  border-color: var(--akzent);
  font-weight: 700;
}

@media (hover: hover) {
  .auswahlraster-zelle-ausgewaehlt:hover {
    background-color: var(--band-b);
  }
}

/* HEUTE im Auswahlraster (#143). Ein RAHMEN, keine Flaeche — die Flaeche gehoert der Auswahl,
   und beides muss im selben Raster auseinanderzuhalten sein. Ist der heutige Tag zugleich der
   ausgewaehlte, sieht man beides: gefuellte Flaeche MIT Rahmen.

   inset, damit die Zelle ihre Groesse behaelt und das Raster nicht springt — dieselbe Loesung
   wie beim laufenden Monat des Jahresbands. --akzent haelt gegen die Karte 8,47:1. */
.auswahlraster-zelle-heute {
  box-shadow: inset 0 0 0 2px var(--akzent);
  font-weight: 700;
}

/* Auf der Auswahl bleibt der Rahmen sichtbar, nur in der Schriftfarbe der Flaeche — sonst
   verschwaende „heute", sobald man es anklickt. */
.auswahlraster-zelle-ausgewaehlt.auswahlraster-zelle-heute {
  box-shadow: inset 0 0 0 2px var(--akzent-auf);
}

/* ---------- Eingabeklappe: erst die Liste, das Formular auf Klick (Feature 010) ----------
   Die acht sammelnden Abschnitte zeigen zuerst ihre Liste, darunter einen Knopf
   "Hinzufuegen"; das Formular klappt erst auf dessen Klick aus (FR-003 bis FR-006).
   Keine neue Farbe: Der Knopf traegt dieselbe Rolle wie .knopf-schlicht (FA-48), das
   ausgeklappte Formular setzt sich nur ueber Linie und Flaeche ab. */

.eingabeklappe {
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

/* Dieselbe Rolle wie .knopf-schlicht, deshalb dieselbe Optik. Die eigene Klasse steht nur
   dafuer, dass der Knopf beim Umgestalten und im Test auffindbar bleibt. 44x44 px auf
   375 px wie die Aufgaben-Haken aus 003 (FA-41). */
.eingabeklappe-knopf {
  background-color: transparent;
  color: var(--akzent);
  border-color: var(--leise);
  min-height: 44px;
  min-width: 44px;
}

/* Der Abstand ist bewusst nur senkrecht: Waagerecht kostete er 18 px, und damit fielen die
   Tageszellen des Auswahlrasters auf 42 px - unter die Trefflaeche aus FA-41. Abgesetzt ist
   das Formular ueber Linie und Flaeche, dafuer braucht es keinen Innenabstand an den Seiten;
   die Einrueckung liefert schon der Abschnitt. Bei der Handpruefung von Feature 010 gemessen. */
.eingabeklappe-formular {
  margin-top: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  background-color: var(--senke);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

/* ---------- Benutzerverwaltung (Feature 006, US1) ----------
   Eine Liste statt einer Tabelle: Auf 375 px muesste eine Tabelle mit fuenf Spalten entweder
   waagerecht scrollen (verbietet FA-41) oder in Karten umbrechen — dann ist die Liste
   gleich der ehrlichere Bau. Jede Zeile bricht auf schmalen Geraeten von selbst um, weil sie
   nichts weiter als ein umbrechender Flex-Kasten ist (FR-028). */

.konten-liste {
  list-style: none;
  margin: var(--abstand) 0 0;
  padding: 0;
}

.konto-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.konto-name {
  font-weight: 600;
  /* Der Name traegt die Zeile: Er bekommt so viel Platz, wie da ist, und draengt die
     uebrigen Angaben in die naechste Zeile statt sich selbst abzuschneiden. */
  flex: 1 1 8rem;
}

/* Herkunft und Zustand sagen dasselbe wie ein Farbpunkt, nur als Wort — bei
   Rot-Gruen-Schwaeche ist das der Unterschied zwischen lesbar und geraten (FA-48). */
.konto-herkunft,
.konto-zustand {
  color: var(--leise);
  font-size: 0.875rem;
  white-space: nowrap;
}

.konto-rolle-feld {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  font-size: 0.875rem;
}

.konto-rolle {
  font: inherit;
  min-height: 44px;
}

.konto-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
}

/* Steht dort, wo bei einem lokalen Konto "Passwort zuruecksetzen" stuende — die Leerstelle
   allein waere nicht erklaerend genug (FR-030, SC-009). */
.konto-kein-passwort {
  color: var(--leise);
  font-size: 0.875rem;
}

/* Das Feld fuer das neue Einmalpasswort klappt in der Zeile auf und nimmt die ganze Breite —
   sonst stuende es neben dem Knopf und waere auf 375 px zwei Zeichen breit. */
.konto-passwort-formular {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-klein);
  margin-top: var(--abstand-klein);
  padding: var(--abstand-klein);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.konto-passwort-eingabe {
  font: inherit;
  min-height: 44px;
}

.konto-neu {
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

.konto-neu select,
.konto-neu input {
  min-height: 44px;
}

/* Der zweite Anmeldeweg (Feature 006, FR-019). Er steht unter dem Formular, abgesetzt durch
   ein Wort statt durch eine Linie — beide Wege sollen erkennbar sein, ohne dass einer den
   anderen verdeckt. Der Knopf traegt bewusst NICHT die Akzentfarbe: Die gehoert dem lokalen
   Login als dem Grundweg (FA-35, FA-48). */

.anmelde-trenner {
  margin: var(--abstand) 0 var(--abstand-klein);
  color: var(--leise);
  font-size: 0.875rem;
  text-align: center;
}

.anmelden-sso {
  width: 100%;
  min-height: 44px;
}

/* --- Zugaenge (Feature 011, FR-009, FR-014, FR-039) -----------------------------------

   Wie die Kontenliste eine Liste und keine Tabelle: Auf 375 px muesste eine Tabelle mit fuenf
   Spalten waagerecht scrollen (verbietet FA-41) oder in Karten umbrechen — dann ist die Liste
   gleich der ehrlichere Bau. Jede Zeile ist ein umbrechender Flex-Kasten. */

.zugang-liste {
  list-style: none;
  margin: var(--abstand) 0 0;
  padding: 0;
}

.zugang-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.zugang-bezeichnung {
  font-weight: 600;
  /* Die Bezeichnung traegt die Zeile: Sie bekommt so viel Platz, wie da ist, und draengt die
     uebrigen Angaben in die naechste Zeile statt sich selbst abzuschneiden. */
  flex: 1 1 8rem;
}

/* Der Zustand steht als WORT da, nicht als Farbpunkt — bei Rot-Gruen-Schwaeche ist das der
   Unterschied zwischen lesbar und geraten (FA-48). */
.zugang-zustand,
.zugang-angelegt,
.zugang-ablauf,
.zugang-benutzt {
  color: var(--leise);
  font-size: 0.875rem;
  white-space: nowrap;
}

.zugang-widerrufen {
  min-height: 44px;
}

/* Die Rueckfrage nimmt die ganze Breite: Sonst stuende sie neben dem Knopf und waere auf
   375 px zwei Zeichen breit — derselbe Bau wie beim Zuruecksetzen eines Passworts. */
.zugang-rueckfrage {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
  margin-top: var(--abstand-klein);
  padding: var(--abstand-klein);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

/* Das Merkmal wird GENAU EINMAL angezeigt (FR-010). Es steht deshalb umbrechend und in voller
   Laenge da — abgeschnitten waere es wertlos, und ein zweiter Blick darauf ist nicht
   vorgesehen. */
.zugang-geheimnis-wert {
  display: block;
  margin: var(--abstand-klein) 0;
  padding: var(--abstand-klein);
  background-color: var(--senke);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  overflow-wrap: anywhere;
}

.zugang-neu {
  margin-top: var(--abstand);
  padding-top: var(--abstand);
  border-top: 1px solid var(--linie);
}

.zugang-neu input {
  min-height: 44px;
}

/* ---------- Uebersicht: die Tageszahl (Feature 022, FR-020, FR-024) ---------- */

/* DIE GROSSE ZAHL STEHT IM BAND (Entwurf „Saison kompakt"): Die Uebersicht schiebt sie ueber
   einen SectionOutlet in die Kopfflaeche, damit es EINE gruene Flaeche gibt und nicht zwei, die
   aneinanderstossen. Zahl und Worte stehen NEBENEINANDER, an der Grundlinie ausgerichtet — so
   kostet der Kopf weniger Hoehe, und die dritte Aufgabenzeile bleibt im Bild (FR-023, SC-001).

   Der Platz unter ihr gehoert dem Jahresband (023); bis dahin steht die Zahl allein (FR-024). */
.tageszahl {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding-bottom: var(--abstand-klein);
}

.tageszahl-wert {
  font-size: var(--zahl-gross);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--band-schrift);
}

/* Ueber null in --band-signal: --signal waere auf dem Band dunkelrot auf dunkelgruen. 6,12:1 am
   Bandanfang, 3,60:1 am Bandende — die Schranke fuer GROSSE Schrift ist 3:1, und 3 rem ist
   grosse Schrift (FR-006). Das Wort daneben ist die zweite Auszeichnung (FR-020). */
.tageszahl-signal {
  color: var(--band-signal);
}

.tageszahl-wort {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 22ch;
  padding-bottom: 0.25rem;
  color: var(--band-schrift);
}

/* Bei null: der Satz, dass nichts zu tun ist, und der naechste Termin — in --band-leise auf dem
   Band (5,12:1), denn es gibt nichts hervorzuheben. */
.tageszahl-satz {
  margin: 0;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.35;
  max-width: 24ch;
  color: var(--band-leise);
}

.tageszahl-naechster {
  display: block;
}

/* ---------- DAS JAHRESBAND (Feature 023) ---------- */

/* Zwoelf Monate des laufenden Jahres unter der grossen Zahl, in derselben Kopfflaeche. Der Platz
   war seit 022 freigehalten (FR-024 dort, siehe die Bemerkung an .tageszahl darueber).

   ZWOELF SPALTEN, FEST. Kein auto-fit, kein waagerechtes Scrollen: Alle zwoelf Monate stehen
   gleichzeitig im Bild, und genau das ist der Zweck des Bandes (FR-008, geklaert am 12.09.2026).
   Gerechnet auf 375 px Geraetebreite: Der Inhaltsbereich ist dort 343 px (.kopf hat
   padding: 0.5rem 1rem), abzueglich elf Zwischenraeume von 2 px bleiben 26,75 px je Feld.

   DIE TIPPFLAECHE WIRD UEBER DIE HOEHE AUSGEGLICHEN, nicht ueber die Breite: 26,75 x 44 px. Ein
   Daumen trifft ein hohes schmales Feld sicherer als ein quadratisches derselben Flaeche, weil er
   in der Waagerechten genauer zielt als in der Senkrechten. Die 44 px sind nicht gepolstert,
   sondern belegt: 11 px Buchstabe plus fuenf Punkte a 5 px mit 2 px Abstand = 33 px. */
.jahresband {
  position: relative;
  margin-top: var(--abstand-klein);
}

/* z-index 1: Die Monatsfelder liegen UEBER der Nadel. Sie haben keinen eigenen Grund, also
   scheint die Nadel ueberall durch — nur Schrift, Punkte und der Rahmen des laufenden Monats
   werden darueber gemalt.

   *** DAS IST NOETIG, SEIT DIE KURZFORM DASTEHT *** (12.09.2026): Auf 375 px ist ein Feld
   26,75 px breit und „Sep" 15 px; die Nadel lief bei 69,59 % genau durch das S und machte es
   unleserlich. Auf einem breiten Bildschirm war es kaum zu sehen — am Telefon sofort. */
.jahresband ul {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Das Monatsfeld ist ein VERWEIS in den Kalender dieses Monats (FR-008) — auch ein leerer Monat
   fuehrt dorthin: Ein leerer Monat ist eine gueltige Auskunft, kein toter Klick. */
.bandmonat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 3px 0 5px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}

/* Der laufende Monat: ein RAHMEN in Mint, dazu der Buchstabe in Mint und fett — und das Wort
   „laufender Monat" im vorlesbaren Namen. Farbe traegt nie allein Bedeutung (FA-48).

   *** KEINE GEFUELLTE FLAECHE, UND DAS IST DER BEFUND DES HANDDURCHLAUFS VOM 12.09.2026. ***
   Zuerst stand hier background-color: var(--band-mint). Der Kontrast des aktiven
   Navigationspunkts stimmt damit (8,89:1 hell, 9,67:1 dunkel) — aber IM JAHRESBAND liegen auf
   dem Feld die PUNKTE, und die sind gegen das Band gerechnet, nicht gegen Mint. Am laufenden
   Stand nachgemessen: Ernten 1,16:1, Duengen 1,33:1, Aussaeen 1,31:1, Giessen 1,50:1,
   Schneiden 1,57:1 — FR-007 verlangt 3:1. Der WICHTIGSTE Monat zeigte seine Punkte nicht.

   KEIN TEST HAETTE DAS GEFUNDEN: KontrastTests misst Tokenpaare, und --band-art-* gegen
   --band-a stimmt. Dass der laufende Monat einen anderen Grund unterschiebt, steht in keinem
   Paar. Deshalb steht darunter jetzt ein Waechter, der die Flaeche selbst verbietet.

   Der Rahmen ist ein grafisches Objekt und haelt seine 3:1 gegen das Band ueber --band-mint
   (8,89:1 / 5,22:1). Die Punkte behalten ihren gerechneten Grund. */
.bandmonat-laufend {
  box-shadow: inset 0 0 0 1.5px var(--band-mint);
}

.bandmonat-laufend .bandmonat-kurz {
  color: var(--band-mint);
  font-weight: 700;
}

/* DIE KURZFORM des Monats — „Jan", „Feb", „Mae"… (Norberts Vorgabe vom 12.09.2026). Vorher
   stand hier ein einzelner Buchstabe; dreimal J und zweimal M sind eine Reihe, die man zaehlen
   muss, statt sie zu lesen.

   0,5625 rem = 9 px: „Mae" ist damit rund 19 px breit und passt in die 26,75 px, die ein Feld
   auf 375 px hat. Ab 768 px wird sie eine Stufe groesser (siehe unten) — dort ist Platz.
   letter-spacing knapp negativ, weil die drei Zeichen sonst am Rand kleben. */
.bandmonat-kurz {
  font-size: 0.5625rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--band-leise);
}

.bandmonat-punkte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Ein Punkt je Aufgabenart und Monat, hoechstens fuenf (FA-42, FR-004). Die Farbe ist die MARKE
   der Art — die Fassung fuer grafische Objekte auf dunklem Grund, gerechnet in
   022/contracts/farben.md Abschnitt 6: 6,16:1 bis 8,33:1 gegen das Band, alle ueber der
   3:1-Schranke aus FR-007. Die Flaeche waere hier falsch: ein heller Pastellton, der nicht
   erschiene, sondern leuchtete. */
.bandpunkt {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.bandpunkt-schneiden { background-color: var(--band-art-schneiden); }
.bandpunkt-duengen   { background-color: var(--band-art-duengen); }
.bandpunkt-giessen   { background-color: var(--band-art-giessen); }
.bandpunkt-ernten    { background-color: var(--band-art-ernten); }
.bandpunkt-aussaeen  { background-color: var(--band-art-aussaeen); }

/* UEBERFAELLIG: ein Ring am einzelnen Punkt, nicht am Monatsfeld (FR-005, geklaert am
   12.09.2026). Im September soll zu sehen sein, dass Duengen liegen geblieben ist und Giessen
   nicht — ein Ring um den ganzen Monat sagte, dass etwas liegt, nicht was zu tun waere.
   --band-signal erreicht 6,12:1 am Bandanfang und 3,60:1 am helleren Bandende. */
.bandpunkt-ueberfaellig {
  box-shadow: 0 0 0 1.5px var(--band-signal);
}

/* DIE NADEL auf heute (FR-006). Die Stelle kommt als Prozentangabe im style-Attribut aus dem
   Baustein — gerechnet aus dem „heute" des Dienstes, nicht aus einer Uhr im Browser. Eine
   Prozentzahl ist kein Farbwert; TokenTests bleibt gruen. */
.bandnadel {
  position: absolute;
  /* SIE RAGT OBEN UND UNTEN HERAUS, und das ist der zweite Befund des Handdurchlaufs vom
     12.09.2026: Buendig mit dem Feld verschmolz sie mit dem Rahmen des laufenden Monats — beide
     sind senkrechte Linien von eineinhalb bis zwei Pixeln, und im Bild war nicht zu
     unterscheiden, was der Monat ist und was der Tag. Vier Pixel Ueberstand genuegen; der
     Abstand nach oben (margin-top am Band) traegt sie. */
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background-color: var(--band-schrift);
  pointer-events: none;
}

/* Der Fokusrahmen auf dem Band (FR-009b). --fokus ist fuer die Grundflaeche gerechnet; auf dem
   dunklen Band traegt die Bandschrift, die dort 7,95:1 haelt. */
.bandmonat:focus-visible {
  outline: 2px solid var(--band-schrift);
  outline-offset: 2px;
}

/* Ab Tablettbreite darf das Feld breiter werden; die Hoehe bleibt. Es gibt KEINE zweite Gestalt
   und keinen Umbruch — die Kopfflaeche bricht nie um (022, FR-018). */
@media (min-width: 768px) {
  .jahresband ul {
    gap: 4px;
  }

  /* Ab Tablettbreite ist Platz fuer die Kurzform in gewoehnlicher Groesse. */
  .bandmonat-kurz {
    font-size: 0.6875rem;
    letter-spacing: normal;
  }

  .bandpunkt {
    width: 6px;
    height: 6px;
  }
}

/* Hover nur, wo es Hover gibt (Regel aus #121): Am Telefon bliebe der Zustand nach dem Tippen
   haengen. Aufgehellt wird die SCHRIFT, nicht die Flaeche — dieselbe Loesung wie am Punkt der
   Kopfnavigation (.nav-punkt:hover). Eine getoente Flaeche brauchte einen Farbwert, den es als
   Token nicht gibt, und ein Hex im Baustein-CSS ist nach FA-48 ein Fehler (TokenTests). */
@media (hover: hover) {
  .bandmonat:hover .bandmonat-kurz {
    color: var(--band-schrift);
  }
}

/* ---------- Uebersicht: die drei Kennzahlen (Feature 013 US1, seit 022 drei) ---------- */

/* DREI Spalten, fest, OHNE Rand und ohne eigene Flaeche (Feature 022, FR-021; Beobachtung 3 der
   Spec: Weissraum statt Rand). Drei Zahlen passen auf 375 px nebeneinander — 117 px je Spalte,
   die Beschriftung „Naechste 30 Tage" bricht dort in zwei Zeilen und das ist in Ordnung. Ein
   Raster mit auto-fit stellte die dritte allein in eine zweite Zeile. */
.kennzahlen {
  display: grid;
  gap: var(--abstand-klein);
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--abstand);
}

/* Die Kachel: Flaeche mit 14 px Radius und Schatten (Entwurf). Die Rangordnung entsteht ueber
   die GROESSE der Zahl gegen die Tageszahl im Band, nicht ueber das Weglassen der Flaeche —
   Beobachtung 2 kritisierte „gleich gross und gleich gerahmt", nicht die Kachel selbst. */
.kennzahl {
  padding: 0.6875rem 0.75rem 0.75rem;
  background-color: var(--karte);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
}

.kennzahl-wert {
  display: block;
  font-size: 1.8125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.kennzahl-name {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--leise);
}

/* ---------- Uebersicht: „Naechste Aufgaben" (Feature 013 US2) ---------- */

/* Die Herkunft — Bereiche der Pflanze oder der Hinweis auf den ganzen Garten (FR-013 bis
   FR-015). order schickt sie ans Ende der Zeile; umbrechen darf sie, muss aber nicht.

   *** SIE ERZWINGT KEINE EIGENE ZEILE MEHR *** (Issue #120, Norberts Befund am iPhone vom
   11.09.2026). Hier stand `flex: 1 0 100%` — ein erzwungener Umbruch, gemessen 21 px je Zeile.
   Bei drei Zeilen sind das 63 px, und genau die fehlten, damit die dritte Aufgabenzeile ohne
   Wischen im Bild steht (FR-023). Jetzt reiht sie sich hinter das Datum und bricht nur, wenn
   der Platz wirklich nicht reicht — das erledigt flex-wrap der Zeile von selbst. */
.aufgaben-herkunft {
  order: 1;
  flex: 0 1 auto;
  font-size: 0.875rem;
  color: var(--leise);
}

/* Der Trenner steht im Stylesheet und nicht im Markup: So kann er gar nicht leer stehen
   bleiben, wenn eine Pflanze keinem Bereich angehoert (FR-014). */
.aufgaben-bereich + .aufgaben-bereich::before {
  content: " · ";
}

/* ---------- Uebersicht: die Bereichs-Kacheln (Feature 013 US3) ---------- */

/* Wie bei den Kennzahlen: umbrechen, nicht schrumpfen (FR-036, Abnahmeszenario US3-7). Zwoelf
   Bereiche auf 375 px brechen um; waagerecht gescrollt wird nirgends. */
.bereichskacheln {
  display: grid;
  gap: var(--abstand-klein);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: var(--abstand-klein);
}

/* Die Kachel ist ein Verweis und traegt deshalb die Mindest-Trefflaeche aus FA-41 — mit dem
   Finger im Garten, nicht mit der Maus. Seit 022 auf der Karte OHNE 1-px-Rand (Beobachtung 3:
   Weissraum statt Rand); die Karte hebt sich vom Grund ab, das genuegt. */
.bereichskachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-height: 44px;
  padding: var(--abstand-klein) 0.75rem;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: var(--tinte);
  background-color: var(--karte);
}

@media (hover: hover) {
  .bereichskachel:hover {
    background-color: var(--akzent-flaeche);
  }
}

.bereichskachel-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.bereichskachel-zahl {
  font-size: 0.875rem;
  color: var(--leise);
}


/* ---------- Ernte-Auswertung: zwei Diagramme als SVG (Feature 018, Anstrich 022) ---------- */

/*
  KEINE BIBLIOTHEK (FR-029, Prinzip V). Die Diagramme sind SVG im Markup; hier steht nur
  ihre Erscheinung. Was sie zeigen, entscheidet die Domaene (HarvestAnalysis) — die
  Achsenmarken kommen fertig herein und werden nicht hier ausgerechnet.

  SEIT 022 EIN TON IN DREI STUFEN (FR-041, Vertrag Abschnitt 4): Das juengste Jahr im Bild
  traegt --jahr-aktuell (kraeftig), das davor --jahr-vor, das dritte --jahr-vor2 (blass). Die
  Stufe ist eine FARBE aus dem Tokenblock, keine Deckkraft — opacity liesse den Grund
  durchscheinen und waere in der dunklen Fassung eine andere Farbe. Eine vierte Stufe gibt es
  nicht; mehr Jahre laufen ueber die Jahresauswahl. Die Farbe bleibt der ZWEITE Kanal (FR-031):
  Die Jahre gehen am Strichmuster und an der Jahreszahl auseinander, auch in Graustufen.
*/

.diagramm {
  margin: var(--abstand) 0 0;
}

.diagramm figcaption {
  font-weight: 600;
  margin-bottom: var(--abstand-klein);
}

.diagramm-flaeche {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Achse und Hilfslinien sind Geruest, nicht Aussage — schmueckende Linie (--linie). */
.diagramm-achse {
  stroke: var(--linie);
  stroke-width: 1;
}

.diagramm-hilfslinie {
  stroke: var(--linie);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.diagramm-monatsstrich {
  stroke: var(--leise);
  stroke-width: 1;
}

.diagramm-wert,
.diagramm-monat,
.jahr-beschriftung,
.jahr-wert,
.jahr-luecke,
.verlauf-jahreszahl {
  fill: var(--tinte);
  font-family: var(--schrift);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.diagramm-wert,
.diagramm-monat,
.jahr-beschriftung {
  fill: var(--leise);
}

.verlauf-jahreszahl,
.jahr-beschriftung {
  font-weight: 600;
}

/* Die Luecke (FR-043): kein Balken, das Wort „keine Ernte“ in --leise und kursiv — es ist eine
   Auskunft ueber Fehlendes, keine Menge. */
.jahr-luecke {
  fill: var(--leise);
  font-style: italic;
}

.diagramm-textfassung {
  margin: var(--abstand-klein) 0 0;
  color: var(--tinte);
}

/* Die drei Stufen — fuer Balken (fill) und Linien (stroke) zugleich. Das Alter zaehlt zum
   juengsten Jahr IM BILD (jahr-alter-0), nicht zum Kalender. */
.jahr-alter-0 {
  --jahr: var(--jahr-aktuell);
}

.jahr-alter-1 {
  --jahr: var(--jahr-vor);
}

.jahr-alter-2 {
  --jahr: var(--jahr-vor2);
}

/* Der Verlauf: Balken fuer die Einzelernten, eine Linie fuer die Summe. Die Farbe kommt aus der
   Stufe des Jahres (g.verlauf-jahr traegt jahr-alter-*). */
.verlauf-einzelernte {
  fill: var(--jahr);
  opacity: 0.35;
}

.verlauf-summe {
  fill: none;
  stroke: var(--jahr);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.verlauf-punkt {
  fill: var(--jahr);
}

/* Das laufende Jahr ist OFFEN (FR-042): gestrichelt von der letzten Ernte bis heute, mit einem
   Punkt in der Signalfarbe auf dem heutigen Tag — „so weit ist die Saison“. */
.verlauf-offen {
  stroke: var(--jahr);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
}

.verlauf-heute {
  fill: var(--signal);
}

/* Der Jahresvergleich: liegende Balken, der Zahlenwert daneben. */
.jahr-balken {
  fill: var(--jahr);
}

/* Das laufende Jahr gestrichelt umrandet statt schraffiert (FR-042) — die Flaeche bleibt in
   der Stufe, der Rand sagt „noch nicht zu Ende“. Beschriftet ist es ausserdem („laeuft noch“). */
.jahr-offen {
  fill: var(--jahr);
  fill-opacity: 0.55;
  stroke: var(--jahr-aktuell);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

/* Ein Jahr mit Ernten, aber ohne eine einzige Menge: die Grundlinie steht, der Zusatz
   „+ n ohne Menge“ erklaert sie. */
.jahr-grundlinie {
  fill: var(--leise);
}

/* Die Jahresauswahl (FR-041): Chips wie die Fensterwahl der Arbeitsliste — Verweise, 44 px. */
.erntejahrwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin: var(--abstand-klein) 0 0;
}

.erntejahr-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- Die gartenweite Ernte: der Vergleich der Pflanzen (Feature 022, FR-040) ---------- */

.erntevergleich {
  width: 100%;
  margin-top: var(--abstand-klein);
  border-collapse: collapse;
}

.erntevergleich th,
.erntevergleich td {
  padding: var(--abstand-klein);
  text-align: left;
  border-bottom: 1px solid var(--linie);
}

.erntevergleich th {
  font-size: 0.875rem;
  color: var(--leise);
}

.erntevergleich .spalte-menge {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.erntevergleich .sorte {
  margin-left: 0.375rem;
  font-size: 0.875rem;
  color: var(--leise);
}

/* Der Name ist der Verweis ins Detail — 44 px hoch, wie jede Trefflaeche (FA-41). */
.erntevergleich-pflanze {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Unter 768 px wird die Tabelle zur Kartenliste — dasselbe Muster wie .erntetabelle (Feature
   005): Jede Zeile ein Block, jede Zelle mit ihrem Spaltentitel davor. */
@media (max-width: 767px) {
  .erntevergleich thead {
    display: none;
  }

  .erntevergleich,
  .erntevergleich tbody,
  .erntevergleich tr,
  .erntevergleich td {
    display: block;
    width: 100%;
  }

  .erntevergleich tr {
    margin-bottom: var(--abstand-klein);
    padding-bottom: var(--abstand-klein);
    border-bottom: 1px solid var(--linie);
  }

  .erntevergleich td {
    border-bottom: none;
    padding: 0.25rem var(--abstand-klein);
  }

  .erntevergleich td.spalte-menge {
    text-align: left;
  }

  .erntevergleich td.spalte-menge::before {
    content: attr(data-titel) ": ";
    color: var(--leise);
  }
}


/* ===== Die Arbeitsliste (Feature 020, seit 022 mit offenen Hinweisen) =====

   AUF 375 PX ZUERST ENTWORFEN (FR-029, FA-41): Diese Ansicht wird im Beet benutzt, im Stehen,
   mit einer Hand. Alles steht deshalb untereinander; erst ab 768 px legt sich die Liste als
   Spalte von hoechstens 65 ch neben die Werkzeuge (US6 Szenario 2 aus 022). */

.arbeitsliste-werkzeuge {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
}

/* AB 768 PX — nicht 820: Es gibt nur die drei Schwellen aus T017 (767, 768, 1180); 820 ist die
   Pruefbreite aus dem Quickstart, nicht der Umbruch. Die Liste bleibt eine Lesespalte von
   hoechstens 65 ch (ein Pflegehinweis ist Fliesstext), die Fensterwahl und der Schalter stehen
   rechts daneben und bleiben beim Bildlauf stehen. */
@media (min-width: 768px) {
  .arbeitsliste-seite {
    display: grid;
    grid-template-columns: minmax(0, 65ch) 12rem;
    gap: var(--abstand);
    align-items: start;
  }

  .arbeitsliste-seitenspalte {
    order: 2;
    position: sticky;
    top: var(--abstand);
  }

  .arbeitsliste-seitenspalte .fensterwahl {
    flex-direction: column;
  }
}

/* Die drei Zeitbereiche als Verweise. Sie fuellen auf dem Telefon die Breite - drei Knoepfe
   nebeneinander sind auf 375 px je gut 110 px breit und damit bequem zu treffen. */
.fensterwahl {
  display: flex;
  gap: var(--abstand-klein);
}

.fensterwahl .knopf {
  flex: 1 1 0;
  min-height: 44px;
  text-align: center;
}

.arbeitsliste-hinweise-schalter {
  min-height: 44px;
  align-self: flex-start;
}

.arbeitsliste-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  justify-content: space-between;
  color: var(--leise);
  margin: 0 0 var(--abstand);
}

.arbeitsliste-zaehler {
  font-weight: 600;
}

.arbeitsliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Eine Zeile ist die Aufgabe UND ihr Pflegehinweis - deshalb untereinander, nicht nebeneinander.
   Der Trennstrich steht hier und nicht mehr an der Aufgabenzeile darin: Sonst liefe er zwischen
   Aufgabe und ihrem eigenen Hinweis. */
.arbeits-zeile {
  border-bottom: 1px solid var(--linie);
  padding-bottom: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
}

.arbeits-zeile-aufgabe {
  list-style: none;
  margin: 0;
  padding: 0;
}

.arbeits-zeile-aufgabe .aufgaben-zeile {
  border-bottom: none;
  padding-bottom: 0;
}

/* Der Pflegehinweis. Eingerueckt, damit sichtbar ist, dass er ZU der Zeile darueber gehoert.

   *** DIE DRITTE TREFFFLAECHE IN DERSELBEN ZEILE *** (T062, die Warnung aus T-31): Haken,
   Verweis auf die Pflanze, Aufklapper. Der Aufklapper steht deshalb in einer eigenen Reihe
   unter der Aufgabe und nicht neben dem Haken - untereinander koennen sich zwei 44-px-Flaechen
   nicht beruehren. */
.pflegehinweis {
  margin: var(--abstand-klein) 0 0 44px;
}

/* DIE UMKEHR GEGENUEBER 020 (Feature 022, FR-025, FR-026): Der Titel ist die Nebensache, der Text
   die Hauptsache. Der Titel steht deshalb klein und in --leise; der Text darunter in 1 rem und
   in der Tinte — Fliesstext, kein Kleingedrucktes. Die 44 px bleiben: Der Titel ist die
   Trefflaeche zum Zuklappen (FA-41). */
.pflegehinweis-titel {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--leise);
  cursor: pointer;
}

/* *** DER AUFKLAPP-PFEIL MUSS VON HAND KOMMEN. *** display:flex auf einem <summary>
   unterdrueckt den Marker, den der Browser sonst zeichnet - an der laufenden App am 05.09.2026
   gesehen: Die Zeile "Pflegehinweis" stand ohne jedes Zeichen da, dass sich dort etwas oeffnet.
   Auf einer Liste, die im Beet bedient wird, ist das keine Kleinigkeit; wer nicht sieht, dass
   es aufgeht, klappt es nicht auf.

   Das flex bleibt, weil es die 44-px-Trefflaeche traegt (FA-41). Der Pfeil kommt deshalb als
   Pseudo-Element und dreht sich beim Oeffnen. */
.pflegehinweis-titel::marker,
.pflegehinweis-titel::-webkit-details-marker {
  display: none;
  content: "";
}

.pflegehinweis-titel::before {
  content: "▸";
  display: inline-block;
  flex: 0 0 auto;
  color: var(--akzent);
  transition: transform 0.15s ease;
}

.pflegehinweis[open] > .pflegehinweis-titel::before {
  transform: rotate(90deg);
}

/* *** pre-wrap IST TEIL DER ZUSAGE, NICHT GESCHMACK *** (FR-012, FR-013). Der Text steht als
   Freitext mit Zeilenumbruechen in der Datenbank, und seine Absaetze sind Teil der Aussage: Der
   vierte Absatz des Schnitt-Hinweises der Heidelbeere enthaelt den Zeitpunkt. Ohne pre-wrap
   liefen alle vier zu einem Block zusammen.

   Und er wird NICHT gekuerzt - kein line-clamp, keine Hoehenbegrenzung. */
.pflegehinweis-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--abstand-klein) 0;
  max-width: 65ch;
  font-size: 1rem;
  color: var(--tinte);
}

.pflegehinweis-fehlt {
  margin: var(--abstand-klein) 0 0 44px;
  color: var(--leise);
  font-size: 0.9rem;
}

/* Die Aufwandmenge des Duengers (Feature 022, FR-028): unter dem Hinweis, eingerueckt wie er,
   mit dem Dünger-Ocker als Marke am linken Rand — dieselbe Marke wie der Chip in der Zeile
   darueber, damit klar ist, wozu die Menge gehoert. Die Menge in der Tinte, die Quelle leise. */
.arbeits-aufwandmenge {
  margin: var(--abstand-klein) 0 0 44px;
  padding: 0.125rem 0 0.125rem var(--abstand-klein);
  border-left: 3px solid var(--art-duengen-marke);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-klein);
}

.arbeits-aufwandmenge-text {
  font-weight: 600;
}

.arbeits-aufwandmenge-quelle {
  font-size: 0.875rem;
  color: var(--leise);
}

/* Der Verweis zum Nachtragen ist eine eigene Trefflaeche - deshalb als Block mit voller Hoehe
   und nicht als Wort mitten im Satz. */
.pflegehinweis-nachtragen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Ueberfaelliges steht ueber allem anderen und wird auch so gezeigt (FA-26, FR-003 aus 020;
   FR-029 aus 022) — in der Signalfarbe, und als Wort. */
.arbeitsliste-ueberfaellig > h2 {
  color: var(--signal);
}

.arbeitsliste-monat {
  font-size: 1.05rem;
  color: var(--leise);
  border-bottom: 2px solid var(--linie);
  padding-bottom: var(--abstand-klein);
}

.arbeitsliste-gruppe {
  margin-top: var(--abstand);
}

/* 768 statt 700 seit Feature 022 (T131): Es gibt genau drei Schwellen — 767, 768, 1180 —, und
   NavigationsstufenTests prueft jede Breitenabfrage dagegen. 820 ist die Pruefbreite (iPad),
   nicht der Umbruch. */
@media (min-width: 768px) {
  /* *** HIER STAND EINE ZWEITE RICHTUNG FUER .arbeitsliste-werkzeuge *** — flex-direction: row
     mit space-between, aus Feature 020. Damals standen die Werkzeuge UEBER der Liste, in voller
     Breite: Fensterwahl links, Schalter rechts. Das war richtig.

     FEATURE 022 HAT DIE SEITENSPALTE EINGEFUEHRT (12 rem, oben in dieser Datei bei 768 px) UND
     DIESE REGEL STEHEN LASSEN. Beide gelten ab derselben Breite, die spaetere gewinnt — und so
     quetschten sich Fensterwahl und Schalter NEBENEINANDER in 192 px: Die Wahl schrumpfte auf
     69 px, „14 Tage" brach in zwei Zeilen, und die drei Knoepfe standen als schmale Saeule neben
     dem Schalter. Norberts Befund vom 12.09.2026 (#138), am laufenden Stand nachgemessen.

     Zwei @media-Bloecke mit derselben Breite, die dasselbe Element verschieden ausrichten: Das
     faellt in keinem Test auf und in keiner Datei, in der man nur an einer Stelle liest.
     .arbeitsliste-werkzeuge legt seine Richtung deshalb nur noch EINMAL fest — oben, als
     column. Der Waechter dazu steht in ArbeitslisteLayoutTests. */

  /* Die Fensterwahl steht ab hier senkrecht in der Seitenspalte (siehe oben). In einer
     Column-Flexbox wirkt flex auf die HOEHE — ohne diese Zeile teilten sich die drei Knoepfe
     die Hoehe der Spalte, statt ihre eigene zu behalten. */
  .fensterwahl .knopf {
    flex: 0 0 auto;
  }
}

/* FR-056: Wer Bewegung reduziert haben will, bekommt keine. Die App hat genau zwei
   Uebergaenge — die Punkte der Wiederverbindung und den Pfeil des Pflegehinweises — und mehr
   soll nicht dazukommen: Der Dreiklang lebt von Ruhe (research.md Punkt 18 zu 022). Steht
   am Dateiende, VOR dem Diagrammblock: Der muss die letzte Regel bleiben (FB-11, unten). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------------------------
   Die Beschriftung der Diagramme auf schmalen Schirmen (FR-032 aus 018)
   --------------------------------------------------------------------------------------------

   Auf 375 px skaliert das SVG von 720 viewBox-Einheiten auf rund 320 Bildpunkte, also auf knapp
   die Haelfte. Damit die Beschriftung LESBAR bleibt, waechst sie in viewBox-Einheiten mit:
   26 Einheiten kommen bei dieser Skalierung als rund 12 Bildpunkte an.

   26 UND NICHT MEHR: Die Raender der beiden Bausteine sind fuer genau diese Groesse bemessen
   (Ernteverlauf.razor: Links = 92, Erntejahre.razor: Rechts = 428). Der laengste Wert auf der
   Achse braucht bei 26 Einheiten rund 86 davon und passt damit knapp in den linken Rand; bei
   32 stuende er darueber hinaus. Wer die Schrift weiter vergroessern will, vergroessert zuerst
   die Raender.

   DIESER BLOCK STAND BIS ZUM 07.09.2026 WEITER OBEN — vor der Grundregel .diagramm-wert, die
   13px setzt. Beide haben dieselbe Spezifitaet, also gewann die spaetere: Die 26px wurden nie
   wirksam, und die Schrift kam mit rund 6 Bildpunkten auf dem Schirm an (FB-11, gemessen am
   07.09.2026 im Garten). Der Block gehoert deshalb ans Dateiende — dorthin, wo keine
   Grundregel mehr folgt.

   Kein zusaetzlicher Selektor, um die Spezifitaet zu heben: Das loeste dieselbe Sache auf eine
   Art, die beim naechsten Mal wieder jemand uebersieht. Die Reihenfolge ist die ehrlichere
   Antwort. */
@media (max-width: 767px) {
  .diagramm-wert,
  .diagramm-monat,
  .jahr-beschriftung,
  .jahr-wert,
  .verlauf-jahreszahl {
    font-size: 26px;
  }
}

/* ---------- Der Betriebsstand (Feature 028) ---------- */

/* NUR TOKEN, kein Farbwert — TokenTests wacht darueber (FA-48, SC-002 aus Feature 022).

   DIE BREITESTE DARSTELLUNG DER GANZEN APP steht hier: die Tabellenliste. Sie rollt deshalb in
   IHREM EIGENEN Kasten (.status-tabelle-rollt) und nicht mit der Seite — ab 375 px darf es kein
   seitliches Wischen geben (FR-032, SC-006). Genau das ist die Stelle, an der eine Statusseite
   sonst zur PC-Seite wird. */

.status-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  margin-bottom: var(--abstand);
}

.status-erhoben {
  color: var(--leise);
  font-size: 14px;
}

.status-block {
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--abstand);
  margin-bottom: var(--abstand);
}

.status-block h2 {
  margin-top: 0;
  font-size: 18px;
}

.status-block h3 {
  font-size: 16px;
  margin-bottom: 0.25rem;
}

/* Zwei Spalten am PC, untereinander am Telefon. Die Beschriftung darf nicht so schmal werden,
   dass "Laufzeitumgebung" in vier Zeilen bricht — deshalb minmax statt einer festen Breite. */
.status-liste {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: 0.4rem var(--abstand);
  margin: 0;
}

.status-liste dt {
  color: var(--leise);
  font-weight: 600;
}

.status-liste dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  /* Untereinander: Nebeneinander bliebe fuer den Wert weniger als die Haelfte von 375 px,
     und ein Pfad wie /data/gartenplaner.db braucht mehr.

     767 und nicht 480: Es gibt in dieser App genau DREI Schwellen — 767, 768 und 1180
     (Feature 022, FR-018). Eine vierte haette hier gepasst und waere trotzdem falsch; der
     Waechter BruchstellenTests hat sie beim ersten Lauf gemeldet. */
  .status-liste {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .status-liste dd {
    margin-bottom: 0.6rem;
  }
}

.status-nebentext {
  display: block;
  color: var(--leise);
  font-size: 14px;
}

.status-schaetzung {
  margin: 0.25rem 0 0.75rem;
  max-width: 65ch;
}

/* Die Warnung bei knappem Platz (FR-006) — Signalfarbe UND ein Wort daneben. Die Farbe ist die
   dritte Auskunft, nie die erste (FA-48). */
.status-signal {
  display: block;
  color: var(--signal);
}

.status-warnung {
  color: var(--signal);
}

.status-adressen,
.status-dateien,
.status-meldungen {
  list-style: none;
  margin: 0;
  padding: 0;
}

.status-adressen li,
.status-dateien li {
  padding: 0.2rem 0;
}

.status-dateien li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  max-width: 28rem;
}

/* Der Rollbereich ist der RUECKFALL, nicht der Plan. FR-032 verlangt die Tabellenliste ohne
   seitliches Wischen — gemessen am 12.09.2026 auf 375 px: ohne die Regeln darunter braucht sie
   334 px in einem 325 px breiten Kasten und rollt. Deshalb darf der Name UMBRECHEN und die
   Tabelle KEINE Mindestbreite haben; overflow-x bleibt stehen fuer den Fall, dass ein
   Tabellenname eines Tages laenger wird als alles Bisherige. */
.status-tabelle-rollt {
  overflow-x: auto;
}

.status-tabelle {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.status-tabelle th,
.status-tabelle td {
  text-align: left;
  padding: 0.35rem 0.4rem;
  border-bottom: 1px solid var(--linie);
}

/* Der Name darf umbrechen — __EFMigrationsHistory ist das laengste Wort der Seite und haette
   die Tabelle sonst allein ueber die Bildschirmbreite geschoben. Die Zahlen umbrechen NICHT:
   Eine Groesse, die zwischen 143,5 und MB umbricht, ist schlechter lesbar als eine schmalere
   Spalte. */
.status-tabelle td:first-child {
  overflow-wrap: anywhere;
}

/* Die Spalten sind NICHT gleich breit. Mit table-layout:fixed waeren sie es, und der Name
   bekaeme ein Drittel — auf 360 px zerfiel "__EFMigrationsHistory" dort in drei Fetzen, waehrend
   neben "16" und "592 B" der halbe Platz leer stand. Gemessen am 13.09.2026. */
.status-tabelle th:first-child,
.status-tabelle td:first-child {
  width: 56%;
}

.status-tabelle th:nth-child(2),
.status-tabelle td:nth-child(2) {
  width: 16%;
}

.status-tabelle th:last-child,
.status-tabelle td:last-child {
  width: 28%;
}

.status-tabelle thead th {
  color: var(--leise);
  font-size: 14px;
}

.status-zahl {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* *** RECHTSBUENDIG, UND ZWAR FUER KOPF UND ZELLE. ***
   Zahlen liest man von rechts: Untereinander stehen dann Tausender ueber Tausendern, und die
   Spalte "Groesse" wird ueberhaupt erst vergleichbar. tabular-nums oben leistet die halbe
   Arbeit — gleich breite Ziffern; ohne die Ausrichtung steht die Saeule trotzdem schief.

   *** DIE DOPPELTE NENNUNG IST NOETIG UND KEIN VERSEHEN. *** `.status-zahl` allein wiegt 0-1-0,
   die Grundregel `.status-tabelle td` darueber wiegt 0-1-1 und gewinnt mit ihrem
   `text-align: left`. Genau deshalb stand hier bis zum 14.09.2026 nur die Zeile fuer `th` — die
   Kopfzeile war rechtsbuendig, die Zellen darunter nicht, und im Bild sah es aus, als haetten
   die Ueberschriften sich verirrt. Norberts Befund vom 14.09.2026.

   DASSELBE MUSTER ZUM DRITTEN MAL an einem Tag (nach #158 und #156, siehe CLAUDE.md): Eine
   Regel steht da und gilt nicht, weil eine andere schwerer wiegt. Dort entschied die
   Reihenfolge, hier die Spezifitaet. */
.status-tabelle th.status-zahl,
.status-tabelle td.status-zahl {
  text-align: right;
}

/* Die Zeile "Indizes und Verwaltung" gehoert sichtbar NICHT zu den Tabellen — sie ist die
   Luecke, nicht ein weiterer Posten. */
.status-tabelle tfoot td {
  color: var(--leise);
  border-bottom: none;
  border-top: 2px solid var(--linie);
}

.status-umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--abstand);
}

.status-umschalter button {
  font: inherit;
  padding: 0.4rem 0.9rem;
  min-height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
}

.status-umschalter-aktiv {
  background-color: var(--akzent);
  color: var(--akzent-auf);
  border: 1px solid var(--akzent);
  font-weight: 700;
}

.status-umschalter-still {
  background-color: transparent;
  color: var(--tinte);
  border: 1px solid var(--leise);
}

.status-meldungen li {
  display: grid;
  gap: 0.1rem 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
}

.status-meldung-zeit,
.status-meldung-stufe,
.status-meldung-herkunft {
  color: var(--leise);
}

/* JEDES Kind darf umbrechen und schmaler werden als sein Inhalt.
   AM ECHTEN GERAET GEFUNDEN (Norberts Bilder vom 13.09.2026, #150): Die Herkunft einer
   Meldung ist ein einziges langes Wort ohne Leerzeichen —
   "Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager". Ein Gitterfeld ist in
   der Vorgabe mindestens so breit wie sein laengstes Wort (min-width: auto), also sprengte
   diese eine Zeile den ganzen Kasten, und Herkunft UND Text standen abgeschnitten am Rand.
   overflow-wrap: anywhere statt break-word, weil nur "anywhere" auch in die Groessenrechnung
   des Gitters eingeht.

   MEIN TEST HAT DAS NICHT GESEHEN, und das war kein Zufall: Dort heissen die Meldungen "A"
   und "eine Warnung". Was ich mir selbst hinstelle, hat die Faelle nicht, die im Garten
   vorkommen. */
.status-meldungen li > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.status-meldung-stufe {
  font-weight: 600;
}

.status-meldung-fehler .status-meldung-stufe {
  color: var(--signal);
}

.status-meldung-text {
  color: var(--tinte);
  overflow-wrap: anywhere;
}

/* Ab 768 px passen Zeit, Stufe und Herkunft in eine Zeile; am Telefon stehen sie untereinander,
   damit der Text die volle Breite bekommt. Dieselbe Schwelle wie ueberall sonst (FR-018). */
@media (min-width: 768px) {
  .status-meldungen li {
    grid-template-columns: max-content max-content 1fr;
  }

  .status-meldung-text {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Schnittgruppen (Feature 029)
   ========================================================================== */

/* Eine Liste statt eines Rasters: Eine Gruppe traegt drei Texte und eine Pflanzenliste — in
   einer 16rem-Kachel waere davon nichts lesbar. Die Duenger-Karte kann das Raster, weil sie
   nur Name und Naehrstoffe zeigt. */
.schnittgruppen-liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand);
  margin-top: var(--abstand);
}

.schnittgruppe-panel {
  padding: var(--abstand);
  background-color: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.schnittgruppe-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.schnittgruppe-kopf h2 {
  margin: 0;
  font-size: 1.1rem;
}

.schnittgruppe-zahl {
  color: var(--leise);
  font-size: 0.875rem;
}

.schnittgruppe-anleitung {
  margin: 0.75rem 0 0;
  white-space: pre-wrap;
}

/* *** DIE ABGRENZUNG SIEHT ANDERS AUS ALS DER REST, UND ZWAR MIT ABSICHT. ***
   Sie ist der einzige Schutz gegen die plausible, aber falsche Zuordnung (FR-004): Wer bei der
   Pflaume "Spaetwinterschnitt" waehlt, soll "nicht fuer Steinobst" LESEN, nicht ueberfliegen.
   Ein Text, der wie jeder andere aussieht, wird ueberflogen.

   --signal als Randfarbe, nicht als Schriftfarbe: Der Satz soll auffallen, aber nicht wie eine
   Fehlermeldung wirken — es ist ja nichts schiefgegangen. */
.schnittgruppe-abgrenzung {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--signal);
  background-color: var(--senke);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* *** pre-wrap GEHOERT AUF DEN TEXT, NICHT AUF DEN ABSATZ. *** Stuende es am <p>, bliebe der
   Zeilenumbruch aus dem Markup zwischen Marke und Text erhalten — der Satz begaenne dann
   eingerueckt, als waere er ein Zitat. Am laufenden Bild gesehen, von keinem Test gefunden. */
.schnittgruppe-abgrenzung-text {
  white-space: pre-wrap;
}

.schnittgruppe-abgrenzung-marke {
  display: block;
  color: var(--leise);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.schnittgruppe-herkunft,
.schnittgruppe-abgrenzungshinweis {
  margin: 0 0 0.25rem;
  color: var(--leise);
  font-size: 0.875rem;
}

.schnittgruppe-pflanzen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.schnittgruppe-pflanzen a {
  display: block;
  padding: 0.35rem 0.75rem;
  color: var(--tinte);
  text-decoration: none;
  background-color: var(--senke);
  border-radius: var(--radius);
}

.schnittgruppe-pflanzen a:focus-visible {
  background-color: var(--akzent-flaeche);
}

/* Der Hover-Teil gehoert in den Zeiger-Block (FR-055, Issue #121): Auf dem Telefon bliebe die
   Hervorhebung sonst am zuletzt angetippten Pflanzennamen kleben, und er saehe aus wie gewaehlt.
   :focus-visible bleibt draussen — der Fokus muss auch mit angesteckter Tastatur sichtbar sein. */
@media (hover: hover) {
  .schnittgruppe-pflanzen a:hover {
    background-color: var(--akzent-flaeche);
  }
}

/* Name oben, Sorte und Zusatz darunter — Norberts Vorgabe vom 15.09.2026 zu #201: "in der
   Kachel dann bitte Name und auf neue Zeile Sorte + Zusatz". Drei Zeilen "Rose" waeren sonst
   nicht auseinanderzuhalten. */
.schnittgruppe-pflanzen .pflanze-name {
  display: block;
}

.schnittgruppe-pflanzen .pflanze-beiname {
  display: block;
  color: var(--leise);
  font-size: 0.8125rem;
}

.schnittgruppe-an-pflanze {
  margin-top: var(--abstand);
}

.schnittgruppe-zugeordnet {
  padding: 0.75rem;
  background-color: var(--senke);
  border-radius: var(--radius);
}

.schnittgruppe-wahl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* *** DIE VORSCHAU STEHT IM FLUSS, NICHT ALS UEBERLAGERUNG. ***
   SC-003 verlangt, dass die Abgrenzung im selben Bild steht wie der Knopf — ohne Scrollen, auch
   bei 375 px. Deshalb sitzt sie ZWISCHEN Auswahl und Knopf: Ein Overlay koennte den Knopf
   verdecken, und ein Kasten darunter schoebe ihn aus dem Bild. */
.schnittgruppe-abgrenzung-vorschau {
  margin-top: 0;
}

/* Die Rueckfrage IM Panel — NICHT die Klasse .rueckfrage aus Feature 018: Die ist ein
   Vollbild-Overlay (position: fixed, inset: 0) fuer ungespeicherte Aenderungen beim Verlassen
   der Seite. Hier geht es um eine Entscheidung an EINER Kachel; ein abgedunkelter Bildschirm
   waere dafuer zu viel, und der Bezug zur Gruppe ginge verloren. */
.schnittgruppe-panel .rueckfrage,
.schnittgruppe-wahl .rueckfrage {
  position: static;
  inset: auto;
  display: block;
  z-index: auto;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: var(--akzent-flaeche);
  border-radius: var(--radius);
}

.schnittgruppe-panel .rueckfrage p,
.schnittgruppe-wahl .rueckfrage p {
  margin: 0 0 0.5rem;
}

.feldhilfe {
  margin: 0.25rem 0 0;
  color: var(--leise);
  font-size: 0.8125rem;
}

.erfassungsformular {
  max-width: 40rem;
}

/* ---------- Verweise an der Pflanze (#202) ---------- */

.verweis-liste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

/* Der Verweis und sein Entfernen-Knopf nebeneinander, der Text nimmt den Rest. Kein
   white-space: nowrap wie beim Duenger-Chip: Ein Titel ist ein Satz und darf umbrechen —
   auf 375 px waere er sonst waagerecht abgeschnitten. */
.verweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
}

/* 44 px hoch aus demselben Grund wie bei a.chip-name (FA-41): Es ist ein Verweis, den man
   im Garten mit dem Daumen trifft. Erreicht ueber min-height und inline-flex, damit die
   Zahl dort steht, wo TreffflaechenTests sie sucht.

   *** KEINE eigene Farbe und KEIN text-decoration: none. *** Der Duenger-Chip nimmt beides
   weg, weil er als Kapsel schon erkennbar ist; hier steht der Verweis als Zeile unter einer
   Ueberschrift und hat nichts als Farbe und Unterstrich, um sich von Fliesstext zu
   unterscheiden. Damit traegt auch der Fokusring aus :focus-visible allein. */
.verweis-ziel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* Beim Zeigen deutlicher, aber NUR wo es einen Zeiger gibt (FR-055, #121). */
@media (hover: hover) {
  .verweis-ziel:hover {
    text-decoration-thickness: 2px;
  }
}

/* Dieselben Masse wie .chip-entfernen — dasselbe Bedienelement in einer anderen Liste. */
.verweis-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--leise);
  font-size: 1.125rem;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Untereinander und nicht nebeneinander: Die Adresse ist lang, und zwei Felder plus Knopf
   in einer Zeile ergaeben auf 375 px drei Spalten von je einer Handbreit. */
.verweis-neu {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-klein);
  margin-top: var(--abstand);
}

.verweis-neu .knopf {
  align-self: flex-start;
}

/* ===== DIE ERLEDIGT-HISTORIE (Feature 030, #255) =====

   EINE ZEILE JE TERMIN, DARIN DIE JAHRGAENGE NEBENEINANDER. Der Vergleich ueber die Jahre ist
   der eigentliche Gewinn (FR-007) — er muss ohne Rechnen ablesbar sein, also stehen die Jahre
   in einer Reihe und nicht untereinander.

   *** DIE JAHRE DUERFEN WAAGERECHT SCROLLEN, DIE SEITE NICHT (FR-015). *** Das ist der
   Unterschied, auf den es hier ankommt: Nach zehn Jahren sind es zehn Felder, und bei 375 px
   passen drei. Ein overflow-x an DIESER Liste haelt das Schieben dort, wo es hingehoert;
   ohne es schoebe die ganze Seite — genau das, was FA-41 verbietet.

   Die -webkit-overflow-scrolling-Angabe entfaellt: Sie ist seit iOS 13 der Vorgabewert. */

.historien-liste {
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0;
}

.historien-zeile {
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--linie);
}

.historien-liste > .historien-zeile:last-child {
  border-bottom: 0;
}

.historien-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-klein);
}

.historien-pflanze {
  font-weight: 600;
}

/* Die gartenweite Aufgabe traegt keinen Verweis (FR-022) — sie sieht deshalb anders aus als
   ein Name, der einer ist. Ohne den Unterschied liest man einen toten Verweis. */
.historien-ohne-pflanze {
  font-weight: 600;
  color: var(--tinte);
}

.historien-zeitraum {
  font-size: 0.8125rem;
  color: var(--leise);
  white-space: nowrap;
}

.historien-jahre {
  display: flex;
  gap: var(--abstand-klein);
  list-style: none;
  margin: var(--abstand-klein) 0 0;
  padding: 0 0 var(--abstand-klein);
  overflow-x: auto;
}

.historien-jahr {
  flex: 0 0 auto;
  min-width: 5.5rem;
  padding: var(--abstand-klein);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  text-align: center;
}

.historien-jahreszahl {
  display: block;
  font-size: 0.8125rem;
  color: var(--leise);
}

.historien-tag {
  display: block;
  font-weight: 600;
  white-space: nowrap;
}

/* DIE LUECKE (FR-008): gestrichelt statt blass. Eine blasse Flaeche liest sich wie "laedt
   noch"; eine gestrichelte wie "hier ist nichts" — und das Wort daneben sagt es ohnehin, weil
   Farbe nie die einzige Auskunft ist (FR-012 aus 022). */
.historien-luecke {
  border-style: dashed;
}

.historien-tag-leer {
  font-weight: 400;
  color: var(--leise);
}