/*
 * Helferbrett – Basisstil, mobil zuerst.
 * Vereinsfarben kommen als CSS-Variablen aus dem Layout (style#club-theme).
 * Statusfarben sind bewusst NICHT vom Vereinsthema abhängig: Symbol + Text + neutrale Farbe.
 */

:root {
    /* --brand*, --accent*, --font-* setzt ausschließlich das Layout (style#club-theme). */

    /* Neutrale Grundfarben */
    --bg: #ffffff;           /* Seitenhintergrund – überschreibt das Vereinsthema */
    --card: #ffffff;         /* Karten und Eingabefelder bleiben weiß, damit Text immer gut lesbar ist */
    --surface: #f5f6f8;
    --border: #d9dce1;
    --text: #1b1d21;
    --text-muted: #5b6270;
    --focus: #2563eb;

    /* Statusfarben – unabhängig vom Verein */
    --status-open: #b45309;        /* Orange: Lücke / offen */
    --status-open-bg: #fff4e5;
    --status-partial: #8a6100;     /* Gelbbraun: teilweise besetzt */
    --status-partial-bg: #fff9db;
    --status-full: #1e6b3a;        /* Grün: besetzt */
    --status-full-bg: #e8f5ec;
    --status-neutral: #4b5563;
    --status-neutral-bg: #eef0f3;
    --danger: #b42318;

    --radius: 0.6rem;
    --radius-button: 0.6rem;
    --space: 1rem;
    --container: 72rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
}

a {
    color: var(--brand-ink);
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    margin: 0 0 0.5em;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.1rem;
}

/* Kopf und Fuß */

.site-header {
    background: var(--brand);
    color: var(--brand-contrast);
    border-bottom: 4px solid var(--accent);
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.75rem var(--space);
    color: inherit;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.15rem;
}

.site-header__logo {
    height: 2.5rem;
    width: auto;
}

.container {
    flex: 1;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 1.5rem var(--space) 3rem;
}

.site-footer {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem var(--space) 1.5rem;
}

.site-footer__links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.site-footer__links a {
    color: inherit;
}

.site-footer__powered {
    margin: 0;
    font-size: 0.75rem;
}

/* Inhalte */

.hero {
    margin-bottom: 2rem;
}

.hero__text {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0;
}

.hero__logo {
    display: block;
    max-height: 4.5rem;
    max-width: 60%;
    margin-bottom: 1rem;
    padding: 0.4rem;
    background: #ffffff;
    border-radius: var(--radius);
}

.hero--plain .hero__logo {
    display: none;
}

/* Kopfbereich in Vereinsfarbe bzw. mit Titelbild: Text in der Kontrastfarbe der Primärfarbe. */
.hero--brand,
.hero--photo {
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    border-bottom: 4px solid var(--accent);
    background: var(--brand);
    color: var(--brand-contrast);
}

.hero--photo {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 17rem;
    /* Oben scheint das Foto durch, unten trägt fast deckende Vereinsfarbe den Text. */
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--brand) 15%, transparent) 0%,
            color-mix(in srgb, var(--brand) 92%, transparent) 62%,
            var(--brand) 100%
        ),
        var(--hero-image, none) center / cover no-repeat,
        var(--brand);
}

.hero--brand .hero__text,
.hero--photo .hero__text,
.hero--brand .muted,
.hero--photo .muted {
    color: inherit;
    opacity: 0.92;
}

.hero--brand a,
.hero--photo a {
    color: inherit;
}

.hero--brand .notice,
.hero--photo .notice {
    color: var(--text);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space);
    margin-bottom: var(--space);
}

.muted {
    color: var(--text-muted);
}

.flash {
    border-radius: var(--radius);
    padding: 0.75rem var(--space);
    margin-bottom: var(--space);
    background: var(--status-full-bg);
    color: var(--status-full);
    border: 1px solid currentColor;
}

.flash--error {
    background: var(--status-open-bg);
    color: var(--danger);
}

/* Buttons und Formulare */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--brand);
    border-radius: var(--radius-button);
    background: var(--brand);
    color: var(--brand-contrast);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    filter: brightness(1.08);
}

.button--secondary {
    background: transparent;
    color: var(--brand-ink);
    border-color: currentColor;
}

.button--block {
    width: 100%;
}

.button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-row {
    margin-bottom: var(--space);
}

.form-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.access-card__form input[type="email"],
.form-row select,
.form-row textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--card);
    color: var(--text);
}

.form-row .help {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.form-error,
.form-row ul li {
    color: var(--danger);
    font-size: 0.9rem;
}

.form-row ul {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}

/* Status – Symbol + Text, Farbe unabhängig vom Verein */

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--status-neutral);
    background: var(--status-neutral-bg);
}

.status__icon {
    font-size: 0.9em;
    line-height: 1;
}

.status--open {
    color: var(--status-open);
    background: var(--status-open-bg);
}

.status--partial {
    color: var(--status-partial);
    background: var(--status-partial-bg);
}

.status--full {
    color: var(--status-full);
    background: var(--status-full-bg);
}

@media (min-width: 40rem) {
    h1 {
        font-size: 2.1rem;
    }

    .container {
        padding-top: 2.5rem;
    }
}

/* Pläne und Schichten */

