/* ============================================================
   FÖRDERVEREIN GROSS DÜNGEN — Adminbereich
   Eigenständige, ruhige Arbeitsoberfläche.
   Keine Animationen, keine Canvas-Szenen: hier zählen
   Übersicht, kurze Wege und schnelle Ladezeiten.
   ============================================================ */

:root {
    /* Farben, angelehnt an die Webseite, aber gedämpft */
    --a-brand:      #C05621;   /* Herbstrot, Akzent */
    --a-brand-dk:   #9C4218;
    --a-brand-lt:   #FBEDE1;

    --a-gruen:      #4E7050;
    --a-gruen-lt:   #E8F0E8;
    --a-rot:        #A8322A;
    --a-rot-lt:     #FAEAE8;
    --a-gelb:       #9A7210;
    --a-gelb-lt:    #FBF1D9;

    --a-papier:     #F4F5F3;
    --a-weiss:      #FFFFFF;
    --a-tinte:      #22262A;
    --a-tinte-2:    #555C63;
    --a-tinte-3:    #858D95;
    --a-linie:      #DFE3E0;
    --a-leiste:     #2B3138;
    --a-leiste-2:   #363D45;
    --a-leiste-txt: #C6CCD2;

    --a-radius:     8px;
    --a-radius-s:   5px;
    --a-schatten:   0 1px 3px rgba(20, 26, 32, .08);
    --a-schatten-2: 0 4px 16px rgba(20, 26, 32, .12);

    --a-leiste-breite: 250px;
    --a-kopf-hoehe:    62px;

    color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--a-tinte);
    background: var(--a-papier);
    -webkit-text-size-adjust: 100%;
}

a { color: var(--a-brand); }
a:hover { color: var(--a-brand-dk); }

code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .88em;
    background: #EDEFEC;
    padding: .1em .35em;
    border-radius: 3px;
}

/* Sprungmarke für die Tastaturbedienung */
.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--a-weiss);
    padding: .7rem 1.1rem;
    z-index: 100;
    border-radius: 0 0 var(--a-radius) 0;
}
.sprungmarke:focus { left: 0; }

/* ============================================================
   AUFBAU
   ============================================================ */

.rahmen {
    display: flex;
    min-height: 100vh;
}

/* ---------------------------------------------- Seitenleiste */

.leiste {
    width: var(--a-leiste-breite);
    flex: 0 0 var(--a-leiste-breite);
    background: var(--a-leiste);
    color: var(--a-leiste-txt);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.leiste-kopf {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.leiste-marke {
    width: 34px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
}
.leiste-kopf strong {
    display: block;
    color: #fff;
    font-size: .95rem;
    line-height: 1.2;
}
.leiste-kopf span {
    display: block;
    font-size: .76rem;
    color: #98A2AC;
}

.leiste-nav { flex: 1; padding: .9rem 0; }

.nav-gruppe { margin-bottom: 1.1rem; }
.nav-gruppe h2 {
    margin: 0 0 .3rem;
    padding: 0 1.1rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #79838E;
}
.nav-gruppe ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-gruppe a {
    display: block;
    padding: .46rem 1.1rem;
    color: var(--a-leiste-txt);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: .92rem;
}
.nav-gruppe a:hover {
    background: var(--a-leiste-2);
    color: #fff;
}
.nav-gruppe a.aktiv {
    background: var(--a-leiste-2);
    color: #fff;
    border-left-color: var(--a-brand);
    font-weight: 600;
}

/* Unterpunkte eines Bereichs */
.nav-unter {
    list-style: none;
    margin: .1rem 0 .4rem;
    padding: 0;
    background: rgba(0, 0, 0, .14);
}
.nav-unter a {
    padding: .3rem 1.1rem .3rem 1.9rem;
    font-size: .86rem;
    border-left-width: 3px;
    color: #A8B2BC;
}
.nav-unter a.aktiv {
    background: transparent;
    color: #fff;
    border-left-color: var(--a-brand);
}

.leiste-fuss {
    padding: .9rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .85rem;
}
.leiste-fuss a { color: #98A2AC; text-decoration: none; }
.leiste-fuss a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------- Hauptbereich */

.haupt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kopf {
    height: var(--a-kopf-hoehe);
    background: var(--a-weiss);
    border-bottom: 1px solid var(--a-linie);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.4rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.kopf h1 {
    flex: 1;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kopf-benutzer {
    display: flex;
    align-items: center;
    gap: .8rem;
}
.benutzer-name {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--a-tinte-2);
    text-decoration: none;
    font-size: .9rem;
}
.benutzer-name:hover { color: var(--a-brand); }
.kuerzel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--a-brand-lt);
    color: var(--a-brand-dk);
    font-size: .78rem;
    font-weight: 700;
}
.abmelden { margin: 0; }

.leiste-schalter {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 34px;
    padding: 0 7px;
    background: none;
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    cursor: pointer;
}
.leiste-schalter span {
    display: block;
    height: 2px;
    background: var(--a-tinte-2);
    border-radius: 2px;
}

.inhalt {
    flex: 1;
    padding: 1.6rem 1.4rem 3rem;
    max-width: 1220px;
    width: 100%;
}

/* ============================================================
   BAUSTEINE
   ============================================================ */

h2 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 .7rem;
}

.begruessung {
    margin: 0 0 1.4rem;
    font-size: 1rem;
}
.leise { color: var(--a-tinte-3); font-size: .88rem; }
.leer  { color: var(--a-tinte-3); font-style: italic; margin: 0; }

/* ---------------------------------------------- Kästen */

.kasten {
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.2rem;
}
.kasten-text { margin: 0 0 1rem; color: var(--a-tinte-2); }

.spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 1.2rem;
    align-items: start;
}
.spalte-schmal { max-width: 560px; }

/* ---------------------------------------------- Kacheln */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.kachel {
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
    padding: .95rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.kachel-titel {
    font-size: .82rem;
    color: var(--a-tinte-2);
    font-weight: 600;
}
.kachel-wert {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--a-tinte-3);
}
.kachel-wert.betont { color: var(--a-brand); }
.kachel-hinweis { font-size: .78rem; color: var(--a-tinte-3); }
.kachel-link {
    margin-top: .5rem;
    font-size: .84rem;
    text-decoration: none;
}
.kachel-link:hover { text-decoration: underline; }

/* ---------------------------------------------- Meldungen */

