:root {
  --bg: #f6f7f4;
  --card: #ffffff;
  --text: #1f2a1f;
  --muted: #6b7566;
  --line: #dfe4da;
  --gruen: #3a8f4d;
  --gruen-hell: #e3f3e6;
  --prio1: #d64545;
  --prio1-hell: #fbe3e3;
  --prio2: #e0a020;
  --prio2-hell: #fcf1d6;
  --prio3: #4a90c8;
  --prio3-hell: #e1eefa;
  --link: #2f6b3b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--link); }
h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
small.muted, .muted { color: var(--muted); font-weight: normal; }
.klein { font-size: .85rem; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 16px 3rem; }

/* Kopfzeile */
.top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: .6rem 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.top .brand { font-weight: 600; text-decoration: none; color: var(--text); }
.top nav a { margin-left: 1rem; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

/* Login */
.login { max-width: 360px; margin: 4rem auto; background: var(--card); padding: 1.5rem; border-radius: 10px; border: 1px solid var(--line); }
.login label { display: block; margin: .8rem 0; }
.login input { width: 100%; padding: .5rem; font-size: 1rem; border: 1px solid var(--line); border-radius: 6px; }
.login button, button.primaer { padding: .6rem 1.2rem; font-size: 1rem; background: var(--gruen); color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
.fehler { color: var(--prio1); }

/* Monatsansicht */
.monat-kopf { display: flex; align-items: center; gap: 1rem; }
.monat-kopf h1 { margin: 0; flex: 1; text-align: center; }
.pfeil { font-size: 2rem; text-decoration: none; padding: 0 .6rem; line-height: 1; }
.zusammenfassung { text-align: center; margin: .3rem 0 1rem; }

/* Grundriss */
.grundriss { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; margin-bottom: 1rem; overflow-x: auto; }
.grundriss svg { width: 100%; min-width: 640px; height: auto; display: block; }
.grundriss .flaeche { fill: #eef0ea; transition: fill .2s; }
.grundriss .flaeche.gruen { fill: #b9e2c1; }
.grundriss .flaeche.prio1 { fill: #ef8f8f; }
.grundriss .flaeche.prio2 { fill: #f3d27a; }
.grundriss .flaeche.prio3 { fill: #9ec8ee; }
.grundriss .flaeche:hover { filter: brightness(.94); }
.grundriss .label text { font: 600 15px system-ui, sans-serif; fill: #2a2f27; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.grundriss .label.leer text { font-weight: 400; fill: #8a9385; }
.grundriss .label text.zahl { font-size: 11px; font-weight: 400; fill: #3f463c; }
.grundriss .label.klein text { font-size: 11px; }
.grundriss .label.klein text.zahl { font-size: 9px; }

.ampel-leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ampel {
  padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
}
.ampel.leer { color: var(--muted); }
.ampel.gruen { background: var(--gruen-hell); border-color: var(--gruen); }
.ampel.prio1 { background: var(--prio1); border-color: var(--prio1); color: #fff; }
.ampel.prio2 { background: var(--prio2); border-color: var(--prio2); color: #fff; }
.ampel.prio3 { background: var(--prio3); border-color: var(--prio3); color: #fff; }
.ampel .anzahl { font-weight: 700; margin-left: .2rem; }

.bereich { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
.bereich h2 { margin: 0 0 .5rem; }
ul.aufgaben { list-style: none; margin: 0; padding: 0; }
.aufgabe { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--line); }
.aufgabe:first-child { border-top: 0; }
.aufgabe.erledigt .text { opacity: .55; text-decoration: line-through; }
.aufgabe.erledigt .text .klein, .aufgabe.erledigt .text .prio-tag, .aufgabe.erledigt .text .zeitfenster { text-decoration: none; }
.haken button { font-size: 1.5rem; line-height: 1; background: none; border: 0; cursor: pointer; padding: 0; color: var(--text); }
.aufgabe .text { flex: 1; }
.aufgabe .art { font-weight: 600; }
.aufgabe .produkt { margin-left: .4rem; font-size: .9rem; }

/* Priorität: farbiger Rand links + Text-Etikett (keine Punkte – die stehen in der Jahresmatrix für den Typ) */
.prio-tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .05rem .45rem; border-radius: 4px; vertical-align: middle; margin-left: .3rem; white-space: nowrap; }
.prio-tag.prio1 { background: var(--prio1-hell); color: var(--prio1); }
.prio-tag.prio2 { background: var(--prio2-hell); color: #9a6a00; }
.prio-tag.prio3 { background: var(--prio3-hell); color: var(--prio3); }
.aufgabe, .aufgabenliste li, table.matrix td.aufgabe-zelle { border-left: 4px solid transparent; padding-left: .6rem; }
.aufgabe.prio1, .aufgabenliste li.prio1, table.matrix td.aufgabe-zelle.prio1 { border-left-color: var(--prio1); }
.aufgabe.prio2, .aufgabenliste li.prio2, table.matrix td.aufgabe-zelle.prio2 { border-left-color: var(--prio2); }
.aufgabe.prio3, .aufgabenliste li.prio3, table.matrix td.aufgabe-zelle.prio3 { border-left-color: var(--prio3); }

/* Pflanzenliste */
.gruppe { border-bottom: 2px solid var(--line); padding-bottom: .2rem; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; }
.pflanzenliste { list-style: none; margin: 0; padding: 0; }
.pflanzenliste li { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: baseline; padding: .25rem 0; }
.pflanzenliste li a { font-weight: 500; }
.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.tag { font-size: .72rem; padding: .1rem .45rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag-aufgaben { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.tag-leer { background: var(--prio2-hell); border-color: var(--prio2); color: #9a6a00; }
.tag-vorschlag { background: var(--prio3-hell); border-color: var(--prio3); color: var(--prio3); }
.tag-geprueft { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }

/* Detailseiten */
.zurueck { margin: 0 0 .5rem; }
.botanisch { font-style: italic; font-size: 1rem; margin-left: .5rem; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 720px) { .zweispaltig { grid-template-columns: 1fr; } }
.pflege dt { font-weight: 600; margin-top: .6rem; }
.pflege dd { margin: .1rem 0 0; }
.pflanzenbild, .produktbild { max-width: 100%; border-radius: 10px; margin-bottom: 1rem; }
.standorte, .aufgabenliste, .journal, .quellen { list-style: none; padding: 0; margin: 0; }
.standorte li, .aufgabenliste li, .journal li { padding: .4rem 0; border-top: 1px solid var(--line); }
.standorte li:first-child, .aufgabenliste li:first-child, .journal li:first-child { border-top: 0; }
.inaktiv { opacity: .5; }
.monate { display: inline-flex; gap: 2px; margin-left: .4rem; vertical-align: middle; }
.monate .m { font-size: .6rem; padding: 0 .25rem; border-radius: 3px; background: var(--bg); color: var(--muted); }
.monate .m.x { background: var(--gruen); color: #fff; }
/* Zeitraum über mehrere Monate = ein zusammenhängender Balken */
.monate .m.x.von { border-radius: 3px 0 0 3px; margin-right: -2px; padding-right: .35rem; }
.monate .m.x.mitte { border-radius: 0; margin-right: -2px; padding-right: .35rem; }
.monate .m.x.bis { border-radius: 0 3px 3px 0; }
.zeitfenster { font-size: .78rem; padding: .05rem .4rem; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen); margin-left: .3rem; white-space: nowrap; }
.quellen a { word-break: break-all; font-size: .85rem; }

/* Tabellen */
.tabelle-scroll { overflow-x: auto; }
table.liste, table.matrix { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
table.liste th, table.liste td, table.matrix th, table.matrix td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
table.liste th, table.matrix th { background: var(--bg); font-size: .85rem; }
table.matrix td.monat, table.matrix th.monat { text-align: center; padding: .3rem .2rem; width: 2.4rem; font-size: .85rem; }
table.matrix .aktuell { background: #f2f5ee; }
table.matrix tr.gruppe-start td { border-top: 2px solid #b8c0b2; }
table.matrix tbody tr:first-child td { border-top: 0; }
table.matrix td.name a { text-decoration: none; }
table.matrix td.name a:hover { text-decoration: underline; }
table.matrix td.name { font-weight: 600; white-space: nowrap; }
table.matrix td.x { padding: .3rem 0; }
table.matrix td.x .balken { display: block; height: .7rem; background: currentColor; border-radius: 999px; margin: 0 .5rem; }
table.matrix td.x.von .balken { margin-right: 0; border-radius: 999px 0 0 999px; }
table.matrix td.x.mitte .balken { margin: 0; border-radius: 0; }
table.matrix td.x.bis .balken { margin-left: 0; border-radius: 0 999px 999px 0; }
table.matrix td.x.einzeln .balken { width: .7rem; margin: 0 auto; }
.typ-duengen { color: var(--gruen); }
.typ-schneiden { color: var(--prio1); }
.typ-umstellen { color: var(--prio3); }
.typ-pflege, .typ-sonstiges, .typ-pflanzen { color: var(--prio2); }
.legende { font-size: .85rem; color: var(--muted); }

/* Formulare */
.formular label { display: block; margin: .7rem 0; font-weight: 600; font-size: .9rem; }
.formular label small { font-weight: 400; }
.formular input[type=text], .formular input[type=url], .formular input[type=number], .formular input[type=date],
.formular select, .formular textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem; font: inherit; font-weight: 400;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.formular textarea { resize: vertical; }
.formular .haekchen { font-weight: 400; }
.formular .haekchen input { margin-right: .4rem; }
.formular.schmal { max-width: 520px; }
.formular .nebeneinander { display: flex; gap: 1rem; }
.formular .nebeneinander label { flex: 1; }
.formular fieldset { border: 1px solid var(--line); border-radius: 10px; padding: .6rem 1rem 1rem; margin: .7rem 0; }
.formular legend { font-weight: 600; padding: 0 .4rem; }
.zr-zeile { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.zr-zeile select { margin-top: 0; }
.zr-weg { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1rem; }
.aktionen { display: flex; gap: .6rem; align-items: center; margin-top: 1.2rem; }
.knopf {
  display: inline-block; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; line-height: 1.2;
}
.knopf:hover { background: var(--bg); }
.knopf.primaer, button.primaer { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.knopf.gefahr { color: var(--prio1); border-color: var(--prio1-hell); background: var(--prio1-hell); }
.knopf.klein { font-size: .8rem; padding: .2rem .6rem; margin-left: .5rem; vertical-align: middle; }
form.inline { display: inline; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kopfzeile h1 { margin: 0; }
.knoepfe { display: flex; gap: .5rem; }
.zeilen-aktionen { display: block; margin-top: .2rem; font-size: .8rem; }
.zeilen-aktionen a { margin-right: .6rem; }
.zeilen-aktionen .knopf { padding: 0; border: 0; background: none; font-size: .8rem; color: var(--prio1); text-decoration: underline; }
.flash { background: var(--gruen-hell); border: 1px solid var(--gruen); border-radius: 8px; padding: .5rem .9rem; margin: 0 0 1rem; }

/* Gießliste */
.karte-offen { border-style: dashed; }
.giessen .pflanzenliste li { display: block; }
.giessen .giess-detail { width: 100%; }