/*
  Gartenplaner — eigener Entwurf in den Farben des Hauses (FA-48).
  Kein CSS-Framework, keine UI-Bibliothek.

  Die Kontrastwerte sind in specs/001-initial-setup/research.md Punkt 10 nachgerechnet:
    Anthrazit auf Grundfläche      11,9 : 1
    Akzent auf Grundfläche          9,2 : 1
    Weiß auf Akzent                10,2 : 1
    Grau-dunkel auf Grundfläche     4,7 : 1
    Fassadengrau auf Grundfläche    2,6 : 1  ← reicht NICHT für Bedeutungstragendes
*/

:root {
  --flaeche: #F4F4F2;
  --grau: #9A9A96;
  --grau-dunkel: #6E6E6A;
  --anthrazit: #2E3134;
  --akzent: #7B1F24;
  --akzent-dunkel: #601a1e;
  --weiss: #FFFFFF;

  /* Die fuenf Aufgabenarten (FA-42, FA-48). Werte und Kontraste nachgerechnet in
     specs/003-termine-kalender/contracts/farben.md. Die Helligkeiten sind bewusst
     gespreizt, damit die Farben auch in Graustufen auseinandergehen - die kritischen
     Paare Gruen/Ocker und Blau/Tuerkis am weitesten. */
  --art-duengen: #8F6C1A;
  --art-giessen: #2C6994;
  --art-ernten: #286341;
  --art-aussaeen: #0D5357;
  --art-schneiden: #4C2F69;

  --abstand: 1rem;
  --abstand-klein: 0.5rem;
  --radius: 4px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

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

h1, h2, h3 {
  margin: 0 0 var(--abstand-klein);
  line-height: 1.25;
}

h1 {
  font-size: 1.5rem;
}

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

/* ---------- Grundgerüst ---------- */

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

.kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  padding: var(--abstand-klein) var(--abstand);
  background-color: var(--anthrazit);
  color: var(--weiss);
}

.marke {
  font-weight: 600;
  font-size: 1.125rem;
  flex: 1;
}

.abmelden-form {
  margin: 0;
}

