/*
 * Coming-Soon-Formular.
 *
 * Nachgebaut nach dem bestehenden Formular der US-Seite, damit es sich in
 * die Seite einfuegt: transparenter Grund, kein Rahmen, nur eine Unterlinie.
 * Die Vorlage sind die .wpcf7-Regeln aus style.min.css -- unser Formular
 * traegt diese Klasse nicht, deshalb stehen die Werte hier noch einmal.
 *
 * Bis zum 23.09.2026 stand hier fast nichts, in der Annahme, das Theme
 * liefere die Gestaltung. Das tut es nur fuer Contact-Form-7-Formulare; ein
 * eigenes Markup bekommt die Browser-Vorgaben -- graue Kaesten mit
 * Innenrahmen, mitten in einer Seite, die keine hat.
 *
 * Werte, die aus dem Theme kommen und deshalb nicht erfunden sind:
 *
 *   Linie        1px solid #101010   (.wpcf7 input)
 *   Fokus        #32a0df             (.wpcf7 input:focus)
 *   Fehler       #FF612F             (.wpcf7-not-valid-tip)
 *   Zeilenhoehe  1.8em               (.wpcf7 input)
 *
 * ZWEI FALLEN DIESES THEMES, beide am 23.09.2026 gemessen:
 *
 *   1. html steht auf 10px Grundschrift, nicht 16. Jede rem-Angabe faellt
 *      damit um den Faktor 1,6 zu klein aus -- 1.125rem sind hier 11px. Die
 *      Abstaende stehen deshalb in px und em, nicht in rem.
 *
 *   2. Das Theme setzt JEDER Checkbox in JEDEM Formular:
 *
 *        form input[type="checkbox"] {
 *          width: 30px; height: 13px !important;
 *          position: absolute; top: 0; left: 1px; }
 *
 *      Beides trifft ein eigenes Formular voll: Die Checkbox wird aus dem
 *      Fluss gerissen (beim ersten Versuch stand sie 400 Pixel daneben), und
 *      die Hoehe laesst sich nicht setzen -- 22px wurden zu 13, ohne dass
 *      eine lesbare Regel dafuer zu finden war. Das !important ist der
 *      einzige Grund, warum unten eines steht; es ist keine Bequemlichkeit.
 *
 * Alle Klassen tragen das Praefix pg-ryi-, damit nichts kollidiert.
 */

/*
 * Sechs Spalten, nicht drei.
 *
 * Die meisten Felder stehen zu dritt in einer Zeile (span 2 = ein Drittel).
 * Die letzte Zeile hat nur zwei -- Eircode und Stadt --, und die sollen sich
 * die Breite teilen (span 3 = die Haelfte). Mit einem Dreierraster ginge das
 * nicht: Ein Feld liesse sich nicht ueber anderthalb Spalten spannen.
 */
.pg-ryi {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 36px;
    width: 100%;
    /* Dieselbe Grenze wie die uebrigen Inhaltsbereiche des Themes
       (.main.footer .container, .header_menu #menu). Ohne sie laeuft das
       Formular in einer WPBakery-Spalte ohne eigene Begrenzung bis zum
       Fensterrand und darueber hinaus. */
    max-width: 1045px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /*
     * Ueber nachfolgende Elemente legen.
     *
     * Die Seite kann Baukasten-Zeilen mit negativem Abstand enthalten --
     * auf der irischen Coming-Soon-Seite traegt eine
     * margin-top: -170px !important und schob sich damit ueber den
     * Absendeknopf. Der Knopf war sichtbar, aber nicht anklickbar; der
     * Klick landete im daruberliegenden Kasten.
     */
    position: relative;
    z-index: 1;
}

/* Ein Drittel: alle Felder ausser den beiden letzten. */
.pg-ryi-feld {
    grid-column: span 2;
}

/*
 * Die letzte Zeile haengt davon ab, ob nach dem Geschlecht gefragt wird.
 *
 * Ohne das Feld sind es zwei: Eircode und Stadt teilen sich die Breite
 * (span 3 = die Haelfte), so wie bis zum 12.10.2026. Mit dem Feld sind es
 * drei, also dasselbe Drittel wie ueberall sonst -- und dafuer genuegt es,
 * die Haelften-Regel nicht anzuwenden.
 *
 * Unterschieden wird an der Klasse am Formular, nicht an :has() -- das
 * koennen aeltere Browser nicht, und eine Zeile mit einer Luecke ist
 * genau die Art Fehler, die niemand meldet.
 */
.pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-zip,
.pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-city {
    grid-column: span 3;
}

/*
 * ACHTUNG, SPEZIFITAET. Die Regel oben hat durch :not() und den
 * Elternselektor mehr Gewicht als die schmalen Raster weiter unten. In CSS
 * schlaegt Gewicht die Reihenfolge -- ohne denselben Selektor dort unten
 * bliebe auf Mobilgeraeten span 3 stehen, und das sind bei zwei oder einer
 * Spalte mehr Spalten, als es gibt. Am 12.10.2026 genau so gemessen:
 * Eircode und Stadt liefen bei 860 px ueber die volle Breite.
 *
 * Deshalb tragen die Medienabfragen unten denselben Selektor. Wer hier
 * etwas aendert, muss sie mitziehen.
 */

/* Volle Breite -- das Studiofeld steht in der Reihe, wie im Original. */
.pg-ryi-consent,
.pg-ryi-consent-intro,
.pg-ryi-consent-outro,
.pg-ryi-absenden,
.pg-ryi-meldung {
    grid-column: 1 / -1;
}

@media (max-width: 992px) {
    .pg-ryi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pg-ryi-feld,
    .pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-zip,
    .pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-city {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .pg-ryi {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .pg-ryi-feld,
    .pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-zip,
    .pg-ryi:not(.pg-ryi-mit-gender) .pg-ryi-city {
        grid-column: span 1;
    }
}

.pg-ryi-feld {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Raum fuer das Label, wenn es nach oben wandert. */
    padding-top: 18px;
}

/* Die Einwilligung hat kein wanderndes Label -- dort ist das Label der
   sichtbare Text. */
.pg-ryi-consent,
.pg-ryi-consent-intro,
.pg-ryi-consent-outro,
.pg-ryi-absenden,
.pg-ryi-meldung {
    padding-top: 0;
}

/*
 * Freitext ueber und unter den Einwilligungen (09.10.2026).
 *
 * OHNE grid-column waren die beiden Bloecke auf ein Sechstel der Breite
 * gequetscht: .pg-ryi ist ein Raster mit sechs Spalten, und wer keine
 * Spaltenangabe hat, bekommt eine. Deshalb stehen sie oben bei den
 * Elementen, die ueber die volle Breite laufen.
 *
 * Die Absaetze kommen aus dem Editor und brauchen eigene Abstaende -- das
 * Theme setzt im Formular keine. Der erste Absatz traegt keinen Abstand nach
 * oben, der letzte keinen nach unten; dafuer sorgt der Block selbst fuer
 * Luft zu seinen Nachbarn.
 */
.pg-ryi-consent-intro {
    margin-top: 24px;
    margin-bottom: 4px;
}

.pg-ryi-consent-outro {
    margin-top: 20px;
}

.pg-ryi-consent-intro > :first-child,
.pg-ryi-consent-outro > :first-child { margin-top: 0; }

.pg-ryi-consent-intro > :last-child,
.pg-ryi-consent-outro > :last-child { margin-bottom: 0; }

.pg-ryi-consent-intro p,
.pg-ryi-consent-outro p {
    margin: 0 0 10px;
    line-height: 1.5;
}

/* Ueberschriften, falls im Editor als solche gesetzt. */
.pg-ryi-consent-intro h2,
.pg-ryi-consent-intro h3,
.pg-ryi-consent-intro h4 {
    margin: 0 0 8px;
    font-weight: 700;
    line-height: 1.3;
}

/*
 * Der Schlussabsatz ist Kleingedrucktes -- Widerruf, Kontaktadresse,
 * Verweis aufs Privacy Notice. Eine Stufe kleiner und etwas zurueckgenommen,
 * damit er die Haken nicht ueberstrahlt, aber lesbar bleibt.
 */
.pg-ryi-consent-outro {
    font-size: 0.875em;
    opacity: 0.85;
}

/* Verweise wie in den Einwilligungstexten darunter -- dieselbe Regel, keine
   zweite Gestaltung. */
.pg-ryi-consent-intro a,
.pg-ryi-consent-outro a {
    text-decoration: underline;
}

/*
 * Beschriftung nur fuer Screenreader.
 *
 * Sichtbar steht sie im Platzhalter, wie im Original. Ein Platzhalter allein
 * ist aber keine Beschriftung -- er verschwindet beim Tippen und wird von
 * Vorleseprogrammen unterschiedlich behandelt. Deshalb bleibt das Label im
 * Markup.
 *
 * Eigene Klasse statt einer Regel auf alle Labels: Das Label der
 * Einwilligung IST der sichtbare Text, und eine Regel, die man an anderer
 * Stelle wieder zuruecknehmen muss, geht irgendwann schief. Genau das ist am
 * 23.09.2026 passiert -- die Checkbox stand 400 Pixel neben dem Formular,
 * weil die Ruecknahme nicht griff.
 */
.pg-ryi-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Das wandernde Label.
 *
 * Im Ruhezustand liegt es ueber der Eingabezeile und sieht aus wie ein
 * Platzhalter; sobald das Feld Fokus oder Inhalt hat, rueckt es darueber und
 * wird klein und fett. Die Werte sind die des Themes (.wpcf7 .placeholder
 * und die Regel dazu): top -20px, 10px, bold, 0.5s.
 *
 * Erkannt wird „hat Inhalt" ueber :placeholder-shown -- deshalb traegt jedes
 * Feld placeholder=" " mit einem Leerzeichen. Kein JavaScript noetig; die
 * Klasse pg-ryi-oben setzt nur, was von vornherein oben stehen soll
 * (Datumsfelder, siehe form.php).
 */
.pg-ryi-label {
    position: absolute;
    top: 18px;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 0.4em;
    line-height: 1.8em;
    color: inherit;
    /* Ausdruecklich normal: Bootstrap setzt label auf bold, und im
       Ruhezustand soll das Label wie ein Platzhalter aussehen -- fett wird
       es erst, wenn es nach oben wandert. */
    font-weight: 400;
    cursor: text;
    transition: top 0.3s ease, font-size 0.3s ease, font-weight 0.3s ease, padding-top 0.3s ease;
}

.pg-ryi input:focus ~ .pg-ryi-label,
.pg-ryi input:not(:placeholder-shown) ~ .pg-ryi-label,
.pg-ryi-oben .pg-ryi-label {
    top: 0;
    padding-top: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
}

/* ── Eingabefelder ──────────────────────────────────────────────────── */

.pg-ryi input:not([type="checkbox"]),
.pg-ryi select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0.4em 0;
    line-height: 1.8em;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #101010;
    border-radius: 0;
    outline: none;
    color: inherit;
    font: inherit;
}

/* Den eigenen Pfeil des Betriebssystems abschalten -- im Original ist das
   Auswahlfeld von einem Textfeld nicht zu unterscheiden. */
.pg-ryi select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pg-ryi input:focus,
.pg-ryi select:focus {
    border-bottom-color: #32a0df;
    caret-color: #add9f2;
}

.pg-ryi input::placeholder {
    color: inherit;
    opacity: 1;
}

/* Gesperrt, solange die Postleitzahl keine Orte geliefert hat. */
.pg-ryi select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Das Datumsfeld zeigt im leeren Zustand „tt.mm.jjjj" statt eines
   Platzhalters -- das ist der Browser, nicht wir. Hoehe angleichen, damit es
   nicht aus der Reihe faellt. */
.pg-ryi input[type="date"] {
    min-height: calc(1.8em + 0.8em);
}

.pg-ryi-ungueltig {
    border-bottom-color: #FF612F;
}

/* ── Einwilligung ───────────────────────────────────────────────────── */

/* Abstand zu den Feldern darueber: Die Einwilligung ist keine weitere
   Eingabe, sondern eine Zustimmung -- sie soll nicht daran kleben. */
.pg-ryi-consent {
    margin-top: 16px;
}

.pg-ryi-consent > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
}

