/* ==========================================================================
   menuBuilder by techNEO – Theme "Karten"
   Hauptpunkte als Pillen, Panels als schwebende Karten: grosse Rundung,
   weicher tiefer Schatten, kein Rahmen.
   ========================================================================== */

.tn-mb-theme-cards {
    --tn-mb-accent: #0b6aa2;
    color: #1f2d3d;
}

.tn-mb-theme-cards .tn-mb-menu.tn-mb-level-0 {
    gap: 6px;
}

/* ---- Hauptpunkte: Pillen ------------------------------------------------ */

.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item > .tn-mb-link {
    padding: 9px 16px;
    /* 999px ergab zusammen mit der vollen Zeilenhoehe ein riesiges Oval.
       Eine ruhige Rundung wirkt wie ein Reiter, nicht wie eine Blase. */
    border-radius: 8px;
    color: #33475b;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}

/* Ueberfahren OHNE Panel: dezent. Nur echte Links (<a>) reagieren -
   ein Punkt ohne Ziel ist ein <span> und soll nicht klickbar wirken. */
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item:not(.tn-mb-has-children):hover > a.tn-mb-link,
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item:not(.tn-mb-has-children):focus-within > a.tn-mb-link {
    background: rgba(11, 106, 162, .10);
    color: var(--tn-mb-accent);
}

/* Panel OFFEN: kraeftig. Am Desktop oeffnet reines CSS-Hover, .tn-mb-open
   kommt nur vom Skript auf Mobilgeraeten - beides muss hier stehen, sonst
   sieht ein geoeffneter Punkt aus wie ein bloss ueberfahrener. */
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item.tn-mb-has-children:hover > .tn-mb-link,
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item.tn-mb-has-children:focus-within > .tn-mb-link,
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item.tn-mb-open > .tn-mb-link {
    background: var(--tn-mb-accent);
    color: #fff;
}

/* ---- Panels: schwebende Karten ------------------------------------------ */

.tn-mb-theme-cards .tn-mb-dropdown {
    background: #fff;
    border: none;
    border-radius: 16px;
    /* Zwei Lagen: eine enge fuer die Kante, eine weite fuer die Tiefe.
       Ein einzelner grosser Schatten wirkt flach und schmutzig. */
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06),
                0 18px 40px rgba(15, 23, 42, .14);
    padding: 14px;
    /* Buendig an der Header-Unterkante: die 8px Luft liessen das Panel
       sichtbar abgesetzt beginnen. Der Punkt reicht bis zum Header-Boden,
       das Panel schliesst direkt daran an. */
    margin-top: 0;
    --tn-mb-mt: 0px;
}

.tn-mb-theme-cards .tn-mb-submenu .tn-mb-link {
    padding: 7px 12px;
    border-radius: 8px;
    color: #33475b;
}

/* Unterpunkte: weiche Hervorhebung, passend zur Kartenform */
.tn-mb-theme-cards .tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):hover,
.tn-mb-theme-cards .tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):focus-within {
    background: rgba(11, 106, 162, .07);
    border-radius: 8px;
}

/* Ueberschriften: kraeftig, ohne Linie – die Karte trennt schon genug */
.tn-mb-theme-cards .tn-mb-heading .tn-mb-link {
    color: var(--tn-mb-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-bottom: 2px;
}

/* Das Panel der obersten Ebene sitzt buendig an der Header-Unterkante.
   Oben gerundete Ecken loesen es davon ab - es sieht aus, als schwebe es
   davor statt daran zu haengen. Unten bleibt die Rundung erhalten.
   Unterpanels sind nicht angedockt und behalten ihre volle Rundung. */
.tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item > .tn-mb-dropdown {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Unterpanels erben die Kartenform, nur flacher */
.tn-mb-theme-cards .tn-mb-submenu .tn-mb-item > .tn-mb-dropdown {
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06),
                0 12px 28px rgba(15, 23, 42, .12);
}

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

/* ---- Mosaik-Panel: jede Kachel eine Karte -------------------------------
   Erkennungszeichen: die Panelflaeche ist GRAU, die Kacheln liegen als weisse
   Karten darauf. Ueberschriften bleiben frei - sie beschriften die Gruppe und
   sind keine Karte. Der Container ebenfalls, der hat sein eigenes Aussehen. */
.tn-mb-theme-cards .tn-mb-dropdown-mosaic {
    background: #eef1f5;
}

.tn-mb-theme-cards .tn-mb-mosaic > .tn-mb-item:not(.tn-mb-heading):not(.tn-mb-container) {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Beim Ueberfahren hebt sich die Karte ab, statt sich einzufaerben */
.tn-mb-theme-cards .tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):hover,
.tn-mb-theme-cards .tn-mb-dropdown .tn-mb-item:has(> .tn-mb-link:not(.tn-mb-nolink)):focus-within {
    background: #fff;
    border-color: var(--tn-mb-accent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}

.tn-mb-theme-cards .tn-mb-mosaic > .tn-mb-item > .tn-mb-link {
    font-size: 13px;
    font-weight: 600;
    color: #33475b;
}

@media (max-width: 991.98px) {
    .tn-mb-theme-cards .tn-mb-dropdown {
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
        padding: 0;
    }
    .tn-mb-theme-cards .tn-mb-level-0 > .tn-mb-item > .tn-mb-link {
        border-radius: 0;
    }
}