/* ============================================================
   CA Header Desktop Nav — 3-Block-Struktur (Figma)
   Block 1: Logo + Menü/Icons (links)
   Block 2: CA consulting + Consulting/Coaching (mitte, mit Trennlinie)
   Block 3: a-Logo (rechts, über beide Ebenen)
   Kein Sticky-Modus — Layout bleibt gleich.
   ============================================================ */


/* === Wrapper ========================================================
   Struktur:
   - #main_header_wrapper  = fixed, full-width, weiß mit box-shadow
   - #masthead             = full-width, ohne Rahmen, ohne Schatten
   - .ca-header-grid       = max-width 1420 zentriert (Nav-Inhalt)

   Sticky: Header bleibt beim Scrollen oben. Aber das Layout wechselt
   NICHT in eine zweite "sticky-header"-Variante — beide Klassen werden
   gleich gestylt. Das JS setzt permanent non-sticky-header.
   ============================================================ */
#main_header_wrapper,
#main_header_wrapper.sticky-header,
#main_header_wrapper.non-sticky-header {
    background-color: #fff !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    z-index: 100 !important;
    transition: none !important;
}

/* WP Admin-Bar: wenn eingeloggt, schiebt WordPress die Seite um 32px
   (>782px) bzw. 46px (≤782px) nach unten. Unser fixed Header muss
   entsprechend nach unten wandern, sonst verdeckt die Admin-Bar den
   Masthead. body.admin-bar wird von WP automatisch gesetzt. */
body.admin-bar #main_header_wrapper,
body.admin-bar #main_header_wrapper.sticky-header,
body.admin-bar #main_header_wrapper.non-sticky-header {
    /* top: 32px !important;*/
    top: 26px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar #main_header_wrapper,
    body.admin-bar #main_header_wrapper.sticky-header,
    body.admin-bar #main_header_wrapper.non-sticky-header {
        top: 46px !important;
    }
}

/* Platzhalter für den fixed Header: das nachfolgende Element muss nach
   unten geschoben werden, damit nichts vom Header verdeckt wird.
   116px = Höhe der ca-header-grid (min-height). */
#main_header_wrapper + * {
    margin-top: 116px !important;
}

/* Scrolling: Legacy oder Modal-Plugin kann body/html auf overflow:hidden
   setzen. Sicherstellen, dass die Seite scrollbar bleibt. */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

#main_header_wrapper #masthead.site-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative;
}

/* Overrides gegen minifizierte Legacy-CSS (ca-akademie-mini.css / header.css) */
#main_header_wrapper #masthead.site-header > * {
    float: none !important;
    display: block;
}

/* Elemente aus alter Menü-Ära ausblenden */
#nav-box-container,
.divider.outer,
.sticky-space {
    display: none !important;
}


/* === 3-Block-Layout (Flex) ==========================================
   Der frühere "Layout kollabiert"-Bug kam NICHT von Flex, sondern vom
   [HeaderMyCAPopup]-Shortcode, der ungeschlossene <div>-Tags ausgibt.
   Chrome hat daraufhin mid/right-Block als Kinder von left-Block
   umgedeutet. Popup ist jetzt außerhalb des Headers gerendert. */
#main_header_wrapper #masthead.site-header .ca-header-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 10px 36px;
    box-sizing: border-box;
    float: none !important;
    width: 100% !important;
    max-width: 1420px;
    margin: 0 auto;
    min-height: 116px;
    /* Anker für die absolute positionierten Dropdown-Panels, damit sie
       die Breite der 1420-Grid haben und nicht die volle Viewport-Breite. */
    position: relative;
}

#main_header_wrapper #masthead.site-header .ca-block {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    float: none !important;
    clear: none !important;
    min-width: 0;
}

#main_header_wrapper #masthead.site-header .ca-block-left {
    flex: 1 1 auto;
    width: auto !important;
}

#main_header_wrapper #masthead.site-header .ca-block-mid,
#main_header_wrapper #masthead.site-header .ca-block-right {
    flex: 0 0 auto;
    width: auto !important;
}

/* Block 3 (a-Logo) vertikal + horizontal zentriert */
#main_header_wrapper #masthead.site-header .ca-block-right {
    align-items: center !important;
    justify-content: center !important;
    padding-left: 26px;
    margin-left: 10px;
}

