/* ============================================================
   ATG-Gigerl - Seite "Ansprechpartner"
   Liegt unter: fileadmin/templates/css/ansprechpartner.css
   Stand: 24.09.2026 - neu

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

     32  Zitat             .atg-zitat
         Kommt auf die Card Group mit EINER Karte in der rechten
         Spalte des Einleitungs-Containers. Feld "Text" = das
         Zitat, "Image" = Portraet, "Header" = Name,
         "Subheader" = Funktion.

     33  Ansprechpartner   .atg-ansprechpartner
         Kommt auf die Card Group der Mitarbeiter. Dunkles Band,
         Glaskarten: ab 1440px vier nebeneinander, 1024-1439px
         2 x 2 mit Foto links, darunter ein Slider.

   Die Einleitung selbst (Header-Element und Container) steht
   auf Layout 29 "Einleitung hell" aus partner.css. Was diese
   Datei daran aendert, steht in Abschnitt 1.

   Muss NACH tokens.css, design.css, container.css und
   partner.css geladen werden.

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

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


/* ============================================================
   1 - EINLEITUNG MIT ZITAT (Layout 29 + 32)
   ============================================================

   Header-Element und Container stehen beide auf Layout 29.
   Zwei helle Baender liegen dann aneinander - dazwischen soll
   keine doppelte Bandluft stehen, sondern nur der Abstand
   Ueberschrift -> Text. Gilt ueberall, wo zwei Bloecke mit
   Layout 29 aufeinander folgen.                               */

.atg-einleitung.section:has(+ .atg-einleitung) {
    padding-bottom: 0;
}

.atg-einleitung.section + .atg-einleitung.section {
    padding-top: var(--atg-zi-head-gap);
}

.atg-einleitung.section:has(+ .atg-einleitung) .frame-header {
    margin-bottom: 0;
}

/* partner.css stellt die Spalten der Einleitung untereinander
   (die rechte ist dort leer). Steht rechts eine Zitatkarte,
   bleiben es zwei Spalten, bis 1023px abwaerts. */
.atg-einleitung .atg-cols:has(.atg-zitat) {
    display: grid;
    grid-template-columns: var(--atg-zi-cols);
    column-gap: var(--atg-zi-col-gap);
    row-gap: var(--atg-zi-row-gap);
    align-items: start;
}

/* Die Zeilenlaenge begrenzt hier die Spalte, nicht der Deckel
   aus partner.css - untereinander laeuft der Text ueber die
   volle Breite. */
.atg-einleitung .atg-cols:has(.atg-zitat) p {
    max-width: none;
}

/* Luft unter der Einleitung, sobald sie eine Zitatkarte hat */
.atg-einleitung.section:has(.atg-zitat) {
    padding-bottom: var(--atg-zi-band-bottom);
}

/* Luft ueber der Karte fuer den Anfuehrungs-Knopf */
.atg-einleitung .atg-cols__col:has(.atg-zitat) {
    padding-top: var(--atg-zi-top);
}

/* --- Zitat allein ---
   Steht im Container NUR die Zitatkarte (das Textelement ist am
   24.09.2026 entfallen), laeuft sie ueber die volle Breite: eine
   Spalte, die leere zweite Spalte faellt weg. Erkannt wird das
   daran, dass keine Spalte ein anderes Element als die
   Zitatkarte enthaelt - im Backend ist nichts einzustellen.
   Kommt wieder ein Textelement dazu, gilt der Aufbau oben. */
.atg-einleitung .atg-cols:has(.atg-zitat):not(:has(.atg-cols__col > .section:not(.atg-zitat))) {
    grid-template-columns: minmax(0, 1fr);
}

.atg-einleitung .atg-cols:has(.atg-zitat):not(:has(.atg-cols__col > .section:not(.atg-zitat))) > .atg-cols__col:not(:has(.atg-zitat)) {
    display: none;
}

/* Abstand Unterstrich -> Karte. Die Bandluft oben
   (--atg-zi-head-gap) steckt schon darin. */
.atg-einleitung .atg-cols:has(.atg-zitat):not(:has(.atg-cols__col > .section:not(.atg-zitat))) > .atg-cols__col:has(.atg-zitat) {
    padding-top: calc(var(--atg-zi-solo-gap) - var(--atg-zi-head-gap));
}

