/* ============================================================
   ATG-Gigerl - Seite "Partner"
   Liegt unter: fileadmin/templates/css/partner.css
   Stand: 23.09.2026 - Ueberschrift als Header-Element in der Spalte

   Drei Layouts, ausgewaehlt im Backend-Feld "Layout":

     29  Einleitung hell   .atg-einleitung
         Off-white-Band unter dem Einleitungstext. Kommt auf den
         Spalten-Container der Einleitung oder direkt auf das
         Textelement - beides funktioniert.

     30  Premium-Partner   .atg-premium
         Kommt auf den 2-Spalten-Container. Dunkles Band mit
         Lichtflaechen, links die Card Group als Glaskarte,
         rechts Text und Datenliste (Layout 26).

     31  Partnerkarten     .atg-partnerkarten
         Kommt auf die Card Group. Off-white-Band, helle
         Glaskarten, ab 1024px drei nebeneinander, darunter ein
         Slider wie bei der Produktvorschau.

   Die Blockueberschriften stehen im Feld "Header" des
   Containers bzw. der Card Group - nicht als eigenes Element.
   Nur so liegen Ueberschrift und Inhalt auf EINEM Band, und
   die Lichtflaechen laufen ohne Naht durch.

   Muss NACH tokens.css, design.css, container.css und
   inhaltsbloecke.css geladen werden: die Datei braucht die
   Variablen, ueberschreibt die Ueberschriften-Optik und nimmt
   den Spalten die Ausrichtung aus container.css.

   Alle Zahlen und Farben stehen in tokens.css im Abschnitt
   SEITE "PARTNER". Diese Datei enthaelt keine.

   Selektoren beginnen mit dem Block und nicht mit ".section"
   (".atg-premium.section" statt ".section.atg-premium"): eine
   Zeile, die mit ".section" anfaengt, haelt TYPO3 fuer
   Assembler-Quelltext und lehnt den Upload ab. Steht in der
   README.
   ============================================================ */


/* ============================================================
   1 - DIE DREI BAENDER
   ============================================================ */

.atg-einleitung.section,
.atg-partnerkarten.section {
    background-color: var(--atg-pa-light);
    padding-block: var(--atg-pa-band-top) var(--atg-pa-band-bottom);
}

.atg-premium.section {
    background-color: var(--atg-pa-dark);
    padding-block: var(--atg-pa-band-top) var(--atg-pa-band-bottom);
    color: var(--atg-on-dark);
}

/* Lichtflaechen. Sie liegen als Hintergrundbild auf dem Band
   selbst und werden von dessen overflow-x: hidden sauber an
   der Bildschirmkante abgeschnitten. */
.atg-premium.section      { background-image: var(--atg-pa-glow-dark); }
.atg-partnerkarten.section { background-image: var(--atg-pa-glow-light); }

/* Jedes Inhaltselement bringt aus dem Theme 42px Luft oben und
   unten mit. Innerhalb eines Bandes kaeme sie zur Bandluft dazu
   - dieselbe Regel wie in inhaltsbloecke.css. Gilt auch fuer
   die Elemente in den Spalten des Premium-Blocks. */
:is(.atg-einleitung, .atg-premium, .atg-partnerkarten) .frame {
    padding-block: 0;
}


/* ============================================================
   2 - BLOCKUEBERSCHRIFTEN
   ============================================================

   Das Feld "Header" des Containers bzw. der Card Group. Die
   Optik der ersten Ebene bleibt (fett, Unterstrich faehrt
   ein), nur die Groesse ist kleiner als die h1 der Seite und
   der Abstand zum Inhalt fest.

   ":not(.atg-cols *)" haelt die Regel von Ueberschriften
   INNERHALB der Spalten fern.                                 */

:is(.atg-premium, .atg-partnerkarten) .frame-header:not(.atg-cols *) {
    margin: 0 0 var(--atg-pa-head-gap);
}