.ca-block-top {
    display: flex;
    align-items: center;
    padding: 8px 0 6px;
    min-height: 48px;
}

.ca-block-bottom {
    display: flex;
    align-items: center;
    padding: 6px 0 8px;
    min-height: 48px;
    gap: 24px;
}

/* Block 1: Links — Menü + Icons in einer Reihe, Icons rechtsbündig */
.ca-block-left .ca-block-bottom {
    justify-content: space-between;
}

/* Block 2: Mitte — Trennlinie links, oben 20px und unten 10px kürzer als
   die Block-Höhe. Umgesetzt als linear-gradient background statt
   position:absolute ::before, damit .ca-block-mid NICHT zum positionierten
   Anker wird — die .nav-panel drin (Consulting/Coaching) müssen weiterhin
   zur .ca-header-grid ankern, damit sie volle Grid-Breite spannen. */
.ca-block-mid {
    padding-left: 26px;
    margin-left: 26px;
    background-image: linear-gradient(#838484, #838484);
    background-repeat: no-repeat;
    background-position: 0 20px;                 /* 20px oben frei */
    background-size: 1px calc(100% - 30px);      /* 1px breit, 30px = 20 oben + 10 unten */
}

.ca-block-mid .ca-block-bottom {
    gap: 30px;
}

/* Block 3: Rechts — a-Logo zentriert, über beide Ebenen */
#main_header_wrapper #masthead.site-header .ca-block-right {
    align-items: center !important;
    justify-content: center !important;
    padding-left: 26px;
    margin-left: 10px;
}


/* === Logos =========================================================== */
.logo-wrapper,
.logo-wrapper:hover,
.logo-wrapper:focus,
.logo-wrapper:active,
.logo-wrapper:visited {
    display: flex;
    align-items: center;
    /* Legacy-Theme setzt a:hover { text-decoration: underline } global —
       hart gegen alle Link-States abschalten, damit "CA consulting" und
       alle Logo-Wrapper nie einen Unterstrich bekommen. */
    text-decoration: none !important;
    color: inherit;
}

/* Beide Text-Logos (links + mitte) 15px tiefer positionieren.
   margin-top statt transform: damit das Layout sauber mitwächst
   und die Unterkante des .ca-block-top korrekt bleibt. Das a-Logo
   (Block 3) bleibt unberührt, weil es über beide Ebenen zentriert. */
.logo-wrapper.primary,
.logo-wrapper.consulting {
    margin-top: 15px;
}

#main_header_wrapper #masthead.site-header img.logo {
    display: block !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
}

/* Primary: CA controller akademie
   SVG ist tight gecroppt (viewBox 14 22 631 46 statt 0 0 654.667 90.667).
   CSS height entsprechend halbiert, damit die visuelle Größe identisch
   bleibt: früher 34px inkl. 50% Leerraum → 17px sichtbar. Jetzt 17px
   SVG-Box ohne Leerraum → 17px sichtbar. */
#main_header_wrapper #masthead.site-header img.logo.main,
#main_header_wrapper #masthead.site-header img.logo.main.de-logo {
    height: 20px !important;
    width: auto !important;
    margin: 0 !important;
}

/* Secondary: a-Logo (rotes Quadrat) */
#main_header_wrapper #masthead.site-header img.logo.secondary {
    height: 66px !important;
    width: 66px !important;
    margin: 0 !important;
}

/* CA consulting Wortmarke — SVG, 166×25 native (Figma 4438:86).
   Höhe bewusst auf 25px fixiert, damit die vertikale Ausrichtung zur
   "CA controller akademie"-Wortmarke in Block 1 stimmig bleibt. */
#main_header_wrapper #masthead.site-header img.logo.consulting {
    height: 25px !important;
    width: auto !important;
    margin: 0 !important;
}


