/* ============================================================
   ATG-Gigerl - Service-Formular
   Liegt unter: fileadmin/templates/css/service-formular.css
   Stand: 28.10.2026 - neu

   Layout 43 "Service-Formular"   .atg-serviceformular
   Kommt auf das Formular-Element (ext:form) der Seite "Service"
   (/service), Formular "Reparatur, Service, Pruefung anfragen".
   Das Textelement darueber steht auf Layout 29 "Einleitung
   hell"; beide Baender laufen ohne Naht ineinander, wie beim
   Feedback-Formular.

   Markup, am 28.10.2026 im DOM der Live-Vorschau nachgesehen
   (Element c285, Formular-ID reparaturServicePruefunganfragen-285):

     div.form-container
       form[novalidate]
         div                         versteckte Felder, ohne Klasse
         fieldset.form-element.form-element-fieldset.mb-3   (3x)
           legend                    Gruppenname
           div.form-element.form-element-select|number|date|
               text|email|phone|textarea.mb-3
             label.form-label + span.required
             select.form-select | input.form-control | textarea
             span.form-text          Beschreibung ("zu je max. 30 kg")
         input (Honigtopf, inline absolut versteckt - kann zwischen
               zwei fieldsets stehen)
         div.form-element.form-element-check.mb-3
           label.form-check-wrapping-label
             input[type=hidden] + input.form-check-input
             span.form-check-label   Text + span.required
         div.form-actions > nav.form-navigation > button.btn

   Aufbau:
   - Die form ist ein Raster: jede Gruppe ueber die volle Breite,
     darunter Checkbox und Knopf in einer Zeile (ab 1024px) oder
     untereinander.
   - Jede Gruppe (fieldset) ist selbst ein Raster mit 4 / 2 / 1
     Spalten. Welche Felder doppelt breit sind, haengt an der
     Feldart (Auswahl, Text in der Gruppe mit der Auswahl,
     Textfeld) - nicht an den Bezeichnern, die TYPO3 vergibt.
   - Der Gruppenname steht ab 1440px links in einer eigenen
     Spalte (absolut), darunter ueber der Gruppe. Bootstrap setzt
     legend auf float: left - dadurch ist sie keine "gerenderte
     Legende" und wird im Raster ein normales Element. float
     deshalb NICHT zuruecksetzen.
   - Die Nummer 01 / 02 / 03 kommt aus einem CSS-Zaehler.

   Bootstrap gibt jedem Feld .mb-3 mit margin-bottom !important.
   Im Raster kaeme das zum Zeilenabstand dazu - deshalb hier
   ebenfalls !important.

   Muss NACH tokens.css, design.css, partner.css und feedback.css
   geladen werden. Alle Zahlen und Farben stehen in tokens.css
   im Abschnitt SERVICE-FORMULAR, diese Datei enthaelt keine.

   Keine Zeile beginnt mit ".section" oder ".text" (README).
   ============================================================ */


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

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

.atg-serviceformular .frame {
    padding-block: 0;
}

/* Einleitung (Layout 29) direkt darueber: ein Band ohne Naht */
.atg-einleitung.section:has(+ .atg-serviceformular) {
    padding-bottom: 0;
}

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

/* Link zur Datenschutzerklaerung im Einleitungstext - gleiche
   Begruendung wie in feedback.css (#52bfd3 !important aus
   design.css haette 1,9 : 1). */
.atg-einleitung.section:has(+ .atg-serviceformular) a {
    color: var(--atg-fb-link) !important;
    text-decoration: underline;
}


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

/* Nach dem Absenden steht statt der Karte ein div mit der
   Danke-Meldung direkt in .frame-inner (wie beim Feedback). */
.atg-serviceformular .form-container,
.atg-serviceformular .frame-inner > div:not(.form-container, .frame-header) {
    position: relative;
    box-sizing: border-box;
    padding: var(--atg-sf-pad-y) var(--atg-sf-pad-x);
    background: var(--atg-fb-card-bg);
    border-radius: var(--atg-fb-card-radius);
    box-shadow: var(--atg-fb-card-shadow);
}

.atg-serviceformular .form-container::before,
.atg-serviceformular .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-serviceformular .frame-inner > div:not(.form-container, .frame-header) {
    max-width: var(--atg-sf-done-max);
    font-size: var(--atg-fb-done-fs);
    font-weight: 600;
    line-height: var(--atg-fb-done-lh);
    color: var(--atg-ink);
    scroll-margin-top: var(--atg-fb-anchor-gap);
}

.atg-serviceformular form {
    display: grid;
    grid-template-columns: var(--atg-sf-foot-cols);
    margin: 0;
    counter-reset: atg-sf;
    scroll-margin-top: calc(var(--atg-sf-pad-y) + var(--atg-fb-anchor-gap));
}

/* Alles ueber die volle Breite - ausser Checkbox und Knopf */
.atg-serviceformular form > * {
    grid-column: var(--atg-sf-span-full);
}


/* ============================================================
   3 - GRUPPEN
   ============================================================ */

.atg-serviceformular .form-element {
    min-width: 0;
    margin: 0 !important;   /* gegen .mb-3 von Bootstrap */
    padding: 0;
    border: 0;
}

.atg-serviceformular .form-element-fieldset {
    position: relative;
    display: grid;
    grid-template-columns: var(--atg-sf-cols);
    gap: var(--atg-sf-row-gap) var(--atg-sf-col-gap);
    align-items: start;
    padding: var(--atg-sf-group-pad) 0 var(--atg-sf-group-pad) var(--atg-sf-indent);
    counter-increment: atg-sf;
}

.atg-serviceformular .form-element-fieldset:first-of-type {
    padding-top: 0;
}

