/* ============================================================
   ATG-Gigerl - Startseite, Abschnitt "Service"
   Liegt unter: fileadmin/templates/css/service.css
   Stand: 25.10.2026

   Layout 42. Erster Abschnitt der Startseite, ueber dem
   Onlineshop. Off-white-Band, darauf eine weisse Karte in der
   Hausart von "Persoenlich erreichbar": links Kicker,
   Ueberschrift, Haekchenliste und zwei Knoepfe, rechts das
   Foto mit einer Petrol-Plakette. Bis 767px steht das Foto
   oben.

   Muss NACH tokens.css und design.css geladen werden.

   ------------------------------------------------------------
   WORAN DAS DESIGN HAENGT

   An der Klasse .atg-service. Die schreibt der Layout-CASE in
   autogentechnik.typoscript (Nummer 42). Alles andere kommt
   aus EINER Card Group mit EINER Karte - derselbe Aufbau wie
   beim Onlineshop:

       div.atg-service.section
         div.reveal
           div#cNN.frame.frame-type-card_group
             ... div.frame-inner                 <- die Karte, ein Raster
                   div.frame-header
                     h4.element-header > span    Feld "Header" (Typ H4)  Kicker
                     h5.element-subheader.h1     Feld "Subheader",
                       > span                    Header Class h1         Ueberschrift
                   div.card-group-element        \
                     div.card-group-element-item  |
                       div.card                   > display: contents
                         div.card-body           /
                           h?.card-title         Header der Karte (Pflichtfeld) - ausgeblendet
                           ul > li               Aufzaehlung = Haekchenliste
                           p > a + a             zwei Links in EINEM Absatz = Knoepfe
                           p                     Hinweiszeile = Plakette auf dem Foto
                         div.card-img-top > picture > img   Feld "Image"

   Gruppe, Eintrag, Karte UND Kartentext loesen sich auf - so
   werden Kopf, Liste, Knopfzeile, Hinweis und Bild direkte
   Kinder von .frame-inner und lassen sich frei in EIN Raster
   legen. Nur deshalb kann die Hinweiszeile aus dem Textfeld
   als Plakette auf dem Foto stehen.

   Die Ueberschrift hat Header Class h1 wie alle Blockueber-
   schriften, bekommt hier aber die Optik von "Persoenlich
   erreichbar": Groesse der Ebene 2, Petrol, kein Unterstrich.

   Alle Masse und Farben stehen in tokens.css (--atg-sv-*).

   Selektoren beginnen mit ".atg-service", nie mit
   ".section" - sonst haelt TYPO3 die Datei fuer Assembler.
   ============================================================ */


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

.atg-service.section {
    background-color: var(--atg-sv-band);
    padding-block: var(--atg-sv-band-y);
}

/* Theme-Luft des Elements weg - die Luft steht am Band */
.atg-service .frame {
    padding-block: 0;
}


/* ============================================================
   2 - KARTE UND RASTER
   ============================================================

   Spalten: Innenabstand | Text | Innenabstand | Foto.
   Zeilen "1fr auto auto auto 1fr": Kopf, Liste und Knoepfe
   stehen in den drei mittleren Zeilen und damit senkrecht
   mittig, das Foto spannt ueber alle fuenf. min-height wie bei
   "Persoenlich erreichbar": ein kurzer Text drueckt das Foto
   nicht zusammen; mehr Text macht die Karte hoeher.          */

.atg-service .frame-inner {
    position: relative;
    display: grid;
    grid-template-columns: var(--atg-sv-pad) minmax(0, 1fr) var(--atg-sv-pad) var(--atg-sv-img-col);
    grid-template-rows: 1fr auto auto auto 1fr;
    min-height: var(--atg-sv-min-h);
    background: var(--atg-sv-card-bg);
    border: 1px solid var(--atg-sv-card-line);
    border-radius: 0;
    box-shadow: var(--atg-sv-shadow);
    overflow: hidden;
    transition: transform var(--atg-sv-hover-time),
                box-shadow var(--atg-sv-hover-time);
}

.atg-service :is(.card-group-element, .card-group-element-item, .card, .card-body) {
    display: contents;
}

/* Beim Darueberfahren hebt sich die Karte wie bei "Persoenlich
   erreichbar". Nur mit Zeiger; die Karte selbst ist nicht
   anklickbar, die Links haengen an den Knoepfen. */
@media (hover: hover) {
    .atg-service .frame-inner:hover,
    .atg-service .frame-inner:focus-within {
        transform: translateY(calc(-1 * var(--atg-sv-lift)));
        box-shadow: var(--atg-sv-shadow-hover);
    }
}


/* ============================================================
   3 - KOPF
   ============================================================ */

.atg-service .frame-header {
    grid-column: 2;
    grid-row: 2;
    margin: var(--atg-sv-pad-y) 0 0;
}

.atg-service .frame-header .element-header {
    margin: 0 0 var(--atg-sv-kicker-gap);
    color: var(--atg-sv-kicker);
}

.atg-service .frame-header .element-subheader {
    margin: 0;
    font-size: var(--atg-sv-head-fs);
    font-weight: 600;
    line-height: var(--atg-sv-head-lh);
    letter-spacing: var(--atg-sv-head-ls);
    color: var(--atg-sv-head);
    text-wrap: balance;
}

