/* ate: Kategorie-/Listing-Seiten nach ATE-Mockup 2
   (Projektinformationen/JTL-Store Mockup/2. atestore-kategorieseite.html),
   Redesign 07/2026.

   Geladen via layout/header.tpl NUR auf PAGE_ARTIKELLISTE (Kategorie,
   Suche, Hersteller, Merkmalwert) mit ?v=-Cache-Bust — beim Edit ?v=
   hochzaehlen. Farb-/Radius-/Font-Variablen kommen aus custom.css §1+§2
   (global gebundelt): --ate-navy, --ate-tiefnavy, --ate-magenta-dark,
   --ate-grey-light, --ate-grey-mid; Fonts Roboto (var), Roboto Condensed
   bold-italic, Rubik bold-italic. Sticky-Offset --ate-sticky-top misst
   js/custom.js (Header + Trustbar).

   Scope: #content-wrapper.is-item-list (setzt NOVA auf Artikellisten)
   bzw. eindeutige .ate-*-Klassen.

   Sektionen:
     1. Basis/Container       7. Filter-Sidebar
     2. Breadcrumb            8. Toolbar (Sort, View-Toggle)
     3. Kategorie-Kopf        9. Grid-Karten (.ate-prod-card)
     4. Pill-Leisten         10. Tabelle (.ate-pindex, scrollbar auf allen Breiten)
     5. Aktiv-Filter-Chips   11. No-Results, SEO-Block, FAE-Band
     6. Layout-Grid          12. Pagination, Reduced Motion
*/

/* === 1. Basis/Container ================================================== */

/* ate: Mockup-Arbeitsbreite 1720px — NOVAs container-fluid-xl wuerde
   frueher deckeln (analog chrome.css Header-Container). */
/* ate: NOVA gibt #content-wrapper 4rem padding-top (2rem mobil) aus dem
   Inline-Crit-CSS. Mockup 2 setzt den Breadcrumb direkt unter die Trustbar —
   der Abstand darueber kommt allein aus .breadcrumb-wrapper (18px, global
   in chrome.css §3b). */
#content-wrapper.is-item-list {
    max-width: min(1720px, 100%);
    margin-inline: auto;
    padding-top: 0;
}
#content-wrapper.is-item-list #content {
    padding-bottom: 0;
}

/* ate: Links auf der Listenseite dekorationslos — Mockup 2 hat global
   a{text-decoration:none} (Zeile 30 der Mockup-Datei), Unterstreichungen
   nur an vier bewussten Stellen (siehe unten). Ohne diesen Reset schlagen
   my-nova_crit.css (inline: a{text-decoration:underline}) und custom.css
   (a:hover,a:focus{...underline}) durch — unterstrichen waren dadurch
   Unterkategorie- und Merkmal-Pills, Sidebar-Filterlinks, View-Toggle,
   Produkttitel und die Details-/Angebot-Buttons. Scoped Reset analog
   home.css (.ate-home a), kein globaler Eingriff.

   Warum :where(): nullt die Spezifitaet des Scopes. Die Basisregel liegt
   damit bei (0,0,1) und schlaegt das Crit-CSS allein ueber die
   Quellreihenfolge (category.css laedt spaeter) — die .ate-*-Komponenten
   mit (0,1,0) gewinnen aber weiterhin. Hover/Focus braucht (0,1,1), um
   custom.css a:hover,a:focus (0,1,0) zu ueberstimmen; die absichtlichen
   Unterstreichungen sind dagegen mit .is-item-list-Praefix abgesichert.
   Nur text-decoration — Farben regeln die Komponenten selbst. */
