/* ============================================================
   ATG-Gigerl - Seite "Download Center"
   Liegt unter: fileadmin/templates/css/download.css
   Stand: 21.10.2026 - Layout 40 Kategorien, kompaktere Download-Karten,
   groesseres Katalog-Titelbild

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

     37  Katalog     .atg-katalog
         Kommt auf die Card Group mit dem Produktkatalog (eine
         Karte). Weisse Karte, links ein Petrol-Feld mit dem
         Cover, das oben herausragt. Rechts:
           Feld "Subheader"  -> Kicker ueber dem Titel
           Feld "Header"     -> Titel
           Feld "Text"       -> Beschreibung, darunter eine
                                Aufzaehlung "Format / Groesse /
                                Umfang" mit fetter Beschriftung
           Link + Link-Titel -> Knopf neben den Angaben
         Unter 1024px gestapelt, Feld oben.

     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: KATALOGKARTE
   ============================================================

   Aufbau: die Karte ist ein Raster mit zwei Spalten
   (Angabenzeile | Knopf). Das Bildfeld liegt absolut links im
   Innenabstand - auf JEDER Breite, seit 21.10.2026 wird auch am
   Handy nicht mehr gestapelt.
   card-body wird mit display: contents aufgeloest - Kicker,
   Titel, Absaetze und Aufzaehlung werden dadurch selbst
   Rasterelemente. So kann der Knopf aus card-footer in dieselbe
   Zeile wie die Aufzaehlung ruecken, obwohl er im Markup in
   einem anderen Kasten steht.

   Der Kicker (h3.card-subtitle) steht im Markup nach dem Titel
   und wird per order davor gezogen.                           */

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

/* width:100% ist Pflicht: das Theme rechnet die Breite sonst
   aus --cardgroup-columns (im Backend stehen "2 Spalten"). */
.atg-katalog .card-group-element-item {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.atg-katalog .card {
    position: relative;
    display: grid;
    /* Spalte 1 so breit wie die Angabenzeile, der Knopf steht
       direkt daneben. Titel und Text laufen ueber beide. */
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: var(--atg-dc-btn-gap);
    /* Mindesthoehe: das Cover fuellt das Bildfeld bis auf den
       Rand, die Karte bestimmt damit die Groesse des Titelbilds.
       Bis 1023px "auto" - dort ohne Angabenzeile. */
    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;
}

/* --- Bildfeld mit Cover ---

   Stand 22.10.2026: Petrol-Feld, das Cover ragt oben um
   --atg-dc-overhang heraus und bleibt auf jeder Breite links
   neben dem Text. 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. Bei einer hohen Karte begrenzt die Feldbreite,
   bei einer niedrigen die Hoehe; herausragen tut es immer.
   Der Schatten ist ein drop-shadow, damit er dem Bild folgt und
   nicht dem Kasten des img.

   Verlauf: 30.09. Ueberstand, gestapelt unter 1024px.
   21.10. (2. Runde) hell, ohne Ueberstand. 22.10. wieder Petrol
   und Ueberstand, aber weiterhin nie gestapelt. */

.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: contents;
}

.atg-katalog .card-body > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.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;
}

.atg-katalog .card-body p {
    max-width: var(--atg-dc-text-max);
    margin: 0 0 var(--atg-dc-para-gap);
    font-size: var(--atg-dc-text-fs);
    line-height: var(--atg-dc-text-lh);
    color: var(--atg-dc-text-color);
}

/* --- Angabenzeile: Aufzaehlung aus dem Feld "Text" --- */

.atg-katalog .card-body ul {
    grid-column: 1;
    align-self: center;
    justify-self: start;
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--atg-dc-meta-gap) - var(--atg-dc-para-gap)) 0 0;
    padding: 0;
    list-style: none;
    border-block: 1px solid var(--atg-dc-meta-line);
    font-variant-numeric: tabular-nums;
}

.atg-katalog .card-body li {
    display: flex;
    align-items: baseline;
    gap: var(--atg-dc-label-gap);
    margin: 0 var(--atg-dc-meta-space) 0 0;
    padding: var(--atg-dc-meta-pad-y) var(--atg-dc-meta-space) var(--atg-dc-meta-pad-y) 0;
    border-right: 1px solid var(--atg-dc-meta-line);
    font-size: var(--atg-dc-meta-fs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--atg-ink);
    white-space: nowrap;
}

.atg-katalog .card-body li:last-child {
    margin-right: 0;
    border-right: 0;
}

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

.atg-katalog .card-body li :is(strong, b) {
    font-size: var(--atg-dc-label-fs);
    font-weight: 700;
    letter-spacing: var(--atg-dc-label-track);
    text-transform: uppercase;
    color: var(--atg-dc-label-color);
}

/* --- Knopf, in der Zeile der Angaben --- */

.atg-katalog .card-footer {
    grid-column: 2;
    align-self: end;
    justify-self: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Ohne Aufzaehlung steht der Knopf links unter dem Text */
.atg-katalog .card:not(:has(.card-body ul)) .card-footer {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--atg-dc-meta-gap);
}


/* ============================================================
   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);
}

:is(.atg-katalog, .atg-downloads) a.btn::after {
    content: "\f019";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: var(--atg-dc-icon-fs);
    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;
}

/* --- 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 - KATALOGKARTE UNTER 1024 PIXEL
   ============================================================

   Bis 21.10.2026 wurde die Karte hier gestapelt (Feld oben).
   Jetzt bleibt das Bildfeld auf jeder Breite links neben dem
   Text; bis 1023px entfaellt die Angabenzeile.                                     */

/* bis 1023px: keine Angabenzeile (Entscheidung 22.10.2026) - die
   Karte wird dadurch niedriger, das Cover fuellt das Feld besser
   aus. Der Knopf steht unter dem Titel. */
@media (max-width: 1023.98px) {
    .atg-katalog .card-body ul {
        display: none;
    }

    .atg-katalog .card-footer {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: var(--atg-dc-meta-gap);
    }
}

/* bis 767px: Knopf ueber die volle Breite der Textspalte */
@media (max-width: 767.98px) {
    .atg-katalog .card-footer {
        justify-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.) */