/* ============================================================
   ATG-Gigerl - Startseite, Abschnitt "Onlineshop"
   Liegt unter: fileadmin/templates/css/onlineshop.css
   Stand: 23.10.2026

   Layout 41. Petrol-Band ueber "Persoenlich erreichbar". Links
   Kicker, Ueberschrift, Kennzahlen, zwei Knoepfe und eine
   Hinweiszeile, rechts der Shop als Bildschirmfoto in einem
   Browserfenster auf einer Glaskarte. Unter 1024px steht die
   Ueberschrift ueber die volle Breite, bis 767px ist alles eine
   Spalte und das Bild steht zwischen Kennzahlen und Knoepfen.

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

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

   An der Klasse .atg-onlineshop. Die schreibt der Layout-CASE
   in autogentechnik.typoscript (Nummer 41). Alles andere kommt
   aus EINER Card Group mit EINER Karte:

       div.atg-onlineshop.section
         div.reveal
           div#cNN.frame.frame-type-card_group
             ... div.frame-inner                 <- das 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  > display: contents
                       div.card                  /
                         div.card-img-top > picture > img   Feld "Image"
                         div.card-body                      Feld "Text":
                           ul                    Aufzaehlung, Zahl fett   Kennzahlen
                           p > a + a             zwei Links in EINEM Absatz
                           p                     Hinweiszeile

   Der Header der Karte ist im Backend ein Pflichtfeld. Er wird
   hier ausgeblendet (h?.card-title) - eintragen z. B.
   "Onlineshop", damit die Karte im Backend erkennbar ist.

   Die Karte hat keinen Link - der Knopf "Zum Onlineshop" ist
   der erste Link im Textfeld, damit beide Knoepfe nebeneinander
   stehen koennen. Der Link der Karte (card-footer) laege in
   einem anderen Kasten.

   Der Unterstrich der Ueberschrift ist der globale aus
   design.css (".h1 > span", einfahrend per js/effekte.js) -
   hier wird nur seine Farbe gesetzt.

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

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


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

.atg-onlineshop.section {
    background-color: var(--atg-os-band);
    background-image: var(--atg-os-glow);
    padding-block: var(--atg-os-band-top) var(--atg-os-band-bottom);
    color: var(--atg-on-dark);
}

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


/* ============================================================
   2 - RASTER
   ============================================================

   Gruppe, Eintrag und Karte loesen sich auf (display:
   contents) - Kopf, Bild und Text werden so direkte Kinder von
   .frame-inner und lassen sich in EIN Raster legen, obwohl sie
   im Markup verschieden tief stecken.

   Zeilen "1fr auto auto 1fr": Kopf und Text stehen in den
   beiden mittleren Zeilen, das Bild spannt ueber alle vier. So
   steht der Textblock senkrecht in der Mitte des Bildes.      */

.atg-onlineshop .frame-inner {
    display: grid;
    grid-template-columns: var(--atg-os-txt) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--atg-os-gap);
    align-items: center;
}

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

.atg-onlineshop .frame-header {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 var(--atg-os-head-gap);
}

.atg-onlineshop .card-body {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    padding: 0;
}

/* Die Bildspalte ist hoechstens --atg-os-shot-max breit und steht
   rechts auf der Inhaltskante; der Rest wird Luft zwischen Text
   und Bild. So bleibt das Bild etwa so hoch wie der Text. */
.atg-onlineshop .card-img-top {
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: end;
    width: 100%;
    max-width: var(--atg-os-shot-max);
}


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

.atg-onlineshop .frame-header .element-header {
    color: var(--atg-os-kicker);
}

/* Header der Karte: Pflichtfeld im Backend, hier ohne Aufgabe -
   Kicker und Ueberschrift kommen aus dem Header der Card Group */
.atg-onlineshop .card-title {
    display: none;
}

.atg-onlineshop .frame-header .element-subheader {
    margin-bottom: 0;
    font-size: var(--atg-os-head-fs);
    color: var(--atg-os-head);
    --atg-h-underline: var(--atg-os-rule);
}


/* ============================================================
   4 - KENNZAHLEN
   ============================================================

   Aufzaehlung im Textfeld, je Punkt die Zahl fett:
   "300+ Artikel". Die fette Zahl steht gross ueber der
   Beschriftung, die Punkte nebeneinander mit Trennlinie.     */

.atg-onlineshop .card-body ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block: 1px solid var(--atg-os-line);
}

