/* ============================================================
   ATG-Gigerl - Seite "Download Center"
   Liegt unter: fileadmin/templates/css/download.css
   Stand: 04.11.2026 - zwei Katalogkarten nebeneinander (Layout 37)

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

     37  Katalog     .atg-katalog
         Kommt auf die Card Group mit den Katalogen (seit
         04.11.2026 zwei Karten nebeneinander: Produktkatalog und
         ATG Online Katalog). Je Karte links ein Petrol-Feld mit
         dem Cover, das oben herausragt. Rechts:
           Feld "Subheader"  -> Kicker ueber dem Titel
           Feld "Header"     -> Titel
           Feld "Text"       -> kleine Angabenzeile (Absatz oder
                                Aufzaehlung, ab 1024px sichtbar)
           Link + Link-Titel -> Knopf; Download-Symbol bei PDF,
                                sonst Pfeil schraeg nach oben
         Bis 767px Feld oben, Karten weiter nebeneinander.

     38  Downloads   .atg-downloads
         Kommt auf JEDE Card Group mit weiteren Downloads (je
         Gruppe vier Karten). Helle Glaskarten wie die
         Partnerkarten: Cover auf weisser Flaeche, Titel,
         Umriss-Knopf. Ab 1024px vier je Reihe, darunter je
         Gruppe ein Slider mit denselben Bedienelementen wie
         bei den Partnerkarten (js/produktvorschau.js, Praefix
         atg-dl). Folgen mehrere Gruppen aufeinander, laufen
         Band und Raster ohne Naht durch.

   Die Seitenueberschrift ist ein Header-Element mit Layout 29
   "Einleitung hell" - dasselbe Off-white. Die Seite ist damit
   ein durchgehendes Band.

   Muss NACH tokens.css, design.css und partner.css geladen
   werden. Alle Zahlen und Farben stehen in tokens.css im
   Abschnitt SEITE "DOWNLOAD CENTER". Diese Datei enthaelt keine.

   Selektoren beginnen mit dem Block und nicht mit ".section" -
   sonst lehnt TYPO3 den Upload als Assembler-Quelltext ab
   (README).
   ============================================================ */


/* ============================================================
   1 - BAND UND UEBERGAENGE
   ============================================================ */

.atg-katalog.section,
.atg-downloads.section {
    background-color: var(--atg-dc-band);
    padding-block: var(--atg-dc-band-top) var(--atg-dc-band-bottom);
}

/* Theme-Luft der Inhaltselemente innerhalb des Bandes weg -
   dieselbe Regel wie in partner.css */
:is(.atg-katalog, .atg-downloads) .frame {
    padding-block: 0;
}

/* Einleitung (Seitenueberschrift) -> Katalog: ein Band. Der
   Abstand zur Karte steht oben im Katalog, dazu das Stueck, um
   das das Cover oben herausragt. */
.atg-einleitung.section:has(+ .atg-katalog) {
    padding-bottom: 0;
}

.atg-einleitung + .atg-katalog.section {
    padding-top: calc(var(--atg-dc-head-gap) + var(--atg-dc-overhang));
}

/* Katalog -> Downloads. Die Luft steht UNTEN im Katalog, nicht
   oben im naechsten Band: div.section schneidet ab, was ueber
   seinen Rand hinausragt (overflow aus dem Theme), und der
   Hintergrund des folgenden Bandes wuerde den Schatten der
   Katalogkarte ueberdecken. So bleibt der Schatten im eigenen
   Band. */
.atg-katalog.section:has(+ .atg-downloads) {
    padding-bottom: var(--atg-dc-after);
}

.atg-katalog + .atg-downloads.section {
    padding-top: 0;
}

/* Downloads -> Downloads: die naechste Gruppe schliesst mit dem
   Kartenabstand an, als waere es eine Reihe desselben Rasters.
   Der Abstand steht unten in der oberen Gruppe - dort ist auch
   Platz fuer den Schatten der Slider-Knoepfe. */