.rumpf {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.inhalt {
  flex: 1;
  padding: var(--abstand);
  max-width: 60rem;
}

/* ---------- Navigation ---------- */

.navigation {
  /* Am PC eine feste Spalte. popover wird unter 768 px aktiviert (siehe unten). */
  position: static;
  display: block;
  width: 14rem;
  flex: 0 0 14rem;
  padding: var(--abstand) 0;
  margin: 0;
  border: 0;
  border-right: 1px solid var(--grau);
  background-color: var(--flaeche);
  color: var(--anthrazit);
  inset: auto;
  overflow: visible;
}

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

.nav-punkt {
  display: block;
  padding: 0.75rem var(--abstand);
  color: var(--anthrazit);
  text-decoration: none;
  /* Fingertauglich: mindestens 44 px hoch (FA-41). */
  min-height: 44px;
  border-left: 3px solid transparent;
}

.nav-punkt:hover,
.nav-punkt:focus-visible {
  background-color: rgba(46, 49, 52, 0.06);
}

/* Aktiver Punkt: Farbe UND Fettung — Farbe allein sagt bei Rot-Grün-Schwäche nichts. */
.nav-punkt.active {
  color: var(--akzent);
  font-weight: 700;
  border-left-color: var(--akzent);
  background-color: rgba(123, 31, 36, 0.08);
}

.angemeldet {
  padding: var(--abstand) var(--abstand) 0;
  margin: var(--abstand) 0 0;
  border-top: 1px solid var(--grau);
  font-size: 0.875rem;
  color: var(--grau-dunkel);
}

.schublade-knopf {
  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(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
}

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

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

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

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

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

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

input[type="text"],
input[type="password"],
/* Datumsfelder standen bis T-31 nicht in dieser Liste. Sie waren damit 27 px hoch und
   trugen als einzige Felder nicht die Hausgestalt — ein Versehen aus Feature 005, nicht
   eine Absicht. */
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.625rem;
  font: inherit;
  color: var(--anthrazit);
  background-color: var(--weiss);
  /* Bedeutungstragender Rand: grau-dunkel, nicht Fassadengrau (2,6 : 1 reicht nicht). */
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
  min-height: 44px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

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

/* ---------- 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;
}

.knopf-akzent {
  background-color: var(--akzent);
  color: var(--weiss);
}

.knopf-akzent:hover {
  background-color: var(--akzent-dunkel);
}

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

.knopf-kopf {
  background-color: transparent;
  color: var(--weiss);
  border-color: var(--weiss);
}

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

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

.meldung-fehler {
  color: var(--akzent);
  border-color: var(--akzent);
  background-color: rgba(123, 31, 36, 0.06);
}

.platzhalter {
  padding: var(--abstand);
  border: 1px dashed var(--grau-dunkel);
  border-radius: var(--radius);
  background-color: var(--weiss);
}

.platzhalter-marke {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--akzent);
}

/* ---------- 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;
}

.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(--weiss);
  border: 1px solid var(--grau-dunkel);
  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(--grau-dunkel);
  white-space: nowrap;
}

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

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

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

.abschnitt {
  padding: var(--abstand);
  margin-bottom: var(--abstand);
  background-color: var(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
}

.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(--grau-dunkel);
  white-space: nowrap;
}

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

.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(--grau-dunkel);
  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);
}

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

.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(--grau);
}

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

.hinweis-einjaehrig {
  margin-top: var(--abstand-klein);
  padding: var(--abstand-klein);
  background-color: var(--flaeche);
  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: rgba(46, 49, 52, 0.6);
  z-index: 100;
}

.rueckfrage-karte {
  max-width: 28rem;
  padding: var(--abstand);
  background-color: var(--weiss);
  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(--anthrazit);
  background-color: var(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
  cursor: pointer;
}

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

.az-knopf[disabled] {
  /* Fassadengrau reicht fuer Bedeutungstragendes nicht (2,6 : 1) - deshalb traegt der
     gesperrte Zustand zusaetzlich das disabled-Attribut, das die Vorlesesoftware nennt. */
  color: var(--grau);
  background-color: transparent;
  border-color: var(--grau);
  cursor: default;
}

/* Der aktive Buchstabe ist durch Farbe UND Fettung UND Rahmen hervorgehoben. */
.az-knopf-aktiv {
  color: var(--weiss);
  background-color: var(--akzent);
  border-color: var(--akzent);
}

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

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

/* 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);
}

.pflanzen-karte {
  display: block;
  padding: var(--abstand);
  color: var(--anthrazit);
  text-decoration: none;
  background-color: var(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
}

.pflanzen-karte:hover,
.pflanzen-karte:focus-visible {
  border-color: var(--akzent);
}

.karte-name {
  margin: 0 0 var(--abstand-klein);
  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;
}

.karte-standort {
  margin: 0 0 var(--abstand-klein);
  font-size: 0.875rem;
  color: var(--grau-dunkel);
  /* 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 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grau-dunkel);
}

.karte-naechste-aufgabe {
  margin: var(--abstand-klein) 0 0;
  font-size: 0.8125rem;
  color: var(--grau-dunkel);
}

/* ---------- 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);
  background-color: var(--flaeche);
}

/* 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(--grau-dunkel);
}

.fotokasten-karte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

  Das Wort steht in ANTHRAZIT, nicht in Fassadengrau: Das erreicht auf der Grundflaeche nur
  2,6 : 1 und darf nach FA-48 nichts zeichnen, was etwas bedeutet. "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(--anthrazit);
  font-size: 0.875rem;
  border: 1px dashed var(--grau-dunkel);
}

/* 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(--anthrazit);
  background-color: var(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
  min-height: 44px;
}

.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(--akzent);
}

.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).
*/

.art-duengen   { --art: var(--art-duengen); }
.art-giessen   { --art: var(--art-giessen); }
.art-ernten    { --art: var(--art-ernten); }
.art-aussaeen  { --art: var(--art-aussaeen); }
.art-schneiden { --art: var(--art-schneiden); }

/* Flaeche in der Artfarbe, weisser Text darauf - mindestens 4,9 : 1. */
.art-flaeche {
  background-color: var(--art);
  color: var(--weiss);
}

/* Nur ein Farbtupfer, etwa in der Legende oder vor einer Aufgabenzeile. */
.art-punkt {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 2px;
  background-color: var(--art);
  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(--grau);
}

/* Die Trefferflaeche der Checkbox ist mindestens 44 px - abgehakt wird einhaendig im Garten
   (SC-007, FA-41). */
.aufgaben-haken {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.aufgaben-titel {
  flex: 1 1 auto;
}

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

.aufgaben-art {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  white-space: nowrap;
  background-color: var(--art);
  color: var(--weiss);
}

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

.aufgaben-ueberfaellig {
  color: var(--akzent);
}

/* ---------- 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,
.kalender-blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
}

/* 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(--weiss);
  border: 1px solid var(--grau-dunkel);
  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(--weiss);
  border: 1px solid var(--grau-dunkel);
  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;
}

.monatsansicht-tag-fremd {
  color: var(--grau);
}

.monatsansicht-tag-heute,
.wochenansicht-tagkopf.monatsansicht-tag-heute {
  background-color: var(--flaeche);
  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;
}

.kalender-balken {
  border-radius: 2px;
  font-size: 0.75rem;
  padding: 0 0.25rem;
  color: var(--weiss);
  background-color: var(--art);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.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 ---------- */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem var(--abstand);
  background-color: var(--anthrazit);
  color: var(--weiss);
}

#blazor-error-ui .reload {
  color: var(--weiss);
  margin-left: var(--abstand-klein);
}

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

