:root{--text:#1f2a24;--linie:#2b2b2b;--akzent:#2e7d4f;--akzent-d:#23633e;--bg:#f4f5f2;--karte:#fff;--grau:#5a625d;
  --comic:"Bangers","Comic Neue","Comic Sans MS","Chalkboard SE",cursive;}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 "Comic Neue",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--akzent-d)}
.nav{background:#fff;border-bottom:2px solid var(--linie);padding:.5rem 1rem;display:flex;gap:1.2rem}.nav a{text-decoration:none;font-weight:700}
.nav a:hover,.nav a:focus{text-decoration:underline}
.held{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;max-width:46rem;margin:1.2rem auto 0;padding:1rem 1.3rem;
  background:#fdf8e4;border:2px solid var(--linie);border-radius:12px;box-shadow:3px 3px 0 var(--linie)}
.held h1{margin:0;font-family:var(--comic);font-weight:400;letter-spacing:.03em;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.05;color:var(--akzent-d)}
.untertitel{margin:.4rem 0 0;color:var(--grau)}
.held-text{flex:1 1 16rem}
.maskottchen{display:flex;align-items:flex-end;gap:.4rem;flex:0 0 auto}
.maskottchen svg{display:block}
.blase{position:relative;max-width:9.5rem;background:#fff;border:2px solid var(--linie);border-radius:14px;padding:.35rem .6rem;font-size:.9rem;line-height:1.2;margin-bottom:4.2rem}
.blase::after{content:"";position:absolute;right:-12px;bottom:10px;border:6px solid transparent;border-left:10px solid var(--linie)}
.figuren{max-width:46rem;margin:.8rem auto 0;display:flex;justify-content:center;gap:.9rem;padding:0 1rem;opacity:.75}
.figuren svg{width:30px;height:auto}
main{max-width:46rem;margin:0 auto;padding:.5rem 1rem 1rem}
.karte{background:var(--karte);border:2px solid var(--linie);border-radius:12px;box-shadow:3px 3px 0 #0002;padding:1.1rem 1.2rem;margin:1rem 0}
label{display:block;font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
input{width:100%;padding:.6rem .75rem;font:inherit;border:2px solid var(--linie);border-radius:8px;background:#fff;color:var(--text)}
input:focus{outline:3px solid #9fd3b2;outline-offset:1px}
fieldset{border:0;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
legend{font-weight:700;margin-bottom:.4rem}
fieldset label{font-size:.95rem;font-weight:400;display:flex;gap:.4rem;align-items:center;margin:0;padding:.25rem .75rem;border:2px solid #c9cdc8;border-radius:99px;cursor:pointer;background:#fff}
fieldset label:has(input:checked){background:var(--c,#fff);border-color:var(--linie)}
fieldset input{width:1rem;height:1rem;accent-color:var(--akzent)}
[data-art="Kehricht"]{--c:#e3e5e3}[data-art="Papier"]{--c:#f3f6fa}[data-art="Karton"]{--c:#f1dcc0}[data-art="Grüngut"]{--c:#d6efc6}[data-art="Metall"]{--c:#dde6ec}[data-art="Glas"]{--c:#d3edf7}
#eg-titel{margin:0;font-size:1.5rem}
ul#termine{list-style:none;padding:0;margin:.8rem 0}
ul#termine li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid #e3e5e1;padding:.45rem .2rem}
.art{font-size:.85rem;padding:.05rem .6rem;border:1px solid #9aa19c;border-radius:99px;background:var(--c,#eee)}
.sprech{margin:1.2rem 0 .6rem;font-size:1.2rem}
.abos{display:flex;flex-wrap:wrap;gap:.5rem}
.knopf{display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;padding:.5rem .9rem;border:2px solid var(--linie);border-radius:8px;box-shadow:2px 2px 0 var(--linie);font:inherit;font-weight:700;cursor:pointer}
.knopf:hover{background:var(--akzent-d)}
.knopf:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--linie)}
.knopf:focus-visible{outline:3px solid #9fd3b2;outline-offset:2px}
.knopf.hell,.knopf.blau,.knopf.violett{background:#fff;color:var(--text)}.knopf.hell:hover,.knopf.blau:hover,.knopf.violett:hover{background:#eef3ef}
.klein{font-size:.9rem;color:var(--grau)}
.combo{position:relative;display:flex;gap:.5rem}.combo input{flex:1;min-width:0}.combo .knopf{margin:0}
#gemeinde-liste{position:absolute;top:100%;left:0;right:7rem;z-index:5;max-height:16rem;overflow:auto;margin:.25rem 0 0;padding:0;list-style:none;background:#fff;border:2px solid var(--linie);border-radius:8px;box-shadow:3px 3px 0 #0002}
#gemeinde-liste li{padding:.45rem .7rem;cursor:pointer;display:flex;justify-content:space-between}
#gemeinde-liste li .bfs{color:var(--grau);font-size:.85rem}
#gemeinde-liste li[aria-selected="true"],#gemeinde-liste li:hover{background:#e6f2ea}
.hilfe{background:#f7f8f6;border-left:3px solid var(--akzent);border-radius:4px;padding:.2rem .9rem;margin-top:1rem}
footer{max-width:46rem;margin:0 auto 2rem;padding:.5rem 1rem;font-size:.88rem;color:var(--grau)}
@media (max-width:560px){
  .held{margin:.8rem .6rem 0}.maskottchen{margin-left:auto}
  .combo{flex-wrap:wrap}.combo .knopf{flex:1 0 100%}#gemeinde-liste{right:0;top:3.2rem}
  .abos .knopf{flex:1 0 100%;text-align:center}main{padding:.4rem .6rem}
}
/* Zonenwahl (ruhig, im Stil der Karten) */
.zonen-wahl{margin:.8rem 0 .4rem;padding:.7rem .9rem;background:#fdf8e4;border:2px dashed #b9b08a;border-radius:10px}
.zonen-wahl label{margin-bottom:.1rem}.zonen-wahl .klein{margin:.1rem 0 .5rem}
.zonen-wahl select{width:100%;padding:.55rem .7rem;font:inherit;border:2px solid var(--linie);border-radius:8px;background:#fff;color:var(--text);box-shadow:2px 2px 0 #0002}
.zonen-wahl select:focus{outline:3px solid #9fd3b2;outline-offset:1px}