/* clubseite-demo 1.1.0 – Demo-Band + Seite /demo/ (Farben aus den Theme-Tokens) */
.csdemo-band{position:sticky;top:0;z-index:1003;display:flex;align-items:center;justify-content:center;gap:10px;height:30px;padding:0 16px;box-sizing:border-box;background:var(--cs-tafel,#0D1210);color:var(--cs-tafel-ink,#FFFFFF);font-size:13px;line-height:30px;white-space:nowrap;overflow:hidden}
.csdemo-band-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.csdemo-band b{font-weight:800;letter-spacing:.02em}
.csdemo-band a{flex:none;color:var(--cs-tafel-ink,#FFFFFF)!important;font-weight:700;text-decoration:underline!important;text-underline-offset:2px}
.csdemo-band a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
body.csdemo-mit-band{--cs-ab-h:30px}
body.csdemo-mit-band .cs-header{top:var(--cs-ab-h)}
body.admin-bar .csdemo-band{top:32px}
body.admin-bar.csdemo-mit-band{--cs-ab-h:62px}
@media (max-width:782px){body.admin-bar .csdemo-band{top:46px}body.admin-bar.csdemo-mit-band{--cs-ab-h:76px}}
.csdemo-kurz{display:none}
@media (max-width:520px){.csdemo-lang{display:none}.csdemo-kurz{display:inline}}
@media (max-width:400px){.csdemo-band{gap:8px;padding:0 12px}}
body.cslt-mit-band.csdemo-mit-band .csdemo-band{position:relative;top:auto}

.csdemo{max-width:880px;margin:0 auto;color:var(--cs-ink,#14201A)}
.csdemo-kopf h2{font-family:var(--cs-font-head,inherit);margin:0 0 8px;font-size:clamp(26px,5vw,36px);line-height:1.1;color:var(--cs-head-ink,var(--cs-ink,#14201A))}
.csdemo-ueber{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-primary,#0E7A3E)}
.csdemo-kopf p{margin:0 0 16px;line-height:1.55;color:var(--cs-muted,#5B6B62)}
.csdemo-kopf p b{color:var(--cs-ink,#14201A)}
.csdemo-meldung{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--cs-chip,#EEF2EF);color:var(--cs-ink,#14201A);border:1px solid var(--cs-line,#D9E1DC)}
.csdemo-aktuell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:var(--cs-card,#FFFFFF);border:2px solid var(--cs-primary,#0E7A3E)}
.csdemo-aktuell-a{display:flex;gap:8px;flex-wrap:wrap}
.csdemo-rollen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.csdemo-rolle{display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;border-radius:var(--cs-radius,14px);background:var(--cs-card,#FFFFFF);border:1px solid var(--cs-line,#D9E1DC);min-width:0}
.csdemo-rolle.ist-aktiv{border-color:var(--cs-primary,#0E7A3E);box-shadow:0 0 0 1px var(--cs-primary,#0E7A3E)}
.csdemo-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--cs-chip,#EEF2EF);color:var(--cs-primary,#0E7A3E)}
.csdemo-txt h3{margin:0 0 4px;font-size:18px;color:var(--cs-ink,#14201A)}
.csdemo-txt p{margin:0;font-size:14px;line-height:1.45;color:var(--cs-muted,#5B6B62)}
.csdemo-rolle form{margin:auto 0 0}
.csdemo-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--cs-primary,#0E7A3E);color:var(--cs-on-primary,#FFFFFF)!important;font:inherit;font-weight:700;font-size:15px;text-decoration:none!important;cursor:pointer;box-sizing:border-box}
.csdemo-aktuell .csdemo-btn{width:auto}
.csdemo-btn.sek{background:transparent;color:var(--cs-ink,#14201A)!important;box-shadow:inset 0 0 0 1px var(--cs-line,#D9E1DC)}
.csdemo-btn[disabled]{opacity:.5;cursor:not-allowed}
.csdemo-btn[aria-current]{background:var(--cs-chip,#EEF2EF);color:var(--cs-ink,#14201A)!important}
.csdemo-btn:focus-visible{outline:2px solid var(--cs-primary,#0E7A3E);outline-offset:2px}
.csdemo-fuss{margin:16px 0 0;font-size:13px;color:var(--cs-muted,#5B6B62)}
.csdemo-hinweis{padding:12px;border:1px solid var(--cs-line,#D9E1DC);border-radius:10px}
.csdemo-einrichtung{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.csdemo-einrichtung form{margin:0}.csdemo-einrichtung .csdemo-btn{width:auto}
.csdemo-wartet{margin:auto 0 0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:10px;border:1px dashed var(--cs-line,#D9E1DC);color:var(--cs-muted,#5B6B62);font-weight:600;font-size:14px;text-align:center}
/* 1.1.0: helles Muster (Skizze Web/WebHandy) – Band in der Hauptfarbe statt schwarzer Tafel, Titel in Textfarbe */
:is(html[data-cs-muster="hell"],html[data-cs-muster="eigen"][data-cs-modus="hell"]) body .csdemo-band{background:var(--cs-primary,#0E7A3E);color:var(--cs-on-primary,#FFFFFF)}
:is(html[data-cs-muster="hell"],html[data-cs-muster="eigen"][data-cs-modus="hell"]) body .csdemo-band a{color:var(--cs-on-primary,#FFFFFF)!important}
:is(html[data-cs-muster="hell"],html[data-cs-muster="eigen"][data-cs-modus="hell"]) .csdemo-kopf h2{color:var(--cs-ink,#0D1210)}
/* 1.4.0 (W33 D3): Band immer grün mit aktueller Rolle + Symbol; Rollenkarte «Du bist» auf der Startseite */
body .csdemo-band{background:#0E7A3E;color:#FFFFFF}
body .csdemo-band a{color:#FFFFFF!important;display:inline-flex;align-items:center;gap:5px}
.csdemo-band-ico{display:inline-flex;vertical-align:-3px;margin-right:6px}
.csdemo-du{margin:0 0 12px;border-radius:14px;background:#FFFFFF;border:1px solid #CFE6D7;border-left:4px solid #0E7A3E;color:#0D1210;box-shadow:0 1px 2px rgba(13,18,16,.05)}
.csdemo-du summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;cursor:pointer;list-style:none}
.csdemo-du summary::-webkit-details-marker{display:none}
.csdemo-du-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#E3F5EA;color:#0E7A3E;flex:none}
.csdemo-du-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.csdemo-du-t b{font-size:16px}
.csdemo-du-t small{font-size:13px;color:#56615B}
.csdemo-du-pfeil{margin-left:auto;width:10px;height:10px;border-right:2px solid #0E7A3E;border-bottom:2px solid #0E7A3E;transform:rotate(45deg);flex:none}
.csdemo-du[open] .csdemo-du-pfeil{transform:rotate(-135deg)}
.csdemo-du ul{margin:0;padding:0 16px 4px 66px;font-size:15px;line-height:1.5}
.csdemo-du li{margin:0 0 4px}
.csdemo-du p{margin:0;padding:0 16px 12px 66px;font-size:14px}
.csdemo-du p a{color:#0E7A3E;font-weight:600}
.csdemo-du summary:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px;border-radius:12px}
@media (max-width:420px){.csdemo-du ul,.csdemo-du p{padding-left:16px}}
.csdemo-du-kasse{max-width:960px;margin:8px auto 0;padding:0 12px}
.csdemo-du ul{list-style:none!important;margin:0!important;padding:0 16px 6px 66px!important}
.csdemo-du li{position:relative;margin:0 0 4px!important;padding:0 0 0 20px!important;list-style:none!important}
.csdemo-du li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;border-left:2px solid #0E7A3E;border-bottom:2px solid #0E7A3E;transform:rotate(-45deg)}
@media (max-width:420px){.csdemo-du ul{padding-left:16px!important}}