:root {
  --gruen: #3f7d3f;
  --gruen-dunkel: #2c5a2c;
  --hintergrund: #f5f7f3;
  --text: #23291f;
  --rand: #d7ddd0;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--hintergrund);
  color: var(--text);
  margin: 0;
  padding: 0;
}

header {
  background: var(--gruen-dunkel);
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

header a { color: white; text-decoration: none; font-weight: 600; }

main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.karte {
  background: white;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.karte h3 { margin-top: 0; }

.badge {
  display: inline-block;
  background: var(--gruen);
  color: white;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.8rem;
}

form.inline { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

input, textarea, select {
  padding: 0.5rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  font-family: inherit;
  width: 100%;
}

label { display: block; margin-top: 0.75rem; font-weight: 600; font-size: 0.9rem; }

button {
  background: var(--gruen);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  margin-top: 1rem;
}

button:hover { background: var(--gruen-dunkel); }

.login-box {
  max-width: 360px;
  margin: 4rem auto;
  background: white;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
}

.fehler { color: #b03030; font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--rand); }
img.pflanzenfoto { max-width: 80px; border-radius: 6px; }

header nav { display: flex; gap: 1rem; align-items: center; }

/* Handy-Breite (19.09.2026): ohne das lief der Kopfbereich in EINER
   Zeile weiter, auch wenn mehr Links reinpassen als Platz da ist -
   auf schmalen Bildschirmen wurden Sortenkatalog/Sorten-Datenbank/
   Admin/Benutzername/Abmelden dadurch rechts einfach abgeschnitten
   statt umzubrechen. */
@media (max-width: 640px) {
  header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding: 0.85rem 1rem;
  }
  header nav {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    gap: 0.6rem 1rem;
    width: 100%;
  }
}

.sorten-finder {
  background: var(--hintergrund);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.reiter-gruppe { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.reiter { display: flex; align-items: center; gap: 0.3rem; font-weight: 400; width: auto; margin-top: 0; }
.reiter input { width: auto; }

.bereich-gruppe { margin-top: 0.5rem; }
.bereich-gruppe label { margin-top: 0; }
.bereich { display: flex; align-items: center; gap: 0.5rem; }
.bereich input { width: 90px; }

#sorten-ergebnisse { margin-top: 0.75rem; }
.sorten-treffer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}
.sorten-treffer-buttons { display: flex; gap: 0.4rem; }
.sorten-treffer-buttons button {
  margin-top: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  background: var(--gruen-dunkel);
}

.badge-klein {
  background: var(--gruen-dunkel);
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  margin-left: 0.3rem;
}
.fehler { display: block; margin-top: 0.25rem; }

/* Mehrere-Nutzer-Umbau (19.09.2026) --------------------------------- */
.erfolg { color: var(--gruen-dunkel); font-size: 0.9rem; font-weight: 600; }

/* API-Schluessel-Anzeige (Mein Konto, 19.09.2026) - Klartext-Schluessel
   soll gut lesbar und leicht zu markieren/kopieren sein. */
.api-schluessel-anzeige {
  display: block;
  padding: 0.6rem 0.8rem;
  background: var(--flaeche-hell, #f3f3f3);
  border-radius: 6px;
  word-break: break-all;
  font-size: 0.95rem;
  user-select: all;
}

.badge-warnung { background: #b03030; }

.admin-tabelle td { vertical-align: middle; }
.admin-tabelle select { width: auto; display: inline-block; }
.admin-tabelle .inline-form { display: inline-block; margin: 0; }
.admin-tabelle .inline-form button {
  margin: 0 0.3rem 0.3rem 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

/* --- Sorten-Datenbank (/sorten/datenbank) --- */
.db-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.db-filter { width: 280px; flex-shrink: 0; max-height: 85vh; overflow-y: auto; position: sticky; top: 1rem; }
.db-ergebnisse { flex: 1; min-width: 0; }

.checkbox-liste {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  margin-top: 0.3rem;
  background: var(--hintergrund);
}
.checkbox-zeile { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; width: auto; margin-top: 0.2rem; font-size: 0.85rem; }
.checkbox-zeile input { width: auto; }
.checkbox-zeile small { color: #667059; }

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.15rem;
  border-radius: 3px;
  border: 1px solid var(--gruen);
  color: var(--gruen-dunkel);
  font-size: 0.78rem;
  line-height: 1;
  cursor: help;
  margin-left: 0.15rem;
}
.info-icon:hover, .info-icon:focus { background: var(--gruen); color: #fff; outline: none; }
.anzahl-badge { color: #667059; }

/* Eigene Infobox fuer die Klima-Erklaerung (per JS positioniert, siehe
   sorten_datenbank.html) statt des nativen Browser-Tooltips - dadurch als
   echtes Rechteck gestaltbar und mit besser lesbarer Schriftgroesse. */
.klima-tooltip {
  display: none;
  position: fixed;
  z-index: 1000;
  max-width: 240px;
  background: var(--gruen-dunkel);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.sorten-bild {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rand);
  background: #fff;
  flex-shrink: 0;
}
.sorten-info { flex: 1; min-width: 0; }
#db-treffer .sorten-treffer { align-items: flex-start; }
.sorten-bild { cursor: zoom-in; }

/* Vergroesserte Bildvorschau beim Hovern ueber ein Samenbild (ca. 4x der
   64px-Thumbnail-Groesse) - siehe bildVorschauZeigen() in
   sorten_datenbank.html. */
.bild-vorschau {
  display: none;
  position: fixed;
  z-index: 1000;
  width: 260px;
  height: 260px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--gruen-dunkel);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  background: #fff;
  pointer-events: none;
}

.btn-sekundaer {
  display: inline-block;
  background: transparent;
  color: var(--gruen-dunkel);
  border: 1px solid var(--gruen-dunkel);
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.5rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Bei mehreren nebeneinander (z.B. Nutzer/Rechte/Sortenkatalog im
   Admin-Bereich) keinen extra Abstand vor dem allerersten - der kommt
   schon vom umgebenden Absatz/Container. */
.btn-sekundaer:first-child { margin-left: 0; }
.btn-sekundaer:hover { background: var(--gruen-dunkel); color: #fff; }

.db-pagination { display: flex; align-items: center; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.db-pagination button { margin-top: 0; }
.db-pagination button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 800px) {
  .db-layout { flex-direction: column; }
  .db-filter { width: 100%; position: static; max-height: none; }
}

/* --- Detail-Popup fuer /sorten/datenbank (Klick auf eine Trefferzeile) ---
   Overlay ueber der ganzen Seite, Popup nimmt fast die volle Seitenhoehe/
   -breite ein (siehe modalOeffnen() in sorten_datenbank.html). */
.db-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  padding: 2.5vh 3vw;
  overflow-y: auto;
}
.db-modal-overlay.sichtbar { display: flex; align-items: flex-start; justify-content: center; }
body.db-modal-offen { overflow: hidden; }

.db-modal {
  position: relative;
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 1100px;
  max-height: 95vh;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
}
.db-modal-scroll {
  overflow-y: auto;
  max-height: 95vh;
  width: 100%;
}

.db-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  margin-top: 0;
  padding: 0;
}
.db-modal-close:hover { background: rgba(0, 0, 0, 0.8); }

.db-modal-nav {
  position: absolute;
  top: 40%;
  z-index: 10;
}
.db-modal-nav-links { left: 0.6rem; }
.db-modal-nav-rechts { right: 0.6rem; }
.db-modal-nav button {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  margin-top: 0;
  padding: 0;
}
.db-modal-nav button:hover { background: rgba(0, 0, 0, 0.8); }
.db-modal-nav button:disabled { opacity: 0.3; cursor: default; }

.db-modal-bild {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #f4f4f0;
}
.db-modal-bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  color: #667059;
}

.db-modal-body { padding: 1.25rem 1.5rem 1.75rem; }
.db-modal-body h2 { margin: 0 0 0.4rem; text-align: center; }
.db-modal-badges { text-align: center; margin-bottom: 0.5rem; }
.db-modal-preis { text-align: center; font-size: 1.2rem; font-weight: 600; color: var(--gruen-dunkel); margin-bottom: 0.75rem; }
.db-modal-beschreibung { line-height: 1.5; margin-bottom: 1rem; }

.db-modal-datenblatt {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--rand);
  padding-top: 0.9rem;
}
.db-modal-spec-k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; color: #667059; }
.db-modal-spec-v { font-size: 0.95rem; }

.db-modal-link {
  display: inline-block;
  margin-top: 0.25rem;
}

@media (max-width: 800px) {
  .db-modal-overlay { padding: 0; }
  .db-modal { max-width: none; max-height: 100vh; border-radius: 0; }
  .db-modal-scroll { max-height: 100vh; }
  .db-modal-bild { max-height: 32vh; }
}

/* --- Aktuelle Anbau-Auswahl (Startseite, siehe dashboard.html) --- */
/* Zelte-Liste auf der Startseite (seit dem Multi-Zelt-Umbau, 18.09.2026) -
   siehe dashboard.html. Die eigentliche 3-Slot-Pflanzen-Auswahl (siehe
   .anbau-auswahl-raster unten) ist von hier auf die eigene Zelt-Seite
   (zelt.html) umgezogen. */
.zelte-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.zelt-karte {
  display: block;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  background: var(--hintergrund);
  transition: border-color 0.15s, background 0.15s;
}
.zelt-karte:hover { border-color: var(--gruen); background: #f3f7f0; }
.zelt-karte strong { font-size: 1rem; }

/* --- Foto-Galerie pro Zelt (zelt_fotos.html, 19.09.2026) --- */
.foto-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.foto-filter a {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
}
.foto-filter a.aktiv { background: var(--gruen); color: #fff; border-color: var(--gruen); }
.foto-filter a:hover:not(.aktiv) { background: var(--rand); }

.foto-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.foto-kachel {
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: hidden;
  background: var(--hintergrund);
}
.foto-kachel img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.foto-kachel-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
}
.foto-kachel-zeile button {
  margin-top: 0;
  padding: 0.2rem 0.55rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
}
.foto-kachel-zeile button:hover { background: #f3d6d6; border-color: #c96b6b; }

.foto-galerie-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.foto-galerie-kopf h3 { margin: 0; }
.foto-galerie-kopf button:disabled { opacity: 0.4; cursor: default; }

.foto-kachel-datum { margin: 0.1rem 0 0.4rem; padding: 0 0.5rem; color: #667059; }

/* --- Diashow/Timelapse-Popup (zelt_fotos.html, 19.09.2026): nutzt das
   bestehende .db-modal-overlay/.db-modal-Geruest, nur der Inhalt ist
   eigens fuer die Diashow. --- */
.diashow-modal { max-width: 640px; }
.diashow-inhalt { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }

.diashow-bild-bereich {
  position: relative;
  background: #111;
  border-radius: 8px;
  overflow: hidden;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diashow-bild { max-width: 100%; max-height: 60vh; display: block; }
.diashow-datum {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.diashow-steuerung {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.diashow-steuerung button { margin-top: 0; }
.diashow-zaehler { color: #667059; font-size: 0.9rem; }
.diashow-regler {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.diashow-regler input[type="range"] { width: 140px; }
.diashow-checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}


.anbau-auswahl-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}
.anbau-auswahl-feld label { font-weight: 600; }
@media (max-width: 700px) {
  .anbau-auswahl-raster { grid-template-columns: 1fr; }
}

/* Freies Eingabefeld + "Sorten-Datenbank" als angedockter Knopf (beide
   Zwischenstände vom 18.09.2026) sind wieder raus: Pflanze wird nur noch
   ueber die Sorten-Datenbank ausgewaehlt, danach hier per "Anlegen"
   bestaetigt - siehe zelt.html. Aktueller Name (falls schon gewaehlt)
   wird nur noch als Text angezeigt. */
.anbau-auswahl-name { font-weight: 600; margin: 0.4rem 0 0; }

.anbau-auswahl-aktionen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.anbau-auswahl-aktionen button,
.anbau-auswahl-aktionen .btn-block-sekundaer {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.btn-block-sekundaer {
  display: block;
  padding: 0.5rem 0.8rem;
  background: transparent;
  color: var(--gruen-dunkel);
  border: 1px solid var(--gruen-dunkel);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-block-sekundaer:hover { background: var(--rand); }

/* --- "Für Anbau verwenden"-Button im Detail-Popup, siehe
   sorten_datenbank.html modalInhaltBauen() --- */
.db-modal-anbau { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--rand); }
.db-modal-anbau-slots {
  display: none;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.db-modal-anbau-slots.offen { display: flex; flex-direction: column; }
.db-modal-anbau-slots button { margin-top: 0; }
.db-modal-anbau-status { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--gruen-dunkel); }

/* Seit dem Multi-Zelt-Umbau (18.09.2026): Zelte-Gruppierung im "Für Anbau
   verwenden"-Popup - jede Gruppe zeigt Zeltname + dessen 3 Slot-Buttons in
   einer eigenen Reihe (siehe sorten_datenbank.html modalInhaltBauen()). */
.db-modal-anbau-zelt { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.db-modal-anbau-zelt-name { font-weight: 700; font-size: 0.82rem; min-width: 6rem; }

.anbau-auswahl-bild {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rand);
  margin-top: 0.5rem;
  background: #fff;
}

.anbau-auswahl-feld-gesperrt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.75rem;
}
.anbau-auswahl-feld-gesperrt label { align-self: flex-start; font-weight: 600; }
.anbau-auswahl-feld-gesperrt .anbau-auswahl-bild { max-height: 140px; }

.btn-block {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: var(--gruen-dunkel);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.btn-block:hover { opacity: 0.9; }

.pflanze-detail-kopf { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.pflanze-detail-bild {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rand);
  background: #fff;
}
.pflanze-detail-kopf h2 { margin: 0; }

/* --- Tageszaehler auf der Pflanzen-Detailseite (anbau_pflanze.html) --- */
.pflanze-titel-zeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pflanze-titel-zeile h1 { margin: 0; }
.protokoll-link {
  align-self: center;
  text-decoration: none;
  display: inline-block;
  background: #2f6fb3;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.protokoll-link:hover { background: #24568c; }
.sonstige-zusatz-zeile { display: flex; gap: 0.5rem; margin-bottom: 0.4rem; }
.sonstige-zusatz-zeile .feldSonstigeZusatzName { flex: 1; }
.sonstige-zusatz-zeile .feldSonstigeZusatzMenge { width: 5.5rem; }
.tageszaehler { display: flex; align-items: flex-start; }
.tageszaehler #btn-start { margin-top: 0; }

/* Start-Button (18.09.2026): schwebt rechts fest im Fenster statt nur
   oben in der Titelzeile zu stehen - stand vorher nur ganz oben und war
   beim Runterscrollen weg ("geht unter"). z-index absichtlich UNTER den
   Modal-Overlays (siehe .tag-modal-overlay/.db-modal weiter unten), damit
   die im Zweifel trotzdem darueber liegen. */
#btn-start {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 900;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.tageszaehler-text {
  background: var(--gruen-dunkel);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* --- Anbaumethode-Auswahl auf der Pflanzen-Detailseite --- */
.methoden-auswahl { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.methoden-auswahl-hinweis { font-size: 1.05rem; margin: 0.3rem 0 0.6rem; }
.methoden-auswahl button {
  margin-top: 0;
  background: transparent;
  color: var(--gruen-dunkel);
  border: 1px solid var(--gruen-dunkel);
}
.methoden-auswahl button:hover { background: var(--rand); }
.methoden-auswahl button.aktiv {
  background: var(--gruen-dunkel);
  color: #fff;
}

.methoden-auswahl-unter { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--rand); }
.methoden-auswahl-unter button { font-size: 0.85rem; }

/* Anbaumethode NACH dem Start (18.09.2026): fixiert statt umschaltbar -
   zeigt nur noch die gewaehlte Methode/den Erde-Typ als Badge, keine
   Buttons fuer die anderen Optionen mehr (siehe anbau_pflanze.html +
   Server-seitige Sperre in auswahl.py). */
.methode-fixiert { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; align-items: center; }
.methode-fixiert-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gruen-dunkel);
  color: #fff;
  border: 1px solid var(--gruen-dunkel);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
}
.methode-fixiert-badge.methode-fixiert-unter { font-size: 0.8rem; padding: 0.4rem 0.85rem; }

/* --- Info-Karten (z.B. "Was ist biologische Erde?") auf der
   Pflanzen-Detailseite --- */

/* Aufklappbare Info-Karten (18.09.2026): stehen jetzt UNTER dem Kalender
   und sind standardmaessig zugeklappt, damit der Kalender oben nicht
   zwischen langen Rezept-/Duengeplan-Texten "versteckt" ist - einfach
   <details>/<summary>, kein JS noetig. */
.info-aufklappbar { border: none; }
.info-aufklappbar summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.17rem;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-aufklappbar summary::-webkit-details-marker { display: none; }
.info-aufklappbar summary::before {
  content: "▸";
  color: var(--gruen-dunkel);
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.info-aufklappbar[open] summary::before { transform: rotate(90deg); }
.info-aufklapp-inhalt { margin-top: 0.85rem; }
.info-aufklapp-inhalt > *:first-child { margin-top: 0; }
/* Mehrere <details> hintereinander in EINER Karte (z.B. die
   Bedienungsanleitung im Dashboard) - Trennlinie + Abstand statt
   direkt aneinandergeklebt. */
.info-aufklappbar + .info-aufklappbar { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rand); }

.info-liste { margin: 0.4rem 0 0.8rem; padding-left: 1.3rem; line-height: 1.5; }
.duengeplan-tabelle { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.duengeplan-tabelle th, .duengeplan-tabelle td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}
.duengeplan-tabelle th { font-size: 0.8rem; text-transform: uppercase; color: #667059; }

/* --- Dünge-Kalender auf der Pflanzen-Detailseite: echter, immer
   sichtbarer Monatskalender (Monatsansicht mit Vor/Zurück-Pfeilen) statt
   einer Liste, die nur bis "heute" ging - so kann man auch weit in die
   Zukunft vorplanen (z.B. "Ab hier Blüte" schon für in 6 Wochen). --- */
.wachstumsphase-einstellung {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.75rem;
}
.wachstumsphase-einstellung label { font-size: 0.85rem; }
.wachstumsphase-einstellung input { width: 5rem; }

.monatskalender-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-weight: 600;
}
.monatskalender-wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-align: center;
  color: #667059;
}
.monatskalender-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.monatskalender-tag {
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  min-height: 58px;
  font-size: 0.72rem;
}
.monatskalender-tag:hover { border-color: var(--gruen-dunkel); }
.monatskalender-tag.leer { visibility: hidden; cursor: default; }
.monatskalender-tag.nicht-aktiv { cursor: default; color: #aab0a1; background: #f4f5f1; }
.monatskalender-tag-nr { font-weight: 600; margin-bottom: 0.2rem; }
.monatskalender-tag-zaehler { font-weight: 400; font-size: 0.68rem; color: #667059; }
.monatskalender-tag.ausgefuellt .monatskalender-tag-zaehler { color: #dfe8d8; }
.monatskalender-tag-phase { color: #8a9280; font-style: italic; }
.monatskalender-tag-inhalt { line-height: 1.25; }
.monatskalender-tag.ausgefuellt { background: var(--gruen-dunkel); color: #fff; border-color: var(--gruen-dunkel); }
.monatskalender-tag.heute { outline: 2px solid var(--gruen-dunkel); outline-offset: -2px; }
.monatskalender-tag.start-tag { border-color: var(--gruen-dunkel); border-width: 2px; }
.monatskalender-tag.bluete-tag { border-color: #c9469b; border-width: 2px; }
.monatskalender-tag.nach-bluete:not(.ausgefuellt) { background: #fbeef6; }
.monatskalender-tag.wachstumsphase-ende { border-style: dashed; border-color: #8a9280; }
.monatskalender-tag.ernte-tag { border-color: #b8860b; border-width: 2px; }

.tag-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tag-modal-overlay.sichtbar { display: flex; }
.tag-modal {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}
.tag-modal h3 { margin-top: 0; padding-right: 2rem; }

/* --- Protokoll-Seite (/anbau/pflanze/{slot}/protokoll) --- */
.protokoll-raster {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 720px) {
  .protokoll-raster { grid-template-columns: 1fr; }
}
.protokoll-tabelle-wrapper { overflow-x: auto; }
.protokoll-tabelle { border-collapse: collapse; white-space: nowrap; font-size: 0.82rem; }
.protokoll-tabelle th, .protokoll-tabelle td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rand);
}
.protokoll-tabelle th { font-size: 0.72rem; text-transform: uppercase; color: #667059; }