/* Im Premium-Block steht die Ueberschrift (Stand 23.09.2026) als
   eigenes Header-Element in der linken Spalte des Containers,
   ueber der Messer-Karte. Beide Faelle - Header-Feld des
   Containers und Header-Element in der Spalte - bekommen
   dieselbe Optik. */
.atg-premium .frame-type-header .frame-header {
    margin: 0;
}

:is(.atg-premium, .atg-partnerkarten) .frame-header:not(.atg-cols *) .element-header,
.atg-premium .frame-type-header .element-header {
    font-size: var(--atg-pa-head-fs);
    margin-bottom: 0;
}

/* Auf dem dunklen Band: Schrift weiss, Unterstrich im hellen
   Logo-Tuerkis. Der Strich haengt in design.css an der
   Variablen --atg-h-underline - sie wird hier nur umgesetzt.

   Fehler vom 23.09.2026: diese Regel galt anfangs nur fuer das
   Header-Feld des Containers (":not(.atg-cols *)"). Im Backend
   steht die Ueberschrift aber als Header-Element IN der Spalte -
   sie blieb dunkles Petrol auf dunklem Band. */
.atg-premium .frame-header:not(.atg-cols *) .element-header,
.atg-premium .frame-type-header .element-header {
    color: var(--atg-on-dark);
    --atg-h-underline: var(--atg-accent);
}


/* ============================================================
   3 - LAYOUT 29: EINLEITUNG
   ============================================================

   Liegt das Textelement in einem Spalten-Container, ist die
   zweite Spalte leer. Die Spalten stehen hier untereinander,
   eine leere Spalte hat damit keine Hoehe und kein Abstand
   bleibt stehen. Die Zeilenlaenge begrenzt der Deckel am
   Absatz, nicht die Spaltenbreite.                            */

.atg-einleitung .atg-cols {
    display: block;
}

.atg-einleitung p {
    max-width: var(--atg-pa-intro-max);
    font-size: var(--atg-pa-intro-fs);
    line-height: var(--atg-pa-intro-lh);
    color: var(--atg-pa-intro-text);
}

.atg-einleitung .frame-inner > :last-child,
.atg-einleitung p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   4 - LAYOUT 30: PREMIUM-PARTNER
   ============================================================

   Markup am 23.09.2026 im DOM der Live-Vorschau nachgesehen:

     div.atg-cols.atg-cols--2
       div.atg-cols__col      Card Group, 1 Spalte (Messer)
       div.atg-cols__col      Textelement, darunter Layout 26

   container.css stellt Spalten oben buendig. Hier stehen sie
   senkrecht mittig - so gezeichnet: Mitte der Glaskarte und
   Mitte der rechten Spalte liegen bei 1440px auf demselben
   Pixel.                                                      */

.atg-premium .atg-cols {
    column-gap: var(--atg-pa-col-gap);
    row-gap: 0;
    align-items: center;
}

/* Steht die Ueberschrift als Header-Element in der linken
   Spalte, laege sie sonst ueber der Karte - die rechte Spalte
   wuerde gegen Ueberschrift UND Karte mittig gestellt und stuende
   zu tief. Die linke Spalte wird deshalb aufgeloest
   (display: contents): ihre Elemente werden selbst Teil des
   Rasters. Die Ueberschrift laeuft ueber beide Spalten, darunter
   stehen Karte und Text nebeneinander - wie in der Vorlage.
   Ohne Header-Element in der Spalte aendert sich nichts. */
.atg-premium .atg-cols > .atg-cols__col:first-child {
    display: contents;
}

.atg-premium .atg-cols > .atg-cols__col:first-child > .section:has(.frame-type-header) {
    grid-column: 1 / -1;
    margin-bottom: var(--atg-pa-head-gap);
}

/* --- Rechte Spalte: Text --- */

