/* ===========================================================================
   Captcha-Darstellung
   ===========================================================================

   Eigene Datei, weil die uebrigen Stilvorlagen unter Css/dist/ minimiert
   vorliegen und die zugehoerigen Quellen nicht im Projekt sind - dort etwas
   einzutragen waere beim naechsten Neubau verloren. Eingebunden wird sie in
   Configuration/TypoScript/setup.typoscript unter includeCSS.30, also nach
   style.min.css, damit die Regeln hier gewinnen.

   Zwei verschiedene Captchas sind im Einsatz:

     1. sr_freecap        - Registrierung im Mitgliederbereich
                            (kommt aus sr_feuser_register)
     2. bw_captcha        - Formulare auf Basis von EXT:form,
                            u.a. die Newsletter-Anmeldung

   Beide waren ohne Regeln. Bei 1 fiel es auf, bei 2 nicht - weil dort die
   Symbole eingebettete SVG in <a>-Elementen sind und deshalb von der
   allgemeinen Formularregel verschont bleiben.

   --------------------------------------------------------------------------
   1. Registrierung (sr_freecap)
   --------------------------------------------------------------------------

   Der Aufbau der Extension ist:

     <div class="tx-srfeuserregister-pi1-field">
       <input type="text" name="FE[fe_users][captcha_response]">
       <img   class="tx-srfreecap-pi1-image">
       <span  class="tx-srfreecap-pi1-cant-read">Wenn Sie ... <a>hier</a>.</span>
       <input type="image" class="tx-srfreecap-pi1-image-accessible">  <- Audio
       <span  class="tx-srfreecap-pi1-accessible"></span>              <- Player
     </div>

   Der Audio-Knopf ist ein <input type="image">. In style.min.css steht

     input, select, textarea { display: block; width: 100%; height: 2.125rem }

   und das trifft ihn mit: er stand dadurch blockweise UNTER dem Hinweistext
   und ueber die volle Spaltenbreite gezogen.

   Die Reihenfolge im Markup laesst sich nicht aendern, ohne die Vorlage der
   Extension anzufassen. Deshalb hier ein flex-Verbund mit "order": Bild und
   Audio-Knopf nebeneinander, der Hinweistext darunter. Eingegrenzt ueber
   :has() auf genau das Feld, in dem ein Captcha-Bild steckt - die Klasse
   .tx-srfeuserregister-pi1-field tragen naemlich alle Felder des Formulars.
   -------------------------------------------------------------------------- */

.tx-srfeuserregister-pi1-field:has(.tx-srfreecap-pi1-image) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
}

/* Eingabefeld auf eine eigene Zeile, darunter Bild und Knopf */
.tx-srfeuserregister-pi1-field:has(.tx-srfreecap-pi1-image) > input[type="text"] {
    order: 1;
    flex: 0 0 100%;
}

.tx-srfeuserregister-pi1-field img.tx-srfreecap-pi1-image {
    order: 2;
    display: block;
    max-width: 200px;
    height: auto;
    margin: 0;
}

/* Der Audio-Knopf. width/height/display muessen ausdruecklich zurueck-
   genommen werden, sonst greift die allgemeine input-Regel. background und
   border ebenso - ein input bekommt dort einen Rahmen und weissen Grund.

   Das Symbol ist Icons/captcha-audio.svg, dieselbe Zeichnung wie im
   Newsletter-Formular; eingetragen unter accessibleOutputImage in
   Plugins.typoscript. Hoehe in px und nicht in rem, damit sie unabhaengig von
   der Grundschriftgroesse zu den Symbolen dort passt (28 px). */