.meldung {
    padding: .7rem .95rem;
    border-radius: var(--a-radius-s);
    margin: 0 0 1rem;
    border-left: 4px solid transparent;
    font-size: .93rem;
}
.meldung.fehler  { background: var(--a-rot-lt);   border-left-color: var(--a-rot);   color: #7A241E; }
.meldung.erfolg  { background: var(--a-gruen-lt); border-left-color: var(--a-gruen); color: #2F4A31; }
.meldung.hinweis { background: var(--a-gelb-lt);  border-left-color: var(--a-gelb);  color: #6B4F0B; }

/* ---------------------------------------------- Formulare */

.formular { margin: 0; }

.feld { margin-bottom: 1rem; }
.feld label {
    display: block;
    margin-bottom: .28rem;
    font-size: .87rem;
    font-weight: 600;
    color: var(--a-tinte-2);
}
.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="date"],
.feld input[type="time"],
.feld select,
.feld textarea {
    width: 100%;
    padding: .55rem .7rem;
    font: inherit;
    color: var(--a-tinte);
    background: var(--a-weiss);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--a-brand);
    box-shadow: 0 0 0 3px rgba(192, 86, 33, .15);
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld-hinweis { font-size: .8rem; color: var(--a-tinte-3); margin: .25rem 0 0; }

/* ---------------------------------------------- Schaltflächen */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--a-radius-s);
    cursor: pointer;
    text-decoration: none;
}
.knopf:disabled, .knopf.wartet { opacity: .6; cursor: default; }

.knopf-haupt {
    background: var(--a-brand);
    color: #fff;
}
.knopf-haupt:hover { background: var(--a-brand-dk); color: #fff; }

.knopf-schlicht {
    background: var(--a-weiss);
    border-color: #C9CFCA;
    color: var(--a-tinte-2);
    padding: .38rem .8rem;
    font-size: .88rem;
}
.knopf-schlicht:hover { background: #F0F2EF; color: var(--a-tinte); }

.breit { width: 100%; }

/* ---------------------------------------------- Ankreuzfeld */

.feld-schalter {
    padding: .7rem .9rem;
    background: var(--a-papier);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
}
.schalter {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-weight: 600;
    color: var(--a-tinte);
    cursor: pointer;
}
.schalter input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--a-brand);
    cursor: pointer;
    flex: 0 0 auto;
}
.schalter input:disabled { cursor: default; }
.feld-schalter .feld-hinweis { margin-left: 1.65rem; }

.feld-schmal { max-width: 8rem; }

/* ---------------------------------------------- Auszeichnungsleiste */

.auszeichnung {
    display: flex;
    gap: .25rem;
    margin-bottom: .3rem;
}
.auszeichnung button {
    min-width: 30px;
    height: 28px;
    padding: 0 .5rem;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    color: var(--a-tinte-2);
    background: var(--a-weiss);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
    cursor: pointer;
}
.auszeichnung button:hover {
    background: var(--a-brand-lt);
    border-color: var(--a-brand);
    color: var(--a-brand-dk);
}
.auszeichnung button em { font-style: italic; font-weight: 400; }

/* ---------------------------------------------- Sprungliste */

.sprungliste {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.2rem;
}
.sprungliste a {
    padding: .3rem .7rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--a-tinte-2);
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: 20px;
}
.sprungliste a:hover {
    border-color: var(--a-brand);
    color: var(--a-brand-dk);
}

/* ---------------------------------------------- Fuß eines Formulars */

.formular-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
    padding: 1rem 0 0;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(244, 245, 243, 0), var(--a-papier) 35%);
    padding-bottom: 1rem;
}

/* Angesprungener Abschnitt kurz hervorheben */
.kasten:target {
    border-color: var(--a-brand);
    box-shadow: 0 0 0 3px var(--a-brand-lt);
}

/* ---------------------------------------------- Angabenliste */

.angaben {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.1rem;
    font-size: .92rem;
}
.angaben dt { color: var(--a-tinte-2); font-weight: 600; }
.angaben dd { margin: 0; }

/* ---------------------------------------------- Liste mit Einträgen */

.liste {
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
    overflow: hidden;
}
.listeneintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid #EFF1EE;
    text-decoration: none;
    color: inherit;
}
.listeneintrag:last-child { border-bottom: none; }
.listeneintrag:hover { background: var(--a-brand-lt); color: inherit; }

.listeneintrag-haupt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.listeneintrag-haupt strong { font-size: .97rem; }
.listeneintrag-haupt .leise { font-size: .84rem; }

.listeneintrag-wert {
    flex: 0 0 auto;
    font-size: .88rem;
    color: var(--a-tinte-2);
    white-space: nowrap;
}

.zurueck { margin: 0 0 1rem; font-size: .9rem; }
.zurueck a { text-decoration: none; }
.zurueck a:hover { text-decoration: underline; }

/* ---------------------------------------------- Verlauf */

.verlauf { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.verlauf li {
    display: flex;
    gap: .7rem;
    padding: .38rem 0;
    border-bottom: 1px solid #EFF1EE;
}
.verlauf li:last-child { border-bottom: none; }
.verlauf-zeit { color: var(--a-tinte-3); white-space: nowrap; flex: 0 0 5.2rem; }
.verlauf-text { color: var(--a-tinte-2); }

.termin-titel { margin: 0 0 .2rem; font-weight: 600; }

/* ============================================================
   SEITEN OHNE ANMELDUNG
   ============================================================ */

body.schlicht {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--a-leiste);
}

.karte-mitte { width: 100%; max-width: 400px; }

.karte {
    background: var(--a-weiss);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten-2);
    padding: 1.6rem 1.5rem;
}
.karte-kopf {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: 1rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--a-linie);
}
.karte-marke { width: 38px; height: auto; }
.karte-kopf strong { display: block; font-size: .93rem; line-height: 1.25; }
.karte-kopf span   { display: block; font-size: .78rem; color: var(--a-tinte-3); }

.karte-titel { font-size: 1.12rem; margin: 0 0 1rem; }
.karte-text  { color: var(--a-tinte-2); font-size: .92rem; margin: 0 0 1.1rem; }
.karte-zeile { margin: 1rem 0 0; font-size: .89rem; text-align: center; }

