/*
 * Formulare im Frontend.
 *
 * ## Kein einziger Element-Selektor
 *
 * Dieselbe Regel wie im Verleih: kein `h3`, kein `input`, kein `label` —
 * auch nicht innerhalb einer eigenen Klasse.
 *
 * Der Grund: `.pjf-feld input` hätte jedes fremde Eingabefeld erwischt, das
 * jemand später in den Bereich stellt. Und umgekehrt gewinnt eine
 * Theme-Regel wie `.entry-content h3` bei gleicher Spezifität je nach
 * Ladereihenfolge — ein Formular, das nach einem Theme-Update anders
 * aussieht, ist genau die Art Fehler, die niemand einem Plugin zuordnet.
 *
 * ## Zwei Farbwelten: heller und dunkler Untergrund
 *
 * Das Formular steht mal auf weißem Grund, mal auf dem dunkelblauen
 * Hintergrundbild der Kontaktseite. **Eine feste Textfarbe ist deshalb in
 * der Hälfte der Fälle falsch** — im Betrieb standen Beschriftungen in
 * Dunkelgrau auf Dunkelblau und waren praktisch unlesbar.
 *
 * Gelöst wird das nicht mit `color: inherit`: Dann erbt jeder Abschnitt des
 * Themes seine eigene Farbe, und die Hilfetexte standen im Verleih plötzlich
 * in Orange. Stattdessen misst `formulare.js` die Helligkeit des
 * tatsächlichen Untergrunds und setzt `.ist-dunkel`. Beide Fassungen sind
 * hier ausdrücklich festgelegt.
 *
 * **Jede Farbe steht an genau einer Stelle** — als Variable. Zwei Stellen
 * für dieselbe Farbe sind der Anfang davon, dass eine davon vergessen wird.
 */

.pjf-formular {
    /* Heller Untergrund — die Vorgabe */
    --pjf-blau: #0b5394;
    --pjf-blau-hell: #0169c0;
    --pjf-text: #232527;
    /* Deutlich dunkler als der übliche WordPress-Grauton: Der ist auf Weiß
       gerade noch lesbar, auf einem hellgrauen Kasten nicht mehr. */
    --pjf-leise: #4a4f54;
    --pjf-rand: #c9ced3;
    --pjf-kasten: #f4f6f8;
    --pjf-kastentext: #232527;
    --pjf-fehlergrund: #fdf2f2;
    --pjf-rot: #b32d2e;
    --pjf-gruen: #1a7f37;

    /* Die Eingabefelder bleiben in beiden Fassungen hell — auf dem blauen
       Hintergrund sieht das gut aus und hebt sie deutlich ab. Ihre Textfarbe
       hängt deshalb **nicht** an `--pjf-text`; sonst stünde bei dunklem
       Untergrund weiße Schrift in einem weißen Feld. */
    --pjf-feldgrund: #ffffff;
    --pjf-feldtext: #232527;

    --pjf-knopf-grund: #0169c0;
    --pjf-knopf-text: #ffffff;

    /*
     * Die Größen stehen in `rem` und absolut — genau wie in `pjl-katalog`
     * beim Verleih, damit sich beide Plugins auf derselben Seite nicht
     * beißen. `rem` und nicht `em`: `em` multipliziert sich über jede
     * Schachtelung hinweg, und niemand rechnet einem Zwischenschritt an, dass
     * er die Schrift verdoppelt.
     *
     * Die Grundgröße liegt eine Spur über der des Verleihs (1,14 rem): Ein
     * Formular wird gelesen **und** ausgefüllt, und die Beschriftungen sind
     * die einzige Erklärung, was in ein Feld gehört.
     */
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--pjf-text);
}

/*
 * Dunkler Untergrund. Gesetzt von `formulare.js` oder über
 * `[pjf_formular farbe="dunkel"]`.
 */
.pjf-formular.ist-dunkel {
    --pjf-text: #ffffff;
    /* Kein Grau: Auf Dunkelblau wirkt es schmutzig. Ein heller Blauton aus
       derselben Familie bleibt ruhig und ist gut lesbar. */
    --pjf-leise: #c3d6ea;
    --pjf-rand: rgba(255, 255, 255, .45);
    --pjf-kasten: rgba(255, 255, 255, .10);
    --pjf-kastentext: #ffffff;
    --pjf-fehlergrund: rgba(255, 120, 120, .18);
    --pjf-rot: #ff9c9c;
    --pjf-gruen: #6ee7a0;
    --pjf-knopf-grund: #2b8fe0;
}

