/* ==========================================================================
   menuBuilder by techNEO – Basis-Stylesheet (gilt für ALLE Themes)
   Reset, Layout, Dropdown-Grundmechanik, Flyout, Badges, Mobilverhalten
   ========================================================================== */

/* Akzentfarbe: Fallback, falls kein Inline-Style auf .tn-mb-nav gesetzt ist */
.tn-mb-nav {
    --tn-mb-accent: #0b6aa2;
}

/* --------------------------------------------------------------------------
   Defensiver Reset (Bootstrap-4 / NOVA-Umfeld)
   -------------------------------------------------------------------------- */
.tn-mb-nav,
.tn-mb-nav * {
    box-sizing: border-box;
}

.tn-mb-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tn-mb-nav li {
    margin: 0;
    padding: 0;
}

.tn-mb-nav {
    position: relative;
    display: block;
    font-size: 15px;
    line-height: 1.4;
    /* Erst nach exakter Ausrichtung (JS) sichtbar -> kein Sprung. Failsafe nach 1.2s. */
    visibility: hidden;
    animation: tn-mb-navreveal 0s linear 1.2s forwards;
}
.tn-mb-nav.tn-mb-ready { visibility: visible; animation: none; }
@keyframes tn-mb-navreveal { to { visibility: visible; } }

/* --------------------------------------------------------------------------
   Top-Level-Leiste (horizontal, flex)
   Button-Höhe via --tn-mb-h (JS): Unterkante = Header-Boden, Text = Suchmitte
   -------------------------------------------------------------------------- */
.tn-mb-menu.tn-mb-level-0 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
}
.tn-mb-menu.tn-mb-level-0 > .tn-mb-item {
    display: flex;
}
.tn-mb-menu.tn-mb-level-0 > .tn-mb-item > .tn-mb-link {
    min-height: var(--tn-mb-h, auto);
}

.tn-mb-item {
    position: relative;
}

/* Links / Nicht-Links einheitlich */
.tn-mb-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tn-mb-link .fas,
.tn-mb-link .far,
.tn-mb-link .fab,
.tn-mb-link i {
    flex: 0 0 auto;
}

/* Nicht klickbare Überschriften */
.tn-mb-nolink {
    cursor: default;
}

/* --------------------------------------------------------------------------
   Badge / Pill
   -------------------------------------------------------------------------- */
.tn-mb-badge {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
    background: var(--tn-mb-accent);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Dropdown-Grundmechanik (Desktop)
   Standard versteckt via opacity/visibility, sichtbar bei Hover/Fokus/Open
   -------------------------------------------------------------------------- */
.tn-mb-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 220px;
    max-width: 90vw;
    /* Selbsttragende Grunddarstellung, damit das Panel IMMER lesbar ist –
       auch wenn ein Theme-CSS nicht (rechtzeitig) greift. Themes überschreiben das. */
    background: #fff;
    color: #222;
    border: 1px solid rgba(15, 23, 42, .1);
    /* Standard eckig: eine Rundung kommt ausschliesslich aus dem Panel-Style,
       sonst waere ein frisch angelegtes Panel rund und liesse sich erst nach
       einmaligem Speichern eckig stellen. */
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
    pointer-events: none;
}

/* Dropdown-Einträge: lesbare Abstände + dezenter Hover (Basis-Fallback) */
.tn-mb-dropdown .tn-mb-link {
    padding: 8px 18px;
    color: #222;
    white-space: normal;
}
/* Nur klickbare Punkte bekommen Hover – Überschriften (.tn-mb-nolink) nicht.

   Die Flaeche liegt auf der KACHEL, nicht auf dem Link: der eingestellte
   Innenabstand gehoert zum Element und soll mit hervorgehoben werden. Lag die
   Farbe auf dem Link, blieben die Randstreifen ungefaerbt und ein Innenabstand
   war beim Ueberfahren nicht zu erkennen.
   :has() prueft, ob die Kachel einen echten Link traegt – dieselbe Bedingung
   wie zuvor :not(.tn-mb-nolink), nur eine Ebene hoeher. */
.tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):hover,
.tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):focus-within {
    background: rgba(11, 106, 162, .08);
}

/* Individuelle Farben aus dem Layout-Tab (CSS-Variablen auf dem Punkt).
   !important ist hier noetig: die Themes setzen Farben DIREKT auf .tn-mb-link,
   und eine geerbte Farbe vom <li> verliert gegen jede direkte Regel. */
.tn-mb-nav .tn-mb-textcol > .tn-mb-link {
    color: var(--tn-mb-fg) !important;
}
.tn-mb-nav .tn-mb-bgcol {
    background: var(--tn-mb-bg) !important;
}
/* Ausgeloest von der Kachel, damit die Textfarbe auch dann wechselt, wenn die
   Maus im Innenabstand steht – sonst faerbte sich dort nur der Hintergrund. */
.tn-mb-hovertext:hover > .tn-mb-link,
.tn-mb-hovertext.tn-mb-item:focus-within > .tn-mb-link {
    color: var(--tn-mb-hc) !important;
}
/* !important bleibt noetig: die eigene Hintergrundfarbe der Kachel
   (.tn-mb-bgcol) setzt ihrerseits !important. Die drei Klassen hier gewinnen
   ueber deren zwei. */