.karte-fuss {
    text-align: center;
    margin: 1.1rem 0 0;
    font-size: .85rem;
}
.karte-fuss a { color: #98A2AC; text-decoration: none; }
.karte-fuss a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   SCHMALE BILDSCHIRME
   ============================================================ */

@media (max-width: 860px) {
    .leiste {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: var(--a-schatten-2);
    }
    .leiste.offen { transform: translateX(0); }

    .leiste-schalter { display: flex; }

    .kopf { padding: 0 1rem; }
    .kopf h1 { font-size: 1.02rem; }
    .benutzer-name span:not(.kuerzel) { display: none; }

    .inhalt { padding: 1.2rem 1rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .leiste { transition: none; }
}

/* ============================================================
   TERMINE
   Liste mit Kennzeichnungen und Schaltflächen je Zeile sowie
   die Abschnitte der Pflegemaske.
   ============================================================ */

/* Hervorhebung des gewählten Eintrags in der Sprungliste */
.sprungliste a.aktiv {
    background: var(--a-brand);
    border-color: var(--a-brand);
    color: #fff;
}

/* Rechtsbündige Zeile, zum Beispiel für „Neuer Termin“ */
.zeile-rechts {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 1rem;
}

/* ---------------------------------------------- Zeile eines Termins */

.termin-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid #EFF1EE;
}
.termin-zeile:last-child { border-bottom: none; }
.termin-zeile:hover { background: #FAFBFA; }

.termin-zeile-haupt {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    flex: 1 1 22rem;
}
.termin-zeile-haupt strong { font-size: .97rem; }
.termin-zeile-haupt .leise { font-size: .84rem; }

.termin-zeile-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
}
.zeilenform {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
}

/* ---------------------------------------------- Kennzeichnungen */

.marken {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.marke {
    display: inline-block;
    padding: .1rem .5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 20px;
    white-space: nowrap;
}
.marke-gruen { background: var(--a-gruen-lt); color: #2F4A31; }
.marke-gelb  { background: var(--a-gelb-lt);  color: #6B4F0B; }
.marke-rot   { background: var(--a-rot-lt);   color: #7A241E; }
.marke-blau  { background: #E5EEF6;           color: #2C4E68; }
.marke-grau  { background: #ECEEEB;           color: var(--a-tinte-2); }

/* ---------------------------------------------- Abschnitte der Maske */

.kasten-titel {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--a-linie);
}

.fehlerliste { margin: .4rem 0 0; padding-left: 1.2rem; }
.fehlerliste li { margin-bottom: .2rem; }

/* ---------------------------------------------- Löschen */

.gefahr {
    margin-top: 1.5rem;
    padding: .7rem 1.2rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
}
.gefahr[open] { border-color: var(--a-rot); }
.gefahr summary {
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: var(--a-rot);
}
.gefahr .kasten-text { margin: .9rem 0 1rem; font-size: .9rem; }

.knopf-gefahr {
    background: var(--a-rot);
    color: #fff;
}
.knopf-gefahr:hover { background: #8C2922; color: #fff; }

@media (max-width: 620px) {
    .termin-zeile-aktionen { width: 100%; }
}

/* ============================================================
   PREISE UND PLÄTZE EINES TERMINS
   Eine Zeile je Betrag beziehungsweise Platz: nebeneinander,
   solange Platz ist, sonst untereinander.
   ============================================================ */

.satz {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .4rem .9rem;
    padding: .8rem 0;
    border-bottom: 1px solid #EFF1EE;
}
.satz:last-of-type { border-bottom: none; }

.satz-neu { background: #FAFBFA; }

.satz-felder {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    flex: 1 1 22rem;
    min-width: 0;
}
.satz-felder .feld { flex: 1 1 11rem; margin-bottom: .5rem; min-width: 0; }
.satz-felder .feld-schmal { flex: 0 0 7.5rem; max-width: 7.5rem; }
.satz-felder .feld-betrag { flex: 0 0 9rem; max-width: 9rem; }
.satz-felder .feld label { font-size: .8rem; }

.satz-nummer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    flex: 0 0 5.2rem;
    padding-top: 1.2rem;
}
.satz-nummer strong { font-size: 1.05rem; }

.satz-schalter {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 0 0 auto;
    padding-top: 1.2rem;
    font-size: .85rem;
}
.satz-schalter .schalter { font-weight: 500; font-size: .85rem; }
.satz-schalter .leise { max-width: 12rem; }

.schalter-gefahr span { color: var(--a-rot); }
.schalter-gefahr input[type="checkbox"] { accent-color: var(--a-rot); }

/* ---------------------------------------------- Plätze anlegen */

.anlegen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.anlegen-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    margin: 0;
}
.anlegen-form .feld-hinweis { flex: 1 1 16rem; margin: 0; }
.anlegen-form .feld-schmal { max-width: 6rem; }
.anlegen-label { font-size: .87rem; font-weight: 600; color: var(--a-tinte-2); }

.anlegen-form input[type="number"] {
    width: 6rem;
    padding: .5rem .7rem;
    font: inherit;
    color: var(--a-tinte);
    background: var(--a-weiss);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}

@media (max-width: 620px) {
    .satz-nummer,
    .satz-schalter { padding-top: 0; }
    .satz-schalter { flex-direction: row; flex-wrap: wrap; gap: .9rem; }
}

/* ============================================================
   MEDIEN
   Raster aus Kacheln mit Vorschaubild, dazu die Filterzeile.
   ============================================================ */

.filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    margin: 0 0 1.2rem;
    padding: .8rem 1rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
}
.filterzeile input[type="search"],
.filterzeile select {
    padding: .45rem .7rem;
    font: inherit;
    font-size: .92rem;
    color: var(--a-tinte);
    background: var(--a-weiss);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}
.filterzeile input[type="search"] { min-width: 12rem; flex: 1 1 12rem; }

.feld input[type="file"] {
    width: 100%;
    padding: .5rem;
    font: inherit;
    font-size: .92rem;
    background: var(--a-papier);
    border: 1px dashed #C9CFCA;
    border-radius: var(--a-radius-s);
}

/* ---------------------------------------------- Raster */

.medienraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.medienkachel {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .7rem .8rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
    text-decoration: none;
    color: inherit;
}
.medienkachel:hover {
    border-color: var(--a-brand);
    color: inherit;
}

.medienbild {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    margin-bottom: .3rem;
    overflow: hidden;
    background: var(--a-papier);
    border-radius: var(--a-radius-s);
}
.medienbild img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.medienart {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--a-tinte-3);
}

.medienname {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.medienangaben { font-size: .8rem; color: var(--a-tinte-3); }

/* ---------------------------------------------- Einzelansicht */

.medienansicht {
    margin: 0 0 1rem;
    text-align: center;
    background: var(--a-papier);
    border-radius: var(--a-radius-s);
    padding: .8rem;
}
.medienansicht img {
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
}

/* Vorschau eines gewählten Bildes im Terminformular */
.bildwahl {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    flex-wrap: wrap;
}
.bildwahl-vorschau {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--a-papier);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
}
.bildwahl-vorschau img { max-width: 100%; max-height: 90px; object-fit: contain; }
.bildwahl-feld { flex: 1 1 14rem; min-width: 0; }

@media (max-width: 620px) {
    .medienraster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .medienbild { height: 110px; }
    .medienbild img { max-height: 110px; }
}

/* Linksbündige Knopfzeile innerhalb eines Kastens */
.zeile-links { margin: 0 0 1rem; }

/* ============================================================
   GALERIE

   Album-Liste, die Bilder eines Albums und die Auswahl weiterer
   Bilder aus der Medienverwaltung.
   ============================================================ */

/* Titelbild in der Albumliste; steht in einer .termin-zeile. */
.albumbild {
    flex: 0 0 auto;
    width: 76px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--a-papier);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
}
.albumbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------- Bilder eines Albums */

.albumbilder {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin: 0 0 1rem;
}

.albumbild-zeile {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .9rem;
    background: var(--a-papier);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
}

/* Das Vorschaubild ist hier größer als in der Liste. */
.albumbild-zeile .albumbild {
    width: 132px;
    height: 99px;
}

.albumbild-felder {
    flex: 1 1 18rem;
    min-width: 0;
}
.albumbild-felder .feld { margin-bottom: .6rem; }
.albumbild-felder .feld:last-child { margin-bottom: 0; }

.albumbild-datei {
    margin: 0 0 .5rem;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

/* Reihenfolge, Sichtbarkeit und Entfernen nebeneinander. */
.albumbild-zusatz {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}
.albumbild-zusatz .feld { margin-bottom: 0; }

/* ---------------------------------------------- Bilder hinzunehmen */

.bildauswahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .8rem;
    margin: 0 0 1rem;
}

.bildauswahl-kachel {
    display: block;
    position: relative;
    cursor: pointer;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.bildauswahl-kachel:hover { border-color: var(--a-gruen); }

.bildauswahl-kachel input[type="checkbox"] {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    width: 1.1rem;
    height: 1.1rem;
}

/* Gewählte Bilder deutlich hervorheben. */
.bildauswahl-kachel:has(input:checked) {
    border-color: var(--a-gruen);
    box-shadow: 0 0 0 2px var(--a-gruen-lt);
}

.bildauswahl-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    background: var(--a-papier);
}
.bildauswahl-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bildauswahl-name {
    display: block;
    padding: .45rem .55rem;
    font-size: .8rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .albumbild-zeile { flex-direction: column; }
    .albumbild-zeile .albumbild { width: 100%; height: 150px; }
    .bildauswahl { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .bildauswahl-bild { height: 90px; }
}

/* Album ohne Titelbild: die Vorschau nennt das gezeichnete Motiv, das auf
   der Webseite an dieser Stelle steht. */
.albumbild-motiv {
    background: linear-gradient(140deg, #E8EDF1, #F4F5F3);
}
.albumbild-text {
    padding: .2rem;
    font-size: .64rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    color: var(--a-tinte-3);
}
.albumbild-text strong {
    display: block;
    font-size: .82rem;
    color: var(--a-tinte-2);
}

/* ---------------------------------------------- Sponsoren (Schritt 12) */

/* Logos werden vollständig gezeigt, nicht beschnitten wie ein Foto. */
.sponsorlogo {
    background: #fff;
}
.sponsorlogo img {
    object-fit: contain;
    padding: .25rem;
}
.sponsorlogo-ohne {
    background: var(--a-papier);
}

/* In der Pflegemaske: die Vorschau neben der Auswahl. */
.bildwahl-vorschau.sponsorlogo img {
    width: 100%;
    height: 100%;
}

/* Name des Sponsors in einer Zeile unter „Termin · Sponsoren“. */
.feld-titel {
    display: block;
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--a-tinte-2);
}
.satz-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    min-height: 2.4rem;
}

/* Liste der Termine eines Sponsors. */
.sponsortermine {
    margin: 0;
    padding-left: 1.1rem;
}
.sponsortermine li {
    margin: .25rem 0;
}

/* ---------------------------------------------- Projekte (Schritt 14) */

/* Statt des gezeichneten Symbols steht in der Liste sein Name. */
.projektsymbol {
    width: 96px;
}
.projektsymbol .albumbild-text strong {
    font-size: .72rem;
    overflow-wrap: normal;
    hyphens: auto;
}

/* ---------------------------------------------- Projekte: Ziel der Kachel (Schritt 14b) */

/* Auswahlgruppe mit Optionsfeldern; sieht aus wie ein gewöhnliches Feld. */
.feld-auswahl {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}
.feld-auswahl legend {
    padding: 0;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--a-tinte-2);
}
.feld-auswahl .schalter {
    margin: .3rem 0;
}

/* ---------------------------------------------- Postfach (Schritt 15) */

.postfach-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
}

.postfach-zahlen {
    margin: 0 0 .6rem;
    font-size: .86rem;
}

/* Ungelesene Nachrichten fett, gelesene in normaler Schrift. */
.postfach-eintrag .listeneintrag-haupt strong {
    font-weight: 500;
}
.postfach-eintrag.ungelesen .listeneintrag-haupt strong,
.postfach-eintrag.ungelesen .postfach-betreff {
    font-weight: 700;
    color: var(--a-tinte);
}
.postfach-eintrag.ungelesen {
    border-left: 3px solid var(--a-brand);
}
.postfach-betreff {
    font-size: .9rem;
    color: var(--a-tinte-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.postfach-zeichen {
    margin-right: .25rem;
    color: var(--a-tinte-3);
}

.postfach-blaettern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0 0;
}

/* Kopf einer Nachricht */
.postfach-kopf {
    display: grid;
    gap: .3rem;
    margin: 0 0 1rem;
    font-size: .9rem;
}
.postfach-kopf > div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .6rem;
}
.postfach-kopf dt {
    color: var(--a-tinte-3);
    font-weight: 600;
}
.postfach-kopf dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Der Text: reiner Text mit erhaltenen Zeilenumbrüchen. */
.postfach-text {
    padding: 1rem 1.1rem;
    background: var(--a-papier);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .95rem;
    line-height: 1.55;
}

.postfach-anhaenge {
    margin-top: 1rem;
    font-size: .9rem;
}
.postfach-anhaenge ul {
    margin: .3rem 0;
    padding-left: 0;
    list-style: none;
}

.postfach-aktionen {
    flex-wrap: wrap;
}

.postfach-vorlagenzeile {
    display: flex;
    gap: .5rem;
}
.postfach-vorlagenzeile select {
    flex: 1 1 auto;
    min-width: 0;
}

/* Schreibfeld in gleichmäßiger Schrift, damit Zitate sauber stehen. */
.postfach-eingabe {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    line-height: 1.5;
}

@media (max-width: 620px) {
    .postfach-kopf > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ============================================================
   ANMELDUNGEN (seit Schritt 17)
   Einzelansicht einer Anmeldung.
   ============================================================ */

.anmeldung-angaben dd.anmeldung-wert {
    white-space: pre-wrap;
}

.anmeldung-andere {
    margin: 0;
    padding-left: 1.1rem;
}
.anmeldung-andere li {
    margin: .2rem 0;
}

.anmeldung-standzeile {
    margin-bottom: .6rem;
}

/* Gastgeberliste-Schalter in der Einzelansicht einer Anmeldung (seit 17d) */
.anmeldung-liste-schalter {
    margin-top: .4rem;
}
.anmeldung-liste-schalter .knopf {
    margin-left: .5rem;
}

/* ============================================================
   BENUTZER UND RECHTE (seit Schritt 18)
   ============================================================ */

.benutzer-kuerzel {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--a-gruen-lt);
    color: #2F4A31;
    font-weight: 700;
    font-size: .85rem;
}

.benutzer-inaktiv {
    opacity: .6;
}

.benutzer-bereiche {
    display: block;
    margin-top: .3rem;
}

.benutzer-zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.benutzer-weg {
    margin-top: .6rem;
    padding: .8rem 1rem;
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    background: var(--a-papier);
}

.benutzer-weg legend {
    padding: 0 .3rem;
    font-weight: 700;
}

.benutzer-weg .schalter {
    margin-top: .5rem;
}

.benutzer-startkennwort {
    margin-top: .6rem;
}

.benutzer-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.benutzer-start summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: .6rem;
}