.atg-serviceformular .form-element-fieldset:not(:first-of-type) {
    border-top: var(--atg-sf-line-w) solid var(--atg-sf-line);
}

/* Gruppenname. Ab 1440px absolut in der linken Spalte (top: auto
   = Oberkante der Felder), darunter ein Rasterelement ueber die
   volle Breite. */
.atg-serviceformular .form-element-fieldset > legend {
    position: var(--atg-sf-legend-pos);
    left: 0;
    top: auto;
    grid-column: var(--atg-sf-legend-area);
    width: var(--atg-sf-legend-w);
    margin: var(--atg-sf-legend-top) 0 0;
    padding: 0;
    font-size: var(--atg-sf-legend-fs);
    font-weight: 700;
    line-height: var(--atg-sf-legend-lh);
    letter-spacing: var(--atg-sf-legend-ls);
    text-transform: uppercase;
    color: var(--atg-sf-legend-color);
}

.atg-serviceformular .form-element-fieldset > legend::before {
    content: counter(atg-sf, decimal-leading-zero);
    display: var(--atg-sf-num-display);
    margin: 0 var(--atg-sf-num-mr) var(--atg-sf-num-mb) 0;
    color: var(--atg-sf-num-color);
}

/* Doppelt breite Felder */
.atg-serviceformular .form-element-select {
    grid-column: var(--atg-sf-span-select);
}

.atg-serviceformular .form-element-fieldset:has(.form-element-select) .form-element-text {
    grid-column: var(--atg-sf-span-addr);
}

.atg-serviceformular .form-element-textarea {
    grid-column: var(--atg-sf-span-full);
}


/* ============================================================
   4 - FELDER - Werte wie beim Feedback-Formular
   ============================================================ */

.atg-serviceformular .form-label {
    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-serviceformular .required {
    padding-left: var(--atg-fb-req-gap);
    font-weight: 700;
    color: var(--atg-fb-req-color);
}

.atg-serviceformular .form-control,
.atg-serviceformular .form-select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--atg-fb-input-h);
    padding-block: 0;
    padding-inline: 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-color: 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);
}

/* Der Pfeil der Auswahl ist das Hintergrundbild des Themes -
   deshalb oben nur background-color, nicht background. */
.atg-serviceformular .form-select {
    padding-right: var(--atg-sf-select-pad-r);
    cursor: pointer;
}

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

.atg-serviceformular .form-control::placeholder {
    color: var(--atg-sf-placeholder);
    opacity: 1;
}

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

/* Beschreibung unter dem Feld */
.atg-serviceformular .form-text {
    display: block;
    margin-top: var(--atg-sf-hint-gap);
    font-size: var(--atg-sf-hint-fs);
    line-height: var(--atg-sf-hint-lh);
    color: var(--atg-sf-hint-color);
}


/* ============================================================
   5 - CHECKBOX UND KNOPF
   ============================================================ */

.atg-serviceformular .form-element-check {
    grid-column: auto;
    padding: var(--atg-sf-group-pad) 0 0 var(--atg-sf-indent);
    border-top: var(--atg-sf-line-w) solid var(--atg-sf-line);
}

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

.atg-serviceformular .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;
}

.atg-serviceformular .form-element-check .form-check-input:checked {
    background-color: var(--atg-fb-focus);
    border-color: var(--atg-fb-focus);
}

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

.atg-serviceformular .form-element-check .form-check-wrapping-label .form-check-label {
    color: inherit;
}

/* Knopf: neben der Checkbox mit gleicher Linie darueber (ab
   1024px), darunter ohne Linie unter der Checkbox. */
.atg-serviceformular .form-actions {
    grid-column: auto;
    display: flex;
    align-items: center;
    margin: var(--atg-sf-act-mt) 0 0;
    padding: var(--atg-sf-act-pad) 0 0 var(--atg-sf-foot-gap);
    border-top: var(--atg-sf-act-line);
}

.atg-serviceformular .form-navigation {
    width: var(--atg-fb-btn-width);
}

.atg-serviceformular .form-navigation .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-sf-arrow-gap);
    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);
    white-space: nowrap;
    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-serviceformular .form-navigation .btn::after {
    content: var(--atg-sf-arrow);
}

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

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


/* ============================================================
   6 - FEHLERMELDUNGEN
   ============================================================

   ext:form setzt .is-invalid an das Eingabefeld und schreibt
   darunter span.invalid-feedback[role=alert] (Befund vom
   29.09.2026 beim Feedback-Formular). Dieselbe Meldung erzeugt
   js/service-formular.js, wenn das Abholdatum zu frueh liegt. */

.atg-serviceformular .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);
}

.atg-serviceformular .form-element-check .invalid-feedback {
    padding-left: calc(var(--atg-fb-check) + var(--atg-fb-check-gap));
}

/* Rahmen im eigenen Rot; das Warnsymbol des Themes entfaellt.
   Der Pfeil der Auswahl bleibt: das Theme legt bei der Auswahl
   Pfeil und Warnsymbol als zwei Hintergrundbilder uebereinander,
   hier bleibt nur das erste (--bs-form-select-bg-img). */
.atg-serviceformular .form-control.is-invalid,
.atg-serviceformular .form-select.is-invalid {
    border-color: var(--atg-fb-error);
}

.atg-serviceformular .form-control.is-invalid {
    padding-right: var(--atg-fb-input-pad-x);
    background-image: none;
}

/* :not() wie beim Theme, sonst gewinnt dessen Innenabstand */
.atg-serviceformular .form-select.is-invalid:not([multiple]):not([size]) {
    padding-right: var(--atg-sf-select-pad-r);
    background-image: var(--bs-form-select-bg-img);
}

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