:where(#content-wrapper.is-item-list) a {
    text-decoration: none;
}
:where(#content-wrapper.is-item-list) a:hover,
:where(#content-wrapper.is-item-list) a:focus {
    text-decoration: none;
}

.is-item-list .ate-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    display: block;
}
.is-item-list .ate-headline {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

/* === 2. Breadcrumb ======================================================= */

/* ate: Runde 07/2026 — nach chrome.css §3b umgezogen (Breadcrumbs shopweit
   identisch, Single Source of Truth; Vertikal-Padding 18px/6px liegt dort
   auf .breadcrumb-wrapper). Hier bewusst keine Regeln mehr. */

/* === 3. Kategorie-Kopf =================================================== */

.ate-cat-head {
    padding: 14px 0 26px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
}
.ate-cat-head h1.ate-headline {
    font-size: clamp(28px, 3.4vw, 40px);
    color: var(--ate-navy);
    /* ate: 6px 0 0 -> 6px 0 10px — unter der H1 steht jetzt der Lead-Absatz
       (Mockup .cat-head h1), ohne ihn klebte er direkt an der Headline. */
    margin: 6px 0 10px;
}
/* ate: Beschreibung im Kopf (Mockup .cat-head p). Quelle ist cBeschreibung,
   das Wawi-Standardfeld — also WYSIWYG-HTML mit Absaetzen, H2/H3, Listen,
   Links und teils <section>-Wrappern bzw. JSON-LD-<script>-Bloecken, nicht
   nur ein Fliesstext-Absatz. Eingeklappt sind wenige Zeilen sichtbar, den
   Rest gibt der Weiterlesen-Toggle frei (js/category.js).
   Die sichtbare Zeilenzahl steht ausschliesslich in der max-height weiter
   unten in dieser Sektion — sonst nirgends, damit sie an einer Stelle
   aenderbar bleibt. */
.ate-cat-desc {
    max-width: 720px;
    color: #3b4c5c;
    font-size: 16px;
    /* ate: Basis fuer die max-height-Rechnung der Klammerung. */
    line-height: 1.5;
}
/* ate: Wawi-Texte wrappen ihren Inhalt teils in <section> (z.B. kKat 35:
   <section class="ate-category-intro">, im SEO-Attribut .ate-faq-section).
   Das Theme hat eine generische Regel `main section { padding: 4rem 0 }` —
   die schlug hier mit 64px durch und riss die Luecke zwischen H1 und Text
   auf; bei geklammertem Kopf verschwand der Text sogar ganz hinter dem
   Padding. Innerhalb der beiden Textbloecke deshalb neutralisieren. */
.ate-cat-desc-body section,
.ate-seo-block section {
    padding: 0;
}
/* ate: Single-Direction-Margins — Abstaende ausschliesslich ueber
   margin-bottom. Ein margin-top waere hier nicht beherrschbar: der Inhalt
   kommt aus dem WYSIWYG, und `> *:first-child` greift z.B. bei kKat 35 auf
   ein unsichtbares <script>, waehrend das erste sichtbare Element tief in
   einer <section> steckt und seinen Top-Margin nach aussen durchschlagen
   liesse. */
.ate-cat-desc-body *,
.ate-seo-block * {
    margin-top: 0;
}
.ate-cat-desc-body > *:last-child,
.ate-seo-block > *:last-child {
    margin-bottom: 0;
}
.ate-cat-desc-body p {
    margin-bottom: 12px;
}
/* ate: H2/H3 kommen aus dem Wawi-Text — im Kopf brauchen sie eigene, etwas
   kleinere Groessen, sonst konkurrieren sie mit der H1 darueber. */
.ate-cat-desc-body h2 {
    font-size: 19px;
    color: var(--ate-navy);
    margin-bottom: 8px;
}
.ate-cat-desc-body h3 {
    font-size: 16px;
    color: var(--ate-navy);
    margin-bottom: 6px;
}
/* ate: Abstand VOR einer Ueberschrift traegt das Element davor, nicht die
   Ueberschrift selbst — sonst waere man wieder bei durchschlagenden
   Top-Margins. */
.ate-cat-desc-body p + h2,
.ate-cat-desc-body ul + h2,
.ate-cat-desc-body ol + h2,
.ate-cat-desc-body p + h3,
.ate-cat-desc-body ul + h3,
.ate-cat-desc-body ol + h3 {
    margin-top: 18px;
}
.ate-cat-desc-body ul,
.ate-cat-desc-body ol {
    margin-bottom: 12px;
    padding-left: 20px;
}
.ate-cat-desc-body li {
    margin-bottom: 5px;
}
.ate-cat-desc-body a {
    color: var(--ate-navy);
    text-decoration: underline;
}
/* ate: .is-clamped setzt js/category.js — ohne JS bleibt der volle Text
   sichtbar, statt hinter einem nie erscheinenden Button zu verschwinden.

   KEIN -webkit-line-clamp: das klammert nur direkte Zeilenboxen. Sobald der
   Wawi-Text in einem <section>-Wrapper steckt (kKat 35), greift es nicht und
   rendert die Zeilen sogar uebereinander — computed display ist ohnehin
   flow-root, der Browser blockifiziert -webkit-box. Gleicher Befund wie im
   Megamenue, siehe voltando-megamenu.css §2 (.cat-flyout-detail-desc).
   max-height hat das Problem nicht und ist von der Verschachtelung
   unabhaengig. */
.ate-cat-desc.is-clamped .ate-cat-desc-body {
    /* ate: einzige Stelle mit der sichtbaren Zeilenzahl. 2026-08-24: 2 -> 5
       Zeilen, Kunden-Feedback Fady (PPT 21.08., Folie 12: mehr Text unter der
       Ueberschrift, "5 Zeilen dann Weiterlesen").
       js/category.js misst per scrollHeight und haengt nicht an dem Wert. */
    max-height: calc(5 * 1.5em);
    overflow: hidden;
    /* ate: weiche Unterkante, damit der Schnitt nicht hart durch eine Zeile
       laeuft (Muster aus voltando-megamenu.css). */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 0.6rem), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 0.6rem), transparent 100%);
}
.ate-cat-desc-toggle {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ate-navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.ate-cat-desc-toggle:hover,
.ate-cat-desc-toggle:focus-visible {
    color: var(--ate-magenta-dark);
}
.ate-cat-desc-toggle[hidden] {
    display: none;
}
.ate-cat-count {
    font-size: 14px;
    color: var(--ate-grey-mid);
    white-space: nowrap;
}
.ate-cat-count b {
    color: var(--ate-navy);
    font-weight: 700;
}

/* === 4. Pill-Leisten (Merkmal-Filter + Unterkategorien) ================== */

.ate-pills-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    margin-right: 6px;
    white-space: nowrap;
}
.ate-pill {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 20px;
    background: #fff;
    color: var(--ate-navy);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.ate-pill:hover {
    border-color: var(--ate-navy);
    color: var(--ate-navy);
    text-decoration: none;
}
.ate-pill.active {
    background: var(--ate-navy);
    border-color: var(--ate-navy);
    color: #fff;
}
.ate-pill:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}
.ate-pill.is-disabled {
    opacity: .45;
    pointer-events: none;
}
.ate-tech-filter,
.ate-subcat-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* ate: Unterkategorien-Leiste bekommt Trennlinien oben+unten wie die
   Merkmal-Leiste (Mockup 2 .tech-filter) — User-Wunsch 27.07.2026. */
.ate-subcat-pills {
    border-top: 1px solid var(--ate-grey-light);
    border-bottom: 1px solid var(--ate-grey-light);
    padding: 14px 0;
    margin-bottom: 26px;
}
/* ate: Folgt direkt eine Merkmal-Leiste, uebernimmt deren border-top die
   untere Linie — sonst zwei Striche mit 26px Leerraum dazwischen. */
.ate-subcat-pills:has(+ .ate-tech-filter) {
    border-bottom: 0;
    margin-bottom: 0;
}
.ate-tech-filter {
    border-top: 1px solid var(--ate-grey-light);
    padding: 14px 0;
}
/* ate: war :last-of-type — greift im echten DOM nie (letztes div-Kind von
   #result-wrapper ist .ate-cat-layout), die Abschlusslinie fehlte deshalb. */
.ate-tech-filter:not(:has(+ .ate-tech-filter)) {
    border-bottom: 1px solid var(--ate-grey-light);
    margin-bottom: 26px;
}

/* === 5. Aktiv-Filter-Chips =============================================== */

.ate-active-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ate-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ate-navy);
    background: #eef1f5;
    border: 1px solid var(--ate-grey-light);
    border-radius: 999px;
    padding: 5px 12px;
    transition: border-color .15s;
}
.ate-chip:hover {
    border-color: var(--ate-navy);
    color: var(--ate-navy);
    text-decoration: none;
}
.ate-chip-x {
    font-weight: 700;
    line-height: 1;
}
/* ate: .is-item-list-Praefix, damit die gewollte Unterstreichung den
   Link-Reset aus §1 (Hover/Focus (0,1,1)) schlaegt. */