.notice {
    border-left: 4px solid var(--status-open);
    background: var(--status-open-bg);
    padding: 0.75rem var(--space);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card--link:hover {
    border-color: var(--brand-ink);
}

.card__cta {
    color: var(--brand-ink);
    font-weight: 600;
}

.occasion {
    margin-bottom: 2rem;
}

.occasion__header {
    position: sticky;
    top: 0;
    background: var(--bg);
    padding: 0.5rem 0;
    z-index: 1;
    border-bottom: 2px solid var(--brand);
    margin-bottom: var(--space);
}

.occasion__header h2,
.occasion__header p {
    margin: 0;
}

.shift {
    display: grid;
    gap: 0.75rem;
}

.shift__area {
    font-size: 1.1rem;
    margin: 0;
}

.shift__time {
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.shift__note {
    margin: 0;
    font-size: 0.9rem;
}

.shift__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shift__count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.shift-summary p {
    margin: 0.25rem 0 0;
}

.assignment form {
    margin-top: 0.75rem;
}

.assignment--inactive {
    opacity: 0.65;
}

.form-errors {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 var(--space);
    color: var(--danger);
    font-size: 0.9rem;
}

@media (min-width: 40rem) {
    .shift {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .shift .button {
        grid-column: 1 / -1;
    }
}

/* Verwaltung */

.admin .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0 var(--space);
}

.admin .site-header__brand {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-left: auto;
    padding-bottom: 0.5rem;
}

.admin-nav a {
    color: inherit;
    font-weight: 600;
}

/* Link anfordern und Anmelden: schmale Karte mit Kopfstreifen in Vereinsfarbe */

.access-card {
    max-width: 28rem;
    margin: 1.5rem auto 2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgb(0 0 0 / 0.35);
}

@media (min-width: 40rem) {
    .access-card {
        margin-top: 3rem;
    }
}

.access-card__head {
    display: grid;
    place-items: center;
    height: 5.5rem;
    background: var(--brand);
    color: var(--brand-contrast);
}

.access-card__icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: -4.5rem;
    border-radius: 50%;
    background: var(--card);
    border: 3px solid var(--brand);
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
}

.access-card__body {
    padding: 3rem 1.5rem 1.5rem;
    text-align: center;
}

.access-card__body h1 {
    margin: 0 0 0.5rem;
    font-size: 1.8rem;
}

.access-card__body p {
    margin: 0 0 1rem;
}

.access-card__form {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.25rem;
    text-align: left;
}

.access-card__form label {
    font-weight: 600;
}

.access-card__form .button {
    margin-top: 0.5rem;
}

.access-card__lead {
    font-size: 1.1rem;
}

.access-card__note {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.95rem;
}

.access-card__again {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.access-card__aside {
    margin: 0;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.narrow {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.plan-card__header {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.plan-card__header h2 {
    margin: 0;
}

.meter {
    height: 0.5rem;
    background: var(--surface);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.75rem 0;
}

.meter__bar {
    display: block;
    height: 100%;
    background: var(--status-full);
}

.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.stats dt {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.stats dd {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
}

.page-header h1 {
    margin-bottom: 0.25rem;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
    margin-bottom: var(--space);
}

.filters .form-row {
    min-width: 10rem;
}

.form-row--check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
}

.form-row--check label {
    margin: 0;
    font-weight: 400;
}

.form-row--check input {
    width: 1.25rem;
    height: 1.25rem;
}

.button--small {
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--brand-ink);
    text-decoration: underline;
    cursor: pointer;
}

.people {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    border-top: 1px solid var(--border);
    grid-column: 1 / -1;
}

.person {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.person__contact {
    display: block;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.person__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.person__actions form {
    margin: 0;
}

/* Entfernen mit Rückfrage (Verwaltung): dezent rot, aufgeklappt „Wirklich …? [Ja, …] Nein“ – ohne JavaScript. */
.button--danger-text {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    color: var(--danger);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--radius-button);
}

.button--danger-text:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.ask > summary {
    list-style: none;
}

.ask > summary::-webkit-details-marker {
    display: none;
}

.ask[open] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ask[open] > summary {
    order: 2;
    color: var(--text-muted);
}

.ask__close,
.ask[open] .ask__open {
    display: none;
}

.ask[open] .ask__close {
    display: inline;
}

.ask form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
}

/* Hinweis statt „Löschen“, wenn noch etwas an einem Eintrag hängt. */
.in-use {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.department-list {
    list-style: none;
    margin: 0 0 var(--space);
    padding: 0;
}

.department-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

/* In Tabellen klappt die Rückfrage als schwebendes Feld unter dem Button auf –
   die Spalten bleiben gleich breit, die Tabelle springt nicht. */
.table .ask {
    position: relative;
    display: inline-block;
}

.table .ask > summary {
    display: inline-grid;
}

/* „Löschen“ und „Nein“ liegen übereinander: der Button ist immer so breit wie das längere Wort. */
.table .ask > summary > span,
.table .ask[open] .ask__open,
.table .ask__close {
    display: inline;
    grid-area: 1 / 1;
}

.table .ask__close,
.table .ask[open] .ask__open {
    visibility: hidden;
}

.table .ask[open] .ask__close {
    visibility: visible;
}

.table .ask form {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 5;
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.6rem 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.12);
    text-align: left;
    white-space: normal;
}

/* Auswahl per Radio/Checkbox: eine Option pro Zeile, Text neben dem Kästchen. */
.choice-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem 0.6rem;
    align-items: center;
}

.choice-list > label {
    margin: 0;
    font-weight: 400;
}

/* Vorschläge zum schnellen Anlegen (Bereiche, Mannschaften, Abteilungen) */
.presets {
    margin-bottom: var(--space);
}

.presets > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    cursor: pointer;
    list-style: none;
}

.presets > summary::-webkit-details-marker {
    display: none;
}

.presets > summary::before {
    content: "+";
    font-weight: 800;
}

.presets[open] > summary::before {
    content: "–";
}

.presets > summary h2 {
    margin: 0;
    font-size: 1.25rem;
}

.presets__groups {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    margin: 1rem 0;
}

.presets fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.presets legend {
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.presets__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.presets__filter select {
    width: auto;
    max-width: 100%;
}

.presets__inline {
    display: grid;
    gap: 0.5rem;
    justify-items: start;
    margin: 0.75rem 0 1rem;
}

.presets__label {
    margin: 0;
    font-weight: 700;
}

/* Leerer Plan: nächster Schritt */
.empty-step {
    border-left: 4px solid var(--brand);
    margin: var(--space) 0;
}

.empty-step h2 {
    margin-top: 0;
}

.narrow-form {
    max-width: 32rem;
}

.tabs {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space);
}

.tabs a {
    padding: 0.5rem 0;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.tabs a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--brand);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.shift__add {
    display: grid;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.inline-form select,
.filters select {
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--card);
}

.occasion__header--static {
    position: static;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin-bottom: var(--space);
}

.table th,
.table td {
    text-align: left;
    padding: 0.4rem 0.5rem 0.4rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.table th {
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 40rem) {
    .table thead {
        display: none;
    }

    .table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border);
    }

    .table td {
        border: 0;
        padding: 0.1rem 0;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-row input[type="number"],
.form-row input[type="time"],
.form-row input[type="date"],
.form-row input[type="datetime-local"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--card);
    color: var(--text);
}

.export-actions {
    margin-bottom: var(--space);
    font-size: 0.95rem;
}

.share {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
    align-items: center;
}

.share__qr svg {
    width: 12rem;
    height: 12rem;
    display: block;
}

.share__url {
    overflow-wrap: anywhere;
    font-weight: 600;
}

.columns {
    display: grid;
    gap: var(--space);
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    align-items: start;
}

.checklist {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.occasion__team {
    margin: 0;
    font-weight: 600;
    color: var(--brand-ink);
}

.person--placeholder strong {
    color: var(--text-muted);
    font-style: italic;
}

.group-reserve summary {
    cursor: pointer;
    color: var(--brand-ink);
    text-decoration: underline;
    font-size: 0.9rem;
}

.group-reserve form {
    margin-top: 0.5rem;
}

.input-small {
    width: 4.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.shift__pick {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.shift__pick input {
    width: 1.25rem;
    height: 1.25rem;
}

.multi-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
}

.selected-shifts {
    list-style: none;
    padding-left: var(--space);
}

.selected-shifts li + li {
    margin-top: 0.5rem;
}

/* Zeitstrahl */

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.timeline__scroll {
    overflow-x: auto;
    margin-bottom: calc(var(--space) * 1.5);
}

.timeline__grid {
    min-width: calc(8rem + var(--hours) * 3.5rem);
}

.timeline__head,
.timeline__row {
    display: grid;
    grid-template-columns: 8rem 1fr;
    align-items: center;
}

.timeline__hours {
    display: grid;
    grid-template-columns: repeat(var(--hours), 1fr);
    font-size: 0.75rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.timeline__hours span {
    border-left: 1px solid var(--border);
    padding-left: 0.2rem;
}

.timeline__label {
    font-weight: 600;
    font-size: 0.9rem;
    padding-right: 0.5rem;
    overflow-wrap: anywhere;
}

.timeline__track {
    position: relative;
    height: 2.5rem;
    border-bottom: 1px solid var(--border);
    background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--hours)));
}

.timeline__bar {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.35rem;
    border-radius: 0.35rem;
    border: 2px solid currentColor;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.timeline__bar--open {
    color: var(--status-open);
    background: var(--status-open-bg);
}

.timeline__bar--partial {
    color: var(--status-partial);
    background: var(--status-partial-bg);
}

.timeline__bar--full {
    color: var(--status-full);
    background: var(--status-full-bg);
}

.checkin-code {
    margin: 0.75rem 0;
}

.checkin-code svg {
    width: 11rem;
    height: 11rem;
    display: block;
    background: #fff;
}

.checkin__state {
    font-size: 1.1rem;
}

.facts {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    font-size: 0.95rem;
}

.notice--small {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.inline-form input[type="text"] {
    min-height: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.settings-form fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space);
    margin: 0 0 var(--space);
}

.settings-form legend {
    font-weight: 700;
    padding: 0 0.25rem;
}

.form-row input[type="color"] {
    width: 4rem;
    height: 2.75rem;
    padding: 0.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.form-row input[type="url"],
.form-row input[type="file"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.settings-logo {
    max-height: 4rem;
    max-width: 12rem;
}

.settings-hero-image {
    width: 100%;
    max-height: 10rem;
    object-fit: cover;
    border-radius: var(--radius);
}

.icon-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--space);
}

.icon-preview .help {
    flex-basis: 100%;
    margin: 0;
}

.icon-preview__home {
    border-radius: 22%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}

/* Ranking: Siegertreppchen, Teamwertung, Ehrentafel, Abzeichen */

/* Das Treppchen steht auf einem Boden: heller Streifen unten im Kopf, die Blöcke enden darauf. */
.rank-hero {
    --rank-floor: 0.75rem;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--brand-contrast) 32%, var(--brand)) var(--rank-floor), transparent var(--rank-floor)),
        var(--brand);
    color: var(--brand-contrast);
    padding: 2rem var(--space) var(--rank-floor);
    overflow: hidden;
}

.rank-hero__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.rank-hero h1 {
    font-size: clamp(2.2rem, 7vw, 3.6rem);
    text-transform: uppercase;
    margin: 0.8rem 0 0.2rem;
}

.rank-hero__lead {
    margin: 0 0 1rem;
    max-width: 38rem;
    opacity: 0.88;
}

.rank-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rank-periods a {
    color: inherit;
    text-decoration: none;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.75;
    font-size: 0.9rem;
}

.rank-periods a[aria-current] {
    opacity: 1;
    background: var(--brand-contrast);
    color: var(--brand);
    border-color: var(--brand-contrast);
    font-weight: 700;
}

.podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0.5rem;
    max-width: 46rem;
    margin: 2rem auto 0;
    padding: 0;
    list-style: none;
}

.podium__step {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
    text-align: center;
    min-width: 0;
}

.podium__medal {
    position: relative;
    z-index: 1;
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: -0.9rem;
}

.podium__avatar {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    background: var(--brand-contrast);
    color: var(--brand);
}

.podium__step--1 .podium__avatar {
    width: 5.4rem;
    height: 5.4rem;
    font-size: 1.5rem;
    box-shadow: 0 0 0 4px #e3b33b;
}

.podium__avatar.is-anon,
.podium__name.is-anon {
    opacity: 0.75;
}

.podium__name {
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.podium__pts {
    font-size: 0.85rem;
    opacity: 0.85;
}

.podium__block {
    width: 100%;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.8rem 0.5rem;
    border-radius: var(--radius) var(--radius) 0 0;
    background: color-mix(in srgb, var(--brand-contrast) 14%, transparent);
}

.podium__block b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2.6rem;
    line-height: 1;
}

.podium__step--1 {
    position: relative;
}

/* Konfetti fällt hinter Avatar, Name und Block. */
.podium__step--1 > :not(.podium__confetti) {
    position: relative;
    z-index: 1;
}

.podium__step--1 > .podium__medal {
    z-index: 2;
}

/* Preis als Anhänger: Schnur vom Blockrand, Karton mit Loch, leicht schräg; Platz 1 goldener. */
.podium__tag {
    position: relative;
    display: grid;
    justify-items: center;
    width: 100%;
    padding-top: 1.1rem;
}

.podium__tag::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 1.25rem;
    background: color-mix(in srgb, var(--brand-contrast) 70%, transparent);
}

.podium__tag > span {
    position: relative;
    display: block;
    width: min(100%, 12.5rem);
    padding: 0.85rem 0.6rem 0.6rem;
    border-radius: 0.35rem 0.35rem 0.6rem 0.6rem;
    background: #fff8e6;
    color: #2b2410;
    box-shadow: 0 6px 14px rgb(0 0 0 / 0.35);
    clip-path: polygon(18% 0, 82% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
    transform: rotate(-3deg);
    transform-origin: 50% -1rem;
}

.podium__tag > span::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 50%;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: -0.275rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.25);
}

.podium__step--1 .podium__tag > span {
    background: #ffe9a8;
    transform: rotate(-1.5deg);
}

.podium__step--3 .podium__tag > span {
    transform: rotate(2.5deg);
}

.podium__tag small {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8a6100;
}

.podium__tag strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.05rem;
    line-height: 1.1;
    overflow-wrap: break-word;
    hyphens: auto;
}

.podium__step--1 .podium__tag strong {
    font-size: 1.2rem;
}

.podium__tag em {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-style: normal;
}

@media (max-width: 30rem) {
    .podium__tag > span {
        padding: 0.75rem 0.35rem 0.45rem;
    }

    .podium__tag strong,
    .podium__step--1 .podium__tag strong {
        font-size: 0.82rem;
    }

    .podium__tag em {
        font-size: 0.7rem;
    }
}

/* Konfetti über Platz 1: dezent, nur Deko */
.podium__confetti {
    position: absolute;
    inset: -2rem -1rem 0;
    overflow: hidden;
    pointer-events: none;
}

.podium__confetti i {
    position: absolute;
    top: -1rem;
    width: 0.45rem;
    height: 0.8rem;
    border-radius: 1px;
    opacity: 0.85;
    animation: podium-confetti 7s linear infinite;
}