/* === Nav Groups (Abstände aus Figma: 16px zwischen Menü-Items) ======== */
.nav-group {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-group-main {
    flex: 1;
}

.nav-group-consulting {
    gap: 16px;
}


/* === Nav Items (oberste Ebene) ======================================= */
.nav-item {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item-link,
.nav-item-link:focus,
.nav-item-link:active,
.nav-item-link:visited {
    display: inline-block;
    padding: 4px 0;
    color: #838484;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
    /* Legacy a:hover setzt text-decoration:underline → würde zu doppeltem
       Strich führen (text-decoration + unser border-bottom). Hart abschalten. */
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

/* :visited explizit auf Standard-Farbe setzen. Browser stylen Links nach
   dem Besuch sonst u. U. violett/andersfarbig (abhängig von WP-Theme). */
.nav-item-link:visited {
    color: #838484;
    border-bottom-color: transparent;
}

/* Hover — einheitlich für ALLE Nav-Items (mit oder ohne Panel):
   - Unterstrich (via border-bottom) wird sichtbar
   - Text wird leicht dunkler
   Bold-Items bleiben bold: .is-bold-Regel unten hat höhere Spezifität
   für font-weight, die hier nicht überschrieben wird. */
.nav-item:hover > .nav-item-link {
    color: #2b2b2b;
    border-bottom-color: #838484;
    text-decoration: none !important;
}

/* Bold-Variante: steuerbar per $nav_desktop Array mit 'bold' => true.
   Hover: bold bleibt bestehen (font-weight wird oben nicht überschrieben),
   und die Hover-Regel oben macht den Text zusätzlich dunkler. */
.nav-item.is-bold > .nav-item-link {
    font-weight: 700;
}

/* Nav-Item ohne Link: öffnet nur das Dropdown, ist selbst nicht klickbar.
   Wird als <span> statt <a> gerendert → keine Navigation, kein #-Jump. */
.nav-item-link-static {
    cursor: default;
}


/* === Icons rechts im Block 1 (Figma: gap 16px) ======================= */
.nav-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #838484;
    flex: 0 0 auto;
    padding-left: 20px;   /* Abstand Menü → Icon-Gruppe (Figma) */
}

/* Alle direkten Icon-Wrapper bekommen die gleiche Slot-Breite + zentrierten
   Inhalt. Dadurch ist die Center-to-Center-Distanz zwischen allen Icons
   konstant (24px Slot + 16px gap = 40px). Widest natural icon ist die
   EN-Flagge mit ~24px — wir nutzen das als Slot-Maß.
   .myCA-icon ist der vom [HeaderMyCAPopup]-Shortcode ausgegebene
   Wrapper für den Login-Icon (beide States). */
.nav-icons > a,
.nav-icons > .en-icon,
.nav-icons > .myCA-icon {
    min-width: 24px;
    justify-content: center;
}

/* Alle Link-Wrapper in .nav-icons: <a> (Suche, Warenkorb, Merkzettel,
   loginHoverBox logged-out). Der vom Shortcode erzeugte logged-in
   Wrapper ist ein <div class="myCA-icon"> und wird oben separat
   gestylt. Einheitliches inline-flex-Layout + position:relative als
   Anker für die absolut positionierten info-box-content. */
.nav-icons a {
    color: inherit;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

/* Einheitliche Icon-Größe auf Figma-Proportionen (18×16 mit Strichbreite) */
#main_header_wrapper #masthead.site-header .nav-icons .nav-right-icons {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 18px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: #838484;
    margin: 0 !important;
    float: none !important;
    transition: filter 0.15s;
}

.nav-icons .nav-right-icons:hover {
    filter: brightness(0.4);
}

/* SVG-Icons aus Figma als background-image */
.nav-icons .suche-icon {
    background-image: url('/wp-content/themes/ca-akademie/template-parts/img/icon-suche.svg');
    width: 15px;
    height: 16px;
}

.nav-icons .warenkorb-icon {
    background-image: url('/wp-content/themes/ca-akademie/template-parts/img/icon-warenkorb.svg');
    width: 18px;
    height: 16px;
}

.nav-icons .merkzettel-icon {
    background-image: url('/wp-content/themes/ca-akademie/template-parts/img/icon-merkzettel.svg');
    width: 18px;
    height: 16px;
}

/* .myCA-icon ist vom Shortcode [HeaderMyCAPopup] als WRAPPER-Klasse
   genutzt (umhüllt Icon + optional Dropdown/Popup-Trigger). Wir
   neutralisieren die .nav-right-icons Base-Styles (18×16 fix), damit
   der Wrapper flexible Breite hat. */
#main_header_wrapper #masthead.site-header .nav-icons .myCA-icon {
    background: none;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Filter-Reset am Wrapper: .nav-right-icons:hover aktiviert sonst
   filter:brightness(0.4) auf dem Wrapper → wäre ein Stacking Context
   und würde das Dropdown mit-abdunkeln. Der Icon-Span (.login-icon-svg
   mit .nav-right-icons) behält seinen eigenen Hover-Filter. */
#main_header_wrapper #masthead.site-header .nav-icons .myCA-icon:hover {
    filter: none;
}

/* .login-icon-svg = unser SVG-Icon-Replacement für das Font-Awesome
   <i class="fas fa-user">, das der Shortcode ausgibt. Mask-Approach
   erlaubt Farbwechsel per background-color. */
.nav-icons .login-icon-svg {
    -webkit-mask: url('/wp-content/themes/ca-akademie/template-parts/img/icon-login.svg') no-repeat center / contain;
            mask: url('/wp-content/themes/ca-akademie/template-parts/img/icon-login.svg') no-repeat center / contain;
    background-color: #838484;
    background-image: none;
    width: 17px;
    height: 16px;
    display: inline-block;
}

/* Logged-in Detection via :has(): das Dropdown-Element wird nur
   gerendert wenn der User eingeloggt ist → Icon wird rot. */
.nav-icons .myCA-icon:has(.myCa-login-header-dropdown) .login-icon-svg {
    background-color: #E11E00;
}

/* Dropdown bei Hover auf Wrapper sichtbar (überschreibt inline
   style="display:none" mit !important). */
.nav-icons .myCA-icon:hover .myCa-login-header-dropdown {
    display: block !important;
}

/* Hover-Bridge: unsichtbarer Streifen zwischen Icon-Unterkante und
   Dropdown, damit die Maus den Gap (top:32px vs Wrapper-Höhe ~18px)
   durchziehen kann ohne :hover zu verlieren. Nur im logged-in State
   (:has Dropdown), damit logged-out keinen toten Hover-Bereich kriegt. */
.nav-icons .myCA-icon:has(.myCa-login-header-dropdown)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
}

