/* ============================================================
   ATE Mega-Menue CSS
   ============================================================
   Top-Kategorien horizontal im Header (.cat-topnav-item) + pro Top-Cat
   ein Mega-Panel (.cat-topnav-panel) mit Spalten-Drill + Detail-Pane.
   Mobile: Drawer mit nested Akkordeon (.cat-accordion).

   Innere Panel-Styles (.cat-flyout-list, .cat-flyout-item, .cat-flyout-link,
   .cat-flyout-drill, .cat-flyout-detail, .cat-flyout-detail-cta) bleiben
   wiederverwendet vom alten Voltando-Renderer und nutzen die CI-Token-Mappings.
   ============================================================ */

/* ============================================================
   SECTION 0: Brand-Token-Mapping
   ============================================================
   Auf ATE-CI-Tokens gemappt (siehe custom.css :root). Navy bleibt der Anker,
   Magenta nur als Akzent (Border, Glow, Tint). */
.cat-topnav-item,
.cat-topnav-overlay,
.cat-topnav-panels,
.cat-topnav-panel,
.vo-drawer,
.vo-drawer-backdrop {
    --brand:        var(--ate-navy);
    --focus:        var(--ate-navy);
    --accent:       var(--ate-magenta);
    --accent-soft:  rgba(249, 11, 249, .10);
    --bod-t:        #555555;
    --bod-s:        var(--ate-navy);
    --bod-b:        #FFFFFF;
    --bod-b-l:      #F6F6F6;
    --hr:           var(--ate-grey-light);
    --hr-li:        #EEEEEE;
    --btn-rnd:      var(--ate-rnd);
    --btn-rnd-sm:   var(--ate-rnd-sm);
    --box-rnd:      var(--ate-rnd-md);
    --img-rnd:      var(--ate-rnd-img);
}

/* ============================================================
   SECTION 1: Top-Nav-Bar (Desktop)
   ============================================================
   Items sitzen innerhalb von NOVA's .navbar-nav (Bootstrap-4-Row).
   Auf Mobile (body.vo-nav-collapsed) versteckt - Drawer uebernimmt. */
.cat-topnav-item {
    list-style: none;
    position: relative;
    /* ate: Default z-index: auto. Vorher permanent 1042 - das hat jeden
       Kategorie-LI permanent ueber Bootstrap-Dropdowns (z 1000) gelegt
       (z.B. das Compare-Popup verschwand hinter dem Kategorie-Nav).
       Nur beim Hover/Open lifted das Item ueber Overlay/Panel (siehe
       Regel unten), damit die Flacker-Schleife (mouseleave -> close ->
       reopen) nicht zurueckkommt. */
}
.cat-topnav-item.is-open {
    z-index: 1032;
}
/* ate: Mockup-Redesign 07/2026 — die Topnav sitzt jetzt auf dem Navy-Header
   (chrome.css Sektion 2) und uebernimmt die Mockup-Primaer-Nav-Optik:
   helle Links, Hover als weiss-transluzente Pill statt Magenta-Text.
   Magenta bleibt Akzent im Panel (der frueher hier erwaehnte Blog-Dot ist
   07/2026 entfernt, s. Sektion weiter unten). */
.cat-topnav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .85rem;
    margin: .35rem 0;
    color: #dbe4ec;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 7px;
    transition: color .15s ease, background-color .15s ease;
}
.cat-topnav-link:focus { outline: none; }
.cat-topnav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .75);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .cat-topnav-link:hover {
        color: var(--ate-white);
        background-color: rgba(255, 255, 255, .10);
        text-decoration: none;
    }
}
.cat-topnav-item.is-open > .cat-topnav-link {
    color: var(--ate-white);
    background-color: rgba(255, 255, 255, .10);
}

/* ate: Der Magenta-Dot am Blog-Nav-Item (Mockup .blog-link .dot) ist
   07/2026 auf Wunsch entfernt — er signalisierte „hier gibt es Neues",
   ohne dass dahinter eine Ungelesen-Logik steht. Regel bewusst geloescht
   statt auskommentiert; das Markup (.ate-nav-dot) ist mit raus. */
.cat-topnav-name {
    white-space: nowrap;
}

/* ate 2026-08-24: Blog-Nav-Highlight — Kunden-Feedback Fady (PPT 21.08.,
   Folie 1: „Blog umrahmen und pinke Schrift"). Nachfolger des 07/2026
   entfernten Magenta-Dots, diesmal als expliziter Kundenwunsch: Magenta-
   Schrift + dezenter Magenta-Rahmen auf der bestehenden Pill-Geometrie.
   Kontrast #F90BF9 auf Navy #002649 ~4.7:1 — ok fuer den fetten Nav-Text.
   Markup-Marker: cat-topnav-item--blog (categories_topnav.tpl). */
