/* Child-Theme graswachstum: frische Gruentoene aus dem graswachstum-Logo, weisser Grund, sachliche Ueberschriften */
body[data-seite="graswachstum"]{--ff-grund:#FFFFFF;--ff-flaeche:#F3F7EE;--ff-text:#1F2D22;--ff-leise:#566655;--ff-linie:#E3EDDB;
  --ff-primaer:#286B19;--ff-sekundaer:#1F3B22;--ff-akzent:#286B19;--ff-akzent-hell:#8BBD0D;--ff-akzent-flaeche:#EEF4EA;
  --ff-dunkel:#1F3B22;--ff-titelschrift:'Source Sans 3',system-ui,sans-serif;--ff-titelgewicht:800}
/* Seiten aus den Vorlagen von agff-redaktion (Versuche .vk, Versuch/Standort .vd, Termine .ak) bringen keinen Rahmen mit: wie .ff-rahmen .ff-seite */
body[data-seite="graswachstum"] :is(.vk,.vd,.ak){max-width:1200px;margin:0 auto;padding:48px 24px 72px;box-sizing:border-box}
@media (max-width:640px){body[data-seite="graswachstum"] :is(.vk,.vd,.ak){padding-left:16px;padding-right:16px}}
/* Titel und Einleitung dieser Seiten stehen direkt im Inhalt (die Vorlagen des Themes setzen dort immer einen Rahmen): gleich breit.
   Bewusst ohne :has() – eine Regel mit :has() liess die Seiten mit Leaflet-Karte im Browser hängen (a5faec9). */
body[data-seite="graswachstum"] .ff-inhalt > :is(h1,h2,p,ul,ol){max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
body[data-seite="graswachstum"] .ff-inhalt > :is(h1,p):first-child{margin-top:48px}
body[data-seite="graswachstum"] .ff-inhalt > :is(h1,h2,p,ul,ol) + :is(.vk,.ak){padding-top:16px}
@media (max-width:640px){body[data-seite="graswachstum"] .ff-inhalt > :is(h1,h2,p,ul,ol){padding-left:16px;padding-right:16px}}
/* Messnetz: Karte mit den aktuellen Messwerten (partials/bereich-messnetz.html.twig), ganze Breite, Karte links. Eigene Regeln, weil
   css/start.css nur auf der Startseite geladen ist; Punkte und Werte setzt js/graswachstum-start.js */
.ff-bereich-karten .gw-kachel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:28px;align-content:start}
.gw-kachel .gw-karte{grid-row:1/4;margin:0;padding:0;border-radius:14px;overflow:hidden;background:var(--ff-flaeche)}
.gw-kachel .gw-karte img{display:block;width:100%;height:auto}
.gw-kachel .gw-karte-feld{position:relative}
.gw-kachel .gw-punkt{position:absolute;transform:translate(-50%,-50%);min-width:24px;height:24px;padding:0 4px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--ff-primaer);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 2px #fff}
.gw-kachel .gw-punkt.gw-alt{background:#8C958D}
.gw-kachel b[data-gw-titel]{font-size:22px;margin-top:4px}
.gw-kachel .gw-einheit{margin:6px 0 16px;color:var(--ff-leise)}
.gw-kachel .gw-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-self:start;align-items:start}
.gw-kachel .gw-wert{background:var(--ff-flaeche);border-radius:12px;padding:10px 12px;border-top:4px solid var(--ff-akzent-hell)}
.gw-kachel .gw-wert b{display:block;font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.gw-kachel .gw-wert span{display:block;margin-top:4px;font-size:14px;color:var(--ff-leise)}
.gw-kachel .gw-wert.gw-alt{border-top-color:#C9CFC9}.gw-kachel .gw-wert.gw-alt b{color:var(--ff-leise)}
@media (max-width:760px){.ff-bereich-karten .gw-kachel{grid-template-columns:1fr}.gw-kachel .gw-karte{grid-row:auto;margin-bottom:12px}}
/* Werkzeuge (templates/werkzeuge.html.twig): Apps als Karten mit Quellen und aufklappbarem QR-Code, darunter Links */
.gw-werkzeuge{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:8px 0 40px}
.gw-werkzeug{display:flex;flex-direction:column;gap:10px;padding:18px}
.gw-werkzeug-kopf{display:flex;gap:14px;align-items:flex-start;color:inherit;text-decoration:none}
.gw-werkzeug-kopf b{display:block;font-size:19px;color:var(--ff-primaer)}
.gw-werkzeug-kopf small{display:block;color:var(--ff-leise);margin-top:2px}
.gw-werkzeug-symbol{flex:0 0 auto;display:flex;width:48px;height:48px;border-radius:12px;align-items:center;justify-content:center;background:var(--ff-akzent-flaeche);color:var(--ff-primaer)}
.gw-werkzeug-kopf:hover b{text-decoration:underline}
.gw-quellen{margin:0;font-size:14px;color:var(--ff-leise)}
.gw-qr{margin-top:auto;font-size:14px}.gw-qr summary{cursor:pointer;color:var(--ff-leise)}
.gw-qr img{display:block;margin-top:8px;width:132px;height:132px}
.gw-werkzeuge-links h2{margin-top:0}.gw-werkzeuge-links h3{margin:24px 0 6px;font-size:18px}
.gw-werkzeuge-links ul{margin:0;padding-left:20px}
.gw-hinweis{margin-top:32px;font-size:14px;color:var(--ff-leise)}