@charset "UTF-8";

/* ate: Produktdetailseite nach ATE-Mockup 3 (07/2026).
   Nutzt Custom-Properties aus custom.css (--ate-navy, --ate-magenta,
   --ate-magenta-dark, --ate-tiefnavy, --ate-grey-light, --ate-grey-mid, etc.).
   Magenta strikt als Signal/Hover/Akzent - keine flaechigen Magenta-Hintergruende
   (Quelle: Projektinformationen/ci.md).

   Geladen NUR auf PAGE_ARTIKEL, conditional via layout/header.tpl (?v=-Cache-
   Bust) - NICHT mehr im template.xml-Minify-Bundle (sonst Doppel-Load).

   Ansatz: CSS-first. NOVA-Markup fuer Preis/Menge/Warenkorb/Lager bleibt
   funktional erhalten und wird hier optisch aufs Mockup geremappt; nur
   Galerie/Meta-Zeile/Content sind eigene .ate-Bausteine.

   Sektionen:
     0.  Scope + lokale Tokens
     0b. Breadcrumb (nur Verweis — Regeln global in chrome.css §3b)
     1.  Hero-Grid (schmales 2-Spalten-Raster, 1080px)
     2.  Galerie (Hauptbild + Thumbnails, Flag)
     3.  Buy-Box (Eyebrow, h1, Meta+Quick-Actions, Chips, Lager, Preis-Remap,
         Staffel-Remap, Kauf-Remap, Lead-Row, Trust-Zeile)
     4.  Sub-Nav (sticky, Scrollspy)
     5.  Section-Shell + Reveal
     6.  #beschreibung
     7.  #technische-daten (Spec-Table)
     8.  #downloads (Dl-Grid)
     9.  #support (FAE-Band)
     10. #zubehoer (Prod-Grid)
     11. Variation-Swatches (BEHALTEN, CSS-only Polish auf NOVA-Markup)
     12. Konfigurator Inline-Modus (BEHALTEN, haengt an Migration20260528100000)
     13. Responsive + prefers-reduced-motion
*/


/* === 0. Scope + lokale Tokens ============================================== */

.ate-headline {
    font-family: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.15;
}

#result-wrapper {
    /* Neutrale Card-Schatten (die --ate-shadow-* aus custom.css sind
       magenta-getoent; auf der PDP wollen wir dezente Tiefe). */
    --ate-pdp-shadow: 0 10px 30px rgba(8, 25, 41, .10);
    --ate-pdp-shadow-sm: 0 4px 14px rgba(8, 25, 41, .08);
    --ate-pdp-maxw: 1080px;
    --ate-pdp-radius: 14px;
}

/* ate: Runde 2 — Unterstrich-Reset fuer die gesamte PDP (User-Wunsch "alles
   Unterstriche weg"). Exakt das Muster von category.css: die Basis-Underline
   kommt aus Bootstraps $link-decoration im inline geladenen my-nova_crit.css
   (a { text-decoration: underline }, Spezifitaet 0,0,1) — :where() nullt die
   Scope-Spezifitaet, diese Regel gewinnt rein ueber die Quellreihenfolge
   (productdetails.css laedt spaeter) und laesst alle .ate-*-Komponenten-
   Regeln (0,1,0+) weiterhin gewinnen. Der :hover/:focus-Block braucht
   dagegen (0,1,1), um custom.css `a:hover { underline }` (0,1,0) zu schlagen.
   productdetails.css laedt NUR auf PAGE_ARTIKEL — kein Seiteneffekt anderswo.
   Prose-Links in der Beschreibung bekommen gezielt Hover-Underline (s. §6). */
:where(#result-wrapper) a {
    text-decoration: none;
}

:where(#result-wrapper) a:hover,
:where(#result-wrapper) a:focus {
    text-decoration: none;
}


/* === 0b. Breadcrumb ======================================================== */

/* ate: Runde 3 — nach chrome.css §3b umgezogen (Breadcrumbs shopweit
   identisch, Single Source of Truth). Hier bewusst keine Regeln mehr. */


/* === 1. Hero-Grid ========================================================== */

/* ate: .product-detail ist NOVAs Bootstrap-Row. Wir kippen sie auf ein
   schmales 2-Spalten-Grid (Galerie fluid, Buy-Box 420px), max 1080px zentriert.
   Grid ueberstimmt das Row-Flex; Gutter-Negativmargen werden durch margin/gap
   ersetzt. Der Konfigurator-Container (3. Grid-Kind) spannt volle Breite. */
#result-wrapper .product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 48px;
    max-width: var(--ate-pdp-maxw);
    margin: 0 auto 36px;
    padding: 12px 0 0;
}

#result-wrapper .product-detail > .product-gallery,
#result-wrapper .product-detail > .product-info {
    max-width: 100%;
    flex: none;
    padding: 0;
    /* ate: Runde 4 — Grid-Items haben min-width:auto als Default; ohne
       min-width:0 propagiert die min-content-Breite der Kinder
       (Staffeltabelle, lange Artikelnummern) in den Track und von dort in
       Blinks Shrink-to-fit-Viewport (Muster category.css). */
    min-width: 0;
}

/* ate: PDP-Audit 07/2026 — Galerie bleibt beim Scrollen durch die lange
   Buy-Box im Viewport stehen (User-Wunsch, bewusste Mockup-Abweichung).
   align-self:start noetig, sonst streckt das Grid die Spalte auf Zeilenhoehe
   und sticky greift nie. Offset = Header+Trustbar (gemessen in js/custom.js)
   + Luft. Endet automatisch am Grid-Container. Mobil (<=900px, einspaltig)
   wieder aufgehoben, siehe §13. */
#result-wrapper .product-detail > .product-gallery {
    position: sticky;
    top: calc(var(--ate-sticky-top, 78px) + 16px);
    align-self: start;
}