/* Die Huelle div.section hat aus dem Theme overflow: hidden -
   sie wuerde Knopf und Schatten der Karte abschneiden. */
.atg-einleitung .atg-cols:has(.atg-zitat) .section {
    overflow: visible;
}


/* ============================================================
   2 - DIE ZITATKARTE (Layout 32)
   ============================================================

   Markup (am 24.09.2026 im DOM der Live-Vorschau, #c180):

     div.card
       div.card-img-top > picture > img   Feld "Image"
       div.card-body
         h2.card-title                    Feld "Header"
         h3.card-subtitle                 Feld "Subheader"
         p                                Feld "Text"

   Gezeichnet ist: Zitat oben, Linie, darunter Portraet mit
   Name und Funktion. Der Textteil wird mit display: contents
   aufgeloest, die Karte ist ein Raster mit zwei Spalten, und
   "order" stellt die Reihenfolge her - das Raster verteilt die
   Teile in dieser Reihenfolge. Am Markup aendert sich nichts.
   Besteht das Zitat aus mehreren Absaetzen, stehen sie alle
   oben, die Linie kommt unter den letzten.                    */

.atg-zitat .card-group-element {
    display: block;
    margin: 0;
    padding: 0;
}

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

.atg-zitat .card {
    position: relative;
    display: grid;
    grid-template-columns: var(--atg-zi-portrait) minmax(0, 1fr);
    column-gap: var(--atg-zi-portrait-gap);
    align-items: center;
    padding: var(--atg-zi-pad-top) var(--atg-zi-pad-right)
             var(--atg-zi-pad-bottom) var(--atg-zi-pad-x);
    border: 1px solid var(--atg-zi-line);
    border-radius: var(--atg-zi-radius);
    background: var(--atg-zi-bg);
    box-shadow: var(--atg-zi-shadow);
    overflow: visible;
}

/* Runder Anfuehrungs-Knopf, mittig auf der Oberkante.
   Zeichen aus Font Awesome, kein Text. */
.atg-zitat .card::before {
    content: "\f10d";
    position: absolute;
    top: calc(var(--atg-zi-knob) / -2);
    left: var(--atg-zi-knob-x);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--atg-zi-knob);
    height: var(--atg-zi-knob);
    border-radius: 50%;
    background: var(--atg-zi-knob-bg);
    color: var(--atg-zi-knob-fg);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--atg-zi-knob-fs);
    line-height: 1;
}

/* Kante links */
.atg-zitat .card::after {
    content: "";
    position: absolute;
    top: var(--atg-zi-bar-inset);
    bottom: var(--atg-zi-bar-inset);
    left: -1px;
    width: var(--atg-zi-bar);
    background: var(--atg-zi-bar-color);
}

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

/* --- Das Zitat --- */

.atg-zitat .card-body > p {
    order: 1;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    font-size: var(--atg-zi-quote-fs);
    font-weight: 600;
    line-height: var(--atg-zi-quote-lh);
    color: var(--atg-zi-quote-color);
    text-wrap: pretty;
}

.atg-zitat .card-body > p + p {
    margin-top: calc(var(--atg-zi-quote-fs) * var(--atg-zi-quote-lh) / 2);
}

.atg-zitat .card-body > p:last-of-type {
    margin-bottom: var(--atg-zi-foot-gap);
    padding-bottom: var(--atg-zi-rule-gap);
    border-bottom: 1px solid var(--atg-zi-line);
}

/* --- Portraet --- */

.atg-zitat .card-img-top {
    order: 2;
    grid-row: span 2;
    width: var(--atg-zi-portrait);
    height: var(--atg-zi-portrait);
    margin: 0;
    padding: 0;
    border: var(--atg-zi-portrait-line) solid var(--atg-accent);
    border-radius: 50%;
    background: var(--atg-ap-photo-bg);
    overflow: hidden;
}

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

.atg-zitat .card-img-top img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--atg-zi-portrait-pos);
}

/* --- Name und Funktion --- */

.atg-zitat .card-title {
    order: 3;
    align-self: end;
    margin: 0;
    font-size: var(--atg-zi-name-fs);
    font-weight: 700;
    line-height: 1.25;
    color: var(--atg-zi-name-color);
}

