/* ============================================================
   fux_sitepackage_hsgm — Relaunch-Seitenrahmen
   (Layouts/Page/Relaunch.html + Partials/Page/Relaunch/)
   ============================================================
   Quelle: _prototypes/css/homepage.css (MASSGEBLICHER Startseiten-
   Master, Header Z. 87-186, Footer Z. 720-786) — Header/Footer 1:1;
   Skip-Link, Container und Breadcrumb-Zeile aus product-detail.css
   (identisches Design-System, Breadcrumb existiert nur auf Unterseiten).
   Konsolidiert aus fux_products_hsgm/relaunch-frame.css (geloescht) —
   EINE Rahmenquelle. Laedt nur auf Relaunch-Seiten (Bedingungsblock im
   Set fokus-ux/products-hsgm); alle Regeln unter body.fux-relaunch.

   Token-Quelle bleibt products.css (:root, WCAG-korrigiert). Die var()-
   Fallbacks hier tragen dieselben Werte — aktiv nur auf Seiten ohne
   products.css (Backend-Layout "Relaunch Standard").

   Kontraste nachgerechnet (WCAG 1.4.3):
   - nav-link #1d1d1f auf #fbfbfd . . . . . . . . 16,28:1
   - nav-link hover/aktiv #0066cc auf #f5f5f7 . .  5,11:1
   - lang-btn #1d1d1f auf #fbfbfd / aktiv #fff auf #0066cc  16,28 / 5,57:1
   - breadcrumb #6e6e73 auf #f5f5f7 . . . . . . .  4,66:1
   - Footer-Links/Kontakt/Legal #86868b auf #1d1d1f  4,65:1
     (LITERAL statt Token: das WCAG-korrigierte --gray-secondary #6e6e73
     ist fuer HELLE Grunde dunkler gemacht und faellt auf dem dunklen
     Footer auf 3,32:1 — der Original-Masterwert #86868b besteht dort.)
   - Skip-Link #fff auf #0066cc . . . . . . . . .  5,57:1
   JS-Etappe (2026-10-10), Nicht-Text-Kontrast WCAG 1.4.11 >= 3:1:
   - Burger-/Untermenue-Icon #1d1d1f auf #f5f5f7 / #fbfbfd  15,46 / 16,28:1
   - Untermenue-Icon offen/Hover #0066cc auf #f5f5f7 . . .   5,11:1
   - Fokusrahmen #0066cc auf #fbfbfd / #ffffff . . . . . .   5,39 / 5,57:1
   - Mobilmenue: deckender Grund #fbfbfd (nicht die 85-%-
     Transparenz des Headers — ueber dunklem Inhalt fiele der
     Grund auf ~#dadadc, aktiver Link #0066cc nur 3,99:1)
   - navbar-scrolled: Grund rgba(251,251,253,.95), Text unveraendert
   Such-Dialog (2026-10-10):
   - Titel/Label/Eingabe #1d1d1f auf #fff . . . . . . . . .  16,83:1
   - Hinweis #6e6e73 auf #fff . . . . . . . . . . . . . . .   5,07:1
   - Eingabefeld-Rand #86868b auf #fff (1.4.11) . . . . . .   3,62:1
   - Absenden #fff auf #0066cc / Hover #0055aa . . . . . . .  5,57 / 7,29:1
   - Schliessen-Icon #1d1d1f auf #f5f5f7 . . . . . . . . . .  15,46:1

   Bootstrap-Entscheidung (wie gehabt): Master laedt Bootstrap per CDN
   (DSGVO-Verbot) fuer Navbar-Chrome/Utilities — ersetzt durch eigene
   Regeln.
   JS-Etappe (2026-10-10, Public/JavaScript/relaunch-frame.js):
   Schalter ist die Klasse fux-nav-js am <html>, die das Skript vor dem
   ersten Rendern setzt. MIT JS: Untermenues als Disclosure (Button
   .submenu-toggle, Zustand nur aria-expanded), Mobile-Burger bis
   991.98px, navbar-scrolled. OHNE JS (html:not(.fux-nav-js)): Dropdown per
   :hover/:focus-within, Navigation bricht um, Header bis 991.98px
   statisch (Interim B3) — beide Pfade per Selektor getrennt.
   Such-Modal (Schritt Suchseite): natives <dialog>, Regeln unten;
   ohne JS bleibt die Suche ein Link.
   ============================================================ */