.atg-premium .atg-cols__col p:not(.atg-datenliste p) {
    font-size: var(--atg-pa-text-fs);
    line-height: var(--atg-pa-text-lh);
    color: var(--atg-pa-text);
}

.atg-premium .atg-cols__col .frame-inner > :last-child {
    margin-bottom: 0;
}

/* Text -> Datenliste. Die Datenliste ist ein eigenes
   Textelement mit Layout 26 "Datenliste dunkel"; dessen Regeln
   stehen in inhaltsbloecke.css und gelten hier unveraendert.
   Nur rechte Spalte: links folgt die Karte auf das
   Header-Element, dort gilt der Abstand der Ueberschrift. */
.atg-premium .atg-cols__col:last-child > .section + .section {
    margin-top: var(--atg-pa-dl-gap);
}

/* Jedes Inhaltselement steckt in einem div.section, und das hat
   aus dem Theme overflow: hidden. Um die Glaskarte herum schnitt
   diese Huelle den Schatten mit gerader Kante ab. In den Spalten
   dieses Blocks gibt es nichts, was seitlich ausbrechen muesste -
   der Schnitt entfaellt. */
.atg-premium .atg-cols .section {
    overflow: visible;
}


/* ============================================================
   5 - DIE GLASKARTE (Card Group in der linken Spalte)
   ============================================================

   Markup der Card Group:

     div.card-group-element.card-group-element-columns-1
       div.card-group-element-item > div.card
         div.card-img-top > picture > img   Feld "Image"
         div.card-body
           h2.card-title                    Feld "Header"
           h3.card-subtitle                 Feld "Subheader"
         div.card-footer > a.btn            Felder "Link"/"Title"

   Gezeichnet ist eine andere Reihenfolge: Plakette, Logo,
   darunter Firmenname und Knopf. Der Textteil wird deshalb mit
   display: contents aufgeloest - Titel und Unterueberschrift
   werden damit selbst Teil der Karte und lassen sich per
   order einzeln setzen. Am Markup aendert sich nichts.

   Die Karte ist ein umbrechender Flex-Kasten: die Plakette
   steht allein in der ersten Zeile, weil das Logo die volle
   Breite braucht; Name und Knopf teilen sich die letzte Zeile
   und brechen um, sobald der Platz nicht reicht.              */

/* Das Theme rechnet die Kartenbreite selbst aus
   (width: calc(100% / --cardgroup-columns - ...)). Dieselbe
   Falle wie bei der Produktvorschau - zurueckgesetzt. */
.atg-premium .card-group-element {
    display: block;
    margin: 0;
    padding: 0;
}

.atg-premium .card-group-element-item {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.atg-premium .card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--atg-pa-name-gap);
    row-gap: var(--atg-pa-row-gap);
    padding: var(--atg-pa-glass-pad);
    border: 1px solid var(--atg-pa-glass-line);
    border-radius: var(--atg-pa-glass-radius);
    background: var(--atg-pa-glass-bg);
    box-shadow: var(--atg-pa-glass-shadow);
    -webkit-backdrop-filter: blur(var(--atg-pa-glass-blur)) saturate(1.2);
    backdrop-filter: blur(var(--atg-pa-glass-blur)) saturate(1.2);
    color: var(--atg-on-dark);
}

/* Glanzverlauf links oben. Liegt UEBER dem Inhalt, wie ein
   Lichtreflex auf der Glasscheibe; Klicks gehen durch. */
.atg-premium .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--atg-pa-glass-sheen);
    pointer-events: none;
}

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

/* --- Plakette: Feld "Subheader" --- */

.atg-premium .card-subtitle {
    order: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--atg-pa-badge-gap);
    height: var(--atg-pa-badge-h);
    margin: 0 0 var(--atg-pa-badge-space);
    padding-inline: var(--atg-pa-badge-pad);
    border-radius: var(--atg-pa-badge-h);
    background: var(--atg-pa-badge-bg);
    color: var(--atg-pa-badge-fg);
    font-size: var(--atg-pa-badge-fs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--atg-pa-badge-track);
    text-transform: uppercase;
    text-wrap: nowrap;
}