.is-item-list .ate-chips-reset {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ate-grey-mid);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ate-chips-reset:hover {
    color: var(--ate-navy);
}

/* === 6. Layout-Grid ====================================================== */

.ate-cat-layout {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    padding-bottom: 70px;
}

/* === 7. Filter-Sidebar =================================================== */

.ate-filters {
    position: sticky;
    top: calc(var(--ate-sticky-top, 132px) + 12px);
    max-height: calc(100vh - var(--ate-sticky-top, 132px) - 28px);
    overflow-y: auto;
    border: 1px solid var(--ate-grey-light);
    border-radius: 14px;
    padding: 22px 22px 18px;
    background: #fff;
}
.ate-filters-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.ate-filters-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    color: var(--ate-navy);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 0;
}
.ate-filters-reset {
    font-size: 12px;
    font-weight: 700;
    color: var(--ate-grey-mid);
}
/* ate: .is-item-list-Praefix — sonst nimmt der Link-Reset aus §1 die
   gewollte Hover-Unterstreichung weg (gleiche Spezifitaet, aber frueher). */
.is-item-list .ate-filters-reset:hover {
    color: var(--ate-navy);
    text-decoration: underline;
}
.ate-fgroup {
    border-top: 1px solid var(--ate-grey-light);
    padding: 16px 0 14px;
}
.ate-fgroup h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    margin: 0 0 10px;
    font-family: inherit;
    font-style: normal;
}
.ate-frow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14.5px;
    color: #3b4c5c;
}
.ate-frow:hover {
    color: var(--ate-navy);
    text-decoration: none;
}
/* ate: Checkbox ist reine Optik — die Zeile ist ein Filter-Link */
.ate-cbx {
    flex: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--ate-grey-mid);
    border-radius: 3px;
    background: #fff;
    position: relative;
}
.ate-frow.on {
    color: var(--ate-navy);
    font-weight: 500;
}
.ate-frow.on .ate-cbx {
    background: var(--ate-navy);
    border-color: var(--ate-navy);
}
.ate-frow.on .ate-cbx::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ate-frow-name {
    min-width: 0;
}
.ate-frow-n {
    margin-left: auto;
    font-size: 12px;
    color: var(--ate-grey-mid);
}
/* ate: Gruppenkopf mit Zuruecksetzen-Link (aktuell nur Preis) */
.ate-fgroup-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.ate-fgroup-reset {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ate-grey-mid);
}
.is-item-list .ate-fgroup-reset:hover {
    color: var(--ate-navy);
    text-decoration: underline;
}

/* ate: Preis-Slider (snippets/filter/ate_price_slider.tpl). Die
   noUiSlider-Basis-Styles sind schon in my-nova.css kompiliert (Bundle);
   hier stehen nur Farb- und Mass-Overrides auf die ATE-Palette. */
.ate-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ate-price-field {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 8px;
    background: #fff;
    padding: 0 8px 0 10px;
    height: 38px;
}
.ate-price-field:focus-within {
    border-color: var(--ate-navy);
}
.ate-price-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ate-navy);
}
.ate-price-cur {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--ate-grey-mid);
    padding-left: 4px;
}
.ate-price-dash {
    flex: none;
    color: var(--ate-grey-mid);
}
.ate-price-track {
    margin: 0 9px 8px;
}
/* ate: schlanker als der NOVA-Default (18px Bahn, 34x28-Griffe) */
.ate-price-track.noUi-horizontal {
    height: 5px;
    border: 0;
    border-radius: 3px;
    background: var(--ate-grey-light);
    box-shadow: none;
}
.ate-price-track .noUi-connect {
    background: var(--ate-navy);
}
.ate-price-track.noUi-horizontal .noUi-handle {
    width: 18px;
    height: 18px;
    right: -9px;
    top: -7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ate-navy);
    box-shadow: 0 1px 4px rgba(11, 34, 57, .35);
    cursor: pointer;
}
/* ate: noUi zeichnet zwei Pseudo-Striche in den Griff — im Kreis stoeren sie */
.ate-price-track .noUi-handle::before,
.ate-price-track .noUi-handle::after {
    display: none;
}
.ate-price-track .noUi-handle:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}

/* ate: lange Merkmalgruppen — .is-collapsed setzt js/category.js, damit ohne
   JS alle Werte sichtbar bleiben statt hinter einem toten Button zu liegen. */
.ate-fgroup-collapsible.is-collapsed .ate-frow-extra {
    display: none;
}
.ate-fgroup-more {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ate-grey-mid);
    cursor: pointer;
}
.ate-fgroup-more:hover {
    color: var(--ate-navy);
    text-decoration: underline;
}

.ate-fae-mini {
    margin-top: 14px;
    background: var(--ate-navy);
    border-radius: 10px;
    padding: 16px;
    color: #fff;
}
.ate-fae-mini h4 {
    /* ate: NOVA setzt h1..h6 auf Montserrat (my-nova.css Z.6597), custom.css
       Sektion 3 deckt aber nur h1-h3 ab — ohne diesen Reset stand die
       Ueberschrift als Montserrat-Faux-Bold da. Mockup Z.108 hat kein
       font-family, erbt also Roboto vom Body. Analog .ate-fgroup h3 oben. */
    font-family: inherit;
    font-style: normal;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
}
.ate-fae-mini p {
    font-size: 12.5px;
    color: #c7d3de;
    margin: 0 0 12px;
}
.ate-fae-mini a {
    display: block;
    text-align: center;
    background: #fff;
    color: var(--ate-navy);
    font-size: 13px;
    font-weight: 700;
    padding: 8px;
    border-radius: 7px;
}
.ate-fae-mini a:hover {
    text-decoration: none;
    background: var(--ate-grey-light);
}

/* === 8. Toolbar ========================================================== */

.ate-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ate-toolbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ate-filter-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border: 2px solid var(--ate-navy);
    border-radius: 8px;
    background: transparent;
    color: var(--ate-navy);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.ate-filter-toggle:hover {
    background: var(--ate-navy);
    color: #fff;
}
/* ate: .ate-perpage (Artikel pro Seite) teilt sich die Optik mit .ate-sort —
   beide sind Selects, die per js/category.js auf die JTL-Filter-URL navigieren. */