/* Name-Label im Logged-In-Header ausblenden (User-Wunsch: icon-only
   wie logged-out). Der Name erscheint weiter im Dropdown-Body. */
.nav-icons .myCA-icon .tc-user-header-name {
    display: none;
}

/* EN-Icon Wrapper: hält Flag-Span + Info-Box; Anker für info-box-content.
   Hat NICHT .nav-right-icons, damit der Hover-Filter nicht die Info-Box
   mitgrauen kann. position:relative explizit hier. */
#main_header_wrapper #masthead.site-header .nav-icons .en-icon {
    position: relative;
    cursor: pointer;
    background: none;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

/* Flag-Span mit .nav-right-icons — nur auf diesem wirkt der Hover-Filter.
   Width/Height vom .nav-right-icons-Base (18x16) überschreiben, weil das
   WPML-<img> mit 20px eigener Größe rendert. */
#main_header_wrapper #masthead.site-header .nav-icons .en-icon-flag {
    background: none;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
}

/* Login-Icon-Span (gleich für beide States): Icon als Sibling des
   Wrappers, damit Hover-Filter auf .nav-right-icons nur das Icon
   verdunkelt und nicht die Info-Box/das Dropdown. */
#main_header_wrapper #masthead.site-header .nav-icons .login-icon {
    display: inline-block;
}

/* Dropdown-Positionierung im logged-in State. Sitzt direkt unter dem
   Wrapper (top: 100%) ohne Gap — dadurch kein Bridge nötig, da der
   Hover-Chain von Icon → Dropdown ohne Zwischenraum durchgeht. */
.nav-icons .myCA-icon .myCa-login-header-dropdown {
    position: absolute;
    top: 32px;
    right: -14px;
    min-width: 200px;
    background: #fff;
    border: 1px solid #BDBDBD;
    padding: 10px 15px 12px;
    font-size: 12px;
    color: #666666;
    line-height: 14px;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
    text-align: left;
    /* Cursor-Reset: das .nav-right-icons vom Parent vererbt sonst
       cursor:pointer auf Text. <a> und <button> behalten ihren
       UA-Default-Pointer automatisch. */
    cursor: default;
}

/* Flag-SVGs tight gecroppt (viewBox 17 25 65 43 statt 0 0 100 100).
   Height:16px matcht die anderen Icons (suche/warenkorb/merkzettel/login
   sind alle 16px hoch). Width:auto → Flagge wird ca. 24px breit wegen
   Aspect 65:43 — passt zu Text-Glyphen-Proportionen. */