@keyframes podium-confetti {
    to {
        transform: translateY(32rem) rotate(540deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .podium__confetti i {
        animation: none;
        top: auto;
        bottom: 60%;
    }
}

.podium__step--1 .podium__block {
    min-height: 11rem;
    background: color-mix(in srgb, var(--brand-contrast) 24%, transparent);
}

.podium__step--2 .podium__block {
    min-height: 8.5rem;
}

.podium__step--3 .podium__block {
    min-height: 7rem;
}

/* Mit Preis-Anhängern brauchen die Blöcke mehr Höhe. */
.podium--prizes .podium__step--1 .podium__block {
    min-height: 13rem;
}

.podium--prizes .podium__step--2 .podium__block {
    min-height: 10.5rem;
}

.podium--prizes .podium__step--3 .podium__block {
    min-height: 9rem;
}

.page-wide.page-ranking .container {
    padding-top: 2.5rem;
}

.rank-main {
    display: grid;
    gap: 2rem;
}

@media (min-width: 56rem) {
    .rank-main {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        align-items: start;
    }

    .rank-side {
        position: sticky;
        top: 1rem;
    }
}

.rank-main__col,
.rank-side {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.rank-card h2,
.rank-side h2 {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
}

.rank-close {
    display: grid;
    gap: 1.25rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    border-top: 5px solid var(--brand);
    border-radius: var(--radius);
    background: var(--card);
}

@media (min-width: 36rem) {
    .rank-close {
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: center;
    }

    .rank-close__ways {
        grid-column: 1 / -1;
    }
}

/* Mini-Treppe: Platz 4 neben Platz 3, die Lücke als gestrichelte Stufe in neutralem Orange */
.rank-stairs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 0.35rem;
    height: 8.5rem;
    max-width: 12rem;
}

.rank-stairs > div {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    padding-top: 0.4rem;
    border-radius: 0.3rem 0.3rem 0 0;
    font-size: 0.75rem;
}

.rank-stairs b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.4rem;
    line-height: 1;
}

.rank-stairs__three {
    height: 100%;
    background: var(--brand);
    color: var(--brand-contrast);
}

.rank-stairs__four {
    height: calc(100% - 1.7rem);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.rank-stairs__four::before {
    content: attr(data-gap);
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border: 2px dashed var(--status-open);
    border-bottom: 0;
    border-radius: 0.3rem 0.3rem 0 0;
    background: var(--status-open-bg);
    color: var(--status-open);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.rank-close h2 {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.05;
}

.rank-close h2 em {
    font-style: normal;
    color: var(--status-open);
}

.rank-close__text p {
    margin: 0.4rem 0 0;
    color: var(--text-muted);
}

/* Zwei Wege: wer schon dabei ist, bleibt dran; wer neu ist, steigt ein */
.rank-close__ways {
    display: grid;
    gap: 0.6rem;
}

@media (min-width: 36rem) {
    .rank-close__ways {
        grid-template-columns: 1fr 1fr;
    }
}

.rank-close__ways a {
    display: grid;
    gap: 0.1rem;
    padding: 0.75rem 0.9rem;
    border: 2px solid var(--brand);
    border-radius: var(--radius-button);
    color: var(--text);
    text-decoration: none;
}

.rank-close__ways a.rank-close__stay {
    background: var(--brand);
    color: var(--brand-contrast);
}

.rank-close__ways a:hover b {
    text-decoration: underline;
}

.rank-close__ways a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.rank-close__ways b {
    font-weight: 800;
}

.rank-close__ways small {
    opacity: 0.85;
}

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rank-list li {
    display: grid;
    grid-template-columns: 2.2rem 2.4rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.rank-list li:last-child {
    border-bottom: 0;
}

.rank-list__place {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.3rem;
    text-align: right;
    color: var(--text-muted);
}

.rank-list__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    color: var(--brand-ink);
}

.rank-list__avatar.is-anon {
    background: var(--surface);
    color: var(--text-muted);
}

.rank-list__name {
    overflow-wrap: anywhere;
}

.rank-list__name.is-anon {
    color: var(--text-muted);
    font-style: italic;
}

.rank-list__pts {
    font-weight: 700;
    white-space: nowrap;
}

.rank-list__pts small {
    font-weight: 400;
    color: var(--text-muted);
}

.rank-race {
    display: grid;
    gap: 0.75rem;
}

.rank-race h2 {
    margin: 0;
}

.rank-race__prize {
    margin: 0;
    font-weight: 600;
}

.rank-lane {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.rank-lane.is-lead {
    border: 2px solid var(--brand);
}

.rank-lane__top {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.rank-lane__place,
.rank-lane__name,
.rank-lane__pts b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}

.rank-lane__place {
    width: 2rem;
    text-align: center;
    font-size: 1.6rem;
}

.rank-lane__name {
    font-size: 1.35rem;
}

.rank-lane__pts {
    margin-left: auto;
    text-align: right;
}

.rank-lane__pts b {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
}

.rank-lane__pts small,
.rank-lane__hint {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.rank-lane__hint {
    margin: 0;
}

.rank-lane__track {
    height: 0.9rem;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.rank-lane__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
}

.rank-goal__nums {
    margin: 0;
}

.rank-goal__nums b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2rem;
}

.rank-goal__stamps {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.3rem;
    margin: 0.75rem 0;
}

.rank-goal__stamps i {
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed var(--border);
}

.rank-goal__stamps i.is-on {
    background: var(--status-full);
    border: 2px solid var(--status-full);
}

.rank-goal p {
    margin: 0;
}

/* „Jetzt Punkte holen“: dringendste Schicht als Angebot in Vereinsfarbe, weitere kompakt. Ganze Karte ist der Link. */

.rank-offers {
    display: grid;
    gap: 0.6rem;
}

.rank-offers h2 {
    margin: 0 0 0.15rem;
}

.rank-hot {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--brand-contrast);
    text-decoration: none;
    transition: transform 0.12s, box-shadow 0.12s;
}

.rank-hot::after {
    content: "";
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-contrast) 10%, transparent);
    pointer-events: none;
}

.rank-hot:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgb(0 0 0 / 0.18);
}

.rank-hot:focus-visible,
.rank-offer:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.rank-hot__flag {
    justify-self: start;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--status-open-bg);
    color: var(--status-open);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rank-hot__top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.rank-hot__top strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.rank-hot__top > span:first-child > span {
    opacity: 0.85;
}

.rank-hot__pts {
    position: relative;
    z-index: 1;
    flex: none;
    text-align: center;
}

.rank-hot__pts b {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2.6rem;
    line-height: 0.9;
}

.rank-hot__pts small {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.rank-hot__seats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.rank-hot__seats i {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    border: 2px dashed color-mix(in srgb, var(--brand-contrast) 60%, transparent);
}

.rank-hot__seats i.is-taken {
    border: 0;
    background: color-mix(in srgb, var(--brand-contrast) 85%, transparent);
}

.rank-hot__seats i.is-you {
    display: grid;
    place-items: center;
    border: 2px solid var(--brand-contrast);
    background: color-mix(in srgb, var(--brand-contrast) 25%, transparent);
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 800;
}

.rank-hot .rank-effect {
    padding-top: 0.55rem;
    border-top: 1px dashed color-mix(in srgb, var(--brand-contrast) 35%, transparent);
    color: inherit;
}

.rank-hot__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}

.rank-hot__cta em {
    font-style: normal;
    font-size: 0.95rem;
}

.rank-hot__btn {
    padding: 0.55rem 1rem;
    border-radius: var(--radius-button);
    background: var(--brand-contrast);
    color: var(--brand);
    font-weight: 800;
    white-space: nowrap;
}

.rank-hot:hover .rank-hot__btn {
    text-decoration: underline;
}

.rank-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.2rem 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-left: 5px solid var(--brand);
    border-radius: var(--radius);
    background: var(--card);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s, transform 0.12s;
}

.rank-offer:hover {
    border-color: var(--brand);
    transform: translateX(3px);
}

.rank-offer > :not(.rank-offer__pts) {
    grid-column: 1;
}

.rank-offer b {
    font-size: 1.05rem;
}

.rank-offer small {
    color: var(--text-muted);
}

.rank-offer__bar {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--surface);
    overflow: hidden;
}

.rank-offer__bar > span {
    display: block;
    height: 100%;
    background: var(--status-open);
}

.rank-offer--gift {
    border-left-style: dashed;
}

.rank-offer__pts {
    grid-row: 1 / span 4;
    grid-column: 2;
    display: grid;
    justify-items: center;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--status-full);
}

.rank-offer__pts span {
    margin-top: 0.25rem;
    font-family: var(--font-body, inherit);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-ink);
}

.rank-effect {
    font-size: 0.9rem;
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .rank-hot,
    .rank-offer {
        transition: none;
    }

    .rank-hot:hover,
    .rank-offer:hover {
        transform: none;
    }
}

.rank-wall {
    margin-top: 2.5rem;
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--brand-contrast);
    text-align: center;
}

.rank-wall h2 {
    margin: 0 0 0.25rem;
}

.rank-wall > p {
    margin: 0 0 1.25rem;
    opacity: 0.85;
}

.rank-wall__cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.3rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.15;
}

.rank-wall__cloud li {
    white-space: nowrap;
}

.rank-wall__cloud li.is-anon {
    opacity: 0.55;
}

.rank-wall__cloud sup {
    margin-left: 0.15em;
    font-family: var(--font-body);
    font-size: 0.45em;
    opacity: 0.7;
}

.rank-badges {
    margin-top: 2.5rem;
}

.rank-badges h2 {
    margin-bottom: 0.25rem;
}

.badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.badge {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    align-content: start;
    padding: 1rem 0.75rem;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.badge__icon {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: inset 0 0 0 4px var(--brand), inset 0 0 0 6px var(--brand-contrast);
}

.badge b {
    line-height: 1.2;
}

.badge small {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.badge__count {
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--status-full);
    background: var(--status-full-bg);
}

.badge--rare .badge__icon {
    background: linear-gradient(135deg, #e3b33b, #b8860b);
    box-shadow: inset 0 0 0 4px #b8860b, inset 0 0 0 6px #ffffff;
}

.badge.is-open .badge__icon {
    filter: grayscale(1);
    opacity: 0.45;
}

.badge.is-open .badge__count {
    color: var(--text-muted);
    background: var(--surface);
}

.rank-note {
    margin-top: 2rem;
    max-width: 44rem;
}

.code {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.embedded .container {
    padding-top: var(--space);
}

/* Eintragen und Zusagen: Ticket im Vereinslook + Formular als Satz */

.signup-page {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    margin-top: var(--space);
}

@media (min-width: 56rem) {
    .signup-page {
        grid-template-columns: 22rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    .signup-page > .ticket {
        position: sticky;
        top: 1rem;
    }
}

.ticket {
    background: var(--brand);
    color: var(--brand-contrast);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.12);
}

.ticket p {
    margin: 0;
}

.ticket__top {
    position: relative;
    padding: 1.4rem 1.5rem 1.2rem;
}

.ticket__kicker {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.ticket__title {
    font-size: clamp(2.2rem, 7vw, 3.1rem);
    margin: 0.2rem 0 0.4rem;
    text-transform: uppercase;
    line-height: 1;
    overflow-wrap: anywhere;
}

.ticket__when {
    font-size: 1.05rem;
}

.ticket__when b {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.55rem;
}

.ticket__cut {
    position: relative;
    height: 1.4rem;
    background:
        radial-gradient(circle at 0 50%, var(--bg) 0.7rem, transparent 0.75rem) left / 50% 100% no-repeat,
        radial-gradient(circle at 100% 50%, var(--bg) 0.7rem, transparent 0.75rem) right / 50% 100% no-repeat;
}

.ticket__cut::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 50%;
    border-top: 2px dashed color-mix(in srgb, var(--brand-contrast) 40%, transparent);
}

.ticket__bottom {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 1.5rem 1.4rem;
    font-size: 0.95rem;
}

.ticket__row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.ticket__row > span:first-child {
    width: 1.2rem;
    flex: none;
    text-align: center;
    opacity: 0.8;
}

.ticket__dots {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.ticket__dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--brand-contrast) 55%, transparent);
    display: grid;
    place-items: center;
    font-size: 0.62rem;
    font-weight: 800;
}

.ticket__dot.is-on {
    background: var(--brand-contrast);
    border: 2px solid var(--brand-contrast);
}

.ticket__dot.is-you {
    background: #fff;
    color: var(--status-full);
    border: 2px solid #fff;
}

.ticket__count {
    font-size: 0.9rem;
    opacity: 0.9;
}

.ticket__tag {
    display: inline-block;
    font-style: normal;
    background: color-mix(in srgb, var(--brand-contrast) 15%, transparent);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    margin: 0.2rem 0.2rem 0 0;
}

.ticket__stamp {
    position: absolute;
    right: 1rem;
    top: 1rem;
    transform: rotate(12deg);
    border: 3px solid var(--brand-contrast);
    border-radius: 0.4rem;
    padding: 0.15rem 0.6rem;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.say-form {
    display: grid;
    gap: 1.2rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem 1.5rem;
    min-width: 0;
}

.say-form > p,
.say-form .form-errors {
    margin: 0;
}

.say {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: clamp(1.45rem, 4.2vw, 2.05rem);
    line-height: 1.6;
    margin: 0;
}

.say--small {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
}

.say mark {
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
    color: var(--brand-ink);
    padding: 0 0.25em;
    border-radius: 0.2em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.say s {
    text-decoration: none;
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--status-full) 30%, transparent) 62%);
}

.say .say__field {
    font: inherit;
    font-family: var(--font-body);
    font-size: 0.72em;
    font-weight: 600;
    color: var(--brand-ink);
    width: auto;
    min-width: 6em;
    max-width: 100%;
    min-height: 0;
    padding: 0 0.2em;
    border: 0;
    border-bottom: 3px solid var(--brand);
    border-radius: 0;
    background: transparent;
    vertical-align: baseline;
}

.say .say__field:focus {
    outline: none;
    background: color-mix(in srgb, var(--brand) 12%, var(--card));
}

.say .say__field::placeholder {
    color: color-mix(in srgb, var(--brand-ink) 45%, transparent);
    font-weight: 400;
}

.say .say__field[aria-invalid="true"] {
    border-bottom-color: var(--danger);
}

/* E-Mail-Adressen sind lang: breiter starten und mit dem Inhalt mitwachsen. */
.say .say__field--email {
    min-width: 13em;
    field-sizing: content;
}

.say .say__field--n {
    width: 2.6em;
    min-width: 0;
    text-align: center;
}

.addons {
    display: grid;
    gap: 0.6rem;
}

.addon {
    position: relative;
}

.addon__switch {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.addon__add {
    display: block;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    cursor: pointer;
    color: var(--text-muted);
}

.addon__add b {
    color: var(--brand-ink);
}

.addon__add:hover,
.addon__switch:focus-visible + .addon__add {
    border-color: var(--brand);
}

.addon__switch:focus-visible + .addon__add {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.addon__body {
    display: none;
    position: relative;
    gap: 0.5rem;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
    padding: 0.9rem 3rem 0.9rem 1rem;
}

.addon:has(.addon__switch:checked) .addon__body {
    display: grid;
}

.addon:has(.addon__switch:checked) .addon__add {
    display: none;
}

.addon__body .help,
.addon__body .form-errors {
    margin: 0;
}

.addon__remove {
    position: absolute;
    right: 0.6rem;
    top: 0.5rem;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    color: var(--text-muted);
}

.addon__remove:hover {
    color: var(--text);
}

.chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    vertical-align: middle;
    margin: 0.2rem 0;
}

.chips[hidden] {
    display: none;
}

.chip {
    font: inherit;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

.chip[aria-pressed="true"] {
    background: var(--brand);
    color: var(--brand-contrast);
    border-color: var(--brand);
}

/* „Schon zugesagt“ unter dem Sorten-Feld */
.taken-pop {
    position: absolute;
    z-index: 5;
    left: 1rem;
    right: 1rem;
    top: calc(100% - 0.4rem);
    display: grid;
    gap: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.15);
    padding: 0.8rem 1rem;
    font-size: 0.92rem;
}

.taken-pop[hidden] {
    display: none;
}

.taken-pop--inline {
    position: static;
    box-shadow: none;
}

.taken-pop b {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.taken-pop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.taken-pop li {
    background: var(--surface);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.taken-pop small {
    color: var(--text-muted);
}

.say-check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.say-check input {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.15rem;
    accent-color: var(--brand);
    flex: none;
}

.say-check small {
    display: block;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.button--say {
    min-height: 3.4rem;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mehrere Schichten: Ticketstapel – auf dem Handy untereinander, ab Tablet leicht versetzt übereinander */

.ticket-stack {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.ticket-stack__sum {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.35rem;
}

.ticket-stack__list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket--mini .ticket__top {
    padding: 1rem 1.25rem;
}

.ticket--mini .ticket__title {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
}

.ticket--mini .ticket__when b {
    font-size: 1.2rem;
}

@media (min-width: 56rem) {
    .signup-page > .ticket-stack {
        position: sticky;
        top: 1rem;
    }

    .ticket-stack__list {
        gap: 0;
        padding: 0.25rem 0.5rem 0.75rem 0;
    }

    .ticket-stack__list > li {
        position: relative;
        transform: rotate(-0.8deg);
        /* Heller Rand trennt die übereinanderliegenden Tickets auch bei dunkler Vereinsfarbe. */
        box-shadow: 0 0 0 3px var(--bg), 0 10px 22px rgb(0 0 0 / 0.14);
    }

    .ticket-stack__list > li:nth-child(even) {
        transform: rotate(0.9deg) translateX(0.5rem);
    }

    .ticket-stack__list > li + li {
        margin-top: -0.5rem;
    }
}

.say-done__shifts {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.say-done {
    text-align: center;
    justify-items: center;
    padding-top: 2rem;
}

.say-done__icon {
    font-size: 3.2rem;
    line-height: 1;
}

.say-done p {
    max-width: 34rem;
}

.say-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.say-done__more {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.say-done__more h2 {
    margin: 0;
    font-size: 1.2rem;
}

.say-done__more a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--status-open);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
}

.say-done__more a strong {
    color: var(--status-open);
    white-space: nowrap;
}

/* Live-Vorschau in den Einstellungen */

.theme-preview {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space);
    overflow: hidden;
    font-family: var(--font-body);
    background: var(--bg);
}

.theme-preview__label {
    margin: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface);
}

.theme-preview__header {
    background: var(--brand);
    color: var(--brand-contrast);
    border-bottom: 4px solid var(--accent);
    padding: 0.6rem 0.75rem;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}

.theme-preview__body {
    padding: 0.75rem;
}

.theme-preview__shift {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Auswahl als Optionsfelder (z. B. Ecken in den Einstellungen) nebeneinander */

.form-row div > input[type="radio"] {
    margin: 0;
}

.form-row div > input[type="radio"] + label {
    display: inline-block;
    font-weight: 400;
    margin: 0 1.25rem 0.25rem 0.35rem;
}

/* Fehlerseiten: große Zahl im Vereinslook, klarer Rückweg */

.error-page {
    display: grid;
    gap: 0.5rem 2.5rem;
    align-items: center;
    max-width: 48rem;
    margin: 2rem 0 3rem;
}

@media (min-width: 44rem) {
    .error-page {
        grid-template-columns: auto minmax(0, 1fr);
        margin-top: 4rem;
    }
}

.error-page__code {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: var(--font-heading-weight);
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 3px var(--brand);
    letter-spacing: -0.02em;
}

.error-page h1 {
    margin-top: 0;
}

.error-page__text {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Planseite: breiter Kopf, „Hier wird’s knapp“, Raster/Liste, Spenden */

.page-wide .container {
    padding-top: 0;
}

.plan-hero {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.plan-hero--brand,
.plan-hero--photo {
    background: var(--brand);
    color: var(--brand-contrast);
    border-bottom: 4px solid var(--accent);
}

/* Dezenter Kreis als Schmuck – nimmt die Kontrastfarbe auf, funktioniert mit jeder Vereinsfarbe. */
.plan-hero--brand::after {
    content: "";
    position: absolute;
    right: -7rem;
    top: -5rem;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    border: 3.5rem solid color-mix(in srgb, var(--brand-contrast) 8%, transparent);
    pointer-events: none;
}

.plan-hero--photo {
    background:
        linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 88%, transparent) 45%, color-mix(in srgb, var(--brand) 35%, transparent) 100%),
        var(--hero-image, none) center / cover no-repeat,
        var(--brand);
}

.plan-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem var(--space) 2.25rem;
    display: grid;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 52rem) {
    .plan-hero__inner {
        grid-template-columns: 1.6fr 1fr;
        padding-block: 3rem;
    }
}

.plan-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.plan-hero__eyebrow img {
    height: 2.25rem;
    width: auto;
    background: #ffffff;
    padding: 0.15rem;
    border-radius: var(--radius);
}

.plan-hero h1 {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 0.6rem;
}

.plan-hero__call {
    display: block;
}

.plan-hero__lead {
    font-size: 1.1rem;
    max-width: 36rem;
    margin: 0 0 1.25rem;
    opacity: 0.92;
}

.plan-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.plan-hero--brand .plan-hero__link,
.plan-hero--photo .plan-hero__link {
    color: inherit;
}

.button--hero {
    min-height: 3rem;
    padding-inline: 1.5rem;
}

.plan-hero--brand .button--hero,
.plan-hero--photo .button--hero {
    background: var(--brand-contrast);
    border-color: var(--brand-contrast);
    color: var(--brand);
}

.plan-hero__counter {
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
}

.plan-hero--brand .plan-hero__counter,
.plan-hero--photo .plan-hero__counter {
    background: color-mix(in srgb, var(--brand-contrast) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand-contrast) 25%, transparent);
}

.plan-hero__counter strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 3.5rem;
    line-height: 1;
}

.plan-hero__counter small {
    display: block;
    opacity: 0.85;
}

.meter--hero {
    height: 0.6rem;
    margin: 0.75rem 0 0.5rem;
}

.meter--hero .meter__bar {
    background: var(--brand);
}

.plan-hero--brand .meter--hero,
.plan-hero--photo .meter--hero {
    background: color-mix(in srgb, var(--brand-contrast) 25%, transparent);
}

.plan-hero--brand .meter--hero .meter__bar,
.plan-hero--photo .meter--hero .meter__bar {
    background: var(--brand-contrast);
}

.plan-section {
    padding-top: 2.5rem;
}

.plan-section > h2,
.board-head h2 {
    font-size: 1.75rem;
}

.plan-section > h2 small {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
}

/* Hier wird’s knapp */

.urgent {
    display: grid;
    gap: var(--space);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.urgent__card {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 6px solid var(--status-open);
    border-radius: var(--radius);
    padding: 1rem 1.15rem 1.15rem;
}

.urgent__when {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.urgent__card h3 {
    font-size: 1.5rem;
    margin: 0;
}

.urgent__need {
    margin: 0;
}

.urgent__need strong {
    color: var(--status-open);
    font-size: 1.3rem;
}

.meter--open .meter__bar {
    background: var(--status-open);
}

.urgent__card .meter {
    margin: 0.25rem 0 0.5rem;
}

/* Alle Schichten: Raster (Desktop) oder Liste (Handy, ohne JS) */

.board-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}

.board-head h2 {
    margin: 0;
}

.view-switch {
    display: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-button);
    overflow: hidden;
    background: var(--card);
}

[data-plan-board-ready] .view-switch {
    display: inline-flex;
}

.view-switch button {
    font: inherit;
    font-weight: 600;
    border: 0;
    background: transparent;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    color: var(--text-muted);
}

.view-switch button[aria-pressed="true"] {
    background: var(--brand);
    color: var(--brand-contrast);
}

.day-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.day-nav a {
    flex: none;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-button);
    padding: 0.35rem 0.9rem;
}

.day-nav small {
    font-weight: 400;
    margin-left: 0.35rem;
}

.day-nav__free {
    color: var(--status-open);
}

.day-nav__full {
    color: var(--status-full);
}

.legend {
    color: var(--text-muted);
    font-size: 0.85rem;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
}

.legend__swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    vertical-align: -0.1rem;
    margin-right: 0.35rem;
    border: 2px solid transparent;
}

