/* ============================================================
   fux_products_hsgm — konsolidierte Produkt-Styles
   ============================================================
   Quelle: _prototypes/css/ (product-detail.css, hsg-0-alt.css,
   schneidspitzen.css, products-overview.css) + Inline-Styles der
   Prototyp-HTMLs. Konsolidiert am 2026-09-16 (CSS/JS-Etappe):
   Dubletten zwischen den Prototyp-Dateien sind aufgeloest, nur die
   von den Extension-Templates referenzierten Klassen sind enthalten.

   Bewusste Abweichungen vom Prototyp (begruendet):
   - --gray-secondary #86868b -> #6e6e73: Der Prototyp-Wert erreicht
     auf Weiss nur ~3,7:1 und verfehlt WCAG 1.4.3 (4,5:1) fuer
     Fliesstext. #6e6e73 erreicht 5,07:1 auf Weiss und 4,66:1 auf
     --gray-quaternary (beides nachgerechnet, A11y-Reviews 2026-09-16).
   - Success-Green (#32D74B) und Warning-Yellow (#FFD60A) sind KEINE
     Textfarben auf hellem Grund, Blue Light (#3384D9) ist kein
     Fliesstext (dokumentierte Kontrast-Regeln) — beide kommen hier
     nur gar nicht bzw. als Akzent (Hover-Border) vor.
   - Aktiver Filter-Chip traegt zusaetzlich ein Haekchen (::before),
     damit der Zustand nicht nur ueber Farbe unterscheidbar ist
     (WCAG 1.4.1); Zustands-Selektor ist [aria-pressed="true"].
   - Mini-Slider-Dots: 7px-Punkt des Prototyps verfehlt Target Size
     (WCAG 2.5.8, min. 24x24px). Der Button ist 24x24px, der sicht-
     bare Punkt ein ::before.
   - Slides werden ueber das hidden-Attribut geschaltet (nicht nur
     opacity) — Screenreader und Tastatur sehen nur den aktiven Slide.

   Kaskaden-Kontext: Die Seiten rendern im Legacy-Rahmen des
   fux_sitepackage_hsgm (Meyer-Reset: font:inherit auf Ueberschriften,
   list-style:none auf ul/ol; global.css: .container {width:1024px},
   .row {float:left}). Deshalb setzen alle Komponenten Schriftgroessen
   und -gewichte explizit, und .container/.row werden innerhalb der
   Produkt-Komponenten neutralisiert.
   ============================================================ */

:root {
    /* HSGM Corporate Colors */
    --hsgm-blue: #0066CC;
    --hsgm-blue-dark: #0051A3;
    --hsgm-blue-light: #3384D9; /* nur Akzent/Border, kein Fliesstext */

    /* Graustufen (siehe Kontrast-Abweichung oben) */
    --gray-primary: #1d1d1f;
    --gray-secondary: #6e6e73;
    --gray-tertiary: #d2d2d7;
    --gray-quaternary: #f5f5f7;
    --gray-background: #fbfbfd;

    --white: #ffffff;

    /* Typo-Skala */
    --font-size-h1: clamp(2rem, 4vw, 3rem);
    --font-size-h2: clamp(1.5rem, 3vw, 2rem);
    --font-size-h3: 1.5rem;
    --font-size-body: 1.0625rem;
    --font-size-small: 0.875rem;

    /* Abstaende */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-section: 5rem; /* Prototyp: 8rem — im 1024px-Legacy-Rahmen reduziert */

    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Offset fuer sticky Elemente: 0 im Legacy-Rahmen (Header scrollt
       mit). Beim Relaunch mit fixem Header hier zentral anheben. */
    --fux-sticky-offset: 0px;
    /* Sichtbare Hoehe der Sektionsleiste + Luft — Bezugswert fuer
       scroll-margin-top (WCAG 2.4.11 Focus Not Obscured). */
    --fux-anchor-offset: 4.5rem;
}

/* ============================================================
   Utilities
   ============================================================ */

/* Visuell versteckt, fuer Screenreader erhalten (Clip-Pattern).
   NICHT display:none — Tabellen-Captions muessen vorgelesen werden. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap !important;
    border: 0 !important;
}

/* Anker-Ziele unter der sticky Sektionsleiste freihalten
   (WCAG 2.4.11). Gilt fuer alle Sektions-IDs der Produkt-Templates
   und fuer die #c{uid}-Ziele sichtbarer Legacy-CEs im Sektionsmenue
   (A11y-Befund N1). */
.product-page section[id],
.product-page [id="product-info"],
.product-page .frame[id],
.product-page a[id^="c"],
.tips-filter-section[id],
.tip-detail section[id] {
    scroll-margin-top: calc(var(--fux-sticky-offset) + var(--fux-anchor-offset));
}

/* hidden-Attribut gewinnt immer — auch gegen display:flex/grid der
   Komponenten (JS filtert ueber hidden, nicht ueber Klassen). */
.product-page [hidden],
.tips-filter-section [hidden],
.alt-cutting-tips-section [hidden],
.product-overview [hidden],
.tip-detail [hidden] {
    display: none !important;
}

/* Legacy-Neutralisierung: global.css setzt .container {width:1024px}
   und .row {float:left}. Innerhalb der Produkt-Komponenten sind
   .container nur Innen-Wrapper. */
.product-page .container,
.product-overview .container,
.tip-detail .container,
.tips-filter-section .container,
.alt-cutting-tips-section .container,
.key-features-section .container,
.how-it-works-section .container,
.specs-section .container,
.accessories-section .container,
.faq-section .container,
.alt-product-hero .container {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Basis-Typografie innerhalb der Produkt-Komponenten (der
   Meyer-Reset des Sitepackage nimmt allen Elementen font/margin). */
.product-page,
.product-overview,
.tip-detail {
    font-size: var(--font-size-body);
    line-height: 1.5;
    color: var(--gray-primary);
}

/* Fokus-Sichtbarkeit fuer alle interaktiven Produkt-Elemente
   (A11y-Auflage 3). */
.product-page a:focus-visible,
.product-overview a:focus-visible,
.tip-detail a:focus-visible,
.section-nav-link:focus-visible,
.faq-question:focus-visible,
.thumbnail:focus-visible,
.slideshow-prev:focus-visible,
.slideshow-next:focus-visible,
.mini-slider-prev:focus-visible,
.mini-slider-next:focus-visible,
.mini-dot:focus-visible {
    outline: 2px solid var(--hsgm-blue);
    outline-offset: 2px;
}

/* Auf dem blauen CTA-Gradient waere die blaue Outline unsichtbar (1,00:1) —
   Weiss erreicht dort 5,57:1 (A11y-Review 2026-09-16, Befund 1).
   body.fux-relaunch-Variante (0,3,2): Im Relaunch-Rahmen gewinnt sonst die
   blaue Rahmenregel body.fux-relaunch a:focus-visible (0,2,2) aus
   relaunch-frame.css (A11y-Review 2026-10-10, B1). */
.cta-section a:focus-visible,
.cta-section button:focus-visible,
body.fux-relaunch .cta-section a:focus-visible,
body.fux-relaunch .cta-section button:focus-visible {
    outline-color: var(--white);
}

/* Gemeinsame Sektions-Ueberschrift */
.section-title {
    font-size: var(--font-size-h2);
    font-weight: 600;
    text-align: center;
    margin: 0 0 var(--space-lg);
    color: var(--gray-primary);
}

/* Ausrichtung aus dem TYPO3-Ueberschriftenfeld (header_position) */
.section-title.ce-headline-left { text-align: left; }
.section-title.ce-headline-center { text-align: center; }
.section-title.ce-headline-right { text-align: right; }

/* ============================================================
   Produktseite — Hero (alt-product-hero, alt-quick-specs)
   Quelle: hsg-0-alt.css + Markup hsg-0-product-detail-alt.html
   ============================================================ */

.alt-product-hero {
    padding: var(--space-lg) 0 var(--space-md);
}

/* Zusammengefuehrter Hero (Master-Struktur, Umbau 2026-09-16):
   zweispaltiges Grid — links Slideshow (alt-hero-visual), rechts Info.
   Werte aus hsg-0-alt.css:15-20,111-115,690-707,754-756; reine Layout-
   Regeln ohne neue Farben (Kontraste unveraendert gegenueber dem
   gepruefeten Bestand). Ohne visual-Spalte (kein Slideshow-CE) faellt
   das Grid automatisch einspaltig (auto-fit entfaellt: einzelnes Kind
   nimmt die volle Spur der 1fr-Zeile im Media-Query bzw. streckt sich
   ueber die vorhandene Spur). */
.alt-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Einspaltiger Hero, wenn keine Slideshow-CE vorhanden ist: die Info-
   Spalte belegt beide Spuren. */
.alt-hero-info:only-child {
    grid-column: 1 / -1;
    max-width: 52rem;
}

.alt-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Reflow (WCAG 1.4.10, A11y-Befund Seite 34): Die Grid-Kinder duerfen
   unter ihre min-content-Breite schrumpfen — sonst blaeht ein langer,
   nicht umbrechbarer Inhalt (Dateititel im Hero-Button, lange
   Produktnamen) die Spur auf und die Seite scrollt horizontal. */
.alt-hero-grid > * {
    min-width: 0;
}

/* Hero-Buttons duerfen umbrechen (der Buttontext kommt aus dem Titel der
   Dateireferenz und ist beliebig lang). flex-wrap stellt Buttons, die
   nebeneinander keinen Platz haben, weiterhin zuerst in eine neue Zeile —
   einzeilige Buttons auf Desktop bleiben unveraendert. */
.alt-hero-actions .btn-primary,
.alt-hero-actions .btn-secondary {
    white-space: normal;
    max-width: 100%;
}

/* Das Button-Icon hat in products.css keine Groesse (.icon-svg ist nur im
   Sitepackage fuer Suche/Footer definiert) und schrumpfte bisher unter
   nowrap auf 0x0 px (Messung 2026-10-04). Mit white-space: normal wuerde
   es stattdessen Platz gewinnen (bis 70px) und den Text umbrechen. Der
   bisherige Ist-Zustand wird hier explizit festgehalten — ein sichtbares
   Icon ist eine offene Designentscheidung, keine Reflow-Frage. */
.alt-hero-actions .icon-svg {
    flex: 0 0 0;
    width: 0;
    height: 0;
}

/* Betriebsart-Infozeile unter den Kennzahl-Kacheln (Master hsg-0-alt.css:
   91-107; gerendert aus der Kennzahl "betriebszeit", Umbau 2026-09-16).
   --gray-secondary ist projektweit auf #6e6e73 korrigiert: 4,66:1 auf
   --gray-quaternary (WCAG 1.4.3, 0.8125rem-Text). */
.alt-operation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-secondary);
    background: var(--gray-quaternary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    margin: 0 0 2rem;
}

