/* ============================================================
   ANMELDESEITE (public/anmeldung.php, seit Schritt 17)

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt. Die Eingabefelder selbst kommen aus
   seite.css (.f, .chk); hier stehen Rahmen, Schritte und
   Meldungen.
   ============================================================ */

.anmeldung-wrap {
    max-width: 820px;
}

.anmeldung-kopf {
    margin-bottom: 18px;
}

.anmeldung-termin {
    margin: 6px 0 0;
    font-weight: 700;
    color: var(--ink-3);
}

.anmeldung-einleitung {
    margin: 0 0 22px;
}

.anmeldung-kasten {
    margin: 0 0 20px;
    padding: 22px 24px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-m, 18px);
    background: var(--paper);
}

/* Schritte als Kästen mit Nummer */
.anmeldung-schritt {
    min-width: 0;
}

.anmeldung-schritt legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ink);
}

.anmeldung-schrittzahl {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .95rem;
}

.anmeldung-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    margin-top: 8px;
}

.anmeldung-feld-breit {
    grid-column: 1 / -1;
}

.anmeldung-feld .chk {
    margin-bottom: 4px;
    font-size: .9rem;
    font-weight: 400;
}

.anmeldung-pflicht {
    color: var(--brand);
}

.anmeldung-hilfe {
    margin: 5px 0 0;
    font-size: .82rem;
    color: var(--ink-3);
}

.anmeldung-hilfe-eingerueckt {
    margin-left: 29px;
}

.anmeldung-info {
    margin: 0;
    font-size: .92rem;
    color: var(--ink-2);
}

.anmeldung-auswahl .chk {
    margin-bottom: 6px;
}

/* Fehler */
.anmeldung-feld-fehler input,
.anmeldung-feld-fehler select,
.anmeldung-feld-fehler textarea {
    border-color: #b3261e;
}

.anmeldung-fehler {
    margin: 5px 0 0;
    font-size: .84rem;
    font-weight: 700;
    color: #b3261e;
}

.anmeldung-meldung {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--r-s, 12px);
    border: 1.5px solid rgba(179, 38, 30, .35);
    background: rgba(179, 38, 30, .07);
    color: #7a1a14;
}

.anmeldung-meldung ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

.anmeldung-meldung a {
    color: inherit;
    text-decoration: underline;
}

/* Lockfeld für Programme: für Menschen unsichtbar */
.anmeldung-lock {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.anmeldung-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Danke und geschlossen */
.anmeldung-danke,
.anmeldung-geschlossen {
    text-align: center;
    padding: 34px 26px;
}

.anmeldung-danke p,
.anmeldung-geschlossen p {
    margin: 0 auto 14px;
    max-width: 560px;
}

.anmeldung-haken {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #2f6b2a;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}

.anmeldung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
    margin-top: 20px !important;
}

@media (max-width: 560px) {
    .anmeldung-kasten {
        padding: 18px 16px;
    }

    .anmeldung-felder {
        grid-template-columns: 1fr;
    }

    .anmeldung-fuss {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* Die gewählte Türchen-Vorschau unter der Auswahl (seit Schritt 17d) */
.anmeldung-wahl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    padding: 9px 14px;
    border-radius: var(--r-s, 12px);
    background: rgba(47, 107, 42, .08);
    border: 1.5px solid rgba(47, 107, 42, .3);
    font-size: .92rem;
    color: #24521f;
}

.anmeldung-wahl-stern {
    color: #d8a531;
    font-size: 1.1rem;
}

.anmeldung-papier {
    position: relative;
}

/* ============================================================
   WINTERLICH – Lebendiger Adventskalender (seit Schritt 17d)

   Ein nachtblauer Rahmen mit Sternen und leisem Schnee (Canvas,
   anmeldung.js), darin das Formular auf hellem Papier mit Goldrand
   und zwei gezeichneten Tannenzweigen an den oberen Ecken.
   Der Rahmen liegt innerhalb der Seite, damit die Navigation oben
   unverändert lesbar bleibt.
   ============================================================ */

.anmeldung-winter .anmeldung-wrap {
    position: relative;
    max-width: 880px;
    padding: 34px 34px 40px;
    border-radius: 26px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 214, 130, .16), transparent 60%),
        linear-gradient(170deg, #1d3257, #13213a 72%);
    border: 3px solid #b98a25;
    box-shadow:
        inset 0 0 0 4px rgba(231, 185, 76, .22),
        0 18px 40px rgba(19, 33, 58, .28);
    overflow: hidden;
    isolation: isolate;
}

.anmeldung-himmel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.anmeldung-winter .anmeldung-wrap > *:not(.anmeldung-himmel) {
    position: relative;
    z-index: 1;
}

.anmeldung-winter .termin-zurueck {
    color: #ffe3a3;
}

.anmeldung-winter .termin-zurueck:hover {
    color: #fff7e3;
}

.anmeldung-winter .anmeldung-kopf .termin-titel {
    color: #fff7e3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.anmeldung-winter .anmeldung-termin {
    color: #ffe3a3;
}

.anmeldung-winter .anmeldung-papier {
    margin-top: 8px;
    padding: 58px 28px 26px;   /* oben Platz für die Tannenzweige */
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 0%, #fffdf6 0%, #fff7e3 60%, #f7e8c4 100%);
    border: 2px solid #e7b94c;
    box-shadow:
        inset 0 0 0 5px rgba(231, 185, 76, .18),
        0 10px 30px rgba(0, 0, 0, .3);
}

.anmeldung-winter .anmeldung-kasten {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(185, 138, 37, .35);
}

.anmeldung-winter .anmeldung-schrittzahl {
    background: #b3261e;
    box-shadow: 0 0 0 3px rgba(231, 185, 76, .5);
}

.anmeldung-winter .anmeldung-haken {
    background: #b3261e;
    box-shadow: 0 0 0 4px rgba(231, 185, 76, .55);
}

/* Tannenzweige an den oberen Ecken des Papiers */
.anmeldung-zweig {
    position: absolute;
    top: -22px;
    width: 150px;
    height: 96px;
    pointer-events: none;
    z-index: 2;
}

.anmeldung-zweig-links {
    left: -18px;
}

.anmeldung-zweig-rechts {
    right: -18px;
}

@media (max-width: 560px) {
    .anmeldung-winter .anmeldung-wrap {
        padding: 22px 12px 26px;
        border-radius: 18px;
    }

    .anmeldung-winter .anmeldung-papier {
        padding: 44px 12px 18px;
    }

    .anmeldung-zweig {
        width: 110px;
        height: 70px;
        top: -16px;
    }
}

@media (max-width: 560px) {
    /* Der Nachthimmel-Rahmen soll auf dem Handy nicht am Rand kleben. */
    .anmeldung-winter .anmeldung-wrap {
        margin-left: 8px;
        margin-right: 8px;
        width: auto;
    }
}

/* Auswahl aus den Preisen des Termins, z. B. Standgröße (seit Schritt 20) */
.anmeldung-preise {
    display: grid;
    gap: 8px;
}

.anmeldung-preis {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-s, 12px);
    background: var(--paper);
    cursor: pointer;
}

.anmeldung-preis:has(input:checked) {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(192, 86, 33, .12);
}

.anmeldung-preis input {
    margin-top: 0;
}

.anmeldung-preis span {
    flex: 1 1 auto;
}

.anmeldung-preis small {
    display: block;
    color: var(--ink-3);
}

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