/* Kein Unterstrich: der globale haengt als Hintergrund am span
   (design.css). Diese Regel ist spezifischer und nimmt ihn weg. */
.atg-service .frame-header .element-subheader.h1 > span {
    padding-bottom: 0;
    background-image: none;
}

/* Header der Karte: Pflichtfeld im Backend, hier ohne Aufgabe */
.atg-service .card-title {
    display: none;
}


/* ============================================================
   4 - HAEKCHENLISTE
   ============================================================

   Aufzaehlung im Textfeld. Haken wie bei "Unsere Grundsaetze"
   (--atg-haken als Maske, 1lh hoch: sitzt mittig in der ersten
   Zeile). Ab 1024px zwei Spalten, 768-1023 eine, bis 767 je
   nach Platz.                                                 */

.atg-service ul {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: var(--atg-sv-cols);
    justify-content: start;
    gap: var(--atg-sv-item-gap) var(--atg-sv-col-gap);
    margin: var(--atg-sv-list-gap) 0 0;
    padding: 0;
    list-style: none;
}

.atg-service ul li {
    display: grid;
    grid-template-columns: var(--atg-sv-mark-col) 1fr;
    align-items: start;
    margin: 0;
    padding: 0;
    font-size: var(--atg-sv-item-fs);
    line-height: var(--atg-sv-item-lh);
    color: var(--atg-sv-item-ink);
}

.atg-service ul li::before {
    content: "";
    position: static;
    width: var(--atg-sv-mark-fs);
    height: 1lh;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--atg-sv-mark);
    -webkit-mask: var(--atg-haken) no-repeat center / var(--atg-sv-mark-fs);
            mask: var(--atg-haken) no-repeat center / var(--atg-sv-mark-fs);
}


/* ============================================================
   5 - KNOEPFE
   ============================================================

   Beide Links stehen in EINEM Absatz des Textfelds: der erste
   wird der gefuellte Knopf mit Pfeil, der zweite der
   Umriss-Knopf. Farben wie der Knopf von "Persoenlich
   erreichbar"; beim Darueberfahren beide gefuellt.

   Das !important auf der Schrift ist noetig, weil design.css
   "main a { color: #52bfd3 !important }" setzt.              */

.atg-service p:has(> a) {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    flex-direction: var(--atg-sv-btn-dir);
    flex-wrap: wrap;
    gap: var(--atg-sv-btn-gap);
    margin: var(--atg-sv-cta-gap) 0 var(--atg-sv-pad-y);
}

.atg-service p > a {
    flex: var(--atg-sv-btn-flex);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-sv-ico-gap);
    height: var(--atg-sv-btn-h);
    padding-inline: var(--atg-sv-btn-pad);
    box-sizing: border-box;
    border: var(--atg-sv-btn-line-w) solid transparent;
    border-radius: var(--atg-sv-btn-radius);
    font-size: var(--atg-sv-btn-fs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color var(--atg-sv-hover-time),
                border-color var(--atg-sv-hover-time),
                color var(--atg-sv-hover-time);
}

.atg-service p > a:first-of-type {
    background-color: var(--atg-sv-btn-bg);
    color: var(--atg-sv-btn-fg) !important;
}

/* Pfeil nach rechts: beide Ziele liegen auf der eigenen Website */
.atg-service p > a:first-of-type::after {
    content: "";
    flex: none;
    width: var(--atg-sv-ico);
    height: var(--atg-sv-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-sv-ico-next) center / contain no-repeat;
            mask: var(--atg-sv-ico-next) center / contain no-repeat;
}

.atg-service p > a:not(:first-of-type) {
    background-color: transparent;
    border-color: var(--atg-sv-btn-line);
    color: var(--atg-sv-btn-line) !important;
}

.atg-service p > a:hover,
.atg-service p > a:focus-visible {
    background-color: var(--atg-sv-btn-hover);
    border-color: var(--atg-sv-btn-hover);
    color: var(--atg-sv-btn-fg) !important;
}

.atg-service p > a:focus-visible {
    outline: var(--atg-sv-focus);
    outline-offset: var(--atg-sv-focus-off);
}


/* ============================================================
   6 - FOTO UND PLAKETTE
   ============================================================

   Das Foto fuellt seine Spalte ueber die volle Kartenhoehe
   (object-fit: cover). Die Hinweiszeile des Textfelds liegt
   als Plakette unten links auf dem Foto: links buendig am
   Bildrand (Fahne), unten mit Abstand - beide teilen sich
   denselben Rasterbereich.

   ".card-body >" im Selektor ist Absicht: das Theme setzt
   ".card-body > :last-child { margin-bottom: 0 }" (0,2,0), und
   die Hinweiszeile ist das letzte Kind. Ohne die zusaetzliche
   Klasse verliert der Abstand nach unten.                     */

.atg-service .card-img-top {
    grid-column: 4;
    grid-row: 1 / -1;
    position: relative;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.atg-service .card-img-top picture {
    position: absolute;
    inset: 0;
    display: block;
}

.atg-service .card-img-top img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--atg-sv-img-pos);
}