.nav-icons .en-icon img,
.nav-icons .wpml-ls img {
    height: 19px;
    width: auto;
    display: block;
}

.nav-icons .wpml-ls,
.nav-icons .wpml-ls ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-icons .wpml-ls ul {
    display: flex;
}

.nav-icons .wpml-ls li {
    display: flex;
    margin: 0;
}

/* Warenkorb/Merkzettel-Counter: rundes rotes Badge oben rechts vom Icon.
   WICHTIG: Counter-Wrapper ist Sibling vom Icon (nicht Child!), damit
   das filter:brightness(0.4) vom Icon-Hover das Badge nicht mit abdunkelt.
   filter erzeugt einen eigenen Stacking Context, der Children nicht
   zurücksetzen können.

   .nav-warenkorb / .nav-merkzettel sind die <a>-Wrapper (position:relative
   via .nav-icons a), das Badge positioniert sich an denen. */
.nav-icons .warenkorb-counter,
.nav-icons .merkzettel-counter {
    position: absolute;
    top: -12px;
    right: -6px;
    pointer-events: none;   /* Hover-Events gehen durch aufs Icon */
    z-index: 2;
}

.nav-icons .warenkorb-user-count,
.nav-icons .simplefavorites-user-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #E11E00!important;   /* bleibt bei Hover rot */
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
}


/* === Info-Box (Hover-Tooltip, einheitlich unter jedem Icon zentriert) ===
   Alle Info-Boxen sehen optisch gleich aus und sitzen jeweils unter dem
   zugehörigen Icon zentriert. left:50% + translateX(-50%) zentriert die
   Box unter dem position:relative Wrapper (.nav-suche, .en-icon,
   .nav-warenkorb, .nav-merkzettel, .loginHoverBox). */
.nav-icons .info-box-content {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 237px;
    background: #fff;
    border: 1px solid #BDBDBD;
    padding: 10px 15px 12px;
    font-size: 12px;
    color: #666666;
    line-height: 14px;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
    text-align: left;
}

.nav-icons .info-box-headline {
    font-size: 12px;
    line-height: 22px;
    font-weight: 700;
    color: #E11E00;
    margin: 0 0 4px;
}

.nav-icons .info-box-copy-bullet {
    margin-bottom: 0;
}

/* Erscheinen beim Hover über den jeweiligen Icon-Wrapper */
.nav-icons .nav-suche:hover .info-box-content,
.nav-icons .en-icon:hover .info-box-content,
.nav-icons .nav-warenkorb:hover .info-box-content,
.nav-icons .nav-merkzettel:hover .info-box-content,
.nav-icons .loginHoverBox:hover .info-box-content {
    display: block;
}


/* === Dropdown-Panel (Breite = 1420-Grid, ankert an .ca-header-grid) == */
.nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
    border: 1px solid #EFEFEF;
    /* Eigener Panel-Shadow nach unten. Der Header-Shadow kommt zusätzlich
       von oben über das ::after Pseudo rein (siehe unten). */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
    z-index: 20;
}

/* Hover-Bridge: 28px oberhalb des Panels, damit der Hover-Chain beim
   Wechsel von nav-item-link zu Panel-Inhalt nicht abreißt. */
.nav-panel::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
}

/* Header-Shadow-Simulation: dunkler Gradient auf den obersten Pixeln des
   Panels, so wirkt der Masthead optisch davor mit seinem Schlagschatten. */
.nav-panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 3;
}

/* Fallback ohne JS: :hover greift normal. Mit JS setzt der Mouseenter-Handler
   auf .ca-nav-main zusätzlich die Klasse .is-panel-active auf dem aktuellen
   Item — dadurch bleibt das Panel stabil offen, auch wenn die Maus kurz
   zwischen Nav-Links zieht. Inhalt wechselt statt zu schließen. */
.nav-item.has-panel:hover > .nav-panel,
.nav-item.has-panel.is-panel-active > .nav-panel,
.nav-panel:hover {
    visibility: visible;
    pointer-events: auto;
}