.ate-sort,
.ate-perpage {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--ate-grey-mid);
}
.ate-sort select,
.ate-perpage select {
    height: 42px;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ate-navy);
    font-weight: 500;
    background: #fff;
    cursor: pointer;
    outline: none;
    max-width: 260px;
}
.ate-sort select:focus-visible,
.ate-perpage select:focus-visible {
    border-color: var(--ate-navy);
}
.ate-perpage select {
    max-width: 100px;
}
.ate-view-toggle {
    display: flex;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 8px;
    overflow: hidden;
}
.ate-view-toggle a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 15px;
    background: #fff;
    color: var(--ate-grey-mid);
    font-size: 13.5px;
    font-weight: 700;
    transition: background .15s, color .15s;
}
.ate-view-toggle a svg {
    stroke: currentColor;
}
.ate-view-toggle a.active {
    background: var(--ate-navy);
    color: #fff;
}
.ate-view-toggle a:not(.active):hover {
    color: var(--ate-navy);
    text-decoration: none;
}
.ate-view-toggle a:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: -3px;
}

/* === 9. Grid-Karten ====================================================== */

.ate-prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.ate-prod-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ate-prod-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(8, 25, 41, .10);
    border-color: transparent;
}
.ate-imgbox {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 18px;
    overflow: hidden; /* ate: zweite Verteidigungslinie — unbegrenzte Kinder clippen statt Toolbar/Filter zu ueberdecken */
}
.ate-imgbox img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
/* ate: {image webp=true} wickelt das img in ein <picture> — das ist dann das
   Flex-Item, und max-height:100% auf dem img loest gegen dessen auto-Hoehe auf
   (= wirkungslos). display:contents nimmt das picture aus dem Layout, damit
   die Box-Hoehe (230/180px bzw. 120/92px) das Bild wieder begrenzt. Ohne das
   ragt das Bild mobil ueber die Karte und verdeckt/blockiert den Filter-Button. */
.ate-imgbox picture,
.ate-prod-img picture {
    display: contents;
}
.ate-imgbox.ph {
    background: #f4f6f8;
    border-radius: 10px;
    color: var(--ate-grey-mid);
    font-size: 12px;
    flex-direction: column;
    gap: 6px;
}
.ate-imgbox.ph:hover {
    text-decoration: none;
}
.ate-mfr {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    /* ate: Mockup 2 --bluegrey. Folie 12 Magenta gilt nicht fuer den
       Hersteller-Eyebrow (Korrektur 2026-09-08). */
    color: var(--ate-grey-mid);
}
.ate-prod-title {
    font-size: 16.5px;
    font-weight: 700;
    font-family: inherit;
    font-style: normal;
    color: var(--ate-navy);
    margin: 4px 0 3px;
    min-height: 44px;
    line-height: 1.3;
}
.ate-prod-title a {
    color: inherit;
}
.ate-prod-title a:hover {
    color: var(--ate-navy);
    text-decoration: none;
}
.ate-mpn {
    font-size: 12px;
    /* ate 2026-09-08: wieder grey-mid wie Mockup 2 (.mpn / --bluegrey).
       Folie 12 Magenta war falsch auf diese HAN-Zeile gelegt. */
    color: var(--ate-grey-mid);
    margin-bottom: 11px;
}
.ate-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/* ate: Merkmale ohne darstellbaren Wert -> leerer Wrapper, sonst bliebe
   dessen margin-bottom als Luecke stehen. */
.ate-chips:empty {
    display: none;
}
.ate-chip-s {
    font-size: 12px;
    font-weight: 500;
    color: var(--ate-navy);
    background: #eef1f5;
    border: 1px solid var(--ate-grey-light);
    border-radius: 6px;
    padding: 4px 9px;
}
/* ate: Compliance-Badges (Bestand Briefing 19, Styles aus custom.css
   hierher umgezogen — Badges erscheinen nur noch im Listing) */
.ate-compliance-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--ate-navy); /* SVGs nutzen currentColor */
    list-style: none;
}
.ate-prod-card .ate-compliance-badges,
.ate-prod .ate-compliance-badges {
    margin: 0 0 10px;
}
.ate-compliance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.ate-compliance-badge img {
    width: 22px;
    height: 22px;
}
.ate-compliance-badge-fallback {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid currentColor;
    border-radius: 4px;
    letter-spacing: .3px;
    line-height: 1;
}
.ate-mini-desc {
    font-size: 13px;
    color: #3b4c5c;
    line-height: 1.45;
    margin-bottom: 13px;
}
/* ate 2026-09-08: Folie 12 — nur der Wawi-Vorspann Hersteller/MPN in der
   Kurzbeschreibung, nicht die grauen Felder ueber dem Titel. */
.ate-mini-desc .ate-wawi-id {
    display: block;
    color: var(--ate-magenta);
    font-weight: 600;
}
.ate-mini-desc .ate-wawi-id + ul,
.ate-mini-desc .ate-wawi-id + ol {
    margin-top: 4px;
}
.ate-mini-desc ul,
.ate-mini-desc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ate-mini-desc li {
    position: relative;
    padding: 2px 0 2px 18px;
}
.ate-mini-desc li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ate-navy);
}
.ate-mini-desc li:nth-child(n+4) {
    display: none;
}
.ate-mini-desc p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ate-mini-desc.t {
    font-size: 12px;
    color: var(--ate-grey-mid);
    margin: 6px 0 0;
}
.ate-mini-desc.t li {
    padding: 1px 0 1px 15px;
}
.ate-mini-desc.t li::before {
    top: 9px;
    width: 4px;
    height: 4px;
    background: var(--ate-grey-mid);
}
.ate-mini-desc.t li:nth-child(n+3) {
    display: none;
}
.ate-mini-desc.t p {
    -webkit-line-clamp: 2;
}
.ate-ds-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ate-navy);
    margin-bottom: 13px;
    align-self: flex-start;
}
.ate-ds-link:hover {
    color: var(--ate-magenta-dark);
    text-decoration: none;
}
/* ate: Lager-Ampel.
   item_delivery_status.tpl rendert .signal_image.status-{N}. N kommt aus
   Artikel->Lageranzeige->nStatus und ist laut Artikel.php:3762
   0 = nicht verfuegbar, 1 = knapper Bestand, 2 = verfuegbar. Bis 27.07.2026
   faerbte dieser Block 1/2/3 — dadurch erschien "knapp" gruen, "verfuegbar"
   gelb und "nicht verfuegbar" grau (status-3 existiert gar nicht).

   Farbe steckt AUSSCHLIESSLICH im Punkt, der Text bleibt navy: das
   NOVA-Bundle faerbt .delivery-status .status-0 rot (my-nova.css:23474) und
   trifft das Kind-Element direkt, deshalb hier explizit ueberschreiben —
   User-Vorgabe 27.07.2026: "Schrift schwarz, Punkt rot". */