.atg-service .card-body > p:not(:has(a)) {
    grid-column: 4;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: start;
    position: relative;
    z-index: 1;
    margin: 0 0 var(--atg-sv-badge-bottom);
    padding: var(--atg-sv-badge-pad);
    border-left: var(--atg-sv-badge-edge);
    background: var(--atg-sv-badge-bg);
    font-size: var(--atg-sv-badge-fs);
    font-weight: 600;
    line-height: var(--atg-sv-badge-lh);
    color: var(--atg-sv-badge-fg);
}


/* ============================================================
   7 - BIS 767px: FOTO OBEN
   ============================================================ */

@media (max-width: 767.98px) {

    .atg-service .frame-inner {
        grid-template-columns: var(--atg-sv-pad) minmax(0, 1fr) var(--atg-sv-pad);
        grid-template-rows: auto auto auto auto;
    }

    .atg-service .card-img-top {
        grid-column: 1 / -1;
        grid-row: 1;
        height: var(--atg-sv-img-h);
    }

    .atg-service .card-body > p:not(:has(a)) {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}


/* ************************************************************
   SEITE "SERVICE" - LAYOUT 44 BIS 49 (28.10.2026)
   ************************************************************

   Die Bloecke der Unterseite "Service" (/service), von oben nach
   unten. Darunter folgen Einleitung (Layout 29) und Formular
   (Layout 43, css/service-formular.css).

     44 Service-Titel           Text & Medien   .atg-servicetitel
     45 Service-Vorteilsleiste  Text            .atg-servicevorteile
     46 Service-Vorher-Nachher  Text & Medien   .atg-servicevorher
     47 Service-Pruefung        Text & Medien   .atg-servicepruefung
     48 Service-Pruefkarten     Card Group      .atg-servicekarten
     49 Service-Abholung        Text            .atg-serviceabholung

   Markup am 28.10.2026 an der Live-Vorschau nachgesehen (c291
   bis c306). "Text & Medien" (CType textmedia) mit Bild oben:

       div.frame-inner
         div.textmedia.textmedia-above
           div.textmedia-item.textmedia-gallery
             div.gallery-row > div.gallery-item (je Bild)
               figure.image > picture > img
           div.textmedia-item.textmedia-text
             div.frame-header > h1|h4.element-header > span
                                h5.element-subheader.h1 > span
             p, ul.list-normal, ol

   Die Symbole stehen NICHT im Backend: sie kommen der Reihe nach
   aus diesem CSS (nth-child). Wer im Backend die Reihenfolge der
   Punkte aendert, muss sie hier mitziehen.

   Alle Masse und Farben in tokens.css (--atg-ss-*, --atg-st-*,
   --atg-sl-*, --atg-vn-*, --atg-sp-*, --atg-sk-*, --atg-sa-*).
   Selektoren beginnen mit ".atg-", nie mit ".section".
   ************************************************************ */


/* ============================================================
   8 - GEMEINSAM: BAENDER, KOPF, LISTEN
   ============================================================ */

/* Theme-Luft der Elemente weg - die Luft steht am Band */
.atg-servicetitel .frame,
.atg-servicevorteile .frame,
.atg-servicevorher .frame,
.atg-servicepruefung .frame,
.atg-servicekarten .frame,
.atg-serviceabholung .frame {
    padding-block: 0;
}

/* Abschnittsueberschrift: Optik Ebene 2, Petrol, ohne Unterstrich
   (wie der Service-Abschnitt der Startseite). Der Kicker (Header,
   Typ H4) bleibt in der globalen Optik. */
.atg-servicevorher .frame-header .element-header,
.atg-servicepruefung .frame-header .element-header,
.atg-serviceabholung .frame-header .element-header {
    margin: 0 0 var(--atg-ss-kicker-gap);
}

.atg-servicevorher .frame-header .element-subheader,
.atg-servicepruefung .frame-header .element-subheader,
.atg-serviceabholung .frame-header .element-subheader {
    margin: 0;
    padding-bottom: 0;
    font-size: var(--atg-ss-head-fs);
    font-weight: 700;
    line-height: var(--atg-ss-head-lh);
    color: var(--atg-ss-head);
}

.atg-servicevorher .frame-header .element-subheader.h1 > span,
.atg-servicepruefung .frame-header .element-subheader.h1 > span,
.atg-serviceabholung .frame-header .element-subheader.h1 > span {
    padding-bottom: 0;
    background-image: none;
}

.atg-servicevorher .frame-header,
.atg-servicepruefung .frame-header,
.atg-serviceabholung .frame-header {
    margin: 0;
}

/* Alle Listen dieser Bloecke: ohne Theme-Punkte und -Einzug */
:is(.atg-servicevorteile, .atg-servicevorher, .atg-servicepruefung,
    .atg-servicekarten, .atg-serviceabholung) :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.atg-servicevorteile, .atg-servicevorher, .atg-servicepruefung,
    .atg-servicekarten, .atg-serviceabholung) li {
    margin: 0;
    padding: 0;
}