.tn-mb-nav .tn-mb-hoverbg:hover,
.tn-mb-nav .tn-mb-hoverbg:focus-within {
    background: var(--tn-mb-hbg) !important;
}
/* --------------------------------------------------------------------------
   Textausrichtung aus dem Layout-Tab (tn-mb-al-left|center|right)
   .tn-mb-link ist ein Flex-Container -> text-align allein wirkt dort nicht,
   die Ausrichtung muss ueber justify-content kommen. Textbloecke (Freitext,
   Beschreibung) und Bilder folgen ueber text-align bzw. justify-items.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-al-left    { text-align: left; }
.tn-mb-nav .tn-mb-al-center  { text-align: center; }
.tn-mb-nav .tn-mb-al-right   { text-align: right; }
.tn-mb-nav .tn-mb-al-left > .tn-mb-link   { justify-content: flex-start; }
.tn-mb-nav .tn-mb-al-center > .tn-mb-link { justify-content: center; }
.tn-mb-nav .tn-mb-al-right > .tn-mb-link  { justify-content: flex-end; }
/* Ueberschriften im Mega-Theme sind display:block -> text-align greift dort direkt */
.tn-mb-nav .tn-mb-al-center > .tn-mb-link,
.tn-mb-nav .tn-mb-al-center .tn-mb-text-body,
.tn-mb-nav .tn-mb-al-center .tn-mb-text-title { text-align: center; }
.tn-mb-nav .tn-mb-al-right > .tn-mb-link,
.tn-mb-nav .tn-mb-al-right .tn-mb-text-body,
.tn-mb-nav .tn-mb-al-right .tn-mb-text-title { text-align: right; }

/* Schriftschnitt aus dem Layout-Tab. !important, weil die Themes font-weight
   und text-decoration direkt auf .tn-mb-link setzen (z. B. mega: 600/700). */
/* .tn-mb-text-title und .tn-mb-container-label muessen ausdruecklich mit:
   beide tragen eine eigene font-weight-Regel (700 bzw. 600), die jede
   Vererbung schlaegt. Ohne sie blieben der Titel eines Beschreibungs-Elements
   und die Beschriftung eines Containers vom Textstil unberuehrt. */
.tn-mb-nav .tn-mb-bold,
.tn-mb-nav .tn-mb-bold > .tn-mb-link,
.tn-mb-nav .tn-mb-bold .tn-mb-text-body,
.tn-mb-nav .tn-mb-bold .tn-mb-text-title,
.tn-mb-nav .tn-mb-bold .tn-mb-container-label { font-weight: 700 !important; }
.tn-mb-nav .tn-mb-italic,
.tn-mb-nav .tn-mb-italic > .tn-mb-link,
.tn-mb-nav .tn-mb-italic .tn-mb-text-body,
.tn-mb-nav .tn-mb-italic .tn-mb-text-title,
.tn-mb-nav .tn-mb-italic .tn-mb-container-label { font-style: italic !important; }
.tn-mb-nav .tn-mb-underline > .tn-mb-link,
.tn-mb-nav .tn-mb-underline .tn-mb-text-body,
.tn-mb-nav .tn-mb-underline .tn-mb-text-title,
.tn-mb-nav .tn-mb-underline .tn-mb-container-label { text-decoration: underline !important; }

/* Hover-Rahmenfarbe (Rahmen selbst liegt inline auf dem <li>) */
.tn-mb-nav .tn-mb-hoverborder:hover,
.tn-mb-nav .tn-mb-hoverborder:focus-within {
    border-color: var(--tn-mb-hbc) !important;
}

/* Öffnen bei Hover, Tastatur-Fokus (focus-within) oder JS-Klasse */
.tn-mb-item:hover > .tn-mb-dropdown,
.tn-mb-item:focus-within > .tn-mb-dropdown,
.tn-mb-item.tn-mb-open > .tn-mb-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Top-Level-Dropdown per JS aus dem (evtl. overflow:hidden) Header befreien:
   fixed relativ zum Viewport -> wird nicht mehr abgeschnitten. Position setzt JS. */
.tn-mb-dropdown.tn-mb-fixed {
    position: fixed;
    /* Kein Scrollbalken im Menü – weder waagerecht noch senkrecht. Die Panel-Breite
       wird serverseitig exakt aus dem Raster berechnet, die Höhe ergibt sich aus dem
       Inhalt (JS setzt keine max-height mehr). */
    overflow: visible;
}

.tn-mb-submenu {
    position: relative;
}

/* --------------------------------------------------------------------------
   Mosaik-Raster: Mega-Menü-Inhalt exakt wie im Builder (12 Spalten)
   Nur aktiv, wenn der Renderer .tn-mb-mosaic setzt (Kinder wurden angeordnet)
   -------------------------------------------------------------------------- */
.tn-mb-dropdown-mosaic {
    padding: 0 !important; /* Padding liegt auf dem Raster, unabhängig vom Theme */
}
/* 12-Spalten-Raster – EXAKT wie im Builder. Jede Kachel wird per Inline-Style
   grid-column:(gx+1)/span gw und grid-row:(gy+1)/span gh platziert. Dadurch behält
   jedes Element seine eigene Breite (Überschrift gw=8 ≠ Untermenü gw=6). */
.tn-mb-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, 11px); /* inline zusätzlich gesetzt */
    grid-auto-rows: minmax(7px, auto);               /* 7px = Builder-Zeilenhöhe (.mb_mosaic) als MINIMUM.
                                                        Passt ein Inhalt (z. B. Freitext) nicht in die
                                                        gezogene Höhe, waechst seine Zeile nach unten,
                                                        statt den Text abzuschneiden. Voraussetzung dafuer,
                                                        dass die Positionen trotzdem stimmen: Rasterluecke
                                                        exakt 6px (siehe gap-Regel unten) und keine
                                                        Theme-Paddings in den Kacheln. */
    justify-content: start;
    align-items: stretch;                            /* Kachel füllt ihre Zelle (gh wirkt) – wie im Builder */
    align-content: start;
    gap: 6px;
    /* KEIN Innenabstand als Standard: Kacheln sollen bis an den Rasterrand
       geschoben werden koennen, und derselbe Rand gilt im Shop. Der sichtbare
       Abstand im Builder ist reines Editor-Chrom (.mb_dropdown, Backend-only).
       Ein im Panel-Editor gesetzter Innenabstand wird weiterhin inline gesetzt. */
    padding: 0;
    list-style: none;
    margin: 0;
}
.tn-mb-mosaic > .tn-mb-item {
    min-width: 0;
    margin: 0;
    box-sizing: border-box; /* ein eingestellter Rahmen sprengt die Rasterzelle nicht */
}