@media (max-width: 767px) {
  .schublade-knopf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--weiss);
    border-radius: var(--radius);
    cursor: pointer;
  }

  .schublade-knopf .balken {
    display: block;
    height: 2px;
    background-color: var(--weiss);
    margin: 0 auto;
    width: 22px;
  }

  /* Die Navigation wird zur Schublade: Der Inhalt bekommt die volle Breite. */
  .navigation {
    position: fixed;
    inset: 0 auto 0 0;
    width: 16rem;
    max-width: 85vw;
    border-right: 1px solid var(--grau-dunkel);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
  }

  .navigation:not(:popover-open) {
    display: none;
  }

  .navigation::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .inhalt {
    padding: var(--abstand-klein);
    max-width: 100%;
  }

  /* 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(--grau-dunkel);
  }

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

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

/* ---------- 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(--grau);
  border-radius: var(--radius);
  padding: var(--abstand);
  background-color: var(--weiss);
}

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

/* 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);
}

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

/* 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);
}

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

/* ---------- 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(--grau);
  border-radius: 999px;
  padding-left: var(--abstand-klein);
  background-color: var(--flaeche);
  font-size: 0.875rem;
}

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

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

.chip-entfernen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--grau-dunkel);
  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);
}

/* ---------- 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(--grau);
}

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

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

.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(--grau-dunkel);
}

.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(--grau);
}

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

.knopf-sortieren:hover,
.knopf-sortieren:focus-visible {
  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(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
  cursor: pointer;
}

.auswahlraster-zelle:hover {
  background-color: var(--flaeche);
}

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

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

.auswahlraster-zelle-ausgewaehlt:hover {
  background-color: var(--akzent-dunkel);
}

/* ---------- 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(--grau-dunkel);
}

/* 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(--grau-dunkel);
  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(--flaeche);
  border: 1px solid var(--grau-dunkel);
  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(--grau);
}

.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(--grau-dunkel);
  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(--grau-dunkel);
  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(--weiss);
  border: 1px solid var(--grau-dunkel);
  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(--grau-dunkel);
}

.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(--grau-dunkel);
  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(--grau);
}

.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(--grau-dunkel);
  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(--weiss);
  border: 1px solid var(--grau-dunkel);
  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(--flaeche);
  border: 1px solid var(--grau-dunkel);
  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(--grau-dunkel);
}

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

/* ---------- Uebersicht: die vier Kennzahlen (Feature 013 US1) ---------- */

/* Das Raster BRICHT UM, es schrumpft nicht (FR-036, SC-002). Mit auto-fit und einer
   Mindestbreite stehen auf 375 px zwei Kacheln je Zeile, am PC alle vier — und in keinem Fall
   entsteht waagerechtes Scrollen. Eine feste Vierteilung waere auf 375 px 90 px je Kachel:
   die Beschriftung "Ueberfaellig / heute" briche dort in vier Zeilen. */
.kennzahlen {
  display: grid;
  gap: var(--abstand-klein);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: var(--abstand);
}

.kennzahl {
  padding: var(--abstand);
  background-color: var(--weiss);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
}

.kennzahl-wert {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.kennzahl-name {
  display: block;
  margin-top: var(--abstand-klein);
  color: var(--grau-dunkel);
}

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

/* Die Herkunft — Bereiche der Pflanze oder der Hinweis auf den ganzen Garten — steht als
   eigene Zeile UNTER dem Titel (FR-013 bis FR-015). Umgesetzt in der vorhandenen Flex-Zeile,
   die der Kalender mitbenutzt: order schickt sie nach hinten, die Flex-Basis von 100 Prozent
   erzwingt den Umbruch. So bleibt die Zeile ein Baustein — und auf 375 px bleibt oben Platz
   fuer Titel, Art und Datum. */
.aufgaben-herkunft {
  order: 1;
  flex: 1 0 100%;
  font-size: 0.875rem;
  color: var(--grau-dunkel);
}

/* 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. */
.bereichskachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-height: 44px;
  padding: var(--abstand-klein);
  border: 1px solid var(--grau-dunkel);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--anthrazit);
  background-color: var(--flaeche);
}

.bereichskachel:hover {
  border-color: var(--akzent);
}

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

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