/* Bildergalerie von "Text & Medien": Theme-Breiten, float und
   Abstaende weg, das Raster bzw. die Bildhoehe gibt alles vor.
   Bewusst ".image" und nicht "figure.image": das Element im
   Selektor hebt die Spezifitaet auf 0,2,1, und dann gewinnt
   dieses width: auto gegen die Breite des Titelfotos (0,2,0). */
:is(.atg-servicetitel, .atg-servicevorher, .atg-servicepruefung) :is(.textmedia, .textmedia-item, .gallery-row, .gallery-item, .image) {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}

:is(.atg-servicetitel, .atg-servicevorher, .atg-servicepruefung) picture {
    display: block;
}

:is(.atg-servicevorher, .atg-servicepruefung) .gallery-item img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--atg-ss-img-radius);
}


/* ============================================================
   9 - LAYOUT 44: SERVICE-TITEL
   ============================================================

   Petrol-Band, rechts das Foto ueber die volle Bandhoehe bis zum
   Fensterrand (bewusst randlos), links Ueberschrift, Unterzeile
   und EIN Knopf. Ein Verlauf legt das Foto zur Textseite hin in
   die Bandfarbe.

   Das Foto wird absolut an das Band gehaengt. Dafuer muessen alle
   Kaesten dazwischen "static" sein - das Theme setzt .frame und
   .frame-container auf relative.

   Felder: Header "Service" (Typ H1), Text = Absatz Unterzeile
   (fett = Akzentfarbe) + Absatz mit dem Link = Knopf.          */

.atg-servicetitel.section {
    position: relative;
    overflow: hidden;
    padding-block: var(--atg-st-pad-top) var(--atg-st-pad-bottom);
    background-color: var(--atg-st-band);
    color: var(--atg-st-ink);
    --atg-h-underline: var(--atg-st-rule);
}

.atg-servicetitel :is(.reveal, .frame, .frame-group-container, .frame-group-inner,
                      .frame-container, .frame-inner, .textmedia) {
    position: static;
}

/* Das Theme legt .textmedia als Flex-Kasten an - hier ein
   einfacher Block, das Foto haengt absolut am Band. */
.atg-servicetitel .textmedia {
    display: block;
}

.atg-servicetitel .textmedia-gallery {
    position: absolute;
    inset: 0 0 0 auto;
    width: var(--atg-st-img-w);
}

/* Das Theme macht .gallery-row zum Flex-Kasten; die Kachel waere
   dann nur so breit wie das Bild selbst. */
.atg-servicetitel .gallery-row {
    display: block;
}

.atg-servicetitel :is(.gallery-row, .gallery-item, .image, picture) {
    width: 100%;
    height: 100%;
}

.atg-servicetitel .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--atg-st-img-pos);
}

.atg-servicetitel .textmedia-gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--atg-st-veil);
    pointer-events: none;
}

.atg-servicetitel .textmedia-text {
    position: relative;
    z-index: 1;
    max-width: var(--atg-st-text-max);
}

.atg-servicetitel .frame-header {
    margin: 0;
}

.atg-servicetitel .element-header {
    font-size: var(--atg-st-h1-fs);
    line-height: var(--atg-st-h1-lh);
    color: var(--atg-st-ink);
}

.atg-servicetitel .textmedia-text > p {
    margin: 0;
}

.atg-servicetitel .textmedia-text > p:not(:has(a)) {
    margin-top: var(--atg-st-lead-gap);
    font-size: var(--atg-st-lead-fs);
    line-height: var(--atg-st-lead-lh);
    color: var(--atg-st-lead);
}

.atg-servicetitel .textmedia-text > p strong {
    font-weight: 600;
    color: var(--atg-st-mark);
}

.atg-servicetitel .textmedia-text > p:has(a) {
    margin-top: var(--atg-st-cta-gap);
}

.atg-servicetitel .textmedia-text > p a {
    display: inline-flex;
    align-items: center;
    gap: var(--atg-st-ico-gap);
    min-height: var(--atg-st-btn-h);
    padding-inline: var(--atg-st-btn-pad);
    border-radius: var(--atg-radius);
    background-color: var(--atg-st-btn-bg);
    color: var(--atg-st-btn-fg) !important;     /* design.css: main a { color ... !important } */
    font-size: var(--atg-st-btn-fs);
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color var(--atg-transition);
}

.atg-servicetitel .textmedia-text > p a::after {
    content: "";
    width: var(--atg-st-ico);
    height: var(--atg-st-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-ico-runter) no-repeat center / contain;
            mask: var(--atg-ico-runter) no-repeat center / contain;
}

.atg-servicetitel .textmedia-text > p a:hover {
    background-color: var(--atg-st-btn-hover);
    color: var(--atg-st-btn-fg) !important;
}

.atg-servicetitel .textmedia-text > p a:focus-visible {
    outline: var(--atg-st-focus);
    outline-offset: var(--atg-st-focus-off);
}

/* bis 767px: Foto oben ueber die volle Breite, Text darunter */
@media (max-width: 767.98px) {
    .atg-servicetitel .textmedia-gallery {
        position: relative;
        inset: auto;
        width: calc(100% + 2 * var(--atg-gutter));
        height: var(--atg-st-img-h);
        margin: 0 calc(-1 * var(--atg-gutter)) var(--atg-st-img-gap);
    }

    /* Foto oben: unten weich in die Bandfarbe, keine harte Kante */
    .atg-servicetitel .textmedia-gallery::after {
        background: var(--atg-st-veil-stack);
    }
}