.pjf-titel {
    margin: 0 0 .7rem;
    font-size: 2rem;
    line-height: 1.25;
    color: var(--pjf-text);
}

.pjf-beschreibung {
    margin-bottom: 1.6rem;
    font-size: 1.12rem;
}

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

.pjf-felder {
    display: grid;
    /* `minmax(0, 1fr)` statt `1fr`: Ohne die Null wird eine Spalte nie
       schmaler als ihr Inhalt, und ein langes Wort sprengt das Raster. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.6rem;
}

.pjf-breite-voll {
    grid-column: 1 / -1;
}

.pjf-breite-halb {
    grid-column: auto;
}

.pjf-feld {
    min-width: 0;
}

/* --- Beschriftungen -------------------------------------------------- */

/*
 * Ausdrücklich sichtbar. Manche Themes verstecken Beschriftungen in
 * Formularen, weil sie mit Platzhaltern arbeiten. Hier sind sie die einzige
 * Erklärung, was in ein Feld gehört — ein Datumsfeld ohne „Von" ist geraten,
 * nicht ausgefüllt. Deshalb `!important`, und nur auf den Eigenschaften, die
 * das Verstecken bewirken.
 */
.pjf-feld-name {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    margin: 0 0 .45rem;
    padding: 0;
    font-weight: 600;
    font-size: 1.14rem;
    line-height: 1.4;
    color: var(--pjf-text);
}

.pjf-stern {
    color: var(--pjf-rot);
}

.pjf-hinweis {
    margin: 0 0 .45rem;
    font-size: 1rem;
    line-height: 1.5;
}

.pjf-zwischen {
    grid-column: 1 / -1;
    margin: 1.2rem 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--pjf-rand);
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--pjf-text);
}

.pjf-erklaerung {
    grid-column: 1 / -1;
    font-size: 1.1rem;
}

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

.pjf-eingabe {
    box-sizing: border-box;
    width: 100%;
    padding: .8rem .95rem;
    border: 1px solid var(--pjf-rand);
    border-radius: 6px;
    background: var(--pjf-feldgrund);
    color: var(--pjf-feldtext);
    font-family: inherit;
    font-size: 1.14rem;
    line-height: 1.45;
}

.pjf-eingabe:focus {
    outline: 3px solid var(--pjf-knopf-grund);
    outline-offset: 1px;
    border-color: var(--pjf-knopf-grund);
}

.pjf-mehrzeilig {
    min-height: 10rem;
    resize: vertical;
}

.ist-beanstandet .pjf-eingabe,
.ist-beanstandet .pjf-wahl {
    border-color: var(--pjf-rot);
}

/* --- Auswahl --------------------------------------------------------- */

.pjf-gruppe {
    margin: 0;
    padding: 0;
    border: 0;
}

.pjf-wahl {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .3rem 0 0;
}

.pjf-wahl-eintrag,
.pjf-haken {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    cursor: pointer;
    /* Zweimal schnell klicken ist ein Doppelklick, und der markiert Text —
       beim zweiten Mal zieht sich die Auswahl über die halbe Liste. */
    user-select: none;
}

/*
 * Die Knöpfe selbst werden mitvergrößert. In der Vorgabe des Browsers sind
 * sie rund 13 Pixel — neben 1,1-rem-Text wirken sie verloren, und am Handy
 * trifft man sie schlecht.
 *
 * `accent-color` färbt den ausgewählten Zustand; ohne sie bleibt er im
 * Systemblau, das neben dem Vereinsblau wie ein Fremdkörper aussieht.
 */
.pjf-wahl-feld,
.pjf-haken-feld {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin: .2rem 0 0;
    accent-color: var(--pjf-knopf-grund);
}

.pjf-wahl-text,
.pjf-haken-text {
    font-size: 1.14rem;
    line-height: 1.5;
    color: var(--pjf-text);
}

/* --- Abhängige Felder ------------------------------------------------ */

/*
 * Versteckt wird über das Attribut, nicht über eine Klasse: Das Skript setzt
 * `hidden`, und ohne Skript bleibt alles sichtbar. Ein Formular, dessen
 * Hälfte ohne Javascript unerreichbar ist, wäre schlicht kaputt — Zeigen ist
 * die harmlose Richtung.
 */
.pjf-abhaengig[hidden] {
    display: none;
}

/* --- Absenden -------------------------------------------------------- */

.pjf-absenden {
    margin-top: 2rem;
}

/*
 * Alle Zustände ausdrücklich gesetzt, mit `.pjf-formular` davor für genügend
 * Spezifität — aber **ohne `!important`**, damit das Aussehen im Theme
 * anpassbar bleibt. Im Verleih verschwand einmal der Rahmen beim Überfahren,
 * weil das Theme eigene `button:hover`-Regeln mitbrachte.
 */