.atg-downloads.section:has(+ .atg-downloads) {
    padding-bottom: var(--atg-dl-group-gap);
}

.atg-downloads + .atg-downloads.section {
    padding-top: 0;
}

/* Hat die naechste Gruppe eine eigene Ueberschrift (Kicker und
   Firmenname), braucht sie Abstand wie ein neuer Block, nicht
   wie die naechste Reihe desselben Rasters (21.10.2026). */
.atg-downloads.section:has(+ .atg-downloads .frame-header) {
    padding-bottom: var(--atg-dl-group-head-gap);
}

/* Ab 1024px (Raster, kein Slider) darf das Band nichts
   abschneiden: sonst endet der Schatten der unteren Kartenreihe
   einer Gruppe und das Anheben der oberen Reihe der naechsten
   Gruppe mit gerader Kante an der Bandgrenze. Die Karten sind
   durch backdrop-filter eigene Ebenen und liegen damit ueber
   dem Hintergrund des Nachbarbandes. Unter 1024px bleibt das
   overflow des Themes - es beendet den seitlichen Ausbruch der
   Slider-Spur sauber an der Bildschirmkante. */
@media (min-width: 1024px) {
    .atg-downloads.section {
        overflow: visible;
    }
}


/* ============================================================
   2 - LAYOUT 37: KATALOGKARTEN
   ============================================================

   Seit 04.11.2026 zwei Kataloge nebeneinander (Vorschlag A):
   die Card Group traegt zwei Karten, Produktkatalog und
   ATG Online Katalog. Beide gleich gross, im Raster mit
   --atg-dc-cols Spalten. Steht nur eine Karte darin, laeuft sie
   ueber die volle Breite.

   Je Karte: das Petrol-Feld (card-img-top) liegt absolut links
   im Innenabstand, das Cover ragt oben heraus. Rechts als
   Spalte: Kicker (Feld "Subheader", per order vor den Titel
   gezogen), Titel, eine kleine Angabenzeile aus dem Feld "Text"
   und der Knopf. Bis 767px steht das Feld oben (Abschnitt 6).

   Bis 22.10.2026 war es EINE breite Karte mit einer Angabenzeile
   zwischen Trennlinien und dem Knopf daneben; davon ist nur die
   kleine Zeile geblieben - der Abstrich fuer zwei Karten in
   derselben Hoehe.                                            */

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

/* width:100% ist Pflicht: das Theme rechnet die Breite sonst
   aus --cardgroup-columns. */
.atg-katalog .card-group-element-item {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.atg-katalog .card-group-element-item:only-child {
    grid-column: 1 / -1;
}

.atg-katalog .card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Kicker oben, Knopf unten buendig - so stehen Kicker und
       Knoepfe beider Karten auf einer Linie, auch wenn ein Titel
       eine Zeile mehr hat */
    justify-content: flex-start;
    height: 100%;
    min-height: var(--atg-dc-min-h);
    box-sizing: border-box;
    padding: var(--atg-dc-pad-y) var(--atg-dc-pad-x) var(--atg-dc-pad-y)
             calc(var(--atg-dc-panel-w) + var(--atg-dc-pad-x));
    border: 0;
    border-radius: var(--atg-dc-radius);
    background: var(--atg-dc-bg);
    box-shadow: var(--atg-dc-shadow);
    overflow: visible;
}

/* --- Petrol-Feld mit Cover ---

   Das img wird als Kasten aufgespannt - oben ueber den
   Kartenrand hinaus, seitlich und unten mit Rand - und das Bild
   mit object-fit: contain darin eingepasst, oben angehaengt. So
   ragt es immer heraus, egal ob Hoehe oder Feldbreite begrenzt.
   drop-shadow statt box-shadow, damit der Schatten dem Bild
   folgt und nicht dem leeren Kasten des img. */

.atg-katalog .card-img-top {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--atg-dc-panel-w);
    margin: 0;
    padding: 0;
    border-radius: var(--atg-dc-radius) 0 0 var(--atg-dc-radius);
    background: var(--atg-dc-panel-glow), var(--atg-dc-panel-bg);
    overflow: visible;
}

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