.ate-stock {
    margin-bottom: 12px;
}
.ate-stock .item-delivery-status,
.ate-td-avail .item-delivery-status {
    font-size: 13px;
    font-weight: 500;
    color: var(--ate-navy);
}
.ate-stock .item-delivery-status > *,
.ate-td-avail .item-delivery-status > *,
.ate-stock .item-delivery-status small,
.ate-td-avail .item-delivery-status small {
    color: var(--ate-navy);
}
.ate-stock .signal_image,
.ate-td-avail .signal_image,
.ate-stock .status,
.ate-td-avail .status,
.ate-stock .availablefrom,
.ate-td-avail .availablefrom {
    display: flex;
    align-items: center;
    gap: 7px;
}
.ate-stock .signal_image::before,
.ate-td-avail .signal_image::before,
.ate-stock .status::before,
.ate-td-avail .status::before,
.ate-stock .availablefrom::before,
.ate-td-avail .availablefrom::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ate-grey-mid);
}
/* nStatus 2 = verfuegbar -> gruen */
.ate-stock .status-2::before,
.ate-td-avail .status-2::before {
    background: #1a7f4b;
}
/* nStatus 1 = knapper Lagerbestand, Zulauf- und Lieferanten-Hinweis -> gelb */
.ate-stock .status-1::before,
.ate-td-avail .status-1::before,
.ate-stock .availablefrom::before,
.ate-td-avail .availablefrom::before {
    background: #d99b1c;
}
/* nStatus 0 = nicht verfuegbar, unverkaeuflich (.status) -> rot */
.ate-stock .status-0::before,
.ate-td-avail .status-0::before,
.ate-stock .status::before,
.ate-td-avail .status::before {
    background: #b3372f;
}
.ate-stock small,
.ate-td-avail small {
    font-size: 13px;
}
/* ate: "Dieser Artikel ist derzeit nicht verfuegbar. Ob und wann …" ist ein
   ganzer Satz — in der schmalen Verfuegbarkeits-Spalte umbrechen lassen und
   auf zwei Zeilen kuerzen, sonst sprengt er das Tabellen-Layout. */
.ate-stock .status small,
.ate-td-avail .status small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ate-td-avail .status {
    white-space: normal;
}
/* ate: Vorbestell-Hinweis + geschaetzte Lieferzeit haengen unter der
   Statuszeile, eingerueckt auf Hoehe des Textes (Punkt 9px + gap 7px). */
.ate-stock .attr-preorder,
.ate-td-avail .attr-preorder,
.ate-stock .estimated_delivery,
.ate-td-avail .estimated_delivery {
    padding-left: 16px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ate-grey-mid);
}
/* ate: Platzhalter fuer leere Tabellenzellen (User-Vorgabe 27.07.2026) */
.ate-empty {
    color: var(--ate-grey-mid);
}
/* ate: price.tpl-Restyling (Mockup .price-row) — Klassen aus
   templates/NOVA/productdetails/price.tpl.

   Im Listen-Scope liefert price.tpl:
     .price_wrapper > .price  +  .price_wrapper > .price-note > .old-price/.base-price
   Das Mockup will dagegen EINE Zeile in der Reihenfolge
     [Streichpreis] [Preis]
   Loesung: die beiden Wrapper via display:contents aufloesen, damit .price,
   .old-price und .base-price direkte Flex-Kinder von .ate-price-row werden,
   und per order sortieren.
   (.text-stroke gibt es nur im detail-Scope von price.tpl — in der Liste
   heisst der Streichpreis .old-price und erscheint nur bei
   artikeluebersicht_sonderpreisanzeige = 2, gesetzt in
   Migration20260727220000.) */
.ate-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-top: auto;
    margin-bottom: 14px;
}
.ate-price-row .price_wrapper,
.ate-price-row .price-note {
    display: contents;
}
.ate-price-row .old-price {
    order: -1;
}
.ate-price-row .base-price {
    order: 1;
    flex-basis: 100%;
}
.ate-price-row .price,
.ate-td-price .price_wrapper .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--ate-navy);
    margin: 0;
}
.ate-td-price .price_wrapper .price {
    font-size: 15px;
}
.ate-price-row .price.special-price,
.ate-td-price .price_wrapper .price.special-price {
    color: var(--ate-navy);
}
.ate-price-row .price-note,
.ate-td-price .price-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--ate-grey-mid);
}
/* ate: Streichpreis — Grid inline vor dem Preis, Tabelle als eigene Zeile
   darueber (Mockup ".price-old" bzw. ".tprice .old") */
.ate-price-row .old-price,
.ate-td-price .old-price {
    font-size: 13px;
    font-weight: 400;
    color: var(--ate-grey-mid);
}
/* ate: price.tpl schreibt "Alter Preis: <del>864,94 €</del>" — das Label ist
   ein nackter Textknoten im <small> und laesst sich nicht einzeln adressieren.
   Das Mockup zeigt nur den durchgestrichenen Betrag, darum <small> auf
   font-size:0 und die Groesse am <del> wieder setzen. */