/* --------------------------------------------------------------------------
   Mosaik = reine Raster-Geometrie. Theme-CSS (mega/classic/minimal) wird
   NACH dieser Datei geladen und würde mit eigenen Paddings/Margins/Spalten
   die im Builder gesetzten Positionen verschieben. Deshalb hier neutralisieren.
   Spezifität bewusst hoch (4 Klassen), damit die Themes nicht gewinnen.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-dropdown-mosaic > .tn-mb-mosaic {
    column-count: auto;   /* mega setzt column-count:3 auf .tn-mb-level-1 */
    /* Rasterlücke ist eine Konstante des Builders (MOSAIC_GAP=3). Ein Theme darf
       sie nie überschreiben: bei einem Grid ist column-gap die Spaltenlücke,
       30px statt 3px verschiebt jede Kachel und schiebt rechte aus dem Panel. */
    gap: 3px !important;
}
.tn-mb-nav .tn-mb-dropdown-mosaic > .tn-mb-mosaic > .tn-mb-item {
    margin: 0;            /* mega: margin-bottom:4px auf Level-1-Punkten */
    break-inside: auto;
}
/* Innenabstand der Kachel = Builder-Kachel (.mb_tile: 6px 10px) */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic .tn-mb-link {
    /* Kein festes Polster: die Beschriftung steht an der Kante ihrer Kachel.
       Abstand kommt aus dem Layout-Tab des Elements (Innenabstand) – so
       bestimmt der Builder die Darstellung, nicht das Stylesheet. */
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}
/* Der Link fuellt die Kachel – Hover-/Klickflaeche = Kachel, wie im Builder,
   und der Text steht damit ueber die volle Kachelhoehe mittig (align-items:
   center weiter oben).

   Frueher galt das NUR fuer Kacheln ohne Unterpunkte. Folge: Sobald eine
   Kachel ein Unterpanel bekam, war ihr Link nur zeilenhoch und der Text
   sprang nach oben – ein sichtbarer Unterschied zwischen sonst gleichen
   Kacheln. Die Einschraenkung war unnoetig: Das Unterpanel ist absolut
   positioniert und liegt ausserhalb des Flusses, der Link kann die Kachel
   also gefahrlos ausfuellen. */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-item > .tn-mb-link {
    height: 100%;
}
/* Überschrift im Mosaik: kein zusätzlicher Aussenabstand (mega: margin-bottom:4px) */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic .tn-mb-heading > .tn-mb-link {
    margin: 0;
    padding: 0;          /* Abstand kommt aus dem Layout-Tab, nicht vom Stylesheet */
}
/* Bild-Kachel: füllt ihre Rasterzelle (Breite UND Höhe), damit sie die
   Nachbarspalte nicht streckt – wie die gezogene Kachel im Builder.
   Das <img> liegt ABSOLUT in der Kachel: dadurch geht seine Eigengröße
   (Produktbilder sind oft 800–1200px breit) NIE ins Layout ein und kann das
   Raster nicht sprengen – Ursache des horizontalen Scrollbalkens im Panel. */
@media (min-width: 992px) {
    .tn-mb-mosaic > .tn-mb-image {
        align-self: stretch;
        position: relative;
        overflow: hidden;
    }
    .tn-mb-mosaic > .tn-mb-image,
    .tn-mb-mosaic > .tn-mb-image > a {
        display: block;
        width: 100%;
        height: 100%;
        /* Rundung durchreichen: <li> (Element-Einstellung) -> <a> -> <img> */
        border-radius: inherit;
    }
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image > img,
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image > a > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
        /* Rundung NICHT fest vorgeben: sie kommt aus den Element-Einstellungen
           (border-radius auf dem <li>). 0 muss auch wirklich eckig sein. */
        border-radius: inherit;
        display: block;
    }
}
/* Mobil ist das Raster aufgehoben: das Bild liegt normal im Fluss und darf
   nie breiter als der Bildschirm werden. */
@media (max-width: 991.98px) {
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image > img,
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image > a > img {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: inherit;
    }
}
/* Bild ausserhalb des Mosaiks (einfache Dropdown-Liste): nie breiter als das Panel */
.tn-mb-nav .tn-mb-img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Container (cType container): reine Gestaltungsflaeche aus dem Layout-Tab
   (Rahmen, Abstaende, Farben, Ecken, Ausrichtung). Die Stapelreihenfolge kommt
   wie bei jedem anderen Element aus dem Builder (zuletzt angefasst = oben).
   -------------------------------------------------------------------------- */
/* Container ohne eigene Gestaltung: dezente Flaeche, damit er ueberhaupt zu
   sehen ist. Die Markierung setzt der Renderer NUR, solange weder Hintergrund
   noch Rahmen, Rundung oder Schatten eingestellt sind – die eigene Einstellung
   steht danach allein. */
.tn-mb-nav .tn-mb-container-plain {
    /* Deutlich sichtbar, aber neutral: 4 % Schwarz waren auf weissem Panel
       praktisch nicht zu erkennen. Dieses Grau entspricht dem, was Container
       ueblicherweise eingestellt bekommen. */
    background: #f1f2f4;
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    box-sizing: border-box;
}