#result-wrapper .product-detail > #product-configurator {
    grid-column: 1 / -1;
}

/* ate: Runde 4 — der Child leert den recommendations-Block (Zubehoer rendert
   im #zubehoer-psec), NOVAs Wrapper-Div liegt aber AUSSERHALB des Blocks und
   bliebe als leerer Container stehen. :has()-lose Browser behalten das
   unsichtbare leere Div — rein kosmetisch. */
#result-wrapper .recommendations:not(:has(*)) {
    display: none;
}

#result-wrapper .product-info .product-info-inner {
    padding: 0;
}


/* === 2. Galerie ============================================================ */

.ate-gallery .ate-main {
    position: relative;
    background: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-pdp-radius);
    /* ate: Bild fuellt die Galeriebreite. Vorher max-height 360px plus
       min-height 400px — das Motiv schwebte klein in der Karte. Hoehe folgt
       dem Seitenverhaeltnis, Hochformat bleibt bei 70vh gedeckelt.
       contain: inline-size bleibt — die intrinsische Bildbreite darf nicht
       in den Shrink-to-fit-Viewport propagieren (PDP-Audit 07/2026). */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 28px;
    contain: inline-size;
}

.ate-gallery .ate-main-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    object-position: center;
    /* ate: Klick oeffnet die Grossansicht. */
    cursor: zoom-in;
}

/* ate: Vollbild zur Produktgalerie, analog NOVA #image_wrapper.fullscreen. */
body.ate-zoom-open {
    overflow: hidden;
}
.ate-zoom {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px;
    background: rgba(8, 16, 32, 0.92);
}
.ate-zoom[hidden] {
    display: none;
}
.ate-zoom-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: default;
}
.ate-zoom-close,
.ate-zoom-nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #fff;
    color: var(--ate-navy, #0b1f3a);
    cursor: pointer;
}
.ate-zoom-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.ate-zoom-nav {
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
}
.ate-zoom-prev { left: 16px; }
.ate-zoom-next { right: 16px; }
.ate-zoom-close:focus-visible,
.ate-zoom-nav:focus-visible,
.ate-gallery .ate-main-img:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Produkt-Flag oben links (wiederverwendet aus product_flag.tpl). */
.ate-gallery .ate-main .ate-pflag {
    position: absolute;
    top: 18px;
    left: 18px;
    margin: 0;
    z-index: 2;
}

.ate-thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    min-width: 0;
}
.ate-thumbs {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
    /* ate 2026-09-08: Folie 16.4 — eine Reihe, Pfeile statt Umbruch. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ate-thumbs::-webkit-scrollbar {
    display: none;
}

.ate-thumbs .ate-thumb {
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
    border: 1px solid var(--ate-grey-light);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: border-color .15s ease;
    scroll-snap-align: start;
}

.ate-thumbs-btn {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 50%;
    background: #fff;
    color: var(--ate-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.ate-thumbs-btn:hover:not(:disabled) {
    background: var(--ate-navy);
    border-color: var(--ate-navy);
    color: #fff;
}
.ate-thumbs-btn:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}
.ate-thumbs-btn:disabled {
    opacity: .35;
    cursor: default;
}
.ate-thumbs-wrap:not(.is-overflow) .ate-thumbs-btn {
    display: none;
}

.ate-thumbs .ate-thumb:hover {
    border-color: var(--ate-grey-mid);
}

.ate-thumbs .ate-thumb.active {
    border: 2px solid var(--ate-navy);
}

.ate-thumbs .ate-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}


/* === 3. Buy-Box ============================================================ */

/* 3a. Eyebrow + Titel */
.product-info .ate-mfr {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    margin-bottom: 4px;
}

.product-info h1.product-title {
    font-size: clamp(26px, 3vw, 36px);
    color: var(--ate-navy);
    margin: 0 0 8px;
}

/* 3b. Meta-Zeile + Quick-Actions */
.product-info .ate-meta-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13.5px;
    color: var(--ate-grey-mid);
    margin-bottom: 16px;
}

/* ate: Runde 3 — HAN + Artikelnummer untereinander (Spalten-Wrapper in
   pdp_meta.tpl), Quick-Actions stehen via margin-left:auto rechts daneben. */
.product-info .ate-meta-ids {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* ate: Runde 4 — Flex-Item-min-width:auto kappen, sonst spannen
       unbrechbare HAN-/Artikelnummern-Tokens die Meta-Zeile (und via
       Grid-Propagation den Mobil-Viewport) auf. */
    min-width: 0;
}

.product-info .ate-meta-item {
    /* ate: Runde 4 — lange ID-Tokens duerfen umbrechen; anywhere zaehlt
       (anders als break-word) auch in der min-content-Berechnung. */
    overflow-wrap: anywhere;
}

.product-info .ate-meta-item b {
    color: var(--ate-navy);
    font-weight: 500;
}

.product-info .ate-quick-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    align-items: center;
}

.product-info .ate-quick-actions .ate-qa {
    display: inline-flex;
    position: relative;
}

/* Icon-Buttons - fasst reused Wunschliste/Vergleich (.ate-qa-btn via classes)
   und die eigenen Native-Buttons einheitlich. Bootstrap-.badge-Reset noetig. */
.product-info .ate-quick-actions .ate-qa-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: 1.5px solid var(--ate-grey-light);
    border-radius: 9px;
    background: #fff;
    color: var(--ate-navy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    font-size: 15px;
    line-height: 1;
    position: relative;
}

.product-info .ate-quick-actions .ate-qa-btn:hover,
.product-info .ate-quick-actions .ate-qa-btn.on-list {
    background: var(--ate-navy);
    border-color: var(--ate-navy);
    color: #fff;
}

.product-info .ate-quick-actions .ate-qa-btn:focus-visible {
    outline: 2px solid var(--ate-navy);
    outline-offset: 2px;
}

