/*
 * MKSF App: Mitglieder-App im Stil von mksf.it (Hausrot, Instrument Serif für Überschriften, Inter für Text,
 * rote Wellen). Für Handys gebaut, auf großen Bildschirmen eine schmale Spalte in der Mitte.
 * Markup: Resources/Private/Templates/App/*.fluid.html, Layouts/App.fluid.html
 */

@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../Fonts/instrument-serif-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/inter-latin.woff2') format('woff2');
}

:root {
    --red: #990000;
    --red-dark: #7a0000;
    --red-soft: #fbf1f1;
    --gold: #dc9e27;
    --gold-dark: #8c6114;
    --ink: #2b2b2b;
    --text: #555;
    --muted: #707070;
    --line: #e6e6e6;
    --surface: #f3f3f3;
    --card: #fff;
    --ok: #1f7a4a;
    --ok-soft: #e9f6ef;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 2px 6px rgba(24, 25, 30, .05), 0 12px 32px -14px rgba(24, 25, 30, .28);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gutter: 16px;
    --column: 640px;
    color-scheme: light;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* kein Zoomen per Doppeltippen; Eingabefelder haben 16px, damit das iPhone beim Antippen nicht hineinzoomt */
    touch-action: manipulation;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
    margin: 0;
}

a {
    color: var(--red);
}

svg {
    display: block;
}

[hidden] {
    display: none !important;
}

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

/* Knöpfe */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font: 600 16px/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .15s var(--ease), box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.btn:hover {
    background: var(--red-dark);
}

.btn:active {
    transform: scale(.97);
}

.btn:disabled {
    opacity: .55;
    cursor: default;
}

.btn--ghost {
    background: var(--red-soft);
    color: var(--red);
}

.btn--ghost:hover {
    background: #f4dede;
}

/*
 * Farbregel für Antworten: zusagen / anmelden grün, absagen / abmelden rot, Neutrales (Verspätung, Abbrechen,
 * Erinnerung, Aufklappen) grau. btn--yes / btn--no sind die vollen Knöpfe zum Abschicken und Umentscheiden.
 */
.btn--yes {
    background: var(--ok);
    color: #fff;
}

.btn--yes:hover {
    background: #17633b;
}

.btn--no {
    background: var(--red);
    color: #fff;
}

.btn--no:hover {
    background: var(--red-dark);
}

.btn--neutral {
    background: var(--surface);
    color: var(--ink);
}

.btn--neutral:hover {
    background: var(--line);
}

.btn--link {
    min-height: 40px;
    padding: 0 6px;
    background: none;
    color: var(--muted);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn--link:hover {
    background: none;
    color: var(--ink);
}

.btn--small {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}

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

/* in der Kopfleiste nie zusammendrücken lassen, sonst wird der Kreis auf schmalen Handys oval */
.iconbtn {
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .2s;
}

.iconbtn:hover {
    background: rgba(255, 255, 255, .26);
}

.iconbtn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Glocke: Nachrichten an, grüner Punkt */
.topbar__bell {
    position: relative;
}

.topbar__bell::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 10px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--red);
    border-radius: 50%;
    background: #3ddc84;
}

.topbar__bell[aria-expanded="true"] {
    background: #fff;
    color: var(--red);
}

.iconbtn--plain {
    width: 36px;
    height: 36px;
    background: none;
    color: var(--muted);
}

.iconbtn--plain:hover {
    background: var(--surface);
}

.card {
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}

/* Formularfelder */
.field {
    display: grid;
    gap: 6px;
}

.field__label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.field__optional {
    color: var(--muted);
    font-weight: 400;
}

.field input,
.field textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    font: 16px/1.4 var(--font-body);
    transition: border-color .2s, box-shadow .2s;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--red);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(153, 0, 0, .12);
}

/* Meldungen */
.toast {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 15px;
    font-weight: 500;
}

.toast--warning,
.toast--danger {
    background: var(--red-soft);
    color: var(--red);
}

/* Login */
.login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.login__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(48px + env(safe-area-inset-top)) var(--gutter) 120px;
    background: radial-gradient(120% 90% at 50% 0%, #b30d0d 0%, var(--red) 45%, var(--red-dark) 100%);
    color: #fff;
    text-align: center;
}

/* Logo ganz im weißen Kreis: hochformatig, darum mit Innenabstand eingepasst */
.login__logo {
    display: block;
    width: 136px;
    height: 136px;
    padding: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 16px 34px -14px rgba(0, 0, 0, .6);
}

.login__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login__kicker {
    margin-top: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
}

.login__title {
    margin-top: 6px;
    font: 400 clamp(44px, 12vw, 60px)/1 var(--font-display);
}

.login__waves {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 90px;
}

.login__wave--1 {
    fill: rgba(255, 255, 255, .14);
}

.login__wave--2 {
    fill: rgba(255, 255, 255, .3);
}

.login__wave--3 {
    fill: var(--surface);
}

.login__card {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: 420px;
    margin: -56px auto 32px;
    padding: 26px 22px 22px;
}