.atg-onlineshop .card-body li {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: var(--atg-os-fact-pad) 0 calc(var(--atg-os-fact-pad) - 1px) var(--atg-os-fact-in);
    border-left: 1px solid var(--atg-os-line);
    font-size: var(--atg-os-label-fs);
    color: var(--atg-os-label);
}

.atg-onlineshop .card-body li:first-child {
    padding-left: 0;
    border-left: 0;
}

.atg-onlineshop .card-body li::before {
    content: none;
}

.atg-onlineshop .card-body li strong {
    display: block;
    font-size: var(--atg-os-fact-fs);
    font-weight: 700;
    line-height: var(--atg-os-fact-lh);
    color: var(--atg-os-fact-ink);
}


/* ============================================================
   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 die Hinweiskarten und die
   Partnerseite: gefuellt hell, Umriss hell, beim Darueber-
   fahren beide weiss.

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

.atg-onlineshop .card-body p:has(> a) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atg-os-btn-gap);
    margin: var(--atg-os-cta-gap) 0 0;
}

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

.atg-onlineshop .card-body p > a:first-of-type {
    background-color: var(--atg-os-btn-bg);
    color: var(--atg-os-btn-fg) !important;
}

/* Pfeil nach rechts oben: der Shop oeffnet in einem neuen Tab */
.atg-onlineshop .card-body p > a:first-of-type::after {
    content: "";
    flex: none;
    width: var(--atg-os-ico);
    height: var(--atg-os-ico);
    background-color: currentColor;
    -webkit-mask: var(--atg-os-ico-ext) center / contain no-repeat;
            mask: var(--atg-os-ico-ext) center / contain no-repeat;
}

.atg-onlineshop .card-body p > a:not(:first-of-type) {
    background-color: transparent;
    border-color: var(--atg-os-btn-line);
    color: var(--atg-os-btn-ghost-fg) !important;
}

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

.atg-onlineshop .card-body p > a:focus-visible {
    outline: var(--atg-os-focus);
    outline-offset: var(--atg-os-focus-off);
}


/* ============================================================
   6 - HINWEISZEILE
   ============================================================ */

.atg-onlineshop .card-body p:not(:has(a)) {
    margin: var(--atg-os-hint-gap) 0 0;
    font-size: var(--atg-os-hint-fs);
    line-height: var(--atg-os-hint-lh);
    color: var(--atg-os-hint);
    text-wrap: balance;
}


/* ============================================================
   7 - BILD: GLASKARTE UND BROWSERFENSTER
   ============================================================

   .card-img-top ist die Glaskarte, das picture-Element das
   Fenster. Leiste, drei Punkte und Adresszeile sind
   Pseudoelemente des Fensters - das Bildschirmfoto zeigt nur
   den Seiteninhalt des Shops.

   Das Bild fuellt sein Feld mit festem Seitenverhaeltnis und
   ist oben links verankert: ein anders geschnittenes Foto
   veraendert die Hoehe des Abschnitts nicht. Das Feld ist
   flacher als das Foto - gezeigt wird der obere Teil des Shops.                  */

.atg-onlineshop .card-img-top {
    margin: 0;
    padding: var(--atg-os-glass-pad);
    border: 1px solid var(--atg-os-glass-line);
    border-radius: var(--atg-os-glass-radius);
    background: var(--atg-os-glass-bg);
    box-shadow: var(--atg-os-glass-shadow);
    -webkit-backdrop-filter: blur(var(--atg-os-glass-blur));
            backdrop-filter: blur(var(--atg-os-glass-blur));
    overflow: visible;
}

.atg-onlineshop .card-img-top picture {
    display: block;
    position: relative;
    padding-top: var(--atg-os-bar-h);
    border-radius: var(--atg-os-win-radius);
    background: var(--atg-os-win-bg);
    overflow: hidden;
}

/* Leiste mit drei Punkten */
.atg-onlineshop .card-img-top picture::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--atg-os-bar-h);
    box-sizing: border-box;
    border-bottom: 1px solid var(--atg-os-bar-line);
    background-color: var(--atg-os-bar);
    background-image: var(--atg-os-dot-img), var(--atg-os-dot-img), var(--atg-os-dot-img);
    background-size: var(--atg-os-dot-d) var(--atg-os-dot-d);
    background-repeat: no-repeat;
    background-position:
        var(--atg-os-dot-in) center,
        calc(var(--atg-os-dot-in) + var(--atg-os-dot-step)) center,
        calc(var(--atg-os-dot-in) + var(--atg-os-dot-step) + var(--atg-os-dot-step)) center;
}