.atg-zitat .card-subtitle {
    order: 4;
    align-self: start;
    margin: 0;
    /* normaler Umbruch statt "balance" aus design.css */
    text-wrap: wrap;
    font-size: var(--atg-zi-role-fs);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: var(--atg-zi-role-track);
    text-transform: uppercase;
    color: var(--atg-zi-role-color);
}

/* --- Breite Karte (Zitat allein, ab 1024px) ---
   Zitat links, senkrechte Trennlinie, rechts Portraet mit Name
   und Funktion. Die Karte ist dadurch nur so hoch wie zwei bis
   drei Zitatzeilen - die Ansprechpartner stehen schon beim
   Oeffnen der Seite im Bild. */
@media (min-width: 1024px) {
    .atg-einleitung .atg-cols:not(:has(.atg-cols__col > .section:not(.atg-zitat))) .atg-zitat .card {
        grid-template-columns: minmax(0, 1fr) var(--atg-zi-portrait) auto;
        padding: var(--atg-zi-wide-pad-y) var(--atg-zi-wide-pad-right)
                 var(--atg-zi-wide-pad-y) var(--atg-zi-pad-x);
    }

    .atg-einleitung .atg-cols:not(:has(.atg-cols__col > .section:not(.atg-zitat))) .atg-zitat .card-body > p {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        margin: 0 var(--atg-zi-divider-gap) 0 0;
        padding: 0 var(--atg-zi-divider-gap) 0 0;
        border-bottom: 0;
        border-right: 1px solid var(--atg-zi-line);
        font-size: var(--atg-zi-wide-quote-fs);
    }

    .atg-einleitung .atg-cols:not(:has(.atg-cols__col > .section:not(.atg-zitat))) .atg-zitat .card-img-top {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .atg-einleitung .atg-cols:not(:has(.atg-cols__col > .section:not(.atg-zitat))) .atg-zitat .card-title {
        grid-column: 3;
        grid-row: 1;
    }

    .atg-einleitung .atg-cols:not(:has(.atg-cols__col > .section:not(.atg-zitat))) .atg-zitat .card-subtitle {
        grid-column: 3;
        grid-row: 2;
    }
}

/* Ohne Portraet rutschen Name und Funktion nach links */
.atg-zitat .card:not(:has(.card-img-top)) :is(.card-title, .card-subtitle) {
    grid-column: 1 / -1;
}


/* ============================================================
   3 - DAS BAND (Layout 33)
   ============================================================ */

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

/* Das Theme gibt jedem Inhaltselement Luft oben und unten -
   innerhalb des Bandes kaeme sie zur Bandluft dazu. */
.atg-ansprechpartner .frame {
    padding-block: 0;
}

/* Falls im Feld "Header" der Card Group eine Ueberschrift
   steht: dieselbe Optik wie die Blockueberschriften der Seite
   "Partner", weiss auf dem dunklen Band. */
.atg-ansprechpartner .frame-header {
    margin: 0 0 var(--atg-pa-head-gap);
}

.atg-ansprechpartner .frame-header .element-header {
    margin-bottom: 0;
    font-size: var(--atg-pa-head-fs);
    color: var(--atg-on-dark);
    --atg-h-underline: var(--atg-accent);
}


/* ============================================================
   4 - DIE KARTEN (Layout 33)
   ============================================================

   Markup (am 24.09.2026 im DOM der Live-Vorschau, #c171):

     div.card-group-element
       div.card-group-element-item > div.card
         div.card-img-top > picture > img   Feld "Image"
         div.card-body
           h2.card-title                    Feld "Header"  (Name)
           h3.card-subtitle                 Feld "Subheader" (Funktion)
           p > a[href^="tel:"]              Telefon
           p > a[href^="mailto:"]           E-Mail

   Was im Backend-Feld "Columns" steht, spielt keine Rolle.
   Die Kontaktzeilen stehen unten buendig: die Linie ueber
   ihnen liegt in allen Karten einer Reihe auf derselben Hoehe,
   auch wenn eine Funktion zweizeilig ist.                     */

.atg-ansprechpartner .card-group-element {
    display: grid;
    grid-template-columns: repeat(var(--atg-ap-cols), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--atg-ap-gap);
    margin: 0;
    padding: 0;
}

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

.atg-ansprechpartner .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid var(--atg-ap-glass-line);
    border-radius: var(--atg-ap-radius);
    background: var(--atg-ap-glass-bg);
    box-shadow: var(--atg-ap-shadow);
    -webkit-backdrop-filter: blur(var(--atg-ap-glass-blur));
    backdrop-filter: blur(var(--atg-ap-glass-blur));
    color: var(--atg-on-dark);
    /* Fotoecken und Zoom beim Darueberfahren */
    overflow: hidden;
}