.ate-price-row .old-price small,
.ate-td-price .old-price small {
    font-size: 0;
    color: inherit;
}
.ate-price-row .old-price del,
.ate-td-price .old-price del {
    font-size: 13px;
    text-decoration: line-through;
}
.ate-td-price .old-price del {
    font-size: 11.5px;
}
/* ate: in der Tabelle steht der Streichpreis UEBER dem Preis (Mockup
   ".tprice .old{display:block}"). price.tpl rendert ihn danach, deshalb
   .price_wrapper zur Flex-Spalte machen, .price-note aufloesen und den
   Streichpreis per order nach oben ziehen. Ein evtl. vorhandener Grundpreis
   (.base-price) bleibt unter dem Preis. */
.ate-td-price .price_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.ate-td-price .price-note {
    display: contents;
}
.ate-td-price .old-price {
    order: -1;
    font-size: 11.5px;
    margin-bottom: 2px;
}
.ate-td-price .base-price {
    order: 1;
}
/* ate: Mengenrabatt-Link unter dem Preis (Mockup) — war am 27.07.2026 kurz
   mit abbestellt, auf User-Wunsch (Ruecknahme am selben Tag) wieder drin.
   .is-item-list-Praefix, damit die Unterstreichung auch im Hover gegen den
   Link-Reset aus §1 stehen bleibt. */
.is-item-list .ate-rabatt {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--ate-magenta-dark);
    margin: 0 0 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ate-rabatt:hover {
    color: var(--ate-navy);
}
/* ate: Aktionen — seit 27.07.2026 nur noch "Details" (Mockup zeigt genau
   einen Button pro Produkt). Die Regeln fuer .ate-btn-quote, .ate-buy-compact,
   .ate-buy-qty, .ate-buy-cart-btn, .ate-card-actions-row und
   .ate-bulk-prices (Staffelpreis-<details>, ebenfalls 27.07.2026 abbestellt)
   sind mit den Templates entfallen.
   Kein margin-top:auto hier — das sitzt auf .ate-price-row und schiebt Preis,
   Staffelpreise und Button als Block ans Kartenende (Mockup: der Preis klebt
   ueber dem Button, nicht mittig zwischen Text und Button). Der Button ist
   letztes Flex-Kind und steht dadurch in jeder Kachel auf gleicher Hoehe. */
.ate-btn-details {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--ate-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: background .15s, transform .15s;
}
.ate-btn-details:hover {
    background: #003a6e;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}
/* ate: Badge (.pflag) */
.ate-pflag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: var(--ate-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
}
.ate-pflag.sale {
    background: var(--ate-magenta-dark);
}
.ate-pflag.neu {
    background: #fff;
    color: var(--ate-navy);
    border: 1.5px solid var(--ate-navy);
}
.ate-pflag.t {
    position: static;
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 10px;
    font-size: 10px;
}

/* === 10. Tabelle (.ate-pindex) =========================================== */

.ate-pindex-scroll {
    overflow-x: auto;
    /* ate: iOS-Momentum-Scrolling — die Tabelle scrollt mobil horizontal
       (Karten-Layout am 27.07.2026 abgeschafft, Tabelle bleibt Tabelle) */
    -webkit-overflow-scrolling: touch;
    /* ate: Pflicht, nicht Deko — ohne paint-Containment rechnet Blink die
       min-width der Tabelle in die Mobile-Layout-Viewport-Breite ein
       (gemessen 27.07.2026: innerWidth 809 statt 390, alle fixed-Elemente
       wie Drawer-Backdrop/Consent-Badge spannten sich mit auf und die
       GANZE Seite scrollte horizontal, obwohl der Container klippt).
       Auf einem Scroll-Container ist paint-Containment visuell ein No-Op. */
    contain: paint;
}
/* ate: Fade-Kanten "da geht's weiter" am Tabellen-Scroll-Container —
   dasselbe Muster wie Trustbar/Topnav (chrome.css), die Scroll-Klassen
   setzt js/category.js (Mini-bindScroller). Der Aussen-Wrapper ist noetig,
   weil Pseudos eines Scroll-Containers mitscrollen wuerden. Bewusst NICHT
   media-gescoped: auch auf Desktop scrollt die Tabelle zwischen ~900 und
   ~1370px Viewport-Breite (min-width 1040px). Ohne JS bleiben die Kanten
   unsichtbar (opacity 0) — reine Deko. */
.ate-pindex-wrap {
    position: relative;
}
.ate-pindex-wrap::before,
.ate-pindex-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 1;
}
.ate-pindex-wrap::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
.ate-pindex-wrap::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}
.ate-pindex-wrap.is-nav-scrollable:not(.is-nav-scroll-end)::after,
.ate-pindex-wrap.is-nav-scrollable:not(.is-nav-scroll-start)::before {
    opacity: 1;
}
.ate-pindex {
    width: 100%;
    /* ate: fixed statt auto. Mit Auto-Layout bekommt die Spalte mit dem
       laengsten unteilbaren Inhalt (Verfuegbarkeit: "Dieser Artikel ist
       derzeit nicht verfuegbar. …") die Restbreite, und die Produktspalte
       wird auf ~180px zusammengequetscht — die Prozentangaben unten waren
       damit wirkungslos. Fixed macht sie verbindlich. */
    table-layout: fixed;
    /* ate: Unter dieser Breite wird die Tabelle im Scroll-Container
       (.ate-pindex-scroll) horizontal scrollbar, statt einzelne Zellen
       zu ueberlaufen. Unter 900px sinkt die min-width auf 900px und die
       Tabelle scrollt kompakter im selben Container (s. u.). */
    min-width: 1040px;
    border-collapse: collapse;
    background: #fff;
    margin: 0;
}
/* ate: Spaltenbreiten nach Mockup-Gewichtung — Produkt bekommt den Loewenanteil
   (Bild 120px + Name + MPN + Bullets), die Randspalten nur so viel wie noetig.

   Alle Zeilen-/Zellen-Regeln ab hier laufen ueber den Kind-Kombinator, damit
   eine evtl. in einer Zelle verschachtelte Tabelle (frueher die Staffelpreis-
   Tabelle) nicht Zeilentrenner und Zellen-Padding erbt. */
.ate-pindex > thead > tr > th:nth-child(1) { width: 35%; }
.ate-pindex > thead > tr > th:nth-child(2) { width: 13%; }
.ate-pindex > thead > tr > th:nth-child(3) { width: 15%; }
/* ate: 10% statt 7% — der Kopf "DATENBLATT" (13px condensed, uppercase,
   letter-spacing .08em = 78px Text) ragte bei 7% ab ~1500px Viewport
   abwaerts aus der Zelle und klebte am "PREIS"-Kopf (gemessen 27.07.2026:
   1440px -> 15px Ueberhang, 900px-Tabelle -> 20px). Kompensiert aus
   Produkt (37->35) und Verfuegbarkeit (16->15), beide mit Luft. */