.legend__swatch--open {
    background: var(--status-open-bg);
    border-color: var(--status-open);
}

.legend__swatch--partial {
    background: var(--status-partial-bg);
    border-color: var(--status-partial);
}

.legend__swatch--full {
    background: var(--status-full-bg);
    border-color: var(--status-full);
}

.board-day {
    scroll-margin-top: 4.5rem;
    padding-top: 1.5rem;
}

.board-day__header {
    margin-bottom: 0.75rem;
}

.board-day__header h3 {
    font-size: 1.35rem;
    margin: 0;
}

.board-day__occasion {
    margin: 0.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
}

/* Raster: Zeitstrahl der Verwaltung, für Helfer*innen größer und anklickbar */

.board-grid {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem 0.25rem;
    margin-bottom: 0;
}

.board-grid .timeline__grid {
    min-width: calc(8rem + var(--hours) * 4rem);
}

.board-grid .timeline__label {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.05rem;
}

.board-grid .timeline__track {
    height: 3.6rem;
}

.board-grid .timeline__bar {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    border-width: 2px;
    overflow: hidden;
    white-space: nowrap;
}

.board-grid .timeline__bar b {
    font-size: 0.9rem;
}

.board-grid .timeline__bar span {
    font-size: 0.78rem;
    font-weight: 500;
}

.board-grid a.timeline__bar:hover,
.board-grid a.timeline__bar:focus-visible {
    filter: brightness(0.96);
    box-shadow: 0 0 0 2px var(--brand);
}

.board-grid .timeline__bar--full {
    color: #6b7280;
    background: #eef0f2;
    border-color: transparent;
}

.timeline__bar--swap {
    color: var(--brand-ink);
    background: var(--card);
    border-style: dashed;
}

/* Liste */

.board-list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.board-list .shift {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0.75rem var(--space);
}

.board-list .shift + .shift {
    border-top: 1px solid var(--border);
}

.board-list .shift__area {
    font-size: 1.05rem;
}

.board-list .shift__actions,
.board-list .shift__swap {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.board-list .shift--full .shift__main {
    opacity: 0.6;
}

.board-list .shift__pick {
    margin-right: auto;
}

/* Ohne JavaScript: Liste. Mit JavaScript: Raster ab Tablet-Breite, umschaltbar. */
.board-grid,
.board-grid-only {
    display: none;
}

@media (min-width: 48rem) {
    [data-plan-board-ready]:not([data-view="list"]) .board-grid {
        display: block;
    }

    [data-plan-board-ready]:not([data-view="list"]) .board-grid-only {
        display: flex;
    }

    [data-plan-board-ready]:not([data-view="list"]) .board-list {
        display: none;
    }
}

[data-plan-board-ready][data-view="grid"] .board-grid {
    display: block;
}

[data-plan-board-ready][data-view="grid"] .board-grid-only {
    display: flex;
}

[data-plan-board-ready][data-view="grid"] .board-list {
    display: none;
}

/* Mehrfachauswahl: mit JavaScript erst auf Wunsch, ohne JavaScript immer sichtbar */
[data-plan-board-ready]:not(.picking) .shift__pick,
[data-plan-board-ready]:not(.picking) .multi-bar {
    display: none;
}

.pick-start {
    display: none;
    text-align: center;
    margin-top: 1.5rem;
}

[data-plan-board-ready]:not(.picking) .pick-start {
    display: block;
}

.multi-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.multi-bar__count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Spenden: „Lieber backen als grillen?“ */

.donate {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand) 7%, var(--card));
    display: grid;
    gap: 1.25rem;
}


.donate__intro h2 {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
}

.donate__intro p {
    margin: 0;
    color: var(--text-muted);
}

.donate__list {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.donate__item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.donate__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.donate__item h3 {
    font-size: 1.2rem;
    margin: 0;
}

.donate__text,
.donate__item .facts,
.donate__already {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.donate__item .facts li + li {
    margin-top: 0.1rem;
}

.donate__already {
    font-style: italic;
}

/* Fuß immer unten: Karten einer Reihe sind gleich hoch, Buttons stehen auf einer Linie. */
.donate__foot {
    margin-top: auto;
    padding-top: 0.75rem;
    display: grid;
    gap: 0.6rem;
}

.donate__state {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.donate__state strong {
    color: var(--text);
    font-weight: 600;
}

.donate__state .meter {
    margin: 0 0 0.35rem;
}

.donate__done {
    margin: 0;
    color: var(--status-full);
    font-weight: 600;
    font-size: 0.9rem;
}

.donate__intro .notice {
    margin: 0.75rem 0 0;
    max-width: 48rem;
}

/* Fußzeile im Vereinslook */

.site-footer--club {
    margin-top: 3rem;
    background: var(--brand);
    color: var(--brand-contrast);
    border-top: 0;
    text-align: left;
    font-size: 0.95rem;
    padding: 0;
}

.site-footer--club a {
    color: inherit;
}

.site-footer__top {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem var(--space) 2rem;
    display: grid;
    gap: 2rem;
}

@media (min-width: 48rem) {
    .site-footer__top {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

.site-footer__club {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.site-footer__club img {
    height: 3.5rem;
    width: auto;
    background: #ffffff;
    padding: 0.25rem;
    border-radius: var(--radius);
}

.site-footer__club strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.25rem;
}

.site-footer--club h2 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    margin: 0 0 0.6rem;
}

.site-footer--club ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.site-footer__bottom {
    max-width: var(--container);
    margin: 0 auto;
    padding: 1rem var(--space) 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--brand-contrast) 25%, transparent);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Saisonplan: Termine × Bereiche */

.season-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    font-size: 0.95rem;
}

.season {
    margin-top: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.season table {
    width: 100%;
    border-collapse: collapse;
}

.season th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
}

.season th.season__area {
    text-align: center;
}

.season th small {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.season td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.season__month td {
    background: var(--bg);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.05rem;
    color: var(--brand-ink);
    padding-block: 0.45rem;
}

.season__row.is-next {
    box-shadow: inset 4px 0 0 var(--brand);
}

.season__row.is-past td:not(.season__cell) {
    color: var(--text-muted);
}

[data-plan-board-ready]:not(.show-past) .season .is-past,
.only-free .season__row.is-full {
    display: none;
}

.season__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.season__date strong,
.season__occasion strong {
    display: block;
}

.season__date small {
    color: var(--text-muted);
}

.season__occasion .occasion__team {
    font-size: 0.88rem;
}

.season__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--brand);
    color: var(--brand-contrast);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    margin: 0.15rem 0;
}

.season__cell {
    text-align: center;
    width: 11rem;
}

.season__covered,
.season__none {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

/* Freier Platz: als Button erkennbar */
.take {
    display: inline-grid;
    justify-items: center;
    gap: 0.15rem;
    min-width: 9rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    background: var(--brand);
    color: var(--brand-contrast);
    border: 2px solid var(--brand);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--brand) 55%, black);
}

.take:hover {
    filter: brightness(1.08);
}

.take__cta {
    font-weight: 700;
    font-size: 0.95rem;
}

.take__info {
    font-size: 0.75rem;
    opacity: 0.92;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.take__area {
    display: none;
}

.take__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.3rem;
}

.take__dot--open {
    background: #ffb15c;
}

.take__dot--partial {
    background: #ffd84d;
}

.take .take__dot {
    margin-right: 0;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
}

.season__slot {
    display: inline-grid;
    justify-items: center;
    min-width: 9rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-button);
    font-size: 0.88rem;
    line-height: 1.25;
    text-decoration: none;
}