/* --- Foto ---
   Das Feld hat ein festes Seitenverhaeltnis, das Foto fuellt
   es aus. Ein neues Foto im Feld "Image" passt dadurch ohne
   Aenderung hier; der Ausschnitt laesst sich im Backend ueber
   "Bild bearbeiten" (Zuschnitt) nachjustieren. */

.atg-ansprechpartner .card-img-top {
    flex: 0 0 auto;
    aspect-ratio: var(--atg-ap-photo-ratio);
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--atg-ap-photo-bg);
    overflow: hidden;
}

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

.atg-ansprechpartner .card-img-top img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--atg-ap-photo-pos);
    transition: transform var(--atg-ap-zoom-time);
}

/* --- Textteil --- */

.atg-ansprechpartner .card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--atg-ap-pad-top) var(--atg-ap-pad-right)
             var(--atg-ap-pad-bottom) var(--atg-ap-pad-x);
    background: none;
    /* Bezugsgroesse fuer die Schrift der Kontaktzeilen (cqi) */
    container-type: inline-size;
}

.atg-ansprechpartner .card-title {
    margin: 0;
    font-size: var(--atg-ap-name-fs);
    font-weight: 700;
    line-height: 1.2;
    color: var(--atg-ap-name-color);
}

.atg-ansprechpartner .card-subtitle {
    min-height: calc(var(--atg-ap-role-lines) * 1lh);
    margin: var(--atg-ap-role-gap) 0 var(--atg-ap-rule-gap);
    font-size: var(--atg-ap-role-fs);
    font-weight: 700;
    line-height: var(--atg-ap-role-lh);
    letter-spacing: var(--atg-ap-role-track);
    text-transform: uppercase;
    color: var(--atg-ap-role-color);
    /* design.css verteilt Ueberschriften gleichmaessig (balance).
       Gezeichnet ist der normale Umbruch: "BUCHHALTUNG & OFFICE"
       in der ersten Zeile, "MANAGEMENT" in der zweiten. */
    text-wrap: wrap;
}

/* --- Kontaktzeilen ---
   Jede Zeile ist ein eigener Absatz. Die erste traegt die
   Linie und wird nach unten geschoben. Der Absatz selbst ist
   kleiner und gedaempft - das trifft nur Text, der NICHT im
   Link steht, z. B. "(Zentrale)". */

.atg-ansprechpartner .card-body > p {
    position: relative;
    margin: 0;
    font-size: var(--atg-ap-contact-note-fs);
    /* feste Zeilenhoehe: eine Zeile ohne Link ist gleich hoch
       wie eine mit - sonst laege die Linie nicht in allen
       Karten auf derselben Hoehe */
    line-height: calc(var(--atg-ap-contact-fs) * var(--atg-ap-contact-lh));
    color: var(--atg-ap-contact-note);
    overflow-wrap: anywhere;
}

.atg-ansprechpartner .card-body > p:first-of-type {
    margin-top: auto;
    padding-top: var(--atg-ap-contact-top);
    border-top: 1px solid var(--atg-ap-rule);
}

.atg-ansprechpartner .card-body > p + p {
    margin-top: var(--atg-ap-contact-gap);
}

/* Das !important ist noetig, weil design.css
   "main a { color: #52bfd3 !important }" setzt. Fett aus dem
   Backend wird angeglichen - alle Karten sehen gleich aus. */
.atg-ansprechpartner .card-body > p a {
    font-size: clamp(var(--atg-ap-contact-fs-min),
                     (100cqi - var(--atg-ap-icon) - var(--atg-ap-icon-gap)) / var(--atg-ap-contact-fit),
                     var(--atg-ap-contact-fs));
    font-weight: 600;
    color: var(--atg-ap-contact-color) !important;
    text-decoration: none;
    transition: color var(--atg-ap-hover-time);
}

.atg-ansprechpartner .card-body > p :is(strong, b) {
    font-weight: inherit;
}

/* Symbol vor Telefon und E-Mail. Erkannt wird die Zeile am
   Link - im Backend ist dafuer nichts einzustellen. */