.alt-operation-badge svg {
    color: var(--hsgm-blue);
    flex-shrink: 0;
}

@media (max-width: 1199.98px) {
    .alt-hero-grid {
        gap: 3rem;
    }
}

@media (max-width: 991.98px) {
    .alt-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .alt-hero-visual {
        order: -1;
    }

    .product-slideshow {
        max-width: 480px;
    }
}

@media (max-width: 575.98px) {
    .alt-hero-actions {
        flex-direction: column;
    }
}

.alt-hero-info h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: var(--gray-primary);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Answer-first-Definitionsabsatz (Pflichtfeld) — bewusst prominenter
   als die Tagline. */
.alt-hero-description {
    font-size: 1.25rem;
    color: var(--gray-primary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    max-width: 46em;
}

.alt-hero-tagline {
    font-size: var(--font-size-body);
    color: var(--gray-secondary);
    line-height: 1.7;
    margin: 0 0 1.25rem;
    max-width: 46em;
}

.alt-hero-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hsgm-blue);
    background: rgba(0, 102, 204, 0.06);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    margin: 0 0 1rem;
}

.alt-hero-sku {
    font-size: var(--font-size-small);
    color: var(--gray-secondary);
    margin: 0 0 1.5rem;
}

/* Kennzahlenleiste */
.alt-quick-specs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    border: 1px solid var(--gray-tertiary);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--white);
}

.alt-quick-spec {
    flex: 1 1 0;
    min-width: 8rem;
    display: flex;
    /* dt (Label) vor dd (Wert) im DOM, Wert visuell oben (A11y m2) */
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem 0.5rem;
    border-right: 1px solid var(--gray-tertiary);
}

.alt-quick-spec:last-child {
    border-right: none;
}

.alt-quick-spec dd,
.alt-quick-spec dt {
    margin: 0;
}

.alt-spec-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-primary);
    line-height: 1.2;
}

.alt-spec-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-secondary);
    margin-top: 0.25rem;
    text-align: center;
    /* Lange Labels („Aufnahmeleistung") brechen bei 320 px um (WCAG 1.4.10, A11y N1) */
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* ============================================================
   Sticky-Sektionsmenue (section-nav)
   Quelle: product-detail.css
   ============================================================ */

.section-nav {
    position: sticky;
    top: var(--fux-sticky-offset);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 100;
}

.section-nav-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.section-nav-container::-webkit-scrollbar {
    display: none;
}

.section-nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    padding: 1rem 0;
    margin: 0;
    min-width: max-content;
}

.section-nav-item {
    white-space: nowrap;
}

.section-nav-link {
    color: var(--gray-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    transition: var(--transition-base);
    white-space: nowrap;
}

.section-nav-link:hover {
    color: var(--gray-primary);
}

.section-nav-link.active {
    color: var(--hsgm-blue);
}

.section-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hsgm-blue);
}

/* Abstand zwischen den frei arrangierten Sektionen */
.product-sections > section,
.product-sections section[id] {
    padding: var(--space-section) 0;
}

/* Befund V-1: Sichtbare Legacy-CEs (text/textpic/header) rendern ueber
   das Sitepackage-Layout ContentElements/Default.html als
   div.frame#c{uid} DIREKT in .product-sections — ohne section/.container
   und lagen deshalb bei x=0 ueber die volle Breite. Der Frame bekommt
   hier die Masse des Relaunch-Containers (relaunch-frame.css,
   body.fux-relaunch .container: max-width 1400px, content-box,
   Innenabstand 2rem bzw. 1rem unter 768px) — gleiche linke Textkante wie
   die fux-Sektionen. Vertikal ein schlichter Blockabstand statt
   --space-section, weil mehrere Legacy-Reste direkt aufeinander folgen.
   Uebergangsloesung bis zur redaktionellen Aufloesung (M3); gilt nur
   fuer frame_class != none ohne custom-1xx-Wrapper (Stand 2026-10-04:
   alle sichtbaren Legacy-CEs auf Produktseiten "default"). */
.product-page .product-sections > .frame {
    box-sizing: content-box;
    max-width: 1400px;
    margin: var(--space-lg) auto;
    padding: 0 2rem;
}

/* Typografie nur so weit, dass die Reste nicht hinter die fux-Sektionen
   zurueckfallen: Ueberschriften im Gewicht/der Farbe der Sektionstitel,
   Links in Markenblau statt Browser-Default (#0066cc auf Weiss 5,57:1). */
.product-page .product-sections > .frame :is(h2, h3) {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.25;
    color: var(--gray-primary);
    margin: 0 0 var(--space-sm);
}

.product-page .product-sections > .frame a:not([class]) {
    color: var(--hsgm-blue);
}

/* Befund N4 (WCAG 1.4.10): Legacy-Bilder tragen feste width-Attribute
   (z. B. 450px) und wurden mobil in .ce-gallery abgeschnitten. */
.product-page .product-sections > .frame img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .product-page .product-sections > .frame {
        padding: 0 1rem;
    }
}

/* ============================================================
   Hero-Slideshow (CE fux_heroslideshow)
   Quelle: hsg-0-alt.css; Slide-Schaltung auf hidden umgestellt
   ============================================================ */

.product-slideshow {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.slideshow-main {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-tertiary);
    box-shadow: var(--shadow-sm);
}

.slideshow-slide {
    width: 100%;
    height: 100%;
}

/* Bildwechsel in Hero-Slideshow und Mini-Slider (User 2026-10-13): der neue
   Slide gleitet aus der Blaetterrichtung herein und blendet auf; Klassen
   setzt slideshow.js. Dauer/Kurve wie --transition-base. */
@keyframes fux-slide-in-next {
    from { opacity: 0; transform: translateX(8%); }
    to { opacity: 1; transform: none; }
}

@keyframes fux-slide-in-prev {
    from { opacity: 0; transform: translateX(-8%); }
    to { opacity: 1; transform: none; }
}

.slideshow-slide.is-entering-next,
.mini-slider-slide.is-entering-next {
    animation: fux-slide-in-next 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.slideshow-slide.is-entering-prev,
.mini-slider-slide.is-entering-prev {
    animation: fux-slide-in-prev 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .slideshow-slide.is-entering-next,
    .slideshow-slide.is-entering-prev,
    .mini-slider-slide.is-entering-next,
    .mini-slider-slide.is-entering-prev {
        animation: none;
    }
}

.slideshow-image,
.slideshow-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2rem;
    background: var(--white);
    box-sizing: border-box;
}

.slideshow-prev,
.slideshow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--gray-tertiary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    color: var(--gray-primary);
    transition: var(--transition-base);
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slideshow-prev { left: 1rem; }
.slideshow-next { right: 1rem; }

.slideshow-prev:hover,
.slideshow-next:hover {
    background: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.slideshow-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: center;
}

/* Thumbnail ist ein <button> (Markup der CSS/JS-Etappe) */
.thumbnail {
    width: 72px;
    height: 72px;
    padding: 0.25rem;
    background: var(--white);
    border: 2px solid var(--gray-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.thumbnail:hover {
    border-color: var(--hsgm-blue-light);
}

/* Aktiver Zustand ueber aria-current, nicht nur ueber eine Klasse */
.thumbnail[aria-current="true"] {
    border-color: var(--hsgm-blue);
    box-shadow: 0 0 0 1px var(--hsgm-blue);
}

/* Ohne JS sind die Thumbnails disabled (Server-Markup) — neutral
   darstellen, kein Interaktions-Versprechen. */
.thumbnail[disabled] {
    cursor: default;
}

/* ============================================================
   Features (CE fux_features)
   Quelle: product-detail.css
   ============================================================ */

.key-features-section {
    background: var(--gray-quaternary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--hsgm-blue);
    color: var(--white);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.feature-icon img {
    width: 24px;
    height: 24px;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--gray-primary);
}

.feature-card p {
    color: var(--gray-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: var(--font-size-small);
}

/* ============================================================
   Arbeitsablauf (CE fux_arbeitsablauf)
   Quelle: product-detail.css (how-it-works)
   ============================================================ */

.how-it-works-section {
    background: var(--gray-quaternary);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.step-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--hsgm-blue);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--gray-primary);
}

.step-card p {
    color: var(--gray-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: var(--font-size-small);
}

/* ============================================================
   Technische Daten + Varianten-Tabellen (specs-table)
   Quelle: product-detail.css
   ============================================================ */

.specs-table {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-tertiary);
    overflow-x: auto; /* schmale Viewports: Tabelle scrollt, Seite nicht */
    max-width: 900px;
    margin: 0 auto;
}

.specs-table table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table th,
.specs-table td {
    text-align: left;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-tertiary);
    font-size: var(--font-size-small);
}

.specs-table thead th {
    background: var(--gray-quaternary);
    font-weight: 600;
    color: var(--gray-primary);
    border-bottom: 2px solid var(--gray-tertiary);
}

.specs-table tbody th[scope="row"] {
    font-weight: 500;
    color: var(--gray-primary);
    width: 40%;
}

.specs-table td {
    color: var(--gray-secondary);
}

.specs-table tr:last-child th,
.specs-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================
   Lieferumfang (CE fux_lieferumfang)
   Quelle: hsg-0-alt.css (alt-delivery)
   ============================================================ */

.alt-delivery-grid {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

.alt-delivery-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-tertiary);
}

.alt-delivery-item:first-child {
    border-top: 1px solid var(--gray-tertiary);
}

.alt-delivery-text {
    flex: 1;
    /* Reflow (WCAG 1.4.10, A11y-Befund N3): lange Einzelwoerter wie
       "Konformitaetserklaerung" duerfen umbrechen, damit der Status-Kreis
       (.alt-delivery-check, flex-shrink 0) bei 320px nicht aus der Zeile
       ragt. hyphens nutzt lang="de"; overflow-wrap faengt Woerter ab,
       fuer die keine Silbentrennung verfuegbar ist. */
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.alt-delivery-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin-bottom: 0.15rem;
}