/* ============================================================
   10 - LAYOUT 45: SERVICE-VORTEILSLEISTE
   ============================================================

   Text-Element mit EINER Aufzaehlung. Vier Punkte, Symbole der
   Reihe nach: Werkzeug, Werkstatt, Lkw, Medaille. Weisses Band,
   unten eine Haarlinie auf Inhaltsbreite.                     */

.atg-servicevorteile ul {
    display: grid;
    grid-template-columns: var(--atg-sl-cols);
    gap: var(--atg-sl-gap);
    padding-block: var(--atg-sl-pad-y);
    border-bottom: 1px solid var(--atg-sl-line);
}

.atg-servicevorteile li {
    display: flex;
    align-items: center;
    gap: var(--atg-sl-ico-gap);
    font-size: var(--atg-sl-fs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--atg-sl-ink);
}

.atg-servicevorteile li::before {
    content: "";
    flex: none;
    width: var(--atg-sl-ico);
    height: var(--atg-sl-ico);
    background-color: var(--atg-sl-ico-color);
    -webkit-mask: var(--atg-sl-sym) no-repeat center / contain;
            mask: var(--atg-sl-sym) no-repeat center / contain;
}

.atg-servicevorteile li:nth-child(4n+1) { --atg-sl-sym: var(--atg-ico-werkzeug); }
.atg-servicevorteile li:nth-child(4n+2) { --atg-sl-sym: var(--atg-ico-werkstatt); }
.atg-servicevorteile li:nth-child(4n+3) { --atg-sl-sym: var(--atg-ico-lkw); }
.atg-servicevorteile li:nth-child(4n+4) { --atg-sl-sym: var(--atg-ico-medaille); }


/* ============================================================
   11 - LAYOUT 46: SERVICE-VORHER-NACHHER
   ============================================================

   Weisses Band, alles untereinander (Festlegung 28.10.2026):
   Kicker, Ueberschrift, Absatz, Aufzaehlung als graue Kaestchen,
   dann die Bilder (bis zu zwei nebeneinander, volle Breite), dann
   die nummerierte Liste als Petrol-Schritte.

   Die Bilder stehen im Quelltext VOR dem Text. Damit sie zwischen
   Aufzaehlung und Schritten landen, loest sich die Textspalte auf
   (display: contents) und alle Teile bekommen eine Rasterzeile.  */

.atg-servicevorher.section {
    padding-block: var(--atg-vn-band-y);
}

.atg-servicevorher .textmedia {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.atg-servicevorher .textmedia-text { display: contents; }

.atg-servicevorher .frame-header          { grid-row: 1; }
.atg-servicevorher .textmedia-text > p    { grid-row: 2; }
.atg-servicevorher .textmedia-text > ul   { grid-row: 3; }
.atg-servicevorher .textmedia-gallery     { grid-row: 4; margin-top: var(--atg-vn-gal-gap); }
.atg-servicevorher .textmedia-text > ol   { grid-row: 5; }

.atg-servicevorher .textmedia-text > p {
    margin: var(--atg-vn-lead-gap) 0 0;
    font-size: var(--atg-ss-lead-fs);
    color: var(--atg-ss-lead);
}

.atg-servicevorher .gallery-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--atg-vn-img-gap);
}

.atg-servicevorher .gallery-item img {
    height: var(--atg-vn-img-h);
    object-position: var(--atg-vn-img-pos);
}

/* Aufzaehlung = graue Kaestchen */
.atg-servicevorher .textmedia-text > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atg-vn-chip-gap);
    margin-top: var(--atg-vn-chips-gap);
}

.atg-servicevorher .textmedia-text > ul li {
    padding: var(--atg-vn-chip-pad);
    border-radius: var(--atg-vn-chip-radius);
    background-color: var(--atg-vn-chip-bg);
    font-size: var(--atg-vn-chip-fs);
    font-weight: 600;
    line-height: 1.35;
}

/* Nummerierte Liste = Petrol-Schritte */
.atg-servicevorher .textmedia-text > ol {
    display: grid;
    grid-template-columns: var(--atg-vn-steps-cols);
    gap: var(--atg-vn-step-gap);
    margin-top: var(--atg-vn-steps-gap);
    counter-reset: atg-vn;
}

.atg-servicevorher .textmedia-text > ol li {
    display: flex;
    align-items: center;
    gap: var(--atg-vn-num-gap);
    padding: var(--atg-vn-step-pad);
    border-radius: var(--atg-vn-step-radius);
    background-color: var(--atg-vn-step-bg);
    color: var(--atg-vn-step-fg);
    font-size: var(--atg-vn-step-fs);
    font-weight: 700;
    line-height: 1.3;
    counter-increment: atg-vn;
}

.atg-servicevorher .textmedia-text > ol li::before {
    content: counter(atg-vn);
    flex: none;
    display: grid;
    place-items: center;
    width: var(--atg-vn-num);
    height: var(--atg-vn-num);
    border-radius: 50%;
    background-color: var(--atg-vn-num-bg);
    color: var(--atg-vn-num-fg);
    font-weight: 700;
}