.pjf-formular .pjf-knopf,
.pjf-formular .pjf-knopf:hover,
.pjf-formular .pjf-knopf:focus {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 2.1rem;
    border: 0;
    border-radius: 32px;
    background: var(--pjf-knopf-grund);
    color: var(--pjf-knopf-text);
    font-family: inherit;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.pjf-formular .pjf-knopf:hover {
    background: var(--pjf-blau);
}

.pjf-formular.ist-dunkel .pjf-knopf:hover {
    background: #1c74c0;
}

.pjf-formular .pjf-knopf[disabled] {
    opacity: .7;
    cursor: progress;
}

/*
 * Der zweite Knopf ist bewusst leiser — umrandet statt gefüllt. „Laden und
 * absenden" ist der Weg, den die meisten wollen; „ohne Google" muss da sein,
 * aber nicht werben.
 */
.pjf-formular .pjf-knopf-rand,
.pjf-formular .pjf-knopf-rand:hover,
.pjf-formular .pjf-knopf-rand:focus {
    background: transparent;
    border: 2px solid var(--pjf-knopf-grund);
    color: var(--pjf-knopf-grund);
}

.pjf-formular.ist-dunkel .pjf-knopf-rand,
.pjf-formular.ist-dunkel .pjf-knopf-rand:hover,
.pjf-formular.ist-dunkel .pjf-knopf-rand:focus {
    border-color: #ffffff;
    color: #ffffff;
}

/*
 * Der Kreisel ist reines CSS: Er läuft weiter, während der Browser auf den
 * Server wartet, und braucht keine zweite Datei.
 */
.pjf-kreisel {
    display: none;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: pjf-dreht .7s linear infinite;
}

.pjf-form[data-laeuft] .pjf-kreisel {
    display: inline-block;
}

@keyframes pjf-dreht {
    to { transform: rotate(360deg); }
}

/* Bei abgestellter Bewegung bleibt ein ruhiger Ring stehen — er zeigt
   immer noch, dass etwas läuft. */
@media (prefers-reduced-motion: reduce) {
    .pjf-kreisel { animation: none; }
}

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

.pjf-fehler {
    margin: 0 0 1.4rem;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--pjf-rot);
    background: var(--pjf-fehlergrund);
}

.pjf-fehler-text {
    margin: 0;
    font-size: 1.12rem;
    color: var(--pjf-kastentext);
}

.pjf-mitteilung {
    padding: 1.2rem;
    background: var(--pjf-kasten);
    color: var(--pjf-kastentext);
    font-size: 1.12rem;
}

.pjf-recaptcha-hinweis {
    margin-top: 1.2rem;
    font-size: .92rem;
    line-height: 1.5;
}

/* Verweise im Hinweistext müssen sich abheben — auf Dunkelblau ist das
   Standardblau des Themes praktisch unsichtbar. */
.pjf-formular.ist-dunkel .pjf-recaptcha-verweis {
    color: #ffffff;
    text-decoration: underline;
}

/* --- Die Schranke vor dem Spamschutz --------------------------------- */

.pjf-schranke {
    margin-top: 1.6rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--pjf-rand);
    border-left: 4px solid var(--pjf-knopf-grund);
    border-radius: 6px;
    background: var(--pjf-kasten);
}

.pjf-schranke[hidden] {
    display: none;
}

.pjf-schranke-text {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--pjf-kastentext);
}

.pjf-schranke-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.pjf-schranke-merken {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1rem;
    font-size: 1.05rem;
    cursor: pointer;
    user-select: none;
}

/* --- Die Sperre vor dem Formular ------------------------------------ */

/*
 * Sie steht vor dem Formular, sobald „ohne Freigabe kein Formular" gilt.
 *
 * **Sichtbar ist sie von Anfang an, das Formular daneben traegt `hidden`.**
 * Andersherum — Formular sichtbar, Skript versteckt es — staende das
 * Formular bei abgeschaltetem Javascript offen da, also genau dann, wenn
 * keine Pruefung zustande kommen kann. Deshalb hier auch keine Regel, die
 * die Sperre erst einblendet: Was zaehlt, muss ohne Skript richtig sein.
 */
.pjf-sperre {
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--pjf-rand);
    border-left: 4px solid var(--pjf-knopf-grund);
    border-radius: 6px;
    background: var(--pjf-kasten);
}

.pjf-sperre[hidden] {
    display: none;
}