.tn-mb-nav .tn-mb-container {
    min-width: 0;
    /* KEIN overflow:hidden. Der Container ist ein Panel im Panel – klappt eine
       Kategorie darin ihr Untermenue auf, ragt dieses ueber den Container
       hinaus und wurde hier abgeschnitten. Eine Rundung des Containers
       beschneidet ihren Inhalt dadurch nicht mehr; das ist der Preis dafuer,
       dass Untermenues sichtbar bleiben. */
    overflow: visible;
}
/* Der Container ist ein Panel IM Panel: seine Kinder liegen sichtbar darin,
   sie klappen nicht als Flyout auf. Deshalb hier zurueck auf den Fluss.
   Die Auswahl muss staerker sein als die Flyout-Regeln weiter unten
   (.tn-mb-mosaic > .tn-mb-item > .tn-mb-dropdown) und die des Mega-Themes –
   sonst sass der Containerinhalt rechts NEBEN dem Container und war durch
   dessen overflow:hidden unsichtbar. */
.tn-mb-nav .tn-mb-mosaic > .tn-mb-item.tn-mb-container > .tn-mb-dropdown {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    max-width: none;
    z-index: auto;
}
/* Stapelreihenfolge der Kacheln: Grundstufe 1, darueber die im Builder
   gesetzte Reihenfolge (--tn-mb-z). Klappt eine Kachel ihr Untermenue auf,
   muss sie ueber ALLE Nachbarn – sonst verschwindet das Flyout dahinter:
   jede Kachel ist durch position+z-index ein eigener Stapelkontext, ein hoher
   z-index INNERHALB der Kachel hilft dagegen nicht. */
.tn-mb-mosaic > .tn-mb-item { z-index: var(--tn-mb-z, 1); }
/* Nach vorn kommt NUR, wer auch etwas aufklappt. Sonst wuerde jede Kachel
   beim Ueberfahren ihre Nachbarn ueberdecken – bei Bildern besonders auffaellig,
   weil sie gross sind und dann ueber allem liegen. */