.alt-delivery-text span {
    font-size: 0.8125rem;
    color: var(--gray-secondary);
}

/* ============================================================
   Schneidspitzen-Karten (CE fux_schneidspitzen) + Mini-Slider
   Quelle: hsg-0-alt.css
   ============================================================ */

.alt-cutting-tips-section {
    background: var(--gray-quaternary);
}

/* Seit dem Karussell-Nachtrag (2026-10-13) steht der Deep-Link als
   .fux-carousel-more im Sektionskopf (carousel.css); die folgenden
   .alt-tips-compare-Regeln gelten keinem Markup mehr.
   Deep-Link zur vorgefilterten Auswahlmatrix (2026-10-13): Textlink
   (unterstrichen, nicht nur Farbe), #0066CC auf #f5f5f7 5,1:1; bricht um
   (lange Modellnamen, Reflow 320px) */
.alt-tips-compare {
    margin: 1.5rem 0 0;
    text-align: center;
}

.alt-tips-compare-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.5rem;
    color: var(--hsgm-blue);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    overflow-wrap: anywhere;
}

.alt-tips-compare-link:hover {
    color: var(--hsgm-blue-dark);
    text-decoration-thickness: 2px;
}

.alt-tips-compare-link svg {
    flex: 0 0 auto;
}

/* Dreispaltig (User-Vorgabe 2026-09-16); darunter responsive 2/1-spaltig
   (Reflow 1.4.10 bleibt gewahrt). Seit 2026-10-13 nur noch Matrix und
   Zubehoer-Liste: CE fux_schneidspitzen und die Reihe der Detailseite
   nutzen das Karten-Karussell des Sitepackage (carousel.css). */
.alt-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991px) {
    .alt-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .alt-tips-grid {
        grid-template-columns: 1fr;
    }
}

.alt-tip-card {
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-tertiary);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

/* Hover wie Produkt-/Kategoriekacheln (.product-card, .product-category-card;
   User 2026-10-13: einheitliches CI) */
.alt-tip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--hsgm-blue-light);
}

.alt-tip-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--white);
    overflow: hidden;
}

.mini-slider,
.mini-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Ohne JS: erster Slide sichtbar (bzw. der serverseitig aktive);
   JS schaltet zusaetzlich ueber das hidden-Attribut. */
.mini-slider-slide {
    display: none;
    width: 100%;
    height: 100%;
}

.mini-slider-slide.active,
.mini-slider-slide:first-child {
    display: block;
}

.mini-slider-slide[hidden] {
    display: none !important;
}

.mini-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
    background: var(--white);
    box-sizing: border-box;
}

.mini-slider-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--gray-secondary);
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
}

/* Dots: 24x24px-Button (Target Size), sichtbarer Punkt als ::before */
.mini-slider-dots {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.125rem;
    z-index: 3;
}

.mini-dot {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mini-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45); /* >=3:1 auf Weiss (1.4.11), A11y-Review Befund 2 */
    transition: var(--transition-base);
}

.mini-dot:hover::before {
    background: rgba(0, 0, 0, 0.45);
}

.mini-dot[aria-current="true"]::before {
    background: var(--hsgm-blue);
    width: 18px;
    border-radius: 4px;
}

.mini-slider-prev,
.mini-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--gray-tertiary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-primary);
    transition: var(--transition-base);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    opacity: 0;
}

/* Hover an der KARTE, nicht am Bild: die ::after-Flaeche des Titel-Links
   (Stretched Link) liegt ueber dem Bild, :hover auf .alt-tip-visual griff
   deshalb nur direkt ueber den Pfeilen (User-Befund 2026-10-13) */
.alt-tip-card:hover .mini-slider-prev,
.alt-tip-card:hover .mini-slider-next,
.mini-slider-prev:focus-visible,
.mini-slider-next:focus-visible {
    opacity: 1;
}

/* Geraete ohne Hover (Touch): Pfeile immer sichtbar */
@media (hover: none) {
    .mini-slider-prev,
    .mini-slider-next {
        opacity: 1;
    }
}

.mini-slider-prev { left: 0.5rem; }
.mini-slider-next { right: 0.5rem; }

.mini-slider-prev:hover,
.mini-slider-next:hover {
    background: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.alt-tip-content {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alt-tip-content h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.alt-tip-content p {
    font-size: 0.875rem;
    color: var(--gray-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
    flex: 1;
}

.alt-tip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.alt-tip-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-secondary);
    background: var(--gray-quaternary);
    padding: 0.25rem 0.6rem;
    border-radius: 0.3rem;
    letter-spacing: 0.01em;
}

/* ---------- Gemeinsame Kachel: Link, aktuelle Spitze, Platzhalter
   (Partial CuttingTip/Card, User-Entscheidung 2026-10-13) ---------- */

.alt-tip-card {
    position: relative;
}

.alt-tip-content .alt-tip-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

/* EIN Link je Karte (Titel = Linkname); die ::after-Flaeche spannt die
   ganze Karte auf. Slider-Pfeile/-Punkte liegen mit z-index 3 darueber und
   bleiben bedienbar (keine verschachtelten interaktiven Elemente). */
.alt-tip-card .alt-tip-title a.alt-tip-link {
    color: var(--gray-primary);
    text-decoration: none;
}

.alt-tip-card .alt-tip-title a.alt-tip-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.alt-tip-card .alt-tip-title a.alt-tip-link:hover,
.alt-tip-card .alt-tip-title a.alt-tip-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Fokus sichtbar an der ganzen Karte (die Linkflaeche ist die Karte) */
.alt-tip-card:has(a.alt-tip-link:focus-visible) {
    outline: 2px solid var(--hsgm-blue);
    outline-offset: 2px;
}

.alt-tip-content p.alt-tip-description {
    flex: 1;
}

/* Tags als Liste (Screenreader trennen die Werte) */
ul.alt-tip-meta {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Aktuelle Spitze (Detailseite): kein Link, Text-Badge + blauer Rahmen wie
   die aktive Produktkachel (.product-card.is-current; User 2026-10-13:
   einheitliches CI). 2 px ueber box-shadow, kein Layoutsprung; Rahmen
   #0066cc auf Weiss 5,6:1. Zustand nicht nur ueber Farbe (Badge, WCAG
   1.4.1). Ohne Hebebewegung, die Karte ist nicht klickbar. */
.alt-tip-card--current,
.alt-tip-card--current:hover {
    transform: none;
    border-color: var(--hsgm-blue);
    box-shadow: 0 0 0 1px var(--hsgm-blue), var(--shadow-md);
}

@media (forced-colors: active) {
    .alt-tip-card--current {
        outline: 2px solid Highlight;
        outline-offset: -1px;
    }
}

.alt-tip-content p.alt-tip-badge {
    /* im DOM nach dem Titel (A11y K-03), optisch darueber */
    order: -1;
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0 0 0.5rem;
    padding: 2px 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--gray-primary);
    color: var(--white);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.5;
}

/* Weder Foto noch Masszeichnung: dekorativer Platzhalter (aria-hidden) */
.alt-tip-visual--empty {
    display: grid;
    place-items: center;
    background: var(--gray-quaternary);
}

.alt-tip-empty {
    margin: 0;
    font-size: var(--font-size-small); /* 14 px */
    color: var(--gray-secondary);
}

/* ============================================================
   FAQ (CE fux_faqliste) — details/summary
   Kein Prototyp-Bestand: eigenes Muster im Token-System
   (A11y-Auflage 7: summary Fokus-/Hover-Stil)
   ============================================================ */

.faq-section .container {
    max-width: 900px;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--gray-tertiary);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.faq-question {
    display: block;
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 3rem 1.1rem 1.5rem;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--gray-primary);
    transition: var(--transition-base);
}

.faq-question::-webkit-details-marker {
    display: none;
}

/* Eigener Auf/Zu-Indikator (ersetzt den nativen Marker) */
.faq-question::after {
    content: '+';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--hsgm-blue);
    line-height: 1;
}

.faq-item[open] > .faq-question::after {
    content: '\2212'; /* Minuszeichen */
}

.faq-question:hover {
    background: var(--gray-quaternary);
    color: var(--hsgm-blue);
}

.faq-question:focus-visible {
    outline: 2px solid var(--hsgm-blue);
    outline-offset: -2px; /* innen, damit der Rahmen im runden Container sichtbar bleibt */
}

.faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--gray-primary);
    font-size: var(--font-size-small);
    line-height: 1.7;
}

.faq-answer p {
    margin: 0 0 0.75rem;
}

/* RTE-Inhalt: Listen bekommen ihre Marker zurueck (Legacy-Reset) */
.faq-answer ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0 0 0.75rem;
}

.faq-answer ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0 0 0.75rem;
}

.faq-answer a {
    color: var(--hsgm-blue);
    text-decoration: underline;
}

/* ============================================================
   CTA (CE fux_cta)
   Quelle: product-detail.css
   ============================================================ */

.cta-section {
    padding: var(--space-section) 0;
    background: linear-gradient(135deg, var(--hsgm-blue) 0%, var(--hsgm-blue-dark) 100%);
    /* Volle Breite ohne Rundung wie das CTA-Band der Kategorieseiten
       (.category-cta; User 2026-10-13: Produktseiten-CTA war abgerundet) */
    border-radius: 0;
}

.cta-content {
    text-align: center;
    color: var(--white);
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cta-content h2 {
    font-size: var(--font-size-h2);
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--white);
}

.cta-content p {
    font-size: 1.125rem;
    margin: 0 0 2rem;
    color: rgba(255, 255, 255, 0.92);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--hsgm-blue);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--hsgm-blue-dark);
    color: var(--white);
}

.btn-secondary {
    background: var(--white);
    color: var(--gray-primary);
    border-color: var(--gray-tertiary);
}

.btn-secondary:hover {
    background: var(--gray-quaternary);
    border-color: var(--gray-secondary);
}

/* Im blauen CTA-Block invertiert */
.cta-section .btn-primary {
    background: var(--white);
    color: var(--hsgm-blue);
}

.cta-section .btn-primary:hover {
    background: var(--gray-quaternary);
    color: var(--hsgm-blue-dark);
}