.season__slot small {
    font-size: 0.75rem;
}

.season__slot--full,
.season__slot--open,
.season__slot--partial {
    background: #eef0f2;
    color: #6b7280;
}

.season__slot--swap {
    border: 2px dashed var(--brand-ink);
    color: var(--brand-ink);
}

.season__pick {
    display: flex;
    justify-content: center;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

/* Handy: eine Karte je Termin, Dienste als Knöpfe */
@media (max-width: 44rem) {
    .season table,
    .season tbody,
    .season tr,
    .season td {
        display: block;
        width: auto;
    }

    .season thead {
        display: none;
    }

    .season .season__row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 0.75rem;
        padding: 0.8rem 0.9rem;
        border-bottom: 1px solid var(--border);
    }

    .season .season__date {
        flex: 0 0 5.5rem;
    }

    .season .season__occasion {
        flex: 1 1 12rem;
    }

    .season .season__row td {
        border: 0;
        padding: 0;
    }

    .season__cell,
    .season__covered {
        text-align: left;
    }

    .season__covered {
        flex-basis: 100%;
    }

    .season .season__cell:has(.season__none) {
        display: none;
    }

    .season__month td {
        display: block;
    }

    .take,
    .season__slot {
        min-width: 0;
        justify-items: start;
        border-radius: var(--radius);
    }

    .take__area {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        opacity: 0.85;
    }

    .season__pick {
        justify-content: flex-start;
    }
}

[data-plan-board-ready]:not(.show-past) .season .season__row.is-past {
    display: none;
}

.plan-hero__next {
    margin: 0.6rem 0 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    font-size: 0.95rem;
}

.plan-hero__counter .plan-hero__next strong {
    display: inline;
    font-family: inherit;
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
}

.urgent__occasion {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Verwaltung: Seitenleiste + Inhalt (Entwurf V1) */

.admin {
    background: #f4f5f7;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}

.app-side {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.app-side__club {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.85rem 1rem;
    color: var(--text);
    text-decoration: none;
}

.app-side__club img {
    height: 2.25rem;
    width: auto;
}

.app-side__club strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.05rem;
    line-height: 1.15;
}

.app-side__club small {
    color: var(--text-muted);
}

/* Handy: Navigation als waagrechte Leiste zum Wischen */
.app-nav {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0 0.5rem 0.6rem;
}

.app-nav a {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.app-nav a:hover {
    background: #f1f2f4;
}

.app-nav a[aria-current="page"] {
    background: var(--brand);
    color: var(--brand-contrast);
}

.app-nav__icon {
    width: 1.2rem;
    text-align: center;
}

.app-nav__count {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 0.45rem;
    background: var(--status-open-bg);
    color: var(--status-open);
}

.app-nav__group {
    display: none;
}

.app-side__user {
    display: none;
}

.app-content {
    padding: 1.25rem var(--space) 2.5rem;
    max-width: 80rem;
    width: 100%;
}

.admin .site-footer {
    margin-top: 0;
}

@media (min-width: 60rem) {
    .app-shell {
        grid-template-columns: 15.5rem 1fr;
    }

    .app-side {
        position: sticky;
        top: 0;
        height: 100vh;
        border-bottom: 0;
        border-right: 1px solid var(--border);
        overflow-y: auto;
    }

    .app-side__club {
        padding: 1rem;
        border-bottom: 1px solid var(--border);
    }

    .app-nav {
        flex-direction: column;
        overflow: visible;
        padding: 0.75rem 0.5rem;
        gap: 0.1rem;
    }

    .app-nav__group {
        display: block;
        margin: 0.9rem 0.65rem 0.3rem;
        font-family: var(--font-body);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
    }

    .app-nav__text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-nav__public {
        margin-top: 0.9rem;
        color: var(--text-muted) !important;
    }

    .app-side__user {
        margin-top: auto;
        display: flex;
        gap: 0.6rem;
        align-items: center;
        padding: 0.9rem 1rem;
        border-top: 1px solid var(--border);
        font-size: 0.85rem;
    }

    .app-side__user strong {
        display: block;
    }

    .app-side__user small {
        color: var(--text-muted);
    }

    .app-content {
        padding: 1.75rem 2rem 3rem;
    }
}

.avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Startseite der Verwaltung */

.dash-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dash-head h1 {
    margin: 0;
}

.dash-head p {
    margin: 0.25rem 0 0;
}

.kpis {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-bottom: 1rem;
}

.kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.kpi span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.kpi strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.9rem;
    line-height: 1.15;
}

.kpi small {
    color: var(--text-muted);
}

.kpi--warn strong {
    color: var(--status-open);
}

.dash-cols {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 72rem) {
    .dash-cols {
        grid-template-columns: 1.7fr 1fr;
    }
}

.dash-main {
    display: grid;
    gap: 1rem;
}

.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
}

.panel > h2 {
    font-size: 1.2rem;
}

.todo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo li {
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0;
}

.todo li + li {
    border-top: 1px solid #eef0f2;
}

.todo strong,
.todo small {
    display: block;
}

.todo small {
    color: var(--text-muted);
}

.todo__icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.todo__icon--warn {
    background: var(--status-open-bg);
    color: var(--status-open);
}

.todo__icon--info {
    background: #e8eefc;
    color: #2848a8;
}

.todo-empty {
    margin: 0;
    color: var(--status-full);
    font-weight: 600;
}

@media (max-width: 40rem) {
    .todo li {
        grid-template-columns: 2.25rem 1fr;
    }

    .todo li .button {
        grid-column: 2;
        justify-self: start;
    }
}

.plan-overview header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.plan-overview h2 {
    font-size: 1.35rem;
    margin: 0;
}

.plan-overview h2 a {
    color: inherit;
    text-decoration: none;
}

.plan-overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
}

.heat {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.heat__row {
    display: grid;
    grid-template-columns: minmax(6rem, 14rem) 1fr;
    gap: 0.6rem;
    align-items: center;
    font-size: 0.82rem;
}

.heat__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

.heat__cells {
    display: flex;
    gap: 3px;
}

.heat__cell {
    flex: 1;
    height: 1.1rem;
    border-radius: 3px;
}

.heat__cell--open {
    background: #f2b46a;
}

.heat__cell--partial {
    background: #f3d66a;
}

.heat__cell--full {
    background: #7cc495;
}

.feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
    font-size: 0.92rem;
}

.feed li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.6rem;
}

.feed time {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.feed__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 700;
    background: var(--status-neutral);
}

.feed__icon--signed_up,
.feed__icon--confirmed {
    background: var(--status-full);
}

.feed__icon--cancelled {
    background: var(--status-open);
}

.feed__icon--released,
.feed__icon--handed_over {
    background: #2848a8;
}

.feed__icon--pledged {
    background: var(--status-partial);
}

/* Verwaltung: Dispo-Brett (Entwurf V2) */

.staffing {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    align-items: start;
}

.staffing__board {
    display: none;
    min-width: 0;
}

.staffing__hint {
    display: none;
}

/* Breiter Bildschirm: Raster links, Details der gewählten Schicht rechts. Ohne Auswahl ein Hinweis. */
@media (min-width: 72rem) {
    .staffing {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }

    .staffing__board {
        display: block;
    }

    .staffing__detail {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .staffing__detail:not(:has(:target)) .staffing__hint {
        display: block;
        background: var(--card);
        border: 1px dashed var(--border);
        border-radius: 0.75rem;
        padding: 1.25rem;
        color: var(--text-muted);
    }

    .staffing__detail:not(:has(:target)) .occasion,
    .staffing__detail:has(:target) .occasion:not(:target):not(:has(:target)),
    .staffing__detail:has(.shift:target) .shift:not(:target) {
        display: none;
    }

    .staffing__detail .occasion__header {
        position: static;
    }
}

.dispo-day {
    margin-bottom: 1.25rem;
}

.dispo-day__title {
    font-size: 1.15rem;
}

.dispo-grid {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.dispo-grid .timeline__grid {
    min-width: calc(8rem + var(--hours) * 2.8rem);
}

/* Bereichsnamen bleiben beim seitlichen Scrollen stehen. */
.dispo-grid .timeline__label {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.dispo-grid .timeline__track {
    height: 4.6rem;
}

.dispo-slot {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 0.3rem 0.45rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    font-size: 0.78rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.dispo-grid .dispo-slot {
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
}

.dispo-slot:hover,
.dispo-slot:focus-visible {
    box-shadow: 0 0 0 2px var(--brand);
}

.dispo-slot--open {
    border-color: var(--status-open);
    background: var(--status-open-bg);
}

.dispo-slot--partial {
    border-color: #d9b43a;
    background: var(--status-partial-bg);
}

.dispo-slot--full {
    border-color: #9fd3b1;
    background: var(--status-full-bg);
}

.dispo-slot__head {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-weight: 700;
    white-space: nowrap;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.chip-person {
    display: inline-grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--brand);
    color: var(--brand-contrast);
    flex: none;
}

.chip-person.is-confirmed {
    box-shadow: 0 0 0 2px var(--status-full);
}

.chip-person.is-released {
    background: #2848a8;
    color: #ffffff;
}

.chip-person.is-group {
    background: var(--card);
    color: var(--brand-ink);
    border: 2px solid var(--brand);
}

.chip-person.is-free {
    background: transparent;
    border: 2px dashed var(--status-open);
    color: var(--status-open);
}

.dispo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.dispo-legend > span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.dispo-season {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow-x: auto;
}

.dispo-season table {
    width: 100%;
    border-collapse: collapse;
}

.dispo-season th,
.dispo-season td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid #eef0f2;
    text-align: left;
    vertical-align: top;
    font-size: 0.88rem;
}

.dispo-season thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.dispo-season tbody th {
    font-weight: 600;
    min-width: 12rem;
}

.dispo-season__date {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.dispo-season .occasion__team {
    display: block;
}

.dispo-season td .dispo-slot {
    min-width: 9rem;
}

/* Verwaltung: „Heute“ fürs Handy (Entwurf V3) */

.today {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    align-items: stretch;
}

/* Karten einer Reihe gleich hoch; der Abschluss (Lücke oder „Besetzt“) sitzt immer unten. */
.today-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    scroll-margin-top: 1rem;
}

.today-card--now {
    border: 2px solid var(--brand);
}

.today-card:target {
    box-shadow: 0 0 0 3px var(--focus);
}

.today-card__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.today-card--now .today-card__label {
    color: var(--brand-ink);
}

.today-card h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
}

.today-card h2 small {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.today-card h2 small.today-card__missing {
    color: var(--status-open);
}

.today-card__occasion {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
}

.today-people {
    list-style: none;
    margin: 0;
    padding: 0;
}

.today-people li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid #eef0f2;
}

.today-people strong,
.today-people small {
    display: block;
}

.today-people small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Großer Daumen-Button zum Abhaken */
.today-yes {
    min-height: 2.75rem;
    min-width: 5.5rem;
    background: var(--status-full);
    border-color: var(--status-full);
    color: #ffffff;
}

.today-done {
    color: var(--status-full);
    font-weight: 700;
    white-space: nowrap;
}

.today-gap,
.today-full {
    margin-top: auto;
}

/* Abstand über dem Abschluss, auch wenn die Karte die höchste der Reihe ist. */
.today-card > .today-people {
    margin-bottom: 0.75rem;
}

.today-full {
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    background: var(--status-full-bg);
    color: var(--status-full);
    font-weight: 700;
}

.today-full::before {
    content: "✓ ";
}

.today-gap {
    padding: 0.75rem;
    border-radius: var(--radius);
    background: var(--status-open-bg);
    border: 1px solid color-mix(in srgb, var(--status-open) 40%, transparent);
}

.today-gap p {
    margin: 0 0 0.5rem;
    color: var(--status-open);
}

.today-gap__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.today-qr {
    margin-top: 1rem;
    max-width: 40rem;
}

.today-qr h2 {
    font-size: 1.1rem;
}

.today-qr p {
    margin: 0;
    color: var(--text-muted);
}

/* Plattform (Entwurf P1): Helferbrett-Look in Graphit, dunkle Seitenleiste */

.platform .app-side {
    background: #14191f;
    color: #e4e7eb;
    border-color: #2a323b;
}

.platform .app-side__club,
.platform .app-nav a {
    color: #e4e7eb;
}

.platform .app-side__club {
    border-color: #2a323b;
}

.platform .app-side__club small,
.platform .app-nav__group,
.platform .app-side__user small {
    color: #a3acb7;
}

.platform .app-nav a:hover {
    background: #222a33;
}

.platform .app-nav a[aria-current="page"] {
    background: #2c3540;
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--accent);
}

.platform .app-side__user {
    border-color: #2a323b;
}

.platform .app-side__user a {
    color: #c8d4e6;
}

.platform .avatar {
    background: var(--accent);
    color: #14191f;
}

.platform-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    background: var(--accent);
    color: #14191f;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.table-scroll {
    overflow-x: auto;
}