.tx-srfeuserregister-pi1-field input.tx-srfreecap-pi1-image-accessible {
    order: 3;
    display: inline-block;
    width: auto;
    height: 28px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* Hinweis "Wenn Sie das Wort nicht lesen koennen" unter Bild und Knopf */
.tx-srfeuserregister-pi1-field .tx-srfreecap-pi1-cant-read {
    order: 4;
    flex: 0 0 100%;
    margin: 0;
}

/* Nimmt das <audio>-Element auf, das das Skript der Extension nachtraegt.
   Leer und ohne Hoehe, solange nichts abgespielt wird. */
.tx-srfeuserregister-pi1-field .tx-srfreecap-pi1-accessible {
    order: 5;
    flex: 0 0 100%;
}

.tx-srfeuserregister-pi1-field .tx-srfreecap-pi1-accessible audio {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   2. EXT:form-Formulare (bw_captcha)
   ---------------------------------------------------------------------------

   Aufbau:

     <div class="captcha">
       <img src="...?type=3413">
       <a class="captcha__reload"><svg .../></a>
       <a class="captcha__audio"><svg .../></a>
     </div>

   bw_captcha bringt keine eigene Stilvorlage mit; fuer .captcha__reload und
   .captcha__audio gab es nirgends eine Regel. Die vorhandenen Regeln in
   style.min.css hoeren auf .form-input-wrapper.captcha - dieser Rahmen kommt
   aus den alten Powermail-Vorlagen und steht bei EXT:form nicht drumherum.

   ACHTUNG BEI DER HOEHE

   Die Reload-SVG ist als <svg width="31" height="28"> ohne viewBox
   ausgezeichnet. Eine Hoehenangabe per CSS verkleinert dort nur das Fenster,
   nicht die Zeichnung - das Symbol wird also abgeschnitten. Deshalb bleibt sie
   bei ihren eigenen Massen, und die beiden Audio-Symbole richten sich mit
   28 px danach. Die Audio-SVG hat ein viewBox und laesst sich daher skalieren.

   ZUSTAENDE DES AUDIO-KNOPFS

   Das Skript der Extension (Captcha.js, handleAudioClick) setzt beim Abspielen
   die Klasse captcha--playing auf den Rahmen und nimmt sie beim Anhalten sowie
   am Ende wieder weg. Die SVG bringt dafuer zwei Gruppen mit,
   captcha__audio__sound (Schallwellen) und captcha__audio__mute
   (durchgestrichen).

   Regeln dafuer gab es keine - also wurden Lautsprecher, Wellen UND der
   Strich gleichzeitig gezeichnet, alles uebereinander.

   Zuordnung hier: im Ruhezustand die Wellen, weil der Knopf dann zum Abspielen
   auffordert und weil das Symbol der Registrierung genauso aussieht. Waehrend
   des Abspielens der durchgestrichene Lautsprecher - ein Klick haelt dann an.
   -------------------------------------------------------------------------- */

.captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
    margin: 0.5em 0;
}

.captcha > img {
    display: block;
    max-width: 200px;
    height: auto;
    margin: 0;
}

.captcha__reload,
.captcha__audio {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Die Reload-SVG bleibt bei ihren eigenen Massen - ohne viewBox wuerde jede
   CSS-Hoehe die Zeichnung abschneiden. Begruendung oben. */
.captcha__audio svg {
    width: auto;
    height: 28px;
}

/* Ruhezustand: Lautsprecher mit Schallwellen, kein Strich */
.captcha__audio__mute {
    display: none;
}

/* Waehrend des Abspielens umgekehrt - ein Klick haelt an */
.captcha--playing .captcha__audio__mute {
    display: inline;
}

.captcha--playing .captcha__audio__sound {
    display: none;
}

/* Das Skript setzt captcha--spin fuer 400 ms, wenn ein neues Bild geholt
   wird, und captcha--reloading fuer die Dauer des Ladens. Auch dafuer gab es
   keine Regeln, die Rueckmeldung fehlte also ganz. */
.captcha--spin .captcha__reload svg {
    animation: captcha-spin 0.4s linear;
}

@keyframes captcha-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.captcha--reloading > img {
    opacity: 0.5;
}

/* Wer keine Bewegung sehen moechte, bekommt keine */
@media (prefers-reduced-motion: reduce) {
    .captcha--spin .captcha__reload svg {
        animation: none;
    }
}