.login__heading {
    color: var(--ink);
    font: 400 34px/1.1 var(--font-display);
}

.login__lead {
    margin: 6px 0 20px;
    font-size: 15px;
}

.login__form {
    display: grid;
    gap: 16px;
}

.login__form .btn {
    margin-top: 6px;
}

.login__help {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}

/* Kopfleiste der App */
.topbar {
    position: relative;
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(160deg, #b30d0d 0%, var(--red) 55%, var(--red-dark) 100%);
    color: #fff;
}

/* in der Mitte untereinander: Logo, Name der Kapelle, Begrüßung; Glocke und Abmelden oben rechts */
.topbar__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--column);
    margin: 0 auto;
    padding: 18px var(--gutter) 58px;
    text-align: center;
}

.topbar__logo {
    display: block;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    padding: 11px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 10px 22px -12px rgba(0, 0, 0, .6);
}

.topbar__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* eigenes Foto statt Logo: füllt den Kreis ganz aus */
.topbar__logo--photo {
    padding: 0;
    overflow: hidden;
}

.topbar__logo--photo img {
    border-radius: 50%;
    object-fit: cover;
}

/* Kreis oben ist die Bildauswahl: kleines Kamera-Symbol unten rechts, beim Hochladen blass */
.topbar__photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.topbar__photo .topbar__logo {
    position: relative;
    overflow: visible;
    cursor: pointer;
}

.topbar__photo .topbar__logo:focus-within {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

.topbar__camera {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid var(--red);
    border-radius: 50%;
    background: #fff;
    color: var(--red);
}

.topbar__camera svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

.topbar__photo.is-uploading .topbar__logo img {
    opacity: .4;
}

.topbar__photo.is-uploading .topbar__camera {
    animation: ring 1s var(--ease) infinite;
}

.topbar__hello {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    /* etwa so viel Luft über "Hallo, Name" wie darunter bis zur Welle */
    margin-top: 26px;
}

/* ausgeblendet: Logo und Begrüßung reichen */
.topbar__eyebrow {
    display: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .85;
}

/* Vor- und Nachname ganz: lieber zwei Zeilen als abgeschnitten */
.topbar__name {
    max-width: 100%;
    font: 400 clamp(28px, 8vw, 34px)/1.1 var(--font-display);
    overflow-wrap: anywhere;
}

/* über die ganze Breite: links das Menü, rechts Glocke und Abmelden; dazwischen bleibt das Logo anklickbar */
.topbar__actions {
    position: absolute;
    top: 14px;
    right: var(--gutter);
    left: var(--gutter);
    display: flex;
    gap: 8px;
    pointer-events: none;
}

.topbar__actions > * {
    pointer-events: auto;
}

.topbar__logout {
    margin: 0;
}

/* Menü oben links: Nachrichten und Kontaktdaten; der Punkt am Knopf heißt "es gibt Nachrichten" */
.menu {
    position: relative;
    margin-right: auto;
}

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

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

.menu[open] > .menu__toggle {
    background: #fff;
    color: var(--red);
}

.menu__toggle {
    position: relative;
}

.menu__dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--red);
    border-radius: 50%;
    background: #ffd98e;
}

.menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    display: grid;
    min-width: 220px;
    padding: 6px;
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: 0 18px 40px -16px rgba(20, 20, 20, .45), 0 2px 6px rgba(20, 20, 20, .08);
    text-align: left;
    animation: rise .2s var(--ease);
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.menu__item:hover,
.menu__item:focus-visible {
    background: var(--surface);
}

.menu__item svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu__label {
    flex: 1 1 auto;
}

.menu__count {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 12.5px;
    text-align: center;
}

/*
 * Runtergescrollt (app.js setzt is-scrolled): fester roter Balken oben, in der Spalte der App links das Menü,
 * rechts Glocke und Abmelden, ohne Logo
 */
.is-scrolled .topbar__actions {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    padding: calc(8px + env(safe-area-inset-top)) max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter))) 8px;
    background: linear-gradient(160deg, #b30d0d 0%, var(--red) 55%, var(--red-dark) 100%);
    box-shadow: 0 8px 20px -12px rgba(60, 0, 0, .7);
    animation: bar-in .22s var(--ease);
}

@keyframes bar-in {
    from {
        transform: translateY(-100%);
    }
}

@media (max-width: 400px) {
    .topbar .iconbtn {
        width: 40px;
        height: 40px;
    }

    .topbar__actions {
        gap: 6px;
    }
}

.topbar__wave {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 26px;
    fill: var(--surface);
    transform: rotate(180deg);
}

/* Inhalt */
.main {
    max-width: var(--column);
    margin: 0 auto;
    padding: 8px var(--gutter) 24px;
}

.block + .block {
    margin-top: 34px;
}

/* Kasten mit den Nachrichten steht vor den Reitern, nicht direkt vor einem .block */
[data-push-box] {
    margin-bottom: 28px;
}

.block__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2em;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.block__title::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background: var(--red);
}

.empty {
    padding: 18px;
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--muted);
    font-size: 15px;
}