.platform-club {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.platform-club img,
.platform-club__initials {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.5rem;
    object-fit: contain;
    flex: none;
}

.platform-club__initials {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
}

.platform-club small {
    display: block;
    color: var(--text-muted);
}

.platform-actions {
    white-space: nowrap;
}

.meter--small {
    width: 6rem;
    height: 0.4rem;
    margin: 0 0 0.2rem;
}

.system-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.system-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.onboarding__steps {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
}

.onboarding legend {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.15rem;
    padding: 0 0.25rem;
}

.onboarding__no {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-contrast);
    font-size: 0.85rem;
}

@media (min-width: 72rem) {
    .platform .dash-cols {
        grid-template-columns: 3fr 1fr;
    }
}

.platform-clubs td {
    vertical-align: middle;
}

/* Vereins-Startseite: Kopf mit Wappen, nächste Termine, Pläne als Karten */

.home-hero__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
}

.home-hero h1 {
    font-size: clamp(2.2rem, 7vw, 4rem);
}

.home-hero__crest {
    display: none;
}

@media (min-width: 52rem) {
    .home-hero .plan-hero__inner {
        grid-template-columns: 1fr auto;
    }

    .home-hero__crest {
        display: grid;
        place-items: center;
        width: 11rem;
        height: 11rem;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--brand-contrast) 15%, transparent);
    }

    .plan-hero--plain .home-hero__crest {
        box-shadow: 0 0 0 1px var(--border);
    }

    .home-hero__crest img {
        width: 72%;
        height: auto;
    }
}

.agenda {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.agenda__row {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    gap: 0.4rem 1rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
}

.agenda__row + .agenda__row {
    border-top: 1px solid var(--border);
}

.agenda__row--full {
    opacity: 0.65;
}

.agenda__date {
    grid-row: span 2;
    text-align: center;
    line-height: 1.1;
    border-right: 1px solid var(--border);
    padding-right: 0.9rem;
}

.agenda__date b {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.8rem;
}

.agenda__date span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.agenda__main a {
    color: inherit;
    text-decoration: none;
    font-size: 1.1rem;
}

.agenda__main a:hover {
    text-decoration: underline;
}

.agenda__main small {
    display: block;
    color: var(--text-muted);
}

.agenda__action {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.agenda__free {
    color: var(--status-open);
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 40rem) {
    .agenda__row {
        grid-template-columns: 4.5rem 1fr auto;
    }

    .agenda__date {
        grid-row: auto;
    }
}

.home-plans {
    display: grid;
    gap: var(--space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.home-plan {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
}

.home-plan h3 {
    font-size: 1.6rem;
    margin: 0;
}

.home-plan h3 a {
    color: inherit;
    text-decoration: none;
}

.home-plan p {
    margin: 0;
}

.home-plan__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.home-plan__tag {
    background: color-mix(in srgb, var(--brand-ink) 10%, var(--card));
    color: var(--brand-ink);
    border-radius: 999px;
    padding: 0.05rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-plan__fill {
    display: grid;
    gap: 0.35rem;
}

.home-plan__fill strong {
    font-size: 1.2rem;
}

.home-plan__note {
    font-size: 0.95rem;
    color: var(--text-muted);
}

.home-plan__cta {
    margin-top: auto;
}

@media (min-width: 40rem) {
    .home-plan__cta {
        align-self: flex-end;
        width: auto;
    }
}

.home-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    counter-reset: step;
}

.home-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.9rem;
    align-items: start;
}

.home-steps li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-contrast);
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.3rem;
}

.home-steps span {
    color: var(--text-muted);
}

.home-thanks {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.6rem 1.75rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-ink) 9%, var(--card));
}

.home-thanks h2 {
    margin: 0;
    font-size: 1.5rem;
}

.home-thanks p {
    margin: 0;
}

.home-thanks strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--brand-ink);
}

@media (min-width: 52rem) {
    .home-thanks {
        grid-template-columns: 1.3fr 1fr 1fr auto;
    }
}

/* Plattform: Vereinsseite */

.breadcrumb {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.status--neutral {
    color: var(--status-neutral);
    background: var(--status-neutral-bg);
}

.platform-club--big h1 {
    margin: 0;
}

.platform-club--big img,
.platform-club--big .platform-club__initials {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1rem;
}

.dash-head .platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    white-space: normal;
}

.platform-facts {
    margin: 0 0 1rem;
}