/* Stern aus Font Awesome (liegt ohnehin auf der Seite). Ein
   Zeichen, kein Text - der Text kommt aus dem Backend. */
.atg-premium .card-subtitle::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--atg-pa-badge-star);
    letter-spacing: 0;
}

/* --- Logoflaeche --- */

.atg-premium .card-img-top {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--atg-pa-logo-box-h);
    margin: 0 0 var(--atg-pa-logo-space);
    padding: 0;
    border-radius: var(--atg-pa-logo-radius);
    background: var(--atg-white);
    overflow: hidden;
}

.atg-premium .card-img-top picture {
    display: contents;
}

/* TYPO3 schreibt Breite und Hoehe der Datei ans img. Die
   Logodatei ist auf eine einheitliche Flaeche zugeschnitten,
   deshalb genuegt hier die Hoehe. */
.atg-premium .card-img-top img {
    display: block;
    width: auto;
    height: var(--atg-pa-logo-h);
    max-width: 100%;
    object-fit: contain;
}

/* --- Firmenname --- */

.atg-premium .card-title {
    order: 3;
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--atg-pa-name-fs);
    font-weight: 700;
    line-height: 1.2;
    color: var(--atg-on-dark);
}

/* --- Knopf --- */

.atg-premium .card-footer {
    order: 4;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}


/* ============================================================
   6 - LAYOUT 31: PARTNERKARTEN
   ============================================================

   Card Group mit drei Karten. Ab 1024px ein Raster mit drei
   Spalten, darunter ein Slider - Formel, Spur und
   Bedienelemente wie bei der Produktvorschau. Was im
   Backend-Feld "Columns" steht, spielt keine Rolle.           */

.atg-partnerkarten .card-group-element {
    display: grid;
    grid-template-columns: repeat(var(--atg-pk-cols), minmax(0, 1fr));
    /* gleiche Hoehe fuer alle Karten, auch bei ungleich
       langem Text */
    grid-auto-rows: 1fr;
    gap: var(--atg-pk-gap);
    margin: 0;
    padding: 0;
}

/* width:100% ist Pflicht: das Theme rechnet die Breite sonst
   im Raster ein zweites Mal durch --cardgroup-columns. */
.atg-partnerkarten .card-group-element-item {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.atg-partnerkarten .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--atg-pk-pad);
    border: 1px solid var(--atg-pk-glass-line);
    border-radius: var(--atg-pk-radius);
    background: var(--atg-pk-glass-bg);
    box-shadow: var(--atg-pk-shadow);
    -webkit-backdrop-filter: blur(var(--atg-pk-glass-blur));
    backdrop-filter: blur(var(--atg-pk-glass-blur));
}

/* --- Logoflaeche --- */

.atg-partnerkarten .card-img-top {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: var(--atg-pk-logo-box-h);
    margin: 0;
    padding: 0;
    border: 1px solid var(--atg-line);
    border-radius: var(--atg-pk-logo-radius);
    background: var(--atg-white);
    overflow: hidden;
}

.atg-partnerkarten .card-img-top picture {
    display: contents;
}

.atg-partnerkarten .card-img-top img {
    display: block;
    width: auto;
    height: var(--atg-pk-logo-h);
    max-width: 100%;
    object-fit: contain;
}

/* --- Titel und Text --- */

.atg-partnerkarten .card-body {
    flex: 1 1 auto;
    margin: var(--atg-pk-title-gap) 0 0;
    padding: 0;
    background: none;
}

/* Ohne "balance" bliebe bei 1280px "OG" allein in der zweiten
   Zeile von "Gigerl & Kollmann Schweisstechnik OG". */
.atg-partnerkarten .card-title {
    margin: 0 0 var(--atg-pk-text-gap);
    font-size: var(--atg-pk-title-fs);
    font-weight: 700;
    line-height: 1.25;
    color: var(--atg-h1);
    text-wrap: balance;
}

