/* ============================================================
   ATG-Gigerl - Feedback-Formular
   Liegt unter: fileadmin/templates/css/feedback.css
   Stand: 29.09.2026 - neu

   Layout 36 "Feedback"   .atg-feedback
   Kommt auf das Formular-Element (ext:form) der Seite
   "Feedback zur Website" (ID 159, /feedback). Das Textelement
   darueber steht auf Layout 29 "Einleitung hell"; beide Baender
   laufen ohne Naht ineinander. Das Formular steht als weisse
   Karte mit Kante links darauf, wie die Kontaktkarte.

   Markup, am 29.09.2026 im DOM der Live-Vorschau nachgesehen:

     div.form-container
       form
         fieldset.form-element.form-element-radio
           legend.visually-hidden     Frage + span.required
           div[role=radiogroup]
             div.form-check (5x)
               label.form-check-wrapping-label
                 input.form-check-input[type=radio]   Wert 1-5
                 span.form-check-label   "1 von 5 Sternen" ...
         div.form-element.form-element-textarea
           label.form-label + textarea.form-control
         input (Honigtopf, von ext:form versteckt)
         div.form-element.form-element-email
           label.form-label + input.form-control
         div.form-element.form-element-check
           label.form-check-wrapping-label
             input.form-check-input[type=checkbox]
             span.form-check-label   Text + span.required
         div.form-actions > nav.form-navigation > button.btn

   Die Sterne sind die fuenf Radiobuttons. Sie bleiben echte
   Eingabefelder (unsichtbar ueber dem Stern), die Beschriftung
   bleibt fuer Screenreader lesbar. Damit funktioniert das Feld
   mit Tastatur (Pfeiltasten), mit Screenreader und ohne
   JavaScript. Gefuellt wird per :has() - der gewaehlte Stern
   und alle davor.

   Muss NACH tokens.css, design.css und partner.css geladen
   werden (partner.css setzt das Band von Layout 29).

   Alle Zahlen und Farben stehen in tokens.css im Abschnitt
   FEEDBACK-FORMULAR. Diese Datei enthaelt keine.

   Keine Zeile beginnt mit ".section" oder ".text": TYPO3 haelt
   solche Zeilen fuer Assembler-Quelltext und lehnt den Upload
   ab (README).
   ============================================================ */


/* ============================================================
   1 - BAND
   ============================================================ */

.atg-feedback.section {
    background-color: var(--atg-fb-band);
    padding-block: var(--atg-fb-band-top) var(--atg-fb-band-bottom);
}

/* Die Luft je Inhaltselement aus dem Theme kaeme zur Bandluft
   dazu - dieselbe Regel wie in partner.css und kontakt.css. */
.atg-feedback .frame {
    padding-block: 0;
}

/* Einleitung (Layout 29) direkt darueber: ein Band ohne Naht,
   oben an der Karte nur der Abstand Text -> Karte. Muster wie
   bei der Kontaktkarte. */
.atg-einleitung.section:has(+ .atg-feedback) {
    padding-bottom: 0;
}

.atg-einleitung.section + .atg-feedback.section {
    padding-top: var(--atg-fb-card-gap);
}

/* Der Link zur Datenschutzerklaerung im Einleitungstext.
   design.css setzt "main a { color: #52bfd3 !important }" - auf
   dem hellen Band waeren das 1,9 : 1. Gilt nur fuer die
   Einleitung direkt ueber dem Formular. */
.atg-einleitung.section:has(+ .atg-feedback) a {
    color: var(--atg-fb-link) !important;
    text-decoration: underline;
}


/* ============================================================
   2 - KARTE
   ============================================================ */

/* Nach dem Absenden ersetzt ext:form das ganze Formular durch
   ein einzelnes div mit der Danke-Meldung (am 29.09.2026 an der
   Live-Seite gesehen: div#<Formular-ID>, ohne Klasse). Es
   bekommt dieselbe Karte. */