.cta-section .btn-secondary {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

.cta-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* ============================================================
   Schwestermodelle (alt-upgrade-banner)
   Quelle: hsg-0-alt.css
   ============================================================ */

.alt-upgrade-banner {
    margin: var(--space-md) 0;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid rgba(0, 102, 204, 0.12);
}

.alt-upgrade-banner h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin: 0 0 1rem;
}

.upgrade-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.upgrade-content {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.upgrade-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin-bottom: 0.35rem;
}

.upgrade-text strong a {
    color: var(--hsgm-blue);
    font-weight: 600;
    text-decoration: none;
}

.upgrade-text strong a:hover {
    color: var(--hsgm-blue-dark);
    text-decoration: underline;
}

.upgrade-text p {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--gray-secondary);
    line-height: 1.6;
}

/* ============================================================
   Kategorieseite — Master-Layout "Produktuebersicht"
   (FuxProductOverview.html, Backend-Layout fux_product_overview)
   Quelle: _prototypes/css/product-subcategory.css + Markup
   hsgm-product-subcategory-2.html (Zuordnung User 2026-10-10).
   Bewusste Abweichungen vom Prototyp:
   - Container: Rahmenbreite (relaunch-frame.css, max. 1400px) statt
     Bootstrap-container — einheitlich mit Header/Breadcrumb.
   - Sidebar sticky unter dem GEMESSENEN Header (--fux-sticky-offset
     des Rahmen-JS) statt top:100px; bei Ueberlaenge eigene Scroll-
     leiste (16 Eintraege passen nicht in 800px Viewport-Hoehe).
   - Aktiver Link per [aria-current="true"] (Zustand nicht nur Farbe:
     zusaetzlich Schriftgewicht + Hintergrundflaeche).
   - Karte als <article> mit Stretched-Link statt <a> um die Karte;
     Fokusrahmen auf der ganzen Karte (::after des Links).
   - Mobil keine horizontale Ueberbreite (Prototyp ragt bei 375px
     rechts heraus): min-width:0 an den Grid-Kindern.
   ============================================================ */

/* Smooth Scroll der Sidebar-Sprungmarken (Prototyp: jQuery animate 800ms,
   User-Vorgabe 2026-10-10). Nativ ueber scroll-behavior statt JS: Hash,
   Fokus-Startpunkt und der Header-Abstand (scroll-padding-top des Rahmens)
   bleiben erhalten. Nur ohne Wunsch nach reduzierter Bewegung. */
@media (prefers-reduced-motion: no-preference) {
    html:has(.category-page) {
        scroll-behavior: smooth;
    }
}

.page-hero {
    padding: var(--space-lg) 0 var(--space-md);
    background: linear-gradient(180deg, var(--white) 0%, var(--gray-quaternary) 100%);
    border-bottom: 1px solid var(--gray-tertiary);
}

.page-title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--gray-primary);
    hyphens: auto;
    overflow-wrap: break-word;
}

/* Verlaufsschrift wie Prototyp (Z. 207-215); Endfarbe --gray-secondary
   (#6e6e73) erreicht 5,07:1 auf Weiss — auch der hellste Teil der
   Schrift bleibt ueber 4,5:1. Ohne background-clip-Unterstuetzung
   gilt die Vollfarbe oben. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .category-page .page-title {
        background: linear-gradient(180deg, var(--gray-primary) 0%, var(--gray-secondary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--gray-secondary);
    max-width: 700px;
    margin: 0;
}

.category-main {
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--white);
}

.category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); /* col-lg-3 / col-lg-9 */
    gap: 1.5rem;
    align-items: start;
}

.category-sidebar,
.category-content {
    min-width: 0;
}

/* Sidebar-Spalte ueber die volle Zeilenhoehe, damit die sticky
   Navigation darin mitlaufen kann (Prototyp: Bootstrap-row stretcht) */
.category-sidebar {
    align-self: stretch;
}

/* Sidebar "Produktnavigation" — nur Sprungmarken (User-Vorgabe) */
.sidebar-nav {
    background: var(--gray-quaternary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-sizing: border-box; /* max-height inkl. Innenabstand */
    position: sticky;
    top: calc(var(--fux-sticky-offset, 72px) + 1.75rem);
    max-height: calc(100vh - var(--fux-sticky-offset, 72px) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 2rem;
}

.sidebar-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: var(--gray-primary);
}

.sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav-group {
    margin-bottom: 1.5rem;
}

.sidebar-nav-group:last-child {
    margin-bottom: 0;
}

.sidebar-nav-group-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-secondary);
    text-decoration: none;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.sidebar-nav-group-title:hover {
    color: var(--hsgm-blue);
}

.sidebar-nav-item {
    margin-bottom: 0.25rem;
}

.sidebar-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--gray-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.sidebar-nav-link:hover {
    background: var(--white);
    color: var(--hsgm-blue);
}

.sidebar-nav-link[aria-current="true"] {
    background: var(--hsgm-blue);
    color: var(--white);
    font-weight: 500;
}

/* Mobiler Disclosure-Button (nur < 992px, siehe Responsive) */
.sidebar-toggle-mobile {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--hsgm-blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: var(--transition-base);
}

.sidebar-toggle-mobile:hover {
    background: var(--hsgm-blue-dark);
}

.sidebar-toggle-mobile:focus-visible {
    outline: 2px solid var(--hsgm-blue);
    outline-offset: 2px;
}

.sidebar-toggle-icon {
    transition: transform 0.2s ease;
}

.sidebar-toggle-mobile[aria-expanded="true"] .sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Redaktioneller Einleitungsbereich (colPos 0) als category-info-Box */
.category-info {
    background: var(--gray-quaternary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    color: var(--gray-secondary);
    line-height: 1.6;
}

.category-info h2,
.category-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--gray-primary);
}

.category-info p {
    margin: 0 0 1rem;
}

.category-info img {
    max-width: 100%;
    height: auto;
}

.category-info > :last-child,
.category-info .frame:last-child > :last-child,
.category-info p:last-child {
    margin-bottom: 0;
}

/* Produktgruppen (nur bei mehr als einer Gruppe) */
.products-group + .products-group {
    margin-top: var(--space-lg);
}

.products-group-title {
    font-size: var(--font-size-h3);
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: var(--gray-primary);
}

/* Produktkarten */
.products-list {
    display: grid;
    gap: 2rem;
}

.product-card {
    position: relative;
    /* Hintergruende Karte/Bild getauscht (User 2026-10-12): Karte grau, Bildflaeche weiss */
    background: var(--gray-quaternary);
    border: 1px solid var(--gray-tertiary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    transition: var(--transition-base);
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--hsgm-blue-light);
}

/* Aktive Kachel = aktiver Eintrag der Produktnavigation (category-nav.js,
   Klasse is-current; User 2026-10-12). Blauer Rahmen (2 px ueber
   box-shadow, kein Layoutsprung) und Schatten, ohne Hebebewegung, damit
   beim Scrollen nichts springt. Rahmen #0066cc auf #f5f5f7: 5,2:1. */
.product-card.is-current {
    border-color: var(--hsgm-blue);
    box-shadow: 0 0 0 1px var(--hsgm-blue), 0 20px 40px rgba(0, 0, 0, 0.08);
}

@media (forced-colors: active) {
    .product-card.is-current {
        outline: 2px solid Highlight;
        outline-offset: -1px;
    }
}

.product-image {
    background: var(--white);
    border-radius: var(--radius-md);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.product-image-icon {
    color: var(--gray-tertiary);
}

.product-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

/* Stretched Link: der Produktname traegt den Link, ::after macht die
   ganze Karte klickbar; der Fokusrahmen liegt auf der Kartenflaeche. */
.product-card-link {
    color: inherit;
    text-decoration: none;
}

.product-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
}

.category-page .product-card-link:focus-visible {
    outline: none;
}

.product-card-link:focus-visible::after {
    outline: 2px solid var(--hsgm-blue);
    outline-offset: 2px;
}

.product-type {
    font-size: 0.875rem;
    color: var(--hsgm-blue);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 1rem;
}

/* Symbole (HSGM-Icon-Galerie, Etappe Icons 2026-10-12); Farben zentral
   ueber --icon-primary/--icon-secondary (relaunch-frame.css) */
/* Kartenkopf der Produktuebersicht: nur das Symbol, groesste Groesse,
   ohne Hintergrund, zentriert (User 2026-10-12) */
.product-category-image.product-category-image--icon {
    height: auto;
    padding: 2rem 1.5rem 0;
    background: none;
}

/* Kachelbild buendig bis an die Kartenraender (Prototyp: Kopf ohne
   Innenabstand, 200 px hoch); Ecken ueber overflow/border-radius des
   Kopfs (.product-category-image) */
.product-category-image.product-category-image--photo {
    padding: 0;
}

.product-category-image.product-category-image--photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.product-category-symbol {
    display: block;
    width: 10rem;
    max-width: 100%;
    height: 10rem;
}

.product-category-symbol-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.product-description {
    color: var(--gray-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    flex: 1;
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0 0 1.5rem;
}

/* dt vor dd im DOM (gueltige dl), optisch Wert ueber Label */
.product-spec {
    display: flex;
    flex-direction: column-reverse;
}

.product-spec .spec-value {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-primary);
}