.tn-mb-mosaic > .tn-mb-item.tn-mb-has-children:hover,
.tn-mb-mosaic > .tn-mb-item.tn-mb-has-children:focus-within,
.tn-mb-mosaic > .tn-mb-item.tn-mb-open {
    z-index: 9999;
}
.tn-mb-nav .tn-mb-container-label {
    padding: 6px 10px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Text- und Freitext-Kacheln (cType text / html)
   Innenabstand wie eine Builder-Kachel; der Inhalt bricht um und darf die
   Kachel nach unten wachsen lassen (grid-auto-rows: minmax(14px, auto)).
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-text,
.tn-mb-nav .tn-mb-html {
    padding: 0;          /* Abstand kommt aus dem Layout-Tab, nicht vom Stylesheet */
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.tn-mb-nav .tn-mb-text-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.tn-mb-nav .tn-mb-text-body {
    font-size: 14px;
    line-height: 1.45;
}
/* TinyMCE-Inhalt bändigen: keine ausufernden Aussenabstände, nichts läuft raus */
.tn-mb-nav .tn-mb-text-body > *:first-child { margin-top: 0; }
.tn-mb-nav .tn-mb-text-body > *:last-child  { margin-bottom: 0; }
.tn-mb-nav .tn-mb-text-body p               { margin: 0 0 6px; }
.tn-mb-nav .tn-mb-text-body ul,
.tn-mb-nav .tn-mb-text-body ol              { margin: 0 0 6px; padding-left: 18px; }
.tn-mb-nav .tn-mb-text-body img             { max-width: 100%; height: auto; }
/* Unterpunkte einer Kachel: eigenes Panel, das PER HOVER rechts neben der
   Kachel aufklappt (Panel im Panel). Frueher wurden sie hier inline gestapelt
   (position:static) – dadurch war eine zweite Mega-Menue-Ebene nicht moeglich. */
.tn-mb-mosaic > .tn-mb-item > .tn-mb-dropdown {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10000;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}
/* Reicht das Unterpanel rechts aus dem Bild, klappt es nach links auf */
/* Auf Mobil: Raster aufheben -> alles einspaltig untereinander */
@media (max-width: 991.98px) {
    /* Falls eine fixe Positionierung vom Desktop hängengeblieben ist: aufheben (sonst kaputtes Accordion) */
    .tn-mb-dropdown.tn-mb-fixed {
        position: static;
        top: auto !important;
        left: auto !important;
        max-height: none !important;
        overflow: visible;
    }
    .tn-mb-dropdown-mosaic {
        /* Panelbreite steht als Inline-Style am Element (z. B. 571px) – nur
           mit !important zu ueberstimmen, sonst schiebt sie den Bildschirm
           auf und es entsteht waagerechtes Scrollen. */
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    .tn-mb-mosaic {
        min-height: 0 !important;
    }
    /* Mobil gilt die zweite Anordnung aus dem Builder: dasselbe Raster, aber
       28 Spalten, die sich die Bildschirmbreite teilen. Dadurch bleibt die
       Anordnung auf jedem Geraet proportional gleich.
       Die Spaltenzahl MUSS zu MenuRenderer::GRID_MOBILE_COLS und MOBILE_COLS
       im Builder passen. */
    /* Ohne gepflegte Mobil-Anordnung: alles untereinander (wie bisher). */
    .tn-mb-mosaic {
        display: block;
        padding: 8px 12px;
    }
    .tn-mb-mosaic > .tn-mb-item {
        grid-column: auto !important;
        grid-row: auto !important;
        margin-bottom: 8px;
    }
    /* Mit gepflegter Mobil-Anordnung (Klasse vom Renderer): dasselbe Raster wie
       im Builder – 28 Spalten, die sich die Bildschirmbreite teilen, damit die
       Anordnung auf jedem Geraet proportional gleich bleibt.
       Die Spaltenzahl MUSS zu MenuRenderer::GRID_MOBILE_COLS und MOBILE_COLS
       im Builder passen. */
    .tn-mb-mosaic.tn-mb-mgrid {
        display: grid;
        grid-template-columns: repeat(28, minmax(0, 1fr));
        padding: 8px 10px;
    }
    .tn-mb-mosaic.tn-mb-mgrid > .tn-mb-item {
        grid-column: var(--tn-mb-mx, auto) / span var(--tn-mb-mw, 28) !important;
        grid-row: var(--tn-mb-my, auto) / span var(--tn-mb-mh, 1) !important;
        margin-bottom: 0;
    }
    /* Mobil kein Raster -> Zeilenumbruch statt Ellipsis (Gegenstück zu den
       Mosaik-Overrides oben, gleiche Spezifität nötig) */
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic .tn-mb-link {
        white-space: normal;
        overflow: visible;
        padding: 0;
    }
    .tn-mb-nav .tn-mb-dropdown-mosaic > .tn-mb-mosaic > .tn-mb-item {
        margin-bottom: 8px;
    }
}

/* --------------------------------------------------------------------------
   Flyout rechts für tiefere Ebenen (Level 1 und tiefer)
   -------------------------------------------------------------------------- */
.tn-mb-submenu .tn-mb-item > .tn-mb-dropdown {
    top: 0;
    left: 100%;
    transform: translateX(4px);
}

.tn-mb-submenu .tn-mb-item:hover > .tn-mb-dropdown,
.tn-mb-submenu .tn-mb-item:focus-within > .tn-mb-dropdown,
.tn-mb-submenu .tn-mb-item.tn-mb-open > .tn-mb-dropdown {
    transform: translateX(0);
}

/* Untermenü-Punkte mit Kindern: Pfeil-Indikator */
.tn-mb-submenu .tn-mb-has-children > .tn-mb-link::after {
    content: "\203A"; /* › */
    margin-left: auto;
    padding-left: 10px;
    font-size: 16px;
    line-height: 1;
}

/* Top-Level-Punkte mit Kindern: Chevron nach unten */
.tn-mb-level-0 > .tn-mb-has-children > .tn-mb-link::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .6;
}

/* --------------------------------------------------------------------------
   Hamburger-Toggle: auf Desktop versteckt (JS erzeugt den Button)
   -------------------------------------------------------------------------- */
.tn-mb-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* Hamburger-Icon aus reinem CSS (kein Icon-Font nötig) */
.tn-mb-toggle::before {
    content: "";
    width: 20px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* ==========================================================================
   MOBILE (< 992px): vertikales Accordion, kein Hover
   ========================================================================== */
@media (max-width: 991.98px) {

    .tn-mb-toggle {
        display: inline-flex;
    }

    /* Top-Leiste standardmäßig eingeklappt, per .tn-mb-open am <nav> sichtbar */
    .tn-mb-menu.tn-mb-level-0 {
        display: none;
        flex-direction: column;
        align-items: stretch;
        height: auto; /* Desktop-Vollhöhe auf Mobil aufheben */
    }
    .tn-mb-menu.tn-mb-level-0 > .tn-mb-item {
        display: block;
    }

    .tn-mb-nav.tn-mb-open .tn-mb-menu.tn-mb-level-0 {
        display: flex;
    }

    /* Dropdowns werden zu statischen, ausklappbaren Blöcken */
    .tn-mb-dropdown {
        position: static;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        display: none;
        transition: none;
    }

    /* Auf Mobil NUR per .tn-mb-open öffnen – Hover/focus-within deaktiviert */
    .tn-mb-item:hover > .tn-mb-dropdown,
    .tn-mb-item:focus-within > .tn-mb-dropdown {
        display: none;
    }

    .tn-mb-item.tn-mb-open > .tn-mb-dropdown {
        display: block;
    }

    /* Flyout aufheben: alles vertikal einrücken */
    .tn-mb-submenu .tn-mb-item > .tn-mb-dropdown {
        left: 0;
        transform: none;
    }

    .tn-mb-submenu .tn-mb-link {
        padding-left: 28px;
    }

    /* Pfeil bei offenem Punkt drehen */
    .tn-mb-item.tn-mb-open.tn-mb-has-children > .tn-mb-link::after {
        transform: rotate(180deg);
    }

    .tn-mb-submenu .tn-mb-has-children > .tn-mb-link::after {
        transform: rotate(90deg);
    }

    .tn-mb-submenu .tn-mb-item.tn-mb-open.tn-mb-has-children > .tn-mb-link::after {
        transform: rotate(-90deg);
    }
}

/* --------------------------------------------------------------------------
   "Folgt der Kategorie": Bild/Beschreibung uebernehmen den Inhalt der
   Kategorie unter der Maus. Solange nichts gesetzt ist, bleibt das Bild leer –
   die Regeln fuer Mosaik-Bilder wuerden [hidden] sonst ueberstimmen.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image > img[hidden],
.tn-mb-nav .tn-mb-image > img[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Runde Ecken bei Punkten MIT Untermenue: dort darf nicht per overflow:hidden
   beschnitten werden (das Panel wuerde verschwinden). Stattdessen uebernimmt
   der sichtbare Kasten – der Link – die Rundung des <li>.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-item > .tn-mb-link {
    border-radius: inherit;
}

/* --------------------------------------------------------------------------
   Steckt die Navigation bereits im aufklappbaren Menue des Templates
   (NOVA: .navbar-collapse / .nav-mobile-body), waere ein zweiter eigener
   Menue-Knopf doppelt gemoppelt: menu.js setzt dann .tn-mb-embedded.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Der eigene Knopf IM Menue entfaellt – geoeffnet wird ueber den Knopf in
       der Kopfzeile (.tn-mb-sheet_btn). */
    .tn-mb-nav.tn-mb-embedded > .tn-mb-toggle {
        display: none;
    }
    .tn-mb-nav.tn-mb-embedded .tn-mb-menu.tn-mb-level-0 {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   Eigenes Menue-Panel auf Mobil: die Navigation wird aus dem Klappmenue des
   Templates herausgeloest und ueber der Seite angezeigt – sonst haetten die
   Panels nur die Breite des Template-Containers.
   -------------------------------------------------------------------------- */
.tn-mb-sheet {
    position: fixed;
    inset: 0;
    z-index: 2147483000;      /* ueber Kopfzeile und Overlays des Templates */
    display: none;
}
.tn-mb-sheet.is-open {
    display: block;
}
.tn-mb-sheet_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}
.tn-mb-sheet_box {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}
.tn-mb-sheet_head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, .12);
}
.tn-mb-sheet_back {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #0f172a;
}
.tn-mb-sheet_back[hidden] {
    display: none;
}
.tn-mb-sheet_head .tn-mb-sheet_title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tn-mb-sheet_title {
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;                 /* nicht vom Template erben: das Panel ist weiss */
}
.tn-mb-sheet_close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #0f172a;
}
.tn-mb-sheet_body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 24px;
}
/* Im Panel ist die Navigation immer sichtbar und nimmt die volle Breite */
.tn-mb-sheet_body .tn-mb-nav {
    width: 100%;
}
.tn-mb-sheet_body .tn-mb-dropdown-mosaic {
    width: auto;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    border: 0;
}
/* Solange das Panel offen ist, scrollt die Seite dahinter nicht mit */
body.tn-mb-sheet-lock {
    overflow: hidden;
}
/* Knopf in der Kopfzeile; ohne passenden Platz schwebt er unten rechts */
.tn-mb-sheet_btn {
    display: inline-flex;
}
.tn-mb-sheet_btn_float {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 2147482000;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}
@media (min-width: 992px) {
    .tn-mb-sheet,
    .tn-mb-sheet_btn {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Anzeige je Geraet (Einstellung "Anzeige" am Element).
   Doppelte Auswahl: einmal allgemein, einmal in der Rasterstufe – dort setzen
   die Mosaik-Regeln display selbst und muessen ueberboten werden.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tn-mb-nav .tn-mb-item.tn-mb-only-desktop,
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-item.tn-mb-only-desktop {
        display: none;
    }
}
@media (min-width: 992px) {
    .tn-mb-nav .tn-mb-item.tn-mb-only-mobile,
    .tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-item.tn-mb-only-mobile {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Drill-Down im Mobil-Panel: es ist immer genau EINE Ebene sichtbar. Die
   aufgeklappte Ebene haengt direkt im Panel, ihre Elternebene ist verborgen.
   -------------------------------------------------------------------------- */
.tn-mb-sheet_body > .tn-mb-dropdown.tn-mb-drill-view {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    border: 0;
    box-shadow: none;
    background: transparent;
}
/* Punkte mit Untermenue bekommen einen Hinweispfeil nach rechts.
   Gezeichnet aus zwei Rahmenlinien - ein Schriftzeichen haenge von der
   Schriftart des Templates ab und kam dort als leeres Kaestchen an. */
.tn-mb-sheet_body .tn-mb-has-children > .tn-mb-link::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    border-radius: 1px;
    transform: rotate(45deg);
    opacity: .45;
}
.tn-mb-sheet_body .tn-mb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.3;
    box-sizing: border-box;
    max-width: 100%;
}
.tn-mb-sheet_body .tn-mb-link > .tn-mb-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}
/* Nichts im Panel darf breiter als der Bildschirm werden */
.tn-mb-sheet_body .tn-mb-nav,
.tn-mb-sheet_body .tn-mb-menu,
.tn-mb-sheet_body .tn-mb-item,
.tn-mb-sheet_body .tn-mb-mosaic,
.tn-mb-sheet_body .tn-mb-dropdown {
    max-width: 100%;
    box-sizing: border-box;
}
/* Trennlinien geben der Liste Struktur */
.tn-mb-sheet_body .tn-mb-menu.tn-mb-level-0 > .tn-mb-item + .tn-mb-item,
.tn-mb-sheet_body .tn-mb-mosaic > .tn-mb-item + .tn-mb-item {
    border-top: 1px solid rgba(15, 23, 42, .08);
}
/* Bilder in der aufgeklappten Ebene: gross genug, aber nie seitenfuellend */
.tn-mb-sheet_body .tn-mb-image img {
    width: 100%;
    max-height: 34vh;
    object-fit: cover;
    display: block;
}
/* Freitext und Beschreibung im gleichen Raster wie die Links */
.tn-mb-sheet_body .tn-mb-text,
.tn-mb-sheet_body .tn-mb-html {
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
}
/* Direktlink auf die Kategorie selbst, oben in der aufgeklappten Ebene */
.tn-mb-sheet_body .tn-mb-drill-all {
    font-weight: 600;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
}
.tn-mb-sheet_body .tn-mb-drill-all::after {
    content: none;
}