/* Dismiss-nach-Klick: wird auf dem Nav-Container gesetzt, nachdem der
   User einen Link im Panel geklickt hat. Überschreibt die :hover-Regel,
   solange die Maus im Nav-Bereich bleibt — wichtig für Anker-Klicks auf
   der aktuellen Seite (kein Reload → Menü würde sonst offen bleiben).
   !important ist nötig, weil die :hover-Regel oben ohne !important steht,
   aber höhere Spezifität hat (.nav-item.has-panel:hover > .nav-panel). */
.ca-nav-main.panel-dismissed .nav-panel,
.nav-group-consulting.panel-dismissed .nav-panel {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === Seiten-Verdunklung bei offenem Dropdown ==========================
   Overlay unterhalb des Headers, beginnt bei Header-Unterkante.
   Ohne Admin-Bar:    top = 116px (Header-Höhe)
   Mit Admin-Bar:     top = 32 + 116 = 148px (Admin-Bar + Header)
   Mit AB ≤782px:     top = 46 + 116 = 162px
   Sonst würde der Overlay die unteren 32/46px vom Masthead mit-abdunkeln. */
#main_header_wrapper::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 116px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 15;
}

body.admin-bar #main_header_wrapper::after {
    top: 148px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #main_header_wrapper::after {
        top: 162px;
    }
}

#main_header_wrapper:has(.nav-item.has-panel:hover)::after,
#main_header_wrapper:has(.nav-item.has-panel.is-panel-active)::after,
#main_header_wrapper:has(.nav-panel:hover)::after {
    opacity: 1;
}

.nav-panel-inner {
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 247px;
    gap: 0;
    align-items: start;
}

.nav-panel-inner .nav-panel-items {
    padding: 33px 0px 30px 40px;
    border-right: 1px solid #EFEFEF;
}

.nav-panel-headline {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #838484;
    margin: 0 0 24px;
}


/* === Style A: Cluster-Boxen (Figma: 203×174, gap 24) ================= */
.nav-panel-a .nav-panel-grid {
    display: grid;
    grid-template-columns: repeat(5, 203px);
    gap: 24px;
    justify-content: start;
}

.nav-cluster-box,
.nav-cluster-box:hover,
.nav-cluster-box:focus,
.nav-cluster-box:active {
    display: block;
    width: 203px;
    height: 174px;
    /* Legacy-CSS setzt a:hover { text-decoration: underline } global.
       Sowohl auf Link als auch auf Label-Span erzwingen. */
    text-decoration: none !important;
    overflow: hidden;
    background: #fff;
    transition: filter 0.15s;
}

.nav-cluster-box:hover {
    filter: brightness(0.88);
}

.nav-cluster-box:hover .nav-cluster-label,
.nav-cluster-box:focus .nav-cluster-label {
    text-decoration: none !important;
}

.nav-cluster-img {
    display: block;
    width: 203px;
    height: 137px;
    object-fit: cover;
    background: #f5f5f5;
}

.nav-cluster-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 203px;
    height: 37px;
    padding: 8px 10px;
    color: #fff;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 1.15;
    box-sizing: border-box;
}


/* === Style B: Bild-Karten (Figma: 5 Spalten, 203×78 Bild, 2px Unterstrich) */
.nav-panel-b .nav-panel-grid {
    display: grid;
    grid-template-columns: repeat(5, 203px);
    column-gap: 25px;
    row-gap: 40px;
    justify-content: start;
}

.nav-card,
.nav-card:hover,
.nav-card:focus,
.nav-card:active {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: #838484;
    background: transparent !important;
    width: 203px;
    /* Unterstrich: 2px, default grau #838484 (Figma). Nur Ausbildungs-Panel
       überschreibt dies mit Cluster-Farben via .{cluster}-nav. */
    border-bottom: 2px solid #838484;
    padding-bottom: 0;
    transition: border-color 0.15s;
}

.nav-card-img {
    width: 203px;
    height: 78px;
    object-fit: cover;
    background: #f5f5f5;
    margin-bottom: 12px;
    transition: filter 0.15s;
}

.nav-card-label {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.15;
    color: #838484;
    /* Figma: Text-Box 36 hoch (2 Zeilen), darunter 13px bis zum Unterstrich */
    min-height: 36px;
    margin-bottom: 13px;
    display: block;
}