.install {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 8px 10px 16px;
    border-radius: var(--radius-sm);
    background: #fff7e6;
    color: var(--gold-dark);
    font-size: 14px;
}

.install__text {
    flex: 1 1 auto;
}

/* Proben */
.rehearsals,
.termine {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rehearsal {
    padding: 16px;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 1px 2px rgba(20, 20, 20, .06);
}

.rehearsal__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rehearsal__date,
.termin__date {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 62px;
    border-radius: var(--radius-sm);
    background: var(--red-soft);
    color: var(--red);
    line-height: 1;
}

.rehearsal__day,
.termin__day {
    font: 400 30px/1 var(--font-display);
}

.rehearsal__month,
.termin__month {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rehearsal__info {
    flex: 1 1 auto;
    min-width: 0;
}

/* "Heute" / "Am Freitag, …" samt Status über dem Titel ausgeblendet; Datum steht im Kästchen, Wochentag in der Zeile darunter */
.rehearsal__when {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rehearsal__title {
    color: var(--ink);
    font: 400 24px/1.15 var(--font-display);
}

.rehearsal__meta,
.termin__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 14px;
}

.rehearsal__note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14.5px;
}

.status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: .06em;
    white-space: nowrap;
}

.status--absent {
    background: var(--ink);
    color: #fff;
}

.status--cancelled {
    background: var(--surface);
    color: var(--muted);
}

.status--confirmed {
    background: var(--ok);
    color: #fff;
}

/* Antwort auf eine Probe: "Ich komme" und "Ich kann nicht" nebeneinander; offen nimmt das Formular die ganze Breite */
.reply {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.reply:has(.absent[open]) .reply__yes {
    display: none;
}

.reply .absent {
    margin-top: 0;
}

.reply .btn {
    min-height: 52px;
    font-size: 16.5px;
}

.reply .btn svg,
.reply__done svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * zugesagt: grünes Feld, oben "✓ Du bist dabei" (darunter "Du kommst 15 Min. später"), unten zwei gleich breite
 * Knöpfe "Verspätung" (Zahnrad) und "Doch nicht"
 */
.reply--confirmed {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "done done"
        "delay undo";
    gap: 12px 8px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--ok-soft);
}

.reply--confirmed .reply__done {
    grid-area: done;
}

.reply--confirmed .delay {
    grid-area: delay;
}

.reply--confirmed .absent {
    grid-area: undo;
}

/* Abmeldeformular oder Verspätung offen: nur das Formular, volle Breite, ohne grünes Feld */
.reply--confirmed:has(details[open]),
.rehearsal--next .reply--confirmed:has(details[open]) {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    padding: 0;
    border-radius: 0;
    background: none;
}

.reply--confirmed:has(details[open]) > * {
    grid-area: auto;
}

.reply--confirmed:has(.absent[open]) .reply__done {
    display: none;
}

.reply__done {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ok);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

/* "Du bist dabei", darunter mit Uhr "Du kommst 15 Min. später" */
.reply__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.reply__late {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}

.reply .reply__late svg {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ok);
    stroke-width: 2.2;
}

/* Haken im grünen Kreis */
.reply__done > svg {
    box-sizing: content-box;
    flex: 0 0 auto;
    padding: 6px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    width: 18px;
    height: 18px;
}

/* "Verspätung" (grau, neutral) und "Doch nicht" (rot, absagen) unter "Du bist dabei", gleich breit */
.reply--confirmed .delay__toggle,
.reply .reply__undo {
    width: 100%;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 15px;
    white-space: nowrap;
}

.reply--confirmed .delay__toggle svg,
.reply .reply__undo svg {
    width: 18px;
    height: 18px;
}

.reply--confirmed .delay__toggle,
.rehearsal--next .reply--confirmed .delay__toggle {
    background: #fff;
    color: var(--muted);
    box-shadow: 0 1px 2px rgba(24, 25, 30, .08);
}

.reply--confirmed .delay__toggle:hover,
.rehearsal--next .reply--confirmed .delay__toggle:hover {
    background: #fff;
    color: var(--ink);
}

.reply .reply__undo,
.rehearsal--next .reply .reply__undo {
    background: var(--red);
    color: #fff;
}

.reply .reply__undo:hover,
.rehearsal--next .reply .reply__undo:hover {
    background: var(--red-dark);
    color: #fff;
}

/* "Abbrechen" in den aufgeklappten Formularen (Verspätung, Abmelden): grau, damit nur die Hauptaktion farbig ist */
.reply .btn[data-close-details] {
    background: var(--surface);
    color: var(--muted);
}

.reply .btn[data-close-details]:hover {
    background: var(--line);
    color: var(--ink);
}

/* Beschriftung am Zahnrad nur bei einer Zusage, neben "Ich komme" reicht das Zahnrad */
.delay__label {
    display: none;
}

.reply--confirmed .delay__label {
    display: inline;
}

/* abgemeldet: rotes Feld "✕ Du bist abgemeldet" samt Grund, darunter grün "Ich bin doch dabei" */
.reply--absent {
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--red-soft);
}

