/*
 * Formulare (mobile-first) und die Zeltlager-Anmeldung.
 * Fehler sind nicht nur farbig markiert, sondern stehen als Text unter dem Feld (aria-describedby).
 */
.formular__abschnitt {
    margin-block: var(--abstand-l);
}

.formular__meldung {
    background: var(--farbe-fehler-hell);
    border-left: 4px solid var(--farbe-fehler);
    border-radius: var(--radius);
    padding: var(--abstand-m) var(--abstand-l);
    font-weight: 600;
}

/* Unsichtbar, aber für die Enter-Taste der erste Absende-Knopf */
.formular__standardknopf,
.formular__honigtopf {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feldgruppe {
    display: grid;
    gap: var(--abstand-m);
}

.feld__beschriftung {
    display: block;
    font-weight: 600;
    margin-bottom: var(--abstand-xs);
}

.feld__eingabe {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--abstand-s) var(--abstand-m);
    font: inherit;
    /* nie unter 16px, sonst zoomt Safari auf dem iPhone beim Antippen in die Seite */
    font-size: max(1rem, 1em);
    color: var(--farbe-text);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-text-leise);
    border-radius: var(--radius);
}

.feld--fehler .feld__eingabe,
.feld--fehler input[type="checkbox"] {
    border-color: var(--farbe-fehler);
    outline: 2px solid var(--farbe-fehler);
}

.feld__fehler {
    color: var(--farbe-fehler);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
    font-weight: 600;
    margin: var(--abstand-xs) 0 0;
}

.feld--haken {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--abstand-s);
    align-items: start;
}

.feld--haken input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.1rem 0 0;
    accent-color: var(--farbe-gruen-dunkel);
}

.feld--haken .feld__fehler {
    grid-column: 1 / -1;
}

button.knopf {
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.knopf.knopf--leise {
    background: var(--farbe-weiss);
    color: var(--farbe-gruen-dunkel);
    border: 2px solid var(--farbe-gruen-dunkel);
}

.knopf.knopf--leise:hover {
    background: var(--farbe-gruen-hell);
}

.formular__absenden {
    width: 100%;
    font-size: var(--schriftgroesse-gross);
}

/* Zeltlager */
.zeltlager__preise {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--abstand-xs) var(--abstand-m);
    max-width: 30rem;
}

.zeltlager__preise dd,
.bankdaten dd {
    margin: 0;
}

.zeltlager__preise dd {
    font-weight: 700;
    text-align: right;
}

.zeltlager__preis-hinweis,
.zeltlager__datenschutz {
    color: var(--farbe-text-leise);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
}

.mitfahrer-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--abstand-m);
}

.mitfahrer {
    margin-bottom: var(--abstand-m);
}

.mitfahrer__felder {
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    padding: var(--abstand-m);
    margin: 0;
    background: var(--farbe-weiss);
}

.mitfahrer__titel {
    font-weight: 700;
    padding: 0 var(--abstand-xs);
}

.mitfahrer__preis {
    margin: var(--abstand-m) 0 var(--abstand-s);
    font-weight: 600;
}

.mitfahrer__preis:empty {
    display: none;
}

/* Den einzigen Mitfahrer kann man nicht entfernen (setzt das JS) */
.mitfahrer-liste--einer .mitfahrer__entfernen {
    display: none;
}

.preisuebersicht {
    margin-top: var(--abstand-m);
    padding: var(--abstand-m);
    background: var(--farbe-gruen-hell);
    border-radius: var(--radius);
    font-size: var(--schriftgroesse-gross);
}

.preisuebersicht p {
    margin: 0;
}

.bankdaten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--abstand-xs) var(--abstand-m);
    padding: var(--abstand-m);
    background: var(--farbe-weiss);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.bankdaten dt {
    font-weight: 600;
}

.bankdaten__iban {
    font-family: var(--schrift-mono);
    overflow-wrap: anywhere;
}

.zeltlager__aufstellung {
    width: 100%;
    border-collapse: collapse;
}

.zeltlager__aufstellung th,
.zeltlager__aufstellung td {
    text-align: left;
    padding: var(--abstand-s);
    border-bottom: 1px solid var(--farbe-linie);
}

.zeltlager__aufstellung .zeltlager__betrag {
    text-align: right;
    white-space: nowrap;
}

.zeltlager__rabatt {
    color: var(--farbe-text-leise);
    font-size: calc(0.85 * var(--schriftgroesse-basis));
}

@media (min-width: 40em) {
    .feldgruppe {
        grid-template-columns: repeat(2, 1fr);
    }

    .formular__absenden {
        width: auto;
    }
}

@media (min-width: 64em) {
    .mitfahrer .feldgruppe {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Kontaktformular */
.kontakt__anliegen {
    padding-left: 1.25em;
}

textarea.kontakt__nachricht-eingabe {
    min-height: 10rem;
    resize: vertical;
}

.kontakt-formular .feld,
.kontakt-formular .feldgruppe {
    margin-bottom: var(--abstand-m);
}

.kontakt__nachricht {
    margin: 0 0 var(--abstand-l);
    padding: var(--abstand-m);
    background: var(--farbe-weiss);
    border-left: 4px solid var(--farbe-gruen-dunkel);
    border-radius: var(--radius);
    white-space: pre-line;
    overflow-wrap: anywhere;
}