/* Waehrend des Ebenenwechsels darf nichts seitlich herausragen */
.tn-mb-sheet_body {
    overflow-x: hidden;
}

/* Im Mobil-Panel liegt der Inhalt im Raster – dort stoeren Trennlinien
   zwischen den Kacheln (sie gelten nur fuer die Liste der obersten Ebene). */
.tn-mb-sheet_body .tn-mb-mosaic > .tn-mb-item + .tn-mb-item {
    border-top: 0;
}

/* --------------------------------------------------------------------------
   "Nur Icon": Beschriftung bleibt im Markup, ist aber nicht sichtbar.
   Kein display:none - das wuerde sie auch fuer Screenreader entfernen.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-label.tn-mb-sr {
    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;
}
/* Ohne sichtbaren Text braucht das Icon keinen Abstand nach rechts */
.tn-mb-nav .tn-mb-link > i + .tn-mb-label.tn-mb-sr {
    margin-left: 0;
}

/* Klappt ein Punkt IM Container sein Untermenue auf, muss auch der Container
   nach vorn – sonst liegt das Untermenue zwar ueber ihm, aber hinter seinen
   Nachbarn (jeder Container ist ein eigener Stapelkontext). */
/* Der Container kommt nur nach vorn, wenn ein Punkt DARIN sein Untermenue
   oeffnet – nicht schon beim blossen Ueberfahren. */