.pjf-sperre-text {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--pjf-kastentext);
}

.pjf-sperre-text[hidden] {
    display: none;
}

.pjf-sperre-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: 1rem;
}

.pjf-sperre-knoepfe[hidden] {
    display: none;
}

/*
 * Der Verweis, der das Cookie-Banner öffnet, sieht aus wie ein Knopf — also
 * ohne Unterstreichung. `.pjf-knopf` liefert alles Übrige; hier steht nur,
 * was ein `a` mitbringt und ein `button` nicht.
 */
.pjf-formular .pjf-sperre-verweis,
.pjf-formular .pjf-sperre-verweis:hover,
.pjf-formular .pjf-sperre-verweis:focus {
    text-decoration: none;
}

/*
 * Das Formular selbst.
 *
 * `[hidden]` allein genuegt nicht: Manche Themes setzen `form { display:
 * block }`, und eine Elementregel schlaegt die Vorgabe des Browsers fuer
 * `hidden`. Dann staende das Formular trotz Attribut sichtbar da — und die
 * Sperre waere keine.
 */
.pjf-form[hidden] {
    display: none;
}

/* --- Das Abzeichen von Google -------------------------------------- */

/*
 * Das schwebende Zeichen unten rechts wird ausgeblendet.
 *
 * ## Das ist erlaubt — aber nur mit dem Hinweistext
 *
 * Googles Nutzungsbedingungen verlangen **entweder** das sichtbare Abzeichen
 * **oder** einen Hinweis mit Verweis auf Datenschutzerklärung und
 * Nutzungsbedingungen. Den gibt `PJF_Frontend` unter jedem Formular aus, fest
 * im Code und nicht abschaltbar.
 *
 * ## `visibility`, nicht `display: none`
 *
 * Das Abzeichen ist der Anker, an dem reCAPTCHA sein unsichtbares Fenster
 * aufhängt. Wird es aus dem Fluss genommen, bleibt in manchen Fassungen die
 * Punktevergabe stehen — und dann schickt niemand mehr etwas ab, ohne dass
 * ein Fehler zu sehen wäre.
 *
 * ## Nur, solange ein Formular auf der Seite steht
 *
 * Die Regeln hängen an `body.pjf-recaptcha-still`, gesetzt von
 * `formulare.js`. Steht auf derselben Seite ein anderes Plugin mit
 * reCAPTCHA — das seinen Hinweistext womöglich nicht ausgibt —, blenden wir
 * ihm sein Abzeichen nicht mit weg.
 *
 * Regeln auf fremde Klassen sind sonst tabu; hier ist es der einzige Weg,
 * weil reCAPTCHA seine Lage unmittelbar am Element setzt.
 */
body.pjf-recaptcha-still .grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    right: -9999px !important;
    pointer-events: none !important;
}

/* --- Dankeseite ------------------------------------------------------ */

/*
 * Mindesthöhe, sonst endet die Seite mitten im Bildschirm und unter der
 * Fußzeile bleibt ein weißer Streifen stehen — das sieht nach einem Fehler
 * aus.
 */
.pjf-danke {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    min-height: 50vh;
    text-align: center;
}

.pjf-danke-text {
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--pjf-text);
}

.pjf-haken-zeichen {
    width: 84px;
    height: 84px;
}

.pjf-haken-kreis {
    stroke: var(--pjf-gruen);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: pjf-zeichnet .6s ease-out forwards;
}

.pjf-haken-strich {
    stroke: var(--pjf-gruen);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: pjf-zeichnet .3s .5s ease-out forwards;
}

