/* Kräutergarten Wiesenfeld – Design im Stil der Infotafeln */
:root{
color-scheme: light; /* Eingabefelder, Auswahllisten und Scrollbalken bleiben hell */
--gruen-tief:#1d3b23;
--gruen:#2f5c34;
--gruen-hell:#7d9a52;
--gruen-blass:#eef2e6;
--papier:#fbfaf5;
--karte:#ffffff;
--linie:#e2e5d8;
--text:#25301f;
--text-leise:#5f6b58;
--warn:#b23b2e;
--warn-bg:#fdf1ef;
--info:#2f5c34;
--radius:16px;
--schatten:0 1px 2px rgba(29,59,35,.06), 0 6px 20px rgba(29,59,35,.06);
--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--papier); color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
padding-bottom:calc(74px + var(--safe-b)/2);
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif; font-weight:700; line-height:1.2; margin:0}
button{font:inherit; color:inherit}
a{color:var(--gruen)}
/* ---------- Kopfzeile: wie der Tafelkopf – Papier, grüne Zeichnung, feine Linie ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--papier); color:var(--gruen-tief);
padding-top:max(calc(env(safe-area-inset-top,0px) - 12px), min(env(safe-area-inset-top,0px), 20px)); box-shadow:0 1px 0 rgba(29,59,35,.10), 0 6px 18px rgba(29,59,35,.05)}
.topbar::after{content:""; display:block; height:3px; max-width:900px; margin:0 auto;
background:linear-gradient(90deg, var(--gruen-tief) 0%, var(--gruen-hell) 42%, rgba(125,154,82,0) 100%)}
.topbar-inner{display:flex; align-items:center; gap:11px; padding:3px 16px 6px; max-width:900px; margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; flex:1; min-width:0}
/* Strichzeichnung ohne Kasten: Weiß verschmilzt per multiply mit dem Papierton */
.brand-mark{width:64px; height:64px; flex:none; display:grid; place-items:center}
.brand-mark img{width:100%; height:100%; object-fit:contain; display:block; mix-blend-mode:multiply}
/* Liniensymbole im Fließtext */
.ic{width:15px; height:15px; flex:none; vertical-align:-2.5px; margin-right:6px}
.lbl .ic{color:var(--gruen-hell)}
.card h2 .ic{width:17px; height:17px; color:var(--gruen-hell); vertical-align:-3px}
.warnbox h2 .ic{color:var(--warn)}
.task-sym{display:grid; place-items:center; width:26px; height:26px; flex:none}
.task-sym .ic{width:22px; height:22px; margin:0}
.cal td:first-child .ic{width:13px; height:13px; margin-right:4px; color:var(--gruen-hell)}
.plant-row .meta .ic{width:13px; height:13px; margin-right:3px; margin-left:6px}
.plant-row .meta .ic:first-child{margin-left:0}
.brand-name{font-family:Georgia,serif; font-size:17px; font-weight:700; letter-spacing:.1px;
color:var(--gruen-tief); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-claim{font-size:12px; color:var(--gruen); font-style:italic; font-family:Georgia,serif}
.icon-btn{background:var(--gruen-blass); border:1px solid #dfe6d2; color:var(--gruen); width:42px; height:42px;
border-radius:12px; display:grid; place-items:center; cursor:pointer; flex:none}
.icon-btn svg{width:20px; height:20px}
.icon-btn:active{transform:scale(.94)}
/* ---------- Layout ---------- */
main{max-width:900px; margin:0 auto; padding:16px 16px 8px; outline:none}
.stack{display:flex; flex-direction:column; gap:14px}
.page-head{margin-bottom:14px}
.page-head h1{font-size:26px; color:var(--gruen-tief)}
.page-head p{margin:6px 0 0; color:var(--text-leise); font-size:14px}
.card{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); overflow:hidden}
.card-pad{padding:16px}
.card h2{font-size:17px; color:var(--gruen-tief); display:flex; align-items:center; gap:8px}
.card h3{font-size:14px; color:var(--gruen-tief); margin:14px 0 4px; font-family:inherit; font-weight:700}
.card h3:first-child{margin-top:0}
.leaf{width:17px; height:17px; flex:none; color:var(--gruen-hell)}
ul.dots{margin:6px 0 0; padding-left:18px}
ul.dots li{margin:3px 0}
ul.plain{list-style:none; margin:6px 0 0; padding:0}
ul.plain li{position:relative; padding-left:20px; margin:5px 0}
ul.plain li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
border-radius:50%; background:var(--gruen-hell)}
/* ---------- Monats-Auftakt ---------- */
.monat-hero{position:relative; overflow:hidden; margin-bottom:14px; padding:16px 18px 18px;
border-radius:var(--radius); border:1px solid var(--linie); box-shadow:var(--schatten);
background:
radial-gradient(120% 90% at 100% 0%, rgba(125,154,82,.16) 0%, rgba(125,154,82,0) 60%),
linear-gradient(180deg, #ffffff 0%, var(--papier) 100%)}
.monat-hero::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
background:linear-gradient(180deg, var(--gruen-tief), var(--gruen-hell))}
.mh-oben{margin-bottom:6px}
.mh-tag{display:inline-block; background:var(--gruen-tief); color:#fff; border-radius:999px;
padding:3px 11px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase}
.mh-tag.ruhig{background:var(--gruen-blass); color:var(--gruen)}
.monat-hero h1{font-size:34px; color:var(--gruen-tief); line-height:1}
.mh-satz{margin:7px 0 0; font-size:15px; color:var(--text-leise); max-width:34em}
.mh-zahlen{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.mh-zahl{display:inline-flex; align-items:center; gap:5px; background:var(--karte);
border:1px solid var(--linie); border-radius:999px; padding:6px 12px 6px 9px;
font-size:13px; font-weight:600; color:var(--text-leise)}
.mh-zahl b{font-size:15px; color:var(--gruen-tief); font-family:Georgia,serif}
.mh-ic{display:inline-flex; color:var(--z,var(--gruen-hell))}
.mh-ic .ic{width:17px; height:17px; margin:0}
/* ---------- Blühstreifen ---------- */
.bluehband{margin-bottom:16px}
.bluehband h2{font-size:15px; color:var(--gruen-tief); display:flex; align-items:center; gap:7px;
font-family:Georgia,serif; margin-bottom:9px}
.bb-n{background:var(--gruen-blass); color:var(--gruen); border-radius:999px; padding:1px 8px;
font-size:11.5px; font-family:-apple-system,sans-serif}
.bb-lauf{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scroll-padding-left:16px;
margin:0 -16px; padding:2px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.bb-lauf::-webkit-scrollbar{display:none}
.bb-karte{flex:none; width:108px; scroll-snap-align:start; background:none; border:0; padding:0; cursor:pointer; text-align:left}
.bb-bild{display:grid; place-items:center; width:108px; height:80px; border-radius:13px; overflow:hidden;
background:var(--gruen-blass); border:1px solid var(--linie); box-shadow:var(--schatten)}
.bb-bild img{width:100%; height:100%; object-fit:cover; display:block}
.bb-name{display:block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--gruen-tief); line-height:1.25}
/* ---------- Monatsansicht ---------- */
.month-switch{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.month-switch select{flex:1; appearance:none; background:var(--karte); border:1px solid var(--linie);
border-radius:12px; padding:11px 14px; font-size:16px; font-weight:600; color:var(--gruen-tief)}
.month-nav{background:var(--karte); border:1px solid var(--linie); border-radius:12px; width:44px; height:44px;
display:grid; place-items:center; cursor:pointer}
.month-nav svg{width:18px; height:18px}
.task-card{border-left:5px solid var(--akzent,var(--gruen-hell))}
.task-head{display:flex; align-items:center; gap:10px; padding:14px 16px 0}
.task-head h2{flex:1}
.badge{background:var(--gruen-blass); color:var(--gruen); border-radius:999px; padding:3px 10px;
font-size:12px; font-weight:700; flex:none}
.task-hint{margin:8px 16px 0; font-size:14px; color:var(--text-leise)}
.chiprow{display:flex; flex-wrap:wrap; gap:7px; padding:12px 16px 16px}
.chip{background:var(--gruen-blass); border:1px solid #dfe6d2; color:var(--gruen-tief);
border-radius:999px; padding:11px 16px; font-size:15px; font-weight:600; cursor:pointer; min-height:46px}
.chip:active{background:#e2e9d5}
.chip .nr{color:var(--gruen); font-weight:700; margin-right:4px}
.empty{padding:22px 16px; text-align:center; color:var(--text-leise); font-size:14px}
/* ---------- Suche & Liste ---------- */
.searchbar{display:flex; gap:8px; margin-bottom:12px}
.searchbar input{flex:1; border:1px solid var(--linie); background:var(--karte); border-radius:12px;
padding:12px 14px; font-size:16px; -webkit-appearance:none}
.searchbar input:focus{outline:2px solid var(--gruen-hell); outline-offset:-1px}
.filterrow{display:flex; flex-wrap:wrap; gap:7px; padding-bottom:14px}
.fchip{border:1px solid var(--linie); background:var(--karte); border-radius:999px;
padding:11px 16px; font-size:14.5px; font-weight:600; color:var(--gruen); cursor:pointer; min-height:46px}
.fchip[aria-pressed="true"]{background:var(--gruen-tief); border-color:var(--gruen-tief); color:#fff}
/* ---------- Pflanzenkacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:620px){ .kacheln{grid-template-columns:repeat(3,1fr)} }
.kachel{display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer;
background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten)}
.kachel:active{transform:scale(.985)}
.kbild{position:relative; display:grid; place-items:center; aspect-ratio:4/3; background:var(--gruen-blass); overflow:hidden}
.kbild img{width:100%; height:100%; object-fit:cover; display:block}
.kdot{width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,.7)}
.knr{position:absolute; top:7px; left:7px; background:rgba(29,59,35,.9); color:#fff; font-size:19px;
font-family:Georgia,serif; font-weight:700; padding:3px 11px; border-radius:999px; letter-spacing:.3px}
.ktext{padding:9px 11px 11px; display:flex; flex-direction:column; gap:1px; min-width:0}
.kname{font-family:Georgia,serif; font-size:15.5px; font-weight:700; color:var(--gruen-tief); line-height:1.22}
.klat{font-style:italic; font-size:12px; color:var(--text-leise); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kmeta{display:flex; gap:2px; margin-top:5px; color:var(--gruen-hell)}
.kmeta .ic{width:15px; height:15px; margin:0}
.plant-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--karte);
border:1px solid var(--linie); border-radius:var(--radius); padding:12px; cursor:pointer; box-shadow:var(--schatten)}
.plant-row:active{background:#f6f7f1}
.thumb{width:54px; height:54px; border-radius:12px; flex:none; display:grid; place-items:center;
background:var(--gruen-blass); position:relative; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover}
.thumb .dot{width:16px; height:16px; border-radius:50%; border:2px solid rgba(0,0,0,.12)}
.thumb .nrbadge{position:absolute; bottom:0; right:0; background:var(--gruen-tief); color:#fff;
font-size:10px; font-weight:700; padding:1px 5px; border-top-left-radius:7px}
.plant-row .info{flex:1; min-width:0}
.plant-row .name{font-weight:700; color:var(--gruen-tief); font-size:16px}
.plant-row .lat{font-style:italic; color:var(--text-leise); font-size:13px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis}
.plant-row .meta{font-size:12.5px; color:var(--gruen); font-weight:600; margin-top:2px}
.chev{width:18px; height:18px; color:#c3cbb6; flex:none}
/* ---------- Detail ---------- */
.back{display:inline-flex; align-items:center; gap:6px; background:var(--karte); border:1px solid var(--linie);
color:var(--gruen); font-weight:600; font-size:15px; padding:0 15px; min-height:46px; border-radius:12px;
cursor:pointer; margin-bottom:10px}
.back svg{width:17px; height:17px}
.hero{border-radius:var(--radius); overflow:hidden; border:1px solid var(--linie); box-shadow:var(--schatten);
background:var(--gruen-blass)}
.hero .img{aspect-ratio:16/10; display:grid; place-items:center; position:relative}
.hero .img img{width:100%; height:100%; object-fit:cover}
.hero .ph{text-align:center; color:var(--gruen); padding:20px}
.hero .ph svg{width:56px; height:56px; opacity:.5}
.hero .ph div{font-size:12.5px; margin-top:8px; opacity:.75}
.hero .nr{position:absolute; top:10px; right:10px; background:var(--gruen-tief); color:#fff;
border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700}
.hero .body{padding:16px; background:var(--karte)}
.hero h1{font-size:28px; color:var(--gruen-tief)}
.hero .lat{font-family:Georgia,serif; font-style:italic; color:var(--gruen); font-size:17px; margin-top:2px}
.hero .kurz{margin:10px 0 0; font-size:15px}
.metagrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px;
background:var(--linie); border-top:1px solid var(--linie)}
.metagrid div{background:var(--karte); padding:10px 14px}
.metagrid .k{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-leise)}
.metagrid .v{font-size:14px; font-weight:600; color:var(--gruen-tief)}
.warnbox{background:var(--warn-bg); border:1px solid #f2d8d3; border-radius:var(--radius); padding:14px 16px}
.warnbox h2{color:var(--warn); font-size:16px; display:flex; gap:8px; align-items:center}
.warnbox ul.plain li::before{background:var(--warn)}
.tafel{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.subitem{margin:10px 0}
.subitem .lbl{font-size:14px; letter-spacing:.1px; color:var(--gruen); font-weight:700; margin-bottom:2px}
/* Kalender-Tabelle */
.cal{width:100%; border-collapse:collapse; font-size:12px}
.cal th,.cal td{border:1px solid var(--linie); padding:5px 2px; text-align:center}
.cal th:first-child,.cal td:first-child{text-align:left; padding-left:8px; white-space:nowrap; font-weight:600}
.cal thead th{background:var(--gruen-blass); color:var(--gruen-tief); font-size:11px}
.cal td.on{background:var(--gruen)}
.cal td.on::after{content:"✓"; color:#fff; font-size:11px; font-weight:700}
.cal td.bedarf{background:#f0f0e2; font-size:9px; color:var(--text-leise)}
.cal td.bedarf::after{content:"bei Bedarf"}
.cal .now{outline:2px solid var(--gruen-tief); outline-offset:-2px}
.calwrap{overflow-x:auto; margin:0 -16px; padding:0 16px}
/* ---------- Gartenplan ---------- */
.plan{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
padding:12px; box-shadow:var(--schatten)}
.plan svg{width:100%; height:auto; display:block}
.beet{cursor:pointer}
.beet rect{fill:var(--gruen-blass); stroke:var(--gruen-hell); stroke-width:.5; rx:2}
.beet:active rect{fill:#e2e9d5}
.beet text{font-size:3.1px; fill:var(--gruen-tief); font-weight:700}
.beet text.sub{font-size:2.5px; fill:var(--text-leise); font-weight:400}
.plantdot{cursor:pointer}
.plantdot circle{stroke:#fff; stroke-width:.5}
.plantdot text{font-size:2.6px; fill:var(--text); text-anchor:middle}
/* ---------- Formulare / Beobachtungen ---------- */
.field{margin-bottom:12px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--gruen-tief); margin-bottom:5px}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--linie); border-radius:12px;
padding:11px 13px; font-size:16px; background:var(--karte); font-family:inherit; -webkit-appearance:none}
.field textarea{min-height:96px; resize:vertical}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
background:var(--gruen-tief); color:#fff; border:0; border-radius:13px; padding:14px 18px;
font-size:16px; font-weight:700; cursor:pointer}
.btn:active{opacity:.88}
.btn.sec{background:var(--karte); color:var(--gruen-tief); border:1px solid var(--linie)}
.btn.wa{background:var(--karte); color:#128C4A; border:2px solid #25D366}
.btn svg{width:19px; height:19px}
.btnrow{display:flex; gap:9px; margin-top:12px}
.btnrow .btn{flex:1}
.note{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); padding:13px 15px;
box-shadow:var(--schatten)}
.note .nhead{display:flex; align-items:baseline; gap:8px; margin-bottom:5px}
.note .ntyp{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
background:var(--gruen-blass); color:var(--gruen); border-radius:5px; padding:2px 7px}
.note .ndate{font-size:12px; color:var(--text-leise); margin-left:auto}
.note .nplant{font-weight:700; color:var(--gruen-tief); font-size:14.5px}
.note .ntext{font-size:14.5px; margin:5px 0 0; white-space:pre-wrap}
.note .nfoot{display:flex; gap:14px; margin-top:9px}
.note .nfoot button{background:none; border:0; color:var(--gruen); font-size:14.5px; font-weight:600;
cursor:pointer; padding:10px 4px; min-height:44px}
.note .nfoot button.del{margin-left:auto; color:var(--text-leise)}
.note .nfoot button.del{color:var(--warn)}
/* ---------- Tabbar ---------- */
.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:40; display:flex;
background:rgba(251,250,245,.94); backdrop-filter:blur(12px); border-top:1px solid var(--linie);
padding-bottom:0}
.tab{flex:1; background:none; border:0; padding:9px 2px calc(4px + var(--safe-b)/2); display:flex; flex-direction:column;
align-items:center; gap:3px; color:var(--text-leise); cursor:pointer; font-size:11px; font-weight:600}
.tab svg{width:28px; height:28px}
.tab[aria-current="page"]{color:var(--gruen-tief)}
.hidden{display:none !important}
.spacer{height:10px}
.tip{font-size:13px; color:var(--text-leise); background:var(--gruen-blass); border-radius:12px; padding:11px 14px}
/* Dunkelmodus vorerst abgeschaltet – die App bleibt immer hell.
Zum Reaktivieren einfach diesen Kommentar wieder entfernen.
@media (prefers-color-scheme: dark){
:root{
--papier:#151a14; --karte:#1e241d; --linie:#2f382d; --text:#e6ebe2; --text-leise:#a2ac9c;
--gruen-blass:#26301f; --gruen:#8fb069; --gruen-tief:#c3d9a8; --warn-bg:#2c1c19;
}
.topbar{background:#0f150f}
.brand-name,.topbar{color:#e6ebe2}
.cal td.on{background:var(--gruen-hell)}
.cal td.bedarf{background:#262d20}
.btn{background:#7d9a52; color:#0f150f}
.beet rect{fill:#26301f; stroke:#7d9a52}
.tabbar{background:rgba(21,26,20,.94)}
}
*/
/* ---------- Aufgabenzeilen in der Monatsansicht ---------- */
.aufgaben{padding:4px 0 6px}
.aufgabe{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
padding:11px 16px; border-top:1px solid var(--linie)}
.aufgabe:first-child{border-top:0}
.aufgabe:active{background:var(--gruen-blass)}
.a-kopf{display:block; font-size:16px; font-weight:700; color:var(--gruen-tief); font-family:Georgia,serif}
.a-nr{display:inline-block; background:var(--gruen-blass); color:var(--gruen); border-radius:7px;
padding:1px 8px; font-size:13px; font-family:-apple-system,sans-serif; margin-right:7px}
.a-satz{display:block; font-size:14.5px; color:var(--text-leise); margin-top:3px}
/* ---------- Rückmeldung im Formular ---------- */
.formmeldung{margin:0 0 10px; padding:11px 14px; border-radius:12px; font-size:14.5px; font-weight:600}
.formmeldung.gut{background:var(--gruen-blass); color:var(--gruen)}
.formmeldung.fehler{background:var(--warn-bg); color:var(--warn)}
/* ---------- Hinweis, wenn ein anderer Monat gewählt ist ---------- */
.monat-zurueck{display:block; width:100%; background:var(--gruen-tief); color:#fff; border:0;
border-radius:13px; padding:14px; font-size:15px; font-weight:700; cursor:pointer; margin-bottom:12px}
/* ---------- Sortierung ---------- */
.sortleiste{display:flex; align-items:center; gap:7px; margin-bottom:12px; flex-wrap:wrap}
.sl-text{font-size:13.5px; color:var(--text-leise); margin-right:2px}
.sl-btn{border:1px solid var(--linie); background:var(--karte); color:var(--gruen); border-radius:999px;
padding:9px 15px; font-size:14.5px; font-weight:600; cursor:pointer; min-height:42px}
.sl-btn[aria-pressed="true"]{background:var(--gruen-tief); border-color:var(--gruen-tief); color:#fff}
/* ---------- Gießdienst ---------- */
.dienstkarte{position:relative; overflow:hidden; margin-bottom:14px; padding:15px 17px 17px;
border-radius:var(--radius); border:1px solid var(--linie); box-shadow:var(--schatten);
background:linear-gradient(180deg, #ffffff 0%, #f4f8ee 100%)}
.dienstkarte::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#4a83c4}
.dienstkarte.ist-meiner{background:linear-gradient(180deg, #fffdf2 0%, #f8f4e2 100%); border-color:#e6dcb8}
.dienstkarte.ist-meiner::before{background:var(--gruen-tief)}
.dk-kopf{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
letter-spacing:.5px; text-transform:uppercase; color:var(--gruen)}
.dk-kopf .ic{width:17px; height:17px; margin:0; color:#4a83c4}
.dienstkarte.ist-meiner .dk-kopf .ic{color:var(--gruen-tief)}
.dk-namen{font-family:Georgia,serif; font-size:24px; font-weight:700; color:var(--gruen-tief); margin-top:5px; line-height:1.15}
.dk-zeit{font-size:14.5px; color:var(--text-leise); margin-top:2px}
.dk-liste{list-style:none; margin:12px 0 0; padding:0}
.dk-liste li{position:relative; padding-left:20px; margin:5px 0; font-size:14.5px}
.dk-liste li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px;
border-radius:50%; background:var(--gruen-hell)}
.dk-aktionen{display:flex; gap:9px; margin-top:14px}
.dk-btn{flex:1; min-height:46px; border-radius:12px; border:1px solid var(--linie); background:var(--karte);
color:var(--gruen-tief); font-size:15px; font-weight:700; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:7px}
.dk-btn.wa{background:var(--karte); border-color:#25D366; color:#128C4A}
.dk-btn svg{width:18px; height:18px}
.dienstzeile{padding:13px 16px; border-top:1px solid var(--linie)}
.dienstzeile:first-child{border-top:0}
.dienstzeile.jetzt{background:var(--gruen-blass)}
.dienstzeile.meiner{box-shadow:inset 4px 0 0 var(--gruen-tief)}
.dz-zeit{font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--gruen)}
.dz-namen{font-family:Georgia,serif; font-size:17px; font-weight:700; color:var(--gruen-tief); margin-top:2px}
.dz-du{display:inline-block; background:var(--gruen-tief); color:#fff; border-radius:999px;
padding:1px 9px; font-size:12px; font-family:-apple-system,sans-serif; vertical-align:2px}
.dz-datum{font-size:13.5px; color:var(--text-leise); margin-top:1px}
/* ---------- Vorläufiger Dienstplan ---------- */
.dk-fahne{background:#e8dfae; color:#6b5a17; border-radius:999px; padding:2px 9px;
font-size:10.5px; letter-spacing:.4px; margin-left:auto}
.dk-kopf{width:100%}
.dk-vorl{margin:11px 0 0; font-size:13.5px; color:var(--text-leise); font-style:italic}
.dienstkarte.pause::before{background:#8fa6bd}
.dienstkarte.pause{background:linear-gradient(180deg,#ffffff 0%,#f2f5f8 100%)}
.dienstkarte.pause .dk-kopf .ic{color:#6d87a3}
.vorlaeufig{display:flex; gap:10px; align-items:flex-start; background:#fdf9ec; border:1px solid #ecdfb8;
border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; font-size:14.5px; line-height:1.45}
.vorlaeufig .ic{width:19px; height:19px; margin:2px 0 0; color:#8a7420; flex:none}
.tip .ic{color:var(--gruen); vertical-align:-3px}
/* ---------- Sechs Reiter: etwas kompakter ---------- */
.tab{padding:6px 1px calc(3px + var(--safe-b)/2); font-size:9.5px; gap:2px}
.tab svg{width:23px; height:23px}
/* ---------- Rezepte ---------- */
.rezeptkarte{display:block; width:100%; text-align:left; background:var(--karte); cursor:pointer;
border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten); padding:14px 16px}
.rezeptkarte:active{background:#f6f7f1}
.rk-kopf{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.rk-art{background:var(--gruen-blass); color:var(--gruen); border-radius:999px; padding:2px 10px;
font-size:11.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase}
.rk-eigen{background:#f2ead2; color:#7a6420; border-radius:999px; padding:2px 10px;
font-size:11.5px; font-weight:700}
.rk-zeit{font-size:12.5px; color:var(--text-leise); margin-left:auto}
.rk-titel{display:block; font-family:Georgia,serif; font-size:19px; font-weight:700;
color:var(--gruen-tief); margin-top:7px; line-height:1.2}
.rk-kurz{display:block; font-size:14.5px; color:var(--text); margin-top:4px}
.rk-pflanzen{display:block; font-size:13px; color:var(--gruen); margin-top:7px; font-weight:600}
ol.schritte{margin:10px 0 0; padding-left:24px}
ol.schritte li{margin:7px 0; font-size:15px; padding-left:3px}
ol.schritte li::marker{color:var(--gruen); font-weight:700}
/* ---------- Heilkunde ---------- */
.heilliste{margin-top:10px; border-top:1px solid var(--linie)}
.heilzeile{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
padding:12px 2px; border-bottom:1px solid var(--linie)}
.heilzeile:active{background:var(--gruen-blass)}
.hz-name{display:block; font-family:Georgia,serif; font-size:17px; font-weight:700; color:var(--gruen-tief)}
.hz-teil{display:block; font-size:13.5px; color:var(--text-leise); margin-top:1px}
.eignung{display:inline-block; margin-top:6px; border-radius:999px; padding:3px 11px;
font-size:12.5px; font-weight:700}
.eignung.gut{background:var(--gruen-blass); color:var(--gruen)}
.eignung.mittel{background:#f6efdc; color:#7a6420}
.eignung.nein{background:var(--warn-bg); color:var(--warn)}
.zub{border-top:1px solid var(--linie); margin-top:12px; padding-top:10px}
.zub summary{cursor:pointer; font-family:Georgia,serif; font-size:16.5px; font-weight:700;
color:var(--gruen-tief); list-style:none; padding:4px 0; min-height:44px}
.zub summary::-webkit-details-marker{display:none}
.zub summary::after{content:"＋"; float:right; color:var(--gruen); font-weight:400; font-size:19px}
.zub[open] summary::after{content:"−"}
.zub summary span{display:block; font-family:-apple-system,sans-serif; font-size:14px;
font-weight:400; color:var(--text-leise); margin-top:2px; max-width:88%}
.zub-inhalt{padding-bottom:6px}
.zub-halt{font-size:14px; margin:10px 0 0; color:var(--text-leise)}
.zub-hinweis{font-size:14px; margin:6px 0 0; color:var(--warn); background:var(--warn-bg);
border-radius:10px; padding:9px 12px}
/* ---------- Giftpflanze: deutlicher als ein normaler Hinweis ---------- */
.warnbox.gift{border-width:2px; border-color:#e0b3ab; background:#fdece9}
.warnbox.gift h2{font-size:17.5px}
/* ---------- Lageplan der vier Felder ---------- */
/* Fotorealistischer Gartenplan: Bild + Overlay mit gleich großen Klickfeldern */
.plan.foto{position:relative; padding:0; background:none; border:none; box-shadow:none; margin:0 -16px}
.plan-foto{width:100%; display:block; border-radius:0}
.plan-overlay{position:absolute; inset:0}
/* Transparente Klickfläche über dem ganzen Beet */
.feldhit{position:absolute; transform:translate(-50%,-50%); width:34%; height:22%;
background:none; border:none; padding:0; margin:0; cursor:pointer; border-radius:14px;
-webkit-tap-highlight-color:transparent; transition:background .12s}
.feldhit:active{background:color-mix(in srgb, var(--f) 16%, transparent)}
/* Beschriftung: Text auf weichem Pergament-Schimmer, kein Rahmen (wirkt aufgemalt) */
.fb-plaque{position:absolute; transform:translate(-50%,-50%); box-sizing:border-box; pointer-events:none;
width:30%; padding:8px 6px 9px; text-align:center; font-family:Georgia,"Times New Roman",serif;
background:radial-gradient(ellipse 68% 64% at 50% 50%, rgba(247,241,226,0.93) 0%,
rgba(247,241,226,0.80) 44%, rgba(247,241,226,0) 80%);
text-shadow:0 1px 1px rgba(255,254,248,0.85)}
.fb-nr{display:block; font-weight:700; color:var(--f); line-height:1; font-size:clamp(16px,4.6vw,22px)}
.fb-name{display:block; font-weight:600; color:#3A2F1E; line-height:1.2; margin-top:3px;
white-space:nowrap; font-size:clamp(10px,3vw,13px)}
.fb-zahl{display:block; font-style:italic; color:#6B5D47; margin-top:4px; font-size:clamp(9px,2.6vw,11px)}
.plan-quelle{font-size:12px; color:var(--text-leise); margin:8px 2px 0; font-style:italic}
.feldkarte{border-left:5px solid var(--f)}
.fk-kopf{display:flex; align-items:center; gap:9px}
.fk-nr{background:var(--f); color:#fff; border-radius:999px; padding:3px 12px; font-size:12px;
font-weight:700; letter-spacing:.4px; text-transform:uppercase}
.fk-zahl{font-size:13px; color:var(--text-leise); margin-left:auto}
.feldliste{margin-top:14px; border-top:1px solid var(--linie)}
.feldzeile{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none;
border:0; border-bottom:1px solid var(--linie); padding:11px 2px; cursor:pointer; min-height:48px}
.feldzeile:active{background:var(--gruen-blass)}
.fz-nr{flex:none; width:32px; height:32px; border-radius:9px; background:var(--gruen-blass);
color:var(--gruen-tief); font-family:Georgia,serif; font-weight:700; font-size:15px;
display:grid; place-items:center}
.feldzeile.ohne .fz-nr{background:#f1f1ec; color:var(--text-leise)}
.fz-name{flex:1; font-size:16px; font-weight:600; color:var(--gruen-tief)}
.feldzeile.ohne .fz-name{font-weight:500; color:var(--text)}
.fz-gift{display:inline-block; background:var(--warn-bg); color:var(--warn); border-radius:999px;
padding:1px 8px; font-size:11.5px; font-weight:700; vertical-align:1px; margin-left:4px}
.fz-offen{font-size:12.5px; color:var(--text-leise); flex:none}
/* ---------- Dienstplan: Sonderaufgabe und Orga ---------- */
.dk-sonder{margin:11px 0 0; font-size:14.5px; background:#fdf6e6; border-radius:11px;
padding:10px 13px; color:#7a5c12; font-weight:600}
.dk-sonder .ic{width:16px; height:16px; color:#b8860b}
.dz-sonder{font-size:13.5px; color:#7a5c12; background:#fdf6e6; border-radius:9px;
padding:6px 10px; margin-top:6px; display:inline-block}
.orga-chip{background:var(--gruen-blass); border:1px solid #dfe6d2; border-radius:12px;
padding:8px 13px; font-size:14.5px; font-weight:600; color:var(--gruen-tief)}
.orga-chip span{display:block; font-size:12px; font-weight:400; color:var(--gruen)}
/* ---------- Pflanzen ohne eigene Tafel ---------- */
.kachel.kurz{background:#fcfcfa}
.kachel.kurz .kbild{background:#f2f3ee}
.kachel.kurz .klat{font-style:normal; color:var(--text-leise)}
.kfeld{position:absolute; bottom:7px; right:7px; background:rgba(255,255,255,.9);
color:var(--gruen); font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px}
/* ---------- Recherchierte Einträge kenntlich machen ---------- */
.recherchiert{margin:12px 0 0; padding:10px 13px; background:#fdf9ec; border:1px solid #ecdfb8;
border-radius:11px; font-size:13.5px; color:#7a6420; line-height:1.4}
.recherchiert .ic{width:16px; height:16px; color:#8a7420}
.kquelle{display:inline-block; margin-top:5px; background:#fdf9ec; border:1px solid #ecdfb8;
color:#7a6420; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:700}
/* ---------- Startseite ---------- */
.tab{padding:7px 2px calc(4px + var(--safe-b)/2); font-size:11px; gap:3px}
.tab svg{width:26px; height:26px}
.start-kopf{margin-bottom:14px}
.start-kopf h1{font-size:28px; color:var(--gruen-tief)}
.start-kopf p{margin:3px 0 0; font-size:14.5px; color:var(--text-leise)}
.start-oben{display:flex; flex-direction:column; gap:12px}
@media (min-width:680px){ .start-oben{flex-direction:row} .start-oben>*{flex:1} }
.startkarte{position:relative; overflow:hidden; padding:15px 17px 17px; border-radius:var(--radius);
border:1px solid var(--linie); box-shadow:var(--schatten); background:var(--karte)}
.startkarte::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--gruen-hell)}
.startkarte.dienst{background:linear-gradient(180deg,#fff 0%,#f4f8ee 100%)}
.startkarte.dienst::before{background:#4a83c4}
.startkarte.termin{background:linear-gradient(180deg,#fff 0%,#fdf8e2 100%)}
.startkarte.termin::before{background:#f2c230}
.startkarte.pause::before{background:#8fa6bd}
.sk-kopf{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
letter-spacing:.5px; text-transform:uppercase; color:var(--gruen)}
.sk-kopf .ic{width:17px; height:17px; margin:0}
.sk-bald{margin-left:auto; text-transform:none; letter-spacing:0; font-size:12.5px;
background:var(--gruen-blass); color:var(--gruen); border-radius:999px; padding:2px 10px}
.sk-gross{font-family:Georgia,serif; font-size:22px; font-weight:700; color:var(--gruen-tief);
margin-top:6px; line-height:1.15}
.sk-zeile{font-size:14.5px; color:var(--text-leise); margin-top:2px}
.sk-zeile.leise{font-size:13.5px}
.sk-liste{list-style:none; margin:11px 0 0; padding:0}
.sk-liste li{position:relative; padding-left:19px; margin:4px 0; font-size:14.5px}
.sk-liste li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px;
border-radius:50%; background:var(--gruen-hell)}
/* Termine */
.terminkarte{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); padding:15px 17px 17px; position:relative; overflow:hidden}
.terminkarte::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#f2c230}
.tk-kopf{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tk-art{background:#faeeb9; color:#8a7208; border-radius:999px; padding:2px 10px;
font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px}
.tk-bald{font-size:12.5px; color:var(--text-leise); margin-left:auto}
.tk-titel{font-family:Georgia,serif; font-size:20px; font-weight:700; color:var(--gruen-tief); margin-top:7px}
.tk-zeit{font-size:15px; color:var(--gruen); font-weight:600; margin-top:2px}
.tk-ort{font-size:14px; color:var(--text-leise); margin-top:1px}
.tk-text{margin:9px 0 0; font-size:14.5px}
.tk-mit{margin:9px 0 0; font-size:14px; background:var(--gruen-blass); border-radius:10px; padding:8px 12px}
.tk-aktionen{display:flex; gap:9px; margin-top:14px; flex-wrap:wrap}
.tk-aktionen .dk-btn{flex:1; min-width:140px}
/* Ausprobieren */
.probier{display:flex; gap:0; align-items:stretch; width:100%; text-align:left; cursor:pointer;
background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); overflow:hidden; flex-wrap:wrap}
.pr-kopf{flex-basis:100%; display:flex; align-items:center; gap:7px; padding:13px 16px 0;
font-family:Georgia,serif; font-size:15px; font-weight:700; color:var(--gruen-tief)}
.pr-bild{width:110px; min-height:96px; margin:12px 0 14px 16px; border-radius:12px; overflow:hidden;
background:var(--gruen-blass); flex:none}
.pr-bild img{width:100%; height:100%; object-fit:cover; display:block}
.pr-text{flex:1; min-width:0; padding:12px 16px 14px}
.pr-titel{font-family:Georgia,serif; font-size:17px; font-weight:700; color:var(--gruen-tief)}
.pr-text p{margin:5px 0 0; font-size:14px; color:var(--text-leise)}
/* Schnellzugriff */
.schnell{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.schnell-k{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); padding:15px 6px; cursor:pointer; min-height:88px;
font-size:13px; font-weight:600; color:var(--gruen-tief); text-align:center}
.schnell-k .ic{width:24px; height:24px; margin:0; color:var(--gruen-hell)}
/* Übersichtskarten in Wissen und Wir */
.hub{display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); padding:15px 16px; min-height:74px}
.hub:active{background:#f6f7f1}
.hub-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
background:var(--gruen-blass); flex:none}
.hub-ic .ic{width:23px; height:23px; margin:0; color:var(--gruen)}
.hub-text{flex:1; min-width:0}
.hub-titel{display:block; font-family:Georgia,serif; font-size:17.5px; font-weight:700; color:var(--gruen-tief)}
.hub-zahl{background:var(--gruen-blass); color:var(--gruen); border-radius:999px; padding:1px 8px;
font-size:12px; font-family:-apple-system,sans-serif; vertical-align:2px}
.hub-sub{display:block; font-size:13.5px; color:var(--text-leise); margin-top:2px}
/* Lageplan-Verweis im Garten-Reiter */
.planlink{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
background:var(--gruen-blass); border:1px solid #dfe6d2; border-radius:var(--radius);
padding:13px 15px; margin-bottom:14px; min-height:64px}
.planlink .ic{width:22px; height:22px; margin:0; color:var(--gruen); flex:none}
.planlink span{flex:1; font-size:13.5px; color:var(--text-leise)}
.planlink b{display:block; font-family:Georgia,serif; font-size:16.5px; color:var(--gruen-tief)}
/* ================= Startseite, zweite Fassung ================= */
:root{ --akzent:#c9d14a; --akzent-tief:#7a8320; }
.start-kopf{margin:2px 0 20px}
.sk-datum{margin:0 0 6px; font-size:13px; font-weight:700; letter-spacing:1.2px;
text-transform:uppercase; color:var(--gruen-hell)}
.start-kopf h1{font-size:34px; line-height:1.08; color:var(--gruen-tief)}
.strich{display:block; width:52px; height:4px; border-radius:2px; margin-top:12px;
background:var(--akzent)}
.sektion{display:flex; align-items:center; gap:8px; margin:22px 2px 10px;
font-size:12.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
color:var(--gruen)}
.sektion span{background:var(--gruen-blass); color:var(--gruen); border-radius:999px;
padding:1px 8px; letter-spacing:0; font-size:11.5px}
.sektion::after{content:""; flex:1; height:1px; background:var(--linie)}
/* Farbige Kacheln im Raster */
.raster{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.gross{position:relative; overflow:hidden; display:block; text-align:left; cursor:pointer;
min-height:132px; padding:15px 15px 16px; border:0; border-radius:18px;
background:var(--gruen-tief); color:#fff; box-shadow:0 8px 22px rgba(29,59,35,.16)}
.gross:active{transform:translateY(1px)}
.gr-ic{display:block; margin-bottom:auto}
.gr-ic .ic{width:22px; height:22px; margin:0; color:var(--akzent)}
.gr-titel{display:block; margin-top:16px; font-family:Georgia,serif; font-size:18px;
font-weight:700; line-height:1.15}
.gr-strich{display:block; width:26px; height:3px; border-radius:2px; background:var(--akzent); margin:8px 0 7px}
.gr-sub{display:block; font-size:13px; line-height:1.35; color:rgba(255,255,255,.78)}
.gr-sub b{display:block; color:#fff; font-size:14.5px; margin-bottom:2px}
.gr-pfeil{position:absolute; right:13px; bottom:11px; font-size:15px; color:var(--akzent)}
.gross.akzent{background:linear-gradient(135deg,#e7ec9a 0%, var(--akzent) 100%); color:var(--gruen-tief);
min-height:128px; padding-right:130px}
.gross.akzent .gr-ic .ic,
.gross.akzent .gr-pfeil{color:var(--akzent-tief)}
.gross.akzent .gr-strich{background:var(--gruen-tief)}
.gross.akzent .gr-sub{color:rgba(29,59,35,.72)}
.gross.akzent .gr-sub b{color:var(--gruen-tief)}
.gr-foto{position:absolute; right:0; top:0; height:100%; width:120px; object-fit:cover;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 32%);
mask-image:linear-gradient(90deg, transparent, #000 32%)}
/* Jetzt-Karten etwas ruhiger, mit Akzentstrich statt Balken */
.startkarte{border-radius:18px; padding:16px 18px 18px}
.startkarte::before{width:4px; background:var(--akzent)}
.startkarte.dienst::before{background:#4a83c4}
.startkarte.termin::before{background:#f2c230}
.sk-gross{font-size:23px}
.monatkurz{border-radius:18px}
/* Blühstreifen: Name im Bild */
.bb-karte.gross-bild{width:132px}
.bb-karte.gross-bild .bb-bild{position:relative; width:132px; height:104px; border-radius:16px;
align-items:flex-end; justify-items:stretch}
.bb-karte.gross-bild .bb-bild.hat-bild .kdot{display:none}
.bb-karte.gross-bild .bb-name{position:absolute; left:0; right:0; bottom:0; margin:0;
padding:16px 9px 7px; font-size:12.5px; font-weight:700; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5);
background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%); border-radius:0 0 16px 16px}
.bb-karte.gross-bild .bb-bild:not(.hat-bild) .bb-name{color:var(--gruen-tief);
text-shadow:none; background:none; position:static; padding:8px 6px 0}
/* Reiterleiste: aktiver Reiter deutlicher */
.tab{position:relative}
.tab[aria-current="page"]::before{content:""; position:absolute; top:0; left:22%; right:22%;
height:3px; border-radius:0 0 3px 3px; background:var(--akzent)}
/* Sanftes Erscheinen */
@media (prefers-reduced-motion: no-preference){
#view > div > *{animation:auf .32s ease-out both}
#view > div > *:nth-child(2){animation-delay:.03s}
#view > div > *:nth-child(3){animation-delay:.06s}
#view > div > *:nth-child(4){animation-delay:.09s}
#view > div > *:nth-child(n+5){animation-delay:.12s}
@keyframes auf{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
}
@media (max-width:420px){
.gross.akzent{padding-right:112px}
.gr-foto{width:104px}
}
/* ---------- Ausklappen in den Startkarten ---------- */
.klapp{margin-top:12px}
.klapp summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
min-height:46px; padding:11px 15px; border-radius:12px; background:var(--gruen-blass);
border:1px solid #dfe6d2; font-family:Georgia,serif; font-size:16px; font-weight:700; color:var(--gruen-tief)}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::after{content:"Mehr ▾"; margin-left:auto; flex:none; color:var(--gruen);
font-family:-apple-system,sans-serif; font-size:13px; font-weight:600; white-space:nowrap; transition:color .15s}
.klapp[open] summary::after{content:"Weniger ▴"}
.klapp[open] summary{border-bottom-left-radius:4px; border-bottom-right-radius:4px}
.klapp summary:active{background:#e6ecdb}
.klapp .sk-liste{margin:2px 0 10px}
.klapp .tk-text{margin:2px 0 0}
.klapp .tk-aktionen{margin-top:12px; margin-bottom:4px}
/* ---------- Was sich diesen Monat ändert ---------- */
.delta{margin-top:12px; padding-top:11px; border-top:1px solid var(--linie)}
.delta-lbl{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
letter-spacing:1.1px; text-transform:uppercase; color:var(--gruen)}
.delta-lbl span{background:var(--gruen-blass); border-radius:999px; padding:1px 8px; letter-spacing:0}
.delta-hinweis{margin:5px 0 0; font-size:13px; color:var(--text-leise)}
.delta-reihe{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.delta-reihe .chip{padding:7px 12px; font-size:13.5px; min-height:38px}
.delta-reihe .chip.mehr{background:none; border-style:dashed; color:var(--gruen)}
.textlink{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
margin-top:14px; padding:10px 0 2px; font-size:14.5px; font-weight:600; color:var(--gruen)}
/* ---------- Rundgang im Dienst-Ausklapper ---------- */
.rundgang{margin-top:12px; padding-top:11px; border-top:1px solid var(--linie)}
.rg-kopf{font-size:14px; color:var(--text); line-height:1.45}
.rg-kopf .ic{width:16px; height:16px; color:var(--gruen-hell)}
.rg-kopf b{color:var(--gruen-tief)}
.vorschau{margin:14px 0 0; padding:10px 13px; background:var(--gruen-blass); border-radius:11px;
font-size:13.5px; color:var(--gruen); line-height:1.45}
.vorschau .ic{width:16px; height:16px; color:var(--gruen)}
/* ================================================================
Eine Formensprache – Überarbeitung nach der Gestaltungsprüfung
================================================================ */
/* Radien vereinheitlichen: die Datei mischte 16 und 18 */
:root{ --radius:18px; --radius-innen:12px; }
.dk-btn, .tk-mit, .dk-sonder, .vorschau{ border-radius:var(--radius-innen) }
.btn{ border-radius:14px }
/* KONTRAST: Akzentgrün nur auf Dunkelgrün. Auf Papier trägt Dunkelgrün.
#c9d14a auf #fbfaf5 = 1,45:1 – unbrauchbar. */
.strich{ background:var(--gruen-tief) }
.tab[aria-current="page"]::before{ background:var(--gruen-tief) }
.sk-datum{ color:var(--gruen) }
/* Luft */
main{ padding:18px 16px 12px }
.start-kopf{ margin:4px 0 26px }
.sektion{ margin:30px 2px 12px; font-size:13px; min-height:24px }
.start-oben{ gap:12px }
.raster{ gap:12px }
@media (min-width:620px){ .raster{ grid-template-columns:repeat(3,1fr) } }
/* Ebene 1: helle Karten – Seitenbalken raus, Farbe wandert in Icon und Strich */
.startkarte::before{ content:none }
.startkarte,
.startkarte.dienst, .startkarte.termin, .startkarte.pause{
background:var(--karte); padding:16px 18px 18px; border:1px solid var(--linie);
box-shadow:0 1px 2px rgba(29,59,35,.05), 0 8px 22px rgba(29,59,35,.09);
}
.sk-kopf{ flex-wrap:wrap; row-gap:0 }
.sk-kopf .ic{ width:22px; height:22px }
.sk-kopf span:not(.sk-bald){ flex:0 0 100%; margin-top:9px; font-size:12.5px }
.sk-bald{ align-self:flex-start; font-size:13px; padding:3px 11px }
.startkarte.dienst .sk-kopf .ic{ color:#4a83c4 }
.startkarte.termin .sk-kopf .ic{ color:#f2c230 }
.startkarte.pause .sk-kopf .ic{ color:#8fa6bd }
.sk-gross{ font-size:22px; margin-top:7px }
.startkarte .gr-strich{ margin:11px 0 10px; background:var(--gruen-hell) }
.startkarte.dienst .gr-strich{ background:#4a83c4 }
.startkarte.termin .gr-strich{ background:#f2c230 }
.startkarte.pause .gr-strich{ background:#8fa6bd }
.sk-zeile{ font-size:14.5px; margin-top:3px }
/* Ebene 2: dunkle Kacheln – gleiche Bauteile, eine Typo-Stufe kleiner */
.gross{ min-height:140px; padding:16px 16px 18px }
.gr-ic .ic{ width:22px; height:22px }
.gr-titel{ margin-top:16px; font-size:18px }
.gr-strich{ display:block; width:26px; height:3px; border-radius:2px; margin:11px 0 10px }
.gr-sub{ font-size:13.5px; color:rgba(255,255,255,.86) }
.gross.akzent .gr-sub{ color:rgba(29,59,35,.82) }
.gr-pfeil{ right:14px; bottom:12px; font-size:17px }
/* Brücke: die Monatskarte folgt derselben Grammatik */
.monatkurz{ padding:16px 18px 18px }
.monatkurz h2{ display:block; font-size:22px }
.monatkurz .leaf{ display:block; width:22px; height:22px; color:var(--gruen); margin-bottom:9px }
.monatkurz .gr-strich{ background:var(--gruen-hell) }
.monatkurz .mh-satz{ margin-top:0 }
/* Tippziele */
.delta-reihe .chip{ min-height:44px; padding:10px 14px; font-size:14.5px }
.textlink{ min-height:44px; padding:12px 0 6px }
/* Zeitangabe gehört in die Icon-Zeile, nicht unter das Label */
.sk-kopf .ic{ order:0 }
.sk-bald{ order:0; margin-left:auto }
.sk-kopf span:not(.sk-bald){ order:1 }
/* ---------- Kopfzeile größer, sie trägt jetzt den Titel allein ---------- */
.topbar-inner{ padding:4px 16px 7px; gap:13px }
.brand{ gap:13px }
.brand-mark{ width:78px; height:78px }
.brand-name{ font-size:20px; letter-spacing:0 }
.brand-claim{ font-size:13px; margin-top:1px }
.topbar::after{ height:4px }
/* Startseite: das Datum steht allein, der Titel steckt in der Kopfzeile */
.start-kopf{ margin:2px 0 4px }
.sk-datum{ font-size:13.5px; letter-spacing:1.1px }
.start-kopf .sektion{ margin-top:22px }
/* ---------- Kopfzeile der Karten wieder einzeilig, Karten kompakter ---------- */
.sk-kopf{ flex-wrap:nowrap; align-items:center; gap:9px }
.sk-kopf span:not(.sk-bald){ flex:1 1 auto; margin-top:0; font-size:12.5px; min-width:0 }
.sk-kopf .ic{ width:20px; height:20px }
.sk-bald{ flex:none; align-self:center }
.startkarte,
.startkarte.dienst, .startkarte.termin, .startkarte.pause{ padding:14px 16px 16px }
.sk-gross{ font-size:21px; margin-top:8px }
.startkarte .gr-strich{ margin:9px 0 8px }
.sk-liste{ margin-top:9px }
.sk-liste li{ margin:3px 0 }
.dk-sonder{ margin-top:9px; padding:9px 12px }
.klapp{ margin-top:10px }
.start-oben{ gap:11px }
/* Reihenfolge in der Kartenkopfzeile: Icon, Label, dann rechts die Zeitangabe */
.sk-kopf .ic{ order:0 }
.sk-kopf span:not(.sk-bald){ order:1 }
.sk-bald{ order:2; margin-left:auto }
/* Ohne Label darüber brauchen die Karten etwas Abstand zum Datum */
.start-kopf{ margin:2px 0 14px }
/* ---------- Pflanzen: Feld wählen statt sortieren ---------- */
.feldwahl{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px}
.feldwahl .fchip{flex:1 1 auto; min-width:88px; text-align:center}
.feldtitel{margin:0 2px 12px; font-size:13.5px; color:var(--text-leise)}
.sichtwahl{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.fchip.klein{padding:8px 13px; font-size:13.5px; min-height:40px}
/* ---------- Filter: zwei Auswahllisten in einer Zeile ---------- */
.filterzeile{display:flex; gap:9px; margin-bottom:8px}
.filterzeile select{flex:1; min-width:0; appearance:none; -webkit-appearance:none;
background:var(--karte) url("data:image/svg+xml;utf8,") no-repeat right 10px center/18px;
border:1px solid var(--linie); border-radius:12px; padding:12px 34px 12px 14px;
font-size:15px; font-weight:600; color:var(--gruen-tief); min-height:48px;
text-overflow:ellipsis}
.filterzeile select:focus{outline:2px solid var(--gruen-hell); outline-offset:-1px}
.feldtitel{margin:0 2px 14px; font-size:13px; color:var(--text-leise)}
/* ---------- Monatskalender ---------- */
.monat-satz{margin:0 2px 16px; font-size:15px; color:var(--text-leise)}
.task-hint b{color:var(--gruen-tief)}
.a-nr{white-space:nowrap}
/* ---------- Kopfzeile hebt sich ab ---------- */
.topbar{background:var(--gruen-blass); box-shadow:0 1px 0 rgba(29,59,35,.08)}
.brand-mark img{mix-blend-mode:multiply}
/* ---------- Reiterleiste: der aktive Reiter ist eine grüne Fläche ---------- */
.tabbar{background:var(--karte); border-top:1px solid var(--linie)}
.tab{border-radius:0; transition:background .15s ease}
.tab[aria-current="page"]{background:var(--gruen-tief); color:#fff}
.tab[aria-current="page"]::before{content:none}
.tab[aria-current="page"] svg{color:#fff}
/* ---------- Monatskalender: Kategorien zum Ausklappen ---------- */
.kat{background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
box-shadow:var(--schatten); overflow:hidden}
.kat summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px;
padding:14px 16px; min-height:72px}
.kat summary::-webkit-details-marker{display:none}
.kat-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
background:var(--gruen-blass); flex:none; color:var(--akzent,var(--gruen))}
.kat-ic .ic{width:23px; height:23px; margin:0}
.kat-text{flex:1; min-width:0}
.kat-titel{display:block; font-family:Georgia,serif; font-size:18px; font-weight:700; color:var(--gruen-tief)}
.kat-sub{display:block; font-size:13.5px; color:var(--text-leise); margin-top:1px}
.kat-zahl{flex:none; display:grid; place-items:center; min-width:34px; height:34px; padding:0 10px;
border-radius:999px; background:var(--gruen-blass); color:var(--gruen);
font-size:15px; font-weight:700; font-family:Georgia,serif}
.kat summary::after{content:""; width:9px; height:9px; flex:none; margin-left:2px;
border-right:2px solid var(--gruen); border-bottom:2px solid var(--gruen);
transform:rotate(45deg) translateY(-2px); transition:transform .18s ease}
.kat[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.kat[open] summary{border-bottom:1px solid var(--linie)}
.kat-inhalt{padding-bottom:6px}
.kat-inhalt .task-hint{margin:12px 16px 4px}
.kat-inhalt .aufgaben{padding-top:2px}
/* ---------- Bildnachweis ---------- */
.bildinfo{position:absolute; right:10px; bottom:10px; width:36px; height:36px; border-radius:50%;
border:0; background:rgba(255,255,255,.92); color:var(--gruen-tief); cursor:pointer;
display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.22)}
.bildinfo .ic{width:19px; height:19px; margin:0}
.blase-hg{position:fixed; inset:0; z-index:80; background:rgba(29,59,35,.42);
display:flex; align-items:flex-end; justify-content:center; padding:16px}
.blase{background:var(--karte); border-radius:18px; padding:18px 18px 16px; width:100%;
max-width:460px; box-shadow:0 -6px 40px rgba(0,0,0,.25)}
.blase-kopf{font-family:Georgia,serif; font-size:19px; font-weight:700; color:var(--gruen-tief); margin-bottom:10px}
.blase-zeile{margin:6px 0; font-size:14.5px; line-height:1.5; word-break:break-word}
.blase-zeile b{color:var(--gruen-tief)}
.blase-hinweis{margin:12px 0 14px; font-size:13.5px; color:var(--text-leise); line-height:1.45}
.nachweis{padding:12px 16px; border-bottom:1px solid var(--linie)}
.nachweis:last-child{border-bottom:0}
.nw-name{font-family:Georgia,serif; font-size:16px; font-weight:700; color:var(--gruen-tief)}
.nw-zeile{font-size:13.5px; color:var(--text-leise); margin-top:2px; word-break:break-word}
.nw-link{display:inline-block; margin-top:4px; font-size:13.5px}
/* Warnband im Bild – die Warnung soll ohne Scrollen zu sehen sein. */
.giftband{display:flex; align-items:center; gap:8px; margin:10px 0 2px;
padding:9px 13px; border-radius:9px; font-size:14.5px; font-weight:600;
color:#fff; letter-spacing:.01em; line-height:1.3}
.giftband svg{width:18px; height:18px; flex:0 0 18px}
.giftband.gift{background:rgba(150,32,28,.94)}
.giftband.haut{background:rgba(148,96,20,.94)}
.hero{position:relative}
.hero .img{position:relative}
/* Notfallseite */
.notrufkarte{background:#fff; border:1.5px solid var(--linie); border-radius:16px; padding:16px 18px; margin-top:12px; text-align:center}
.notrufkarte.dringend{border-color:#96201c; background:#fdf5f4}
.nk-lage{font-size:14px; color:var(--text-leise); margin-bottom:6px}
.nk-nummer{display:block; font-family:Georgia,serif; font-size:34px; font-weight:700; color:#96201c;
text-decoration:none; letter-spacing:.02em; padding:6px 0}
.notrufkarte:not(.dringend) .nk-nummer{color:var(--gruen-tief)}
.nk-name{font-size:15.5px; font-weight:600}
.nk-sub{font-size:13.5px; color:var(--text-leise); margin-top:4px}
.btn.notruf-klein{margin-top:12px; background:#96201c; color:#fff; border-color:#96201c}
/* Verweis vom Wochen-Aufklapper in den Monatskalender */
.klapp-mehr{display:block; width:100%; text-align:left; margin-top:10px; padding:10px 12px;
background:var(--gruen-blass); border:none; border-radius:10px; color:var(--gruen-tief);
font-size:14.5px; font-weight:600; cursor:pointer}
/* Pinnwand */
.pinn{display:flex; align-items:flex-start; gap:11px; padding:12px 2px; border-bottom:1px solid var(--linie)}
.pinn:last-child{border-bottom:none}
.pinn-check{flex:0 0 26px; width:26px; height:26px; margin-top:1px; border:2px solid var(--gruen);
border-radius:7px; background:#fff; color:var(--gruen-tief); font-size:16px; font-weight:700;
line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
.pinn.fertig .pinn-check{background:var(--gruen); color:#fff; border-color:var(--gruen)}
.pinn-text{flex:1; min-width:0}
.pinn-was{font-size:15.5px; line-height:1.35}
.pinn.fertig .pinn-was{text-decoration:line-through; color:var(--text-leise)}
.pinn-wer{font-size:12.5px; color:var(--text-leise); margin-top:3px}
.pinn-del{flex:0 0 30px; width:30px; height:30px; border:none; background:none;
color:var(--text-leise); font-size:22px; line-height:1; cursor:pointer; border-radius:8px}
.pinn-del:hover{background:var(--gruen-blass)}
/* Wochenzettel im Startseiten-Aufklapper */
.wt-body{padding-top:4px}
.wt-titel{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--text-leise); margin:12px 0 4px}
.wt-titel:first-child{margin-top:2px}
.wt-zeile{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--linie)}
.wt-zeile:last-of-type{border-bottom:none}
.wt-text{flex:1; font-size:15px; line-height:1.35; padding-top:2px}
.wt-zeile.fertig .wt-text{text-decoration:line-through; color:var(--text-leise)}
.wt-von{color:var(--text-leise); font-size:13px}
/* Termin-Formular */
.feld-paar{display:flex; gap:10px}
.feld-paar .field{flex:1}
.dk-btn.loesch{color:#96201c; border-color:#e6c9c3}
/* Mitmach-Quadrate auf der Wir-Seite – gefülltes Grün = hier gebe ich ein */
.mitmach-reihe{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mitmach{display:flex; flex-direction:column; align-items:flex-start; text-align:left;
gap:6px; padding:16px 15px; min-height:132px; border:none; border-radius:16px; cursor:pointer;
background:var(--gruen-tief); color:#fff; box-shadow:0 2px 10px rgba(29,59,35,.18)}
.mitmach:active{transform:scale(.985)}
.mitmach .mm-ic{width:30px; height:30px; margin-bottom:2px}
.mitmach .mm-ic svg{width:30px; height:30px; stroke:#fff; fill:none}
.mitmach .mm-titel{font-family:Georgia,serif; font-size:19px; font-weight:700; line-height:1.1;
display:flex; align-items:center; gap:7px; margin-top:auto}
.mitmach .mm-sub{font-size:13px; line-height:1.3; color:rgba(255,255,255,.82)}
.mitmach .mm-zahl{background:rgba(255,255,255,.22); color:#fff; font-family:system-ui,sans-serif;
font-size:12.5px; font-weight:600; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
display:inline-flex; align-items:center; justify-content:center}
/* Helle Variante der Mitmach-Kachel (Beobachtung, Einstellungen) */
.mitmach.hell{background:#fff; color:var(--gruen-tief); box-shadow:0 1px 6px rgba(29,59,35,.07);
border:1px solid var(--linie)}
.mitmach.hell .mm-ic svg{stroke:var(--gruen)}
.mitmach.hell .mm-sub{color:var(--text-leise)}
.mitmach.hell .mm-zahl{background:var(--gruen-blass); color:var(--gruen-tief)}
/* Große Terminübersicht – wie die Dienst-Fläche, mit Vorschau */
.uebersicht{display:block; width:100%; text-align:left; margin-top:14px; padding:16px 16px 14px;
background:#fff; border:1px solid var(--linie); border-radius:16px; cursor:pointer;
box-shadow:0 1px 6px rgba(29,59,35,.07)}
.ub-kopf{display:flex; align-items:center; gap:9px; font-family:Georgia,serif; font-size:18px;
font-weight:700; color:var(--gruen-tief)}
.ub-kopf svg{width:20px; height:20px; stroke:var(--gruen); fill:none; flex:0 0 20px}
.ub-kopf .chev, .ub-kopf svg:last-child{margin-left:auto}
.ub-liste{margin-top:12px; border-top:1px solid var(--linie); padding-top:6px}
.ub-zeile{display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--linie); font-size:14.5px}
.ub-zeile:last-child{border-bottom:none}
.ub-datum{flex:0 0 84px; color:var(--gruen); font-weight:600}
.ub-titel{flex:1; color:var(--text)}
.ub-leer{margin-top:10px; color:var(--text-leise); font-size:14px}
.ansprech summary{font-family:Georgia,serif; font-size:17px; color:var(--gruen-tief)}
/* Gießdienst-Tausch */
.dienstzeile{position:relative}
.dz-tausch{margin-top:8px; padding:6px 12px; font-size:13px; font-weight:600;
background:var(--gruen-blass); color:var(--gruen-tief); border:none; border-radius:8px; cursor:pointer}
.dienstzeile.getauscht{background:#f4f8ee}
.dz-fahne{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.03em;
background:var(--gruen); color:#fff; padding:1px 7px; border-radius:9px; vertical-align:middle}
.dz-original{font-size:12.5px; color:var(--text-leise); margin-top:3px}
.tausch-form{background:#fff; border:1px solid var(--linie); border-radius:12px; padding:14px; margin:2px 0 10px}
.tf-titel{font-size:14.5px; font-weight:600; margin-bottom:10px; color:var(--gruen-tief)}
/* Suchzeile in Rezepten und Heilkunde */
.suchzeile{margin:0 0 12px}
.suchzeile input{width:100%; padding:12px 14px; font-size:15.5px; border:1.5px solid var(--linie);
border-radius:12px; background:#fff; box-sizing:border-box}
.suchzeile input:focus{outline:none; border-color:var(--gruen)}
.such-zahl{font-size:13px; color:var(--text-leise); margin:0 0 10px 2px; min-height:1px}
/* Interaktiver Beetplan */
.beetplan{position:relative; width:100%; max-width:380px; margin:14px auto 0; aspect-ratio:1/1.1;
border:2px solid var(--f, #4a5a3a); border-radius:14px; background:#fbfcf8}
.bp-punkt{position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
border:1.5px solid var(--f, #4a5a3a); background:#fff; color:var(--gruen-tief);
font-family:Georgia,serif; font-size:13px; font-weight:700; cursor:pointer; line-height:1;
display:flex; align-items:center; justify-content:center; padding:0}
.bp-punkt:hover{background:var(--gruen-blass)}
.bp-punkt.sel{background:var(--f, #4a5a3a); color:#fff; transform:scale(1.12); z-index:3}
.bp-punkt.gift{border-color:#96201c; border-width:2px}
.bp-punkt.gift.sel{background:#96201c}
.bp-punkt.ohne{border-style:dashed; color:var(--text-leise)}
.bp-hinweis{max-width:380px; margin:10px auto 0; text-align:center; font-size:13px; color:var(--text-leise)}
/* Popover, das sich an den angetippten Punkt anschmiegt */
.bp-pop{position:absolute; z-index:10; width:236px; max-width:84%; padding:0 0 13px; overflow:hidden;
background:#fff; border:1.5px solid var(--f, #4a5a3a); border-radius:12px;
box-shadow:0 6px 20px rgba(29,59,35,.22); transform:translateX(-50%)}
.bp-pop.unten{margin-top:20px}
.bp-pop.oben{transform:translate(-50%, -100%); margin-top:-20px}
.bp-pop::after{content:""; position:absolute; left:50%; width:12px; height:12px; margin-left:-6px;
background:#fff; border:1.5px solid var(--f, #4a5a3a); transform:rotate(45deg)}
.bp-pop.unten::after{top:-7px; border-right:none; border-bottom:none}
.bp-pop.oben::after{bottom:-7px; border-left:none; border-top:none}
.bp-zu{position:absolute; top:6px; right:6px; z-index:2; width:30px; height:30px; border:none; border-radius:50%;
background:rgba(255,255,255,.9); font-size:20px; line-height:1; color:var(--gruen-tief); cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,.15)}
.bpi-kopf{display:flex; align-items:center; gap:11px}
.bpi-bild{width:100%; height:130px; background:var(--gruen-blass); display:flex; align-items:center; justify-content:center}
.bpi-bild img{width:100%; height:100%; object-fit:cover}
.bpi-kopf{padding:11px 14px 0}
.bpi-nr{flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--gruen-blass);
color:var(--gruen-tief); font-family:Georgia,serif; font-weight:700; font-size:14px;
display:flex; align-items:center; justify-content:center}
.bpi-name{font-size:16px; font-weight:600; color:var(--gruen-tief)}
.bpi-tafel{margin:10px 14px 0; width:calc(100% - 28px); width:100%; padding:11px; background:var(--gruen-tief); color:#fff;
border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:6px}
.bpi-tafel svg{width:18px; height:18px; stroke:#fff; fill:none}
.bpi-offen{margin:8px 14px 0; font-size:14px; color:var(--text-leise)}
/* Heilkunde: Filter nach Zubereitungsart */
.zub-filter{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px}
.zub-chip{padding:7px 13px; font-size:13.5px; font-weight:600; background:#fff;
border:1.5px solid var(--linie); border-radius:20px; color:var(--gruen-tief); cursor:pointer}
.zub-chip.an{background:var(--gruen-tief); color:#fff; border-color:var(--gruen-tief)}
/* Heilkunde: zwei Auswahl-Dropdowns nebeneinander */
.heil-filter{display:flex; gap:10px; margin:0 0 10px}
.heil-filter .field{flex:1; margin:0}
.heil-filter select{width:100%; padding:11px 12px; font-size:14.5px; border:1.5px solid var(--linie);
border-radius:10px; background:#fff; color:var(--gruen-tief); box-sizing:border-box}
/* Inspirationswidget: Heil-Variante in warmem Terrakotta */
.gross.akzent.inspo-heil{background:linear-gradient(135deg,#f0d3b8 0%, #c97e4e 100%)}
.gross.akzent.inspo-heil .gr-ic .ic,
.gross.akzent.inspo-heil .gr-pfeil{color:#7a3d1c}
.gross.akzent.inspo-heil .gr-sub{color:rgba(74,32,12,.78)}
.gross.akzent.inspo-heil .gr-sub b{color:#5a2c12}
.gross.akzent.inspo-heil .gr-strich{background:#7a3d1c}
/* Termin-Karte: kompakter (rund halbe Höhe) + eigener warmer Look, klar anders als die Dienst-Karte */
.startkarte.termin{ padding:12px 16px 13px }
.startkarte.termin .sk-gross{ font-size:19px; line-height:1.2; margin-top:2px }
.startkarte.termin .gr-strich{ display:none }
.startkarte.termin .sk-zeile{ margin-top:3px }
.startkarte.termin .klapp{ margin-top:9px }
.startkarte.termin .klapp summary{ min-height:38px; padding:8px 13px; font-size:14.5px;
background:#f8efe0; border-color:#ecddc4; color:#8a5a2a }
.startkarte.termin .klapp summary::after{ color:#b0763a }
.startkarte.termin .klapp summary:active{ background:#f2e6d2 }
/* Dienst-Karte etwas kräftiger absetzen (grüner) */
.startkarte.dienst{ background:linear-gradient(180deg,#ffffff 0%,#eef4e6 100%) }
/* Nächster Termin – schmale, aufklappbare Honig-Pille (UX-Spezialist) */
.termin-klapp{position:relative; overflow:hidden; margin-top:12px; background:#fdf8e2;
border:1px solid rgba(192,144,44,.32); border-radius:16px; box-shadow:0 1px 2px rgba(29,59,35,.05)}
.termin-klapp::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#f2c230}
.termin-klapp summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr auto;
align-items:center; gap:10px; padding:10px 14px 10px 16px}
.termin-klapp summary::-webkit-details-marker{display:none}
.termin-klapp summary:active{background:rgba(192,144,44,.08)}
.tp-z1{display:flex; align-items:center; gap:6px}
.tp-dot{width:6px; height:6px; border-radius:50%; background:#f2c230; flex:none}
.tp-label{font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#8a7208}
.tp-bald{margin-left:auto; font-size:12px; font-weight:700; color:#8a7208;
background:rgba(192,144,44,.15); border-radius:999px; padding:3px 10px}
.tp-z2{display:flex; align-items:baseline; gap:8px; margin-top:3px; min-width:0}
.tp-titel{font-family:Georgia,serif; font-size:16px; font-weight:700; color:var(--gruen-tief);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-kurz{font-size:13px; color:var(--text-leise); flex:none}
.tp-chev{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
background:rgba(192,144,44,.16); color:#8a6414; font-size:15px; line-height:1; transition:transform .2s}
.termin-klapp[open] .tp-chev{transform:rotate(180deg)}
.termin-klapp[open] summary{border-radius:16px 16px 0 0}
.tp-body{padding:4px 14px 13px 16px; border-top:1px solid rgba(192,144,44,.22)}
.tp-zeile{font-size:14px; color:var(--text); margin-top:6px}
.tp-zeile.leise{color:var(--text-leise)}
.tp-body .tk-text{margin-top:10px; line-height:1.45}
.tp-body .tk-mit{margin-top:8px; font-size:13.5px; color:var(--text-leise)}
.tp-body .tk-aktionen{display:flex; gap:9px; margin-top:12px}
/* ---- Einheitliches Aufklapp-Zeichen in der GANZEN App: gefüllter Kreis (Akzentfarbe) mit Pfeil, dreht sich ---- */
.aufklapp-kreis, .klapp summary::after, .kat summary::after, .zub summary::after{
content:"\25BE"; flex:none; width:26px; height:26px; border-radius:50%;
display:grid; place-items:center; font-size:13px; line-height:1; color:#fff;
font-family:-apple-system,sans-serif; font-weight:400; transition:transform .2s; border:none}
/* .klapp (grün) */
.klapp summary::after{margin-left:auto; background:var(--gruen)}
.klapp[open] summary::after{content:"\25BE"; transform:rotate(180deg)}
/* Wissen-Kategorien: gefüllt in der Kategoriefarbe */
.kat summary::after{margin-left:2px; background:var(--akzent, #7d9a52); float:none}
.kat[open] summary::after{transform:rotate(180deg)}
/* Zubereitungen */
.zub summary::after{float:right; background:var(--gruen)}
.zub[open] summary::after{content:"\25BE"; transform:rotate(180deg)}
/* Termin-Pille: gefüllter Honig-Kreis, weißer Pfeil */
.tp-chev{background:#f2c230; color:#fff}
/* ---- Aufklapp-Kreis brillanter: farbiger Kreis + weißes Chevron (dickere Linie) + Schatten = klar ein Button ---- */
.klapp summary::after, .kat summary::after, .zub summary::after{
content:""; width:28px; height:28px; border-radius:50%; flex:none;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:15px;
box-shadow:0 2px 5px rgba(29,59,35,.22), inset 0 1px 0 rgba(255,255,255,.30);
transition:transform .2s ease}
.klapp summary::after{margin-left:auto; background-color:var(--gruen)}
.klapp summary:active::after{box-shadow:0 1px 3px rgba(29,59,35,.28), inset 0 1px 0 rgba(255,255,255,.20)}
.kat summary::after{margin-left:2px; background-color:var(--akzent, #7d9a52); float:none}
.zub summary::after{float:right; background-color:var(--gruen)}
/* Termin-Pille: gleicher Look in Honig */
.tp-chev{width:28px; height:28px; font-size:0; color:transparent; background-color:#f2c230;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:center; background-size:15px;
box-shadow:0 2px 5px rgba(29,59,35,.22), inset 0 1px 0 rgba(255,255,255,.30)}
/* Aufklapp-Zeile in der Dienst-Karte bis an die Kartenkante ziehen, damit der Kreis-Button mit der Termin-Pille fluchtet */
.startkarte .klapp{margin-right:-17px}
/* ---- Persona-Wünsche (Kennzeichen und Brücken in die Gruppe) ---- */
/* Handschuh-Kennzeichen: dieselbe Form wie "giftig", aber im Hautreiz-Ocker */
.fz-haut{display:inline-block; background:#f6eedd; color:#946014; border-radius:999px;
padding:1px 8px; font-size:11.5px; font-weight:700; vertical-align:1px; margin-left:4px}
/* Heilpflanzen-Kennzeichen in der Ernteliste des Monatskalenders */
.fz-heil{display:inline-block; background:var(--gruen-blass); color:var(--gruen); border-radius:999px;
padding:1px 8px; font-size:11.5px; font-weight:700; vertical-align:1px; margin-left:4px}
/* Ehrlichkeitszeile unter der Warnbox: leise, aber sichtbar */
.warn-unsicher{margin:10px 0 0; font-size:13px; color:var(--text-leise); font-style:italic}
/* Pinnwand: Teilen-Knopf je Zeile (gleiche Grundform wie der Lösch-Knopf) */
.pinn-share{color:#0f7a34}
.pinn-share svg{width:17px; height:17px; vertical-align:middle}
/* Pflegeplan: "Bescheid sagen" in WhatsApp-Grün neben "Tauschen" */
.dz-wa{margin-left:8px; background:#e7f6ec; color:#0f7a34}
.dz-tausch + .dz-tausch{margin-left:8px}
/* "erledigt von ..." an den Wochen-Haken */
.wt-von{font-size:12.5px; color:var(--text-leise); font-weight:400}
/* ---- Ampel "Anfassen · Ernten · Essen" im Pflanzendetail ---- */
.ampel{display:flex; gap:8px}
.amp{flex:1 1 0; display:flex; flex-direction:column; gap:2px; align-items:center; text-align:center;
padding:10px 6px; border-radius:var(--radius-innen, 12px)}
.amp-frage{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.amp-antwort{font-size:13.5px; font-weight:600; line-height:1.25}
.amp.gruen{background:#eaf3de}
.amp.gruen .amp-frage{color:#3b6d11}
.amp.gruen .amp-antwort{color:#27500a}
.amp.ocker{background:#f6eedd}
.amp.ocker .amp-frage{color:#946014}
.amp.ocker .amp-antwort{color:#6b4708}
.amp.rot{background:var(--warn-bg)}
.amp.rot .amp-frage{color:var(--warn)}
.amp.rot .amp-antwort{color:#8c2317}
.amp.grau{background:var(--gruen-blass)}
.amp.grau .amp-frage{color:var(--text-leise)}
.amp.grau .amp-antwort{color:var(--text-leise)}
.hero .ampel{margin:12px 0 2px}
/* Vergangene Wochen in der Saisonansicht: sichtbar, aber zurückgenommen */
.dienstzeile.vorbei{opacity:.62}
.dienstzeile.vorbei .dz-namen{font-weight:400}
/* ---- Termin-Zusagen ---- */
.tk-zusagen{margin-top:10px; padding-top:10px; border-top:1px solid var(--linie)}
.tk-zusagen .zusage{background:var(--gruen-blass); color:var(--gruen-tief); font-weight:700}
.tk-zusagen .zusage.dabei{background:var(--gruen-tief); color:#fff}
.tk-wer{margin:8px 0 0; font-size:13.5px; color:var(--text-leise)}
/* ---- Neue Termine: Zahl am Reiter + Hinweis auf Start ---- */
.tab{position:relative}
.tab-badge{position:absolute; top:5px; left:calc(50% + 8px); min-width:18px; height:18px;
padding:0 5px; border-radius:999px; background:#f2c230; color:#5a4a06;
font-size:11.5px; font-weight:800; line-height:18px; text-align:center;
box-shadow:0 1px 3px rgba(29,59,35,.25)}
.neu-banner{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
background:#fdf8e2; border:1px solid #ecdfa8; border-radius:var(--radius);
padding:11px 14px; margin-bottom:12px; cursor:pointer; font-size:14.5px; color:#6b5a06}
.neu-banner .nb-zahl{flex:none; min-width:24px; height:24px; border-radius:999px;
background:#f2c230; color:#5a4a06; font-weight:800; line-height:24px; text-align:center; font-size:13px}
.neu-banner .nb-text{flex:1}
.neu-banner .nb-pfeil{flex:none; font-weight:700; color:#b8901a}
/* Verwaltungszeile am Terminkarten-Ende: sichtbar, aber leise */
.tk-verwaltung{display:flex; gap:18px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--linie)}
.tk-leise{background:none; border:none; padding:2px 0; cursor:pointer;
font-size:13.5px; font-weight:600; color:var(--text-leise); text-decoration:underline; text-underline-offset:3px}
.tk-leise.loesch{color:#a3502e}
/* ================= Dunkles Erscheinungsbild =================
Wird per Einstellung (Mehr -> Anzeige) aktiviert; "auto" folgt dem Handy.
Grundfarben ueber die Variablen, dazu gezielte Korrekturen fuer fest
eingefaerbte Flaechen. */
:root[data-thema="dunkel"]{
color-scheme: dark;
--papier:#151a14; --karte:#1e241d; --linie:#33402f;
--text:#e6ebe2; --text-leise:#a7b3a0;
--gruen-tief:#c9dcb6; --gruen:#9dbf82; --gruen-hell:#8aa668;
--gruen-blass:#242e21;
--warn:#f0937f; --warn-bg:#3a2320; --info:#9dbf82;
--schatten:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}
:root[data-thema="dunkel"] .topbar{background:#10150f; color:#e6ebe2}
:root[data-thema="dunkel"] .brand-name{color:#e6ebe2}
:root[data-thema="dunkel"] .tabbar{background:rgba(16,21,15,.96)}
:root[data-thema="dunkel"] .tab{color:#a7b3a0}
:root[data-thema="dunkel"] .tab[aria-current]{background:#2f5c34; color:#fff}
:root[data-thema="dunkel"] .btn{background:#2f5c34; color:#fff}
:root[data-thema="dunkel"] .btn.sec{background:#242e21; color:#c9dcb6}
:root[data-thema="dunkel"] .btn.wa{background:#1f7a43; color:#fff}
:root[data-thema="dunkel"] .dk-btn{background:#242e21; color:#c9dcb6; border-color:#33402f}
:root[data-thema="dunkel"] .dk-btn.wa{background:#1f7a43; color:#fff}
:root[data-thema="dunkel"] .startkarte.dienst{background:#1d2a33; border-color:#31485a}
:root[data-thema="dunkel"] .startkarte.pause{background:#232a31}
:root[data-thema="dunkel"] .termin-klapp,
:root[data-thema="dunkel"] .terminkarte{background:#2b2517; border-color:#4a3d1f}
:root[data-thema="dunkel"] .tp-kurz,:root[data-thema="dunkel"] .tk-zeit{color:#e8c95a}
:root[data-thema="dunkel"] .tp-bald,:root[data-thema="dunkel"] .tk-bald{background:#4a3d1f; color:#e8d49a}
:root[data-thema="dunkel"] .neu-banner{background:#2b2517; border-color:#4a3d1f; color:#e8d49a}
:root[data-thema="dunkel"] .tausch-form{background:#1e241d; border-color:#33402f}
:root[data-thema="dunkel"] .dienstzeile.getauscht{background:#20281c}
:root[data-thema="dunkel"] .amp.gruen{background:#22301d}
:root[data-thema="dunkel"] .amp.gruen .amp-frage{color:#a9cb8a}
:root[data-thema="dunkel"] .amp.gruen .amp-antwort{color:#c9e2b2}
:root[data-thema="dunkel"] .amp.ocker{background:#332a17}
:root[data-thema="dunkel"] .amp.ocker .amp-frage{color:#d9b264}
:root[data-thema="dunkel"] .amp.ocker .amp-antwort{color:#e8ce96}
:root[data-thema="dunkel"] .amp.rot .amp-antwort{color:#f2b0a2}
:root[data-thema="dunkel"] .fz-haut{background:#332a17; color:#d9b264}
:root[data-thema="dunkel"] .cal td.on{background:#8aa668}
:root[data-thema="dunkel"] .cal td.bedarf{background:#262d20}
:root[data-thema="dunkel"] .beet rect{fill:#242e21; stroke:#8aa668}
:root[data-thema="dunkel"] .kachel,:root[data-thema="dunkel"] .rezeptkarte,
:root[data-thema="dunkel"] .aufgabe,:root[data-thema="dunkel"] .uebersicht{background:#1e241d}
:root[data-thema="dunkel"] input,:root[data-thema="dunkel"] select,
:root[data-thema="dunkel"] textarea{background:#151a14; color:#e6ebe2; border-color:#33402f}
:root[data-thema="dunkel"] .gross{background:#22301d}
:root[data-thema="dunkel"] .gr-titel{color:#c9dcb6}
:root[data-thema="dunkel"] .pinn-check{border-color:#8aa668}
:root[data-thema="dunkel"] .klapp,:root[data-thema="dunkel"] .kat{background:#1e241d}
/* Dunkel: Inspirations-Kachel – warme dunkle Flaeche, helle Schrift */
:root[data-thema="dunkel"] .gross.akzent,
:root[data-thema="dunkel"] .gross.akzent.inspo-koch{background:linear-gradient(135deg,#2c3317 0%, #3d4520 100%); color:#e6ebe2}
:root[data-thema="dunkel"] .gross.akzent.inspo-heil{background:linear-gradient(135deg,#33251a 0%, #4a3320 100%)}
:root[data-thema="dunkel"] .gross.akzent .gr-titel{color:#e6ebe2}
:root[data-thema="dunkel"] .gross.akzent .gr-sub{color:rgba(230,235,226,.72)}
:root[data-thema="dunkel"] .gross.akzent .gr-sub b{color:#e8d49a}
:root[data-thema="dunkel"] .gross.akzent .gr-ic .ic,
:root[data-thema="dunkel"] .gross.akzent .gr-pfeil{color:#d9b264}
:root[data-thema="dunkel"] .gross.akzent .gr-strich,
:root[data-thema="dunkel"] .gross.akzent.inspo-heil .gr-strich{background:#d9b264}
:root[data-thema="dunkel"] .gross.akzent.inspo-heil .gr-sub{color:rgba(230,235,226,.72)}
:root[data-thema="dunkel"] .gross.akzent.inspo-heil .gr-sub b{color:#e8d49a}
:root[data-thema="dunkel"] .gross.akzent.inspo-heil .gr-ic .ic,
:root[data-thema="dunkel"] .gross.akzent.inspo-heil .gr-pfeil{color:#d9b264}
/* Dunkel: das gezeichnete Logo als heller "Aufkleber" – die Zeichnung
selbst bleibt unangetastet, nur ihr weisser Grund wird zur runden Karte */
:root[data-thema="dunkel"] .brand-mark{background:#fbfaf5; border-radius:14px; padding:5px;
box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* Dunkel: der Hinweis-Kasten (Heilkunde-Warnung u. a.) – dunkles Bernstein,
helle Schrift. Vorher: helle Schrift auf heller Cremeflaeche = unlesbar. */
:root[data-thema="dunkel"] .vorlaeufig{background:#332a17; border-color:#584a24; color:#e8dcbb}
:root[data-thema="dunkel"] .vorlaeufig .ic{color:#d9b264}
/* Mitglieder-Editor: eine Zeile je Person */
.mg-zeile{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.mg-zeile input{flex:1 1 auto; min-width:0}
.mg-zeile select{flex:0 0 118px}
.mg-del{flex:none; width:34px; height:34px; border:none; border-radius:10px; cursor:pointer;
background:var(--warn-bg); color:var(--warn); font-size:19px; font-weight:700; line-height:1}
:root[data-thema="dunkel"] .mg-del{background:#3a2320; color:#f0937f}
/* ================= Orga-Werkzeugkasten: vier Zonen ================= */
.zone-gelb{--zf:#f2c230; --zt:#8a7208; --ztint:#fdf8e2; --zplak:#faeeb9}
.zone-gruen{--zf:#2f5c34; --zt:#2f5c34; --ztint:#f1f5ea; --zplak:#e3ecd8}
.zone-blau{--zf:#4a83c4; --zt:#2f5f94; --ztint:#eef4fa; --zplak:#dce9f6}
.zone-terra{--zf:#B5532A; --zt:#8f3f1e; --ztint:#faf1ec; --zplak:#f3e0d5}
.zonekopf{display:flex; align-items:center; gap:8px; font-family:Georgia,serif; font-weight:700;
font-size:15px; margin:24px 0 10px; color:var(--zt)}
.zonekopf::before{content:""; width:22px; height:4px; border-radius:2px; background:var(--zf)}
.wz{position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
background:linear-gradient(180deg,#fff,var(--ztint)); border:1px solid var(--linie); border-radius:18px;
padding:14px 14px 14px 19px; margin-bottom:12px; min-height:72px; box-shadow:var(--schatten); font-family:inherit}
.wz::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:18px 0 0 18px; background:var(--zf)}
.wz:active{transform:translateY(1px)}
.wz-ic{width:44px; height:44px; border-radius:13px; background:var(--zplak); display:flex; align-items:center; justify-content:center; flex:none}
.wz-ic .ic{width:23px; height:23px; color:var(--zt)}
.wz-text{flex:1; min-width:0}
.wz-titel{display:block; font-family:Georgia,serif; font-weight:700; font-size:17.5px; color:var(--gruen-tief); line-height:1.2}
.wz-status{display:block; font-size:13.5px; color:var(--text-leise); margin-top:2px}
.wz-chev{width:28px; height:28px; border-radius:50%; background:var(--zf); color:#fff; display:flex; align-items:center;
justify-content:center; flex:none; font-weight:700; font-size:15px; box-shadow:0 2px 5px rgba(29,59,35,.25)}
.zonenlinie{width:120px; height:3px; border-radius:2px; margin:4px 0 14px; background:var(--zf)}
/* Verwaltung am Wir-Seitenende: leise Steinkarten */
.vtrenn{border:none; border-top:1px solid var(--linie); margin:20px 0 12px}
.vlabel{font-size:13px; letter-spacing:.06em; color:var(--text-leise); font-weight:700; margin-bottom:10px}
.stein{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; background:#f3f2ec;
border:1px solid #dcdecb; border-radius:18px; padding:12px 14px; min-height:64px; margin-bottom:10px; font-family:inherit}
.stein:active{transform:translateY(1px)}
.stein-ic{width:40px; height:40px; border-radius:12px; background:#e9e8dd; display:flex; align-items:center; justify-content:center; flex:none}
.stein-ic .ic{width:20px; height:20px; color:var(--text-leise)}
.stein-text{flex:1}
.stein-titel{display:block; font-family:Georgia,serif; font-weight:700; font-size:17px; color:var(--gruen-tief)}
.stein-sub{display:block; font-size:13px; color:var(--text-leise)}
.stein-chev{color:var(--text-leise); font-size:18px; font-weight:700; flex:none}
/* Formularfelder entblasst: sichtbare Flaeche, satter Fokus */
.field label{font-size:14.5px; font-weight:600; color:var(--text)}
.field input,.field select,.field textarea{background:#f6f7f1; border:1.5px solid #c2c8b2; font-size:16px; padding:12px 14px}
.field input,.field select{min-height:48px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; background:#fff;
border-color:var(--gruen); box-shadow:0 0 0 3px rgba(47,92,52,.16)}
.field input::placeholder,.field textarea::placeholder{color:#8f9a86; font-style:italic}
/* Orga-Sperrkarte */
.sperrkarte{background:var(--karte); border:1px solid var(--linie); border-radius:18px; padding:22px 16px;
text-align:center; box-shadow:var(--schatten)}
.sperr-plak{width:64px; height:64px; border-radius:50%; background:#f3e0d5; display:flex; align-items:center;
justify-content:center; margin:0 auto 12px}
.sperr-plak .ic{width:30px; height:30px; color:#8f3f1e}
.sperrkarte h2{font-family:Georgia,serif; color:var(--gruen-tief); font-size:20px; margin-bottom:6px}
.sperrkarte p{font-size:14px; color:var(--text-leise); margin-bottom:14px; line-height:1.45}
/* PIN-Karten */
.pinbox{background:linear-gradient(180deg,#fff,#faf1ec); border:1px solid var(--linie); border-left:5px solid #B5532A;
border-radius:18px; padding:16px; margin-bottom:14px}
.pinbox h3{font-family:Georgia,serif; font-size:17px; color:var(--gruen-tief); margin-bottom:3px}
.pinbox .pin-stat{font-size:13.5px; color:var(--text-leise); margin-bottom:10px}
.pinrow{display:flex; gap:10px}
.pinrow .field{flex:1; margin:0; min-width:0}
.pinrow .pin-btn{flex:none; min-height:48px; padding:0 18px; background:#B5532A; color:#fff; border:none;
border-radius:12px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit}
/* Dunkelmodus fuer alles Neue */
:root[data-thema="dunkel"] .zone-gelb{--zf:#e8c95a; --zt:#e8c95a; --zplak:rgba(232,201,90,.16)}
:root[data-thema="dunkel"] .zone-gruen{--zf:#9dbf82; --zt:#9dbf82; --zplak:rgba(157,191,130,.16)}
:root[data-thema="dunkel"] .zone-blau{--zf:#6fa3d8; --zt:#6fa3d8; --zplak:rgba(111,163,216,.16)}
:root[data-thema="dunkel"] .zone-terra{--zf:#d08a66; --zt:#d08a66; --zplak:rgba(208,138,102,.16)}
:root[data-thema="dunkel"] .wz{background:#1e241d}
:root[data-thema="dunkel"] .wz-chev{color:#151a14}
:root[data-thema="dunkel"] .stein{background:#232920; border-color:#33402f}
:root[data-thema="dunkel"] .stein-ic{background:#2b332a}
:root[data-thema="dunkel"] .field input,:root[data-thema="dunkel"] .field select,
:root[data-thema="dunkel"] .field textarea{background:#242b22; border-color:#3a4536; color:#e6ebe2}
:root[data-thema="dunkel"] .field input:focus,:root[data-thema="dunkel"] .field select:focus,
:root[data-thema="dunkel"] .field textarea:focus{background:#1a201a; border-color:#9dbf82; box-shadow:0 0 0 3px rgba(157,191,130,.25)}
:root[data-thema="dunkel"] .sperr-plak{background:rgba(208,138,102,.16)}
:root[data-thema="dunkel"] .sperr-plak .ic{color:#d08a66}
:root[data-thema="dunkel"] .pinbox{background:#1e241d; border-left-color:#d08a66}
:root[data-thema="dunkel"] .pin-btn{background:#d08a66; color:#151a14}
/* "Unseren Garten zeigen": helles Fruehlingsgruen zwischen den dunklen Kacheln */
.gross.zeigen{background:linear-gradient(160deg,#c4d89a 0%,#9db873 100%); color:#1d3b23}
.gross.zeigen .gr-titel{color:#1d3b23}
.gross.zeigen .gr-sub{color:rgba(29,59,35,.75)}
.gross.zeigen .gr-strich{background:#1d3b23}
.gross.zeigen .gr-ic .ic,.gross.zeigen .gr-pfeil{color:#2f5c34}
:root[data-thema="dunkel"] .gross.zeigen{background:linear-gradient(160deg,#41522c 0%,#33411f 100%); color:#dcebc4}
:root[data-thema="dunkel"] .gross.zeigen .gr-titel{color:#dcebc4}
:root[data-thema="dunkel"] .gross.zeigen .gr-sub{color:rgba(220,235,196,.75)}
:root[data-thema="dunkel"] .gross.zeigen .gr-strich{background:#a9c88a}
:root[data-thema="dunkel"] .gross.zeigen .gr-ic .ic,:root[data-thema="dunkel"] .gross.zeigen .gr-pfeil{color:#a9c88a}
/* ------------------------------------------- Willkommens-Karte (erstes Oeffnen) */
.wk-deckel{position:fixed; inset:0; background:rgba(29,43,31,.45); z-index:60;
display:flex; align-items:center; justify-content:center; padding:18px;
backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}
.wk-karte{background:var(--karte); border-radius:18px; padding:22px 20px 16px;
max-width:420px; width:100%; max-height:86vh; overflow:auto;
box-shadow:0 18px 50px rgba(0,0,0,.28)}
.wk-karte h2{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:20px}
.wk-karte p{font-size:14.5px; line-height:1.55; margin:0 0 10px; color:var(--text)}
.wk-punkte{background:var(--gruen-blass); border-radius:12px; padding:10px 12px}
.wk-karte .btn{width:100%; margin-top:4px}
.wk-ohne{display:block; width:100%; margin-top:8px; background:none; border:none;
color:var(--text-leise); font-size:13.5px; text-decoration:underline; padding:6px; cursor:pointer}
:root[data-thema="dunkel"] .wk-karte{background:#232920}
:root[data-thema="dunkel"] .wk-punkte{background:#2b3226}
/* ---------- v80: Feinschliff aus dem Nutzertest (5 Personas) ---------- */
/* Bedienen = gerade Schrift; Lesen = Serife (Buttons/Aufklapper) */
.klapp summary, .kat summary, .zub summary{font-family:-apple-system,system-ui,sans-serif; font-weight:700}
/* Zwischenlabels und Hinweise dunkler (Lesbarkeit 70+) */
.lbl{color:#49543f}
.tip{color:#3d4636}
.wk-ohne{color:var(--text); font-weight:600}
/* giftig-Etikett groesser */
.fz-gift{font-size:13px; font-weight:800; padding:2px 8px}
/* Loesch-X ruhig grau statt Alarm-Spalte (Rueckfrage kommt ohnehin) */
.mg-zeile .mg-del{color:#8f968a; border-color:#c6ccbc}
/* Chevron-Pfeile auf Sonnengelb dunkel (Kontrast) */
.zone-gelb .wz-chev{color:#8a7208}
.zone-gelb .wz-ic svg{color:#8a7208}
/* Farb-Verfassung auf der Startseite: Gelb nur Termine, Terrakotta nur Ernte, Rot nur Notfall */
.gross.gelb .gr-ic .ic{color:#f2c230}
.gross.gelb .gr-strich{background:#f2c230}
.gross.ernte .gr-ic .ic{color:#e0956b}
.gross.ernte .gr-strich{background:#c9744a}
.gross.notruf{background:var(--karte); border:1.5px solid #e5cfc9}
.gross.notruf .gr-titel{color:#b23b2e}
.gross.notruf .gr-ic .ic, .gross.notruf .gr-pfeil{color:#b23b2e}
.gross.notruf .gr-strich{background:#b23b2e}
.gross.notruf .gr-sub{color:#7a5049}
/* Persoenliche Giesswoche auf der Dienstkarte */
.sk-meine{display:inline-block; margin-top:9px; font-weight:750; font-size:13.5px;
color:var(--gruen-tief); background:var(--gruen-blass); border-radius:999px; padding:4px 12px}
/* Rezept-Suche bleibt beim Scrollen stehen */
.suchzeile{position:sticky; z-index:20; background:var(--papier); padding:8px 0 6px;
top:calc(max(calc(env(safe-area-inset-top,0px) - 12px), min(env(safe-area-inset-top,0px), 20px)) + 62px)}
/* Dunkelmodus-Reparaturen */
:root[data-thema="dunkel"] .mitmach{background:#24462b}
:root[data-thema="dunkel"] .mitmach .mm-titel, :root[data-thema="dunkel"] .mitmach .mm-sub{color:#eef2e6}
:root[data-thema="dunkel"] .gross.notruf{background:#2a1d1a; border-color:#5c3a34}
:root[data-thema="dunkel"] .gross.notruf .gr-titel, :root[data-thema="dunkel"] .gross.notruf .gr-ic .ic,
:root[data-thema="dunkel"] .gross.notruf .gr-pfeil{color:#e88a78}
:root[data-thema="dunkel"] .gross.notruf .gr-sub{color:#c9a79e}
:root[data-thema="dunkel"] .suchzeile{background:#141914}
:root[data-thema="dunkel"] .brand-mark img{background:#eef2e6; border-radius:12px; padding:2px}
/* Inventur-Vermerk im Lageplan: was erst ab 2027 wieder im Beet steht */
.fz-ab{display:inline-block; background:#fbf0cd; color:#8a7208; border-radius:999px;
padding:1px 8px; font-size:11px; font-weight:700; margin-left:4px; white-space:nowrap}
:root[data-thema="dunkel"] .fz-ab{background:#3d3517; color:#e8cf7a}
/* Orga-Notizen: der Merkzettel */
.on-zeile{display:flex; gap:10px; align-items:flex-start}
.on-zeile .on-text{flex:1; font-size:15px; line-height:1.45; color:var(--text)}
.on-von{font-size:12.5px; color:var(--text-leise); margin-top:3px}
.on-zeile.fertig .on-text{color:var(--text-leise); text-decoration:line-through}
.on-zeile .tk-leise{flex:none; margin-top:0}
/* Rezept-Filter: grosse tippbare Knoepfe */
.rz-chips{display:flex; gap:8px; margin:10px 0 4px; flex-wrap:wrap}
.rz-chip{border:1.5px solid var(--linie); background:var(--karte); color:var(--text);
border-radius:999px; padding:8px 16px; font-size:14px; font-weight:650; cursor:pointer}
.rz-chip.aktiv{background:var(--gruen-tief); border-color:var(--gruen-tief); color:#fff}
/* Herkunfts-Geschichte: das alte Wissen, warm erzaehlt (Terrakotta = Ernte/Kueche) */
.herkunft{background:#f9efe6; border-left:4px solid #c9744a; border-radius:0 14px 14px 0;
padding:13px 16px; margin-top:12px}
.herkunft .hk-titel{font-family:Georgia,serif; font-weight:700; color:#8f3f1e; font-size:15px; margin-bottom:4px}
.herkunft p{margin:0; font-size:14.5px; line-height:1.55; color:#54402f; font-style:italic}
:root[data-thema="dunkel"] .rz-chip{background:#232920; border-color:#3a4236; color:#e6ebe2}
:root[data-thema="dunkel"] .rz-chip.aktiv{background:#2f5c34; border-color:#2f5c34; color:#fff}
:root[data-thema="dunkel"] .herkunft{background:#2a211a; border-left-color:#c9744a}
:root[data-thema="dunkel"] .herkunft p{color:#d8c7b4}
/* Einheitliches Filter-Schema: Suchfelder bleiben ueberall beim Scrollen stehen */
.searchbar{position:sticky; z-index:20; background:var(--papier); padding:8px 0 6px;
top:calc(max(calc(env(safe-area-inset-top,0px) - 12px), min(env(safe-area-inset-top,0px), 20px)) + 62px)}
:root[data-thema="dunkel"] .searchbar{background:#141914}
/* Klapplisten als solche kenntlich: heller Kasten, Pfeil, sichtbarer Zustand */
.heil-filter .field select{appearance:none; -webkit-appearance:none; width:100%;
background:var(--karte) url('data:image/svg+xml;utf8,') no-repeat right 14px center;
border:1.5px solid #c2c8b2; border-radius:12px; padding:12px 40px 12px 14px; font-size:15.5px; color:var(--text)}
.heil-filter .field.gewaehlt select, .heil-filter.gewaehlt select{border-color:var(--gruen); color:var(--gruen-tief); font-weight:700}
:root[data-thema="dunkel"] .heil-filter .field select{background-color:#232920; border-color:#3a4236; color:#e6ebe2}
/* Von-frueher-Zweitzeichen auf Rezeptkarten */
.rk-frueher{background:#f9efe6; color:#8f3f1e}
:root[data-thema="dunkel"] .rk-frueher{background:#2a211a; color:#e0a883}
/* Signature-Menü */
.menue-teaser{display:block; width:100%; text-align:left; cursor:pointer; position:relative;
background:linear-gradient(150deg,#f9efe6 0%, #f2ddc9 100%); border:1.5px solid #e5cfc0;
border-radius:16px; padding:14px 44px 14px 16px; margin:4px 0 10px}
.menue-teaser .mt-kicker{display:block; font-size:11px; font-weight:800; letter-spacing:1.2px;
text-transform:uppercase; color:#8f3f1e}
.menue-teaser .mt-titel{display:block; font-family:Georgia,serif; font-weight:700; font-size:17.5px;
color:#1d3b23; margin-top:2px}
.menue-teaser .mt-sub{display:block; font-size:13px; color:#7a5c49; margin-top:2px}
.menue-teaser .gr-pfeil{position:absolute; right:14px; bottom:12px; color:#8f3f1e}
.gang-kicker{font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#8f3f1e}
.gang-pflanzen{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.gp-chip{border:1px solid #cfd6c2; background:var(--gruen-blass); color:var(--gruen-tief);
border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:650; cursor:pointer}
.gp-chip.gp-rezept{background:#f9efe6; border-color:#e5cfc0; color:#8f3f1e}
.gang-zeile{font-size:14.5px; line-height:1.5; padding:3px 0; color:var(--text)}
:root[data-thema="dunkel"] .menue-teaser{background:linear-gradient(150deg,#2a211a 0%, #33261c 100%); border-color:#5c4738}
:root[data-thema="dunkel"] .menue-teaser .mt-titel{color:#eef2e6}
:root[data-thema="dunkel"] .menue-teaser .mt-sub{color:#c9a79e}
:root[data-thema="dunkel"] .gp-chip{background:#24462b; border-color:#3a5c40; color:#cfe0c8}
:root[data-thema="dunkel"] .gp-chip.gp-rezept{background:#2a211a; border-color:#5c4738; color:#e0a883}
/* Personen-Stepper im Menue + kleine Mengen-Chips im Rezept */
.stepper{display:flex; align-items:center; gap:12px; margin:10px 0 0}
.stepper button{width:46px; height:46px; border-radius:14px; border:1.5px solid var(--linie);
background:var(--karte); color:var(--gruen-tief); font-size:24px; font-weight:700; cursor:pointer}
.stepper .st-wert{font-family:Georgia,serif; font-weight:700; font-size:18px; color:var(--gruen-tief); min-width:120px; text-align:center}
.rz-chip.rz-klein{padding:6px 14px; font-size:13.5px}
:root[data-thema="dunkel"] .stepper button{background:#232920; border-color:#3a4236; color:#e6ebe2}
:root[data-thema="dunkel"] .stepper .st-wert{color:#eef2e6}
/* Zahlen-Ueberblick in der Nutzerliste */
.zdf{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px; margin:4px 0 12px}
.zdf-k{background:var(--gruen-blass); border-radius:12px; padding:8px 4px; text-align:center}
.zdf-k b{display:block; font-family:Georgia,serif; font-size:22px; color:var(--gruen-tief); line-height:1.1}
.zdf-k span{font-size:10.5px; color:var(--text-leise); font-weight:650}
:root[data-thema="dunkel"] .zdf-k{background:#24462b}
:root[data-thema="dunkel"] .zdf-k b{color:#eef2e6}