.reply--absent .reply__done {
    color: var(--red);
}

.reply--absent .reply__done > svg {
    background: var(--red);
}

.reply__back {
    margin: 0;
}

/* auf der roten Karte der nächsten Probe: weiße Felder */
.rehearsal--next .reply--confirmed,
.rehearsal--next .reply--absent {
    background: rgba(255, 255, 255, .96);
}

/* "Ich komme": weich grün, auf der nächsten Probe weiß */
.btn--ok {
    background: var(--ok-soft);
    color: var(--ok);
}

.btn--ok:hover {
    background: #d6efe1;
}

/*
 * "Ich komme" über die volle Breite, gleich breit wie "Ich kann nicht" darunter; das grüne Zahnrad sitzt rechts im
 * Knopf und klappt die Verspätung auf (pünktlich / 15 … 60 Minuten später)
 */
.reply__row {
    position: relative;
}

.reply__row .delay:not([open]) {
    position: absolute;
    top: 5px;
    right: 5px;
}

/* offen ist immer nur eines: Abmeldeformular oder Auswahl der Verspätung, dann die volle Breite */
.reply:has(.absent[open]) .reply__row,
.reply:has(.delay[open]) .reply__yes,
.reply:has(.delay[open]) .absent,
.reply--confirmed:has(.delay[open]) .reply__done,
.reply--confirmed:has(.absent[open]) .delay {
    display: none;
}

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

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

.delay[open] > summary {
    display: none;
}

/* Zahnrad im grünen "Ich komme": runder, etwas dunklerer grüner Knopf */
.reply__row .delay__toggle {
    width: 42px;
    min-height: 42px;
    padding: 0;
    background: #d3ecdf;
    color: var(--ok);
}

.reply__row .delay__toggle:hover {
    background: #c2e4d2;
}

.reply .delay__toggle svg {
    stroke-width: 1.9;
}

.delay__form {
    display: grid;
    gap: 10px;
    animation: rise .25s var(--ease);
}