.product-spec .spec-label {
    font-size: 0.75rem;
    color: var(--gray-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-link {
    color: var(--hsgm-blue);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: var(--transition-base);
}

.product-card:hover .product-link {
    gap: 0.5rem;
}

/* CTA-Band (Prototyp Z. 471-511): volle Breite, Pill-Button */
.category-cta {
    border-radius: 0;
    margin-top: var(--space-xl);
    padding: var(--space-section) 0;
}

.category-cta .cta-content h2 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    margin: 0 0 1.5rem;
    /* Lange Komposita ("Heißschneidegeräten") sprengen bei 320px sonst
       die Breite (Reflow, WCAG 1.4.10) */
    hyphens: auto;
    overflow-wrap: break-word;
}

.category-cta .cta-content p {
    font-size: 1.25rem;
    margin: 0 auto 2.5rem;
    max-width: 700px;
}

.category-cta .btn-primary {
    border-radius: 3rem;
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: normal;
}

/* ============================================================
   Produkte-Uebersicht uid 3 — Master-Layout "Produkte-Uebersicht"
   (FuxProductsLanding.html, Backend-Layout fux_products_landing)
   Quelle: _prototypes/css/products-overview.css + Markup
   hsgm-products-overview.html (Zuordnung User 2026-10-10).
   Bewusste Abweichungen vom Prototyp:
   - Filter-Sidebar/Sortierung seit 2026-10-13 (Block unten); ohne
     JavaScript bleibt das Raster in voller Rahmenbreite.
   - Karte als <article> mit Stretched-Link (Muster .product-card-link der
     Kategorieseite). overflow:hidden sitzt am Bild statt an der Karte,
     sonst schnitte die Karte den Fokusrahmen (::after, outline-offset) ab.
   - Hover-Hebung ohne transform bei prefers-reduced-motion (Block unten).
   - Raster als Liste (ul/li, role="list" gegen den Safari-Verlust der
     Listensemantik bei list-style:none).
   Kontraste (auf Weiss, nachgerechnet): Titel #1d1d1f 16,8:1; Text und
   Ergebniszahl #6e6e73 5,07:1; "Ansehen" #0066CC 5,57:1; Badge #1d1d1f auf
   #f5f5f7 15,4:1; Fokusrahmen #0066CC gegen Weiss 5,57:1 (WCAG 1.4.11).
   ============================================================ */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .products-landing .page-title {
        background: linear-gradient(180deg, var(--gray-primary) 0%, var(--gray-secondary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.landing-main {
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--white);
}

.landing-intro {
    margin-bottom: 2rem;
    line-height: 1.6;
}

.landing-intro img {
    max-width: 100%;
    height: auto;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray-quaternary);
}

.results-count {
    margin: 0;
    color: var(--gray-secondary);
    font-size: 0.9375rem;
}

.products-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.products-grid > li {
    display: flex;
    min-width: 0;
}

.product-category-card {
    position: relative;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--gray-tertiary);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    color: inherit;
}

.product-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--hsgm-blue-light);
}

.product-category-image {
    height: 200px;
    background: linear-gradient(135deg, var(--gray-quaternary) 0%, var(--gray-tertiary) 100%);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-category-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.product-category-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.product-category-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gray-primary);
    margin: 0 0 0.5rem;
    hyphens: auto;
    overflow-wrap: break-word;
}

.product-category-description {
    color: var(--gray-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.product-category-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-quaternary);
}

.product-count-badge {
    background: var(--gray-quaternary);
    color: var(--gray-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.view-products-link {
    margin-left: auto;
    color: var(--hsgm-blue);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: var(--transition-base);
}

.product-category-card:hover .view-products-link {
    gap: 0.5rem;
}

/* Fokus: Rahmen um die ganze Karte (::after aus .product-card-link),
   nicht zusaetzlich um den Titeltext */
.products-landing .product-card-link:focus-visible {
    outline: none;
}

/* CTA-Band schliesst wie im Prototyp direkt an den Kachelbereich an
   (dessen Innenabstand traegt den Abstand) */
.products-landing .category-cta {
    margin-top: 0;
}

/* ------------------------------------------------------------
   Gemeinsame Filter-Sidebar (2026-10-13, filter-sidebar.js, Partial
   Filter/Sidebar) fuer die Produkte-Uebersicht und die Schneidspitzen-
   Auswahlmatrix, plus Sortierung der Produkte-Uebersicht.
   Quelle: products-overview.css Z. 273-372, 555-605.
   - Generische Klassen (.filter-layout/-column/-results/-sidebar/-group/
     -checkbox/-empty); .filter-group gilt nur innerhalb .filter-sidebar.
     Die frueheren Chip-Regeln der Matrix (.tips-filter, .filter-chip,
     .filter-label) sind mit der Umstellung entfallen (A11y F-04).
   - Zweispaltig (Prototyp col-lg-3 / col-lg-9) erst, wenn JS die Filter
     eingeblendet hat (.is-enhanced); ohne JS volle Breite wie bisher.
   - [hidden] muss gegen display:flex/grid der Komponenten gewinnen
     (Kacheln, Sortierung, Badges, Sidebar ohne JS).
   - Kontraste (nachgerechnet): Gruppentitel/Trefferzahl #6e6e73 auf
     #f5f5f7 4,66:1; Hover-Label #0066CC auf #f5f5f7 5,1:1; Badge weiss
     auf #0066CC 5,57:1. Checkbox (1.4.11): eigene Darstellung statt
     nativer accent-color (deren Rand ist browserabhaengig, Firefox
     ca. 2,9:1 auf #f5f5f7): Rand #6e6e73 auf Weiss 5,07:1 und auf der
     Sidebar #f5f5f7 4,66:1; gewaehlt #0066CC mit weissem Haken 5,57:1;
     forced-colors faellt auf die Systemdarstellung zurueck.
     Select-Rand #6e6e73 gegen Weiss 5,07:1.
   - Zielgroesse: Checkbox 20px, Zeile mind. 2rem hoch, Label klickbar
     (2.5.8); Reset-Button und Select mind. 2.75rem bzw. 2.5rem hoch.
   ------------------------------------------------------------ */
.products-landing [hidden],
.filter-layout [hidden] {
    display: none !important;
}

/* Sidebar/Sortierung stehen ab dem ersten Rendern (User-Befund 2026-10-13:
   vorher erschien die Sidebar erst nach dem Modul-Skript, die Kacheln
   sprangen). Schalter ist die Klasse fux-nav-js, die relaunch-frame.js im
   <head> vor dem ersten Rendern setzt; ohne JS bleiben sie verborgen. */
html:not(.fux-nav-js) [data-filter-enhanced] {
    display: none !important;
}

.filter-layout.is-enhanced,
html.fux-nav-js .filter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 1.5rem;
    align-items: start;
}

.filter-column,
.filter-results {
    min-width: 0;
}

.filter-column {
    align-self: stretch;
}

.filter-sidebar {
    background: var(--gray-quaternary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-sizing: border-box;
    margin-bottom: 2rem;
    position: sticky;
    top: calc(var(--fux-sticky-offset, 72px) + 1.75rem);
    /* wie .sidebar-nav: bei niedrigen Viewports scrollt die Sidebar selbst,
       damit "Filter zuruecksetzen" erreichbar bleibt */
    max-height: calc(100vh - var(--fux-sticky-offset, 72px) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.filter-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--gray-primary);
}

.filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 2rem;
    background: var(--hsgm-blue);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}

.filter-sidebar .filter-group {
    border: 0;
    margin: 0 0 2rem;
    padding: 0;
    min-width: 0;
}

.filter-sidebar .filter-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-secondary);
    margin: 0 0 1rem;
    padding: 0;
}

.filter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 2rem;
    margin-bottom: 0.25rem;
}

.filter-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    border: 2px solid var(--gray-secondary);
    border-radius: 0.25rem;
    background: var(--white);
    cursor: pointer;
}

/* Haken als Rahmen-Ecke (border), damit er auch ohne Hintergrundbilder
   sichtbar ist; nur im gewaehlten Zustand */
.filter-checkbox input[type="checkbox"]::before {
    content: "";
    width: 0.35rem;
    height: 0.7rem;
    margin-top: -0.15rem;
    border: solid var(--white);
    border-width: 0 0.15rem 0.15rem 0;
    transform: rotate(45deg);
    visibility: hidden;
}

.filter-checkbox input[type="checkbox"]:checked {
    background: var(--hsgm-blue);
    border-color: var(--hsgm-blue);
}

.filter-checkbox input[type="checkbox"]:checked::before {
    visibility: visible;
}

.filter-checkbox input[type="checkbox"]:hover {
    border-color: var(--hsgm-blue);
}

/* Windows-Kontrastmodus: native Checkbox mit Systemfarben */
@media (forced-colors: active) {
    .filter-checkbox input[type="checkbox"] {
        -webkit-appearance: auto;
        appearance: auto;
        border: 0;
    }

    .filter-checkbox input[type="checkbox"]::before {
        content: none;
    }
}

.filter-checkbox label {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding-bottom: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--gray-primary);
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.filter-checkbox label:hover {
    color: var(--hsgm-blue);
}

.filter-count {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--gray-secondary);
    white-space: nowrap;
}

.filter-checkbox input[type="checkbox"]:focus-visible,
.sort-dropdown select:focus-visible,
.filter-reset:focus-visible,
.filter-toggle-mobile:focus-visible {
    outline: 3px solid var(--hsgm-blue);
    outline-offset: 2px;
}

.filter-reset {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-secondary);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
}

.filter-reset:hover {
    border-color: var(--hsgm-blue);
    color: var(--hsgm-blue);
}

/* Mobiler Disclosure-Button (nur < 992px, siehe Responsive) */
.filter-toggle-mobile {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.75rem;
    background: var(--hsgm-blue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 1.5rem;
    transition: var(--transition-base);
}

.filter-toggle-mobile:hover {
    background: var(--hsgm-blue-dark);
}

/* Badge im blauen Button invertiert (#0066CC auf Weiss 5,57:1) */
.filter-toggle-mobile .filter-active-count {
    background: var(--white);
    color: var(--hsgm-blue);
}

.products-header {
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.sort-dropdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.sort-dropdown label {
    font-size: 0.875rem;
    color: var(--gray-secondary);
    margin: 0;
}

.sort-dropdown select {
    min-height: 2.5rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-secondary);
    border-radius: var(--radius-sm);
    background-color: var(--white);
    color: var(--gray-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.sort-dropdown select:hover {
    border-color: var(--hsgm-blue);
}

.filter-empty {
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--hsgm-blue);
    border-radius: var(--radius-sm);
    background: var(--gray-quaternary);
    color: var(--gray-primary);
    line-height: 1.6;
}

.filter-empty p {
    margin: 0 0 1rem;
}

.filter-empty .filter-reset {
    width: auto;
}

/* Untergruppen (Geraete nach Geraeteklasse): verschachteltes fieldset mit
   sichtbarer legend */
.filter-subgroup {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
    min-width: 0;
}

.filter-subgroup:last-child {
    margin-bottom: 0;
}

.filter-subgroup-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-primary);
    margin: 0 0 0.5rem;
    padding: 0;
}