.atg-katalog .card-img-top img {
    position: absolute;
    top: calc(-1 * var(--atg-dc-overhang));
    left: var(--atg-dc-cover-inset);
    width: calc(100% - 2 * var(--atg-dc-cover-inset));
    height: calc(100% + var(--atg-dc-overhang) - var(--atg-dc-cover-inset));
    max-width: none;
    object-fit: contain;
    object-position: center top;
    filter: var(--atg-dc-cover-shadow);
}

/* --- Text --- */

.atg-katalog .card-body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
}

.atg-katalog .card-subtitle {
    order: -1;
    margin: 0 0 var(--atg-dc-kicker-gap);
    font-size: var(--atg-dc-kicker-fs);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--atg-dc-kicker-track);
    text-transform: uppercase;
    color: var(--atg-dc-kicker-color);
}

.atg-katalog .card-title {
    margin: 0 0 var(--atg-dc-title-gap);
    font-size: var(--atg-dc-title-fs);
    font-weight: 700;
    line-height: 1.15;
    color: var(--atg-h1);
    text-wrap: balance;
}

/* --- kleine Angabenzeile aus dem Feld "Text" ---
   Absatz oder Aufzaehlung. Bei der Aufzaehlung ("Format PDF /
   Groesse 17,6 MB / Umfang 162 Seiten") entfallen die fetten
   Beschriftungen, die Punkte werden mit " · " verbunden. */

.atg-katalog .card-body p,
.atg-katalog .card-body ul {
    margin: 0;
    font-size: var(--atg-dc-mini-fs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--atg-dc-mini-color);
    font-variant-numeric: tabular-nums;
}

.atg-katalog .card-body ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.atg-katalog .card-body li {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

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

.atg-katalog .card-body li + li::before {
    content: var(--atg-dc-mini-sep);
    white-space: pre;
}

.atg-katalog .card-body li :is(strong, b) {
    display: none;
}

/* --- Knopf --- */

.atg-katalog .card-footer {
    align-self: flex-start;
    margin: auto 0 0;
    padding: var(--atg-dc-btn-gap) 0 0;
    border: 0;
    background: none;
}


/* ============================================================
   3 - LAYOUT 38: DOWNLOAD-KARTEN
   ============================================================ */

.atg-downloads .frame-header {
    margin: 0 0 var(--atg-dl-head-gap);
}

/* Blockueberschrift: nur das Feld, das die Header Class "h1"
   traegt - bei den Gruppen ist das der Subheader (Firmenname),
   der Header darueber ist der Kicker (Typ H4) und behaelt seine
   normale Groesse aus design.css.

   Fehler vom 30.09.2026, behoben am 21.10.: die Regel hing an
   .element-header, also am Feld "Header". Das war die Annahme,
   die Blockueberschrift stehe dort (so war es bei "Weitere
   Kataloge & Broschueren"). Seit im Header-Feld der Kicker steht,
   wurde der Kicker auf 34px aufgeblasen. Jetzt haengt die Regel
   an der Header Class, wie es die Projektregel vorsieht. */
.atg-downloads .frame-header .h1 {
    font-size: var(--atg-dl-head-fs);
    margin-bottom: 0;
}

/* Sprungziel des Kategorie-Menues (Layout 40): etwas Luft ueber
   dem Kicker, die Hoehe des klebenden Kopfes zieht
   scroll-padding-top am html schon ab */
.atg-downloads .frame {
    scroll-margin-top: var(--atg-dl-anchor-gap);
}

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

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

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

/* --- Bildrahmen 3:4 mit fester Hoehe, mittig in der Karte ---

   Verlauf:
   bis 12.10.2026  Cover mit fester Breite mittig auf weisser
                   Flaeche, 20px Luft oben und unten.
   12.10.2026      Rahmen 3:4 ueber die volle Kartenbreite, Bild
                   fuellt ihn - Karten 489px hoch (ab 1440).
   21.10.2026      Rahmen volle Breite mit fester Hoehe, Bild 3:4
                   mittig darin, Weiss links und rechts.
   21.10.2026, 2. Runde: Rueckmeldung - der Rahmen soll das Bild
                   eng umschliessen wie am 12.10., der zusaetzliche
                   Abstand gehoert AUSSERHALB des Rahmens. Jetzt:
                   Rahmen = Bild, 3:4, feste Hoehe
                   (--atg-dl-shot-h), Breite folgt aus dem
                   Verhaeltnis, mittig in der Karte. Links und
                   rechts davon steht die Glaskarte.

   box-sizing ausdruecklich (aspect-ratio zaehlt auf den Kasten,
   den box-sizing bestimmt), min-height: 0 gegen das Aufdruecken
   im Flex-Kasten. */

.atg-downloads .card-img-top {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    height: var(--atg-dl-shot-h);
    width: auto;
    max-width: 100%;
    aspect-ratio: var(--atg-dl-img-ratio);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--atg-dl-shot-line);
    border-radius: var(--atg-dl-shot-radius);
    background: var(--atg-dl-shot-bg);
    overflow: hidden;
}

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

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