/* Das Raster der Bereiche */
.rechteraster {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.rechteraster th,
.rechteraster td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--a-linie);
    text-align: left;
    vertical-align: top;
}

.rechteraster thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--a-tinte-3);
}

.rechteraster tbody th {
    font-weight: 600;
}

.rechteraster .rechteraster-stufe {
    width: 6.5rem;
    text-align: center;
}

.rechteraster input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--a-brand);
    cursor: pointer;
}

.rechteraster-zusatz {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .3rem .9rem 0 0;
    font-weight: 400;
    font-size: .86rem;
    cursor: pointer;
}

.rechteraster-veranstaltungen {
    display: block;
    margin-top: .2rem;
}

.rechteraster tbody tr:hover {
    background: #FAFBFA;
}

/* Bei Administratoren spielt das Raster keine Rolle. */
.benutzer-formular:has(#f-admin:checked) .rechteraster,
.benutzer-formular:has(#f-admin:checked) .rechteraster-hinweis {
    opacity: .4;
}

@media (max-width: 620px) {
    .benutzer-zwei {
        grid-template-columns: minmax(0, 1fr);
    }

    .rechteraster .rechteraster-stufe {
        width: 3.4rem;
    }

    .rechteraster th,
    .rechteraster td {
        padding: .45rem .3rem;
    }
}

.rechteraster-rahmen {
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================================
   KLEIDERKAMMER (seit Schritt 19)
   ============================================================ */

/* Drei Formulare auf einer Seite: Knopfleiste nicht klebend */
.kk-fuss {
    position: static;
    background: none;
    padding-bottom: 0;
}

.kk-zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

.kk-drei {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
}

.kk-unter {
    margin: 1.2rem 0 .3rem;
    font-size: 1rem;
}

.kk-stand-zeile {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}

.kk-punkt {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--a-gruen, #3f7d45);
    box-shadow: 0 0 0 4px var(--a-gruen-lt);
    flex: 0 0 auto;
}

.kk-stand-zu .kk-punkt {
    background: #b3261e;
    box-shadow: 0 0 0 4px var(--a-rot-lt);
}

.kk-zeiten {
    display: grid;
    gap: .45rem;
}

.kk-zeile {
    display: grid;
    grid-template-columns: 11rem 7.5rem 7.5rem minmax(0, 1fr);
    gap: .5rem;
}

.kk-zeile-kopf {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--a-tinte-3);
}

.kk-zeile select,
.kk-zeile input {
    width: 100%;
    padding: .45rem .6rem;
    font: inherit;
    font-size: .92rem;
    color: var(--a-tinte);
    background: var(--a-weiss);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}

@media (max-width: 720px) {
    .kk-zwei,
    .kk-drei {
        grid-template-columns: minmax(0, 1fr);
    }

    .kk-zeile {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--a-linie);
    }

    .kk-zeile select,
    .kk-zeile input[type="text"] {
        grid-column: 1 / -1;
    }

    .kk-zeile-kopf {
        display: none;
    }
}