/* Schneidspitzen-Kacheln in der schmaleren Ergebnis-Spalte: so viele
   Spalten, wie mit mind. 240px passen (bei 1280px drei, mobil eine) */
.filter-layout.is-enhanced .alt-tips-grid,
html.fux-nav-js .filter-layout .alt-tips-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

@media (max-width: 991.98px) {
    .filter-layout.is-enhanced,
    html.fux-nav-js .filter-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .filter-toggle-mobile {
        display: flex;
    }

    .filter-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .filter-sidebar[data-collapsed] {
        display: none;
    }
}

@media (max-width: 767px) {
    .filter-sidebar {
        padding: 1.5rem;
    }

    .products-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .filter-checkbox label,
    .filter-reset,
    .filter-toggle-mobile,
    .sort-dropdown select {
        transition: none;
    }
}

/* ============================================================
   Auswahlmatrix (CE fux_auswahlmatrix) — Ergebniszeile; Filter seit
   2026-10-13 ueber die gemeinsame Filter-Sidebar (Block oben)
   Quelle: schneidspitzen.css
   ============================================================ */

.tips-resultbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: 0 0 var(--space-sm);
    padding-top: var(--space-xs);
}

.tips-count {
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--gray-primary);
}

/* Matrix-Karten: seit 2026-10-13 die gemeinsame Schneidspitzen-Kachel
   (.alt-tips-grid/.alt-tip-card, Abschnitt "Schneidspitzen-Karten" oben);
   die frueheren .tips-grid/.tip-card-Regeln sind entfallen. */

/* ============================================================
   Schneidspitzen-Detailseite — Variante C "Steckbrief-Karte"
   mit Geraete-Chips aus Variante A (User-Entscheidung 2026-10-13)
   Referenz: _prototypes/schneidspitze-detail/variante-c-steckbrief.html
   + schneidspitze-detail.css. Klassen wie im Prototyp, alle unter
   .tip-detail gekapselt (keine Kollision mit Rahmen/anderen Seiten).

   Farben NUR lokal (globales --hsgm-blue #0066CC bleibt unveraendert,
   eine globale Umstellung waere eine eigene Entscheidung):
   - --tip-blue #0055AA (Markenblau): 7,29:1 auf Weiss
   - --tip-blue-dark #00438a (Button-Hover): 9,68:1 zu Weiss
   - --tip-text-secondary #6e6e73: 5,07:1 auf Weiss, 4,66:1 auf #f5f5f7
   - --tip-chip-border #8d8d92: 3,30:1 auf Weiss (WCAG 1.4.11 >= 3:1;
     rel. Luminanz 0,2679 -> (1,05)/(0,2679+0,05) = 3,30; korrigiert
     nach A11y-Review D-09, 2026-10-13)
   Rechenweg: WCAG 2.x relative Luminanz, sRGB-Linearisierung.
   ============================================================ */

.tip-detail {
    --tip-blue: #0055AA;
    --tip-blue-dark: #00438a;
    --tip-text-secondary: #6e6e73;
    --tip-chip-border: #8d8d92;
    --tip-frame-bg: #f5f5f7;
    --tip-radius-card: 18px;
    --tip-radius-frame: 12px;
    padding: var(--space-md) 0 var(--space-xl);
}

.tip-detail .sd a {
    color: var(--tip-blue);
}

.tip-detail .sd a:focus-visible,
.tip-detail .sd summary:focus-visible {
    outline: 2px solid var(--tip-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- Ruecklink (Zielhoehe >= 2.75rem, A11y C-03) ---------- */

.tip-detail .sd-backlink {
    margin: 0 0 var(--space-sm);
    font-weight: 600;
}

.tip-detail .sd-backlink a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 2.75rem;
    text-decoration: none;
}

.tip-detail .sd-backlink a:hover {
    text-decoration: underline;
}

/* Dekorative Pfeile per CSS mit leerem Alternativtext (A11y X-03);
   die erste Deklaration ist der Rueckfall ohne Alt-Syntax. */
.tip-detail .sd-backlink a::before {
    content: "\2190";
    content: "\2190" / "";
}

.tip-detail .sd-all-link a::after {
    content: " \2192";
    content: " \2192" / "";
}

/* ---------- Karte ---------- */

.tip-detail .sd-c-card {
    padding: var(--space-md) var(--space-sm);
    border: 1px solid var(--gray-tertiary);
    border-radius: var(--tip-radius-card);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

.tip-detail .sd-c-head {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-tertiary);
}

.tip-detail .sd-eyebrow,
.tip-detail .sd-label {
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tip-text-secondary);
}

.tip-detail .sd-eyebrow {
    margin: 0 0 var(--space-xs);
}

.tip-detail .sd-h1 {
    margin: 0;
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--gray-primary);
    overflow-wrap: break-word;
}

.tip-detail .sd-c-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    padding-top: var(--space-md);
}

.tip-detail .sd-label {
    margin: var(--space-md) 0 var(--space-xs);
    line-height: 1.4;
}

.tip-detail .sd-c-info > .sd-label:first-child {
    margin-top: 0;
}

.tip-detail .sd-c-info p {
    margin: 0;
}

.tip-detail .sd-c-info p + p {
    margin-top: var(--space-xs);
}

.tip-detail .sd-c-value {
    font-weight: 600;
}

.tip-detail .sd-muted {
    font-size: var(--font-size-small);
    color: var(--tip-text-secondary);
}

/* Werte-Reihen (Anwendung, Material, Kartenmeta): Trennpunkt per CSS mit
   leerem Alternativtext (A11y X-03); Screenreader hoeren das visuell
   versteckte Komma im Markup. */
.tip-detail .sd-inline-item + .visually-hidden + .sd-inline-item::before,
.tip-detail .sd-inline-item + .sd-inline-item::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin: 0 0.4em;
    color: var(--tip-text-secondary);
    font-weight: 400;
}

/* Reflow 320 px (WCAG 1.4.10, A11y-Review D-01): die Werte stehen ohne
   Leerraum nebeneinander (das Komma ist visuell versteckt und absolut
   positioniert) — als inline-block bricht die Zeile zwischen den Werten. */
.tip-detail .sd-inline-item {
    display: inline-block;
}

.tip-detail .sd-dimensions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem var(--space-sm);
    margin: 0;
}

.tip-detail .sd-dimensions dt {
    color: var(--tip-text-secondary);
}

.tip-detail .sd-dimensions dd {
    margin: 0;
    font-weight: 600;
}

/* ---------- Medien: Foto und Masszeichnung im gleichen Rahmen ---------- */

.tip-detail .media-figure {
    margin: 0;
}

.tip-detail .media-figure + .media-figure {
    margin-top: var(--space-sm);
}

.tip-detail .media-frame {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 484px;
    padding: var(--space-sm);
    box-sizing: border-box;
    background: var(--tip-frame-bg);
    border-radius: var(--tip-radius-frame);
    overflow: hidden;
}

/* Kein zweiter Rahmen ums Bild; nie ueber die native Breite (484 px)
   hochskalieren — width:auto + max-Werte statt width:100 %. */
.tip-detail .media-frame img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    background: transparent;
}

.tip-detail .media-empty {
    margin: 0;
    font-size: var(--font-size-small); /* 14 px */
    color: var(--tip-text-secondary);
    text-align: center;
}

.tip-detail .media-caption {
    margin-top: var(--space-xs);
    font-size: var(--font-size-small);
    color: var(--tip-text-secondary);
}

/* ---------- Geraete: gruppierte Chips (Variante A) ---------- */

.tip-detail .device-groups {
    display: grid;
    gap: var(--space-sm);
}

.tip-detail .device-group-label {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--gray-primary);
}

.tip-detail .device-group-label::after {
    content: ":";
    content: ":" / "";
}

.tip-detail .device-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Zielgroesse 2rem (32 px) >= 24 px (WCAG 2.5.8) */
.tip-detail .sd a.device-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--tip-chip-border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: var(--font-size-small);
    color: var(--gray-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.tip-detail .sd a.device-chip:hover {
    border-color: var(--tip-blue);
    color: var(--tip-blue);
}

/* ---------- Groessen-Tabelle (EINE Tabelle, A11y X-05) ---------- */

.tip-detail .size-table-wrap {
    max-width: 28rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.tip-detail .size-table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
}

.tip-detail .size-table th,
.tip-detail .size-table td {
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--gray-tertiary);
    text-align: left;
    vertical-align: middle;
}

.tip-detail .size-table th:first-child,
.tip-detail .size-table td:first-child {
    padding-left: 0;
}

.tip-detail .size-table thead th {
    padding-top: 0;
    font-size: var(--font-size-small);
    font-weight: 600;
    color: var(--tip-text-secondary);
}

.tip-detail .size-cell {
    font-weight: 400;
    white-space: nowrap;
}

.tip-detail .artnr-cell,
.tip-detail .artnr-single-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1d1d1f;
}

.tip-detail .artnr-cell {
    white-space: nowrap;
}

.tip-detail .artnr-request {
    font-weight: 400;
    color: var(--tip-text-secondary);
}

.tip-detail .artnr-single-value {
    font-size: var(--font-size-h3);
    letter-spacing: 0.01em;
}

.tip-detail .artnr-single-value--request {
    font-size: var(--font-size-body);
}

/* Ab 11 Zeilen: Zeile 9 ff. bis zum Aufklappen ausblenden. Ohne
   :has-Unterstuetzung bleiben alle Zeilen sichtbar (kein Inhaltsverlust). */
.tip-detail .size-block:has(> .size-more:not([open])) .size-row--more {
    display: none;
}

/* Ohne :has() blendet CSS nichts aus — dann sind alle Zeilen sichtbar und
   der Schalter waere wirkungslos; er entfaellt (A11y-Review D-02). */
@supports not selector(:has(*)) {
    .tip-detail .size-more {
        display: none;
    }
}

/* summary als list-item: nativer Marker und Aufklapp-Semantik bleiben
   erhalten (Auftrag 2026-10-13). */
.tip-detail .size-more summary {
    display: list-item;
    min-height: 1.5rem;
    margin-top: var(--space-xs);
    padding: 0.5rem 0;
    color: var(--tip-blue);
    font-weight: 600;
    cursor: pointer;
}

.tip-detail .size-more .when-open,
.tip-detail .size-more[open] .when-closed {
    display: none;
}

.tip-detail .size-more[open] .when-open {
    display: inline;
}