/* --- Titel --- */

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

.atg-downloads .card-title {
    min-height: var(--atg-dl-title-min);
    margin: 0;
    font-size: var(--atg-dl-title-fs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--atg-h1);
    text-wrap: balance;
    hyphens: auto;
}

.atg-downloads .card-body p {
    display: none;
}

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


/* ============================================================
   4 - KNOEPFE BEIDER LAYOUTS
   ============================================================

   bootstrap_package liefert a.btn.btn-default mit oranger
   Flaeche - vollstaendig zurueckgesetzt. !important auf der
   Textfarbe wegen "main a { color: ... !important }" in
   design.css. Das Symbol ist der Download-Pfeil aus Font
   Awesome; er wippt beim Darueberfahren des KNOPFES nach
   unten, nicht schon beim Darueberfahren der Karte.           */

:is(.atg-katalog, .atg-downloads) a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atg-dc-icon-gap);
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--atg-dc-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);
}

/* Download-Symbol als Maske (bis 09.11.2026 Font Awesome) */
:is(.atg-katalog, .atg-downloads) a.btn::after {
    content: "";
    flex: none;
    width: var(--atg-dc-icon-fs);
    height: var(--atg-dc-icon-fs);
    background-color: currentColor;
    -webkit-mask: var(--atg-ico-download) center / contain no-repeat;
            mask: var(--atg-ico-download) center / contain no-repeat;
    transition: transform var(--atg-pa-hover-time);
}

:is(.atg-katalog, .atg-downloads) a.btn:hover::after,
:is(.atg-katalog, .atg-downloads) a.btn:focus-visible::after {
    transform: translateY(var(--atg-dc-icon-shift));
}

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

/* Knopf, der NICHT auf ein PDF fuehrt (ATG Online Katalog):
   Pfeil schraeg nach oben statt Download-Symbol, dieselbe
   Zeichnung wie beim Onlineshop. Erkannt an der Linkadresse -
   im Backend ist dafuer nichts einzustellen. */
:is(.atg-katalog, .atg-downloads) a.btn:not([href*=".pdf" i])::after {
    content: "";
    width: var(--atg-dc-ico-ext-size);
    height: var(--atg-dc-ico-ext-size);
    background-color: currentColor;
    -webkit-mask: var(--atg-dc-ico-ext) center / contain no-repeat;
            mask: var(--atg-dc-ico-ext) center / contain no-repeat;
}

:is(.atg-katalog, .atg-downloads) a.btn:not([href*=".pdf" i]):is(:hover, :focus-visible)::after {
    transform: translate(var(--atg-dc-ico-ext-shift), calc(-1 * var(--atg-dc-ico-ext-shift)));
}

/* --- Katalog: gefuellt --- */

