/* =====================================================================
   Formulare - nur fuer die Kontaktseite geladen
   ===================================================================== */

.formular {
    max-width: var(--breite-text);
    margin: 0 auto var(--abstand-l);
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: var(--abstand-m);
}

.formular__gruppe {
    border: 0;
    border-top: 1px solid var(--farbe-linie);
    margin: 0 0 var(--abstand-m);
    padding: var(--abstand-m) 0 0;
}

.formular__gruppe:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.formular__gruppe legend {
    padding: 0;
    font-family: var(--schrift-ui);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--farbe-text-leise);
}

/* Mehrere Felder nebeneinander, solange Platz ist */
.formular__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-s);
}

.formular__feld {
    flex: 1 1 12rem;
    margin-bottom: var(--abstand-s);
    min-width: 0;
}

.formular__feld--schmal {
    flex: 0 1 8rem;
}

.formular__feld--kasten {
    background: var(--farbe-flaeche-warm);
    border-radius: var(--radius);
    padding: var(--abstand-s);
}

.formular label,
.formular__beschriftung {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--schrift-ui);
    font-size: 0.9rem;
    font-weight: 600;
}

.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular input[type="date"],
.formular input[type="number"],
.formular select,
.formular textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font-family: var(--schrift-ui);
    font-size: 1rem;
    color: var(--farbe-text);
    background: var(--farbe-flaeche);
    border: 1px solid #c8c0b2;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.formular textarea {
    resize: vertical;
    min-height: 8rem;
    font-family: var(--schrift-text);
    line-height: 1.6;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px rgba(140, 59, 82, 0.15);
    outline: none;
}

/* Felder, die der Server beanstandet hat */
.formular [aria-invalid="true"] {
    border-color: var(--farbe-akzent);
    background: #fdf7f8;
}

.formular__ankreuzfeld {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-weight: 400;
    font-family: var(--schrift-text);
    font-size: 1rem;
}

.formular__ankreuzfeld input {
    margin-top: 0.35rem;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    accent-color: var(--farbe-akzent);
}

.formular__hinweis {
    margin: 0.35rem 0 0;
    font-family: var(--schrift-ui);
    font-size: 0.85rem;
    color: var(--farbe-text-leise);
}

.formular__pflichthinweis {
    font-family: var(--schrift-ui);
    font-size: 0.85rem;
    color: var(--farbe-text-leise);
}

.pflicht {
    color: var(--farbe-akzent);
}

.knopf--gross {
    width: 100%;
    padding: 0.9rem 1.4rem;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
   Der Honigtopf des Spamschutzes.

   Wichtig: NICHT display:none. Einige Ausfuell-Programme ueberspringen
   ausgeblendete Felder gezielt. Das Feld bleibt technisch vorhanden und
   wird nur aus dem sichtbaren Bereich geschoben - fuer den Besucher
   unsichtbar, fuer einen Bot ein ganz normales Textfeld.
   --------------------------------------------------------------------- */
.honigtopf {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 45rem) {
    .formular {
        padding: var(--abstand-s);
    }

    .formular__feld--schmal {
        flex: 1 1 8rem;
    }
}