.platform-facts dt {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.platform-facts dt:first-child {
    margin-top: 0;
}

.platform-facts dd {
    margin: 0.1rem 0 0;
    overflow-wrap: anywhere;
}

.swatch {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    vertical-align: middle;
}

.platform-club a.platform-club__name {
    color: inherit;
    text-decoration: none;
}

.platform-club a.platform-club__name:hover strong {
    text-decoration: underline;
}

/* Meine Einsätze: nächster Einsatz als Ticket, weitere als kleine Tickets (Entwurf m1), Helferkarte (m4) */

.me-hello {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.me-hello h1 {
    font-size: clamp(2.2rem, 7vw, 3.2rem);
    margin: 0;
}

.me-private {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.me-hello__cal {
    display: grid;
    gap: 0.3rem;
    justify-items: start;
    max-width: 22rem;
}

.me-hello__cal small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.me-wallet {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 56rem) {
    .me-wallet {
        grid-template-columns: 24rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    .me-wallet__main {
        position: sticky;
        top: 1rem;
    }
}

.me-wallet__side {
    display: grid;
    gap: 2rem;
    min-width: 0;
}

.me-label {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.me-ticket__kicker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.me-ticket__count {
    flex: none;
    padding: 0.05rem 0.6rem;
    border-radius: 999px;
    background: var(--brand-contrast);
    color: var(--brand);
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
}

.me-ticket .status {
    background: var(--card);
}

.me-ticket__qr {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0.3rem 0 0;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: #ffffff;
    color: #111111;
}

.me-ticket__qr svg {
    width: 7rem;
    height: 7rem;
    flex: none;
}

.me-ticket__qr p {
    font-size: 0.88rem;
}

.me-ticket__qr b {
    display: block;
    font-size: 1rem;
}

.me-ticket__soon {
    padding: 0.6rem 0.8rem;
    border: 1px dashed color-mix(in srgb, var(--brand-contrast) 45%, transparent);
    border-radius: var(--radius);
    font-size: 0.88rem;
    opacity: 0.9;
}

.me-under {
    padding-top: 1rem;
}

.me-under .help {
    margin: 0.5rem 0 0;
}

.me-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: start;
}

.me-acts form {
    margin: 0;
}

.me-ask > summary {
    list-style: none;
    cursor: pointer;
}

.me-ask > summary::-webkit-details-marker {
    display: none;
}

.me-ask[open] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.me-ask[open] > summary {
    order: 2;
}

.me-ask__close,
.me-ask[open] .me-ask__open {
    display: none;
}

.me-ask[open] .me-ask__close {
    display: inline;
}

.me-ask form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
    font-size: 0.92rem;
}

.button--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

.me-stack {
    display: grid;
    gap: 0.75rem;
}

.me-mini {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.me-mini__date {
    display: grid;
    place-content: center;
    padding: 0.75rem 0.25rem;
    text-align: center;
    background: var(--brand);
    color: var(--brand-contrast);
    border-right: 2px dashed var(--bg);
}

.me-mini__date b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.9rem;
    line-height: 1;
}

.me-mini__date small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.me-mini__body {
    display: grid;
    gap: 0.45rem;
    padding: 0.9rem 1rem;
    min-width: 0;
}

.me-mini__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    align-items: baseline;
    justify-content: space-between;
}

.me-mini h3 {
    margin: 0;
    font-size: 1.35rem;
}

.me-mini__meta {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.me-mini--off .me-mini__date {
    background: #9aa0aa;
    color: #ffffff;
}

.me-mini--off h3 {
    text-decoration: line-through;
}

.me-mini .checkin-code {
    margin: 0;
}

.me-mini .checkin-code svg {
    width: 7rem;
    height: 7rem;
}

.me-sec > h2 {
    font-size: 1.5rem;
}

.me-pledges {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 40rem) {
    .me-pledges {
        grid-template-columns: 1fr 1fr;
    }
}

.me-pledge {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 1rem 1.1rem;
    background: var(--card);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
}

.me-pledge h3 {
    margin: 0;
    font-size: 1.2rem;
}

.me-pledge p {
    margin: 0;
}

.me-pledge .facts {
    margin: 0;
    padding: 0;
    font-size: 0.93rem;
}

.me-pledge__kind {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.me-pledge form {
    margin: 0.25rem 0 0;
}

.me-tight {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: var(--status-open-bg);
}

.me-tight h2 {
    margin: 0;
    font-size: 1.3rem;
}

.me-tight .help {
    margin: 0 0 0.25rem;
}

.me-tight__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: inherit;
    text-decoration: none;
}

.me-tight__item:hover {
    border-color: var(--brand);
}

.me-tight__item small {
    display: block;
    color: var(--text-muted);
}

.me-tight__miss {
    color: var(--status-open);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.me-rank {
    display: grid;
    gap: 1rem;
}

.me-rank__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

.me-rank__place {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.me-rank__place > span {
    font-size: 2rem;
}

.me-rank__place h2 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.05;
}

.me-rank__place small {
    display: block;
    color: var(--text-muted);
}

.me-rank form {
    margin: 0;
}

.me-switch {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.me-switch__track {
    position: relative;
    flex: none;
    width: 2.8rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #c3c7cf;
}

.me-switch__track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}

.me-switch[aria-checked="true"] .me-switch__track {
    background: var(--status-full);
}

.me-switch[aria-checked="true"] .me-switch__track::after {
    transform: translateX(1.2rem);
}

.me-switch:focus-visible .me-switch__track {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.me-switch b {
    display: block;
}

.me-switch small {
    color: var(--text-muted);
}

.me-badges__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.me-badges__head h2 {
    margin: 0;
    font-size: 1.5rem;
}

.badges--own .badge.is-earned {
    border: 2px solid var(--brand);
}

.badge__bar {
    width: 100%;
    height: 0.35rem;
    margin-top: 0.2rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface);
}

.badge__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--status-full);
}

.badge .badge__next {
    color: var(--text);
}

.me-card {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border-radius: calc(var(--radius) + 0.6rem);
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
}

.me-card::after {
    content: "";
    position: absolute;
    right: -4rem;
    top: -4rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    border: 2rem solid color-mix(in srgb, var(--brand-contrast) 7%, transparent);
    pointer-events: none;
}

.me-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.me-card__top img {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0.2rem;
    border-radius: 50%;
    background: #ffffff;
    object-fit: contain;
}

.me-card__top small {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
}

.me-card__top b {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.6rem;
    line-height: 1.1;
    text-transform: uppercase;
}

.me-card__nums {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.2rem 0 1rem;
    font-size: 0.85rem;
}

.me-card__nums b {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 2.1rem;
    line-height: 1;
}

.me-stamps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 24rem;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 30rem) {
    .me-stamps {
        gap: 0.65rem;
    }
}

.me-stamp {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border: 2px dashed color-mix(in srgb, var(--brand-contrast) 35%, transparent);
    border-radius: 50%;
    font-size: 0.62rem;
    line-height: 1.1;
    text-align: center;
}

.me-stamp.is-on {
    border: 0;
    background: var(--brand-contrast);
    color: var(--brand);
    font-weight: 800;
    transform: rotate(-8deg);
}

.me-stamp.is-on:nth-child(2n) {
    transform: rotate(6deg);
}

.me-stamp.is-on b {
    display: block;
    font-size: 1.1rem;
}

.me-stamp.is-soon {
    border-color: var(--brand-contrast);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.me-stamp.is-goal {
    border-style: solid;
    font-size: 1.2rem;
}

.me-card__foot {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0;
    font-size: 0.92rem;
}

/* Vorschau aufs nächste Vereinsjahr unter der Karte, Rückblick aufs Vorjahr darüber */
.me-card-note {
    margin: 0.6rem 0 0;
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--card);
    font-size: 0.92rem;
    color: var(--text-muted);
}

.me-card-note--review {
    margin: 0 0 0.6rem;
    border-style: solid;
    color: var(--text);
}

.me-past > summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.me-past > summary::-webkit-details-marker {
    display: none;
}

.me-past > summary::after {
    content: "＋";
    font-weight: 400;
}

.me-past[open] > summary::after {
    content: "－";
}

.me-past .muted {
    font-weight: 400;
}

.me-past__list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.me-past__list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.me-past__list li:last-child {
    border-bottom: 0;
}

.me-past__list small {
    display: block;
    color: var(--text-muted);
}

.me-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.me-empty h2,
.me-empty p {
    margin: 0;
}

/* Testlauf und Vertrag: Hinweis-Band auf öffentlichen Seiten, Erklärung in der Verwaltung */

.trial-band {
    margin: 0;
    padding: 0.6rem var(--space);
    text-align: center;
    background: var(--status-partial-bg);
    color: var(--status-partial);
    border-bottom: 2px dashed var(--status-partial);
    font-size: 0.95rem;
}

.contract-hint {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    background: var(--status-open-bg);
    border-left: 4px solid var(--status-open);
}

.contract-hint p {
    margin: 0 0 0.4rem;
}

.contract-hint p:last-child {
    margin-bottom: 0;
}

.contract-status {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* Verwaltung: Baukasten Website-Widget */

.widget-builder {
    display: grid;
    gap: 1.25rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

@media (min-width: 64rem) {
    .widget-builder {
        grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    }
}

.widget-builder__form {
    display: grid;
    gap: 1rem;
}

.widget-builder__form fieldset {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.widget-builder__form legend {
    margin-bottom: 0.4rem;
    font-weight: 700;
}

.widget-builder__form label {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.widget-builder__form .form-row label {
    display: block;
}

.widget-builder__form small {
    display: block;
}

.widget-builder__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.widget-builder__bar h2 {
    margin: 0;
}

.segmented {
    display: inline-flex;
    gap: 0.35rem;
}

.widget-builder__stage {
    overflow-x: auto;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: repeating-conic-gradient(#eef0f3 0% 25%, #f7f8fa 0% 50%) 0 0 / 1.25rem 1.25rem;
}

.widget-builder__frame {
    display: block;
    max-width: 100%;
    height: 520px;
    margin: 0 auto;
    border: 0;
    background: transparent;
}

/* Spendenbedarf anlegen/bearbeiten: Formular links, Live-Vorschau der Spendenkarte rechts */

.need-editor {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 62rem) {
    .need-editor {
        grid-template-columns: minmax(0, 36rem) minmax(16rem, 20rem);
    }

    .need-preview {
        position: sticky;
        top: 1rem;
    }
}

.need-section {
    border: 1px solid var(--border);
    padding: 1.1rem 1.25rem 0.4rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.need-section legend {
    float: left;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.15rem;
}

.need-section legend + * {
    clear: both;
}

.kind-cards {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

@media (min-width: 36rem) {
    .kind-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.kind-card {
    position: relative;
    cursor: pointer;
}

.kind-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

.kind-card > span {
    display: grid;
    gap: 0.2rem;
    height: 100%;
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.kind-card i {
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1;
}

.kind-card small {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

.kind-card input:checked + span {
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);
}

.kind-card input:focus-visible + span {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.stepper {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
    max-width: 14rem;
}

.stepper input {
    text-align: center;
}

.stepper__btn {
    min-width: 2.75rem;
    padding-inline: 0.5rem;
    font-size: 1.2rem;
}

.stepper__btn[hidden] {
    display: none;
}

/* Schalter auf Basis einer echten Checkbox (ohne JavaScript bedienbar) */
.switch,
.form-row .switch {
    position: relative;
    display: flex;
    margin: 0;
    gap: 0.75rem;
    align-items: flex-start;
    cursor: pointer;
    font-weight: 400;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.switch__track {
    flex: none;
    display: block;
    position: relative;
    width: 2.6rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: var(--border);
    transition: background 0.15s;
}

.switch__track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    transition: transform 0.15s;
}

.switch input:checked + .switch__track {
    background: var(--status-full);
}

.switch input:checked + .switch__track::after {
    transform: translateX(1.1rem);
}

.switch input:focus-visible + .switch__track {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.switch__text {
    display: grid;
    gap: 0.15rem;
    font-weight: 400;
}

.switch__text small {
    color: var(--text-muted);
    font-size: 0.88rem;
}

@media (prefers-reduced-motion: reduce) {
    .switch__track,
    .switch__track::after {
        transition: none;
    }
}

.need-more {
    margin: 0 0 1.25rem;
}

.need-more summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.need-preview__label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.need-preview .button {
    pointer-events: none;
}

.need-preview .button[hidden] {
    display: none;
}

/* Besetzungsseite: Kopf mit Button rechts, Werkzeuge neben den Reitern, Kennzahlen als Karten, Filterleiste */

.page-header--split {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.page-header__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
}

.page-header__title h1 {
    margin: 0;
}

.tabs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}

.tabs-row .tabs {
    border-bottom: 0;
    margin-bottom: 0;
}

.tabs-row__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}

.kpi dt {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.kpi dd {
    margin: 0.2rem 0 0;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 1.6rem;
    line-height: 1.1;
}

.kpi .meter {
    margin-top: 0.5rem;
}

.kpi--warn dd {
    color: var(--status-open);
}

.filter-bar {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}

.filter-bar .form-row {
    margin: 0;
}

.filter-bar .form-row label {
    margin-bottom: 0.25rem;
}

/* „Nur Lücken“ steht auf Höhe der Auswahlfelder. */
.filter-bar__check {
    min-height: 2.25rem;
}

.filter-bar [hidden] {
    display: none;
}

.staffing .dispo-legend {
    margin: 0 0 0.75rem;
}

/* Checkliste „Bereit zum Veröffentlichen?“ */

.ready-check {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.ready-check h2 {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.ready-check__list {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.ready-check__item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.ready-check__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.85rem;
}

.ready-check__item.is-done .ready-check__icon {
    background: var(--status-full-bg);
    color: var(--status-full);
}

.ready-check__item.is-missing .ready-check__icon {
    background: var(--status-open-bg);
    color: var(--status-open);
}

.ready-check__item.is-hint .ready-check__icon {
    background: var(--status-neutral-bg);
    color: var(--status-neutral);
}

.ready-check__text {
    display: grid;
    gap: 0.1rem;
}

.ready-check__item.is-done b {
    font-weight: 600;
}

.ready-check__text small {
    color: var(--text-muted);
}

button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}