.atg-ansprechpartner .card-body > p:has(> a[href^="tel:"]),
.atg-ansprechpartner .card-body > p:has(> a[href^="mailto:"]) {
    padding-left: calc(var(--atg-ap-icon) + var(--atg-ap-icon-gap));
}

.atg-ansprechpartner .card-body > p:has(> a[href^="tel:"])::before,
.atg-ansprechpartner .card-body > p:has(> a[href^="mailto:"])::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--atg-ap-icon);
    height: var(--atg-ap-icon);
    background-color: var(--atg-ap-icon-color);
    -webkit-mask: var(--atg-ap-icon-tel) center / contain no-repeat;
    mask: var(--atg-ap-icon-tel) center / contain no-repeat;
}

.atg-ansprechpartner .card-body > p:has(> a[href^="mailto:"])::before {
    -webkit-mask-image: var(--atg-ap-icon-mail);
    mask-image: var(--atg-ap-icon-mail);
}

/* Senkrecht mittig zur ersten Textzeile. Die erste Zeile
   beginnt beim ersten Absatz erst unter der Linie. */
.atg-ansprechpartner .card-body > p::before {
    top: calc((var(--atg-ap-contact-fs) * var(--atg-ap-contact-lh) - var(--atg-ap-icon)) / 2);
}

.atg-ansprechpartner .card-body > p:first-of-type::before {
    top: calc(var(--atg-ap-contact-top)
              + (var(--atg-ap-contact-fs) * var(--atg-ap-contact-lh) - var(--atg-ap-icon)) / 2);
}

/* Die Zeile faerbt sich nur, wenn die Maus auf ihr steht */
.atg-ansprechpartner .card-body > p a:hover,
.atg-ansprechpartner .card-body > p a:focus-visible {
    color: var(--atg-ap-contact-hover) !important;
}

.atg-ansprechpartner .card-body > p a:focus-visible {
    outline: 2px solid var(--atg-accent);
    outline-offset: 2px;
}


/* ============================================================
   5 - HOVER
   ============================================================
   Karte hebt sich, Foto zoomt leicht. Bewegt wird mit
   transform - das laeuft ohne Neuberechnung des Seitenaufbaus.
   Auf Touch-Geraeten passiert nichts.                         */

@media (hover: hover) {
    .atg-ansprechpartner .card {
        transition: transform var(--atg-ap-hover-time),
                    box-shadow var(--atg-ap-hover-time),
                    border-color var(--atg-ap-hover-time);
    }

    .atg-ansprechpartner .card:hover,
    .atg-ansprechpartner .card:focus-within {
        transform: translateY(calc(-1 * var(--atg-ap-lift)));
        border-color: var(--atg-ap-line-hover);
        box-shadow: var(--atg-ap-shadow-hover);
    }

    .atg-ansprechpartner .card:hover .card-img-top img {
        transform: scale(var(--atg-ap-zoom));
    }
}


/* ============================================================
   6 - 1024 BIS 1439 PIXEL: 2 x 2, FOTO LINKS
   ============================================================
   Vier Karten nebeneinander waeren bei 1024px nur rund 225px
   breit - die laengste Mail-Adresse passt dann nicht. Das Foto
   steht links, der Text daneben senkrecht mittig.             */

@media (min-width: 1024px) and (max-width: 1439.98px) {
    .atg-ansprechpartner .card {
        flex-direction: row;
    }

    .atg-ansprechpartner .card-img-top {
        flex: 0 0 var(--atg-ap-photo-w);
        align-self: stretch;
    }

    .atg-ansprechpartner .card-body {
        justify-content: center;
    }

    .atg-ansprechpartner .card-body > p:first-of-type {
        margin-top: 0;
    }
}


/* ============================================================
   7 - SLIDER UNTER 1024 PIXEL
   ============================================================
   Wie bei Produktvorschau und Partnerkarten: eine Reihe,
   waagrecht scrollbar, Wischen und Einrasten ohne JavaScript.
   Die Spur bricht um --atg-gutter aus dem Container aus.

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

@media (max-width: 1023.98px) {

    .atg-ansprechpartner .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, oben wieder abgezogen
           (Begruendung in tokens.css, "Slider auf hellem Band") */
        padding-block: var(--atg-ap-track-top) var(--atg-ap-track-bottom);
        margin-top: calc(-1 * var(--atg-ap-track-top));
    }

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

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