.atg-partnerkarten .card-body p {
    margin: 0;
    font-size: var(--atg-pk-body-fs);
    line-height: 1.55;
    color: var(--atg-text-soft);
}

/* --- Knopf --- */

.atg-partnerkarten .card-footer {
    flex: 0 0 auto;
    margin: var(--atg-pk-btn-gap) 0 0;
    padding: 0;
    border: 0;
    background: none;
}


/* ============================================================
   7 - DIE KNOEPFE BEIDER BLOECKE
   ============================================================

   Von bootstrap_package kommt der Knopf als a.btn.btn-default
   mit oranger Flaeche - das wird vollstaendig zurueckgesetzt.
   Das !important auf der Textfarbe ist noetig, weil design.css
   "main a { color: #52bfd3 !important }" setzt.

   Der Pfeil ist ein Zeichen aus Font Awesome und wandert beim
   Darueberfahren des KNOPFES nach rechts - nicht schon beim
   Darueberfahren der Karte.                                   */

:is(.atg-premium, .atg-partnerkarten) a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-pa-arrow-gap);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--atg-pa-btn-h);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color var(--atg-pa-hover-time),
                border-color var(--atg-pa-hover-time),
                color var(--atg-pa-hover-time),
                box-shadow var(--atg-pa-hover-time);
}

:is(.atg-premium, .atg-partnerkarten) a.btn::after {
    content: "\f061";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--atg-pa-arrow-fs);
    transition: transform var(--atg-pa-hover-time);
}

:is(.atg-premium, .atg-partnerkarten) a.btn:hover::after,
:is(.atg-premium, .atg-partnerkarten) a.btn:focus-visible::after {
    transform: translateX(var(--atg-pa-arrow-shift));
}

/* --- Premium: gefuellt hell, beim Darueberfahren weiss --- */

.atg-premium a.btn {
    height: var(--atg-pa-btn-h);
    padding-inline: var(--atg-pa-btn-pad);
    font-size: var(--atg-pa-btn-fs);
    background: var(--atg-pa-btn-bg);
    color: var(--atg-pa-btn-fg) !important;
    box-shadow: var(--atg-pa-btn-glow);
}

.atg-premium a.btn:hover,
.atg-premium a.btn:focus-visible {
    background: var(--atg-pa-btn-hover);
    border-color: var(--atg-pa-btn-hover);
    color: var(--atg-pa-btn-fg) !important;
}

/* --- Partnerkarten: Umriss, beim Darueberfahren gefuellt --- */

.atg-partnerkarten a.btn {
    height: var(--atg-pk-btn-h);
    padding-inline: var(--atg-pk-btn-pad);
    font-size: var(--atg-pk-btn-fs);
    background: none;
    border-color: var(--atg-pk-btn-line);
    color: var(--atg-pk-btn-fg) !important;
}

.atg-partnerkarten a.btn:hover,
.atg-partnerkarten a.btn:focus-visible {
    background: var(--atg-pk-btn-hover);
    border-color: var(--atg-pk-btn-hover);
    color: var(--atg-pk-btn-hover-fg) !important;
}

:is(.atg-premium, .atg-partnerkarten) a.btn:focus-visible {
    outline: 2px solid var(--atg-accent);
    outline-offset: 2px;
}


/* ============================================================
   8 - HOVER DER KARTEN
   ============================================================

   Die Karte hebt sich, sobald die Maus irgendwo auf ihr steht.
   Der Knopf reagiert davon unabhaengig erst, wenn die Maus auf
   ihm selbst steht - die Karte bleibt dabei oben. Dieselbe
   Regel wie bei "Persoenlich erreichbar" und den Hinweiskarten.

   Bewegt wird mit transform, nicht mit margin oder top - das
   laeuft ohne Neuberechnung des Seitenaufbaus. Auf
   Touch-Geraeten passiert nichts.                             */