body.fux-relaunch {
    /* Master-Sektionsabstand (products.css reduziert im Legacy-Rahmen) */
    --space-section: 8rem;
    /* Fixer Header: Bezug fuer sticky Sektionsleiste + scroll-margin */
    --fux-sticky-offset: 72px;

    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    font-size: var(--font-size-body, 1.0625rem);
    line-height: 1.5;
    color: var(--gray-primary, #1d1d1f);
    background-color: var(--white, #fff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- HSGM-Icons (fux:icon, Galerie Icons/Hsgm/, 2026-10-12) ----------
   Standardfarben (User 2026-10-12) zentral; Bereiche ueberschreiben nur die
   Variablen (z. B. dunkle Flaechen: --icon-primary hell). Die SVGs setzen
   stroke="var(--icon-…, currentColor)" im Attribut; die beiden Regeln mit
   Attributselektor setzen dasselbe als CSS-Eigenschaft — Absicherung fuer
   Browser, die var() im Praesentationsattribut nicht auswerten (in Chrome
   154 geprueft, Firefox/Safari nicht). .icon--mono: Akzent = Grundfarbe.
   Kontrast #0055AA auf Weiss 7,3:1; #5CA9F6 nur 2,5:1 — der Akzent traegt
   keine Bedeutung allein (Icons sind dekorativ, Text daneben). */
:root {
    --icon-primary: #0055AA;
    --icon-secondary: #5CA9F6;
}

.hsgm-icon {
    color: var(--icon-primary);
}

.hsgm-icon g[stroke^="var(--icon-primary"] {
    stroke: var(--icon-primary, currentColor);
}

.hsgm-icon g[stroke^="var(--icon-secondary"] {
    stroke: var(--icon-secondary, currentColor);
}

.icon--mono {
    --icon-secondary: var(--icon-primary);
}

/* gleich spezifisch wie die Regeln oben und spaeter im Quelltext, sonst
   gewinnen diese (A11y-Review 2026-10-12, M1) */
@media (forced-colors: active) {
    .hsgm-icon g[stroke] {
        stroke: CanvasText;
    }
}

body.fux-relaunch .container {
    width: auto;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    float: none;
}

/* Skip-Link (ersetzt auf Relaunch-Seiten die sitepackage skiplink.css) */
body.fux-relaunch .skip-link {
    position: absolute;
    left: -9999px;
    z-index: 1100;
    padding: 1rem;
    background: var(--hsgm-blue, #0066cc);
    color: var(--white, #fff);
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}

body.fux-relaunch .skip-link:focus {
    left: 0;
    top: 0;
}

/* ============================================================
   Header & Navbar (homepage.css:87-186)
   ============================================================ */

body.fux-relaunch .header-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(251, 251, 253, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fux-relaunch .navbar {
    padding: 1rem 0;
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* navbar-scrolled (homepage.css:100-112) — Klassen setzt das Rahmen-JS
   ab 50px Scrolltiefe; Hoehe -> --fux-sticky-offset (gemessen, JS). */
body.fux-relaunch .header-main.header-scrolled {
    background: rgba(251, 251, 253, 0.95);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

body.fux-relaunch .navbar.navbar-scrolled {
    padding: 0.5rem 0;
}

body.fux-relaunch .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

body.fux-relaunch .navbar-brand img {
    height: 40px;
    width: auto;
    display: block;
}

body.fux-relaunch .navbar-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

body.fux-relaunch .nav-item {
    position: relative;
    margin: 0;
}

/* Homepage-Master: Pill-Hover statt Unterstreichungs-Animation */
body.fux-relaunch .nav-link {
    display: inline-block;
    color: var(--gray-primary, #1d1d1f);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 400;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 0.5rem;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    position: relative;
}

body.fux-relaunch .nav-link:hover,
body.fux-relaunch .nav-link:focus-visible {
    color: var(--hsgm-blue, #0066cc);
    background: var(--gray-quaternary, #f5f5f7);
}

body.fux-relaunch .nav-link.active {
    color: var(--hsgm-blue, #0066cc);
    font-weight: 500;
}

/* Caret des Masters (Bootstrap dropdown-toggle) als eigener Pfeil —
   nur OHNE JS; mit JS traegt der Disclosure-Button den Pfeil. */
html:not(.fux-nav-js) body.fux-relaunch .dropdown-toggle::after {
    content: '';
    display: inline-block;
    margin-left: 0.35em;
    vertical-align: 0.15em;
    border-top: 0.3em solid currentColor;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

/* Desktop-Container von Navigation + Meta (Master: .navbar-collapse,
   ul.mx-auto) — Navigation mittig zwischen Logo und Meta wie zuvor
   per space-between. Mobil mit JS: einklappbar (Responsive unten). */
body.fux-relaunch .navbar-collapse {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

body.fux-relaunch .navbar-collapse > .navbar-nav {
    margin-left: auto;
    margin-right: auto;
}

/* Burger: nur mobil UND mit JS sichtbar (Responsive unten) */
body.fux-relaunch .navbar-toggler {
    display: none;
}

/* Disclosure-Button neben dem Elternlink (WAI-ARIA APG „Disclosure
   Navigation Menu“). Zielgroesse 28x32px (>= 24x24, WCAG 2.5.8). */
body.fux-relaunch .nav-item.dropdown {
    display: flex;
    align-items: center;
}

/* Pfeil-Button rueckt an den Elternlink heran (gehoert sichtbar dazu) */
html.fux-nav-js body.fux-relaunch .nav-item.dropdown > .nav-link {
    margin-right: 0;
    padding-right: 0.5rem;
}

body.fux-relaunch .submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    margin: 0 0.25rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--gray-primary, #1d1d1f);
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hidden-Attribut gewinnt (Button erst sichtbar, wenn das JS laeuft) */
body.fux-relaunch .submenu-toggle[hidden],
body.fux-relaunch .navbar-toggler[hidden] {
    display: none;
}

body.fux-relaunch .submenu-toggle:hover,
body.fux-relaunch .submenu-toggle:focus-visible,
body.fux-relaunch .submenu-toggle[aria-expanded="true"] {
    color: var(--hsgm-blue, #0066cc);
    background: var(--gray-quaternary, #f5f5f7);
}

body.fux-relaunch .submenu-toggle .icon-svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fux-relaunch .submenu-toggle[aria-expanded="true"] .icon-svg {
    transform: rotate(180deg);
}

/* Dropdown-Panel. Oeffnen: ohne JS per :hover/:focus-within, mit JS
   ausschliesslich ueber aria-expanded des Disclosure-Buttons (Hover
   setzt das JS auf dem Desktop selbst, Escape schliesst — 1.4.13). */
body.fux-relaunch .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    display: none;
    list-style: none;
    background: var(--white, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    padding: 0.5rem;
    margin: 0.5rem 0 0;
    z-index: 1001;
    /* Panel haengt am fixierten Header: bei niedriger Fensterhoehe/Zoom
       eigener Scrollbereich statt abgeschnittener Eintraege (1.4.10). */
    max-height: calc(100vh - var(--fux-sticky-offset, 72px) - 1rem);
    max-height: calc(100dvh - var(--fux-sticky-offset, 72px) - 1rem);
    overflow-y: auto;
}

html:not(.fux-nav-js) body.fux-relaunch .nav-item:hover > .dropdown-menu,
html:not(.fux-nav-js) body.fux-relaunch .nav-item:focus-within > .dropdown-menu,
html.fux-nav-js body.fux-relaunch .submenu-toggle[aria-expanded="true"] + .dropdown-menu {
    display: block;
}

/* Hover-Bruecke ueber den 0.5rem-Spalt zwischen Elternpunkt und Panel:
   der Zeiger verlaesst das Item beim Hinueberfahren nicht (WCAG 1.4.13
   „hoverable“). Am li statt am Panel — dessen overflow-y wuerde ein
   Pseudo-Element ausserhalb abschneiden. Nur waehrend Hover vorhanden. */
body.fux-relaunch .nav-item.dropdown:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
}

body.fux-relaunch .dropdown-menu li {
    margin: 0;
}

body.fux-relaunch .dropdown-item {
    display: block;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    color: var(--gray-primary, #1d1d1f);
    text-decoration: none;
}

body.fux-relaunch .dropdown-item:hover,
body.fux-relaunch .dropdown-item:focus-visible,
body.fux-relaunch .dropdown-item.active {
    background: var(--gray-quaternary, #f5f5f7);
    color: var(--hsgm-blue, #0066cc);
}

body.fux-relaunch .navbar-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Sprachumschalter: Outline-Pills des Homepage-Masters */
body.fux-relaunch .language-switcher {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

body.fux-relaunch .lang-btn {
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid var(--gray-tertiary, #d2d2d7);
    border-radius: 2rem;
    font-size: 0.875rem;
    color: var(--gray-primary, #1d1d1f);
    text-decoration: none;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

body.fux-relaunch .lang-btn:hover,
body.fux-relaunch .lang-btn:focus-visible,
body.fux-relaunch .lang-btn.active {
    background: var(--hsgm-blue, #0066cc);
    color: var(--white, #fff);
    border-color: var(--hsgm-blue, #0066cc);
}

/* Such-Link: runder Button des Homepage-Masters */
body.fux-relaunch .search-btn {
    background: var(--gray-quaternary, #f5f5f7);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-primary, #1d1d1f);
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

body.fux-relaunch .search-btn:hover,
body.fux-relaunch .search-btn:focus-visible {
    background: var(--gray-tertiary, #d2d2d7);
    transform: scale(1.05);
}

body.fux-relaunch .search-btn .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Link (ohne JS) und Dialog-Button (mit JS) teilen die Optik; hidden
   gewinnt gegen display:flex */
body.fux-relaunch .search-btn[hidden] {
    display: none;
}

body.fux-relaunch button.search-btn {
    padding: 0;
    cursor: pointer;
}

/* ============================================================
   Such-Dialog (Master #searchModal, Bootstrap modal-lg ersetzt
   durch natives <dialog> + showModal(): Top-Layer, Fokusfalle,
   inerter Hintergrund und Escape kommen vom Browser)
   ============================================================ */

body.fux-relaunch .search-dialog {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: 800px;
    max-height: calc(100dvh - 2rem);
    margin: 1.75rem auto auto;
    padding: 0; /* Klick auf das <dialog> selbst = Klick auf den Hintergrund */
    border: 0;
    border-radius: 1rem;
    background: var(--white, #fff);
    color: var(--gray-primary, #1d1d1f);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: auto;
}

body.fux-relaunch .search-dialog::backdrop {
    background: rgba(29, 29, 31, 0.5);
}

body.fux-relaunch .search-dialog-inner {
    padding: 1.5rem;
}

body.fux-relaunch .search-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

body.fux-relaunch .search-dialog-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

body.fux-relaunch .search-dialog-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gray-quaternary, #f5f5f7);
    color: var(--gray-primary, #1d1d1f);
    cursor: pointer;
}

body.fux-relaunch .search-dialog-close:hover,
body.fux-relaunch .search-dialog-close:focus-visible {
    background: var(--gray-tertiary, #d2d2d7);
}

body.fux-relaunch .search-dialog-close .icon-svg {
    width: 1.25rem;
    height: 1.25rem;
}

body.fux-relaunch .search-dialog-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

body.fux-relaunch .search-dialog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.fux-relaunch .search-dialog-input {
    box-sizing: border-box;
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid #86868b; /* 3,62:1 auf #fff, Kopfkommentar */
    border-radius: 0.5rem;
    font: inherit;
    font-size: 1.125rem;
    color: inherit;
    background: var(--white, #fff);
}

body.fux-relaunch .search-dialog-input:focus-visible {
    outline: 2px solid var(--hsgm-blue, #0066cc);
    outline-offset: 2px;
}

body.fux-relaunch .search-dialog-submit {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--hsgm-blue, #0066cc);
    color: var(--white, #fff);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

body.fux-relaunch .search-dialog-submit:hover,
body.fux-relaunch .search-dialog-submit:focus-visible {
    background: #0055aa;
}

body.fux-relaunch .search-dialog-hint {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    color: var(--gray-secondary, #6e6e73);
}

/* Hintergrund-Scroll sperren, solange der Dialog offen ist (Klasse
   setzt das Rahmen-JS am <html>); scrollbar-gutter verhindert den
   Seitensprung durch die wegfallende Scrollleiste. */
html.fux-dialog-open {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Einblenden nur ohne Bewegungsreduktion */
@media (prefers-reduced-motion: no-preference) {
    body.fux-relaunch .search-dialog[open] {
        animation: fux-search-dialog-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.fux-relaunch .search-dialog[open]::backdrop {
        animation: fux-search-backdrop-in 0.2s ease-out;
    }
}

@keyframes fux-search-dialog-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

@keyframes fux-search-backdrop-in {
    from {
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    body.fux-relaunch .search-dialog {
        width: calc(100% - 1rem);
        margin-top: 0.5rem;
    }

    body.fux-relaunch .search-dialog-inner {
        padding: 1rem;
    }

    body.fux-relaunch .search-dialog-submit {
        flex-basis: 100%;
    }
}

/* Burger-Button (Master .navbar-toggler, ohne Bootstrap): 40x40px wie
   der Such-Button; Icon wird beim Oeffnen zum X. */
body.fux-relaunch .navbar-toggler {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: var(--gray-quaternary, #f5f5f7);
    color: var(--gray-primary, #1d1d1f);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

body.fux-relaunch .navbar-toggler:hover,
body.fux-relaunch .navbar-toggler:focus-visible {
    background: var(--gray-tertiary, #d2d2d7);
}

body.fux-relaunch .navbar-toggler .icon-svg {
    width: 1.5rem;
    height: 1.5rem;
}

body.fux-relaunch .navbar-toggler path {
    transform-origin: 12px 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.fux-relaunch .navbar-toggler[aria-expanded="true"] .toggler-line-1 {
    transform: rotate(45deg) translateY(5px);
}

body.fux-relaunch .navbar-toggler[aria-expanded="true"] .toggler-line-2 {
    opacity: 0;
}

body.fux-relaunch .navbar-toggler[aria-expanded="true"] .toggler-line-3 {
    transform: rotate(-45deg) translateY(-5px);
}

/* Sichtbarer Fokus im Rahmen (Legacy-CSS laedt hier nicht) */
body.fux-relaunch a:focus-visible,
body.fux-relaunch button:focus-visible {
    outline: 2px solid var(--hsgm-blue, #0066cc);
    outline-offset: 2px;
}

/* A11y-Fix B4: Anker-Ziele generisch unter dem fixen Header freihalten
   (WCAG 2.4.11) — gilt fuer ALLE Relaunch-Seiten, auch Backend-Layout-
   Seiten ohne products.css. :where() haelt die Regel spezifitaetsneutral
   (0,1,0 statt 0,2,1): die Sektionsleisten-Offsets der Produktseiten
   (products.css:104-108, 72px + 4.5rem) gewinnen weiterhin — die Regel
   hier greift nur, wo keine speziellere existiert (A11y-Recheck
   2026-09-16, Spezifitaets-Regression behoben). 1rem Luft zusaetzlich. */
body.fux-relaunch :where(#main-content),
body.fux-relaunch :where([id]) {
    scroll-margin-top: calc(var(--fux-sticky-offset, 72px) + 1rem);
}

/* A11y-Fix A1 (Review JS-Etappe 2026-10-10, WCAG 2.4.11): scroll-margin
   wirkt nur auf Elemente MIT Regel (Anker-Ziele). Per (Shift+)Tab
   fokussierte Links ohne id scrollte Chrome nicht unter dem fixen Header
   hervor. Deshalb MIT JS: scroll-padding-top am Scroll-Container <html>
   — gilt fuer Fokus-Scrollen, Anker-Spruenge und scrollIntoView aller
   Elemente. Die Hoehe setzt das Rahmen-JS als --fux-sticky-offset
   zusaetzlich inline am <html> (ueberschreibt products.css
   :root { --fux-sticky-offset: 0px }, das fuer den Legacy-Rahmen bleibt).
   Produktseiten: + --fux-anchor-offset (products.css:80, Hoehe der
   sticky Sektionsleiste + Luft, definiert an :root = <html>).
   Die scroll-margin-Regeln (B4 oben, products.css:104-113) wuerden sich
   mit scroll-padding ADDIEREN (doppelter Abstand bei Anker-Spruengen) —
   deshalb mit JS auf 0; (0,3,2) schlaegt products.css (max. 0,2,1) und
   B4 (0,1,1). Ohne JS (kein fux-nav-js) gilt unveraendert B4 +
   products.css. :has() fehlt nur in sehr alten Browsern — dann bleibt
   die Header-Hoehe ohne Sektionsleiste wirksam. */
html.fux-nav-js {
    scroll-padding-top: calc(var(--fux-sticky-offset, 72px) + 1rem);
}

html.fux-nav-js:has(.section-nav) {
    scroll-padding-top: calc(var(--fux-sticky-offset, 72px) + var(--fux-anchor-offset, 4.5rem));
}

html.fux-nav-js body.fux-relaunch [id] {
    scroll-margin-top: 0;
}

/* N1 (A11y-Re-Check 2026-10-10): derselbe Mechanismus OHNE JS. Kein
   gemessener Wert -> Literal 73px = Kopfleiste in Ruhelage (40px Logo +
   2x1rem + 1px, wie der Breadcrumb-Fallback); bis 1199.98px ist der
   Header ohne JS statisch (Responsive unten), dort nur die Sektions-
   leiste bzw. Luft. :has(> body.fux-relaunch) begrenzt auf Relaunch-
   Seiten; ohne :has-Unterstuetzung fallen ALLE drei Regeln weg und es
   gilt wie bisher B4 + products.css (kein halber Zustand). */
html:not(.fux-nav-js):has(> body.fux-relaunch) {
    scroll-padding-top: calc(73px + 1rem);
}

html:not(.fux-nav-js):has(> body.fux-relaunch):has(.section-nav) {
    scroll-padding-top: calc(73px + var(--fux-anchor-offset, 4.5rem));
}

html:not(.fux-nav-js):has(> body.fux-relaunch) body.fux-relaunch [id] {
    scroll-margin-top: 0;
}

@media (max-width: 1199.98px) {
    html:not(.fux-nav-js):has(> body.fux-relaunch) {
        scroll-padding-top: 1rem;
    }

    html:not(.fux-nav-js):has(> body.fux-relaunch):has(.section-nav) {
        scroll-padding-top: var(--fux-anchor-offset, 4.5rem);
    }
}

/* ============================================================
   Breadcrumb-Zeile (product-detail.css:228-257 — Unterseiten-
   Element, auf der Master-Startseite nicht vorhanden)
   ============================================================ */

body.fux-relaunch .breadcrumb-nav {
    /* fixer Header in Ruhelage: Inhaltshoehe der Kopfleiste (vom JS
       gemessen, scroll-unabhaengig; Fallback Logo 40px) + Navbar-Padding
       2x1rem + 1px Rand. Bricht die Navigation ab 992px zweizeilig um
       (EN/FR bis ~1060-1080px, gemessen 2026-10-10), waechst der
       Abstand mit (ohne JS: 40px-Fallback). */
    margin-top: calc(var(--fux-navbar-inner-height, 40px) + 2rem + 1px);
    padding: 1rem 0;
    background: var(--gray-quaternary, #f5f5f7);
    border-bottom: 1px solid var(--gray-tertiary, #d2d2d7);
}

body.fux-relaunch .breadcrumb-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.875rem;
}

body.fux-relaunch .breadcrumb-item {
    color: var(--gray-secondary, #6e6e73);
    text-decoration: none;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

body.fux-relaunch a.breadcrumb-item:hover,
body.fux-relaunch a.breadcrumb-item:focus-visible {
    color: var(--hsgm-blue, #0066cc);
}

body.fux-relaunch .breadcrumb-item.active {
    color: var(--gray-primary, #1d1d1f);
}

body.fux-relaunch .breadcrumb-separator {
    color: var(--gray-tertiary, #d2d2d7);
    margin: 0 0.5rem;
}

/* ============================================================
   Footer (homepage.css:720-786)
   ============================================================ */

body.fux-relaunch .footer-main {
    background: var(--gray-primary, #1d1d1f);
    color: var(--white, #fff);
    padding: var(--space-xl, 5rem) 0 var(--space-md, 2rem);
    margin-top: 0;
}

body.fux-relaunch .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

body.fux-relaunch .footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: var(--white, #fff);
}

body.fux-relaunch .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.fux-relaunch .footer-links li {
    margin-bottom: 0.75rem;
}

/* #86868b literal: Master-Wert, 4,65:1 auf #1d1d1f (Kopfkommentar) */
body.fux-relaunch .footer-links a {
    color: #86868b;
    text-decoration: none;
    font-size: 0.9375rem;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

body.fux-relaunch .footer-links a:hover,
body.fux-relaunch .footer-links a:focus-visible {
    color: var(--white, #fff);
}

body.fux-relaunch .footer-contact {
    color: #86868b;
    font-size: 0.9375rem;
    line-height: 1.7;
}

body.fux-relaunch .footer-contact strong {
    color: var(--white, #fff);
    display: block;
    margin-bottom: 0.5rem;
}

body.fux-relaunch .footer-contact a {
    color: #86868b;
    text-decoration: none;
}

body.fux-relaunch .footer-contact a:hover,
body.fux-relaunch .footer-contact a:focus-visible {
    color: var(--white, #fff);
}

body.fux-relaunch .footer-contact .icon-svg {
    width: 1em;
    height: 1em;
    margin-right: 0.5rem;
    vertical-align: -0.125em;
}

body.fux-relaunch .footer-bottom {
    margin-top: var(--space-lg, 3rem);
    padding-top: var(--space-md, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

body.fux-relaunch .footer-bottom p {
    margin: 0;
    color: #86868b;
}

body.fux-relaunch .footer-legal {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

body.fux-relaunch .footer-legal a {
    color: #86868b;
    text-decoration: none;
    font-size: 0.875rem;
    transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

body.fux-relaunch .footer-legal a:hover,
body.fux-relaunch .footer-legal a:focus-visible {
    color: var(--white, #fff);
}

/* ============================================================
   Relaunch-Standard-Inhaltsseite (RelaunchDefault.html)
   ============================================================ */

body.fux-relaunch .relaunch-default-page {
    padding: 2rem 0 var(--space-xl, 5rem);
}

body.fux-relaunch .relaunch-default-page h1 {
    font-size: var(--font-size-h1, clamp(2rem, 4vw, 3rem));
    font-weight: 700;
    color: var(--gray-primary, #1d1d1f);
    margin: 1rem 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* ============================================================
   Responsive (homepage.css/product-detail.css; ohne Bootstrap-
   Collapse — Navigation bricht um, Burger-Toggle = JS-Etappe)
   ============================================================ */

@media (max-width: 768px) {
    body.fux-relaunch {
        --space-section: 4rem;
    }

    body.fux-relaunch .container {
        padding: 0 1rem;
    }
}

/* A2 (optional, Review 2026-10-10): zwischen 992 und 1199px die
   Kopfleiste leicht verdichten (Link-Innenabstand 1rem -> 0.75rem,
   Abstaende 2rem -> 1rem), damit auch EN/FR mit drei Sprach-Pills
   einzeilig bleibt. Werte bleiben im Master-Raster (0.25rem-Stufen). */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.fux-relaunch .navbar-inner,
    body.fux-relaunch .navbar-collapse {
        gap: 1rem;
    }

    body.fux-relaunch .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    html.fux-nav-js body.fux-relaunch .nav-item.dropdown > .nav-link {
        padding-right: 0.375rem;
    }
}

/* Header-Breakpoint 991.98px = Master navbar-expand-lg (Entscheidung
   Projektleitung 2026-10-10, A11y-Review A2: zwischen 769 und 991px war
   die Desktop-Navigation dreizeilig, Header bis 215px hoch). Muss zu
   MOBILE_QUERY in relaunch-frame.js passen. Abstaende/Container oben
   bleiben bei 768px. */
/* ---- OHNE JS (N1, A11y-Re-Check 2026-10-10): bis 1199.98px ------
   Ohne Disclosure-Buttons und Burger bricht die Navigation bei 992px
   (DE/EN/FR) und FR bis ~1100px zweizeilig um (129px), der Breadcrumb-
   Abstand kennt ohne JS aber nur den 40px-Fallback (73px) -> Links
   lagen unter dem fixen Header. Bis 1199.98px deshalb statisch; ab
   1200px ist die Kopfleiste in allen drei Sprachen einzeilig (gemessen
   2026-10-10, Suchseite mit drei Sprach-Pills). */
@media (max-width: 1199.98px) {
    /* ---- OHNE JS ---------------------------------------------------
       A11y-Fix B3 (gilt nur noch ohne JS, seit A2 bis 991.98px — so
       lange bricht die Navigation um): unterhalb 768px — dem
       Breakpoint, an dem die Navbar mehrzeilig umbricht und ihre Hoehe
       unkalkulierbar wird — scrollt der Header mit statt fixiert zu
       kleben. Rechnerisch: bei 320x568px (kleinster Referenz-Viewport)
       ist die umgebrochene Navbar mit 6+ Punkten, Sprachpills und Suche
       ~200-260px hoch; fixiert verdeckte sie dauerhaft 35-46% des
       Viewports und der dahinterliegende Inhalt bliebe teils
       unerreichbar (WCAG 2.4.11). position:static gibt den gesamten
       Viewport frei; oberhalb 768px ist die Navbar einzeilig (72px =
       ~13% bei 576px Fensterhoehe) und bleibt fixiert wie im Master.
       Browser-Messung bei 320px bleibt offener Punkt (Haupt-Session).
       MIT JS ist der Header wieder fixiert (Burger, unten).
       A2/N1: gilt ohne JS jetzt bis 1199.98px (die Navigation bricht
       bis dahin mehrzeilig um, gleicher Befund wie unter 768px). */
    html:not(.fux-nav-js) body.fux-relaunch {
        /* Header scrollt mit -> kein Anker-Offset mehr noetig */
        --fux-sticky-offset: 0px;
    }

    html:not(.fux-nav-js) body.fux-relaunch .header-main {
        position: static;
        background: var(--gray-background, #fbfbfd);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    html:not(.fux-nav-js) body.fux-relaunch .breadcrumb-nav {
        margin-top: 0; /* kein fixer Header mehr zu kompensieren */
    }

}

@media (max-width: 991.98px) {
    /* ---- MIT JS: Mobile-Burger --------------------------------------
       Eingeklappt einzeilig (Logo 40px | Burger 40px) -> Header fixiert,
       Hoehe wie Desktop. Ausgeklappt scrollt NUR der Menue-Container:
       max-height = Viewport minus Kopfleiste (--fux-sticky-offset bleibt
       bei offenem Menue auf der Kopfleistenhoehe, JS) — bei 320px
       erreicht man so jeden Punkt (WCAG 1.4.10), der Fokus bleibt im
       sichtbaren Bereich, Fokus/Klick ausserhalb schliesst (2.4.11). */
    html.fux-nav-js body.fux-relaunch .navbar-inner {
        row-gap: 0;
    }

    html.fux-nav-js body.fux-relaunch .navbar-toggler {
        display: inline-flex;
    }

    html.fux-nav-js body.fux-relaunch .navbar-toggler[hidden] {
        display: none;
    }

    html.fux-nav-js body.fux-relaunch .navbar-collapse {
        display: none;
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 1rem;
        margin: 0 -1rem;
        padding: 1rem 1rem 0.5rem;
        background: var(--gray-background, #fbfbfd);
        /* A6: Padding in die max-height einrechnen (1.4.10) */
        box-sizing: border-box;
        max-height: calc(100vh - var(--fux-sticky-offset, 72px));
        max-height: calc(100dvh - var(--fux-sticky-offset, 72px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html.fux-nav-js body.fux-relaunch .navbar-toggler[aria-expanded="true"] + .navbar-collapse {
        display: flex;
    }

    html.fux-nav-js body.fux-relaunch .navbar-collapse > .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        margin: 0;
    }

    html.fux-nav-js body.fux-relaunch .nav-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    html.fux-nav-js body.fux-relaunch .nav-link {
        flex: 1 1 auto;
        margin: 0;
        padding: 0.625rem 0.75rem;
    }

    /* mobil groessere Zielflaeche fuer den Disclosure-Button */
    html.fux-nav-js body.fux-relaunch .submenu-toggle {
        width: 40px;
        height: 40px;
        margin: 0;
    }

    /* Untermenue im Fluss statt Overlay, eingerueckt */
    html.fux-nav-js body.fux-relaunch .dropdown-menu {
        position: static;
        flex: 1 1 100%;
        min-width: 0;
        margin: 0;
        padding: 0 0 0.5rem 1rem;
        border: 0;
        box-shadow: none;
        background: transparent;
        max-height: none;
        overflow: visible;
    }

    html.fux-nav-js body.fux-relaunch .nav-item.dropdown:hover::after {
        display: none;
    }

    html.fux-nav-js body.fux-relaunch .navbar-meta {
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-tertiary, #d2d2d7);
    }
}

/* Bewegung reduzieren: Verkleinern, Pfeil- und Burger-Animation ohne
   Uebergang (Zustaende bleiben, nur sofort) */
@media (prefers-reduced-motion: reduce) {
    body.fux-relaunch .header-main,
    body.fux-relaunch .navbar,
    body.fux-relaunch .submenu-toggle,
    body.fux-relaunch .submenu-toggle .icon-svg,
    body.fux-relaunch .navbar-toggler path {
        transition: none;
    }
}