/* CSS-Tooltip nur fuer die eigenen Native-Buttons (Wunschliste/Vergleich
   bringen ihren eigenen Bootstrap-Tooltip mit - kein Doppel-Tooltip). */
.product-info .ate-qa-native[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ate-tiefnavy);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    /* ate: PDP-Audit 07/2026 — display:none statt nur opacity:0. Der
       unsichtbare, absolut positionierte nowrap-Tooltip ragte rechts aus der
       Meta-Zeile und weitete Blinks Mobil-Viewport auf 421px (gleicher
       Overflow-Quirk wie bei Galerie/Sub-Nav). Kostet die Fade-Transition,
       Tooltip erscheint weiterhin bei Hover/Fokus. */
    display: none;
    pointer-events: none;
    z-index: 5;
}

.product-info .ate-qa-native[data-tip]:hover::after,
.product-info .ate-qa-native[data-tip]:focus-visible::after {
    display: block;
}

/* 3c. Spec-Chips (Reuse ate_product_chips.tpl -> .ate-chips/.ate-chip-s) */
.product-info .ate-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.product-info .ate-chip-s {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ate-navy);
    background: #eef1f5;
    border: 1px solid var(--ate-grey-light);
    border-radius: 6px;
    padding: 5px 11px;
}

/* ate: Runde 3 — Kurzbeschreibung unter den Chips, eingeklappt mit
   "Weiterlesen" (pdp_kdesc.tpl; Toggle-Mechanik generisch in §6,
   line-height ist die Rechenbasis der max-height).
   ate 2026-08-24: 4 -> 3 Zeilen, Kunden-Feedback Fady (PPT 21.08., Folie 16
   Punkt 1). 2026-09-08: overflow+mask hier, damit der Clamp nicht nur
   vom spaeteren 10-Zeilen-Generikum erbt; Vorspann raus via ate_strip_wawi_ids. */
.product-info .ate-kdesc-wrap {
    margin: -6px 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: #3b4c5c;
}

.product-info .ate-kdesc-wrap.is-clamped .ate-descbody {
    max-height: calc(3 * 1.6em);
    overflow: hidden;
    -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%);
}

.product-info .ate-kdesc-wrap .ate-kdesc ul {
    margin: 0;
    padding-left: 18px;
}

.product-info .ate-kdesc-wrap .ate-kdesc li {
    margin-bottom: 4px;
}

.product-info .ate-kdesc-wrap .ate-desc-toggle {
    /* ate: Runde 4 — -2px kompensiert die neuen 6px Tap-Padding (vorher 4px
       Abstand bei padding 0). */
    margin-top: -2px;
    font-size: 13.5px;
}

/* ate: Datenblaetter unter Weiterlesen — kompakte Variante der Download-Karte. */
.product-info .ate-kdesc-docs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-info .ate-kdesc-docs:first-child {
    margin: 0 0 18px;
}
.product-info .ate-kdesc-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--ate-grey-light);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.product-info .ate-kdesc-doc:hover,
.product-info .ate-kdesc-doc:focus {
    border-color: var(--ate-magenta);
    box-shadow: var(--ate-pdp-shadow-sm);
    text-decoration: none;
}
.product-info .ate-kdesc-doc-ic {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ate-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.product-info .ate-kdesc-doc-body {
    min-width: 0;
}
.product-info .ate-kdesc-doc-name {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ate-navy);
    overflow-wrap: anywhere;
}
.product-info .ate-kdesc-doc-kind {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ate-grey-mid);
}

/* 3d. Lagerstatus (NOVA stock.tpl .delivery-status .status -> Mockup .stock) */

/* ate: Runde 2 — Verfuegbarkeit + Lieferzeit UEBER den Preis (User-Wunsch;
   entspricht auch dem Mockup: .stock steht dort vor .pricebig). Preis-Col
   (.col mit .price_wrapper) und Lager-Col (.col-12 mit .stock-information)
   sind Geschwister-Flex-Items derselben Bootstrap-Row (NOVA details.tpl:207)
   -> order:-1 zieht die Lager-Col nach vorn. :has() trifft NUR diese Col
   (Variationen-Rows bleiben unberuehrt); Browser ohne :has() behalten
   schlicht die alte Reihenfolge. */
#result-wrapper .product-offer > .row > .col-12:has(.stock-information) {
    order: -1;
}

.product-info .product-offer .delivery-status {
    margin-bottom: 20px;
}

.product-info .product-offer .delivery-status .status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ate-navy);
}

/* ate: PDP-Audit 07/2026 — Punktfarbe an NOVAs echte Status-Klassen gekoppelt
   (status-2 = verfuegbar/gruen, status-1 = knapp/gelb, status-0 = nicht
   verfuegbar/rot; vorher war die Zuordnung verdreht und der Punkt bei
   "Momentan nicht verfuegbar" gruen). Default grau fuer Sonderzustaende
   (Zulauf, Erscheinungsdatum etc. ohne Ampelklasse). */
.product-info .product-offer .delivery-status .status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ate-grey-mid, #74879d);
    flex: none;
}

.product-info .product-offer .delivery-status .status-2::before {
    background: #1a7f4b;
}

.product-info .product-offer .delivery-status .status-1::before {
    background: #e0a021;
}

.product-info .product-offer .delivery-status .status-0::before {
    background: #c0392b;
}

/* ate: NOVAs Truck-Icon vor dem Statustext ausblenden — das Mockup zeigt nur
   Punkt + Text. */
.product-info .product-offer .delivery-status .status .status-icon {
    display: none;
}

.product-info .product-offer .delivery-status .estimated-delivery,
.product-info .product-offer .delivery-status .delivery-status {
    font-size: 13px;
    color: var(--ate-grey-mid);
    font-weight: 400;
    margin: 0;
}