.atg-katalog a.btn {
    height: var(--atg-dc-btn-h);
    padding-inline: var(--atg-dc-btn-pad);
    font-size: var(--atg-dc-btn-fs);
    background: var(--atg-dc-btn-bg);
    color: var(--atg-dc-btn-fg) !important;
}

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

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

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

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


/* ============================================================
   5 - HOVER DER KARTEN
   ============================================================

   Karte hebt sich, sobald die Maus auf ihr steht; der Knopf
   reagiert unabhaengig davon erst auf sich selbst. Nur mit Maus. */

@media (hover: hover) {
    .atg-katalog .card,
    .atg-downloads .card {
        transition: transform var(--atg-pa-hover-time),
                    box-shadow var(--atg-pa-hover-time);
    }

    .atg-katalog .card-img-top img {
        transition: transform var(--atg-pa-hover-time);
    }

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

    .atg-katalog .card:hover .card-img-top img,
    .atg-katalog .card:focus-within .card-img-top img {
        transform: translateY(calc(-1 * var(--atg-dc-cover-lift)));
    }

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


/* ============================================================
   6 - KATALOGKARTEN UNTER 1024 PIXEL
   ============================================================ */

/* bis 1023px: keine Angabenzeile (Entscheidung 22.10.2026) */
@media (max-width: 1023.98px) {
    .atg-katalog .card-body :is(p, ul) {
        display: none;
    }
}

/* bis 767px: die beiden Karten bleiben nebeneinander, das
   Petrol-Feld steht oben ueber die volle Kartenbreite (feste
   Hoehe --atg-dc-panel-h), darunter Kicker, Titel und der Knopf
   ueber die volle Breite. Das Feld bricht mit negativem
   Aussenabstand bis an die Kartenkanten aus. */
@media (max-width: 767.98px) {
    .atg-katalog .card {
        padding-left: var(--atg-dc-pad-x);
    }

    .atg-katalog .card-img-top {
        position: relative;
        inset: auto;
        order: -2;
        flex: 0 0 auto;
        width: auto;
        height: var(--atg-dc-panel-h);
        margin: calc(-1 * var(--atg-dc-pad-y)) calc(-1 * var(--atg-dc-pad-x)) var(--atg-dc-pad-y);
        border-radius: var(--atg-dc-radius) var(--atg-dc-radius) 0 0;
    }

    .atg-katalog .card-body {
        flex: 1 1 auto;
    }

    .atg-katalog .card-footer {
        align-self: stretch;
    }

    .atg-katalog a.btn {
        width: 100%;
    }
}


/* ============================================================
   7 - DOWNLOADS UNTER 1024 PIXEL: SLIDER
   ============================================================

   Wie bei den Partnerkarten: eine Reihe, waagrecht scrollbar,
   Einrasten ohne JavaScript, die Spur bricht um --atg-gutter
   seitlich aus. Jede Card Group ist ein eigener Slider.

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

@media (max-width: 1023.98px) {

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

        padding-block: var(--atg-dl-track-top) var(--atg-dl-track-bottom);
        margin-top: calc(-1 * var(--atg-dl-track-top));
    }

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

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

    /* Ohne Bedienelemente (kein JavaScript) zieht die Luft der
       Spur unten nichts ab - die naechste Gruppe rueckt dann
       entsprechend weiter weg. Mit ihnen gleicht nav aus. */
}

@media (max-width: 767.98px) {
    .atg-downloads a.btn {
        width: 100%;
    }
}


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

   Eingehaengt von js/produktvorschau.js (Praefix atg-dl).
   Regeln und Werte 1:1 wie bei den Partnerkarten: dieselben
   Glasknoepfe mit den Zeichen aus dem Skript, derselbe Balken. */

.atg-downloads .atg-dl-nav {
    display: none;
}

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

@media (scripting: none) {
    .atg-downloads .atg-dl-nav {
        display: none;
    }
}

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

.atg-downloads .atg-dl-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-downloads .atg-dl-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: var(--atg-dl-round-gap);
}