.ate-pindex > thead > tr > th:nth-child(4) { width: 10%; }
/* ate: 14% — historisch fuer den langen Spaltenkopf "PREIS (ZZGL. MWST.)"
   bemessen; der Key ateListColPrice heisst inzwischen wieder "Preis"
   (Migration20260727220000, Brutto-Rueckbau). Bleibt: Streichpreis +
   "Mengenrabatt auf Anfrage" brauchen den Platz. */
.ate-pindex > thead > tr > th:nth-child(5) { width: 14%; }
.ate-pindex > thead > tr > th:nth-child(6) { width: 13%; }
/* ate: lange MPNs/Produktnamen duerfen die feste Spaltenbreite nicht sprengen */
.ate-pindex > tbody > tr > td {
    overflow-wrap: anywhere;
}
.ate-pindex > thead > tr > th {
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    text-align: left;
    padding: 0 14px 13px;
    border-top: none;
    border-bottom: 2px solid var(--ate-navy);
    background: none;
}
.ate-pindex > tbody > tr {
    border-bottom: 1px solid var(--ate-grey-light);
    transition: background .15s;
}
.ate-pindex > tbody > tr:hover {
    background: #f4f6f8;
}
.ate-pindex > tbody > tr > td {
    padding: 16px 14px;
    vertical-align: middle;
    font-size: 14px;
    color: #3b4c5c;
    border: none;
}
.ate-prod {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 320px;
}
.ate-prod-img,
.ate-noimg {
    flex: none;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: 10px;
    padding: 8px;
    overflow: hidden; /* ate: wie .ate-imgbox — Kinder duerfen die feste Box nie ueberragen */
}
.ate-prod-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.ate-noimg {
    background: #f4f6f8;
}
.ate-prod-meta {
    min-width: 0;
}
.ate-prod-meta .ate-mfr {
    display: block;
    font-size: 10.5px;
    letter-spacing: .09em;
}
.ate-prod-name {
    font-weight: 700;
    color: var(--ate-navy);
    font-size: 14.5px;
    line-height: 1.35;
}
.ate-prod-name a {
    color: inherit;
}
.ate-prod-name a:hover {
    text-decoration: none;
    color: var(--ate-navy);
}
.ate-prod-meta .ate-mpn {
    font-size: 11.5px;
    margin-bottom: 0;
}
.ate-td-spec .ate-chips {
    margin-bottom: 0;
}
/* ate: KEIN white-space:nowrap (anders als im Mockup, das in dieser Spalte nur
   "Auf Lager" kennt). Die realen JTL-Texte sind ganze Saetze — "Ware bestellt.
   25 Stk voraussichtlich ab dem 17.08.2026 verfuegbar." — und liefen bei
   nowrap ueber die feste Spaltenbreite hinweg in die Preisspalte. */
.ate-td-avail {
    white-space: normal;
}
/* ate: der Ampel-Punkt darf beim Umbruch nicht mit in die zweite Zeile
   rutschen -> Text als eigener Flex-Block neben dem Punkt. */
.ate-td-avail .signal_image,
.ate-td-avail .status,
.ate-td-avail .availablefrom {
    align-items: flex-start;
}
.ate-td-avail .signal_image::before,
.ate-td-avail .status::before,
.ate-td-avail .availablefrom::before {
    margin-top: 5px;
}
.ate-td-ds {
    white-space: nowrap;
}
.ate-td-ds .ate-ds-link {
    margin: 0;
}
.ate-td-price {
    font-weight: 700;
    color: var(--ate-navy);
    white-space: nowrap;
}
.ate-td-price .ate-rabatt {
    /* ate: display:block + white-space:normal — als Inline erbte der Link
       das nowrap der Preiszelle und lief in die Aktionsspalte, sobald die
       Tabelle auf ihrer min-width laeuft (mobil immer, Desktop bei
       ~900-1300px Viewport). */
    display: block;
    white-space: normal;
    margin: 3px 0 0;
    font-weight: 400;
}
.ate-td-act {
    white-space: nowrap;
}
.ate-td-act .ate-btn-details {
    width: auto;
    min-width: 132px;
    padding: 8px 16px;
    font-size: 13.5px;
}
.ate-td-act .ate-card-actions {
    margin-top: 0;
}

/* --- <900px: kompakte Tabelle. Das fruehere Karten-Layout (display:block
   auf table/tbody/tr/td + td[data-l]::before-Labels) ist am 27.07.2026 auf
   User-Entscheidung komplett entfallen — die Tabelle bleibt auf ALLEN
   Breiten eine echte <table> und scrollt horizontal im .ate-pindex-scroll
   (Fade-Kanten s. .ate-pindex-wrap oben). Hier nur kompaktere Masse,
   damit weniger gescrollt werden muss. --- */
@media (max-width: 899.98px) {
    .ate-pindex {
        /* ate: 900 statt 1040 — mit 92px-Bild und engeren Paddings tragfaehig,
           ~13% weniger Scrollweg. table-layout:fixed bleibt, die
           Prozent-Spaltenbreiten oben bleiben verbindlich. */
        min-width: 900px;
    }
    .ate-pindex > thead > tr > th {
        padding: 0 10px 10px;
        font-size: 12px;
    }
    .ate-pindex > tbody > tr > td {
        padding: 12px 10px;
        font-size: 13.5px;
    }
    .ate-prod {
        gap: 14px;
        /* ate: das 320px-Desktop-Minimum wuerde die fixe Produktspalte
           bei 900px Tabellenbreite sprengen */
        min-width: 0;
    }
    .ate-prod-img,
    .ate-noimg {
        width: 92px;
        height: 92px;
        padding: 6px;
    }
    .ate-td-act .ate-btn-details {
        min-width: 0;
        padding: 8px 14px;
    }
}

/* === 11. No-Results, SEO-Block, FAE-Band ================================= */