/* Hover Style B (einheitlich für ALLE Style-B Panels):
   - Text wird bold
   - Bild wird leicht abgedunkelt (wie Style A, brightness 0.88)
   - Farbiger Unterstrich wird ebenfalls abgedunkelt
   - KEIN farbiger Block-BG */
.nav-card:hover .nav-card-label {
    font-weight: 700;
    text-decoration: none !important;
}

.nav-card:hover .nav-card-img {
    filter: brightness(0.88);
}

/* Farbige Unterstriche — konsistent zu den Cluster-Kacheln im Themenüberblick:
   co=rot · af=dunkelblau · uf=hellblau · im=grün · sk=orange.
   Nur das Ausbildungs-Panel nutzt diese; andere Panels bleiben grau.
   Hover-Farben: ~75% Lightness der Basis für einheitliches "abgedunkelt". */
.nav-card.co-nav { border-bottom-color: #E11E00; }   /* Controlling */
.nav-card.af-nav { border-bottom-color: #035087; }   /* Accounting & Finance */
.nav-card.uf-nav { border-bottom-color: #25AED5; }   /* Business Development */
.nav-card.im-nav { border-bottom-color: #7AAA1D; }   /* Information Management */
.nav-card.sk-nav { border-bottom-color: #F18803; }   /* Soziale Kompetenzen */

.nav-card:hover                { border-bottom-color: #4a4a4a; }   /* Grau dunkler */
.nav-card.co-nav:hover         { border-bottom-color: #9e1500; }
.nav-card.af-nav:hover         { border-bottom-color: #023862; }
.nav-card.uf-nav:hover         { border-bottom-color: #1a7a96; }
.nav-card.im-nav:hover         { border-bottom-color: #567813; }
.nav-card.sk-nav:hover         { border-bottom-color: #a86100; }

/* Gradient-Kachel statt Bild — Figma Inhouse Training Use-Case-Cards (rot). */
.nav-card.gradient-red .nav-card-img {
    background: linear-gradient(180deg, #E11E00 0%, #B91901 100%);
}


/* === Service-Team Aside (Figma: 238×298, bündig an rechter Panel-Kante) = */
.nav-panel-team {
    position: relative;
    width: 238px;
    height: 298px;
    background: #fff;
    overflow: hidden;
    margin: 0;   /* kein Gap zur Items-Trennlinie */
}

.nav-panel-team::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--team-img, none);
    background-size: cover;
    background-position: center top;
    z-index: 0;
}

/* Modifier: Bild weiter unten zeigen (für Service-Teams ausser Placeholder).
   TODO Walera: Wert anpassen — 30% = Bildmitte rutscht nach unten,
   höhere % = noch weiter runter. Alternativ feste px (z. B. 40px). */
.nav-panel-team.team-img-down::before {
    background-position: center 30%;
}

/* Unterer Bild-Verlauf — etwas kompakter als vorher (55% → 80% fade-in) */
.nav-panel-team::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 55%);
    z-index: 1;
    pointer-events: none;
}

.nav-panel-team .nav-panel-headline {
    position: relative;
    z-index: 2;
    padding: 30px 22px 0;
    margin: 0;
}

/* Service-Team Buttons — 5px höher als Figma (User-Anpassung: y=185/222) */
.nav-team-tel,
.nav-team-mail {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 16px;
    width: 206px;
    height: 28px;
    padding: 8px 15px;
    background: #E11E00;
    color: #fff;
    text-decoration: none !important;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.nav-team-tel { top: 185px; }
.nav-team-mail { top: 222px; }

.nav-team-tel:hover,
.nav-team-mail:hover {
    background: #b31700;
    color: #fff;
}

/* === Nur für Test ================================== */
.site-content:lang(de-DE) {
    margin-top: 116px;
}

.suche-info-box {
  margin-top: 0px;
  margin-left: -106px;
}

.sprache-info-box {
  margin-top: 0px;
  margin-left: -106px;
}

.warenkorb-info-box {
  margin-top: 0px;
  margin-left: -106px;
}

.merkzettel-info-box {
  margin-top: 0px;
  margin-left: -106px;
}

.login-info-box {
  margin-top: 0px;
  margin-left: -106px;
}

.seminarfinder {
  margin-right: 0px;
}

.myCa-login-header-icon {
    font-size: 16px;
    margin-top: 0px;
}

.sticky-lightbox-n65j46 {
  z-index: 99 !important;
}