@media (hover: hover) {
    .atg-premium .card,
    .atg-partnerkarten .card {
        transition: transform var(--atg-pa-hover-time),
                    box-shadow var(--atg-pa-hover-time),
                    border-color var(--atg-pa-hover-time),
                    background var(--atg-pa-hover-time);
    }

    .atg-premium .card:hover,
    .atg-premium .card:focus-within {
        transform: translateY(calc(-1 * var(--atg-pa-lift)));
        border-color: var(--atg-pa-glass-line-hover);
        background: var(--atg-pa-glass-bg-hover);
        box-shadow: var(--atg-pa-glass-shadow-hover);
    }

    .atg-partnerkarten .card:hover,
    .atg-partnerkarten .card:focus-within {
        transform: translateY(calc(-1 * var(--atg-pk-lift)));
        box-shadow: var(--atg-pk-shadow-hover);
    }
}


/* ============================================================
   9 - SCHMALERE BREITEN
   ============================================================ */

/* 768 bis 1023px: Firmenname und Knopf untereinander */
@media (max-width: 1023.98px) {
    .atg-premium .card-title {
        flex: 0 0 100%;
    }
}

/* bis 767px: Spalten untereinander (Glaskarte zuerst, so steht
   sie im Quelltext), beide Knopfarten ueber die volle Breite */
@media (max-width: 767.98px) {
    .atg-premium .card-footer {
        flex: 0 0 100%;
    }

    /* Untereinander traegt der Zeilenabstand des Rasters nichts
       mehr bei (row-gap: 0, siehe Abschnitt 4) - der Abstand
       Karte -> Text steht deshalb hier. */
    .atg-premium .atg-cols > .atg-cols__col:last-child {
        margin-top: var(--atg-pa-col-gap);
    }

    :is(.atg-premium, .atg-partnerkarten) a.btn {
        width: 100%;
    }
}


/* ============================================================
   10 - SLIDER UNTER 1024 PIXEL
   ============================================================

   Eine Reihe, waagrecht scrollbar. Wischen und Einrasten
   funktionieren ohne JavaScript. Die Spur bricht seitlich um
   --atg-gutter aus dem Container aus - die erste Karte steht
   auf der Inhaltskante, die angeschnittene laeuft bis zum
   Bildschirmrand. div.section hat overflow-x: hidden, der
   Ausbruch erzeugt also kein Querscrollen.

   Kartenbreite wie bei der Produktvorschau:

       (100% + Seitenrand - Anzahl x Abstand - Anschnitt)
       -------------------------------------------------
                          Anzahl                            */

@media (max-width: 1023.98px) {

    .atg-partnerkarten .card-group-element {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;

        margin-inline: calc(-1 * var(--atg-gutter));
        padding-inline: var(--atg-gutter);
        scroll-padding-inline-start: var(--atg-gutter);

        /* Luft fuer Schatten und Anheben - ein waagrecht
           scrollender Kasten schneidet senkrecht ebenfalls ab.
           Oben wird sie mit negativem Aussenabstand wieder
           abgezogen, damit die Karten auf dem Abstand unter der
           Ueberschrift bleiben (Begruendung in tokens.css,
           "Slider auf hellem Band"). */
        padding-block: var(--atg-pk-track-top) var(--atg-pk-track-bottom);
        margin-top: calc(-1 * var(--atg-pk-track-top));
    }

    .atg-partnerkarten .card-group-element::-webkit-scrollbar {
        display: none;
    }

    .atg-partnerkarten .card-group-element-item {
        flex: 0 0 calc(
            (100% + var(--atg-gutter)
                  - var(--atg-pk-cols) * var(--atg-pk-gap)
                  - var(--atg-pk-peek)
            ) / var(--atg-pk-cols)
        );
        max-width: var(--atg-pk-card-max);
        scroll-snap-align: start;
    }
}