/* ============================================================
   12 - LAYOUT 47: SERVICE-PRUEFUNG
   ============================================================

   Helles Band, links Kicker, Ueberschrift, Absatz und die
   Warnkarte, rechts zwei Bilder. Die Warnkarte entsteht aus dem
   Absatz direkt VOR der Aufzaehlung ("Ohne Pruefung riskieren
   Sie", rote Kopfzeile) und der Aufzaehlung selbst (Stichworte
   mit roten Symbolen: Warnung, Waage, Schild). Beide teilen sich
   eine weisse Flaeche mit roter Oberkante.

   Das Band laeuft ohne Naht in die Karten (Layout 48) weiter.  */

.atg-servicepruefung.section {
    padding-block: var(--atg-sp-band-top) var(--atg-sp-band-bottom);
    background-color: var(--atg-ss-band-light);
}

.atg-servicepruefung .textmedia {
    display: grid;
    grid-template-columns: var(--atg-sp-cols);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--atg-sp-col-gap);
}

.atg-servicepruefung .textmedia-text { display: contents; }

.atg-servicepruefung .textmedia-gallery                 { grid-area: 1 / 2 / 7 / 3; align-self: center; }
.atg-servicepruefung .frame-header                      { grid-area: 2 / 1; }
.atg-servicepruefung .textmedia-text > p:not(:has(+ ul)) { grid-area: 3 / 1; }
.atg-servicepruefung .textmedia-text > p:has(+ ul)      { grid-area: 4 / 1; }
.atg-servicepruefung .textmedia-text > ul               { grid-area: 5 / 1; }

.atg-servicepruefung .textmedia-text > p:not(:has(+ ul)) {
    margin: var(--atg-sp-lead-gap) 0 0;
    font-size: var(--atg-ss-lead-fs);
    color: var(--atg-ss-lead);
}

.atg-servicepruefung .textmedia-text > p strong {
    font-weight: 700;
    color: var(--atg-ink);
}

.atg-servicepruefung .gallery-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--atg-sp-img-gap);
}

.atg-servicepruefung .gallery-item img {
    height: var(--atg-sp-img-h);
}

/* Warnkarte, oberer Teil: rote Kopfzeile */
.atg-servicepruefung .textmedia-text > p:has(+ ul) {
    margin: var(--atg-sp-card-gap) 0 0;
    padding: var(--atg-sp-card-pad-top) var(--atg-sp-card-pad) 0;
    border: 1px solid var(--atg-sp-card-line);
    border-top: var(--atg-sp-card-edge) solid var(--atg-ss-red);
    border-bottom: 0;
    border-radius: var(--atg-ss-card-radius) var(--atg-ss-card-radius) 0 0;
    background-color: var(--atg-sp-card-bg);
    font-size: var(--atg-sp-label-fs);
    font-weight: 700;
    letter-spacing: var(--atg-sp-label-track);
    text-transform: uppercase;
    color: var(--atg-ss-red);
}

/* Warnkarte, unterer Teil: Stichworte */
.atg-servicepruefung .textmedia-text > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atg-sp-list-gap);
    padding: var(--atg-sp-list-top) var(--atg-sp-card-pad) var(--atg-sp-card-pad-bot);
    border: 1px solid var(--atg-sp-card-line);
    border-top: 0;
    border-radius: 0 0 var(--atg-ss-card-radius) var(--atg-ss-card-radius);
    background-color: var(--atg-sp-card-bg);
}

.atg-servicepruefung .textmedia-text > ul li {
    display: flex;
    align-items: center;
    gap: var(--atg-sp-ico-gap);
    font-size: var(--atg-sp-item-fs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--atg-ink);
}

.atg-servicepruefung .textmedia-text > ul li::before {
    content: "";
    flex: none;
    width: var(--atg-sp-ico);
    height: var(--atg-sp-ico);
    background-color: var(--atg-ss-red);
    -webkit-mask: var(--atg-sp-sym) no-repeat center / contain;
            mask: var(--atg-sp-sym) no-repeat center / contain;
}

.atg-servicepruefung .textmedia-text > ul li:nth-child(3n+1) { --atg-sp-sym: var(--atg-ico-warnung); }
.atg-servicepruefung .textmedia-text > ul li:nth-child(3n+2) { --atg-sp-sym: var(--atg-ico-waage); }
.atg-servicepruefung .textmedia-text > ul li:nth-child(3n+3) { --atg-sp-sym: var(--atg-ico-schild-x); }

/* bis 767px: eine Spalte, Bilder unter der Warnkarte */
@media (max-width: 767.98px) {
    .atg-servicepruefung .textmedia {
        grid-template-rows: none;
    }

    .atg-servicepruefung .frame-header                       { grid-area: 1 / 1; }
    .atg-servicepruefung .textmedia-text > p:not(:has(+ ul))  { grid-area: 2 / 1; }
    .atg-servicepruefung .textmedia-text > p:has(+ ul)       { grid-area: 3 / 1; }
    .atg-servicepruefung .textmedia-text > ul                { grid-area: 4 / 1; }
    .atg-servicepruefung .textmedia-gallery                  { grid-area: 5 / 1; margin-top: var(--atg-sp-card-gap); }
}