/* Textfeld der Seiten Impressum, Datenschutz, Spenden (seit Schritt 21) */
.seiten-eingabe {
    min-height: 420px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86rem;
    line-height: 1.55;
}

/* ============================================================
   VEREIN, VORSTAND, KONTAKT (seit Schritt 22)
   ============================================================ */

.spenden-zeile {
    grid-template-columns: 5.5rem minmax(0, 1fr) 8rem 4rem 4rem;
    align-items: center;
}

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

.nachricht-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .spenden-zeile {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .spenden-zeile input[type="text"]:nth-of-type(2) {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   MITGLIEDSANTRÄGE UND MAILANHÄNGE (seit Schritt 23)
   ============================================================ */

.anhang-liste {
    display: grid;
    gap: .55rem;
}

.anhang-liste .schalter {
    align-items: flex-start;
    font-weight: 500;
}

.anhang-liste .schalter span {
    overflow-wrap: anywhere;
}

.kasten-untertitel {
    margin: 1.2rem 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
}

.mitglied-einwilligungsliste {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: grid;
    gap: .45rem;
}

.mitglied-einwilligungsliste .marke {
    min-width: 3.2rem;
    text-align: center;
    margin-right: .4rem;
}

/* ============================================================
   SENDESCHUTZ, VERSANDFENSTER, POSTFACH-PUNKT (seit Schritt 26)
   ============================================================ */

/* Roter Punkt mit Anzahl ungelesener Mails im Menü */
.nav-punkt {
    display: inline-block;
    min-width: 1.35rem;
    margin-left: .4rem;
    padding: .05rem .38rem;
    border-radius: 999px;
    background: #D93A2B;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    vertical-align: .08rem;
    box-shadow: 0 0 0 2px rgba(217, 58, 43, .25);
}
.nav-punkt[hidden] { display: none; }

/* Gesperrter Sendeknopf */
.wird-gesendet,
.knopf:disabled.wird-gesendet {
    opacity: .85;
    cursor: progress;
}
.sende-kreisel {
    display: inline-block;
    width: .95em;
    height: .95em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.12em;
    animation: sende-kreisel .8s linear infinite;
}
@keyframes sende-kreisel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sende-kreisel { animation-duration: 2.4s; }
}

/* Fenster nach dem Versand */
.versandfenster {
    width: min(520px, calc(100vw - 2rem));
    padding: 2rem 1.75rem 1.5rem;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(20, 28, 36, .35);
    text-align: center;
    color: var(--a-tinte);
}
.versandfenster[open]:not(:modal) {
    position: relative;
    margin: 1rem auto;
    box-shadow: 0 4px 18px rgba(20, 28, 36, .18);
}
.versandfenster::backdrop {
    background: rgba(20, 28, 36, .55);
}
.versandfenster-haken {
    width: 76px;
    height: 76px;
    margin: 0 auto .9rem;
    color: var(--a-gruen);
}
.versandfenster-haken svg { width: 100%; height: 100%; }
.versandfenster h2 {
    margin: 0 0 .8rem;
    font-size: 1.45rem;
    color: var(--a-gruen);
}
.versandfenster-liste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.versandfenster-liste li {
    display: grid;
    gap: .1rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    background: var(--a-gruen-lt);
    overflow-wrap: anywhere;
}
.versandfenster-an { font-weight: 700; }
.versandfenster-betreff,
.versandfenster-zeit { font-size: .9rem; }
.versandfenster-hinweis {
    margin: 0 0 1.2rem;
    font-size: .92rem;
    line-height: 1.5;
}
.versandfenster-probe {
    padding: .5rem .7rem;
    border-radius: 8px;
    background: #FFF6DA;
}
.versandfenster-fuss { margin: 0; }
.versandfenster-fuss .knopf { min-width: 9rem; }

/* ============================================================
   POSTFACH: ORDNER-REITER (seit Schritt 27)
   ============================================================ */

.postfach-reiter {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid var(--a-linie, #D8DDE2);
}
.postfach-reiter a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    margin-bottom: -1px;
    color: var(--a-tinte-2, #4A5560);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
}
.postfach-reiter a:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--a-tinte, #1F2A33);
}
.postfach-reiter a.aktiv {
    background: #fff;
    border-color: var(--a-linie, #D8DDE2);
    color: var(--a-tinte, #1F2A33);
}
.postfach-reiter-zahl {
    min-width: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #D93A2B;
    color: #fff;
    font-size: .72rem;
    line-height: 1.25rem;
    text-align: center;
}
.versandfenster-hinweis a { color: var(--a-brand); font-weight: 600; }

/* ============================================================
   PROTOKOLL (seit Schritt 33)
   ============================================================ */

.protokoll-filter {
    flex-wrap: wrap;
}
.protokoll-filter input[type="search"] {
    min-width: 14rem;
}
.protokoll-zahl {
    margin: .2rem 0 .8rem;
}
.protokoll-eintrag {
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--a-linie, #DFE3E0);
    background: #fff;
}
.protokoll-eintrag:first-child {
    border-radius: 8px 8px 0 0;
}
.protokoll-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .7rem;
    font-size: .86rem;
}
.protokoll-zeit {
    font-variant-numeric: tabular-nums;
    color: var(--a-tinte-2, #555C63);
}
.protokoll-bereich {
    color: var(--a-tinte-2, #555C63);
}
.protokoll-text {
    margin-top: .2rem;
    overflow-wrap: anywhere;
}
.protokoll-text .leise {
    margin-left: .35rem;
}
.protokoll-felder {
    margin-top: .35rem;
    font-size: .86rem;
}
.protokoll-felder summary {
    cursor: pointer;
    color: var(--a-brand);
    font-weight: 600;
}
.protokoll-felder table {
    width: 100%;
    margin-top: .4rem;
    border-collapse: collapse;
    table-layout: fixed;
}
.protokoll-felder th,
.protokoll-felder td {
    padding: .3rem .45rem;
    border: 1px solid var(--a-linie, #DFE3E0);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.protokoll-felder th {
    background: #F5F7F6;
    font-weight: 600;
}
.protokoll-felder th:first-child,
.protokoll-felder td:first-child {
    width: 28%;
}
.protokoll-filter select,
.protokoll-filter input[type="search"] {
    max-width: 100%;
}
@media (max-width: 560px) {
    .protokoll-filter input[type="search"] {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   EINSTELLUNGEN (seit Schritt 34)
   ========================================================================== */

/* Eingeschalteter Wartungsmodus: Kasten deutlich rot umrandet. */
.einstellung-warnung {
    border-color: var(--a-rot);
    box-shadow: 0 0 0 2px var(--a-rot-lt);
    background: var(--a-rot-lt);
}

.einstellung-warnung .kasten-titel { color: var(--a-rot); }

/* „Jetzt aufräumen“ unter dem Formular. */
.einstellung-aufraeumen {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-top: 1rem;
}

/* BIC: 11 Zeichen müssen ganz lesbar sein. */
.einstellung-bic { max-width: 13rem; }

/* ==========================================================================
   EXPORTE (seit Schritt 35)
   ========================================================================== */

.export-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.export-kasten { margin: 0; }

.export-kasten select { width: 100%; max-width: 100%; }

.export-zeitraum {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.export-zeitraum .feld { margin-bottom: 0; min-width: 0; }

.export-zeitraum input { width: 100%; min-width: 0; }

.export-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .9rem;
}

.export-tabelle { overflow-x: auto; }

.export-tabelle table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.export-tabelle th,
.export-tabelle td {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--a-linie);
    vertical-align: top;
}

.export-tabelle th {
    color: var(--a-tinte-2);
    font-weight: 600;
    white-space: nowrap;
}

.export-tabelle td:first-child { white-space: nowrap; }

@media (max-width: 560px) {
    .export-zeitraum { grid-template-columns: 1fr; }
}

.export-zeitraum input[type="date"] { padding-left: .5rem; padding-right: .4rem; }

/* ==========================================================================
   FORMULARE (seit Schritt 35a)
   ========================================================================== */

.formular-vorschau-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.formular-vorschau-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.formular-schritt {
    margin: 1.2rem 0 .4rem;
    font-size: .92rem;
    color: var(--a-tinte-2);
}

.formular-feld-aus { opacity: .6; }

.formular-feld .zeilenform .knopf[disabled] { opacity: .35; cursor: default; }

.formular-feld-neu { margin: 1rem 0 0; }

.formular-felder code {
    font-size: .85em;
    background: var(--a-papier);
    padding: 0 .3em;
    border-radius: 3px;
}

/* Ausgeblendete Angaben der Feldmaske (formulare.js) – auch wenn die
   Klasse selbst eine Anzeigeart setzt (z. B. .schalter). */
[data-feldmaske] [hidden] { display: none !important; }

/* ==========================================================================
   KLEIDERKAMMER – SCHNELL-LINK (seit Schritt 36)
   ========================================================================== */

.kk-link-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.kk-link-raster textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    word-break: break-all;
    min-height: 0;
}

.kk-link-qr { margin: 0; text-align: center; }

.kk-link-qr canvas {
    width: 180px;
    height: 180px;
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    background: #fff;
}

.kk-link-qr figcaption { font-size: .8rem; color: var(--a-tinte-3); }

.kk-link-form .feld { max-width: 22rem; }

.kk-link-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 560px) {
    .kk-link-raster { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AUSWAHLLISTEN GRAU (seit Schritt 37)

   Pulldown-Felder (select) heben sich mit grauem Hintergrund von den
   weißen Texteingaben ab. Gilt für alle Auswahllisten im Adminbereich;
   die Spezifität liegt über „.feld select“.
   ========================================================================== */

body select:not([multiple]) {
    background-color: #E7EAE8;
    border-color: #B9C0BB;
    color: var(--a-tinte);
}

body select:not([multiple]):hover {
    background-color: #DEE2DF;
}

body select:not([multiple]):focus {
    background-color: #E7EAE8;
}

body select:not([multiple]):disabled {
    background-color: #EEF0EE;
    color: var(--a-tinte-3);
}

/* ==========================================================================
   ANMELDUNGEN: GASTGEBER UND MAIL IM POSTFACH (seit Schritt 37)
   ========================================================================== */

.gastgeber-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
}

.gastgeber-kopf .filterzeile {
    margin: 0;
}

.gastgeber-kopf select {
    max-width: 100%;
}

.postfach-entscheidung {
    border-left: 4px solid var(--a-gruen);
    background: var(--a-gruen-lt);
}

.postfach-entscheidung-absage {
    border-left-color: var(--a-rot);
    background: var(--a-rot-lt);
}

.postfach-entscheidung .kasten-titel {
    margin-bottom: .4rem;
}

.gastgeber-kopf .filterzeile {
    flex: 1 1 16rem;
    min-width: 0;
}

.gastgeber-kopf .filterzeile select {
    width: 100%;
    min-width: 0;
}

/* ============================================================
   SEIT SCHRITT 40: Seitenleiste und Übersicht
   Links nur die Webseiten-Inhalte; alles andere über die Übersicht.
   ============================================================ */

/* Geöffneter Bereich der Übersicht erscheint eingerückt unter „Übersicht“ */
.nav-eingerueckt > a {
    padding-left: 1.75rem;
    font-size: .9rem;
}
.nav-eingerueckt > a::before {
    content: "›";
    margin: 0 .45rem 0 -.75rem;
    color: #79838E;
}
.nav-eingerueckt .nav-unter a { padding-left: 2.55rem; }

.ue-einleitung {
    margin: -.6rem 0 1.4rem;
    max-width: 62rem;
    color: var(--a-tinte-2);
}

.ue-abschnitt { margin-bottom: 1.9rem; }
.ue-ueberschrift {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--a-tinte-3);
}

/* --- Auf einen Blick --- */
.ue-stand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.ue-standkarte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1.15rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-left: 5px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
}
.ue-standkarte-gruen { border-left-color: var(--a-gruen); }
.ue-standkarte-gelb  { border-left-color: #D9A21B; }
.ue-standkarte-rot   { border-left-color: var(--a-rot); background: var(--a-rot-lt); }
.ue-standtitel {
    font-size: .8rem;
    font-weight: 600;
    color: var(--a-tinte-2);
}
.ue-standwert {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: 1.08rem;
    line-height: 1.35;
}
.ue-ampel {
    flex: 0 0 auto;
    align-self: center;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--a-tinte-3);
}
.ue-standkarte-gruen .ue-ampel { background: var(--a-gruen); }
.ue-standkarte-gelb  .ue-ampel { background: #D9A21B; }
.ue-standkarte-rot   .ue-ampel { background: var(--a-rot); }
.ue-standtext { font-size: .88rem; color: var(--a-tinte-2); }
.ue-standaktion {
    margin: .45rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .9rem;
    font-size: .86rem;
}

/* --- Karten der Bereiche --- */
.ue-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}
.ue-karte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.1rem 1.05rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
}
.ue-karte-offen { border-color: #E8C3A6; box-shadow: 0 0 0 1px #E8C3A6, var(--a-schatten); }
.ue-karte-kopf {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--a-tinte);
    text-decoration: none;
}
.ue-karte-kopf:hover .ue-karte-titel { color: var(--a-brand); text-decoration: underline; }
.ue-symbol {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    padding: .42rem;
    border-radius: 50%;
    background: var(--a-brand-lt);
    color: var(--a-brand-dk);
}
.ue-karte-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.ue-zahl {
    flex: 0 0 auto;
    min-width: 1.8rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--a-brand);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
}
.ue-zahl[hidden] { display: none; }
.ue-karte-text { margin: 0; font-size: .9rem; color: var(--a-tinte-2); }
.ue-karte-stand { margin: 0; font-size: .88rem; }
.ue-erledigt { color: var(--a-gruen); font-weight: 600; }
.ue-karte-fuss {
    margin-top: auto;
    padding-top: .45rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .85rem;
}
.ue-weg { font-size: .86rem; }

@media (max-width: 620px) {
    .ue-stand, .ue-karten { grid-template-columns: 1fr; }
    .ue-einleitung { margin-top: -.3rem; }
}

/* ============================================================
   SEIT SCHRITT 40: Medien wie im Datei-Explorer
   ============================================================ */

.medien-pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .9rem;
    font-size: 1.05rem;
}
.medien-pfad a { text-decoration: none; font-weight: 600; }
.medien-pfad a:hover { text-decoration: underline; }
.medien-pfad-trenner { color: var(--a-tinte-3); }
.medien-pfad-aktuell { font-weight: 700; }

