:root{--blau:#1e2678;--knopf:#1e2678;--knopf-hover:#151b58;--knopf-text:#fff;--grund:#fff;--flaeche:#f1f2f8;
--text:#1f2240;--leise:#575b79;--linie:#d9dbe8;--rahmen:#8a8eaa;--band:#1e2678;--band-text:#fff;--band-leise:#d3d6f0;
--fehler:#a01f1f;--warn-flaeche:#fbf0d2;--warn-text:#4d3800;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--blau:#e6e7f2;--knopf:#e6e7f2;--knopf-hover:#fff;--knopf-text:#1e2678;--grund:#11142b;--flaeche:#1a1e3f;--text:#e6e7f2;--leise:#a6a9c6;--linie:#2d3262;--rahmen:#6b71a8;--band:#1e2678;--band-text:#fff;--band-leise:#d3d6f0;--fehler:#ff9d9d;--warn-flaeche:#3a2f12;--warn-text:#f3e2b3;color-scheme:dark}
 :root:not([data-theme=light]) .nur-hell{display:none}:root:not([data-theme=light]) .nur-dunkel{display:inline}}
:root[data-theme=dark]{--blau:#e6e7f2;--knopf:#e6e7f2;--knopf-hover:#fff;--knopf-text:#1e2678;--grund:#11142b;--flaeche:#1a1e3f;--text:#e6e7f2;--leise:#a6a9c6;--linie:#2d3262;--rahmen:#6b71a8;--band:#1e2678;--band-text:#fff;--band-leise:#d3d6f0;--fehler:#ff9d9d;--warn-flaeche:#3a2f12;--warn-text:#f3e2b3;color-scheme:dark}
:root[data-theme=dark] .nur-hell{display:none}:root[data-theme=dark] .nur-dunkel{display:inline}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
::selection{background:var(--knopf);color:var(--knopf-text)}
:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
a{color:var(--blau);text-underline-offset:3px}
h1,h2,h3{text-wrap:balance;line-height:1.2}
.nur-dunkel{display:none}
label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:.3rem}
input:not([type=radio]),textarea{width:100%;font:inherit;color:var(--text);background:var(--grund);border:1px solid var(--rahmen);border-radius:4px;padding:.6rem .7rem;min-height:44px}
input[aria-invalid=true]{border-color:var(--fehler)}
textarea{resize:vertical;line-height:1.5}
input::placeholder{color:var(--leise)}
.knopf{font:inherit;font-weight:700;color:var(--knopf-text);background:var(--knopf);border:0;border-radius:4px;padding:.65rem 1.2rem;min-height:44px;cursor:pointer;white-space:nowrap;transition:background-color .12s ease-out}
.knopf:hover{background:var(--knopf-hover)}
.textknopf{font:inherit;color:var(--blau);background:none;border:0;padding:.5rem 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.leise{color:var(--leise)}
.zustand{color:var(--leise);font-style:italic;white-space:nowrap}
.adresse{color:var(--leise);overflow-wrap:break-word}
.fehler{color:var(--fehler);font-weight:600}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
time{font-variant-numeric:tabular-nums;color:var(--leise)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.verlauf{list-style:none;margin:0;padding:0}
.verlauf li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0}
.tag{font-size:1rem;color:var(--leise);margin:1.25rem 0 .25rem}
.klein{font-size:.875rem;margin:.6rem 0 0}

.verlauf{list-style:none;margin:0;padding:0}
.verlauf li{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0}
.tag{font-size:1rem;color:var(--leise);margin:1.25rem 0 .25rem}
.klein{font-size:.875rem;margin:.6rem 0 0}

.seitenkopf{max-width:76rem;margin:0 auto;padding:1.25rem 1rem;display:flex;align-items:center;gap:1rem}
.seitenkopf .titel{margin:0;font-size:1.3rem;font-weight:700;color:var(--blau)}
.seitenkopf .wer{margin:0 0 0 auto;text-align:right}
.seitenkopf .wer p{margin:0}
.abgleich{font-size:.875rem;color:var(--leise)}
.schale{max-width:76rem;margin:0 auto;padding:1rem 1rem 5rem;display:grid;grid-template-columns:15rem minmax(0,46rem);gap:3rem;align-items:start}
.anlegen{display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:1rem;border:1px solid var(--rahmen);border-radius:4px;font-weight:700;text-decoration:none}
.anlegen:hover,.anlegen[aria-current=page]{background:var(--flaeche)}
.verteilerliste ul{list-style:none;margin:0;padding:0}
.verteilerliste li a{display:flex;justify-content:space-between;align-items:center;gap:.75rem;min-height:2.6rem;padding:0 .6rem;color:var(--text);text-decoration:none}
.verteilerliste li a:hover{background:var(--flaeche)}
.verteilerliste li a[aria-current=page]{background:var(--flaeche);color:var(--blau);font-weight:700}
.zahl{font-variant-numeric:tabular-nums;color:var(--leise)}
.im-aufbau{font-style:italic;color:var(--leise);font-size:.875rem;white-space:nowrap}
.verteilerliste li a.in-arbeit{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:.35rem .6rem}
.inhalt h1{margin:0;font-size:clamp(1.8rem,5vw,2.4rem);color:var(--blau)}
.adresszeile{margin:.35rem 0 0;font-size:1.25rem;font-weight:600;overflow-wrap:anywhere}
.eckdaten{margin:.35rem 0 0;color:var(--leise)}
.zurueck{display:none}
.schale.einspaltig{grid-template-columns:minmax(0,46rem)}
.stoerung{background:var(--warn-flaeche);color:var(--warn-text);padding:1rem 1.25rem}
.stoerung p{margin:0}
.stoerung p+p{margin-top:.35rem}
.aufnehmen{margin-top:2rem;padding:1.25rem;background:var(--flaeche)}
.aufnehmen h2{font-size:1.15rem;margin:0 0 .85rem}
.formular{display:grid;grid-template-columns:1fr 1.4fr auto;gap:.75rem;align-items:start}
.formular>.knopf{margin-top:1.75rem}
.abc{position:sticky;top:0;z-index:1;background:var(--grund);display:grid;grid-template-columns:repeat(26,minmax(0,1fr));padding:.75rem 0;margin-top:2rem;border-bottom:1px solid var(--linie)}
.abc a,.abc span{display:flex;align-items:center;justify-content:center;min-height:2.75rem;font-weight:700}
.abc a{text-decoration:none}
.abc a:hover{text-decoration:underline}
.abc span{color:var(--linie)}
.suche{margin-top:1.5rem;max-width:24rem}
.gruppe{display:grid;grid-template-columns:4.5rem minmax(0,1fr);border-bottom:1px solid var(--linie);padding:1rem 0;scroll-margin-top:4rem}
.buchstabe{margin:0;font-size:2.6rem;line-height:1;color:var(--blau);font-weight:800}
.gruppe ul,.einfach{list-style:none;margin:0;padding:0}
.einfach{margin-top:1.5rem;border-top:1px solid var(--linie)}
.einfach .eintrag{border-bottom:1px solid var(--linie);padding:.5rem 0}
.eintrag{display:grid;grid-template-columns:minmax(0,1fr) 8rem;gap:0 1rem;align-items:center;padding:.3rem 0}
.eintrag .name{font-weight:600}
.eintrag .adresse{grid-row:2;font-size:.9375rem}
.eintrag>.textknopf,.eintrag>.zustand{grid-column:2;grid-row:1/3;justify-self:end}
.weg{background:var(--flaeche);padding:.5rem .75rem}
.leer{padding:1.5rem 0;border-bottom:1px solid var(--linie)}
.leer p{margin:0 0 .25rem}
.verlauf-bereich h2{font-size:1.3rem;margin:3.5rem 0 0}
.uebersicht .anlegen{display:inline-flex;padding:0 1.25rem;margin:1.5rem 0 0}
.alle{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--linie)}
.alle a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 3rem;gap:0 1rem;align-items:center;min-height:3rem;padding:.4rem 0;border-bottom:1px solid var(--linie);color:var(--text);text-decoration:none}
.alle a:hover .name{text-decoration:underline}
.alle .name{font-weight:600}
.alle .zahl,.alle .im-aufbau{justify-self:end}
.neu-form{max-width:36rem}
.neu-form .feld,.neu-form fieldset{margin-top:1.5rem}
.neu-form .knopf{margin-top:2rem}
.mit-endung{display:flex;align-items:center;gap:.5rem}
.mit-endung span{font-weight:600;white-space:nowrap}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:600;font-size:.9375rem;padding:0;margin-bottom:.25rem}
.wahl label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:1rem;margin:0;padding:.5rem 0}
.wahl input{accent-color:var(--knopf);width:1.15rem;height:1.15rem;margin:.2rem 0 0;flex:none}
.wahl small{display:block;color:var(--leise);font-size:.875rem}
/* Die Leiste bleibt nur stehen, wenn sie ganz ins Fenster passt (gemessen: 18 Verteiler = ca. 880 px). */
@media (min-height:60rem){.schale>.verteilerliste{position:sticky;top:1rem}}
@media (max-width:52rem){
 .schale{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
 .schale>.verteilerliste{display:none}
 .zurueck{display:inline-flex;align-items:center;min-height:44px;margin-bottom:.5rem}
}
@media (max-width:40rem){
 .seitenkopf{flex-wrap:wrap}.seitenkopf .wer{margin:0;text-align:left;flex-basis:100%}
 .abc{display:none}
 .formular{grid-template-columns:1fr}
 .formular>.knopf{margin-top:0}
 .gruppe{grid-template-columns:2.6rem minmax(0,1fr)}
 .buchstabe{font-size:1.8rem}
 .eintrag{grid-template-columns:minmax(0,1fr) auto}
 .alle a{grid-template-columns:minmax(0,1fr) auto}
 .alle a .adresse{grid-row:2}
 .alle .zahl,.alle .im-aufbau{grid-column:2;grid-row:1/3}
}

/* Nur auf der echten Seite: Anmeldung, Bestätigung, Hinweise nach Aktionen */
/* Anmeldeschritte „Haus“: ein Teil Foto vom Gemeindehaus, rechts der Inhalt (Benny 12.11.2026) */
.haus{display:grid;grid-template-columns:minmax(16rem,30vw) 1fr;min-height:100vh}
.haus-bild{margin:0;background:var(--band)}
.haus-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.haus-text{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:3rem clamp(1.5rem,7vw,7rem) 2rem}
.haus-text main{max-width:24rem;margin:auto 0}
.haus-text h1{font-size:clamp(2.6rem,5vw,3.6rem);line-height:1.05;color:var(--blau);margin:2.5rem 0 .75rem;font-weight:800}
.haus-text main>p{max-width:22rem;text-wrap:pretty}
.haus-text .satz{margin:0 0 2rem;color:var(--leise)}
.haus-text .feld+.feld{margin-top:1rem}
.haus-text .knopf{margin-top:1.5rem}
.haus-text .vergessen{margin:1.25rem 0 0}
.haus-text .weiter{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin-top:1.25rem}
.haus-fuss{display:flex;gap:1.5rem;font-size:.875rem}
.haus-fuss a{color:var(--leise)}
@media (max-width:48rem){
 .haus{grid-template-columns:1fr;grid-template-rows:34vh auto}
 .haus-text{padding:2rem 1rem 1.5rem}
 .haus-text h1{margin-top:1.75rem}
 .haus-text .knopf{width:100%}
}
.meldung{margin:.4rem 0 0;font-size:.9375rem}
.erfolg{margin:1.5rem 0 0;padding:.75rem 1rem;background:var(--flaeche)}
.inline{display:inline}
.fuss{max-width:76rem;margin:0 auto;padding:2rem 1rem 3rem;display:flex;gap:1.5rem;font-size:.875rem}
.fuss a{color:var(--leise)}
.abmelden{min-height:0;padding:0}