.tn-mb-mosaic > .tn-mb-container:has(.tn-mb-has-children:hover),
.tn-mb-mosaic > .tn-mb-container:has(.tn-mb-has-children:focus-within),
.tn-mb-mosaic > .tn-mb-container.tn-mb-open {
    z-index: 9999;
}

/* Container MIT Rahmen: der Inhalt endet vor dem Rahmen.
   Seine Groesse kommt aus dem Raster und laesst sich nicht – wie beim Panel –
   um die Rahmenstaerke vergroessern. Das innere Raster ist deshalb genau um
   diese Staerke breiter als der Innenraum (box-sizing:border-box), und eine
   rechts angedockte Kachel lag ueber dem Rahmen. Der Builder beschneidet an
   dieser Stelle bereits (.mb_tile { overflow:hidden }).
   Die Klasse setzt der Renderer nur bei gesetztem Rahmen. */
.tn-mb-nav .tn-mb-mosaic > .tn-mb-container-clip {
    overflow: hidden;
}
/* Klappt ein Punkt DARIN sein Untermenue auf, muss es aus dem Container heraus
   duerfen – sonst waere das Flyout abgeschnitten. Der Rahmen tritt in diesem
   Moment hinter die Bedienbarkeit zurueck. */
.tn-mb-nav .tn-mb-mosaic > .tn-mb-container-clip:has(.tn-mb-has-children:hover),
.tn-mb-nav .tn-mb-mosaic > .tn-mb-container-clip:has(.tn-mb-has-children:focus-within),
.tn-mb-nav .tn-mb-mosaic > .tn-mb-container-clip.tn-mb-open {
    overflow: visible;
}

/* --------------------------------------------------------------------------
   Bruecke ueber den Aussenabstand eines Panels.
   Mit Abstand liegt zwischen Punkt und Panel eine Luecke: die Maus verlaesst
   dort beides, der Hover endet und das Panel schliesst, bevor man es
   erreicht. Diese unsichtbare Flaeche schliesst genau diese Luecke.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-dropdown::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--tn-mb-mt, 0px));
    right: calc(-1 * var(--tn-mb-mr, 0px));
    bottom: calc(-1 * var(--tn-mb-mb, 0px));
    left: calc(-1 * var(--tn-mb-ml, 0px));
    z-index: -1;
    pointer-events: auto;
}
/* Ohne eingestellten Abstand entsteht keine Flaeche – dann bleibt alles wie zuvor. */

/* --------------------------------------------------------------------------
   "Untermenue auf Mobil ausblenden": der Punkt fuehrt auf schmalen
   Bildschirmen direkt auf seine Seite, statt eine Ebene zu oeffnen.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tn-mb-nav .tn-mb-nosub-mobile > .tn-mb-dropdown {
        display: none;
    }
    /* Ohne Untermenue braucht der Punkt auch keinen Hinweispfeil */
    .tn-mb-sheet_body .tn-mb-nosub-mobile > .tn-mb-link::after {
        content: none;
    }
}

/* --------------------------------------------------------------------------
   NUR das Panel des ERSTEN Hauptpunkts beginnt am linken Rand der Navigation.
   Alle uebrigen bleiben unter ihrem Punkt.
   Der erste Punkt sitzt oft eingerueckt (Innenabstand der Leiste); sein Panel
   klebte dadurch nicht am Seitenrand. Geloest ueber den Bezugspunkt: der Punkt
   wird static, die Navigation uebernimmt ihn – ohne Zahlenwert, der bei
   anderem Theme falsch waere.
   ACHTUNG: Bei fixierter Navigationsleiste setzt menu.js (placeFixed) die
   Position INLINE und schlaegt damit diese Regel. Die gleiche Ausnahme steht
   deshalb auch dort – wer eine der beiden aendert, muss die andere mitziehen.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .tn-mb-nav {
        position: relative;
    }
    .tn-mb-nav .tn-mb-menu.tn-mb-level-0 > .tn-mb-item:first-child {
        position: static;
    }
    .tn-mb-nav .tn-mb-menu.tn-mb-level-0 > .tn-mb-item:first-child > .tn-mb-dropdown {
        left: 0;
        right: auto;
    }
}

/* --------------------------------------------------------------------------
   Container auf Mobil: Sein Inhalt gehoert zum Panel und klappt nicht auf.
   Mobil sind Dropdowns aber grundsaetzlich verborgen und werden erst per
   .tn-mb-open gezeigt – dadurch blieb der Containerinhalt unsichtbar.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tn-mb-nav .tn-mb-container > .tn-mb-dropdown {
        display: block;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
}

/* --------------------------------------------------------------------------
   Standard-Innenabstand der Kacheln: 5px oben/unten, 10px links/rechts.
   Er sitzt am ELEMENT (nicht am Link), damit die Einstellung aus dem
   Layout-Tab ihn direkt ueberschreibt – auch mit 0. Der Renderer gibt den
   Wert ab sofort immer aus, sobald das Element konfiguriert wurde.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-item {
    padding: 5px 10px;
}
/* Bilder fuellen ihre Kachel weiterhin randlos */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-image {
    padding: 0;
}
/* Container ebenso: er ist eine FLAECHE, kein Textelement. Der Standard von
   5px/10px schob seinen Inhalt ein, obwohl nichts eingestellt war – die
   Kacheln darin sollen buendig am Rand sitzen. Ein eingestellter Innenabstand
   steht inline und schlaegt diese Regel weiterhin. */