.medien-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .6rem 1.4rem;
    margin-bottom: 1.2rem;
}
.medien-werkzeuge .filterzeile { margin-bottom: 0; }
.medien-ordnerform {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    padding: .8rem 1rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
}
.medien-ordnerform input[type="text"],
.medien-auswahlleiste select {
    padding: .45rem .7rem;
    font: inherit;
    font-size: .92rem;
    color: var(--a-tinte);
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}
.medien-ordnerform input[type="text"] { width: 14rem; max-width: 100%; background: var(--a-weiss); }

.medien-zwischentitel {
    margin: 1.2rem 0 .7rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--a-tinte-3);
}

.ordnerraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.ordnerkachel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .55rem .55rem .7rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
    color: var(--a-tinte);
    text-decoration: none;
}
.ordnerkachel:hover { border-color: var(--a-brand); color: var(--a-tinte); }
.ordnerbild {
    position: relative;
    height: 110px;
    border-radius: var(--a-radius-s);
    background: #F0E6D2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ordnerbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}
.ordnersymbol { font-size: 2.6rem; line-height: 1; }
.ordnerbild img + .ordnersymbol {
    position: absolute;
    left: .4rem;
    bottom: .3rem;
    font-size: 1.6rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.ordnername {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.medien-auswahlleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.2rem;
    margin-bottom: 1rem;
    padding: .6rem .85rem;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
}
.medien-alle { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.medien-verschieben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin-left: auto;
}
.medien-verschieben select { max-width: 100%; }

.medienplatz { position: relative; min-width: 0; }
.medienplatz > .medienkachel { height: 100%; }
.medienwahl {
    position: absolute;
    top: .45rem;
    left: .45rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--a-radius-s);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--a-schatten);
    cursor: pointer;
}
.medienwahl input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; }
.medienplatz.gewaehlt > .medienkachel {
    border-color: var(--a-brand);
    box-shadow: 0 0 0 2px var(--a-brand);
}

