* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f7f2;
  color: #2f3e2f;
}

header {
  background-color: #4a7c59;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;
}

section {
  background-color: white;
  border: 1px solid #cddccb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
}

select, button, input {
  width: 100%;
  padding: 8px;
  margin-top: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  margin-top: 16px;
  background-color: #4a7c59;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #3a6347;
}

button.sekundaer {
  background-color: transparent;
  color: #4a7c59;
  border: 1px solid #4a7c59;
}

button.sekundaer:hover {
  background-color: #eef4ee;
}

#auth-fehler {
  color: #b23b3b;
  margin-top: 10px;
  font-weight: bold;
}

.top-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.top-leiste button {
  width: auto;
  margin-top: 0;
  margin-left: 8px;
}

footer {
  text-align: center;
  padding: 12px;
  color: #6b7d6b;
  font-size: 0.9em;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.button-grid button {
  width: auto;
  margin-top: 0;
  background-color: #6b9c7a;
}

.pflanze-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
}

.pflanze-button img {
  width: 100%;
  height: 80px;
  object-fit: contain;
  background-color: #f4f7f2;
  border-radius: 4px;
}

/* Bearbeiten/Loeschen-Symbole auf einer "eigene Art"-Kachel im Katalog-Raster */
.eigene-art-werkzeuge {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.icon-btn {
  cursor: pointer;
  font-size: 1em;
  padding: 2px 6px;
  border-radius: 4px;
}

.icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

.pflanzen-karte {
  border: 1px solid #cddccb;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: flex-start;
}

.pflanzen-karte-info {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

/* Bild rechts oben in der Ecke */
.pflanzen-karte-bild,
.pflanzen-karte .bild-platzhalter {
  order: 2;
}

/* Detailbereich über die volle Kartenbreite (unter Info und Bild) */
.pflanzen-karte .pflanzen-details {
  order: 3;
  flex: 0 0 100%;
}

.stern-btn {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.3em;
  line-height: 1;
  color: #b8860b;
  vertical-align: middle;
  margin-left: 4px;
  cursor: pointer;
}

.stern-btn:hover {
  background: transparent;
}

.pflanzen-aktionen {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.filter-leiste {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}

.filter-btn {
  width: auto;
  margin-top: 0;
  background-color: transparent;
  color: #4a7c59;
  border: 1px solid #4a7c59;
  padding: 6px 12px;
  font-size: 0.85em;
}

.filter-btn.aktiv {
  background-color: #4a7c59;
  color: white;
}

#pflanzen-suche {
  flex: 1;
  min-width: 140px;
  margin-top: 0;
}

/* Kompakte Aktions-Buttons in der Pflanzenkarte (Selektor war verloren gegangen, deshalb waren die Buttons bisher volle Breite) */
.pflanzen-aktionen button {
  width: auto;
  margin-top: 0;
  padding: 4px 8px;
  font-size: 0.85em;
}

.pflanzen-details {
  margin-top: 10px;
  padding: 10px;
  background-color: #f4f7f2;
  border-radius: 6px;
}

.pflanzen-details textarea {
  width: 100%;
  padding: 6px;
  margin-top: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-family: inherit;
  resize: vertical;
}

.pflanzen-details button {
  width: auto;
  margin-top: 8px;
  padding: 6px 10px;
}

[id^="notiz-status-"] {
  color: #4a7c59;
  font-weight: bold;
  margin-left: 8px;
}

.pflanzen-karte-bild {
  width: 88px;
  height: 88px;
  object-fit: contain;
  background-color: #f4f7f2;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Zweispaltiges Layout: Pflanze hinzufügen | Wochenkalender */
.haupt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.haupt-grid section {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .haupt-grid {
    grid-template-columns: 1fr;
  }
}

/* Wochenkalender */
.kalender-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.kalender-kopf button {
  width: auto;
  margin-top: 0;
}

/* Pfeile (Monat blättern) und Auf-/Zuklappen-Button im Kalenderkopf */
.kalender-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.kalender-tag {
  border: 1px solid #e0d9c5;
  border-radius: 6px;
  padding: 8px;
  min-height: 130px;
  font-size: 0.85em;
}

.kalender-tag.kompakt {
  height: 88px;
  min-height: unset;
  overflow: hidden;
}

.kalender-tag.kompakt.aktuelle-woche {
  height: auto;
  min-height: 88px;
  overflow: visible;
  background-color: #f4f9f4;
  border-color: #9cc4a4;
}

.kalender-aufgabe-klein {
  font-size: 0.68em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kalender-aufgabe-klein.ueberfaellig {
  color: #000;
  font-weight: bold;
}

.kalender-tag h4 {
  margin-bottom: 6px;
  font-size: 0.95em;
}

.kalender-tag.heute {
  background-color: #fff3d6;
  border-color: #d9a441;
  border-width: 2px;
}

/* In der Monatsansicht würde das Grün der "aktuellen Woche" die Hervorhebung von heute überdecken */
.kalender-tag.kompakt.aktuelle-woche.heute {
  background-color: #fff3d6;
  border-color: #d9a441;
}

/* "Heute"-Schild neben dem Datum (Wochenansicht) */
.heute-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background-color: #d9a441;
  color: #2f3e2f;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: middle;
}

/* Kreis um die heutige Tageszahl (Monatsansicht) */
.heute-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background-color: #d9a441;
  color: #2f3e2f;
}

.kalender-tag.leer {
  border: none;
  background: transparent;
}

.kalender-wochentag-header {
  text-align: center;
  font-weight: bold;
  font-size: 0.8em;
  color: #6b7d6b;
  padding: 4px 0;
}

.kalender-aufgabe {
  padding: 2px 0;
}

.kalender-aufgabe.ueberfaellig {
  color: #000;
  font-weight: bold;
}

#standort-auswahl,
#uebernahme-auswahl {
  margin-top: 14px;
  padding: 12px;
  background-color: #f4f7f2;
  border-radius: 6px;
}

.standort-buttons {
  display: flex;
  gap: 8px;
}

.standort-buttons button {
  width: auto;
  flex: 1;
  margin-top: 0;
}

/* Wetter-Banner */
#wetter-banner {
  background-color: #eef6fb;
  border-color: #9cc4dd;
}