.tn-mb-nav .tn-mb-dropdown-mosaic .tn-mb-mosaic > .tn-mb-container {
    padding: 0;
}
/* Und alles, was IM Container liegt, ebenfalls ohne Standardabstand: der
   Container dient der genauen Anordnung, dort ist buendig die sinnvolle
   Vorgabe. Ausserhalb von Containern bleibt der Standard bestehen.
   Ein eingestellter Innenabstand steht inline und gewinnt weiterhin. */
.tn-mb-nav .tn-mb-container .tn-mb-mosaic > .tn-mb-item {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Automatisches Panel (Hersteller / Merkmale)

   Diese Panels erzeugt der Renderer selbst, wenn ein Hersteller- oder
   Merkmal-Punkt ohne eigene Auswahl kein Panel hat. Sie sitzen bewusst NICHT
   im Mosaik-Raster: Karten und Chips brauchen die Hoehe ihres Inhalts, ein
   festes Zellenraster muesste sie raten und schnitte lange Namen ab.

   Farben kommen aus Custom Properties mit Rueckfall. Wer das Panel im
   Layout-Tab einfaerbt, kann sie ueberschreiben, ohne dass hier etwas
   nachgezogen werden muss.
   -------------------------------------------------------------------------- */
.tn-mb-nav .tn-mb-dropdown.tn-mb-auto {
    --tn-mb-auto-line:  #e8ebef;
    --tn-mb-auto-mute:  #6b7280;
    --tn-mb-auto-hover: #f4f6f9;
    max-width: 96vw;
}
/* Vorgabebreite am PANEL, nicht an der Liste darin. Der Renderer schreibt eine
   eingestellte Panelbreite als Inline-Stil – der schlaegt diese Regel dann von
   selbst. Stand die Breite an der Liste, blieb der Inhalt bei 720px, egal wie
   breit das Panel gezogen wurde: die Einstellung schien wirkungslos. */
.tn-mb-nav .tn-mb-dropdown.tn-mb-auto-man  { width: 720px; }
.tn-mb-nav .tn-mb-dropdown.tn-mb-auto-attr { width: 620px; }

/* Spezifitaet bewusst hoch (5 Klassen + Element): mega setzt auf
   .tn-mb-submenu.tn-mb-level-1 column-count:3 und column-gap:30px. Beides
   wuerde Karten und Chips in Zeitungsspalten zerlegen. */
.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto {
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    column-count: auto;
    column-gap: normal;
}

.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto > .tn-mb-item {
    margin: 0;            /* mega: margin-bottom:4px auf Level-1-Punkten */
    break-inside: auto;
}

/* ---- Hersteller: Logo-Karten -------------------------------------------- */

/* auto-fill statt fester Spaltenzahl: das Panel bleibt bei 5 wie bei 50
   Herstellern brauchbar und passt sich der verfuegbaren Breite an. */
.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto-man {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    width: auto;          /* folgt dem Panel */
}

.tn-mb-nav .tn-mb-auto-card {
    padding: 0;
    margin: 0;
}

.tn-mb-nav .tn-mb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    padding: 12px 10px;
    border: 1px solid var(--tn-mb-auto-line);
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    background: transparent;
    /* Ohne das faerbt der Browser den Link blau – die Karte soll die
       Textfarbe des Panels erben, damit eigene Panel-Farben durchgreifen. */
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tn-mb-nav .tn-mb-card:hover,
.tn-mb-nav .tn-mb-card:focus-visible {
    border-color: #cbd2da;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

/* Feste Hoehe fuer den Logo-Bereich: Logos haben sehr unterschiedliche
   Seitenverhaeltnisse. Ohne sie stuenden die Namen auf verschiedenen Hoehen
   und das Raster wirkte unruhig. */
.tn-mb-nav .tn-mb-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
}

.tn-mb-nav .tn-mb-card-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tn-mb-nav .tn-mb-card-name {
    font-size: 13px;
    line-height: 1.3;
    color: inherit;
}

/* Ohne Logo traegt der Name die Karte allein und darf groesser stehen. */
.tn-mb-nav .tn-mb-card-noimg .tn-mb-card-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---- Merkmale: Ueberschrift mit Chips ------------------------------------ */

.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto-attr {
    display: block;
    width: auto;          /* folgt dem Panel */
}

.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu > .tn-mb-auto-group {
    display: block;
    padding: 0;
    margin: 0 0 20px;
}

.tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu > .tn-mb-auto-group:last-child {
    margin-bottom: 0;
}

.tn-mb-nav .tn-mb-chip-title {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tn-mb-auto-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tn-mb-auto-mute);
}

.tn-mb-nav .tn-mb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tn-mb-nav .tn-mb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--tn-mb-auto-line);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

.tn-mb-nav .tn-mb-chip:hover,
.tn-mb-nav .tn-mb-chip:focus-visible {
    background: var(--tn-mb-auto-hover);
    border-color: #cbd2da;
    text-decoration: none;
}

/* Farbmuster und aehnliche Merkmalbilder: rund, damit sie im Chip sitzen */
.tn-mb-nav .tn-mb-chip-img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* ---- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 991.98px) {
    .tn-mb-nav .tn-mb-dropdown.tn-mb-auto {
        min-width: 0;
    }
    .tn-mb-nav .tn-mb-dropdown.tn-mb-auto-man,
    .tn-mb-nav .tn-mb-dropdown.tn-mb-auto-attr {
        width: auto;
    }
    .tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto-man {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .tn-mb-nav .tn-mb-dropdown.tn-mb-auto > ul.tn-mb-submenu.tn-mb-auto {
        padding: 10px 12px;
    }
}