@media (max-width: 620px) {
    .ordnerraster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .ordnerbild { height: 90px; }
    .medien-verschieben { margin-left: 0; }
    .medien-ordnerform input[type="text"] { width: 100%; }
}

/* ============================================================
   SEIT SCHRITT 41: Mitgliederliste und Mitgliedsmaske
   ============================================================ */

.mitglieder-treffer { margin: 0 0 .5rem; }
.mitglied-nummer { font-weight: 400; margin-left: .35rem; }
.mitglied-ausgetreten { opacity: .72; }
.mitglied-ausgetreten strong { text-decoration: line-through; text-decoration-color: var(--a-tinte-3); }

.feld-fehler {
    margin: .25rem 0 0;
    font-size: .84rem;
    font-weight: 600;
    color: var(--a-rot);
}
.feld input[aria-invalid="true"] { border-color: var(--a-rot); }

.mitglied-anleitung { padding-left: 1.3rem; }
.mitglied-anleitung li { margin-bottom: .5rem; }
.mitglied-anleitung code {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ============================================================
   SEIT SCHRITT 42: Aussteller Weihnachtsmarkt
   ============================================================ */

/* Tabelle der Interessenten – lässt sich auf schmalen Bildschirmen schieben.
   position: relative, damit unsichtbare Beschriftungen (.sr-nur) in den
   Zellen im Rahmen bleiben und die Seite nicht verbreitern. */
.aussteller-tabelle {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    background: var(--a-weiss);
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius);
    box-shadow: var(--a-schatten);
}
.aussteller-tabelle table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
    font-size: .85rem;
}
.aussteller-tabelle th,
.aussteller-tabelle td {
    padding: .55rem .45rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--a-linie);
}
.aussteller-tabelle th {
    position: sticky;
    top: 0;
    background: #F1F3F1;
    font-size: .78rem;
    font-weight: 700;
    color: var(--a-tinte-2);
    line-height: 1.25;
}
/* Letzte Spalte („Ansehen“) bleibt beim seitlichen Schieben sichtbar */
.aussteller-tabelle th:last-child,
.aussteller-tabelle td:last-child {
    position: sticky;
    right: 0;
    background: var(--a-weiss);
    box-shadow: -6px 0 6px -6px rgba(20, 26, 32, .18);
}
.aussteller-tabelle th:last-child { background: #F1F3F1; z-index: 1; }
.aussteller-tabelle tbody tr:last-child td { border-bottom: 0; }
.aussteller-tabelle tbody tr:hover td { background: #FAFBFA; }
.aussteller-tabelle tbody tr:target td { background: var(--a-brand-lt); }
.aussteller-nowrap { white-space: nowrap; }
.aussteller-tabelle td.aussteller-mail { min-width: 9rem; max-width: 12rem; overflow-wrap: anywhere; }
.aussteller-tabelle td.aussteller-telefon { min-width: 6.5rem; }
.aussteller-tabelle .knopf { padding: .3rem .6rem; font-size: .82rem; }
.aussteller-angebot { min-width: 9rem; max-width: 20rem; overflow-wrap: break-word; }
.aussteller-strasse { min-width: 6.5rem; }
.aussteller-tabelle td a.aussteller-name { color: var(--a-tinte); font-weight: 700; text-decoration: none; }
.aussteller-tabelle td a.aussteller-name:hover { color: var(--a-brand); text-decoration: underline; }
.aussteller-eingang { display: block; margin-top: .25rem; font-size: .76rem; }

.aussteller-fotozelle { width: 72px; }
.aussteller-fotozelle img {
    display: block;
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--a-radius-s);
    border: 1px solid var(--a-linie);
    background: var(--a-papier);
}
.aussteller-fotozelle a:hover img { border-color: var(--a-brand); }

.aussteller-konditionswahl select {
    width: 9.5rem;
    max-width: 9.5rem;
    padding: .4rem .55rem;
    font: inherit;
    font-size: .86rem;
    border: 1px solid #C9CFCA;
    border-radius: var(--a-radius-s);
}

/* Eine Anfrage: Angaben links, Foto rechts */
.aussteller-detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.4rem;
    align-items: start;
}
.aussteller-detail > div { min-width: 0; }
.aussteller-foto-gross { margin: 0; min-width: 0; }
.aussteller-foto-gross img {
    display: block;
    max-width: 100%;
    max-height: 460px;
    border-radius: var(--a-radius);
    border: 1px solid var(--a-linie);
}
.aussteller-foto-gross figcaption { margin-top: .4rem; font-size: .8rem; }