/*
 * Die Checkbox wird selbst gezeichnet.
 *
 * Mit appearance:auto bleibt sie der Kontrolle entzogen: Das Theme setzt
 * ueber form input[type="checkbox"] Breite und position, die Hoehe laesst
 * sich gar nicht setzen (13px, egal was in der Regel steht), und das
 * Ergebnis unterscheidet sich zwischen Browsern. Mit appearance:none ist
 * das Element ein gewoehnliches Kaestchen, dessen Groesse, Rahmen und
 * Haken hier stehen.
 *
 * Das Haekchen ist ein gedrehtes L aus zwei Rahmenkanten -- kein Bild, kein
 * Zeichensatz, nichts, was nachgeladen werden muss.
 */
.pg-ryi-consent input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* position: das Theme setzt hier absolute -- siehe Kopf. */
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 22px;
    /* !important gegen das !important des Themes -- siehe Kopf, Punkt 2. */
    height: 22px !important;
    margin: 1px 0 0;
    padding: 0;
    border: 1px solid #101010;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pg-ryi-consent input[type="checkbox"]:checked {
    background-color: #00999d;
    border-color: #00999d;
}

.pg-ryi-consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Tastaturbedienung sichtbar halten -- ohne den Standardrahmen des
   Browsers waere der Fokus sonst unsichtbar. */