.wetter-kopf-zeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

#wetter-zustand {
  flex: 1 1 240px;
}

#wetter-inhalt {
  flex: 1 1 240px;
}

.wetter-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wetter-temperatur {
  font-size: 2em;
  font-weight: bold;
}

.wetter-hinweis {
  margin-top: 10px;
  font-weight: bold;
  color: #000;
}

/* ===== Erweiterungen: Serverfehler, Wetter, Pflanzenkarte, Details, Meldungen ===== */

/* Meldung, wenn das Backend nicht erreichbar ist */
#server-fehler {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background-color: #fbeaea;
  border: 1px solid #e3b4b4;
  color: #8f2f2f;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-weight: bold;
}

#server-fehler button {
  width: auto;
  margin-top: 0;
  color: #8f2f2f;
  border-color: #8f2f2f;
}

/* Wetter: Ort, Tageswerte, Regen- und Kältehinweise */
.wetter-ort {
  margin-left: auto;
  font-size: 0.9em;
  background-color: white;
  border: 1px solid #9cc4dd;
  border-radius: 999px;
  padding: 2px 12px;
}

.wetter-ort.standard {
  border-color: #d9a441;
  background-color: #fff8e6;
}

.wetter-details {
  margin-top: 6px;
  font-size: 0.9em;
  color: #4b5d6b;
}

.wetter-hinweis.frost {
  font-weight: bold;
}

/* Pflanzenkarte */
.art-name {
  color: #6b7d6b;
  font-size: 0.85em;
  font-weight: normal;
}

.karte-meta {
  margin-top: 2px;
  font-size: 0.85em;
  color: #6b7d6b;
}

.termin-zeile {
  margin-top: 6px;
}

.termin-zeile.klein {
  margin-top: 2px;
  font-size: 0.85em;
  color: #4d5f4d;
}

.ueberfaellig-text {
  color: #b23b3b;
  font-weight: bold;
}

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #cddccb;
  background-color: #eef4ee;
  color: #3a6347;
  font-size: 0.75em;
  vertical-align: middle;
}

.tag.regen {
  background-color: #e6f0fa;
  color: #2f5f8a;
  border-color: #b7d3ea;
}

/* Platzhalter, wenn das Foto einer Pflanze fehlt */
.bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f7f2;
  border-radius: 6px;
  font-size: 1.8em;
  flex-shrink: 0;
}

.pflanze-button .bild-platzhalter {
  width: 100%;
  height: 80px;
}

.pflanzen-karte .bild-platzhalter {
  width: 88px;
  height: 88px;
  font-size: 2.4em;
}

@media (max-width: 700px) {
  .pflanzen-karte-bild,
  .pflanzen-karte .bild-platzhalter {
    width: 76px;
    height: 76px;
  }
}

/* Detailbereich einer Pflanze */
.detail-zeile {
  margin-top: 6px;
  font-size: 0.9em;
}