/* ---------- Fuss mit CTA ---------- */

.tip-detail .sd-c-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-tertiary);
}

.tip-detail .sd a.btn-sd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 var(--space-md);
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: var(--font-size-body);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.tip-detail .sd a.btn-sd-primary {
    background: var(--tip-blue);
    color: var(--white);
}

.tip-detail .sd a.btn-sd-primary:hover {
    background: var(--tip-blue-dark);
    color: var(--white);
}

.tip-detail .sd a.btn-sd:focus-visible {
    outline-offset: 3px;
}

/* ---------- Kartenreihe "Schneidspitzen fuer <Anwendung>" ----------
   Kacheln = gemeinsame .alt-tip-card (siehe Abschnitt Schneidspitzen-Karten) */

.tip-detail .sd-section {
    margin-top: var(--space-xl);
}

.tip-detail .sd-h2 {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-h2);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gray-primary);
}

/* Schneidspitzen-Auswahl im Aufbau der Kategorieseiten (Seiten-Hero +
   Einleitungskarte, 2026-10-13): das Matrix-CE bringt einen eigenen
   .container mit; im Seiten-.container wuerde sein Innenabstand doppelt
   wirken (Filterleiste 32 px rechts der Hero-Kante). Spezifitaet 0,4,1 >
   body.fux-relaunch .container (0,2,1). */
body.fux-relaunch .tips-landing-main .tips-filter-section .container {
    padding: 0;
}

/* Karussell-Kopf der Reihe "Schneidspitzen fuer …" (carousel.css,
   Nachtrag 2026-10-13): Link im Seitenblau der Detailseite. Die
   .sd-all-link-Regeln gelten seitdem keinem Markup mehr. */
.tip-detail {
    --fux-carousel-link-color: var(--tip-blue);
}

.tip-detail .sd-all-link {
    margin: var(--space-md) 0 0;
    font-weight: 600;
}

.tip-detail .sd-all-link a {
    display: inline-block;
    padding: 4px 0; /* Zielgroesse >= 24 px (WCAG 2.5.8) */
}

@media (min-width: 768px) {
    .tip-detail .sd-c-card {
        padding: var(--space-lg);
    }
}

@media (min-width: 992px) {
    .tip-detail .sd-c-grid {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 767.98px) {
    .tip-detail .size-table th,
    .tip-detail .size-table td {
        padding: 0.625rem 0.5rem;
    }

    .tip-detail .sd-section {
        margin-top: var(--space-lg);
    }

    .tip-detail .sd a.btn-sd {
        width: 100%;
    }
}

@media print {
    .tip-detail .size-row--more {
        display: table-row !important;
    }

    .tip-detail .size-more,
    .tip-detail .sd-similar,
    .tip-detail .sd-backlink {
        display: none !important;
    }
}

.tip-detail-notfound {
    padding: var(--space-md);
    background: var(--gray-quaternary);
    border-radius: var(--radius-md);
    color: var(--gray-primary);
}

/* ============================================================
   Responsive — Legacy-.container wird unter 1024px zu 100 %,
   die Komponenten muessen bis 320 px umbrechen (Reflow 1.4.10)
   ============================================================ */

@media (max-width: 991.98px) {
    /* Kategorieseite: eine Spalte, Navigation ueber den Karten (Prototyp:
       col-lg-3 stapelt), mobil als Disclosure (category-nav.js) */
    .category-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sidebar-toggle-mobile {
        display: flex;
    }

    .sidebar-nav {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .sidebar-nav[data-collapsed] {
        display: none;
    }

    .product-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-image {
        height: 150px;
    }
}

@media (max-width: 767px) {
    :root {
        --space-section: 3rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .product-card,
    .sidebar-nav,
    .category-info {
        padding: 1.5rem;
    }

    .products-grid {
        gap: 1.5rem;
    }

    .landing-main {
        padding: var(--space-md) 0 var(--space-lg);
    }

    .product-specs {
        gap: 0.75rem 1rem;
    }

    .category-cta {
        margin-top: var(--space-lg);
        padding: var(--space-lg) 0;
    }

    .section-nav-list {
        padding: 0.75rem 0;
        gap: 1rem;
    }

    .alt-quick-spec {
        flex: 1 1 calc(50% - 1px);
    }

    .slideshow-prev,
    .slideshow-next {
        width: 36px;
        height: 36px;
    }

    .thumbnail {
        width: 56px;
        height: 56px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .upgrade-content {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 479px) {
    .alt-quick-spec {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--gray-tertiary);
    }

    .alt-quick-spec:last-child {
        border-bottom: none;
    }

    .specs-table th,
    .specs-table td {
        padding: 0.75rem 1rem;
    }

    .slideshow-image,
    .slideshow-slide img {
        padding: 1rem;
    }
}

/* ============================================================
   Reduzierte Bewegung
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .product-page *,
    .product-overview *,
    .tip-detail *,
    .tips-filter-section *,
    .alt-cutting-tips-section * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    .alt-tip-card:hover,
    .feature-card:hover,
    .product-category-card:hover,
    .product-card:hover {
        transform: none;
    }
}

/* ============================================================
   Print — technische Auswahl wird oft ausgedruckt
   (aus schneidspitzen.css uebernommen)
   ============================================================ */

@media print {
    .section-nav,
    .filter-column,
    .slideshow-prev,
    .slideshow-next,
    .mini-slider-prev,
    .mini-slider-next,
    .mini-slider-dots {
        display: none !important;
    }

    .alt-tip-card {
        break-inside: avoid;
        border-color: #999;
    }
}

/* ============================================================
   Downloads-Sektion (fux_downloads — Gap-Entscheidung 1, 2026-09-16)
   Kontraste (nachgerechnet, A11y-Review 2026-09-16): Linkfarbe
   --hsgm-blue auf Weiss 5,57:1 (WCAG 1.4.3 ok), Meta-Text
   --gray-secondary 5,07:1.
   ============================================================ */

.downloads-section {
    padding-block: var(--space-lg);
}

.downloads-intro {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-body);
    color: var(--gray-primary);
}

.downloads-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.downloads-item {
    background: var(--white);
    border: 1px solid var(--gray-tertiary);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

.downloads-link {
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--hsgm-blue);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.downloads-link:hover,
.downloads-link:focus-visible {
    color: var(--hsgm-blue-dark);
}

.downloads-meta {
    margin-left: var(--space-xs);
    font-size: var(--font-size-small);
    font-weight: 400;
    color: var(--gray-secondary);
}

.downloads-description {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-small);
    color: var(--gray-secondary);
}

/* ============================================================
   Bildergalerie (fux_bildergalerie — Gap-Entscheidung 2, 2026-09-16)
   ============================================================ */

.gallery-section {
    padding-block: var(--space-lg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-sm);
}

.gallery-item {
    margin: 0;
    background: var(--white);
    border: 1px solid var(--gray-tertiary);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-caption {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-small);
    color: var(--gray-secondary);
}

/* ============================================================
   Video-Sektion (fux_video — Gap-Entscheidung 4, 2026-09-16;
   DSGVO: kein Fremd-Embed, extern nur als Link)
   ============================================================ */

.video-section {
    padding-block: var(--space-lg);
}

.video-player {
    display: block;
    width: 100%;
    max-width: 45rem;
    border-radius: var(--radius-sm);
    background: var(--gray-primary);
}

.video-text,
.video-external {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-body);
    color: var(--gray-primary);
}

/* Artikelnummer auf Zubehoer-Karten (fux_zubehoer nutzt die
   bestehenden alt-tip-Kartenklassen) */
.alt-tip-articlenumber {
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-small);
    color: var(--gray-secondary);
}

/* ============================================================
   Beschreibungs-Sektion (fux_beschreibung — User-Entscheidung
   2026-09-16; Quelle: product-detail.css .description-*)
   ============================================================ */

.description-section {
    padding-block: var(--space-lg);
    background: var(--white);
}

.description-content {
    max-width: 900px;
    margin: 0 auto;
}

.description-content p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--gray-primary);
    margin: 0 0 1.5rem;
}

.description-content strong {
    font-weight: 600;
    color: var(--gray-primary);
}

/* RTE-Block-Stil "Hinweiskasten" (Preset fuxProducts, generisch benannt).
   Look des alt-upgrade-banner als Einzel-Absatz-Variante.
   Kontraste (WCAG 1.4.3, gegen die dunklere Gradient-Seite #e8f0fe):
   --gray-primary #1d1d1f = 14,6:1; Links --hsgm-blue #0066CC = 4,85:1. */
.description-content p.rte-hint,
.rte-hint {
    padding: 1.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
    border: 1px solid rgba(0, 102, 204, 0.12);
    color: var(--gray-primary);
}

.rte-hint a {
    color: var(--hsgm-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rte-hint a:hover,
.rte-hint a:focus-visible {
    color: var(--hsgm-blue-dark);
}

/* ============================================================
   Lieferumfang: Master-Komplettierung (User-Befund 2026-09-16;
   Quelle hsg-0-alt.css .alt-delivery-icon/-check/-missing/
   -not-included).
   Kontrast-Abweichung vom Prototyp (WCAG 1.4.11, Statusanzeigen
   brauchen >= 3:1 gegen die angrenzende Flaeche):
   Prototyp-Haken #32d74b auf getoentem Kreis = 1,79:1 -> ersetzt
   durch #1a7f37 (4,73:1); Prototyp-X #ff453a -> #b3261e (6,1:1).
   Status ist zusaetzlich formunterscheidend (Haken vs. X) und
   traegt visually-hidden-Text — nie nur Farbe. */

.alt-delivery-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--gray-quaternary);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hsgm-blue);
}

.alt-delivery-text span {
    font-size: 0.8125rem;
    color: var(--gray-secondary);
}

.alt-delivery-check {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(26, 127, 55, 0.1);
    color: #1a7f37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alt-delivery-missing {
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
}

.alt-delivery-not-included {
    opacity: 0.7;
}

.alt-delivery-not-included:hover,
.alt-delivery-not-included:focus-within {
    opacity: 1;
}