.pg-ryi-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid #00999d;
    outline-offset: 2px;
}

/* Nicht erfuellte Pflicht-Einwilligung. */
.pg-ryi-consent input.pg-ryi-ungueltig {
    border-color: #FF612F;
}

.pg-ryi-consent-text a {
    text-decoration: underline;
}

/* Das Sternchen am Pflichthaken -- kein Abstand davor, es gehoert an den
   Text wie bei "Firstname*". */
.pg-ryi-pflicht {
    margin-left: 1px;
}

/* ── Warten ─────────────────────────────────────────────────────────── */

/*
 * Waehrend eine Abfrage bei Exerp laeuft.
 *
 * Der Kreis steht dort, wo das ERGEBNIS erscheint -- bei der Ortssuche an
 * der Stadtauswahl, bei der Nummernpruefung am Telefonfeld. Nicht dort, wo
 * zuletzt getippt wurde: Gewartet wird auf die Stadt, nicht auf die
 * Postleitzahl.
 *
 * Grau und klein, weil es eine Nebensache ist. Eine Abfrage dauert
 * ueblicherweise unter einer Sekunde; der Kreis soll sagen „es passiert
 * etwas", nicht die Aufmerksamkeit auf sich ziehen.
 */
.pg-ryi-laedt::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 12px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #d5d5d5;
    border-top-color: #8a8a8a;
    border-radius: 50%;
    animation: pg-ryi-dreh 0.7s linear infinite;
    pointer-events: none;
}

@keyframes pg-ryi-dreh {
    to { transform: rotate(360deg); }
}

/*
 * Wer Bewegung abbestellt hat, bekommt sie nicht -- der Kreis bleibt aber
 * stehen und zeigt weiterhin an, dass etwas laeuft. Ein Ladezustand ganz
 * wegzulassen waere schlechter als ein unbewegter.
 */
@media (prefers-reduced-motion: reduce) {
    .pg-ryi-laedt::after {
        animation: none;
        border-top-color: #d5d5d5;
        border-right-color: #8a8a8a;
    }
}

/* ── Fehler ─────────────────────────────────────────────────────────── */

.pg-ryi-fehler {
    display: none;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    color: #FF612F;
}

.pg-ryi-fehler-an {
    display: block;
}

/* ── Absenden ───────────────────────────────────────────────────────── */

/*
 * Der Knopf steht abgesetzt unter den Feldern: Er schliesst den Vorgang ab
 * und gehoert nicht in die Reihe der Eingaben.
 */
.pg-ryi-absenden {
    margin-top: 12px;
    text-align: center;
}

/*
 * Der Knopf traegt zusaetzlich btn und btn-primary. Wo dieses Theme laeuft,
 * kommt sein Aussehen von dort -- samt der Hover-Animation aus dem
 * PG-SWEEP-Block. Was hier steht, ist der Rueckfall fuer jede andere
 * Installation und deckt sich mit den Werten des Themes.
 */
.pg-ryi-knopf {
    display: inline-block;
    min-width: 192px;
    height: 40px;
    padding: 0 32px;
    border: 0;
    border-radius: 59px;
    background-color: #00999d;
    color: #fff;
    font-size: 18px;
    line-height: 40px;
    font-weight: 700;
    cursor: pointer;
}