/* ============================================================
   13 - LAYOUT 48: SERVICE-PRUEFKARTEN
   ============================================================

   Card Group mit drei Karten auf dem hellen Band von Layout 47.
   Weisse Karten; die Karte MIT Bild wird die Petrol-Karte, ihr
   Bild (die Pruefplakette) ragt oben rechts heraus.
     Aufzaehlung       -> Haekchen (--atg-haken)
     nummerierte Liste -> kleine Petrol-Kreise mit Ziffer
     Feld "Subheader"  -> graue Unterzeile                    */

.atg-servicekarten.section {
    padding-block: var(--atg-sk-band-top) var(--atg-sk-band-bottom);
    background-color: var(--atg-ss-band-light);
}

.atg-servicekarten .card-group-element {
    display: grid;
    grid-template-columns: var(--atg-sk-cols);
    gap: var(--atg-sk-gap);
    margin: 0;
}

.atg-servicekarten .card-group-element-item {
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.atg-servicekarten .card {
    position: relative;
    flex: 1;
    padding: var(--atg-sk-pad);
    border: 0;
    border-radius: var(--atg-ss-card-radius);
    background-color: var(--atg-sk-bg);
    box-shadow: var(--atg-sk-shadow);
}

.atg-servicekarten .card-body {
    padding: 0;
}

.atg-servicekarten .card-title {
    margin: 0;
    font-size: var(--atg-sk-title-fs);
    font-weight: 700;
    line-height: 1.2;
    color: var(--atg-ss-head);
}

.atg-servicekarten .card-subtitle {
    margin: .25em 0 0;
    font-size: var(--atg-sk-sub-fs);
    font-weight: 400;
    line-height: 1.4;
    color: var(--atg-sk-sub);
}

.atg-servicekarten .card-body :is(ul, ol) {
    display: flex;
    flex-direction: column;
    gap: var(--atg-sk-item-gap);
    margin-top: var(--atg-sk-list-top);
}

.atg-servicekarten .card-body ul li {
    display: grid;
    grid-template-columns: var(--atg-sk-mark-col) 1fr;
    align-items: start;
}

.atg-servicekarten .card-body ul li::before {
    content: "";
    width: var(--atg-sk-mark-fs);
    height: 1lh;
    background-color: var(--atg-sk-mark);
    -webkit-mask: var(--atg-haken) no-repeat center / var(--atg-sk-mark-fs);
            mask: var(--atg-haken) no-repeat center / var(--atg-sk-mark-fs);
}

.atg-servicekarten .card-body ol {
    counter-reset: atg-sk;
}

.atg-servicekarten .card-body ol li {
    display: flex;
    align-items: center;
    gap: var(--atg-sk-item-gap);
    font-weight: 600;
    counter-increment: atg-sk;
}

.atg-servicekarten .card-body ol li::before {
    content: counter(atg-sk);
    flex: none;
    display: grid;
    place-items: center;
    width: var(--atg-sk-num);
    height: var(--atg-sk-num);
    border-radius: 50%;
    background-color: var(--atg-sk-num-bg);
    color: var(--atg-sk-num-fg);
    font-size: var(--atg-sk-num-fs);
    font-weight: 700;
}

/* Karte mit Bild = Petrol-Karte mit Plakette */
.atg-servicekarten .card:has(.card-img-top) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: var(--atg-sk-dark-min-h);
    background-color: var(--atg-sk-dark-bg);
    color: var(--atg-sk-dark-fg);
}

/* Bootstrap gibt .card-body flex: 1 - der Text stuende sonst oben
   unter der Plakette statt unten in der Karte. */
.atg-servicekarten .card:has(.card-img-top) .card-body {
    flex: none;
}

.atg-servicekarten .card-img-top {
    position: absolute;
    top: var(--atg-sk-badge-top);
    right: var(--atg-sk-badge-right);
    width: var(--atg-sk-badge-w);
    margin: 0;
    filter: var(--atg-sk-badge-shadow);
}

.atg-servicekarten .card-img-top img {
    display: block;
    width: 100%;
    height: auto;
}

.atg-servicekarten .card:has(.card-img-top) .card-title {
    font-size: var(--atg-sk-dark-title-fs);
    color: var(--atg-sk-dark-title);
}

.atg-servicekarten .card:has(.card-img-top) .card-body p {
    margin: .3em 0 0;
    font-size: var(--atg-sk-dark-text-fs);
    font-weight: 600;
    line-height: 1.4;
}


/* ============================================================
   14 - LAYOUT 49: SERVICE-ABHOLUNG
   ============================================================

   Text-Element: Kicker, Ueberschrift und ein optionaler Absatz
   links, rechts daneben die nummerierte Liste als drei Kreise mit
   Pfeilen dazwischen. Der Absatz steht im Backend NACH der Liste,
   das Raster holt ihn unter die Ueberschrift; Kopf und Absatz
   stehen zusammen senkrecht mittig zu den Kreisen.
   Symbole der Reihe nach: Formular, Paket, Lkw (Reihenfolge im
   Backend: Anfrage schicken, Verpacken, Abholung).

   Je Punkt: der Ring ist ein radialer Verlauf im Hintergrund des
   li, das Symbol ::before (Maske), der Pfeil zum naechsten Punkt
   ::after (Maske). Bis 767px stehen die Punkte untereinander,
   Ring links, Pfeil nach unten.                               */

