/* ==================================================================
   Formular – BEM
   ------------------------------------------------------------------
   Das Formular bringt KEINEN eigenen Hintergrund mit. Es uebernimmt
   den Hintergrund der Seite, in die es eingebettet wird.

   Die Farben sind als Custom Properties gesetzt und lassen sich von
   aussen ueberschreiben, z. B. fuer eine helle Seite:

       .formular {
           --f-label:       #1c2430;
           --f-feld-bg:     #ffffff;
           --f-feld-rahmen: #d3d9df;
           --f-fehler:      #b3261e;
       }
   ================================================================== */

.formular {
    /* Beschriftungen */
    --f-label:        #ffffff;
    --f-label-groesse: 1rem;
    --f-pflicht:      #ef4b6b;

    /* Eingabefelder */
    --f-feld-bg:      #f6f7f9;
    --f-feld-text:    #1c2430;
    --f-feld-rahmen:  transparent;
    --f-platzhalter:  #9aa3ad;
    --f-fokus:        rgba(255, 255, 255, .45);

    /* Button */
    --f-button-bg:    #ef4b6b;
    --f-button-text:  #ffffff;
    --f-button-hover: #d63a58;

    /* Meldungen */
    --f-fehler:       #ff9aa8;
    --f-erfolg:       #7ee2a8;
    --f-hinweis:      rgba(255, 255, 255, .75);

    --f-radius:       999px;   /* Pill-Form */
    --f-radius-block: 22px;    /* Textarea, Meldungen */
    --f-abstand:      1.35rem;

    max-width: 640px;
}

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

.formular__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: var(--f-abstand);
}

.formular__feld--voll {
    grid-column: 1 / -1;
}

/* --- Beschriftung ------------------------------------------------ */

.formular__label {
    display: block;
    margin-bottom: .5rem;
    color: var(--f-label);
    font-size: var(--f-label-groesse);
    font-weight: 700;
    line-height: 1.3;
}

.pflicht {
    color: var(--f-pflicht);
    font-weight: 700;
}

/* --- Eingaben ---------------------------------------------------- */

.formular__eingabe {
    width: 100%;
    padding: .6rem 1.35rem;
    border: 1px solid var(--f-feld-rahmen);
    border-radius: var(--f-radius);
    background: var(--f-feld-bg);
    color: var(--f-feld-text);
    font: inherit;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
}

.formular__eingabe::placeholder {
    color: var(--f-platzhalter);
    opacity: 1;
}

.formular__eingabe:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--f-fokus);
}

/* Auswahlliste: eigener Pfeil, da appearance abgeschaltet ist */
select.formular__eingabe {
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2430' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 1.1rem;
    cursor: pointer;
}

/* Auswahl noch nicht getroffen -> wie ein Platzhalter darstellen */
select.formular__eingabe:invalid,
select.formular__eingabe[data-leer="1"] {
    color: var(--f-platzhalter);
}

.formular__eingabe--mehrzeilig {
    border-radius: var(--f-radius-block);
    resize: vertical;
    min-height: 8rem;
}

/* Fest eingestelltes Feld: sichtbar, aber nicht änderbar */
.formular__eingabe--fest {
    background: color-mix(in srgb, var(--f-feld-bg) 82%, transparent);
    color: #5c6672;
    cursor: default;
}

.formular__eingabe--fest:focus {
    box-shadow: none;
}

/* Zahlenfelder: Spinner ausblenden */
.formular__eingabe[type="number"] {
    -moz-appearance: textfield;
}

.formular__eingabe[type="number"]::-webkit-outer-spin-button,
.formular__eingabe[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Fehler ------------------------------------------------------ */

.formular__feld--fehler .formular__eingabe {
    border-color: var(--f-fehler);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--f-fehler) 45%, transparent);
}

.formular__fehler {
    display: block;
    margin: .4rem 0 0 1.35rem;
    color: var(--f-fehler);
    font-size: .85rem;
    font-weight: 600;
}

/* --- Checkbox ---------------------------------------------------- */

.formular__feld--checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    margin-top: .5rem;
}

.formular__checkbox {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .15rem;
    accent-color: var(--f-button-bg);
    cursor: pointer;
}

.formular__label--checkbox {
    margin: 0;
    color: var(--f-label);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.55;
    opacity: .92;
}

.formular__label--checkbox a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.formular__feld--checkbox .formular__fehler {
    grid-column: 2;
    margin-left: 0;
}

/* --- Honeypot: fuer Menschen unsichtbar -------------------------- */

.formular__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Aktionen ---------------------------------------------------- */

.formular__aktionen {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.formular__button {
    padding: .95rem 2.25rem;
    border: 0;
    border-radius: var(--f-radius);
    background: var(--f-button-bg);
    color: var(--f-button-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.formular__button:hover {
    background: var(--f-button-hover);
}

.formular__button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--f-fokus);
}

.formular__button:disabled {
    opacity: .6;
    cursor: default;
}

.formular__button--link {
    display: inline-block;
    text-decoration: none;
}

.formular__status {
    color: var(--f-hinweis);
    font-size: .9rem;
}

.formular__status--fehler {
    color: var(--f-fehler);
}

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

.meldung {
    margin: 0 0 1.5rem;
    padding: .85rem 1.35rem;
    border-radius: var(--f-radius-block);
    border-left: 4px solid;
    font-size: 1.3rem;
}

.meldung--fehler {
    border-color: var(--f-fehler);
    background: color-mix(in srgb, var(--f-fehler) 14%, transparent);
    color: var(--f-fehler);
}

.meldung--erfolg {
    border-color: var(--f-erfolg);
    background: color-mix(in srgb, var(--f-erfolg) 14%, transparent);
    color: var(--f-erfolg);
}

/* --- Formularspalte ---------------------------------------------- */
/* Ueberschriften, Meldungen und Formular teilen sich einen 640px
   breiten Block, der mittig in der Spalte sitzt. */

.column-flex--formular > * {
    max-width: 640px;
    margin-inline: auto;
}

/* --- Umgebung (nur falls das Formular allein auf der Seite steht) - */

.seite {
    padding: 2rem 1rem;
}

.seite__inhalt {
    max-width: 640px;
    margin: 0 auto;
}

.seite__titel {
    margin: 0 0 .5rem;
    color: var(--f-label, #fff);
    font-size: 1.75rem;
    line-height: 1.25;
}

.seite__text {
    max-width: 640px;
    margin: 0 auto 1rem;
    color: var(--f-hinweis, rgba(255, 255, 255, .75));
}

/* --- Mobil ------------------------------------------------------- */

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

    .formular__feld--halb {
        grid-column: 1 / -1;
    }

    .formular__button {
        width: 100%;
    }

    .seite {
        padding: 1.25rem .75rem;
    }
}