/* ate: NOVAs "Frage zum Artikel"-Textlink neben dem Lager ausblenden -
   die Frage-Aktion sitzt im Mockup als Icon in der Meta-Zeile
   (pdp_quick_actions.tpl). Doppelung vermeiden. */
.product-info .product-offer .question-on-item {
    display: none;
}

/* 3e. Preis-Remap (NOVA price.tpl) */
.product-info .product-offer .price_label.pricestarting,
.product-info .product-offer .price_label.nowonly {
    font-size: 13px;
    color: var(--ate-grey-mid);
    font-weight: 500;
}

.product-info .product-offer .price.h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--ate-navy);
    margin: 0 0 4px;
    line-height: 1.1;
}

.product-info .product-offer .price-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--ate-grey-mid);
    margin-bottom: 20px;
}

.product-info .product-offer .price-note .vat_info {
    font-size: 13px;
    color: var(--ate-grey-mid);
}

/* UVP als durchgestrichener Alt-Preis, direkt unter den Grosspreis gezogen. */
.product-info .product-offer .price-note .suggested-price {
    order: -1;
    font-size: 15px;
    color: var(--ate-grey-mid);
}

.product-info .product-offer .price-note .suggested-price .value {
    text-decoration: line-through;
}

.product-info .product-offer .price-note .yousave {
    color: #1a7f4b;
    font-weight: 500;
}

.product-info .product-offer .price-note .base-price {
    font-size: 12.5px;
    color: var(--ate-grey-mid);
}

/* 3f. Staffelpreise (NOVA .bulk-prices table -> Mockup .tiers) */
.product-info .product-offer .bulk-prices {
    margin-bottom: 24px;
    /* ate: Runde 4 — die 3-4-spaltige Tabelle (min-content ~300-320px) war
       der letzte ungesicherte Blowout-Kandidat: auf 320px-Viewports spannte
       sie die Buybox und damit Blinks Shrink-to-fit-Viewport auf. Gleiche
       Kur wie Sub-Nav/Sektionstabellen: intern scrollen, contain:paint
       kappt die Propagation. Desktop unveraendert (Tabelle passt). */
    overflow-x: auto;
    contain: paint;
    -webkit-overflow-scrolling: touch;
}

.product-info .product-offer .bulk-prices table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}

.product-info .product-offer .bulk-prices thead th {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--ate-navy);
    background: transparent;
}

.product-info .product-offer .bulk-prices tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ate-grey-light);
    color: #3b4c5c;
}

.product-info .product-offer .bulk-prices tbody tr:hover td {
    background: #f8f9fb;
}

.product-info .product-offer .bulk-prices .bulk-price {
    color: var(--ate-navy);
    font-weight: 500;
}

/* ate: PDP-Audit 07/2026 — Mockup-Hint-Zeile "Projektpreis auf Anfrage"
   (tr.hint im Mockup, angehaengt via Child-price.tpl). */
.product-info .product-offer .bulk-prices .ate-tier-hint td {
    font-size: 13px;
    color: var(--ate-grey-mid);
}

.product-info .product-offer .bulk-prices tbody tr.ate-tier-hint:hover td {
    background: transparent;
}

/* ate: Runde 2 — Ersparnis-Spalte (Mockup "ERSPARNIS": gruene Prozente)
   + Basiszeile "1+" (regulaerer VK, kein Hervorheben). */
.product-info .product-offer .bulk-prices .ate-tier-save {
    color: #1a7f4b;
    font-weight: 500;
    white-space: nowrap;
}

.product-info .product-offer .bulk-prices .ate-tier-base .ate-tier-save {
    color: var(--ate-grey-mid);
    font-weight: 400;
}

/* 3g. Kauf-Zeile (NOVA basket.tpl .basket-form-inline + .form-counter) */
.product-info .basket-form-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    align-items: stretch;
}

/* ate: Runde 2 — Kaufgruppe kompakter (User-Wunsch): NOVA gibt .product-offer
   margin-bottom:2rem (_base_crit.scss via #product-offer-Scope) -> 32px Gap
   zwischen Warenkorb-Zeile und Muster/Projektpreis-Buttons. Gleicher Selektor
   wie NOVA (1,1,1), gewinnt ueber die Quellreihenfolge. */
#product-offer .product-info .product-offer {
    margin-bottom: 12px;
}

.product-info .basket-form-inline > [class*="col-"] {
    padding: 0;
    max-width: none;
    flex: 1 1 auto;
}

.product-info .basket-form-inline > [class*="col-"]:first-child {
    flex: 0 0 auto;
    /* ate: PDP-Audit 07/2026 — Bootstrap setzt width:100% auf jeder Col; mit
       flex-basis:auto wurde die Mengen-Spalte dadurch 420px breit und drueckte
       den Warenkorb-Button aus der Buy-Box. width:auto laesst sie auf den
       Stepper schrumpfen, der Button nimmt den Rest (Mockup .buy-row). */
    width: auto;
}

/* ate: PDP-Audit 07/2026 — NOVA blendet das "In den Warenkorb"-Label unter
   576px aus (Icon-only, _buttons.scss via #add-to-cart-ID). Das Mockup zeigt
   mobil den vollen Text auf dem full-width-Button; Platz ist da (~358px).
   ID im Selektor noetig, um die NOVA-Spezifitaet zu schlagen. */
.product-info #add-to-cart .btn .btn-basket-check span {
    display: inline-block;
}

.product-info #quantity-grp.form-counter {
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--ate-navy);
    border-radius: 8px;
    overflow: hidden;
    flex-wrap: nowrap;
    width: auto;
    /* ate: Runde 2 — NOVA deckelt .form-counter auf max-height:$input-height
       (~43px, _forms.scss:68) und clippte die 50px-Buttons. Stepper soll
       exakt so hoch sein wie der Warenkorb-Button (54px = 50 + 2x2 Border). */
    max-height: none;
    height: 54px;
}