.cat-topnav-item--blog > .cat-topnav-link {
    color: var(--ate-magenta);
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--ate-magenta);
}
@media (hover: hover) and (pointer: fine) {
    .cat-topnav-item--blog > .cat-topnav-link:hover {
        color: var(--ate-magenta);
        background-color: rgba(249, 11, 249, .10);
    }
}
.cat-topnav-caret {
    width: 10px;
    height: 6px;
    flex: 0 0 auto;
    opacity: .65;
    transition: transform .2s ease, opacity .15s ease;
}
.cat-topnav-item.is-open .cat-topnav-caret {
    transform: rotate(180deg);
    opacity: 1;
}
/* Mobile-State: Top-Bar-Items unsichtbar - Drawer-Akkordeon uebernimmt. */
body.vo-nav-collapsed .cat-topnav-item {
    display: none !important;
}

/* ============================================================
   SECTION 2: Top-Nav-Panels (Mega-Panel pro Top-Cat)
   ============================================================
   Container .cat-topnav-panels sitzt body-level (per JS relocated), position:fixed
   unter dem #mainNavigation (--cat-topnav-top per JS). Nur EIN Panel sichtbar
   gleichzeitig (.cat-topnav-panel.is-open). */
@media (min-width: 768px) {
    .cat-topnav-overlay {
        position: fixed;
        /* ate: NICHT top:0 - sonst liegt Overlay ueber dem Header und blockiert
           die Top-Cat-Items, was mouseleave/mouseenter-Schleife (Flackern) triggert.
           --cat-topnav-top wird vom JS auf rect.bottom des #mainNavigation gesetzt. */
        top: var(--cat-topnav-top, 0);
        right: 0; bottom: 0; left: 0;
        background: rgba(20, 30, 45, .32);
        /* ate: 1030 (frueher 1040 = Bootstrap modal-backdrop-Hoehe). Eine
           Stufe unter modal-backdrop, damit Modals sauber drueber liegen. */
        z-index: 1030;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }
    body.shw-topnav .cat-topnav-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .22s ease;
    }

    .cat-topnav-panels {
        position: fixed;
        top: var(--cat-topnav-top, 0);
        left: 0;
        right: 0;
        /* ate: 1031 (frueher 1041). Knapp ueber Overlay (1030), klar unter
           Bootstrap modal-backdrop (1040) und modal (1050). */
        z-index: 1031;
        display: block;
        pointer-events: none;
        /* ate: Responsive-Runde 07/2026 — der Panels-Container bekommt DIESELBE
           Buehne wie der Header (chrome.css §2b: max-width min(1720px,100%)),
           damit das linksbuendige Panel unter der Nav sitzt statt frei in der
           Viewport-Mitte. left/right:0 + max-width + margin:auto zentriert die
           Buehne; das Padding entspricht Bootstrap-Container + Navbar-Padding,
           sodass die Panel-Kante mit dem ersten Nav-Item fluchtet. */
        max-width: min(1720px, 100%);
        margin: 0 auto;
        padding: 0 31px;
    }
    .cat-topnav-panels[hidden] { display: none; }

    .cat-topnav-panel {
        position: relative;
        /* ate: Responsive-Runde 07/2026 — Panel war fix 1400px breit, enthielt
           initial aber nur EINE 240px-Spalte + 280px Detail-Pane: ~880px
           weisse Flaeche in der Mitte (gemessen bei 1440px Viewport).
           fit-content laesst es mit dem Inhalt wachsen; die 2-Spalten-
           Mindestbreite an .cat-flyout-lists (s.u.) verhindert, dass der
           erste Hover-Drill das Panel springen laesst. */
        width: fit-content;
        max-width: 100%;
        margin: 0;
        background: var(--bod-b);
        border-radius: 0 0 var(--box-rnd) var(--box-rnd);
        box-shadow: 0 16px 40px -8px rgba(10, 25, 45, .28);
        overflow: hidden;
        pointer-events: auto;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
        visibility: hidden;
        /* ate: 6px Hover-Bridge gegen Pixel-Luecke Header->Panel.
           Verhindert dass die Maus beim Wechsel ins Panel im "Niemandsland"
           landet und das Close-Timer feuert. */
        margin-top: -6px;
        padding-top: 6px;
        background-clip: content-box;
    }
    .cat-topnav-panel[hidden] { display: none; }
    .cat-topnav-panel.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: opacity .2s ease, transform .2s ease;
    }

    /* Panel-Innenleben: Spalten links + Detail-Pane rechts. */
    .cat-topnav-panel .cat-flyout-inner {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        max-height: calc(100vh - var(--cat-topnav-top, 80px) - 2rem);
    }
    .cat-topnav-panel .cat-flyout-lists {
        /* ate: 240 -> 280px (Responsive-Runde 07/2026). Seit die Spalten
           inhaltsbreit sind (s. .cat-flyout-list) ist das die MINDEST-, nicht
           mehr die Fixbreite: kurze Listen ("Truly", "JMO") bleiben damit
           optisch eine ordentliche Spalte statt auf Wortbreite zu schrumpfen. */
        --cat-flyout-col-w: 280px;
        /* ate 07/2026: Obergrenze fuer die jetzt inhaltsbreiten Spalten (s.
           .cat-flyout-list). 460px deckt den laengsten realen Kategorienamen ab
           ("Direct Attach & Active Optical Cables (DAC/AOC)", 47 Zeichen ≈ 390px
           inkl. Padding und Drill-Button) und laesst trotzdem keinen Ausreisser
           das Panel sprengen. */
        --cat-flyout-col-max: 460px;
        /* ate: 1 1 auto -> 0 1 auto. Mit flex-grow zog dieser Bereich die
           gesamte Panel-Restbreite an sich und liess sie leer stehen (~880px
           bei 1440px Viewport). Jetzt exakt so breit wie die tatsaechlich
           offenen Spalten — das Panel waechst beim Drill in die Sub-Ebene um
           eine Spaltenbreite nach rechts.
           Eine 2-Spalten-Mindestbreite waere die Alternative gewesen, haette
           aber bei JEDEM Oeffnen eine leere Spalte gezeigt; das Wachsen
           passiert dagegen nur beim Drill und schiebt nichts unter dem
           Mauszeiger weg (der steht dann links in der Liste). */
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: var(--hr) transparent;
    }
    .cat-topnav-panel .cat-flyout-lists::-webkit-scrollbar { height: 6px; }
    .cat-topnav-panel .cat-flyout-lists::-webkit-scrollbar-track { background: transparent; }
    .cat-topnav-panel .cat-flyout-lists::-webkit-scrollbar-thumb { background: var(--hr); border-radius: 3px; }

    .cat-topnav-panel .cat-flyout-list {
        display: none;
        /* ate 07/2026: Spalte war hart auf --cat-flyout-col-w genagelt
           (flex: 0 0 <w> + width: <w>). Weil .cat-flyout-name nowrap +
           text-overflow:ellipsis ist, schnitten laengere Kategorienamen
           grundsaetzlich ab — "Steckverbinder, Sicherungen …", "Direct Attach &
           Active Optical Cable…" —, obwohl neben dem Panel noch mehrere hundert
           Pixel frei waren (bei 1440px Viewport braucht das breiteste Panel
           ~840 von 1098 verfuegbaren Pixeln).
           Jetzt: auto-Basis, d.h. die <ul> misst ihren max-content und ist damit
           exakt so breit wie ihr laengster Eintrag (die Spalten-Ueberschrift
           zaehlt mit) — begrenzt durch min-width (alte Breite als Untergrenze,
           damit kurze Listen nicht schrumpfen) und max-width.
           Schrumpfen bleibt moeglich: .cat-flyout-lists behaelt overflow-x:auto
           (min-content 0), das Panel bleibt width:fit-content/max-width:100%.
           Reicht der Platz wirklich nicht, greifen wie bisher Ellipse und
           Horizontal-Scroll. */
        flex: 0 1 auto;
        width: auto;
        min-width: var(--cat-flyout-col-w);
        max-width: var(--cat-flyout-col-max);
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: var(--hr) transparent;
        background: var(--bod-b);
    }
    .cat-topnav-panel .cat-flyout-list::-webkit-scrollbar { width: 6px; }
    .cat-topnav-panel .cat-flyout-list::-webkit-scrollbar-track { background: transparent; }
    .cat-topnav-panel .cat-flyout-list::-webkit-scrollbar-thumb { background: var(--hr); border-radius: 3px; }

    .cat-topnav-panel .cat-flyout-list[class*="in-col-"] { display: block; }
    .cat-topnav-panel .cat-flyout-list.in-col-2,
    .cat-topnav-panel .cat-flyout-list.in-col-4,
    .cat-topnav-panel .cat-flyout-list.in-col-6 { background: #fafbfc; }
    .cat-topnav-panel .cat-flyout-list[class*="in-col-"]:not(.in-col-1) {
        animation: catTopNavColSlide .2s ease;
    }
    @keyframes catTopNavColSlide {
        from { opacity: 0; transform: translateX(-6px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* ate 07/2026: Spaltenumbruch fuer Blatt-Listen (.is-multicol).
       Gesetzt von categories_flyout_list.tpl auf depth-0-Listen, in denen KEIN
       Eintrag Unterkategorien hat — praktisch "Hersteller" mit 32 Eintraegen.
       Ohne Umbruch ist das Panel dort ein schmaler, ~1260px hoher Streifen (der
       Drill-Mechanismus hat nichts zu oeffnen), und die Detail-Pane erbt diese
       Hoehe.

       Grid statt CSS-Multicolumn: column-count fragmentiert in einem Container
       mit definierter Hoehe + overflow in Spalten AUSSERHALB der Box, die durch
       overflow-x:hidden unerreichbar waeren. Das Grid ist deterministisch —
       Zeilenzahl kommt als --cat-flyout-rows aus dem Template, grid-auto-flow:
       column fuellt spaltenweise (Leserichtung oben->unten, dann naechste
       Spalte). Die Spalten-Ueberschrift belegt Zeile 1 ueber die volle Breite,
       Eintraege fliessen ab Zeile 2. */
    .cat-topnav-panel .cat-flyout-list.is-multicol[class*="in-col-"] {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(var(--cat-flyout-rows, 12), auto);
        align-content: start;
        padding-bottom: .4rem;
    }
    /* ate: Auch die Grid-Spalten sizen nach Inhalt (minmax statt fester Breite),
       damit lange Herstellernamen wie "AKM (Asahi Kasei Microdevices)" nicht
       abschneiden. max-width deckelt die Gesamtbreite analog zur Einzelspalte. */
    .cat-topnav-panel .cat-flyout-list.is-multicol-2 {
        grid-template-columns: repeat(2, minmax(var(--cat-flyout-col-w), max-content));
        max-width: calc(var(--cat-flyout-col-max) * 2);
    }
    .cat-topnav-panel .cat-flyout-list.is-multicol-3 {
        grid-template-columns: repeat(3, minmax(var(--cat-flyout-col-w), max-content));
        max-width: calc(var(--cat-flyout-col-max) * 3);
    }
    .cat-topnav-panel .cat-flyout-list.is-multicol > .cat-flyout-col-head {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    /* ate: Die first/last-of-type-Margins der Einspalten-Liste (s.u.) wuerden im
       Grid nur den ersten bzw. letzten Eintrag INSGESAMT treffen und damit
       Spalte 1 gegen Spalte 2/3 verschieben. */
    .cat-topnav-panel .cat-flyout-list.is-multicol > .cat-flyout-item:first-of-type,
    .cat-topnav-panel .cat-flyout-list.is-multicol > .cat-flyout-item:last-of-type {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cat-topnav-panel .cat-flyout-col-head {
        list-style: none;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 1rem 1.1rem .6rem;
        margin: 0;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--bod-s);
        border-bottom: 1px solid var(--hr-li);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: var(--bod-b);
    }
    .cat-topnav-panel .cat-flyout-list.in-col-2 > .cat-flyout-col-head,
    .cat-topnav-panel .cat-flyout-list.in-col-4 > .cat-flyout-col-head,
    .cat-topnav-panel .cat-flyout-list.in-col-6 > .cat-flyout-col-head {
        background: #fafbfc;
    }

    /* Items */
    .cat-topnav-panel .cat-flyout-item {
        list-style: none;
        display: flex;
        align-items: stretch;
    }
    .cat-topnav-panel .cat-flyout-list > .cat-flyout-item:first-of-type { margin-top: .4rem; }
    .cat-topnav-panel .cat-flyout-list > .cat-flyout-item:last-of-type { margin-bottom: .4rem; }

    .cat-topnav-panel .cat-flyout-link,
    .cat-topnav-panel .cat-flyout-link:hover,
    .cat-topnav-panel .cat-flyout-link:focus,
    .cat-topnav-panel .cat-flyout-detail-cta,
    .cat-topnav-panel .cat-flyout-detail-cta:hover,
    .cat-topnav-panel .cat-flyout-detail-cta:focus {
        text-decoration: none !important;
    }
    .cat-topnav-panel .cat-flyout-detail-cta,
    .cat-topnav-panel .cat-flyout-detail-cta:visited,
    .cat-topnav-panel .cat-flyout-detail-cta:hover,
    .cat-topnav-panel .cat-flyout-detail-cta:focus,
    .cat-topnav-panel .cat-flyout-detail-cta:active {
        color: #fff;
    }

    /* ate: 07/2026 Kategoriebild-Thumbs entfernt (keine echten Bilder auf
       Prod) — Padding leicht erhoeht, damit die reinen Text-Items nicht
       gedrungen wirken. */
    .cat-topnav-panel .cat-flyout-link {
        display: flex;
        align-items: center;
        padding: .55rem 1rem;
        margin: 1px 0 1px .4rem;
        flex: 1 1 auto;
        min-width: 0;
        color: var(--bod-t);
        font-size: .9rem;
        line-height: 1.25;
        letter-spacing: -.005em;
        border-radius: var(--btn-rnd-sm);
        border-left: 3px solid transparent;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .cat-topnav-panel .cat-flyout-drill {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        margin: 1px .4rem 1px 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: var(--btn-rnd-sm);
        color: var(--bod-t);
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    @media (hover: hover) and (pointer: fine) {
        .cat-topnav-panel .cat-flyout-drill:hover {
            background: var(--accent-soft);
            color: var(--accent);
        }
    }
    .cat-topnav-panel .cat-flyout-drill:focus-visible {
        background: var(--accent-soft);
        color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent);
    }
    .cat-topnav-panel .cat-flyout-drill:focus { outline: none; }
    .cat-topnav-panel .cat-flyout-item.is-active > .cat-flyout-drill {
        color: var(--accent);
    }
    @media (hover: hover) and (pointer: fine) {
        .cat-topnav-panel .cat-flyout-item:hover > .cat-flyout-link {
            background: var(--accent-soft);
            color: var(--ate-navy);
        }
    }
    .cat-topnav-panel .cat-flyout-item.is-active > .cat-flyout-link {
        background: var(--accent-soft);
        color: var(--ate-navy);
        font-weight: 600;
        border-left-color: var(--accent);
    }

    .cat-topnav-panel .cat-flyout-name {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    /* ate: Menu-Label als kleines Badge rechts in der Zeile. */
    .cat-topnav-panel .cat-flyout-badge {
        flex: 0 0 auto;
        margin-left: .55rem;
        align-self: center;
        padding: .12rem .45rem;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: .62rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    .cat-topnav-panel .cat-flyout-chev {
        flex: 0 0 auto;
        width: 6px;
        height: 10px;
        opacity: .35;
        transition: opacity .15s ease, transform .15s ease;
    }
    @media (hover: hover) and (pointer: fine) {
        .cat-topnav-panel .cat-flyout-item:hover .cat-flyout-chev {
            opacity: .9;
            transform: translateX(2px);
        }
    }
    .cat-topnav-panel .cat-flyout-item.is-active .cat-flyout-chev { opacity: 1; }

    /* Detail-Pane */
    .cat-topnav-panel .cat-flyout-detail {
        flex: 0 0 280px;
        width: 280px;
        border-left: 1px solid var(--hr-li);
        background: var(--bod-b);
        overflow: hidden;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        min-height: 0;
        position: relative;
    }
    .cat-topnav-panel .cat-flyout-detail-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        gap: .75rem;
    }
    .cat-topnav-panel .cat-flyout-detail-empty {
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
    .cat-topnav-panel .cat-flyout-detail-hint {
        text-align: center;
        color: var(--bod-t);
        opacity: .55;
        font-size: .92rem;
        max-width: 220px;
        line-height: 1.45;
        margin: 0;
    }
    .cat-topnav-panel .cat-flyout-detail-hint-icon {
        width: 48px;
        height: 48px;
        color: var(--accent);
        opacity: .55;
        flex: 0 0 auto;
    }
    /* ate: Kategoriebild oben in der rechten Pane, nur wenn vorhanden. */
    .cat-topnav-panel .cat-flyout-detail-img {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 10;
        max-height: 160px;
        object-fit: cover;
        border-radius: 8px;
        background: #eef1f4;
    }
    .cat-topnav-panel .cat-flyout-detail-name {
        flex: 0 0 auto;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--ate-navy);
        margin: 0;
        line-height: 1.2;
        letter-spacing: -.01em;
    }
    /* ate 07/2026: Beschreibung auf 3 Zeilen geklammert.
       Vorher: flex: 1 1 auto ohne jede Hoehenbegrenzung. Der Absatz wuchs damit
       auf die volle Rest-Hoehe der Detail-Pane — und die ist per
       align-items:stretch (.cat-flyout-inner) immer so hoch wie die hoechste
       Spalte. Genau daher kam der gemeldete Unterschied: "Hersteller" (32
       Eintraege ≈ 1260px Spalte, gedeckelt auf ~700px) rollte die kompletten
       ~800 Zeichen aus, "Loesungen" (9 Eintraege ≈ 390px) blendete nach ~10
       Zeilen weg. Gleicher Code, nur andere Spaltenhoehe.
       Jetzt: feste max-height = 3 x line-height, unabhaengig von der
       Panel-Hoehe. Die Fade-Kante schrumpft entsprechend von 3.5rem auf 1.1rem
       (sonst waere die halbe Klammerung nur noch Verlauf).
       KEIN -webkit-line-clamp: das Element ist Flex-Item von
       .cat-flyout-detail-inner, und Chrome blockifiziert display:-webkit-box
       an Flex-Items zu flow-root — die Klammerung greift dort schlicht nicht
       (nachgemessen: computed display = flow-root). max-height hat das Problem
       nicht. */
    .cat-topnav-panel .cat-flyout-detail-desc {
        flex: 0 1 auto;
        min-height: 0;
        max-height: calc(3 * 1.5em);
        color: var(--bod-t);
        font-size: .9rem;
        line-height: 1.5;
        margin: 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1rem), transparent 100%);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1rem), transparent 100%);
    }
    .cat-topnav-panel .cat-flyout-detail-actions {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    .cat-topnav-panel .cat-flyout-detail-cta {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .55rem 1rem;
        border: 2px solid var(--brand);
        border-radius: var(--btn-rnd);
        font-size: .88rem;
        font-weight: 600;
        line-height: 1.2;
        background: var(--brand);
        color: #fff;
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }
    @media (hover: hover) and (pointer: fine) {
        .cat-topnav-panel .cat-flyout-detail-cta:hover {
            background: var(--brand);
            border-color: var(--accent);
            box-shadow: var(--ate-shadow-hover);
            transform: translateY(-1px);
            outline: none;
        }
    }
    .cat-topnav-panel .cat-flyout-detail-cta:focus {
        background: var(--brand);
        border-color: var(--accent);
        box-shadow: var(--ate-shadow-hover);
        outline: none;
    }

    /* Kleines Notebook: kompaktere Spalten, Detail-Pane bleibt (etwas schmaler).
       ate: Grenze 1199.98 -> 1439.98 (Responsive-Runde 07/2026). Panels oeffnen
       seit BREAKPOINT_PX 1200 nie mehr unter 1200px, die alte Regel war damit
       tot. Im Band 1200-1439 greift sie jetzt richtig: mit 280px-Spalten waeren
       3 Spalten + 280px Detail = 1120px und liefen dort in den Panel-eigenen
       Horizontal-Scroll; mit 230/240 sind es 930px und alles ist gleichzeitig
       sichtbar. */
    @media (max-width: 1439.98px) {
        .cat-topnav-panel .cat-flyout-lists {
            --cat-flyout-col-w: 230px;
            /* ate: schmalere Buehne -> auch die Obergrenze runter, sonst koennte
               eine einzelne breite Spalte die zweite aus dem Panel druecken. */
            --cat-flyout-col-max: 360px;
        }
        .cat-topnav-panel .cat-flyout-detail { flex-basis: 240px; width: 240px; }
    }
}

/* ============================================================
   SECTION 3: Mobile-Drawer-Container + Akkordeon
   ============================================================
   Drawer body-level (per JS relocated), nur unter BREAKPOINT_PX aktiv.

   ate: Fuehrender Wert ist BREAKPOINT_PX in js/voltando-megamenu.js — die
   Grenze hier UND in SECTION 4 muss ihm folgen. Beim Feinschliff 07/2026 wurde
   das JS auf 1350 gezogen, das CSS blieb auf 1299: zwischen 1299 und 1350 war
   der Burger da (body.vo-nav-collapsed), der Drawer aber per SECTION 4 auf
   display:none — und die Topnav-Items durch den Collapse unsichtbar. In dem
   Band gab es gar keine Navigation.

   Stand Responsive-Runde 07/2026: BREAKPOINT_PX = 1200, hier also 1199.98.
   Dazu gehoert das dritte Band in chrome.css §2b (992-1199: Burger sichtbar,
   #mainNavigation aus, Suche fuellt den Platz). */
@media (max-width: 1199.98px) {
    .vo-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1070;
        width: min(22rem, 88vw);
        height: 100vh;
        background: #fff;
        color: var(--bod-s);
        font-family: inherit;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 12px 0 40px rgba(10, 30, 55, .28);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .26s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .26s;
    }
    body.shw-sb .vo-drawer {
        transform: translateX(0);
        visibility: visible;
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    .vo-drawer-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 0 .85rem;
        height: 72px;
        background: #fff;
        border-bottom: 1px solid var(--hr-li);
    }
    .vo-drawer-brand {
        flex: 1 1 auto;
        display: inline-flex;
        align-items: center;
        color: var(--ate-navy);
        text-decoration: none;
        min-width: 0;
        overflow: hidden;
    }
    .vo-drawer-brand-name {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ate-navy);
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vo-drawer-close {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        color: var(--bod-t);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 999px;
        transition: background .15s ease, color .15s ease;
    }
    .vo-drawer-close:focus {
        background: var(--accent-soft);
        color: var(--accent);
        outline: none;
    }
    @media (hover: hover) and (pointer: fine) {
        .vo-drawer-close:hover {
            background: var(--accent-soft);
            color: var(--accent);
        }
    }
    .vo-drawer-close svg { width: 14px; height: 14px; }

    .vo-drawer-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        padding: .5rem 0 1rem;
    }

    /* ----- Akkordeon ----- */
    .cat-accordion {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .cat-accordion-item {
        list-style: none;
        position: relative;
    }
    .cat-accordion-link,
    .cat-accordion-toggle {
        display: flex;
        align-items: center;
        gap: .7rem;
        width: 100%;
        padding: .6rem .85rem;
        min-height: 52px;
        background: transparent;
        border: 0;
        text-align: left;
        color: var(--bod-s);
        font-family: inherit;
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.25;
        text-decoration: none;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }
    .cat-accordion-link:focus,
    .cat-accordion-toggle:focus {
        outline: none;
        background: var(--accent-soft);
        color: var(--ate-navy);
    }
    @media (hover: hover) and (pointer: fine) {
        .cat-accordion-link:hover,
        .cat-accordion-toggle:hover {
            background: var(--accent-soft);
            color: var(--ate-navy);
        }
    }
    .cat-accordion-toggle[aria-expanded="true"] {
        background: var(--accent-soft);
        color: var(--ate-navy);
        font-weight: 600;
    }
    .cat-accordion-toggle[aria-expanded="true"] .cat-accordion-chev {
        transform: rotate(180deg);
        color: var(--accent);
        opacity: 1;
    }

    /* ate: 07/2026 .cat-accordion-thumb entfernt (keine Kategoriebilder). */
    .cat-accordion-name {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .cat-accordion-chev {
        flex: 0 0 auto;
        width: 10px;
        height: 6px;
        color: var(--bod-t);
        opacity: .55;
        transition: transform .2s ease, color .15s ease, opacity .15s ease;
    }

    /* Children-Wrapper: hidden via [hidden]-Attribut, kein max-height-Trick noetig. */
    .cat-accordion-children-wrap[hidden] { display: none; }
    .cat-accordion-children-wrap {
        background: #fafbfc;
        border-top: 1px solid var(--hr-li);
        border-bottom: 1px solid var(--hr-li);
    }

    /* Tieferer Indent pro Ebene */
    .cat-accordion--depth-1 .cat-accordion-link,
    .cat-accordion--depth-1 .cat-accordion-toggle { padding-left: 1.85rem; }
    .cat-accordion--depth-2 .cat-accordion-link,
    .cat-accordion--depth-2 .cat-accordion-toggle { padding-left: 2.85rem; }
    .cat-accordion--depth-3 .cat-accordion-link,
    .cat-accordion--depth-3 .cat-accordion-toggle { padding-left: 3.85rem; }
    .cat-accordion--depth-4 .cat-accordion-link,
    .cat-accordion--depth-4 .cat-accordion-toggle { padding-left: 4.85rem; font-size: .88rem; }

    /* "Alle in X anzeigen"-Item */
    .cat-accordion-item--all .cat-accordion-link--all {
        font-style: italic;
        color: var(--accent);
        font-weight: 600;
    }
    .cat-accordion-item--all .cat-accordion-link--all .cat-accordion-name {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    /* ----- Einzelner Nav-Link auf Akkordeon-Ebene (z.B. "Blog") -----
       ate: Gleiche Metrik/Farben wie .cat-accordion-link, damit sich das Item
       nahtlos an die Kategorien anschliesst. Eigene Klasse statt Reuse, weil
       .cat-accordion-* an die Akkordeon-Struktur (ul > li) gebunden ist. */
    .vo-drawer-navlink {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .6rem .85rem;
        min-height: 52px;
        color: var(--bod-s);
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.25;
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }
    .vo-drawer-navlink:focus {
        outline: none;
        background: var(--accent-soft);
        color: var(--ate-navy);
    }
    @media (hover: hover) and (pointer: fine) {
        .vo-drawer-navlink:hover {
            background: var(--accent-soft);
            color: var(--ate-navy);
            text-decoration: none;
        }
    }
    /* ate: Die Drawer-Regel fuer den Magenta-Dot ist 07/2026 mit dem Dot
       selbst entfernt (s. SECTION 1). */

    /* ----- Linkgruppen ----- */
    /* ate: Ueberschrift ueber der Service-Linkliste. Traegt die Trennlinie,
       damit sie nicht doppelt mit der .vo-drawer-linklist-Border erscheint. */
    .vo-drawer-section-title {
        margin: .5rem 0 0;
        padding: .9rem 1rem .35rem;
        border-top: 1px solid var(--hr-li);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--bod-t);
    }
    /* ate: Die Regel `.vo-drawer-section-title + .vo-drawer-linklist
       { border-top: 0 }` ist in Runde 2 entfallen — sie existierte nur, damit
       die Trennlinie der Liste nicht doppelt mit der des Titels erscheint.
       Die Liste hat jetzt gar keine mehr (s.u.). */

    /* ate: Runde 2, 07/2026 — Service-Links (Musteranfrage, Newsroom, Events)
       sind typografisch mit den Kategorien und den Megamenue-Items (Kontakt,
       Blog) vereinheitlicht. Vorher (nachgemessen): Gewicht 400 statt 500,
       padding-left 16px statt 13.6px, min-height 44px statt 52px — sie lasen
       sich dadurch als zweitrangige Fussnote statt als Fortsetzung derselben
       Liste. Metrik ist jetzt 1:1 die von .cat-accordion-link.

       border-top ebenfalls raus: im Drawer soll es zwischen den Nav-Eintraegen
       KEINE Trenner geben. Die einzigen beiden Linien sitzen bewusst um den
       Kontaktblock — .vo-drawer-contact (ueber der Telefonnummer) und
       .vo-drawer-iconrow (unter der Mailadresse). */
    .vo-drawer-linklist {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .vo-drawer-linklist > li > a {
        /* flex + align-items wie .cat-accordion-link — sonst klebt der Text bei
           52px Zeilenhoehe oben statt mittig. */
        display: flex;
        align-items: center;
        padding: .6rem .85rem;
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.25;
        color: var(--bod-s);
        text-decoration: none;
        min-height: 52px;
    }
    .vo-drawer-linklist > li > a:focus {
        color: var(--accent);
        background: var(--accent-soft);
    }
    @media (hover: hover) and (pointer: fine) {
        .vo-drawer-linklist > li > a:hover {
            color: var(--accent);
            background: var(--accent-soft);
        }
    }
    /* ate: Externe Ziele (Newsroom/Events) kennzeichnen — im Drawer fehlt der
       Kontext der Utility-Bar, der Pfeil macht den Sprung nach draussen sichtbar. */
    .vo-drawer-linklist > li > a[target="_blank"]::after {
        content: "↗";
        margin-left: .35rem;
        font-size: .8em;
        opacity: .55;
    }

    /* ----- Kontaktzeile (Telefon + E-Mail) -----
       ate: Beide stehen mobil sonst nirgends — die Utility-Bar zeigt unter
       840px nur das Telefon, die E-Mail faellt per .ate-util-hide-m weg. */
    .vo-drawer-contact {
        margin-top: .25rem;
        padding: .5rem 0 0;
        border-top: 1px solid var(--hr-li);
    }
    /* ate: Runde 2 — padding-left 1rem -> .85rem, damit die Kontaktzeile auf
       derselben linken Kante steht wie Kategorien, Nav-Items und Service-Links
       darueber. */
    .vo-drawer-contact a {
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 44px;
        padding: .5rem .85rem;
        font-size: .95rem;
        color: var(--bod-s);
        text-decoration: none;
        word-break: break-word;
    }
    /* ate: Icons bewusst NICHT in --accent (Magenta): direkt darueber sitzt
       schon der Blog-Dot, zwei Signalflaechen auf engem Raum ziehen mehr
       Aufmerksamkeit als die Telefonnummer selbst. CI-Briefing: Magenta bleibt
       dezenter Akzent. Beim Hover faerbt die Regel unten den ganzen Link. */
    .vo-drawer-contact a i {
        flex: 0 0 auto;
        width: 1rem;
        text-align: center;
        color: var(--bod-t);
    }
    .vo-drawer-contact a:focus {
        color: var(--accent);
        background: var(--accent-soft);
        outline: none;
    }
    @media (hover: hover) and (pointer: fine) {
        .vo-drawer-contact a:hover {
            color: var(--accent);
            background: var(--accent-soft);
        }
    }
    .vo-drawer-contact .vo-drawer-contact-tel {
        font-weight: 600;
    }

    /* ----- Account-Icons-Reihe ----- */
    .vo-drawer-iconrow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: .5rem;
        padding: 1.25rem 1rem 1rem;
        border-top: 1px solid var(--hr-li);
        margin-top: .5rem;
    }
    .vo-drawer-iconbtn {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: var(--bod-b-l);
        border-radius: var(--box-rnd);
        color: var(--bod-s);
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
    }
    .vo-drawer-iconbtn:focus {
        background: var(--accent-soft);
        color: var(--accent);
        outline: none;
    }
    @media (hover: hover) and (pointer: fine) {
        .vo-drawer-iconbtn:hover {
            background: var(--accent-soft);
            color: var(--accent);
        }
    }
    .vo-drawer-iconbtn-ic {
        position: relative;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    .vo-drawer-iconbtn-ic i.fas,
    .vo-drawer-iconbtn-ic i.far {
        font-size: 18px;
        line-height: 1;
    }
    .vo-drawer-iconbtn-badge {
        position: absolute;
        top: -.35rem;
        right: -.55rem;
        min-width: 1.05rem;
        height: 1.05rem;
        padding: 0 .3rem;
        background: var(--accent);
        color: #fff;
        border-radius: 999px;
        font-size: .6rem;
        font-weight: 700;
        line-height: 1.05rem;
        text-align: center;
        font-style: normal;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .vo-drawer-iconbtn-badge em { font-style: normal; }

    /* Backdrop */
    .vo-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 35, .4);
        z-index: 1065;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    body.shw-sb .vo-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.shw-sb { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
        .vo-drawer { transition: visibility 0s; }
        .vo-drawer-backdrop { transition: none; }
        .cat-accordion-chev { transition: none; }
    }
}

/* ============================================================
   SECTION 4: Desktop-Sicherung (Drawer auf Desktop hidden)
   ============================================================
   ate: Drawer wird per JS immer nach <body> relocated - auf Desktop (>= 1200px)
   greifen die @media-Regeln nicht und der Drawer waere als ungestyltes <div> am
   Body-Ende sichtbar. Grenze muss zu BREAKPOINT_PX (js/voltando-megamenu.js)
   und zur max-width in SECTION 3 passen. */
@media (min-width: 1200px) {
    .vo-drawer,
    .vo-drawer-backdrop {
        display: none !important;
    }
}