/* ############################################################################
        FORMULARE – gemeinsame Basis

    Einzige Quelle für das Aussehen aller Formulare der UPD-Website. Die
    Deklarationen stehen genau einmal; die Selektorliste einer Regel nennt
    jeweils alle Formularsysteme, die dieselbe Rolle abbilden:

      Rolle             Fluent Forms            Eigene Blöcke        WordPress-Core
      ----------------  ----------------------  -------------------  ------------------------
      Feldgruppe        .ff-el-group            .upd-form__group     –
      Beschriftung      .ff-el-input--label     .upd-form__label     .wp-block-search__label
      Eingabefeld       .ff-el-form-control     .upd-form__control   .wp-block-search__input
      Pflichtmarkierung .ff-el-is-required      .upd-form__label--required
      Checkbox-Zeile    .ff-el-form-check       .upd-form__check
      Absenden          .ff-btn-submit          .upd-form__submit    .wp-block-search__button

    Die FAQ-Suche (.faq-suche__input) ist ein weiteres Eingabefeld und hängt
    an derselben Regel.

    Wer ein Formularelement ändern will, ändert hier – die Änderung gilt
    danach für den Presseverteiler (Fluent Forms), den Block
    upd/feedbackformular, die FAQ-Suche und die Suche auf der 404-Seite
    gleichzeitig.

    Die Werte entsprechen dem vom Kunden freigegebenen und mehrfach auf
    Barrierefreiheit geprüften Presseverteiler-Formular. Einzige bewusste
    Abweichung: Eingaben und Buttons nutzen die Hausschrift (Work Sans)
    statt der von Fluent Forms mitgelieferten System- bzw. Arial-Schrift.
############################################################################ */

/* Die Farbvariablen werden mit Fallback angesprochen (z. B.
   var(--c-petrol, #007d8a)). Dadurch funktioniert diese Datei auch allein –
   nötig im Block-Editor, wo style.css mit den :root-Variablen nicht geladen
   wird. Im Frontend gewinnt immer der Wert aus style.css. */