/* Adresszeile */
.atg-onlineshop .card-img-top picture::after {
    content: var(--atg-os-url);
    position: absolute;
    top: var(--atg-os-url-top);
    left: var(--atg-os-url-left);
    width: var(--atg-os-url-w);
    max-width: calc(100% - var(--atg-os-url-left) - var(--atg-os-dot-in));
    height: var(--atg-os-url-h);
    box-sizing: border-box;
    padding-inline: var(--atg-os-url-pad);
    border-radius: var(--atg-os-url-h);
    background: var(--atg-os-url-bg);
    font-size: var(--atg-os-url-fs);
    line-height: var(--atg-os-url-h);
    color: var(--atg-os-url-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atg-onlineshop .card-img-top img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--atg-os-shot-ratio);
    object-fit: cover;
    object-position: var(--atg-os-shot-pos);
}


/* ============================================================
   8 - 768 BIS 1023px
   ============================================================

   Ueberschrift ueber die volle Breite, darunter links
   Kennzahlen (untereinander) und Knoepfe (untereinander, in
   Spaltenbreite), rechts das Bild.                            */

@media (max-width: 1023.98px) {

    .atg-onlineshop .frame-inner {
        grid-template-rows: auto auto;
        row-gap: var(--atg-os-head-gap);
    }

    .atg-onlineshop .frame-header {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0;
    }

    /* Text oben an der Zeile: so bleibt der Abstand Ueberschrift ->
       Kennzahlen fest, auch wenn das Bild hoeher ist als der Text */
    .atg-onlineshop .card-body {
        grid-row: 2;
        align-self: start;
    }

    .atg-onlineshop .card-img-top {
        grid-row: 2;
        max-width: none;
    }

    .atg-onlineshop .card-body ul {
        flex-direction: column;
    }

    .atg-onlineshop .card-body li {
        display: flex;
        align-items: baseline;
        gap: var(--atg-os-fact-row-gap);
        padding: var(--atg-os-fact-pad) 0 calc(var(--atg-os-fact-pad) - 1px);
        border-left: 0;
        border-top: 1px solid var(--atg-os-line);
    }

    .atg-onlineshop .card-body li:first-child {
        border-top: 0;
    }

    .atg-onlineshop .card-body li strong {
        display: inline;
        min-width: var(--atg-os-fact-num-w);
    }

    .atg-onlineshop .card-body p:has(> a) {
        flex-direction: column;
    }

    .atg-onlineshop .card-body p > a {
        width: 100%;
    }
}


/* ============================================================
   9 - BIS 767px
   ============================================================

   Eine Spalte. Der Textblock loest sich ebenfalls auf, damit
   das Bild zwischen Kennzahlen und Knoepfen stehen kann. Die
   Knoepfe stehen nebeneinander, solange jeder mindestens
   --atg-os-btn-min breit sein kann, sonst untereinander in
   voller Breite.                                              */

@media (max-width: 767.98px) {

    .atg-onlineshop .frame-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
    }

    .atg-onlineshop .card-body {
        display: contents;
    }

    .atg-onlineshop .frame-header {
        order: 1;
        margin: 0 0 var(--atg-os-head-gap);
    }

    .atg-onlineshop .card-body ul {
        order: 2;
        flex-direction: row;
    }

    .atg-onlineshop .card-body li {
        display: block;
        padding: var(--atg-os-fact-pad) 0 calc(var(--atg-os-fact-pad) - 1px) var(--atg-os-fact-in);
        border-top: 0;
        border-left: 1px solid var(--atg-os-line);
    }

    .atg-onlineshop .card-body li:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .atg-onlineshop .card-body li strong {
        display: block;
        min-width: 0;
    }

    .atg-onlineshop .card-img-top {
        order: 3;
        margin-top: var(--atg-os-m-gap);
    }

    .atg-onlineshop .card-body p:has(> a) {
        order: 4;
        flex-direction: row;
        margin-top: var(--atg-os-m-gap);
    }

    .atg-onlineshop .card-body p > a {
        width: auto;
        flex: 1 1 var(--atg-os-btn-min);
    }

    .atg-onlineshop .card-body p:not(:has(a)) {
        order: 5;
        text-align: center;
    }
}