.atg-feedback .form-container,
.atg-feedback .frame-inner > div:not(.form-container, .frame-header) {
    position: relative;
    box-sizing: border-box;
    max-width: var(--atg-fb-card-max);
    padding: var(--atg-fb-pad-y) var(--atg-fb-pad-x);
    background: var(--atg-fb-card-bg);
    border-radius: var(--atg-fb-card-radius);
    box-shadow: var(--atg-fb-card-shadow);
}

/* Kante links, oben und unten eingerueckt - wie Zitat- und
   Kontaktkarte. */
.atg-feedback .form-container::before,
.atg-feedback .frame-inner > div:not(.form-container, .frame-header)::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--atg-fb-bar-inset);
    bottom: var(--atg-fb-bar-inset);
    width: var(--atg-fb-bar);
    background: var(--atg-fb-bar-color);
}

.atg-feedback form {
    margin: 0;
}

/* Nach dem Absenden laedt TYPO3 die Seite mit dem Sprungziel
   #<Formular-ID> neu - bei Fehlern ist das die form, danach das
   div mit der Danke-Meldung. Die Hoehe des klebenden Kopfes zieht
   schon tokens.css ab (scroll-padding-top am html). Hier kommt nur
   dazu, dass die form erst nach dem Innenabstand der Karte
   beginnt - sonst laege die Oberkante der Karte unter dem Kopf. */
.atg-feedback form {
    scroll-margin-top: calc(var(--atg-fb-pad-y) + var(--atg-fb-anchor-gap));
}

.atg-feedback .frame-inner > div:not(.form-container, .frame-header) {
    scroll-margin-top: var(--atg-fb-anchor-gap);
}

.atg-feedback .frame-inner > div:not(.form-container, .frame-header) {
    font-size: var(--atg-fb-done-fs);
    font-weight: 600;
    line-height: var(--atg-fb-done-lh);
    color: var(--atg-ink);
}


/* ============================================================
   3 - FELDER ALLGEMEIN
   ============================================================ */

.atg-feedback .form-element {
    min-width: 0;
    margin: 0 0 var(--atg-fb-field-gap);
    padding: 0;
    border: 0;
}

.atg-feedback .form-label,
.atg-feedback .form-element-radio legend {
    display: block;
    margin: 0 0 var(--atg-fb-label-gap);
    font-size: var(--atg-fb-label-fs);
    font-weight: 600;
    line-height: var(--atg-fb-label-lh);
    color: var(--atg-fb-label-color);
}

.atg-feedback .required {
    padding-left: var(--atg-fb-req-gap);
    font-weight: 700;
    color: var(--atg-fb-req-color);
}

.atg-feedback .form-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--atg-fb-input-h);
    padding: 0 var(--atg-fb-input-pad-x);
    font-family: inherit;
    font-size: var(--atg-fb-input-fs);
    line-height: var(--atg-fb-input-lh);
    color: var(--atg-ink);
    background: var(--atg-white);
    border: var(--atg-fb-input-bw) solid var(--atg-fb-input-border);
    border-radius: var(--atg-fb-input-radius);
    box-shadow: none;
    transition: border-color var(--atg-transition), box-shadow var(--atg-transition);
}

.atg-feedback textarea.form-control {
    min-height: var(--atg-fb-area-h);
    padding-block: var(--atg-fb-input-pad-y);
    resize: vertical;
}

.atg-feedback .form-control:focus {
    border-color: var(--atg-fb-focus);
    box-shadow: var(--atg-fb-focus-ring);
    outline: none;
}


/* ============================================================
   4 - STERNE
   ============================================================ */

/* ext:form gibt die Frage nur fuer Screenreader aus (Bootstrap-
   Klasse .visually-hidden, alle Werte mit !important). Hier
   soll sie sichtbar sein - sonst stuenden fuenf Sterne ohne
   Frage da. Gegen !important hilft nur ein zweites. */
.atg-feedback .form-element-radio legend.visually-hidden {
    position: static !important;
    float: none;
    width: auto !important;
    height: auto !important;
    margin: 0 0 var(--atg-fb-label-gap) !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
}