.delay__title {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

/* "Pünktlich" über die ganze Breite, darunter 15 / 30 / 45 / 60 Minuten in zwei Spalten */
.delay__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.delay__option:first-child {
    grid-column: 1 / -1;
}

.delay__option {
    position: relative;
}

/* Auswahl als Kacheln: das Optionsfeld liegt unsichtbar darüber und bleibt mit Tastatur bedienbar */
.delay__option input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.delay__option span {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: 0 10px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
}

.delay__option input:checked + span {
    border-color: var(--ok);
    background: var(--ok-soft);
    color: var(--ok);
}

.delay__option input:focus-visible + span {
    outline: 2px solid var(--ok);
    outline-offset: 2px;
}

/* auf der roten Karte der nächsten Probe */
.rehearsal--next .delay__title {
    color: #fff;
}

.rehearsal--next .delay__option span {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* gewählt: gleicher durchscheinender Hintergrund wie die anderen, nur mit weißem Rahmen */
.rehearsal--next .delay__option input:checked + span {
    border-color: #fff;
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

/* "Zusagen" / "Speichern" auf der roten Karte wie die Kacheln */
.rehearsal--next .delay__form .btn--yes {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.rehearsal--next .delay__form .btn--yes:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

.rehearsal--next .reply__row .delay__toggle {
    background: var(--ok-soft);
    color: var(--ok);
}

.rehearsal--next .reply__row .delay__toggle:hover {
    background: #d6efe1;
}

.rehearsal--next .status--confirmed {
    background: #fff;
    color: var(--ok);
}

.rehearsal.is-cancelled .rehearsal__title {
    color: var(--muted);
    text-decoration: line-through;
}

.rehearsal.is-absent .rehearsal__date {
    background: var(--surface);
    color: var(--muted);
}

/* nächste Probe groß und rot */
.rehearsal--next {
    padding: 20px;
    background: linear-gradient(150deg, #b30d0d 0%, var(--red) 50%, var(--red-dark) 100%);
    box-shadow: 0 18px 36px -20px rgba(122, 0, 0, .8);
    color: #fff;
}

.rehearsal--next .rehearsal__date {
    width: 66px;
    height: 72px;
    background: #fff;
    border: none !important;
}

.rehearsal--next .rehearsal__day {
    font-size: 36px;
}

.rehearsal--next .rehearsal__when {
    color: #ffd98e;
}

/* nächste Probe: "Heute", "Morgen" oder "In 5 Tagen" als goldenes Schild über dem Titel */
.rehearsal__countdown {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ffd98e;
    color: var(--red-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.rehearsal--next .rehearsal__title {
    color: #fff;
    font-size: 32px;
}

.rehearsal--next .rehearsal__meta {
    color: rgba(255, 255, 255, .82);
}

.rehearsal--next .rehearsal__note {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.rehearsal--next .status--absent {
    background: #fff;
    color: var(--red);
}

.rehearsal--next .status--cancelled {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.rehearsal--next.is-cancelled .rehearsal__title {
    color: rgba(255, 255, 255, .7);
}

.rehearsal--next.is-absent .rehearsal__date {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Datumskästchen in der Probenliste: weiß mit dunklem Rand, auch auf der roten Karte und bei Abmeldung */
.block[aria-labelledby="proben-title"] .rehearsal__date {
    background: #fff;
    color: var(--text);
    line-height: 1;
    border: 1px solid var(--text);
}

/* Knöpfe auf der roten Karte: erst die Farben, danach das Darüberfahren (sonst überschreibt die Reihenfolge) */
.rehearsal--next .btn {
    background: #fff;
    color: var(--red);
}

.rehearsal--next .btn--ok {
    background: #fff;
    color: var(--text);
}

.rehearsal--next .btn--ghost {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* zusagen bleibt grün, Neutrales grau; absagen ("Abmelden") ist auf Rot weiß mit roter Schrift (.btn oben) */
.rehearsal--next .btn--yes {
    background: var(--ok);
    color: #fff;
}

.rehearsal--next .btn--neutral {
    background: var(--surface);
    color: var(--ink);
}

.rehearsal--next .btn:hover {
    background: #fff3f3;
}

.rehearsal--next .btn--ok:hover {
    background: #eefaf3;
}

/* durchsichtige und dunkle Knöpfe beim Darüberfahren nicht weiß machen, die Schrift ist weiß */
.rehearsal--next .btn--ghost:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

.rehearsal--next .btn--yes:hover {
    background: #17633b;
    color: #fff;
}

.rehearsal--next .btn--neutral:hover {
    background: var(--line);
    color: var(--ink);
}

.rehearsal--next .field__label,
.rehearsal--next .field__optional {
    color: #fff;
}

/* Abmelden: Knopf klappt das Formular auf */
.absent {
    margin-top: 14px;
}

.absent > summary {
    width: 100%;
    list-style: none;
}

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

.absent[open] > summary {
    display: none;
}

.absent__form {
    display: grid;
    gap: 12px;
    animation: rise .25s var(--ease);
}

/* weitere Proben zum Aufklappen */
.later {
    margin-top: 12px;
}

.later__toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--red);
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.later__toggle::-webkit-details-marker {
    display: none;
}

.later__toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}

.later[open] > .later__toggle {
    margin-bottom: 12px;
}

.later[open] > .later__toggle::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

/*
 * Leitung: "Namen anzeigen" (details.fold, wie in der Übersicht) bei jeder Probe und jedem Termin, darunter
 * "Erinnerung senden". Auf roten Karten (nächste Probe, Pflichttermin) liegen die Namen in einem weißen Feld.
 */
.rehearsal--next .fold .replies,
.termin.is-mandatory .fold .replies {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .96);
    color: var(--ink);
}

.rehearsal--next .remind__last,
.termin.is-mandatory .remind__last {
    color: rgba(255, 255, 255, .82);
}

/* Pfeil wie bei "Weitere Proben" */
.fold__toggle::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: -4px 4px 0 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}

.fold[open] > .fold__toggle::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

/* Benachrichtigungen (Leitung) */
.push {
    padding: 18px;
}

.push__text {
    font-size: 15px;
}

.push__hint {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff7e6;
    color: var(--gold-dark);
    font-size: 14px;
}

.push__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/* eingeschaltet: eine Zeile mit Status und den zwei kleinen Knöpfen */
.push.is-on {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 12px 12px 16px;
}

.push.is-on .push__text {
    flex: 1 1 180px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}

.push.is-on .push__actions {
    margin-top: 0;
}

.push.is-on .push__text::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--ok);
    vertical-align: 1px;
}

/* Übersicht nächste Probe (Leitung): Zahl groß rechts, darunter wer fehlt */
.summary {
    padding: 18px;
}

.summary__when {
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.summary__what {
    display: block;
    margin-top: 2px;
    color: var(--ink);
    font: 400 26px/1.15 var(--font-display);
    letter-spacing: 0;
    text-transform: none;
}

/* Reiter Proben / Termine als Leiste unten wie in einer App; der Inhalt bekommt unten Platz dafür */
.tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    /* roter Verlauf wie der Kopf; deckend, damit nichts durchscheint */
    background: linear-gradient(150deg, #b30d0d 0%, var(--red) 50%, var(--red-dark) 100%);
    box-shadow: 0 -10px 30px -18px rgba(60, 0, 0, .6);
}

.tabs__tab {
    display: flex;
    flex: 0 1 200px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 4px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: rgba(255, 255, 255, .78);
    font: 600 12px/1.2 var(--font-body);
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease);
}

.tabs__tab svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* gewählter Reiter: weiß mit hellem, durchscheinendem Feld */
.tabs__tab[aria-selected="true"] {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.app:has(.tabs:not([hidden])) .shell {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Zugesagt / abgemeldet / offen als drei Zahlen */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.stats__item {
    display: grid;
    justify-items: center;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

.stats__item strong {
    color: var(--ink);
    font: 400 34px/1.1 var(--font-display);
}

.stats__item--yes {
    background: var(--ok-soft);
    color: var(--ok);
}

.stats__item--yes strong {
    color: var(--ok);
}

.stats__item--no {
    background: var(--red-soft);
    color: var(--red);
}

.stats__item--no strong {
    color: var(--red);
}

/* Namen nach Antwort (Leitung): Abgemeldete als rote Liste mit Grund, Zusagen und Offene als Namensschilder */
.replies {
    display: grid;
    gap: 14px;
    padding: 12px 0 2px;
}

.replies__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.replies__count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12.5px;
    letter-spacing: 0;
}

.replies__group--no .replies__title {
    color: var(--red);
}

.replies__group--no .replies__count {
    background: var(--red);
    color: #fff;
}

.replies__group--yes .replies__title {
    color: var(--ok);
}

.replies__group--yes .replies__count {
    background: var(--ok);
    color: #fff;
}

/* Abgemeldet: jede Person eine Zeile, Grund darunter */
.replies__absent {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.replies__absent li {
    display: grid;
    gap: 1px;
    padding: 9px 12px;
    border-left: 4px solid var(--red);
    border-radius: 8px;
    background: var(--red-soft);
}

.replies__absent strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.replies__absent span {
    color: var(--red);
    font-size: 13.5px;
}

/* Zugesagt und noch offen: Namen nebeneinander */
.replies__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.replies__chips li {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.3;
}

.replies__group--yes .replies__chips li {
    background: var(--ok-soft);
    color: var(--ok);
    font-weight: 500;
}

/* Name mit Telefonnummer: antippen ruft an, kleines Hörer-Symbol davor */
.replies__call {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.replies__call::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* angekündigte Verspätung hinter dem Namen: "Anna · 30 Min. später" */
.replies__delay::before {
    content: " · ";
}

.replies__delay {
    font-size: 12.5px;
    font-weight: 700;
}

/* Namen zum Aufklappen */
.fold {
    margin-top: 14px;
}

.fold__toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.fold__toggle::-webkit-details-marker {
    display: none;
}

/* Leitung: Mitglieder an die Probe erinnern */
.remind {
    margin-top: 16px;
}

.remind .btn {
    gap: 10px;
    min-height: 52px;
    white-space: nowrap;
}

.remind svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.remind__last {
    margin-top: 8px;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}

/* Abfrage nach dem Login: Benachrichtigungen erlauben (Leitung) */
.ask {
    width: calc(100% - 2 * var(--gutter));
    max-width: 380px;
    padding: 28px 22px 16px;
    border: 0;
    border-radius: 22px;
    background: var(--card);
    color: var(--text);
    box-shadow: 0 30px 60px -20px rgba(20, 20, 20, .5);
    text-align: center;
}

.ask[open] {
    animation: rise .3s var(--ease);
}

.ask::backdrop {
    background: rgba(40, 0, 0, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.ask__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red);
}

.ask__icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: ring 1.6s var(--ease) .4s 2;
    transform-origin: 50% 15%;
}

.ask__title {
    margin-top: 14px;
    color: var(--ink);
    font: 400 30px/1.1 var(--font-display);
}

.ask__text {
    margin-top: 10px;
    font-size: 15px;
}

.ask__actions {
    display: grid;
    gap: 4px;
    margin-top: 22px;
}

@keyframes ring {
    0%, 100% {
        transform: rotate(0);
    }
    20% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-12deg);
    }
    60% {
        transform: rotate(8deg);
    }
    80% {
        transform: rotate(-4deg);
    }
}

/* Termine von mksf.it */
/* Termine: nach Monat gruppiert, Karten mit Datum links und Symbolen für Datum, Uhrzeit, Ort */
.termine__month {
    margin: 22px 0 10px;
    color: var(--ink);
    font: 400 24px/1.1 var(--font-display);
}

.termine__month:first-of-type {
    margin-top: 0;
}

.termin {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 14px 14px 14px 14px;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
}

/* Pflichttermin wie auf mksf.it/termine: ganze Karte rot, Schrift weiß, Datum und Schild weiß mit roter Schrift */
.termin.is-mandatory {
    background: var(--red);
    color: #fff;
}

.termin.is-mandatory .termin__title,
.termin.is-mandatory .termin__meta,
.termin.is-mandatory .termin__place {
    color: #fff;
}

.termin.is-mandatory .termin__date {
    border-color: #fff;
    background: #fff;
    color: var(--red);
}

.termin.is-mandatory .badge {
    background: #fff;
    color: var(--red);
}

.termin__date {
    width: 60px;
    height: 70px;
    border: 1px solid var(--text);
    background: #fff;
    color: var(--text);
}

.termin__weekday {
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
}

.termin__body {
    flex: 1 1 auto;
    min-width: 0;
}

.termin__title {
    margin: 0;
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
}

.termin.is-cancelled .termin__title {
    color: var(--muted);
    text-decoration: line-through;
}

.termin.is-cancelled .termin__date {
    opacity: .5;
}

.termin__meta {
    display: grid;
    gap: 3px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 14px;
}

.termin__meta li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.termin__meta svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .8;
}

.termin__place {
    color: var(--ink);
    font-weight: 500;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3dc;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge--cancelled {
    background: var(--red-soft);
    color: var(--red);
}

.badge--soon {
    background: var(--red);
    color: #fff;
}

/* eigene Antwort auf einen Termin, sobald nicht mehr geantwortet werden kann */
.badge--yes {
    background: var(--ok-soft);
    color: var(--ok);
}

.badge--no {
    background: var(--red-soft);
    color: var(--red);
}

/*
 * Termin: Antwort als eigene Zeile über die ganze Kartenbreite (unter Datum und Text, darum darf die Karte umbrechen).
 * Noch keine Antwort: "Ich komme" grün und "Ich kann nicht" rot wie bei den Proben, am Handy untereinander, ab 480px
 * nebeneinander. Geantwortet: grüne Leiste "✓ Du bist dabei" mit rotem "Doch nicht" bzw. rote Leiste
 * "✕ Du hast abgesagt" mit grünem "Doch dabei" (gleiche Farbregel wie bei den Proben).
 */
.termin {
    flex-wrap: wrap;
}

/* Text bleibt neben dem Datum, auch wenn der Titel lang ist; nur Antwort und Leitung brechen um */
.termin > .termin__body {
    flex: 1 1 0;
}

.termin > .treply,
.termin > .fold,
.termin > .remind {
    flex: 1 1 100%;
    margin-top: 0;
}

.treply {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.treply__form {
    margin: 0;
}

.treply__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font: 600 16px/1.2 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s, transform .15s var(--ease);
}

.treply__btn:active,
.treply__change:active {
    transform: scale(.97);
}

.treply__btn svg,
.treply__state svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.treply__btn--yes {
    background: var(--ok-soft);
    color: var(--ok);
}

.treply__btn--yes:hover {
    background: #d6efe1;
}

.treply__btn--no {
    background: var(--red-soft);
    color: var(--red);
}

.treply__btn--no:hover {
    background: #f4dede;
}

@media (min-width: 480px) {
    .treply:not(.treply--yes):not(.treply--no) {
        grid-template-columns: 1fr 1fr;
    }
}

/* geantwortet: eine Leiste, links die Antwort mit Symbol im Kreis, rechts "Doch nicht" / "Doch dabei" */
.treply--yes,
.treply--no {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 8px;
    border-top: 0;
    border-radius: 999px;
}

.treply--yes {
    background: var(--ok-soft);
}

.treply--no {
    background: var(--red-soft);
}

.treply__state {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
}

.treply__state svg {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 5px;
    border-radius: 50%;
    color: #fff;
}

.treply--yes .treply__state {
    color: var(--ok);
}

.treply--yes .treply__state svg {
    background: var(--ok);
}

.treply--no .treply__state {
    color: var(--red);
}

.treply--no .treply__state svg {
    background: var(--red);
}

.treply__change {
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: 600 14.5px/1.2 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, transform .15s var(--ease);
}

.treply__change--no {
    background: var(--red);
}

.treply__change--no:hover {
    background: var(--red-dark);
}

.treply__change--yes {
    background: var(--ok);
}

.treply__change--yes:hover {
    background: #17633b;
}

/* Pflichttermin: rote Karte, Knöpfe und Leisten hell */
.termin.is-mandatory .treply {
    border-top-color: rgba(255, 255, 255, .22);
}

.termin.is-mandatory .treply__btn--yes {
    background: #fff;
    color: var(--ok);
}

.termin.is-mandatory .treply__btn--yes:hover {
    background: #eefaf3;
}

.termin.is-mandatory .treply__btn--no {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.termin.is-mandatory .treply__btn--no:hover {
    background: rgba(255, 255, 255, .28);
}

/* geantwortet: auf der roten Karte weiße Leisten, Farben wie sonst */
.termin.is-mandatory .treply--yes,
.termin.is-mandatory .treply--no {
    background: rgba(255, 255, 255, .96);
}

/* Menü → Nachrichten: je Nachricht eine Karte, Datum klein darüber */
.messages,
.contacts {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.message,
.contact {
    padding: 18px;
    text-align: left;
}

.message__date,
.contact__role {
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.message__title,
.contact__name {
    margin-top: 4px;
    color: var(--ink);
    font: 400 24px/1.15 var(--font-display);
}

.message__text {
    margin-top: 8px;
    color: var(--text);
    font-size: 15.5px;
    overflow-wrap: anywhere;
}

/* Reiter "Nachrichten" / "Umfragen" im Bereich Nachrichten: zwei gleich breite Knöpfe, der gewählte weiß hervorgehoben */
.feedtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 999px;
    background: var(--line);
}

.feedtabs__tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font: 600 15px/1.2 var(--font-body);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.feedtabs__tab[aria-selected="true"] {
    background: #fff;
    color: var(--red);
    box-shadow: 0 1px 3px rgba(24, 25, 30, .12);
}

.feedtabs__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font-size: 12.5px;
}

.feedtabs__tab[aria-selected="true"] .feedtabs__count {
    background: var(--red);
    color: #fff;
}

/* Nachricht und Umfrage: Datum klein und grau unter dem Titel */
.message .message__date {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

/* Nachricht: großer roter Pin oben rechts wie an einer Pinnwand, der Titel hält Abstand */
.message:not(.poll) {
    position: relative;
}

.message:not(.poll) .message__title {
    margin-top: 0;
    padding-right: 36px;
}

.message__pin {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    color: var(--red);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(30deg);
    filter: drop-shadow(0 2px 2px rgba(122, 0, 0, .25));
}

/* Umfrage: rotes Schild "Umfrage" mit Diagramm, roter Rand links, damit sie sich von Nachrichten abhebt */
.poll {
    border-left: 5px solid var(--red);
}

/* Schild "Umfrage" rechts oben, wie der Pin bei den Nachrichten */
.poll__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 10px;
}

.poll__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.poll__badge svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.poll__date {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.poll .message__title {
    margin-top: 10px;
}

/* nur für Bildschirmleser, z. B. "2 neu" am Menü */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Umfrage in Menü → Nachrichten: Antworten untereinander als Kacheln (wie die Verspätung), darunter "Abstimmen";
 * die Leitung sieht das Ergebnis mit Balken
 */
.poll__meta {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13.5px;
}

.poll__mine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 15px;
}

.poll__mine svg {
    box-sizing: content-box;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    padding: 5px;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.poll__form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.poll__options {
    display: grid;
    gap: 8px;
}

.poll__options .poll__option:first-child {
    grid-column: auto;
}

.poll__option span {
    justify-content: flex-start;
    padding: 0 14px;
    text-align: left;
}

/* Umfrage in Grautönen: gewählte Antwort mit dunklem Rahmen, Knopf dunkelgrau; grün ist nur "Deine Stimme" */
.poll .poll__option input:checked + span {
    border-color: var(--ink);
    background: #fff;
    color: var(--ink);
}

.poll .poll__option input:focus-visible + span {
    outline-color: var(--ink);
}

.poll__submit {
    background: var(--ink);
    color: #fff;
}

.poll__submit:hover {
    background: #000;
}

.poll__results {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.poll__count {
    color: var(--muted);
    font-size: 13.5px;
}

.poll__count strong {
    color: var(--ink);
}

.poll__label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-size: 15px;
}

.poll__bar {
    height: 8px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface);
}

.poll__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--muted);
}

/* Menü → Kontaktdaten: zuerst die Musikkapelle (Anschrift, E-Mail, Steuernummer, Bank, IBAN), darunter die Personen */
.club {
    padding: 18px;
    border-top: 4px solid var(--red);
    text-align: left;
}

.club + .contacts {
    margin-top: 12px;
}

.club__address {
    margin-top: 6px;
    color: var(--text);
    font-size: 15.5px;
}

.club__facts {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.club__facts:empty {
    display: none;
}

.club__facts dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.club__facts dd {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 15.5px;
}

.club__iban {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.club__copy {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

/* Hinweis 5 Promille unter der Steuernummer */
.club__hint {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff3dc;
    color: var(--gold-dark);
    font-size: 14px;
    line-height: 1.45;
}

.club__hint strong {
    color: var(--ink);
}

/* Menü → Passwort ändern: drei Felder untereinander, dunkler Knopf (neutral) */
.password {
    display: grid;
    gap: 14px;
    padding: 18px;
    text-align: left;
}

.password__who,
.password__hint {
    color: var(--muted);
    font-size: 14px;
}

.password__who strong {
    color: var(--ink);
}

/* Profil: rundes Profilbild mit Knopf zum Ändern */
.profile__photo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.profile__photo .contact__avatar {
    width: 76px;
    height: 76px;
}

.profile__photo-label {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

/* Telefon: +39 fest links im Feld, die Nummer daneben */
.phone {
    display: flex;
    align-items: stretch;
}

.phone__prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1.5px solid var(--line);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
}

.field .phone input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.password__submit {
    background: var(--ink);
    color: #fff;
}

.password__submit:hover {
    background: #000;
}

/* Kontakt: rundes Bild links (Foto, sonst das Logo auf Weiß mit Rand), daneben Funktion, Name, Hinweis */
.contact__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact__who {
    flex: 1 1 auto;
    min-width: 0;
}

.contact__who .contact__name {
    margin-top: 2px;
}

.contact__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
}

.contact__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact__avatar--logo {
    padding: 8px;
    background: #fff;
}

.contact__avatar--logo img {
    object-fit: contain;
}

/* Menü → Kontaktdaten: Telefon und E-Mail als graue Knöpfe zum Antippen */
.contact__note {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14.5px;
}

.contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.contact__links .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact__links svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.more {
    margin-top: 18px;
}

.more::after {
    content: "→";
}

/* Fuß: Logo, Links, powered by */
.foot {
    padding: 8px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.foot__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: var(--column);
    margin: 0 auto;
}

.foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.foot__links a {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(20, 20, 20, .06);
}

.foot__links a:hover {
    color: var(--red);
}

.foot__powered {
    font-size: 12px;
    letter-spacing: .02em;
}

.foot__powered a {
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}