.detail-block {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #cddccb;
}

.detail-block h5 {
  margin-bottom: 4px;
  font-size: 0.95em;
  color: #3a6347;
}

.pflanzen-details label {
  margin-top: 8px;
  font-size: 0.9em;
}

.pflanzen-details input,
.pflanzen-details select {
  padding: 6px;
  margin-top: 4px;
}

.hinweis-klein {
  margin-bottom: 4px;
  font-size: 0.85em;
  color: #6b7d6b;
}

.termin-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.9em;
}

.termin-buttons button {
  margin-top: 0;
}

.datum-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  margin-top: 8px;
}

.datum-zeile label {
  grid-column: 1 / -1;
  margin-top: 0;
}

.datum-zeile input,
.datum-zeile button {
  margin-top: 0;
}

.verlauf-statistik {
  margin-bottom: 4px;
  font-size: 0.9em;
  font-weight: bold;
}

.verlauf-liste {
  list-style: none;
  font-size: 0.9em;
}

.verlauf-liste li {
  padding: 2px 0;
}

.filter-leiste .filter-auswahl {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 0.85em;
}

/* Kurze Rückmeldung am unteren Bildschirmrand */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  max-width: 90vw;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: #2f3e2f;
  color: white;
  font-size: 0.9em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 50;
}

#toast.sichtbar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Handy-Ansicht (schmale Displays) ===== */
@media (max-width: 600px) {
  main {
    padding: 0 10px;
  }

  section {
    padding: 12px;
  }

  /* Wochenansicht: ein Tag pro Zeile statt 7 winziger Spalten */
  .kalender-grid.woche {
    grid-template-columns: 1fr;
  }

  .kalender-grid.woche .kalender-tag {
    min-height: 0;
  }

  /* Monatsansicht: 7 schmale Spalten, Texte werden gekürzt */
  .kalender-grid.monat {
    gap: 3px;
  }

  .kalender-grid.monat .kalender-tag {
    padding: 3px;
    border-radius: 4px;
    min-width: 0;
  }

  .kalender-grid.monat .kalender-tag.kompakt {
    height: 72px;
  }

  .kalender-grid.monat .kalender-tag.kompakt.aktuelle-woche {
    height: auto;
    min-height: 72px;
  }

  .kalender-grid.monat .kalender-tag h4 {
    font-size: 0.8em;
    margin-bottom: 2px;
  }

  .kalender-grid.monat .kalender-aufgabe-klein {
    font-size: 0.62em;
  }

  .top-leiste {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Lob für regelmäßiges Gießen */
.serie-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: #fff3d6;
  border: 1px solid #d9a441;
  color: #6b4a0e;
  font-size: 0.8em;
  font-weight: bold;
}

#aussen-auswahl {
  margin-top: 12px;
}

#aussen-auswahl button {
  margin-top: 12px;
}

.zentrale-block {
  margin-top: 10px;
  font-size: 0.95em;
  color: #000;
}

.zentrale-block ul {
  list-style: none;
  margin-top: 6px;
}

.zentrale-titel {
  font-weight: bold;
}

.zentrale-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.zentrale-zeile button {
  width: auto;
  margin: 0;
  padding: 3px 8px;
  font-size: 0.8em;
  flex-shrink: 0;
}

.zentrale-info {
  color: #000;
  font-size: 0.9em;
}

.zentrale-block.ueberfaellig,
.zentrale-block.heute,
.zentrale-block.gut,
.zentrale-block.lob,
.zentrale-block.neutral {
  color: #000;
}

.zentrale-block.ueberfaellig .zentrale-info {
  color: #000;
}

.zentrale-block.gut,
.zentrale-block.lob {
  font-weight: bold;
}

#kaelte-warnung .wetter-hinweis {
  margin-top: 10px;
}

/* Aktionsbuttons ganz oben auf der Pflanzenkarte */
.pflanzen-aktionen.oben {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Formular "Eigene Pflanze" */
#eigene-pflanze-btn {
  margin-top: 14px;
}

#eigene-pflanze-form {
  margin-top: 8px;
  padding: 10px;
  border: 1px dashed #b7cdb4;
  border-radius: 6px;
}

#eigene-pflanze-form textarea {
  width: 100%;
}

.checkbox-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.checkbox-zeile input {
  width: auto;
  margin: 0;
}

/* Foto einer eigenen Pflanze */
.pflanzen-karte-bild.foto {
  object-fit: cover;
}

.bild-vorschau {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  margin: 8px 0;
}