.atg-feedback [role="radiogroup"] {
    display: flex;
    flex-wrap: nowrap;
}

.atg-feedback [role="radiogroup"] .form-check {
    min-height: 0;
    margin: 0;
    padding: 0 var(--atg-fb-star-gap) 0 0;
}

.atg-feedback [role="radiogroup"] .form-check:last-child {
    padding-right: 0;
}

.atg-feedback [role="radiogroup"] .form-check-wrapping-label {
    position: relative;
    display: block;
    width: var(--atg-fb-star);
    height: var(--atg-fb-star);
    border-radius: var(--atg-radius);
    cursor: pointer;
}

/* Das echte Eingabefeld liegt unsichtbar ueber dem Stern: es
   bleibt anklickbar und per Tastatur erreichbar. */
.atg-feedback [role="radiogroup"] .form-check-input {
    position: absolute;
    inset: 0;
    float: none;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* "1 von 5 Sternen" usw. - fuer Screenreader, nicht fuers Auge */
.atg-feedback [role="radiogroup"] .form-check-label {
    position: absolute;
    width: var(--atg-fb-sr);
    height: var(--atg-fb-sr);
    overflow: hidden;
    clip-path: var(--atg-fb-sr-clip);
    white-space: nowrap;
}

/* Der Stern selbst: Umriss im Ruhezustand */
.atg-feedback [role="radiogroup"] .form-check-wrapping-label::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: var(--atg-fb-star-empty);
    -webkit-mask: var(--atg-fb-star-outline) center / contain no-repeat;
    mask: var(--atg-fb-star-outline) center / contain no-repeat;
    transition: background-color var(--atg-transition);
}

/* Gewaehlt: dieser Stern und alle davor gefuellt */
.atg-feedback .form-check:has(input:checked) .form-check-wrapping-label::before,
.atg-feedback .form-check:has(~ .form-check input:checked) .form-check-wrapping-label::before {
    background-color: var(--atg-fb-star-full);
    -webkit-mask-image: var(--atg-fb-star-fill);
    mask-image: var(--atg-fb-star-fill);
}

/* Vorschau beim Darueberfahren: alle Sterne zuerst leer, dann
   der Stern unter der Maus und alle davor im hellen Tuerkis.
   Die zweite Regel ist spezifischer als die gewaehlten Sterne
   und gewinnt, solange die Maus in der Reihe steht. */
@media (hover: hover) {
    .atg-feedback [role="radiogroup"]:hover .form-check .form-check-wrapping-label::before {
        background-color: var(--atg-fb-star-empty);
        -webkit-mask-image: var(--atg-fb-star-outline);
        mask-image: var(--atg-fb-star-outline);
    }

    .atg-feedback [role="radiogroup"] .form-check:hover .form-check-wrapping-label::before,
    .atg-feedback [role="radiogroup"] .form-check:has(~ .form-check:hover) .form-check-wrapping-label::before {
        background-color: var(--atg-fb-star-hover);
        -webkit-mask-image: var(--atg-fb-star-fill);
        mask-image: var(--atg-fb-star-fill);
    }
}

/* Tastatur: Rahmen um den Stern, der den Fokus hat */
.atg-feedback [role="radiogroup"] .form-check-wrapping-label:has(input:focus-visible) {
    outline: var(--atg-fb-outline) solid var(--atg-fb-focus);
    outline-offset: var(--atg-fb-outline-off);
}


/* ============================================================
   5 - CHECKBOX DATENSCHUTZ
   ============================================================ */

.atg-feedback .form-element-check {
    margin-bottom: 0;
}

.atg-feedback .form-element-check .form-check-wrapping-label {
    display: flex;
    align-items: flex-start;
    gap: var(--atg-fb-check-gap);
    font-size: var(--atg-fb-check-fs);
    line-height: var(--atg-fb-check-lh);
    color: var(--atg-fb-check-color);
    cursor: pointer;
}