/* ============================================================
   8 - BEDIENELEMENTE UNTER DEM SLIDER
   ============================================================
   Eingehaengt von js/produktvorschau.js (vierter Eintrag,
   Praefix atg-ap). Dunkle Variante wie bei der Produktvorschau. */

.atg-ansprechpartner .atg-ap-nav {
    display: none;
}

@media (max-width: 1023.98px) {
    .atg-ansprechpartner .atg-ap-nav {
        display: flex;
        align-items: center;
        gap: var(--atg-ap-nav-gap);
        margin-top: calc(var(--atg-ap-nav-space) - var(--atg-ap-track-bottom));
    }
}

@media (scripting: none) {
    .atg-ansprechpartner .atg-ap-nav {
        display: none;
    }
}

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

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

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

.atg-ansprechpartner .atg-ap-buttons button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--atg-ap-round);
    height: var(--atg-ap-round);
    padding: 0;
    border: 1px solid var(--atg-ap-round-line);
    border-radius: 50%;
    background: none;
    color: var(--atg-accent);
    font-size: var(--atg-ap-round-fs);
    line-height: 0;
    cursor: pointer;
    transition: border-color var(--atg-ap-hover-time),
                color var(--atg-ap-hover-time),
                opacity var(--atg-ap-hover-time);
}

.atg-ansprechpartner .atg-ap-buttons button:disabled {
    opacity: .35;
    cursor: default;
}

@media (hover: hover) {
    .atg-ansprechpartner .atg-ap-buttons button:not(:disabled):hover {
        border-color: var(--atg-accent);
        color: var(--atg-white);
    }
}

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

/* Hinweis-Animation: der rechte Knopf wippt dreimal */

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

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

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

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


/* ============================================================
   9 - EINFLUG BEIM ERSTEN SICHTBARWERDEN
   ============================================================
   Gesteuert von js/effekte.js (Abschnitt 1c). Das Skript setzt
   am Block die Klasse atg-ap-wartet und an jeder Karte
   --atg-ap-von (-1 = von links, 1 = von rechts) und
   --atg-ap-verz (Verzoegerung). Sobald der Block ins Bild
   kommt, folgt is-da und die Karten gleiten an ihren Platz.

   Bewegt wird die Karte selbst, und zwar mit der Eigenschaft
   "translate" statt "transform". Beide wirken zusammen: das
   Anheben beim Hover (transform) kommt dem Einflug nicht in die
   Quere, und es muss hinterher nichts zurueckgesetzt werden.

   NICHT die aeussere Huelle (.card-group-element-item) bewegen:
   an ihr haengt im Slider das Einrasten (scroll-snap). Chrome
   rastet an der verschobenen Lage ein - die Spur sprang dadurch
   beim Laden um den Einflug-Weg nach rechts und die erste Karte
   stand angeschnitten da (am 24.09.2026 an der Live-Vorschau
   bemerkt).

   Die Kartennummern spielen keine Rolle - --atg-ap-von und
   --atg-ap-verz setzt das Skript an der Huelle, die Karte erbt
   sie. Ohne JavaScript fehlt atg-ap-wartet, die Karten stehen
   sofort da.                                                  */

.atg-ansprechpartner.atg-ap-wartet .card {
    opacity: 0;
    translate: calc(var(--atg-ap-von, 1) * var(--atg-ap-fly-shift)) 0;
}

.atg-ansprechpartner.atg-ap-wartet.is-da .card {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--atg-ap-fly-time) var(--atg-ap-fly-ease) var(--atg-ap-verz, 0s),
                translate var(--atg-ap-fly-time) var(--atg-ap-fly-ease) var(--atg-ap-verz, 0s),
                transform var(--atg-ap-hover-time),
                box-shadow var(--atg-ap-hover-time),
                border-color var(--atg-ap-hover-time);
}


/* ============================================================
   10 - REDUZIERTE BEWEGUNG
   ============================================================ */

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

    .atg-ansprechpartner .atg-ap-next.is-hint {
        animation: none;
    }

    .atg-ansprechpartner .atg-ap-next.is-hint::after {
        content: none;
    }

    .atg-ansprechpartner.atg-ap-wartet .card {
        opacity: 1;
        translate: none;
    }

    .atg-ansprechpartner .card-img-top img {
        transition: none;
    }
}