.atg-serviceabholung.section {
    padding-block: var(--atg-sa-band-y);
    background-color: var(--atg-sa-band);
    color: var(--atg-on-dark);
}

.atg-serviceabholung .frame-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--atg-sa-gap);
}

.atg-serviceabholung .frame-header { grid-area: 2 / 1; }
.atg-serviceabholung p             { grid-area: 3 / 1; }
.atg-serviceabholung ol            { grid-area: 1 / 2 / 5 / 3; align-self: center; }

.atg-serviceabholung p {
    margin: var(--atg-sa-text-gap) 0 0;
    max-width: var(--atg-sa-text-max);
    font-size: var(--atg-sa-text-fs);
    line-height: 1.5;
    color: var(--atg-sa-text);
}

.atg-serviceabholung .frame-header .element-header {
    color: var(--atg-sa-kicker);
}

.atg-serviceabholung .frame-header .element-subheader {
    font-size: var(--atg-sa-head-fs);
    color: var(--atg-sa-head);
}

.atg-serviceabholung ol {
    display: flex;
    align-items: flex-start;
    gap: var(--atg-sa-item-gap);
}

.atg-serviceabholung ol li {
    position: relative;
    width: var(--atg-sa-item-w);
    padding-top: calc(var(--atg-sa-ring) + var(--atg-sa-label-gap));
    background: radial-gradient(circle closest-side,
                    transparent calc(100% - var(--atg-sa-ring-w)),
                    var(--atg-sa-ring-color) calc(100% - var(--atg-sa-ring-w)) 100%,
                    transparent 100%)
                no-repeat top center / var(--atg-sa-ring) var(--atg-sa-ring);
    font-size: var(--atg-sa-label-fs);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.atg-serviceabholung ol li::before {
    content: "";
    position: absolute;
    top: calc((var(--atg-sa-ring) - var(--atg-sa-ico)) / 2);
    left: calc(50% - var(--atg-sa-ico) / 2);
    width: var(--atg-sa-ico);
    height: var(--atg-sa-ico);
    background-color: var(--atg-sa-ico-color);
    -webkit-mask: var(--atg-sa-sym) no-repeat center / contain;
            mask: var(--atg-sa-sym) no-repeat center / contain;
}

.atg-serviceabholung ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc((var(--atg-sa-ring) - var(--atg-sa-arrow-h)) / 2);
    right: calc((var(--atg-sa-item-gap) + var(--atg-sa-arrow-w)) / -2);
    width: var(--atg-sa-arrow-w);
    height: var(--atg-sa-arrow-h);
    background-color: var(--atg-sa-arrow-color);
    -webkit-mask: var(--atg-ico-pfeil) no-repeat center / contain;
            mask: var(--atg-ico-pfeil) no-repeat center / contain;
}

.atg-serviceabholung ol li:nth-child(3n+1) { --atg-sa-sym: var(--atg-ico-formular); }
.atg-serviceabholung ol li:nth-child(3n+2) { --atg-sa-sym: var(--atg-ico-paket); }
.atg-serviceabholung ol li:nth-child(3n+3) { --atg-sa-sym: var(--atg-ico-lkw); }

/* bis 1023px: Kreise unter Kopf und Absatz - neben den Kreisen
   bliebe fuer den Absatz bei 768px nur eine Spalte von 137px */
@media (max-width: 1023.98px) {
    .atg-serviceabholung .frame-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .atg-serviceabholung .frame-header { grid-area: 1 / 1; }
    .atg-serviceabholung p             { grid-area: 2 / 1; }
    .atg-serviceabholung ol            { grid-area: 3 / 1; justify-self: start; margin-top: var(--atg-sa-gap); }
}

/* bis 767px: untereinander, Ring links, Text rechts, Pfeil nach unten */
@media (max-width: 767.98px) {

    .atg-serviceabholung ol {
        flex-direction: column;
    }

    .atg-serviceabholung ol li {
        display: flex;
        align-items: center;
        min-height: var(--atg-sa-ring);
        padding: 0 0 0 calc(var(--atg-sa-ring) + var(--atg-sa-label-gap));
        background-position: left center;
        text-align: left;
    }

    .atg-serviceabholung ol li::before {
        top: calc(50% - var(--atg-sa-ico) / 2);
        left: calc((var(--atg-sa-ring) - var(--atg-sa-ico)) / 2);
    }

    .atg-serviceabholung ol li:not(:last-child)::after {
        top: auto;
        bottom: calc((var(--atg-sa-item-gap) + var(--atg-sa-arrow-w)) / -2);
        right: auto;
        left: calc((var(--atg-sa-ring) - var(--atg-sa-arrow-w)) / 2);
        width: var(--atg-sa-arrow-w);
        height: var(--atg-sa-arrow-w);
        -webkit-mask-image: var(--atg-ico-runter);
                mask-image: var(--atg-ico-runter);
    }
}