.atg-feedback .form-element-check .form-check-input {
    flex: none;
    float: none;
    width: var(--atg-fb-check);
    height: var(--atg-fb-check);
    margin: var(--atg-fb-check-top) 0 0;
    border: var(--atg-fb-input-bw) solid var(--atg-fb-input-border);
    border-radius: var(--atg-fb-input-radius);
    cursor: pointer;
}

/* Das Theme fuellt eine gesetzte Checkbox in seiner Primaerfarbe
   (Gruen). Das Haekchen selbst bleibt die Grafik des Themes. */
.atg-feedback .form-element-check .form-check-input:checked {
    background-color: var(--atg-fb-focus);
    border-color: var(--atg-fb-focus);
}

.atg-feedback .form-element-check .form-check-input:focus {
    border-color: var(--atg-fb-focus);
    box-shadow: var(--atg-fb-focus-ring);
    outline: none;
}


/* ============================================================
   6 - KNOPF "FEEDBACK SENDEN"
   ============================================================

   Form und Farben wie der Knopf in "Persoenlich erreichbar".
   Das Theme bringt .btn-primary in Gruen mit eigenen Hover- und
   Active-Farben; alle Zustaende werden hier gesetzt.          */

.atg-feedback .form-actions {
    margin-top: var(--atg-fb-btn-gap);
}

.atg-feedback .form-navigation .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--atg-fb-btn-width);
    height: var(--atg-fb-btn-h);
    padding: 0 var(--atg-fb-btn-pad);
    font-family: inherit;
    font-size: var(--atg-fb-btn-fs);
    font-weight: 600;
    line-height: var(--atg-fb-btn-lh);
    color: var(--atg-on-dark);
    background-color: var(--atg-fb-btn-bg);
    border: 0;
    border-radius: var(--atg-fb-btn-radius);
    box-shadow: none;
    transition: background-color var(--atg-transition);
}

.atg-feedback .form-navigation .btn:hover,
.atg-feedback .form-navigation .btn:focus-visible,
.atg-feedback .form-navigation .btn:active {
    color: var(--atg-on-dark);
    background-color: var(--atg-fb-btn-hover);
    box-shadow: none;
}

.atg-feedback .form-navigation .btn:focus-visible {
    outline: var(--atg-fb-outline) solid var(--atg-fb-focus);
    outline-offset: var(--atg-fb-outline-off);
}


/* ============================================================
   7 - FEHLERMELDUNGEN
   ============================================================

   Am 29.09.2026 an der Live-Seite durch leeres Absenden
   ausgeloest. ext:form setzt dann .is-invalid an das Feld und
   schreibt darunter:

     span.invalid-feedback[role=alert]   "Das ist ein Pflichtfeld."

   Beim Auswahlknopf steht die Meldung im fieldset nach der
   Sternreihe, bei der Checkbox nach dem label. Das Theme faerbt
   Meldung, Rahmen und Beschriftung in seinem Rot.            */

.atg-feedback .invalid-feedback {
    display: block;
    margin: var(--atg-fb-error-gap) 0 0;
    font-size: var(--atg-fb-error-fs);
    font-weight: 600;
    color: var(--atg-fb-error);
}

/* Bei der Checkbox unter dem Text, nicht unter dem Kasten */
.atg-feedback .form-element-check .invalid-feedback {
    padding-left: calc(var(--atg-fb-check) + var(--atg-fb-check-gap));
}

/* Sterne rot umrandet, solange keiner gewaehlt ist. Bewusst
   niedrig in der Spezifitaet: gewaehlte Sterne und die Vorschau
   beim Darueberfahren gewinnen. */
.atg-feedback .is-invalid:not(:has(:checked)) label::before {
    background-color: var(--atg-fb-error);
}

.atg-feedback .form-element-check .form-check-input.is-invalid:not(:checked) {
    border-color: var(--atg-fb-error);
}

/* Der Text neben der Checkbox bleibt in seiner Farbe - die
   Meldung darunter genuegt. */
.atg-feedback .form-element-check .form-check-wrapping-label .form-check-label {
    color: inherit;
}