.aussteller-mailform select,
.aussteller-mailform .feld { max-width: 34rem; }
.aussteller-mailform select { width: 100%; }

/* Konditionen */
.aussteller-kondition-aus { opacity: .8; }
.aussteller-kondition .kasten-titel .marken { display: inline-flex; margin-left: .5rem; vertical-align: middle; }
.aussteller-kondition-felder {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
    gap: 0 1rem;
}
.aussteller-kondition-felder > .feld { min-width: 0; }
.aussteller-kondition-text,
.aussteller-kondition-felder > .feld-schalter { grid-column: 1 / -1; }

@media (max-width: 860px) {
    .aussteller-detail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .aussteller-kondition-felder { grid-template-columns: minmax(0, 1fr); }
    .aussteller-kondition-felder .feld-schmal { max-width: none; }
}

/* ============================================================
   SEIT SCHRITT 43: Anhänge im Postfach (Bilder als Vorschau)
   ============================================================ */

.postfach-anhangbilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .9rem;
    margin: .7rem 0 .4rem;
}
.postfach-anhangbilder figure { margin: 0; min-width: 0; }
.postfach-anhangbilder a {
    display: block;
    border: 1px solid var(--a-linie);
    border-radius: var(--a-radius-s);
    background: var(--a-papier);
    overflow: hidden;
}
.postfach-anhangbilder a:hover { border-color: var(--a-brand); }
.postfach-anhangbilder img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: contain;
}
.postfach-anhangbilder figcaption {
    margin-top: .3rem;
    font-size: .82rem;
    overflow-wrap: anywhere;
}
.postfach-anhaenge li .marke { margin-left: .3rem; }

/* Seit Schritt 45: Platzhalter-Liste bei den Mails eines Formulars */
.mail-platzhalter {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 0;
    font-size: .9rem;
}
.mail-platzhalter dt { margin: 0; }
.mail-platzhalter dd { margin: 0; color: var(--a-tinte-3); }
@media (max-width: 520px) {
    .mail-platzhalter { grid-template-columns: 1fr; gap: .1rem; }
    .mail-platzhalter dd { margin-bottom: .45rem; }
}

/* ============================================================
   RÜCKGÄNGIG MACHEN UND DATENBANKSICHERUNG (seit Schritt 57)
   ============================================================ */

.protokoll-rueckgaengig {
    margin: .5rem 0 0;
}
.rueckgaengig-eintrag {
    margin: 0 0 .8rem;
    overflow-wrap: anywhere;
}
.rueckgaengig-tabelle {
    overflow-x: auto;
}
.rueckgaengig-tabelle table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .9rem;
}
.rueckgaengig-tabelle th,
.rueckgaengig-tabelle td {
    padding: .35rem .5rem;
    border: 1px solid var(--a-linie, #DFE3E0);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.rueckgaengig-tabelle th {
    background: #F5F7F6;
    font-weight: 600;
}
.rueckgaengig-tabelle th:first-child,
.rueckgaengig-tabelle td:first-child {
    width: 30%;
}
.rueckgaengig-tabelle .marke,
.rueckgaengig-grund {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: .25rem;
    font-size: .8rem;
    white-space: normal;
}
.rueckgaengig-konflikt td {
    background: #FDF1EF;
}
.rueckgaengig-aus td {
    color: var(--a-tinte-2, #555C63);
}
.rueckgaengig-formular {
    margin-top: 1rem;
}
.datensicherung-hilfe {
    margin-top: 1rem;
    font-size: .92rem;
}
.datensicherung-hilfe summary {
    cursor: pointer;
    color: var(--a-brand);
    font-weight: 600;
}
.datensicherung-hilfe ol {
    margin: .3rem 0 .6rem;
    padding-left: 1.3rem;
}
.datensicherung-hilfe code {
    overflow-wrap: anywhere;
}
@media (max-width: 560px) {
    .rueckgaengig-tabelle th:first-child,
    .rueckgaengig-tabelle td:first-child {
        width: 34%;
    }
}

/* ============================================================
   AUSSTELLER: WARTELISTE UND BEWERBUNGSSEITE (seit Schritt 58)
   ============================================================ */

.aussteller-belegungshinweis {
    margin: .2rem 0 .8rem;
}
.aussteller-belegungshinweis a {
    margin-left: .3rem;
}