/* ============================================================
   Stufe 2 (2026-10-06): Maschinen-Hero, Badge-Werte, Spec-Gruppen
   Quelle: _prototypes/css/product-detail.css (product-header,
   product-header-grid, product-hero-content, product-subtitle,
   product-hero-actions, product-hero-visual, stats-grid, stat-*) —
   die Klassen gab es in products.css noch nicht (geprueft 2026-10-06).
   Farben ueber die AA-korrigierten Tokens dieser Datei.
   ============================================================ */

/* Badge: jeder Wert eigenes inline-block (WCAG 1.3.1), kein nowrap */
.alt-hero-badge-item {
    display: inline-block;
}

.product-header {
    padding: var(--space-xl) 0 var(--space-lg);
    background: linear-gradient(135deg, var(--gray-quaternary) 0%, var(--white) 100%);
}

.product-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: center;
}

.product-header-grid--single {
    grid-template-columns: 1fr;
}

.product-hero-content {
    min-width: 0;
}

.product-hero-content h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: var(--gray-primary);
    margin: 1rem 0;
    letter-spacing: -0.02em;
    /* A11y a5: lange Modellnamen ("HSG-G2S-50/80/100-E") ohne Ueberlauf */
    overflow-wrap: anywhere;
}

.product-subtitle {
    font-size: 1.25rem;
    color: var(--gray-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.product-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
    margin-bottom: 0;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--gray-tertiary);
}

.stat-item {
    display: flex;
    /* dt (Label) vor dd (Wert) im DOM, Wert visuell oben (A11y m2) */
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    min-width: 0;
}

.stat-item dt,
.stat-item dd {
    margin: 0;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-primary);
    line-height: 1;
    overflow-wrap: anywhere;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* A11y M1 (WCAG 1.4.10): lange Labels ("Aufnahmeleistung",
       "Puissance absorbée") brechen statt horizontal zu ueberlaufen */
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media (max-width: 992px) {
    /* A11y a5: minmax(0, 1fr) statt 1fr — 1fr hat min-content als
       Untergrenze, lange Woerter sprengten sonst die Spalte */
    .product-header-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    /* A11y M1 (WCAG 1.4.10): minmax(0, 1fr) — ohne 0 als Untergrenze
       erzwangen lange Labels/Werte bei 320 CSS-px horizontales Scrollen */
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .product-hero-actions {
        flex-direction: column;
        width: 100%;
    }
}

/* Unter 480 px eine Spalte: zwei Spalten liessen bei 320 CSS-px je
   ca. 130 px — "AUFNAHMELEISTUNG" (Versalien, Sperrung) braeche dort
   mitten im Wort; einspaltig bleibt das Label ganz (Pruefung M1). */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* ============================================================
   Technische Daten (CE fux_technischedaten) — Aufbau nach Prototyp
   2026-10-10 (User-Vorgabe mit Skizze). Quelle 1:1:
   _prototypes/css/product-detail.css:581-633 (.specs-section,
   .specs-table, h3, th, td, td:first-child/:last-child) und
   hsg-0-alt.css:679-682 (Wertspalte und ihr Kopf zentriert), Markup
   hsg-0-product-detail-alt.html:456-500. Der Prototyp-H3-Kopf
   ("HSG-0 Grundgeraet") ist hier die erste thead-Zeile
   (th.specs-group-title), die Spaltenkoepfe die zweite.
   Ein CE fuer alle Layouts: auch Maschinen-Seiten folgen diesem Aufbau
   (hsg-q-i-wb-detail hat weder Spaltenkoepfe noch zentrierte Werte).
   Alle Regeln sind auf .specs-section begrenzt: .specs-table traegt
   auch die Varianten-Tabelle der Schneidspitzen-Detailseite
   (CuttingTipDetail.html), die hier unveraendert bleibt.

   Kontraste (WCAG 1.4.3, nachgerechnet 2026-10-10, relative Luminanz):
   - Bezeichnung, Kopfzeilen --gray-primary #1d1d1f auf Weiss 16,83:1,
     auf --gray-quaternary #f5f5f7 (Kopfband) 15,46:1
   - Wert/Hinweis --gray-secondary #6e6e73 auf Weiss 5,07:1
     (Prototyp #86868b: 3,54:1 — verfehlt AA, siehe Dateikopf)
   - Zeilenlinien #d2d2d7 auf Weiss 1,51:1: rein dekorativ, die
     Zuordnung traegt die Tabellensemantik (Spaltenkoepfe) und die
     Gewichtung 500/400 + Farbe (kein 1.4.11-Fall)

   Bewusste Abweichungen vom Prototyp:
   - Unter 480px stapeln Bezeichnung und Wert, die Spaltenkoepfe sind
     dann nur visuell ausgeblendet (Prototyp schneidet bei 375px die
     Werte per overflow:hidden ab, WCAG 1.4.10); 480-767px zwei Spalten
     mit Innenabstand 0.75rem 1rem statt 1rem 2rem
   - Zeilen ohne Bezeichnung (.specs-wide) und Hinweise erscheinen wie
     Werte (400, grau), nicht wie Bezeichnungen (Prototyp-Hinweis erbte
     500 ueber td:first-child)
   ============================================================ */
.specs-section {
    background: var(--white);
}

/* Prototyp: volle Containerbreite (1216px bei 1280), nicht 900px */
.specs-section .specs-table {
    max-width: none;
}

/* Prototyp: margin-bottom 3rem je Tabelle; hier nur zwischen den
   Tabellen, damit der Sektionsabstand unten nicht doppelt wirkt */
.specs-section .specs-table + .specs-table {
    margin-top: 3rem;
}

/* Prototyp: Zellen erben die Fliesstextgroesse (17px), Innenabstand
   1rem 2rem, Spaltenbreiten automatisch (table-layout auto).
   overflow-wrap/hyphens: lange Komposita und Werte ohne Leerzeichen
   erzwingen keine Ueberbreite */
.specs-section .specs-table th,
.specs-section .specs-table td {
    font-size: var(--font-size-body);
    padding: 1rem 2rem;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Name der Tabelle = Prototyp .specs-table h3 */
.specs-section .specs-table thead th.specs-group-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gray-primary);
    padding: 1.5rem 2rem;
    background: var(--gray-quaternary);
    border-bottom: 1px solid var(--gray-tertiary);
}

/* Spaltenkoepfe = Prototyp .specs-table th (product-detail.css:608-614:
   grau, 600, 2px-Linie; hier 3px laut User-Vorgabe 2026-10-10). Explizit, weil die 1px-Zeilenlinie dieses
   Blocks die Basisregel sonst ueberschreibt (User-Vorgabe 2026-10-10) */
.specs-section .specs-table .specs-column-heads th {
    border-bottom: 3px solid var(--gray-tertiary);
}

/* Prototyp td:first-child / td:last-child */
.specs-section .specs-table td.specs-label {
    font-weight: 500;
    color: var(--gray-primary);
}

.specs-section .specs-table td.specs-value,
.specs-section .specs-table td.specs-wide,
.specs-section .specs-table td.specs-note {
    font-weight: 400;
    color: var(--gray-secondary);
}

/* hsg-0-alt.css:679-682: Wertspalte und ihr Kopf zentriert */
.specs-section .specs-column-heads th + th,
.specs-section .specs-table td.specs-value {
    text-align: center;
}

/* Hinweis = Prototyp <td colspan="2"><em> */
.specs-table td.specs-note {
    font-style: italic;
}

/* Tablet/Phablet: zwei Spalten wie im Prototyp, Innenabstand reduziert
   (Messung 2026-10-10, Seite 240/G2S: ab 480px Wertspalte >= 249px) */
@media (max-width: 767px) {
    .specs-section .specs-table th,
    .specs-section .specs-table td {
        padding: 0.75rem 1rem;
    }

    .specs-section .specs-table thead th.specs-group-title {
        font-size: 1.125rem;
        padding: 1rem;
    }

    .specs-section .specs-table + .specs-table {
        margin-top: 2rem;
    }
}

/* Schmal (< 480px): Bezeichnung ueber Wert. Zweispaltig bliebe bei 320/
   375px zwar ohne Ueberbreite, trennte aber Bezeichnungen und Werte mitten
   im Wort ("Abmessun-gen", Wertspalte 130px; Messung 2026-10-10). Die
   Spaltenkoepfe bleiben fuer Screenreader im Baum (Clip-Pattern statt
   display:none). <table> behaelt display:table; thead/tbody/tr/th/td
   tragen im Template explizite ARIA-Rollen als Absicherung fuer WebKit
   vor Safari 17 (aktuelle Engines behalten die Semantik nativ). */
@media (max-width: 479px) {
    .specs-section .specs-table thead,
    .specs-section .specs-table tbody,
    .specs-section .specs-table tr,
    .specs-section .specs-table th,
    .specs-section .specs-table td {
        display: block;
        width: auto;
    }

    .specs-section .specs-column-heads {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .specs-section .specs-table tbody tr {
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--gray-tertiary);
    }

    .specs-section .specs-table tbody tr:last-child {
        border-bottom: none;
    }

    .specs-section .specs-table td,
    .specs-section .specs-table td.specs-value {
        padding: 0;
        border-bottom: none;
        text-align: left;
    }

    .specs-section .specs-table td.specs-label + td {
        margin-top: 0.25rem;
    }
}

/* ============================================================
   Stufe 5 (E4, 2026-10-07): Optionale Ausstattung (CE fux_optionen)
   Quelle: _prototypes/css/hsg-0-accu.css (.options-info)
   ============================================================ */
.options-section {
    padding: var(--space-lg) 0;
}

.options-info {
    background: var(--gray-quaternary);
    padding: 2rem;
    border-radius: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.options-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.options-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    color: var(--gray-primary);
    overflow-wrap: anywhere;
}

/* Pfeil rein dekorativ (A11y O1): leerer Alternativtext, damit
   Screenreader ihn nicht als "Pfeil nach rechts" vorlesen; die erste
   Deklaration ist der Rueckfall fuer Browser ohne Alt-Text-Syntax */
.options-list li::before {
    content: "→";
    content: "→" / "";
    position: absolute;
    left: 0;
    color: var(--hsgm-blue);
    font-weight: 700;
}

.options-text {
    /* A11y O4: eigener Block unter der Option, nicht nur Farbe */
    display: block;
    color: var(--gray-secondary);
}

/* Advisory A11y: schmale Viewports mehr Platz fuer den Text */
@media (max-width: 480px) {
    .options-info {
        padding: 1rem;
    }
}