.product-info #quantity-grp.form-counter .btn {
    width: 42px;
    height: 50px;
    border: none;
    background: #fff;
    color: var(--ate-navy);
    font-size: 18px;
    font-weight: 700;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-info #quantity-grp.form-counter .btn:hover {
    background: #eef1f5;
}

.product-info #quantity-grp.form-counter input.quantity {
    width: 56px;
    height: 50px;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ate-navy);
    box-shadow: none;
}

.product-info #quantity-grp.form-counter .unit {
    border: none;
    background: #fff;
    color: var(--ate-grey-mid);
    font-size: 13px;
    /* ate: Runde 3 — "Stk" sass oben statt mittig: das Unit-Element ist ein
       .form-control mit Bootstrap-Fixhoehe (~38px) in der 54px-Gruppe.
       Volle Hoehe + Flex-Zentrierung. */
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* ate: Runde 3 — Prepend/Append-Wrapper der Gruppe ebenfalls auf volle Hoehe
   zentrieren, sonst haengen ihre Kinder am oberen Rand. */
.product-info #quantity-grp.form-counter .input-group-prepend,
.product-info #quantity-grp.form-counter .input-group-append {
    height: 100%;
    display: flex;
    align-items: center;
}

.product-info .basket-form-inline .btn-primary {
    height: 54px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
}

/* 3h. Lead-Row (Muster / Projektpreis) */
.product-info .ate-lead-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 22px;
}

.product-info .ate-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ate-navy);
    color: var(--ate-navy);
    background: transparent;
    border-radius: 8px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
}

/* ate: Runde 3 — Muster/Projektpreis auf dieselbe Hoehe wie Stepper +
   Warenkorb-Button (54px); btn-sm-Padding ist damit obsolet. */
.product-info .ate-lead-row .ate-btn-outline {
    height: 54px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 15px;
}

.product-info .ate-btn-outline:hover {
    background: var(--ate-navy);
    color: #fff;
}

/* 3i. Trust-Zeile */
.product-info .ate-pdp-trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--ate-grey-light);
    padding-top: 18px;
}

.product-info .ate-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ate-grey-mid);
    font-weight: 500;
}

.product-info .ate-trust-item svg {
    color: var(--ate-grey-mid);
    flex: none;
}


/* === 4. Sub-Nav (sticky, Scrollspy) ======================================== */

.ate-subnav {
    position: sticky;
    top: var(--ate-sticky-top, 78px);
    z-index: 90;
    background: #fff;
    border-top: 1px solid var(--ate-grey-light);
    border-bottom: 1px solid var(--ate-grey-light);
    margin-bottom: 8px;
}

