/* Freigabeseite Green-Zones. Farben aus shared/design-system (Green-Zones: Smaragd #064E3B, Mint #10B981),
   Schrift Ubuntu selbst ausgeliefert wie bei den Widgets (fonts/ kommt per build.py aus umweltzonen-checker/fonts). */
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ubuntu-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ubuntu-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ubuntu-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ubuntu-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ubuntu-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ubuntu-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --smaragd: #064E3B; --mint: #10B981; --mint-hell: #D1FAE5; --grund: #F4F6F5; --karte: #FFFFFF;
  --text: #111827; --leise: #6B7280; --linie: #E5E7EB; --rot: #B91C1C; --rot-hell: #FEE2E2;
  --gelb: #92400E; --gelb-hell: #FEF3C7; --blau-hell: #E0F2FE; --blau: #075985;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.kopf { background: var(--smaragd); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.marke { font-size: 17px; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.marke b { font-weight: 700; }
.punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); display: inline-block; }
.ab { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.ab button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; }
main { max-width: 1180px; margin: 0 auto; padding: 16px 16px 48px; }
h1 { font-size: 24px; margin: 8px 0 4px; color: var(--smaragd); }
h2 { font-size: 18px; margin: 28px 0 10px; color: var(--smaragd); display: flex; align-items: center; gap: 8px; }
h3 { font-size: 18px; margin: 2px 0 6px; line-height: 1.3; }
h4 { font-size: 16px; margin: 14px 0 4px; }
.zahl { background: var(--mint-hell); color: var(--smaragd); border-radius: 999px; padding: 0 9px; font-size: 14px; }
.lage p { margin: 4px 0; color: var(--leise); }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.meta { margin: 0; color: var(--leise); font-size: 14px; }
.teaser { color: var(--leise); font-style: italic; }
.bild { margin: 12px 0; }
.bild img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--linie); }
.bild figcaption { color: var(--leise); font-size: 14px; margin-top: 6px; }
.sprachen { font-size: 14px; color: var(--leise); margin: 4px 0; }
.sprache { display: inline-block; background: var(--smaragd); color: #fff; border-radius: 4px; font-size: 12px; padding: 0 6px; margin-right: 4px; vertical-align: 1px; }
details.text { border-top: 1px solid var(--linie); padding: 8px 0 0; margin-top: 8px; }
details.text > summary { cursor: pointer; font-weight: 500; }
details.text p, details.text li { max-width: 68ch; }
.hinweis { border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 15px; }
.hinweis.warn { background: var(--gelb-hell); color: var(--gelb); }
.hinweis.info { background: var(--blau-hell); color: var(--blau); }
.hinweis.gut { background: var(--mint-hell); color: var(--smaragd); }
.vergleich { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 8px 0; }
.vergleich th { text-align: left; font-weight: 500; font-size: 15px; padding-top: 6px; }
.vergleich td { vertical-align: top; width: 50%; padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.vergleich td small { display: block; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .6px; }
.vergleich td ul { margin: 4px 0 0; padding-left: 18px; }
.alt { background: #F3F4F6; color: #374151; }
.neu { background: var(--mint-hell); color: var(--smaragd); }
.leer { color: var(--leise); font-style: italic; }
.fund { border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 15px; overflow-wrap: anywhere; }
.fund.amtlich { background: var(--mint-hell); }
.fund.presse { background: var(--blau-hell); }
.fund.fehlt { background: var(--rot-hell); color: var(--rot); border: 2px solid var(--rot); }
.fund a { color: inherit; }
.aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; }
.aktionen form { margin: 0; }
.zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.warum { font-size: 13px; color: var(--leise); margin: 0; max-width: 32ch; }
details.mehr > summary { list-style: none; cursor: pointer; border: 1px solid var(--linie); border-radius: 8px; padding: 9px 14px; font-weight: 500; background: #fff; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr[open] { flex-basis: 100%; }
details.mehr[open] > summary { background: var(--grund); }
details.mehr form { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 15px; }
textarea, input { font: inherit; padding: 9px 10px; border: 1px solid #D1D5DB; border-radius: 8px; width: 100%; background: #fff; }
textarea:focus, input:focus { outline: 2px solid var(--mint); border-color: var(--mint); }
button { font: inherit; font-weight: 500; border: 0; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
button.frei { background: var(--smaragd); color: #fff; }
button.frei:disabled { background: #9CA3AF; cursor: not-allowed; }
button.nach { background: var(--mint); color: #fff; align-self: flex-start; }
button.nein { background: var(--rot); color: #fff; align-self: flex-start; }
.entschieden { border-top: 1px solid var(--linie); margin-top: 12px; padding-top: 12px; color: var(--smaragd); font-weight: 500; }
.entschieden span { color: var(--leise); font-weight: 400; }
.meldung { border-radius: 8px; padding: 10px 14px; font-weight: 500; }
.meldung.gut { background: var(--mint-hell); color: var(--smaragd); }
.meldung.schlecht { background: var(--rot-hell); color: var(--rot); }
.anmeldung { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 20px; max-width: 380px; margin: 40px auto; display: flex; flex-direction: column; gap: 14px; }
.verlauf ul { padding-left: 0; list-style: none; }
.verlauf li { background: var(--karte); border-left: 4px solid var(--mint); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-size: 15px; }
.verlauf li.schlecht { border-left-color: var(--rot); }
.verlauf small { color: var(--leise); display: block; }
@media (max-width: 560px) {
  .vergleich td { display: block; width: 100%; }
  .vergleich tr { display: block; }
  h1 { font-size: 21px; }
}
details.mehr.haupt > summary { background: var(--smaragd); color: #fff; border-color: var(--smaragd); }
.erklaerung { margin: 0; font-size: 14px; color: var(--leise); max-width: 60ch; }
.nachher .absatz { border-left: 4px solid transparent; padding-left: 10px; margin: 6px 0; }
.nachher .absatz p, .nachher .absatz h4 { margin: 4px 0; }
.nachher .absatz.gleich { color: var(--leise); }
.nachher .absatz.neu { border-left-color: var(--mint); background: var(--mint-hell); color: var(--smaragd); border-radius: 0 6px 6px 0; }
.nachher .absatz.weg { border-left-color: var(--rot); background: var(--rot-hell); color: var(--rot); text-decoration: line-through; border-radius: 0 6px 6px 0; }
.nachher .absatz small { display: block; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .6px; text-decoration: none; padding-top: 4px; }

/* ── Dashboard (Runde 4): Kacheln, Filter, Tabelle mit aufklappbaren Zeilen. Ohne JavaScript: Kacheln sind Links,
   Filter ein GET-Formular, Zeilen sind <details>. Auf dem Handy werden Zeilen zu kompakten Karten. ── */
a.marke { color: #fff; text-decoration: none; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0 14px; }
.kachel { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  border: 1px solid var(--linie); background: var(--karte); color: var(--text); min-height: 104px; }
.kachel .kzahl { font-size: 34px; font-weight: 700; line-height: 1; }
.kachel .ktext { font-size: 14px; line-height: 1.3; }
.kachel.offen { background: var(--smaragd); border-color: var(--smaragd); color: #fff; }
.kachel.offen .kzahl { color: var(--mint-hell); }
.kachel.info { background: var(--blau-hell); border-color: #BAE6FD; color: var(--blau); }
.kachel.ruhig { color: var(--leise); }
.kachel.ruhig .kzahl { color: #D1D5DB; }
.kachel.aktiv { outline: 3px solid var(--mint); outline-offset: 2px; }
.kachel:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.filter label { font-size: 13px; font-weight: 500; color: var(--leise); }
.filter select, .filter input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #D1D5DB; border-radius: 8px; background: #fff; min-width: 140px; }
.filter .suche { flex: 1 1 220px; }
.filter .suche input { width: 100%; }
.filter .zuruecksetzen { font-size: 14px; color: var(--blau); align-self: center; }
.waehle { color: var(--leise); margin: 18px 0; }
.bereich h2 { margin-top: 22px; }
.leer-bereich { color: var(--leise); background: var(--karte); border: 1px dashed var(--linie); border-radius: 10px; padding: 14px; }
.liste { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.reihe { display: grid; gap: 10px; align-items: center; padding: 10px 14px; font-size: 15px; }
.reihe.artikel { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) 96px 140px; }
.reihe.zone { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, 1.6fr) 92px 96px 130px; }
.reihe.allgemein { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) 96px 140px; }
.kopfzeile { background: var(--grund); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--leise); border-bottom: 1px solid var(--linie); }
details.eintrag { border-bottom: 1px solid var(--linie); }
details.eintrag:last-child { border-bottom: 0; }
details.eintrag > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.eintrag > summary::-webkit-details-marker { display: none; }
details.eintrag > summary:hover { background: #F9FAFB; }
details.eintrag[open] > summary { background: var(--mint-hell); }
.zelle { min-width: 0; overflow-wrap: anywhere; }
.zelle.titel { font-weight: 500; }
.zelle.titel::before { content: "▸ "; color: var(--mint); }
details.eintrag[open] .zelle.titel::before { content: "▾ "; }
.zelle.wert { font-size: 14px; color: #374151; }
.zelle.wert.soll { color: var(--smaragd); }
.mehrzahl { font-size: 12px; color: var(--leise); white-space: nowrap; }
.zelle a { color: var(--blau); }
.stempel { display: inline-block; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.stempel.gut { background: var(--mint-hell); color: var(--smaragd); }
.stempel.warn { background: var(--gelb-hell); color: var(--gelb); }
.stempel.laeuft { background: var(--blau-hell); color: var(--blau); }
.stempel.grau { background: #F3F4F6; color: #4B5563; }
.stempel.fehlt { background: var(--rot-hell); color: var(--rot); }
.einzelheiten { padding: 4px 16px 16px; border-top: 1px solid var(--linie); background: #FCFDFC; }
details.verlauf { margin-top: 26px; }
details.verlauf > summary { cursor: pointer; font-weight: 700; color: var(--smaragd); font-size: 18px; }
@media (max-width: 760px) {
  main { padding: 12px 12px 40px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kachel { min-height: 88px; padding: 12px; }
  .kachel .kzahl { font-size: 28px; }
  .kachel .ktext { font-size: 13px; }
  .filter select, .filter input { min-width: 0; width: 100%; }
  .filter label { flex: 1 1 45%; }
  .filter .suche { flex-basis: 100%; }
  .filter button { width: 100%; }
  .kopfzeile { display: none; }
  .reihe.artikel, .reihe.zone, .reihe.allgemein { grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 12px; }
  .zelle.titel { grid-column: 1 / -1; font-size: 16px; }
  .zelle[data-label]:not(.titel)::before { content: attr(data-label) ": "; color: var(--leise); font-size: 12px; }
  .zelle.wert { grid-column: 1 / -1; }
  .einzelheiten { padding: 4px 10px 14px; }
  .aktionen button, details.mehr > summary { width: 100%; text-align: center; }
  .aktionen > * { flex: 1 1 100%; }
}