:root {
    /* Abstände */
    --form-field-gap: 20px;
    --form-label-gap: 5px;

    /* Beschriftung */
    --form-label-font-size: 16px;
    --form-label-font-weight: 500;
    --form-label-line-height: 1.55;
    --form-label-color: #07272d;

    /* Eingabefelder
       Blockpadding und Zeilenhöhe ergeben zusammen die vom Presseverteiler
       gewohnte Feldhöhe von rund 39px. Wer die Höhe ändern will, ändert
       --form-control-padding-block. */
    --form-control-padding-block: 8px;
    --form-control-padding-inline: 15px;
    --form-control-font-size: 14px;
    --form-control-line-height: 1.5;
    --form-control-color: #07272d;
    --form-control-background: #fff;
    --form-control-border-width: 1px;
    --form-control-border-color: var(--c-dunkelgruen-100, #003a40);
    --form-control-border-color-focus: var(--c-brand-blue-70, #4c9ed1);
    --form-control-radius: var(--corner-radius, 5px);
    --form-placeholder-color: var(--c-petrol, #007d8a);

    /* Hinweise, Pflichtfelder, Fehler
       Fehlertexte stehen 4px unter ihrem Feld und sind kleiner als der
       Fließtext – so wie im Presseverteiler. */
    --form-hint-color: #4d5858;
    --form-hint-font-size: 0.9rem;
    --form-required-color: var(--c-warning, #ce0f54);
    --form-error-color: var(--c-warning, #ce0f54);
    --form-error-font-size: 12px;
    --form-error-gap: 4px;

    /* Meldung nach dem Absenden.
       Steht mit demselben Abstand unter dem Button wie der Pflichtfeld-Hinweis
       darüber – sonst sitzt der Button sichtbar aus der Mitte. */
    --form-message-gap: var(--form-field-gap);
    --form-message-padding: 1rem 1.25rem;
    --form-message-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    --form-message-border-color: var(--c-hellgruen-100, #9bc43a);
    --form-message-background: #f3f8e6;
    --form-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M17.657 63.812l31.021 31.021 61.665-61.665' fill='none' stroke='%239bc43a' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'/%3E%3C/svg%3E");

    /* Absende-Button */
    --form-button-font-size: 16px;
    --form-button-font-weight: 500;
    --form-button-padding-block: 1rem;
    --form-button-padding-inline: min(2.5rem, 3vw);
}

/* ----------------------------------------------------------------------------
   Formularrahmen
   Das <fieldset> gruppiert die Felder für assistive Technik. Seine
   Browser-Grundgestaltung wird zurückgesetzt (Fluent Forms macht das inline).
---------------------------------------------------------------------------- */

.upd-form__fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ----------------------------------------------------------------------------
   Feldgruppe: eine Beschriftung plus zugehöriges Feld
---------------------------------------------------------------------------- */

.fluentform .ff-el-group,
.upd-form__group {
    margin-bottom: var(--form-field-gap);
}

/* ----------------------------------------------------------------------------
   Beschriftung
   Fluent Forms hüllt das <label> in einen Container; unsere Blöcke setzen die
   Klasse direkt auf das <label>. Deshalb trägt der Abstand nach unten der
   jeweils äußere Knoten, die Typografie das <label> selbst.
---------------------------------------------------------------------------- */

.fluentform .ff-el-input--label,
.upd-form__label {
    display: block;
    margin: 0 0 var(--form-label-gap);
}

.fluentform .ff-el-input--label label,
.upd-form__label {
    color: var(--form-label-color);
    font-family: inherit;
    font-size: var(--form-label-font-size);
    font-weight: var(--form-label-font-weight);
    line-height: var(--form-label-line-height);
}

/* Pflichtfeld: rotes Sternchen hinter der Beschriftung.
   Die Kennzeichnung ist rein visuell – maßgeblich für assistive Technik sind
   die Attribute required und aria-required am Feld selbst. */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.upd-form__label--required::after {
    color: var(--form-required-color);
    content: " *";
    margin-left: 3px;
}

/* Erklärung der Sternchen-Kennzeichnung oberhalb der Felder (WCAG 3.3.2) */
.upd-form__required-hint {
    margin: 0 0 var(--form-field-gap);
    color: var(--form-hint-color);
    font-size: var(--form-hint-font-size);
}

/* Feldbezogener Hilfetext. Wird per aria-describedby mit dem Feld verknüpft
   und steht deshalb vor dem Feld – Screenreader lesen ihn nach der
   Beschriftung vor. */
.upd-form__help {
    margin: 0 0 var(--form-label-gap);
    color: var(--form-hint-color);
    font-size: var(--form-hint-font-size);
}

/* ----------------------------------------------------------------------------
   Eingabefelder
---------------------------------------------------------------------------- */

.fluentform .ff-el-form-control,
.upd-form__control,
.wp-block-search__input,
.faq-suche__input {
    box-sizing: border-box;
    /* block statt inline-block: sonst erzeugt die Grundlinie unter Textfeldern
       eine zusätzliche Lücke, und die Fehlermeldung säße tiefer als im
       Presseverteiler. */
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--form-control-padding-block) var(--form-control-padding-inline);
    border: var(--form-control-border-width) solid var(--form-control-border-color);
    border-radius: var(--form-control-radius);
    background-color: var(--form-control-background);
    color: var(--form-control-color);
    font-family: inherit;
    font-size: var(--form-control-font-size);
    font-weight: 400;
    line-height: var(--form-control-line-height);
    /* Nur Rahmen und Fokusring werden animiert – bewusst nicht "all".
       Ohne Fokus hat ein Feld outline-color: currentColor (dunkel) bei
       outline-style: none. Ein "transition: all" (aus *:focus-visible in
       style.css) animiert beim Fokussieren die Outline-Farbe von dunkel nach
       transparent, während der Stil sofort auf solid springt – ein dunkler
       Rahmen blitzt auf und blendet aus. Fluent Forms setzt dieselbe explizite
       Transition und ist deshalb sauber. */
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

/* Der Suchblock trägt die Preset-Klasse has-medium-font-size, die WordPress
   in den Global Styles mit !important ausliefert. Nur !important kann das
   überstimmen; die zweite Klasse im Selektor hebt zusätzlich die Spezifität,
   damit die Regel unabhängig von der Ladereihenfolge gewinnt. Ohne das wäre
   das Suchfeld deutlich größer als jedes andere Formularfeld. */
.wp-block-search .wp-block-search__input {
    font-size: var(--form-control-font-size) !important;
}

.upd-form__control--textarea {
    min-height: 12rem;
    resize: vertical;
}

.fluentform .ff-el-form-control::placeholder,
.upd-form__control::placeholder,
.wp-block-search__input::placeholder,
.faq-suche__input::placeholder {
    color: var(--form-placeholder-color);
    opacity: 1;
}

/* Auswahllisten zeigen den Platzhalter über die leere Option an. */
.fluentform select.ff-el-form-control:has(option:checked[value=""]),
.upd-form__control--select:has(option:checked[value=""]) {
    color: var(--form-placeholder-color);
}

/* Fokus: farbiger Rahmen plus der Petrol-Ring aus *:focus-visible (style.css).
   Der Browser-Outline wird unterdrückt, sonst läge er als dritte Linie um den
   Ring – genau das unterscheidet die Suche bisher vom Presseverteiler, wo
   Fluent Forms den Outline bereits entfernt. Der Rahmen bleibt transparent
   statt "none", damit der Fokus im Windows-Kontrastmodus sichtbar bleibt. */
.fluentform .ff-el-form-control:focus,
.upd-form__control:focus,
.wp-block-search .wp-block-search__input:focus,
.faq-suche__input:focus {
    border-color: var(--form-control-border-color-focus);
    outline: 2px solid transparent;
    outline-offset: 0;
}

.fluentform .ff-el-form-control:disabled,
.upd-form__control:disabled {
    background-color: #f3f5f4;
    color: #4d5858;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   Checkbox-Zeile (z. B. Datenschutz-Einwilligung)
   Fluent Forms baut die Zeile als Tabellenzeile auf, unsere Blöcke als Flexbox.
   Gemeinsam ist die Typografie des Begleittexts.
---------------------------------------------------------------------------- */

.fluentform .ff-el-form-check-label,
.upd-form__check-label {
    color: var(--form-label-color);
    font-size: var(--form-label-font-size);
    font-weight: 400;
    line-height: var(--form-label-line-height);
}

.upd-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

/* Die Checkbox behält ihre native Darstellung – so wie im freigegebenen
   Presseverteiler. Der Ausgleich nach oben rückt sie auf die erste Textzeile. */
.upd-form__check-input {
    flex: none;
    margin: 0.45rem 0 0;
}

.upd-form__required {
    color: var(--form-required-color);
}

/* ----------------------------------------------------------------------------
   Fehlerzustände
---------------------------------------------------------------------------- */

.fluentform .ff-el-is-error .ff-el-form-control,
.upd-form__control[aria-invalid="true"] {
    border-color: var(--form-error-color);
}

/* Fehlermeldung direkt unter dem betroffenen Feld. Eine Fehlerübersicht am
   Formularanfang gibt es bewusst nicht – der Presseverteiler hat ebenfalls
   keine. Die Meldung trägt role="alert" und hängt per aria-describedby am
   Feld, damit sie auch ohne Übersicht angesagt wird (WCAG 3.3.1). */
.fluentform .ff-el-is-error .text-danger,
.fluentform .ff-el-is-error .ff-el-form-check-label,
.fluentform .ff-el-is-error .ff-el-form-check-label a,
.upd-form__error {
    color: var(--form-error-color);
    font-size: var(--form-error-font-size);
}

.upd-form__error {
    display: block;
    margin: var(--form-error-gap) 0 0;
    font-weight: 400;
    line-height: var(--form-label-line-height);
}

/* ----------------------------------------------------------------------------
   Meldung nach dem Absenden
   Der graue Kasten von Fluent Forms sagt nicht, ob etwas geklappt hat. Die
   Meldung nimmt deshalb die Hausfarben auf: Grün mit Haken für Erfolg, Rot mit
   Kreuz für einen Fehler. Das Icon ist reine Dekoration – der Text benennt das
   Ergebnis, damit die Unterscheidung nicht allein an der Farbe hängt.
   Die Fehlervariante überschreibt nur die Variablen; die Regeln stehen einmal.
---------------------------------------------------------------------------- */

.upd-form__message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: var(--form-message-gap);
    padding: var(--form-message-padding);
    border: 1px solid var(--form-message-border-color);
    border-radius: var(--form-control-radius);
    box-shadow: var(--form-message-shadow);
    background: var(--form-message-background);
    color: var(--form-label-color);
}

.upd-form__message::before {
    content: "";
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.1rem;
    background: var(--form-message-icon) center / contain no-repeat;
}

.upd-form__message--error {
    --form-message-border-color: var(--form-error-color);
    --form-message-background: #fdeef3;
    --form-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none' stroke='%23ce0f54' stroke-linecap='round' stroke-linejoin='round' stroke-width='18'%3E%3Cpath d='M32.413 32.413l63.174 63.174'/%3E%3Cpath d='M95.587 32.413L32.413 95.587'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   Absende-Button
   Die Hintergrundfarbe stammt weiterhin aus den Button-Vorgaben des Themes
   bzw. der Formulareinstellung; hier stehen nur Form, Größe und Typografie.
---------------------------------------------------------------------------- */

/* Gemeinsames Aussehen aller Formular-Buttons. */
.fluentform .ff-btn-submit,
.upd-form__submit,
.wp-block-search__button {
    /* Der transparente Rahmen hält die Höhe identisch zum Presseverteiler-
       Button, der von Fluent Forms einen 1px-Rahmen erbt. */
    border: 1px solid transparent;
    border-radius: 0;
    font-family: inherit;
    font-weight: var(--form-button-font-weight);
    line-height: 1.5;
    cursor: pointer;
}

/* Absende-Button am Ende eines Formulars: großzügig, steht für sich. */
.fluentform .ff-btn-submit,
.upd-form__submit {
    padding: var(--form-button-padding-block) var(--form-button-padding-inline);
    font-size: var(--form-button-font-size);
}

/* Der Suchbutton steht dagegen unmittelbar neben dem Eingabefeld im selben
   Flex-Container. Er bekommt deshalb dessen Blockpadding und Schriftgröße,
   damit beide exakt gleich hoch sind – mit dem Padding des Absende-Buttons
   würde er das Suchfeld auf über 50px aufblähen. */
.wp-block-search .wp-block-search__button {
    padding: var(--form-control-padding-block) 20px;
    font-size: var(--form-control-font-size) !important;
}

.upd-form__submit:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* Der Presseverteiler zentriert seinen Button (ff-text-center). Eigene
   Formulare erhalten dieselbe Ausrichtung über diesen Modifier. */
.upd-form__actions--center {
    text-align: center;
}