.ate-no-results {
    border: 1px dashed var(--ate-grey-light);
    border-radius: 14px;
    padding: 40px;
    text-align: center;
    color: var(--ate-grey-mid);
    font-size: 15px;
}
/* ate: .is-item-list-Praefix — schlaegt den Link-Reset aus §1 in allen
   States (sonst nur per Quellreihenfolge, also fragil). */
.is-item-list .ate-no-results a {
    color: var(--ate-navy);
    font-weight: 700;
    text-decoration: underline;
}
/* ate: Langer SEO-Text aus dem Wawi-Attribut categorie_description. Zeigt
   dieselbe HTML-Sorte wie der Kopfblock (section/h2/h3/ul/li/a) und braucht
   deshalb dieselbe Typo-Basis — vorher waren hier nur h2 und p gestylt,
   wodurch h3 (line-height 1.2) und li (14px) aus dem Raster fielen. */
/* ate: ohne den Mockup-Trennstrich (border-top, User-Wunsch 27.07.2026) —
   das fruehere 44px-Padding unter der Linie wandert in den margin-top. */
.ate-seo-block {
    margin-top: 44px;
    padding: 0 0 10px;
    max-width: 860px;
    color: #3b4c5c;
    font-size: 15px;
    line-height: 1.5;
}
.ate-seo-block h2 {
    font-size: 22px;
    color: var(--ate-navy);
    margin-bottom: 12px;
}
.ate-seo-block h3 {
    font-size: 17px;
    color: var(--ate-navy);
    margin-bottom: 6px;
}
/* ate: Abstand VOR Ueberschriften traegt das Vorgaengerelement — siehe
   Begruendung bei .ate-cat-desc-body (Single-Direction-Margins). */
.ate-seo-block p + h2,
.ate-seo-block ul + h2,
.ate-seo-block ol + h2,
.ate-seo-block p + h3,
.ate-seo-block ul + h3,
.ate-seo-block ol + h3 {
    margin-top: 26px;
}
.ate-seo-block p {
    font-size: 15px;
    margin-bottom: 14px;
}
.ate-seo-block ul,
.ate-seo-block ol {
    margin-bottom: 14px;
    padding-left: 20px;
}
.ate-seo-block li {
    font-size: 15px;
    margin-bottom: 6px;
}
.ate-seo-block a {
    color: var(--ate-navy);
    text-decoration: underline;
}
.ate-fae-band {
    background: var(--ate-navy);
    border-radius: 14px;
    color: #fff;
    padding: 36px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    margin: 34px 0 26px;
}
.ate-fae-band h2 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 6px;
}
.ate-fae-band p {
    color: #c7d3de;
    font-size: 15px;
    max-width: 560px;
    margin: 0;
}
.ate-btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 8px;
    background: #fff;
    color: var(--ate-navy);
    font-size: 15px;
    font-weight: 700;
    transition: transform .15s;
}
.ate-btn-white:hover {
    transform: translateY(-2px);
    color: var(--ate-navy);
    text-decoration: none;
}

/* === 12. Pagination, Responsive, Reduced Motion ========================== */

.ate-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 26px 0 6px;
}
.ate-page-pill {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 20px;
    background: #fff;
    color: var(--ate-navy);
    font-size: 13.5px;
    font-weight: 700;
    transition: border-color .15s;
}
a.ate-page-pill:hover {
    border-color: var(--ate-navy);
    text-decoration: none;
}
.ate-page-pill.active {
    background: var(--ate-navy);
    border-color: var(--ate-navy);
    color: #fff;
}
.ate-page-pill.is-disabled {
    opacity: .4;
}

@media (max-width: 1500px) {
    .ate-prod-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1100px) {
    .ate-prod-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 899.98px) {
    .ate-cat-layout {
        /* ate: minmax(0, …) wie im Desktop-Track (§6) — die Tabelle behaelt
           mobil min-width:900px; ohne 0-Minimum wuerde ihre min-content-
           Breite durch .ate-cat-main in den Grid-Track propagieren und die
           GANZE Seite horizontal scrollen lassen (frueher kaschierte das
           der Karten-Block mit min-width:0 auf der Tabelle). */
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .ate-filters {
        position: static;
        max-height: none;
        display: none;
        margin-bottom: 22px;
    }
    .ate-filters.open {
        display: block;
    }
    .ate-filter-toggle {
        display: inline-flex;
    }
}
@media (max-width: 560px) {
    .ate-prod-grid {
        grid-template-columns: 1fr;
    }
    .ate-fae-band {
        padding: 26px 22px;
    }

    /* ate: Toolbar. Gemessen bei 390px: 213px hoch, weil Filter-Button,
       Sortierung, Pro Seite und View-Toggle je eine eigene Zeile bekamen.
       Der Mockup hat den Pro-Seite-Select nicht und kommt darum mit drei
       Umbruchzeilen aus. Hier: Filter-Button und View-Toggle je volle Breite,
       die beiden Selects teilen sich eine Zeile mit Label darueber. */
    .ate-toolbar-left {
        width: 100%;
        gap: 10px;
    }
    .ate-filter-toggle {
        width: 100%;
    }
    .ate-sort,
    .ate-perpage {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        font-size: 12.5px;
    }
    .ate-sort select,
    .ate-perpage select {
        max-width: none;
        width: 100%;
    }
    .ate-view-toggle {
        width: 100%;
    }
    .ate-view-toggle a {
        flex: 1 1 0;
        justify-content: center;
    }

    /* ate: Werte, die der Mockup konstant laesst (er hat unterhalb 560px gar
       keinen Breakpoint) — auf schmalen Geraeten sonst zu wuchtig. */
    .ate-prod-card {
        padding: 16px;
    }
    .ate-imgbox {
        height: 180px;
    }
    .ate-filters {
        padding: 16px 16px 12px;
    }
    /* ate: Tabellen-Kompakt-Werte (92px-Bild etc.) kommen bereits aus dem
       <900px-Block in §10 — hier nichts mehr noetig. */
}

@media (prefers-reduced-motion: reduce) {
    .ate-prod-card,
    .ate-prod-card:hover,
    .ate-btn-white:hover,
    .ate-pindex-wrap::before,
    .ate-pindex-wrap::after {
        transform: none;
        transition: none;
    }
}