/* ============================================================
   11 - BEDIENELEMENTE UNTER DEM SLIDER
   ============================================================

   Eingehaengt von js/produktvorschau.js (dritter Eintrag der
   Konfigurationsliste, Praefix atg-pk). Knoepfe als helle
   Glasknoepfe passend zu den Karten.                          */

.atg-partnerkarten .atg-pk-nav {
    display: none;
}

@media (max-width: 1023.98px) {
    .atg-partnerkarten .atg-pk-nav {
        display: flex;
        align-items: center;
        gap: var(--atg-pk-nav-gap);
        /* Die Spur hat unten mehr Luft, als zwischen Karte und
           Bedienelementen stehen soll - der Rest wird abgezogen. */
        margin-top: calc(var(--atg-pk-nav-space) - var(--atg-pk-track-bottom));
    }
}

@media (scripting: none) {
    .atg-partnerkarten .atg-pk-nav {
        display: none;
    }
}

.atg-partnerkarten .atg-pk-bar {
    flex: 1 1 auto;
    height: var(--atg-pk-bar-h);
    border-radius: var(--atg-pk-bar-h);
    background: var(--atg-pk-bar-track);
    overflow: hidden;
}

.atg-partnerkarten .atg-pk-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--atg-accent);
    transform-origin: left center;
    transition: transform var(--atg-pa-hover-time);
    will-change: transform;
}

.atg-partnerkarten .atg-pk-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: var(--atg-pk-round-gap);
}

.atg-partnerkarten .atg-pk-buttons button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--atg-pk-round);
    height: var(--atg-pk-round);
    padding: 0;
    border: 1px solid var(--atg-pk-round-line);
    border-radius: 50%;
    background: var(--atg-pk-round-bg);
    box-shadow: var(--atg-pk-round-shadow);
    -webkit-backdrop-filter: blur(var(--atg-pk-glass-blur));
    backdrop-filter: blur(var(--atg-pk-glass-blur));
    color: var(--atg-pk-round-fg);
    font-size: var(--atg-pk-round-fs);
    line-height: 0;
    cursor: pointer;
    transition: background-color var(--atg-pa-hover-time),
                color var(--atg-pa-hover-time),
                opacity var(--atg-pa-hover-time);
}

.atg-partnerkarten .atg-pk-buttons button:disabled {
    opacity: .35;
    box-shadow: none;
    cursor: default;
}

@media (hover: hover) {
    .atg-partnerkarten .atg-pk-buttons button:not(:disabled):hover {
        background: var(--atg-pk-btn-hover);
        border-color: var(--atg-pk-btn-hover);
        color: var(--atg-pk-btn-hover-fg);
    }
}

.atg-partnerkarten .atg-pk-buttons button:focus-visible {
    outline: 2px solid var(--atg-accent);
    outline-offset: 2px;
}

/* Hinweis-Animation: der rechte Knopf wippt dreimal, dazu
   laeuft ein Ring nach aussen - wie bei der Produktvorschau. */

@keyframes atg-pk-wippen {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(var(--atg-pk-hint-shift)); }
    60%      { transform: translateX(0); }
}

@keyframes atg-pk-ring {
    0%   { opacity: .55; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.6); }
    100% { opacity: 0;   transform: scale(1.6); }
}

.atg-partnerkarten .atg-pk-next.is-hint {
    animation: atg-pk-wippen var(--atg-pk-hint-time) ease-in-out 3;
}

.atg-partnerkarten .atg-pk-next.is-hint::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--atg-accent-deep);
    border-radius: 50%;
    animation: atg-pk-ring var(--atg-pk-hint-time) ease-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .atg-partnerkarten .card-group-element {
        scroll-behavior: auto;
    }

    .atg-partnerkarten .atg-pk-next.is-hint {
        animation: none;
    }

    .atg-partnerkarten .atg-pk-next.is-hint::after {
        content: none;
    }
}