.ate-subnav-inner {
    max-width: var(--ate-pdp-maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    /* ate: PDP-Audit 07/2026 — ohne contain:paint propagiert die min-content-
       Breite der 5 nowrap-Links (~709px) in Blinks Shrink-to-fit-Viewport:
       innerWidth 709 statt 390, ganze Seite ausgezoomt + hScroll. Gleicher
       Quirk + Fix wie beim Kategorie-Tabellen-Scroller (Blink-Memory). */
    contain: paint;
    /* ate: Runde 4 — Scroller-Hygiene wie Trustbar (chrome.css) und
       Kategorie-Pills: keine sichtbare Scrollbar unter der Nav,
       iOS-Momentum-Scroll. Fade-Kanten mobil siehe §13. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ate-subnav-inner::-webkit-scrollbar {
    display: none;
}

.ate-subnav a {
    padding: 16px 18px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ate-grey-mid);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.ate-subnav a:hover {
    color: var(--ate-navy);
}

.ate-subnav a.active {
    color: var(--ate-navy);
    border-bottom-color: var(--ate-magenta);
}


/* === 5. Section-Shell + Reveal ============================================= */

.ate-pdp-content {
    max-width: var(--ate-pdp-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.ate-psec {
    padding: 64px 0;
    border-bottom: 1px solid var(--ate-grey-light);
    scroll-margin-top: calc(var(--ate-sticky-top, 78px) + 62px);
}

/* ate 2026-08-24: Sprungmarken der Langbeschreibung (Devbox-Schnellzugriff,
   js/productdetails.js initDescAnchors, Fady Folie 17) — gleicher Offset wie
   die Sektionen, sonst landen die Ueberschriften unter Sticky-Header+Subnav.
   ate 2026-09-08: h3 dazu (Wawi nutzt die oft statt h2). */
.ate-desc-text h2,
.ate-desc-text h3 {
    scroll-margin-top: calc(var(--ate-sticky-top, 78px) + 62px);
}

.ate-psec:last-child {
    border-bottom: none;
}

.ate-psec > h2.ate-headline {
    font-size: clamp(24px, 2.6vw, 32px);
    color: var(--ate-navy);
    margin-bottom: 22px;
}

/* ate: Runde 4 — Default ist SICHTBAR; erst die Root-Klasse ate-js-reveal
   (setzt initReveal() in productdetails.js, nachdem der Observer steht)
   aktiviert das Ausblenden. Vorher war opacity:0 der CSS-Default: jeder
   JS-Fehler/404 liess Downloads-, Support- und Zubehoer-Sektion unsichtbar. */
.ate-js-reveal .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.ate-js-reveal .reveal.visible {
    opacity: 1;
    transform: none;
}


/* === 6. #beschreibung ====================================================== */

.ate-psec .ate-cols {
    display: grid;
    /* ate: Runde 4 — minmax(0, Nfr) statt Nfr: Track-Min "auto" liess die
       min-content-Breite von Wawi-Prose/Bildern durchpropagieren
       (category.css-Muster). Gilt fuer alle Grids dieser Datei. */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 48px;
    align-items: start;
}

.ate-desc-text {
    color: #3b4c5c;
    /* Rechenbasis der Clamp-max-height (s. .ate-descwrap unten). */
    line-height: 1.6;
}

.ate-desc-text p {
    margin-bottom: 16px;
}

/* ate: Runde 4 — Wawi-Prose-Haertung: Bilder aus der Beschreibung skalieren
   mit (KEIN globales img{max-width:100%} im Theme!), lange URLs/Nummern-
   Ketten brechen um (anywhere zaehlt auch fuer min-content), <pre> scrollt
   in sich. Gilt fuer Sektions-Langtext UND Buybox-Kurzbeschreibung. */
.ate-desc-text,
.ate-descbody {
    overflow-wrap: anywhere;
}

.ate-desc-text img,
.ate-descbody img {
    max-width: 100%;
    height: auto;
}

.ate-desc-text picture,
.ate-descbody picture {
    display: contents;
}

.ate-desc-text pre,
.ate-descbody pre {
    max-width: 100%;
    overflow-x: auto;
    contain: paint;
}

/* ate: Runde 2/3 — Weiterlesen-Toggle-Mechanik (generisch, aktuell nur an der
   Buybox-Kurzbeschreibung, pdp_kdesc.tpl; die Langbeschreibung in der Sektion
   steht seit Runde 3 komplett ausgeklappt).
   Exakt das Kategorieseiten-Muster (category.css §Beschreibungs-Toggle):
   max-height statt -webkit-line-clamp, weil Wawi-HTML in <section>-Wrappern
   line-clamp bricht (computed display flow-root, Zeilen uebereinander). */
.ate-descwrap.is-clamped .ate-descbody {
    max-height: calc(10 * 1.6em);
    overflow: hidden;
    -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%);
}

/* WYSIWYG-Guards (Muster category.css): die generische main-section-Padding-
   Regel des Themes wuerde den geklammerten Text hinter das Padding schieben;
   Single-Direction-Margins gegen Collapse-Sprünge beim Messen. */
.ate-descbody section {
    padding: 0;
}

.ate-descbody > *:first-child {
    margin-top: 0;
}

.ate-descbody > *:last-child {
    margin-bottom: 0;
}

.ate-desc-toggle {
    /* ate: Runde 4 — Tap-Flaeche >=24px (WCAG 2.5.8): 6px Padding statt 0;
       margin-Ausgleich haelt die visuelle Position (Text sass vorher 8px
       unterm Body, Unterkante buendig). */
    margin: 2px 0 -6px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ate-navy);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.ate-desc-toggle:hover,
.ate-desc-toggle:focus-visible {
    color: var(--ate-magenta-dark);
}

/* Zwingend: Bootstrap-/Theme-Displays wuerden das native hidden ueberstimmen. */
.ate-desc-toggle[hidden] {
    display: none;
}

.ate-devbox {
    background: #f4f6f8;
    border-radius: var(--ate-pdp-radius);
    padding: 28px 30px;
    position: relative;
    overflow: hidden;
}

.ate-devbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--ate-gradient-accent);
}

.ate-devbox > h3.ate-headline {
    font-size: 18px;
    color: var(--ate-navy);
    margin-bottom: 10px;
}

.ate-devbox ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ate-devbox li {
    padding: 7px 0;
    border-bottom: 1px solid var(--ate-grey-light);
    font-size: 14.5px;
}

.ate-devbox li:last-child {
    border-bottom: none;
}

.ate-devbox a {
    color: var(--ate-navy);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ate-devbox a::after {
    content: "\2192";
}

.ate-devbox a:hover {
    color: var(--ate-magenta-dark);
}

/* ate: Runde 2 — Prose-Links in der Beschreibung bekommen (nach dem globalen
   Underline-Reset in §0) gezielt Hover-Underline zurueck, wie
   .ate-cat-desc-body a auf der Kategorieseite. */
.ate-desc-text a:hover,
.ate-kdesc-wrap a:hover {
    text-decoration: underline;
}


/* === 7. #technische-daten (Spec-Table) ===================================== */

.ate-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    max-width: 860px;
}

.ate-spec-table thead th {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ate-navy);
    text-align: left;
    padding: 12px 18px;
}

.ate-spec-table td {
    padding: 11px 18px;
    border-bottom: 1px solid var(--ate-grey-light);
    vertical-align: top;
}

.ate-spec-table td:first-child {
    color: var(--ate-grey-mid);
    width: 38%;
}

.ate-spec-table td:last-child {
    color: var(--ate-navy);
    font-weight: 500;
}

.ate-spec-table tr:nth-child(even) td {
    background: #f8f9fb;
}

.ate-spec-note {
    font-size: 13px;
    color: var(--ate-grey-mid);
    margin-top: 14px;
}


/* === 8. #downloads (Dl-Grid) =============================================== */