/*
 * Wandernder Verlauf beim Hover -- dieselbe Bewegung wie bei allen anderen
 * Knoepfen der Seite (PG-SWEEP in style.min.css, Konvention laut CLAUDE.md).
 *
 * Nachgebaut statt uebernommen: Der Block im Theme zaehlt seine Selektoren
 * einzeln auf und muesste fuer jeden neuen Knopf erweitert werden -- in zwei
 * Dateien, die synchron bleiben muessen. Hier steht er beim Knopf, den er
 * betrifft, und wandert mit dem Plugin auf jede Installation.
 *
 * Ein Verlauf doppelter Breite mit den Stopps ENDE, START, ENDE: im
 * Ruhezustand liegt die rechte Haelfte im Bild, beim Hover die linke.
 * Animiert wird nur background-position -- kein JavaScript, keine Keyframes.
 */
/*
 * !important ist hier Pflicht, nicht Bequemlichkeit.
 *
 * Das Theme setzt fuer .btn.btn-primary und fuer .btn:hover jeweils
 * `background: #00999d !important`. Das ist eine KURZFORM -- sie setzt
 * background-image auf none zurueck. Ohne Gegengewicht verschwindet der
 * Verlauf beim Hover, und weil der Uebergang 0,3s laeuft, sieht es aus, als
 * schrumpfe der Knopf. Tatsaechlich faellt der Verlauf zusammen.
 *
 * Der PG-SWEEP-Block im Theme loest dasselbe Problem auf dieselbe Weise und
 * begruendet es genauso (style.min.css, Abschnitt "Warum !important").
 *
 * Und der Selektor muss .btn.btn-primary schlagen: Bei gleichem !important
 * entscheidet die Spezifitaet, und zwei Klassen gewinnen gegen eine. Daher
 * .pg-ryi button.pg-ryi-knopf statt .pg-ryi-knopf.
 */
.pg-ryi .btn-primary.btn.pg-ryi-knopf {
    /*
     * Groesse festnageln. Bootstrap aendert beim Betaetigen Innenabstand
     * und Rahmen (.btn:active, :focus), und der Knopf sprang dabei in der
     * Groesse. Mit festen Werten und !important bleibt er, wo er ist --
     * die abgeloesten Regeln stehen ihrerseits mit !important da.
     */
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 32px !important;
    border: 0 !important;
    box-shadow: none !important;
    /* Auch die Schrift: Bootstrap setzt sie beim Betaetigen neu, und der
       Knopf sprang dabei in der Breite. */
    font-size: 20px !important;
    font-weight: 700 !important;
    background-color: #00999D !important;
    background-image: linear-gradient(90deg, #00999D, #00B7BC, #00999D) !important;
    background-size: 200% 100% !important;
    background-position: 100% 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
    .pg-ryi-knopf {
        transition: background-position 0.3s ease;
    }
}

.pg-ryi .btn-primary.btn.pg-ryi-knopf:hover,
.pg-ryi .btn-primary.btn.pg-ryi-knopf:focus,
.pg-ryi .btn-primary.btn.pg-ryi-knopf:active {
    background-position: 0 0 !important;
    color: #fff !important;
}

/*
 * Gesperrt, solange Pflichtfelder fehlen.
 *
 * Bewusst nicht ausgegraut bis zur Unkenntlichkeit: Der Knopf soll zeigen,
 * dass es ihn gibt und wohin die Reise geht. Was fehlt, steht am jeweiligen
 * Feld -- ein gesperrter Knopf ohne Begruendung ist die schlechtere
 * Variante.
 */
.pg-ryi .btn-primary.btn.pg-ryi-knopf[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    background-position: 100% 0 !important;
}

/* Waehrend des Absendens. */
.pg-ryi-knopf.pg-ryi-laeuft {
    cursor: progress;
}

/* ── Meldungen ──────────────────────────────────────────────────────── */

.pg-ryi-meldung:empty {
    display: none;
}

.pg-ryi-meldung-fehler {
    padding: 12px 16px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
}

.pg-ryi-danke-inhalt {
    text-align: center;
}

/* Nur fuer Redakteure sichtbar: fehlende Konfiguration. */
.pg-ryi-hinweis {
    padding: 16px;
    border: 1px solid #d6a300;
    border-radius: 8px;
    background: #fff8e1;
}