@font-face{font-family:"Open Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/open-sans-latin-400-normal.woff2?v=48) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/open-sans-latin-600-normal.woff2?v=48) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/open-sans-latin-700-normal.woff2?v=48) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:800;font-style:italic;font-display:swap;src:url(../fonts/open-sans-latin-800-italic.woff2?v=48) format("woff2")}

:root{--ju:#1446A0;--rosa:#DB3069;--tuerkis:#48E5C2;--himmel:#279AF1;--gelb:#F5D547;--tief:#0E2A5C;--dunst:#E7EDF8;--linie:#CBD8EE;--grau:#5A6473;--papier:#F5F8FD}
*{box-sizing:border-box;margin:0}
body{font-family:"Open Sans",system-ui,sans-serif;background:var(--papier);color:var(--tief);line-height:1.55;font-size:16px;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ju)}
main{width:100%;max-width:960px;margin:0 auto;padding:3rem 1.25rem 5rem;flex:1}
h1{font-weight:800;font-style:italic;font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.15;text-transform:uppercase;color:var(--ju);margin-bottom:.6rem}
h2{font-weight:800;font-style:italic;font-size:1.3rem;color:var(--tief)}
.leise{color:var(--grau);max-width:62ch}
.klein{font-size:.85rem}
i{font-style:normal;font-weight:400;color:var(--grau);font-size:.82rem}

/* Leiste */
.leiste{background:#fff;border-bottom:1px solid var(--linie);display:flex;align-items:center;gap:2rem;padding:.9rem clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;position:relative}
.leiste::after{content:"";position:absolute;left:0;bottom:-4px;height:4px;width:100%;background:linear-gradient(90deg,var(--ju),var(--himmel) 60%,var(--tuerkis))}
.marke{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.marke img{height:40px;width:auto}
.marke span{font-weight:800;font-style:italic;text-transform:uppercase;color:var(--rosa);font-size:.95rem;letter-spacing:.02em}
.leiste nav{display:flex;gap:.3rem;flex-wrap:wrap;flex:1}
.leiste nav a{text-decoration:none;color:var(--tief);font-weight:600;font-size:.92rem;padding:.45rem .8rem}
.leiste nav a.an,.leiste nav a:hover{background:var(--dunst);color:var(--ju)}
.wer{display:flex;align-items:center;gap:1rem;font-size:.88rem;color:var(--grau)}

/* Knöpfe */
button{font:inherit;cursor:pointer}
.knopf{background:var(--ju);color:#fff;border:0;font-weight:700;padding:.75rem 1.4rem;transform:skewX(-10deg);transition:background .15s}
.knopf:hover{background:var(--tief)}
form.inline{display:inline}
button.klein{background:#fff;border:1px solid var(--linie);color:var(--tief);padding:.35rem .7rem;font-size:.82rem;font-weight:600;min-width:2.2rem}
button.klein:hover{border-color:var(--ju);color:var(--ju)}
button.warn:hover{border-color:var(--rosa);color:var(--rosa)}
button.link{background:none;border:0;color:var(--ju);font-weight:600;padding:0;text-decoration:underline}
.luecke{display:inline-block;width:2.2rem}

/* Formulare */
label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.9rem;margin-bottom:1.2rem}
input,select,textarea{font:inherit;font-weight:400;padding:.7rem .8rem;border:1px solid var(--linie);background:#fff;color:var(--tief);width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--himmel);outline-offset:0;border-color:var(--himmel)}
input[type=file]{padding:.55rem;background:var(--papier)}
label.haken{flex-direction:row;align-items:center;gap:.6rem;font-weight:400}
label.haken input{width:auto}
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));column-gap:1.4rem}
.felder .breit,.felder .datei{grid-column:1/-1}
.zeile{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.zeile input{flex:1;min-width:200px}

/* Meldungen */
.meldung{padding:1rem 1.2rem;margin-bottom:2rem;border-left:4px solid var(--tuerkis);background:#fff;font-weight:600}
.meldung.fehler{border-color:var(--rosa);color:#9a1840}
.meldung.hinweis{border-color:var(--gelb)}
.einmal{background:var(--tief);color:#fff;padding:1.6rem;margin:2rem 0}
.einmal code{display:inline-block;margin-top:1rem;font-size:1.4rem;font-weight:700;background:#fff;color:var(--tief);padding:.5rem 1rem;letter-spacing:.06em;user-select:all}

/* Login */
.login{max-width:420px;margin:3rem auto 0;background:#fff;padding:2.6rem 2.2rem;border-top:6px solid var(--ju)}
.login form{margin-top:2rem}
.login .knopf{width:100%;margin:.4rem 0 1.4rem}

/* Kacheln */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.2rem;margin-top:2.6rem}
.kachel{background:#fff;padding:1.6rem 1.4rem;text-decoration:none;color:var(--tief);display:flex;flex-direction:column;gap:.25rem;border-left:5px solid var(--ju);transition:transform .15s,box-shadow .15s}
.kachel:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,42,92,.1)}
.kachel b{font-weight:800;font-style:italic;font-size:1.25rem;color:var(--ju)}
.kachel span{color:var(--grau);font-size:.9rem}
.kachel .klein{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700}
.kachel-rosa{border-color:var(--rosa)}.kachel-rosa b{color:var(--rosa)}

/* Gruppen & Listen */
.zurueck{margin-bottom:1rem;font-size:.9rem}.zurueck a{text-decoration:none}
.gruppe{background:#fff;padding:2rem clamp(1.1rem,3vw,2rem);margin-top:2.2rem}
.gruppe>h2{margin-bottom:1.4rem}
.gruppenkopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:3px solid var(--dunst)}
.werkzeuge{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.personen{list-style:none;padding:0}
.personen>li{border-bottom:1px solid var(--dunst);padding:.9rem 0}
.pzeile{display:flex;align-items:center;gap:1rem}
.pzeile img,.platz{width:56px;height:56px;flex:none;object-fit:cover;background:var(--dunst)}
.platz{display:grid;place-items:center;font-weight:800;font-style:italic;color:var(--ju)}
.platz.aus{opacity:.4}
.pname{flex:1;min-width:0;display:flex;flex-direction:column}
.pname span{color:var(--grau);font-size:.88rem}
.datum{width:56px;flex:none;text-align:center;font-weight:800;font-size:1.4rem;color:var(--rosa);line-height:1}
.datum small{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;color:var(--grau);margin-top:.2rem}
.datum.alt{color:var(--grau)}
details>summary{cursor:pointer;font-weight:600;font-size:.88rem;color:var(--ju);list-style:none;display:inline-block}
details>summary::-webkit-details-marker{display:none}
details.bearbeiten{margin-left:72px}
details.bearbeiten>summary{margin-top:.3rem}
details[open].bearbeiten,details[open].neu{background:var(--papier)}
details[open]>.pform{padding:1.4rem 1.2rem 1.6rem}
details.neu{margin-top:1.2rem}
details.neu>summary{padding:.6rem 0}
details.mini{position:relative}
details.mini>summary{font-size:.82rem;padding:.35rem .5rem}
details.mini[open] form{position:absolute;right:0;top:2.4rem;background:#fff;padding:1rem;box-shadow:0 10px 30px rgba(14,42,92,.18);z-index:2;width:min(360px,80vw)}
.archiv>summary{font-size:1rem}
.schmal{max-width:480px}
.protokoll{list-style:none;padding:0;margin-top:2rem;background:#fff}
.protokoll li{display:flex;gap:1.4rem;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--dunst);flex-wrap:wrap}
.protokoll time{color:var(--grau);font-size:.85rem;width:9.5rem;flex:none}
.protokoll span{flex:1;min-width:200px}

.fuss{text-align:center;padding:2rem;font-size:.85rem}

@media (max-width:640px){
  main{padding-top:2rem}
  .leiste{gap:.8rem}
  .leiste nav{order:3;width:100%;flex:none;margin:0 -.8rem}
  .wer{margin-left:auto}
  .pzeile{flex-wrap:wrap}
  .pzeile .werkzeuge{width:100%;padding-left:72px}
  details.bearbeiten{margin-left:0}
}
fieldset.wahl{border:0;padding:0;margin:0 0 1.2rem}
fieldset.wahl legend{font-weight:600;font-size:.9rem;margin-bottom:.6rem}
fieldset.wahl label{margin-bottom:.5rem}
fieldset.wahl.breit{grid-column:1/-1}
.satzungstext{font-size:.92rem;line-height:1.6;resize:vertical}

/* Dashboard */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:2.4rem 0 0}
.zahlen a{background:#fff;padding:1.3rem 1.4rem;text-decoration:none;color:var(--tief);display:flex;flex-direction:column;gap:.2rem;border-bottom:4px solid var(--dunst);transition:border-color .15s}
.zahlen a:hover{border-color:var(--ju)}
.zahlen b{font-weight:800;font-style:italic;font-size:2.2rem;line-height:1;color:var(--ju)}
.zahlen span{color:var(--grau);font-size:.88rem}
.zahlen a.offen b{color:var(--rosa)}
.bereiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;margin-top:1.4rem}
.bereich{background:#fff;padding:1.8rem 1.6rem 1.6rem;border-top:5px solid var(--ju);display:flex;flex-direction:column}
.bereich-rosa{border-color:var(--rosa)}.bereich-gelb{border-color:var(--gelb)}.bereich-himmel{border-color:var(--himmel)}.bereich-tuerkis{border-color:var(--tuerkis)}
.bereich-breit{grid-column:1/-1;border-color:var(--tief)}
.bereich-art{text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;font-weight:700;color:var(--grau);margin-bottom:.3rem}
.bereich h2{margin-bottom:1.1rem}
.bereich-liste{list-style:none;padding:0;margin-bottom:1.2rem;flex:1}
.bereich-liste li{border-top:1px solid var(--dunst)}
.bereich-liste a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;text-decoration:none;color:var(--tief);font-size:.93rem}
.bereich-liste a:hover span{color:var(--ju)}
.bereich-liste i{color:var(--grau);font-size:.82rem;white-space:nowrap}
.bereich-liste i.ok{color:#14866d}.bereich-liste i.warn{color:var(--rosa);font-weight:600}
.bereich-weiter{font-weight:700;font-size:.9rem;text-decoration:none;align-self:flex-start}
.bereich-weiter:hover{text-decoration:underline}

/* Vorstände */
.vorstaende{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem;margin-top:2.4rem}
.vorstand{background:#fff;padding:1.7rem 1.6rem;text-decoration:none;color:var(--tief);display:flex;flex-direction:column;gap:.35rem;border-left:5px solid var(--ju);transition:transform .15s,box-shadow .15s}
.vorstand:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,42,92,.1)}
.vorstand .klein{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--grau)}
.vorstand b{font-weight:800;font-style:italic;font-size:1.35rem;color:var(--ju)}
.gesichter{display:flex;margin:.9rem 0 .5rem}
.gesichter img,.gesichter em{width:40px;height:40px;border:2px solid #fff;margin-right:-8px;object-fit:cover;background:var(--dunst);display:grid;place-items:center;font-style:italic;font-weight:800;font-size:.72rem;color:var(--ju)}
.vorstand .info{color:var(--grau);font-size:.88rem}
.vorstand .info i{color:var(--rosa);font-weight:600;font-size:inherit}
.bereich-liste.stapel a{flex-direction:column;align-items:flex-start;gap:.15rem}.bereich-liste.stapel i{white-space:normal}
@media (max-width:640px){.zahlen{grid-template-columns:1fr 1fr;gap:.7rem}.zahlen b{font-size:1.8rem}.zahlen a{padding:1rem 1.1rem}}
details.rechte{background:#fff;padding:1rem 1.3rem;margin-top:1.4rem;max-width:760px}
details.rechte ul{margin:1rem 0 .3rem;padding-left:1.1rem;color:var(--grau);font-size:.9rem;line-height:1.6}
details.rechte li{margin-bottom:.5rem}details.rechte b{color:var(--tief)}
.wer .konto{color:var(--tief);text-decoration:none;font-weight:600;padding:.4rem .7rem;background:var(--papier)}
.wer .konto:hover,.wer .konto.an{background:var(--dunst);color:var(--ju)}
.leiste nav a{padding:.45rem .7rem}
.t-badge{display:inline-block;align-self:flex-start;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;margin-bottom:.35rem;transform:skewX(-10deg);background:var(--ju);color:#fff;line-height:1.4}
.t-badge.t-bonn-zentral{background:var(--himmel);color:#fff}.t-badge.t-beuel{background:var(--tuerkis);color:var(--tief)}.t-badge.t-hardtberg{background:var(--gelb);color:var(--tief)}.t-badge.t-bad-godesberg{background:var(--rosa);color:#fff}
.bereich-liste.stapel .t-badge{display:table;margin-bottom:.3rem}
.pname .t-badge{color:#fff;font-size:.68rem}.pname .t-badge.t-beuel,.pname .t-badge.t-hardtberg{color:var(--tief)}
.pname .status{font-style:normal;font-size:.8rem;font-weight:600;margin-top:.25rem;display:inline-flex;align-items:center;gap:.4rem}
.pname .status::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor}
.status-ok{color:#14866d}.status-offen{color:#b07d00}.status-warn{color:var(--rosa)}.status-aus{color:var(--grau)}
.pzeile img.aus{opacity:.4;filter:grayscale(1)}
.hinweis-person{background:var(--dunst);padding:.7rem 1rem;font-size:.88rem;margin-bottom:1.2rem}