.atg-downloads .atg-dl-buttons button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--atg-dl-round);
    height: var(--atg-dl-round);
    padding: 0;
    border: 1px solid var(--atg-dl-round-line);
    border-radius: 50%;
    background: var(--atg-dl-round-bg);
    box-shadow: var(--atg-dl-round-shadow);
    -webkit-backdrop-filter: blur(var(--atg-dl-glass-blur));
    backdrop-filter: blur(var(--atg-dl-glass-blur));
    color: var(--atg-dl-round-fg);
    font-size: var(--atg-dl-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-downloads .atg-dl-buttons button:disabled {
    opacity: .35;
    box-shadow: none;
    cursor: default;
}

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

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

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

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

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

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

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

    .atg-downloads .atg-dl-next.is-hint {
        animation: none;
    }

    .atg-downloads .atg-dl-next.is-hint::after {
        content: none;
    }
}


/* ============================================================
   9 - LAYOUT 40: KATEGORIEN
   ============================================================

   Kommt auf das Inhaltselement "Kategorisierter Inhalt"
   (menu_categorized_content). Gerendertes Markup, an der
   Live-Vorschau nachgesehen (21.10.2026):

       div.frame-inner > ul > li > a[href="#c255"]

   Jeder Link springt zur Card Group, die die Kategorie traegt.
   Darstellung: Knopfreihe in Petrol, umbrechend, auf dem
   Off-white-Band zwischen Katalog und Downloads.

   Die Reihenfolge, in der TYPO3 die Links ausgibt, folgt NICHT
   der Seite (gesehen: "Technische Downloads" zuerst, obwohl die
   Gruppe ganz unten steht). Sortiert wird deshalb in
   js/effekte.js (Block 7) nach der Lage der Sprungziele auf der
   Seite. Ohne JavaScript bleibt die Reihenfolge aus TYPO3. */

.atg-kategorien.section {
    background-color: var(--atg-kn-band);
    padding-block: 0 var(--atg-kn-after);
    /* Fehler vom 21.10.2026 (1. Runde): div.section hat aus dem
       Theme overflow: hidden, und die Knoepfe stehen ganz oben im
       Band (padding-top 0). Beim Anheben rutschten sie oben unter
       die Bandkante und wurden abgeschnitten, ebenso ihr Schatten.
       Hier gibt es keinen Slider-Ausbruch, also darf das Band
       ueberstehen lassen. */
    overflow: visible;
}

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

/* Katalog -> Knoepfe: die Luft steht unten im Katalog, damit der
   Schatten der Katalogkarte im eigenen Band bleibt */
.atg-katalog.section:has(+ .atg-kategorien) {
    padding-bottom: var(--atg-kn-before);
}

.atg-kategorien + .atg-downloads.section {
    padding-top: 0;
}

.atg-kategorien ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--atg-kn-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.atg-kategorien li {
    margin: 0;
    padding: 0;
}

.atg-kategorien li::before {
    content: none;
}

.atg-kategorien a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--atg-kn-btn-h);
    padding-inline: var(--atg-kn-btn-pad);
    border-radius: var(--atg-kn-btn-h);
    background: var(--atg-kn-btn-bg);
    box-shadow: var(--atg-kn-btn-shadow);
    color: var(--atg-kn-btn-fg) !important;
    font-size: var(--atg-kn-btn-fs);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--atg-pa-hover-time),
                transform var(--atg-pa-hover-time);
}

@media (hover: hover) {
    .atg-kategorien a:hover {
        background: var(--atg-kn-btn-hover);
        transform: translateY(calc(-1 * var(--atg-kn-lift)));
    }
}

.atg-kategorien a:focus-visible {
    background: var(--atg-kn-btn-hover);
    outline: 2px solid var(--atg-accent);
    outline-offset: 2px;
}

/* Bis 767px brechen die Knoepfe wie auf den grossen Breiten in
   mehrere Reihen um - alle Kategorien sind auf einen Blick zu
   sehen. (21.10.2026, 2. Runde, war hier eine wischbare Zeile;
   am 22.10. auf Wunsch zurueckgenommen.) */