.ate-dl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ate-dl-card {
    border: 1px solid var(--ate-grey-light);
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: inherit;
    /* ate: PDP-Audit 07/2026 — Wawi-Dateinamen sind lange unbrechbare Woerter
       ("87-95536-1_REV_A_..._Brief.pdf"); ohne Umbruch spannten sie die Karte
       (und damit Blinks Mobil-Viewport) auf ~420px min-content auf. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.ate-dl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ate-pdp-shadow-sm);
    border-color: var(--ate-magenta);
    text-decoration: none;
}

.ate-dl-card-ic {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ate-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.ate-dl-card-title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ate-navy);
    margin-bottom: 3px;
}

.ate-dl-card-desc {
    display: block;
    font-size: 13px;
    color: var(--ate-grey-mid);
}


/* === 9. #support (FAE-Band) ================================================ */

.ate-fae-band {
    background: var(--ate-navy);
    border-radius: var(--ate-pdp-radius);
    color: #fff;
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.ate-fae-band .ate-fae-text h2 {
    color: #fff;
    font-size: 26px;
    margin-bottom: 8px;
}

.ate-fae-band .ate-fae-text p {
    color: #c7d3de;
    font-size: 15px;
    max-width: 560px;
    margin: 0;
}

.ate-fae-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ate-fae-band .ate-btn-white,
.ate-fae-band .ate-btn-outline-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    border: 2px solid transparent;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.ate-fae-band .ate-btn-white {
    background: #fff;
    color: var(--ate-navy);
}

.ate-fae-band .ate-btn-outline-white {
    border-color: #fff;
    color: #fff;
    background: transparent;
}

.ate-fae-band .ate-btn-outline-white:hover {
    background: #fff;
    color: var(--ate-navy);
    text-decoration: none;
}

.ate-fae-band .ate-btn-white:hover {
    transform: translateY(-2px);
    text-decoration: none;
}


/* === 10. #zubehoer (Prod-Grid) ============================================= */

.ate-prod-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ate-prod-card {
    background: #fff;
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-pdp-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ate-prod-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ate-pdp-shadow);
}

.ate-prod-card-img {
    display: block;
    margin: 6px auto 16px;
    /* ate: Runde 4 — Bild-Guard wie auf der Kategorieseite (category.css
       .ate-imgbox): height:140px + width:auto machte Breitformat-Bilder
       (z.B. 200x50-Boundingbox) 560px breit und sprengte die Karte mobil. */
    max-width: 100%;
    overflow: hidden;
}

.ate-prod-card-img img {
    height: 140px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* ate: Runde 4 — der {image}-Fallback liefert ein <picture>; display:contents
   laesst die img-Regeln durchgreifen (JTL-{image}-Memory). */
.ate-prod-card-img picture {
    display: contents;
}

.ate-prod-card-mfr {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ate-grey-mid);
}

.ate-prod-card-title {
    font-size: 16.5px;
    color: var(--ate-navy);
    margin: 4px 0 12px;
}

.ate-prod-card-title a {
    color: inherit;
}

.ate-prod-card-title a:hover {
    color: var(--ate-magenta-dark);
    text-decoration: none;
}

.ate-prod-card-price {
    margin-top: auto;
    margin-bottom: 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--ate-navy);
}

.ate-prod-card-price .price {
    font-size: 19px;
    font-weight: 700;
    color: var(--ate-navy);
}

.ate-prod-card-cta {
    width: 100%;
}


/* === 11. Variation-Swatches (BEHALTEN, CSS-only, kein TPL-Override) ======== */

/* ate: NOVA-Parent rendert 4 Render-Typen je nach Wawi-cTyp (selectbox, radio,
   imgswatches, textswatches). Wir polishen .swatches (text+image) auf
   ATE-Design. Stock-out-of-stock-Indikator bleibt nativ.

   Runde 4 — Selektoren auf NOVAs ECHTES Markup korrigiert
   (variation.tpl:171/237): <label class="variation swatches swatches-text
   [active] [swatches-not-in-stock|swatches-sold-out]">. Die frueheren
   .swatches.btn/.btn-default/.out-of-stock-Selektoren matchten NICHTS
   (toter Block seit dem Umbau). label.swatches noetig, weil die formrow
   selbst auch die Klasse "swatches" traegt. */

.variations label.swatches {
    border-radius: var(--ate-rnd-sm);
    border: 1px solid var(--ate-grey-light);
    background-color: var(--ate-white);
    color: var(--ate-tiefnavy);
    padding: 0.4rem 0.75rem;
    margin: 0.15rem 0.2rem 0.15rem 0;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    min-height: 38px;
    line-height: 1.3;
}

.variations label.swatches:hover,
.variations label.swatches:focus {
    border-color: var(--ate-magenta);
    color: var(--ate-tiefnavy);
    box-shadow: var(--ate-shadow-hover);
    background-color: var(--ate-white);
}

.variations label.swatches.active,
.variations input[type="radio"]:checked + label.swatches,
.variations input[type="radio"]:checked + .swatches {
    border-color: var(--ate-magenta);
    background-color: rgba(249, 11, 249, 0.06);
    color: var(--ate-tiefnavy);
    box-shadow: var(--ate-shadow-hover);
}

/* Out-of-stock-/Sold-out-State: gedaempft, durchgestrichen. */
.variations .swatches[data-stock="out-of-stock"],
.variations label.swatches.swatches-not-in-stock,
.variations label.swatches.swatches-sold-out {
    opacity: 0.45;
    text-decoration: line-through;
    cursor: not-allowed;
}

.variations .swatches[data-stock="out-of-stock"]:hover,
.variations label.swatches.swatches-not-in-stock:hover,
.variations label.swatches.swatches-sold-out:hover {
    border-color: var(--ate-grey-light);
    box-shadow: none;
}


/* === 12. Konfigurator Inline-Modus (BEHALTEN, cfg-position-details) ======== */

/* ate: Migration20260528100000 setzt config_position='details' (Inline)
   + config_layout='gallery'. NOVA-Parent rendert dann
   <div id="product-configurator" class="cfg-position-details cfg-layout-gallery">
   - hier polishen wir den Look auf ATE-Design. */

.cfg-position-details {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background-color: var(--ate-white);
    border: 1px solid var(--ate-grey-light);
    border-top: 3px solid var(--ate-magenta);
    border-radius: var(--ate-rnd-md);
}

.cfg-position-details .cfg-group {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--ate-grey-light);
}

.cfg-position-details .cfg-group:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cfg-position-details .cfg-group-title,
.cfg-position-details .cfg-group h3,
.cfg-position-details .cfg-group .h3 {
    color: var(--ate-tiefnavy);
    font-size: 1rem;
    margin-bottom: 0.6rem;
}