@keyframes pjf-zeichnet {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pjf-haken-kreis,
    .pjf-haken-strich {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* --- Der Honigtopf --------------------------------------------------- */

/*
 * `position:absolute` weit außerhalb des Bildes, **nicht** `display:none`:
 * Manche Ausfüllprogramme prüfen darauf und lassen versteckte Felder stehen.
 *
 * `!important`, weil ein Theme sonst mit einer eigenen Regel auf
 * Formularfelder den Topf sichtbar machen könnte — und ein sichtbares Feld
 * „Website (bitte frei lassen)" füllt irgendwann jemand aus.
 */
.pjf-topf {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* --- Große Bildschirme ----------------------------------------------- */

/*
 * Ab 1500 Pixeln wird alles eine Stufe größer. Auf einem 27-Zoll-Monitor
 * wirkte es zu klein, auf Laptop und Handy passte es — darunter bleibt
 * deshalb alles unverändert. Dieselbe Schwelle und dieselbe Bauweise wie im
 * Verleih, damit beide Plugins auf einer Seite gleich wirken.
 *
 * **Jede Klasse mit eigener Schriftgröße muss hier auftauchen.** Sonst
 * wächst alles Übrige und eine Stelle bleibt klein — im Verleih waren das
 * die Dankeseite und die Absendeanzeige, beide beim Ergänzen vergessen.
 * `formulartest.php` hält deshalb jede Regel mit `font-size` gegen den Inhalt
 * dieser Media Query.
 */
@media (min-width: 1500px) {
    .pjf-formular { font-size: 1.32rem; }
    .pjf-titel { font-size: 2.4rem; }
    .pjf-beschreibung { font-size: 1.25rem; }
    .pjf-feld-name { font-size: 1.28rem; }
    .pjf-hinweis { font-size: 1.12rem; }
    .pjf-zwischen { font-size: 1.7rem; }
    .pjf-erklaerung { font-size: 1.22rem; }
    .pjf-eingabe { font-size: 1.28rem; padding: .9rem 1.05rem; }
    .pjf-wahl-text,
    .pjf-haken-text { font-size: 1.28rem; }
    .pjf-wahl-feld,
    .pjf-haken-feld { width: 1.55rem; height: 1.55rem; }
    .pjf-formular .pjf-knopf { font-size: 1.32rem; padding: .95rem 2.3rem; }
    .pjf-kreisel { width: 1.3rem; height: 1.3rem; }
    .pjf-fehler-text { font-size: 1.25rem; }
    .pjf-mitteilung { font-size: 1.25rem; }
    .pjf-recaptcha-hinweis { font-size: 1.02rem; }
    .pjf-schranke-text { font-size: 1.22rem; }
    .pjf-sperre-text { font-size: 1.22rem; }
    .pjf-schranke-merken { font-size: 1.15rem; }
    .pjf-danke-text { font-size: 1.5rem; }
    .pjf-haken-zeichen { width: 96px; height: 96px; }
}

/* --- Handy ----------------------------------------------------------- */

/*
 * Die Media Query steht NACH den Grundregeln und nach der für große
 * Bildschirme. Eine Media Query gewinnt nicht durch ihre Bedingung, sondern
 * nur durch die Reihenfolge — bei gleicher Spezifität zählt allein, was
 * später steht.
 */
@media (max-width: 600px) {
    /* Am Handy eine Spur kleiner — dort zählt jeder Millimeter Bildschirm. */
    .pjf-formular { font-size: 1.1rem; }
    .pjf-titel { font-size: 1.7rem; }
    .pjf-zwischen { font-size: 1.3rem; }
    .pjf-feld-name { font-size: 1.08rem; }
    .pjf-eingabe { font-size: 1.08rem; }
    .pjf-wahl-text,
    .pjf-haken-text { font-size: 1.08rem; }

    .pjf-felder {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.2rem;
    }

    .pjf-breite-halb {
        grid-column: 1 / -1;
    }

    .pjf-formular .pjf-knopf {
        width: 100%;
        justify-content: center;
    }

    .pjf-schranke-knoepfe .pjf-knopf,
    .pjf-sperre-knoepfe .pjf-knopf {
        width: 100%;
    }
}

/* --- Gedämpfte Texte ------------------------------------------------- */

/*
 * Gesammelt am Ende, in einer Regel mit `!important`. Das ist das mildere
 * Mittel gegenüber immer längeren Selektoren, und es steht ausdrücklich
 * **nur auf der Farbe** — Größe, Abstände und alles Übrige bleiben im Theme
 * anpassbar. Im Betrieb standen solche Texte sonst in Orange, weil das Theme
 * eine eigene Farbe für Hilfetexte mitbrachte.
 */
.pjf-formular .pjf-hinweis,
.pjf-formular .pjf-leise,
.pjf-formular .pjf-recaptcha-hinweis {
    color: var(--pjf-leise) !important;
}

/* Farben, die etwas bedeuten — sie müssen die Sammelregel überstimmen. */
.pjf-formular .pjf-stern {
    color: var(--pjf-rot) !important;
}

/*
 * Die Beschriftungen ebenso ausdrücklich: Themes setzen für Formularlabels
 * gern eine eigene Farbe, und auf dunklem Grund war das der Grund, warum
 * „Worum geht es?" fast unsichtbar war.
 */
.pjf-formular .pjf-feld-name,
.pjf-formular .pjf-wahl-text,
.pjf-formular .pjf-haken-text,
.pjf-formular .pjf-titel,
.pjf-formular .pjf-zwischen {
    color: var(--pjf-text) !important;
}