/* Konfigurator-Item-Cards (Gallery-Layout). */
.cfg-position-details .cfg-item,
.cfg-position-details .config-item {
    border: 1px solid var(--ate-grey-light);
    border-radius: var(--ate-rnd-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cfg-position-details .cfg-item:hover,
.cfg-position-details .config-item:hover {
    border-color: var(--ate-magenta);
    box-shadow: var(--ate-shadow-hover);
    transform: translateY(-1px);
}

.cfg-position-details .cfg-item.selected,
.cfg-position-details .config-item.selected,
.cfg-position-details .cfg-item .cfg-swatch:checked + label,
.cfg-position-details input[type="checkbox"]:checked + label,
.cfg-position-details input[type="radio"]:checked + label {
    border-color: var(--ate-magenta);
    box-shadow: var(--ate-shadow-hover);
}

/* Start-Configuration-Button (Inline-Modus auch noch sichtbar als Anker). */
.start-configuration {
    border-radius: var(--ate-rnd);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.start-configuration:hover,
.start-configuration:focus {
    border-color: var(--ate-magenta);
    box-shadow: var(--ate-shadow-hover);
    transform: translateY(-1px);
}

/* Konfigurator-Sidebar (Summary). */
.cfg-position-details #product-configuration-sidebar,
.cfg-position-details .config-sidebar {
    background-color: rgba(0, 38, 73, 0.025);
    border-radius: var(--ate-rnd-sm);
    padding: 1rem;
    border-left: 3px solid var(--ate-navy);
}


/* === 13. Responsive + prefers-reduced-motion =============================== */

@media (max-width: 1100px) {
    .ate-dl-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .ate-prod-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ate: Runde 4 — Layout-Umschalt von 900 auf 991.98px: der Bootstrap-
   Container springt erst bei 992 auf 960px; zwischen 901 und 991 blieb fuer
   die Galerie-Spalte nur 688-468=220px (Bild ~146px neben der 420px-Buybox).
   Jetzt konsistent mit dem Container-Step einspaltig. */
@media (max-width: 991.98px) {
    #result-wrapper .product-detail {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    /* ate: einspaltig gestapelt — Sticky-Galerie wieder aufheben, sonst
       klebt das Bild ueber der Buy-Box. */
    #result-wrapper .product-detail > .product-gallery {
        position: static;
    }
    /* ate: PDP-Audit 07/2026 — Tabellen scrollen in sich statt die Seite
       aufzuspannen. Die Wawi-Beschreibung liefert rohe <table>-Bloecke,
       deren min-content-Breite den Blink-Viewport auf ~709px aufblaehte
       (innerWidth 709 statt 390, 319px Seiten-hScroll — Quirk-Doku siehe
       Blink-Memory: min-width im Scroller). display:block entkoppelt die
       intrinsische Breite vom Layout, overflow-x haelt sie scrollbar. */
    .ate-psec .ate-desc-text table,
    .ate-psec table.ate-spec-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        contain: paint; /* s. Sub-Nav: min-content darf nicht in den Viewport propagieren */
    }
    .ate-psec .ate-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    /* ate: Schnellzugriff-Box mobil aus. Ab diesem Breakpoint ist die
       Beschreibung einspaltig, die Box landet als zweite Sprungliste unter
       dem Text. Die Sub-Nav bleibt. */
    .ate-devbox {
        display: none;
    }
    .ate-prod-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* ate: Runde 4 — Fade-Kanten am Sub-Nav-Scroller ("da geht's weiter";
       3 von 5 Sektionen liegen mobil off-screen). Statisches Mask beidseitig;
       die 24px Fade-Zone deckt sich mit dem Innen-Padding, am Scroll-Anfang
       dimmt sie also nur Leerraum. */
    .ate-subnav-inner {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    }
}

/* ate: Runde 4 — Sub-Nav-Sticky-Ziel getrennt vom Layout-Breakpoint: die
   Trustbar ist bis 839.98px sticky (chrome.css:967) und steckt in
   --ate-sticky-top; erst darunter darf die Sub-Nav direkt unter den Header
   (vorher ab 900px -> im Fenster 840-900 verschwand sie hinter der Trustbar,
   z-index 90 vs. 1019). scroll-margin-top zieht mit, sonst landen
   Ankerspruenge ~40px zu tief. */
@media (max-width: 839.98px) {
    .ate-subnav {
        top: var(--ate-header-h, 0px);
    }
    .ate-psec {
        scroll-margin-top: calc(var(--ate-header-h, 0px) + 62px);
    }
}

@media (max-width: 560px) {
    .ate-dl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-info .ate-lead-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .product-info .basket-form-inline {
        flex-wrap: wrap;
    }
    .product-info .basket-form-inline > [class*="col-"]:last-child {
        flex: 1 1 100%;
    }
    .ate-gallery .ate-main {
        padding: 16px;
    }
    .ate-thumbs .ate-thumb {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }
    .ate-fae-band {
        padding: 28px 24px;
    }
    /* ate: Runde 4 — Dichte-Angleich an die Kategorieseite (category.css
       reduziert analoge Paddings ebenfalls ab 560): Sektionen und Karten
       kompakter, Seitenpadding von Sektionen/Sub-Nav auf die 16px des
       Bootstrap-Containers ausgerichtet (vorher 8px-Versatz zum Hero). */
    .ate-psec {
        padding: 40px 0;
    }
    .ate-devbox {
        padding: 22px 20px;
    }
    .ate-dl-card {
        padding: 18px;
    }
    .ate-prod-card {
        padding: 18px;
    }
    .ate-pdp-content,
    .ate-subnav-inner {
        padding: 0 16px;
    }
    .ate-subnav-inner {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* ate: Runde 4 — auch unter der ate-js-reveal-Root-Klasse sichtbar
       erzwingen (falls das OS-Setting nach dem Init kippt). */
    .reveal,
    .ate-js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ate-dl-card:hover,
    .ate-prod-card:hover,
    .ate-btn-white:hover {
        transform: none;
    }
}