.pl-nav atomic-dropdown:not(:defined){
    display:none;
}
.pl-nav{
    margin-left: calc(var(--plnav-shift-left-mobile, 0px) * -1);
}
@media screen and (min-width: 578px){
    .pl-nav{
        margin-left: calc(var(--plnav-shift-left, 0px) * -1);
    }
}
.pl-nav .action-link{
    line-height:1em;
}
.pl-nav > ul.pl-nav-list{
    display: flex;
    margin: 0;
    flex-wrap: wrap;
    font-family: var(--plate-nav-l0-font, Arial);
    gap: var(--plate-nav-l0-gap, 7px) !important;
}
.pl-nav > ul ul{
    font-family: var(--plate-nav-l0-font, Arial);
}
.plate-mainNavigation{
    --acn-click-el-color: var(--plate-nav-l0-color, white);
}
.pl-nav.-vertical > ul{
    flex-direction: column;
}
.pl-nav.-vertical > ul > li{
    line-height: 1em;
}
.pl-nav li{list-style-type: none;}
.pl-nav atomic-dropdown{
    --atomic-dropdown-content-background: var(--plate-nav-l1-background, #ffffffee) !important;
}
.pl-nav atomic-dropdown::part(list-inner){
    backdrop-filter: blur(3px);
}
.pl-nav atomic-dropdown::part(slide-inner){
    box-shadow: var(--plate-nav-dropdown-shadow, none);
}
.pl-nav atomic-dropdown{
    --atomic-dropdown-space-top: var(--plate-nav--dropdown-space-top, 30px);
}
[stuck] .pl-nav atomic-dropdown{
    --atomic-dropdown-space-top: var( --plate-nav--dropdown-space-top-stuck, 30px) !important;
}
.pl-nav atomic-dropdown .pl-subnav.-simple{
    width: var(--plate-nav-l1-megamenu-width, 200px);
    max-width: 100%;
}
.pl-nav atomic-dropdown .pl-subnav.-megamenu{
    width: var(--plate-nav-l1-megamenu-width, 500px);
    max-width: 100%;
    hyphens: auto;
}
.pl-nav-entry.-homelink .pl-nav-link{
    --bs-icon-color: var(--plate-nav-homelink-color, white);
}
.pl-nav-entry a.pl-nav-link.btn.btn-overview{
    background: var(--plate-nav-l0-btn-overview-background, var(--bs-primary, #22509a));
    color: var(--plate-nav-l0-btn-overview-color, inherit);
    border-radius: var(--plate-nav-l0-btn-overview-radius, 2px);
}
.pl-nav-entry a.pl-nav-link.btn.btn-overview:hover{
    background: var(--plate-nav-l0-btn-overview-background-hover, var(--bs-primary-hover, #22509a));
    color: var(--plate-nav-l0-btn-overview-color-hover, inherit);
}
.pl-nav-link{
    display: flex;
    align-items: center;
    background: var(--plate-nav-l0-btn-background, #22509a);
    color: var(--atomic-button-color, inherit);
    padding: var(--atomic-button-padding, 7px) !important;
    border-radius: var(--atomic-button-radius, 2px);
    cursor: pointer;
}
.pl-nav-link.-with-icon > div{
    gap: var(--plate-nav-iconlink-gap, 3px);
}
.pl-nav-link > span.label{
    white-space: nowrap;
}
.pl-nav-link.-homelink:hover{
    --bs-icon-color: var(--plate-nav-homelink-hover-color, white);
}

.pl-nav-link.-l0 {
    font-size: var(--plate-nav-l0-fontsize, inherit);
    font-weight: var(--plate-nav-l0-fontweight, inherit);
    text-transform: var(--plate-nav-l0-text-transform, none);
    color: var(--plate-nav-l0-color, white);
    background: var(--plate-nav-l0-btn-background, transparent);
    transition: font-size 0.25s ease-in-out;
    --vars-icon-size: var(--pl-nav-link-l0-iconsize, inherit);
    --bs-icon-color: var(--plate-nav-l0-iconcolor, white);
}
.pl-nav-link.-l0:hover,
.pl-nav-link.-l0:hover > div > span{
    --atomic-button-color-hover: var(--plate-nav-l0-hover-color, #eee);
    color: var(--plate-nav-l0-hover-color, #eee);
}
.pl-nav-link.-l0.btn:hover{
    background: var(--plate-nav-l0-hover-background, transparent);
}
.pl-nav-link.-l0:hover{
    --bs-icon-color: var(--plate-nav-l0-hover-color, #eee);
}
.pl-subnav{
    gap: var(--plate-nav-l1-gap, 0) !important;
}
.pl-subnav.-simple{
    display: flex;
    flex-direction: column;
}
.pl-subnav .pl-nav-link.linkHasImage{
    display: flex;
    gap: 10px;
}
/* Mega-Menue als Raster (Navigations-FlexForm: settings.megaMenuColumns).
   Ohne die Klasse `-grid` bleibt alles wie bisher (zwei feste col-6-Listen). */
/* Horizontale Ausrichtung des Panels.
   `atomic-dropdown` legt sein Panel absolut an der LINKEN Kante des ausloesenden
   Eintrags ab; ein breites Mega-Menue laeuft damit rechts aus dem Viewport.
   Die Dropdown-Partial setzt dafuer seit jeher
   `--atomic-dropdown-slidewrapper-translatex`, das die aktuelle Fassung der
   Web-Komponente aber nicht mehr auswertet (toter Code).
   Hier wird die Verschiebung fuer die NEUE Rastervariante nachgeholt — bewusst
   nur dort, damit bestehende Mega-Menues (zwei col-6-Listen) unveraendert
   bleiben. Beide Werte sind Slots und vom Theme ueberschreibbar. */
/* Panel ueber die volle Viewportbreite, Inhalt darin zentriert.
   `position: fixed` OHNE `top` behaelt die statische (vertikale) Position bei —
   das Panel bleibt also unter seinem Eintrag, wird horizontal aber nicht mehr
   an dessen linker Kante festgenagelt. Ohne das laeuft ein breites Mega-Menue
   je nach Position des Eintrags links oder rechts aus dem Bild. */
.pl-nav atomic-dropdown.-mm-grid::part(slide-inner){
    position: fixed;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    /* Hover-Bruecke nachbauen: die Komponente ueberbrueckt den Abstand Link → Panel
       ueber das Padding von `.slide` (`--atomic-dropdown-space-top`). Sobald das
       Panel `position: fixed` ist, verlaesst es den Fluss und `.slide` kollabiert
       auf einen schmalen Streifen — die Maus trifft beim Runterfahren den Header,
       `mouseout` schliesst das Menue. Deshalb dieselbe Distanz hier als
       transparentes Padding (hoverbar, im Shadow-DOM) plus negativer Margin, damit
       der sichtbare Inhalt an seiner Position bleibt. */
    margin-top: calc(-1 * var(--atomic-dropdown-space-top, 30px));
    padding-top: var(--atomic-dropdown-space-top, 30px);
    box-shadow: none;
}
/* Schatten in der Rastervariante am sichtbaren Panel, nicht an der Bruecke. */
.pl-nav atomic-dropdown.-mm-grid::part(list-inner){
    box-shadow: var(--plate-nav-dropdown-shadow, none);
}
/* Schliessen-Knopf der Raster-Variante (Markup nur dort). Position relativ zum
   Panel; Optik ueber Slots, damit Themes sie ohne !important setzen koennen. */
.pl-subnav.-megamenu.-grid{
    position: relative;
}
/* Der Knopf steht NEBEN dem Inhalt, nicht darueber: das Panel laeuft ueber die
   volle Viewportbreite, der Inhalt ist darin zentriert — rechts daneben bleibt
   Platz. `right` rueckt ihn um seine Breite + Abstand nach aussen, aber hoechstens
   so weit, wie dieser Rand wirklich hergibt (max()/min() decken schmale Fenster ab;
   reicht der Platz nicht, bleibt er innen und das Raster haelt rechts Abstand). */
.pl-subnav.-megamenu.-grid{
    --plate-nav-mm-close-size-total: calc(var(--plate-nav-mm-close-size, 2.25rem) + var(--plate-nav-mm-close-offset, .5rem));
    /* Freier Rand = (Viewport - tatsaechliche Panelbreite) / 2 - Aussenabstand.
       Panelbreite aus der Konfiguration (Seitenfeld), gegen den Viewport gedeckelt —
       KEIN `100%`: Prozentwerte in einer Custom Property loesen je Verwendungsort
       gegen einen anderen Bezug auf und liefern hier unbrauchbare Werte. */
    --plate-nav-mm-panel-width: min(
        var(--plate-nav-l1-megamenu-width, 500px),
        calc(100vw - 2 * var(--plate-nav-mm-viewport-gutter, 24px))
    );
    --plate-nav-mm-close-outdent: min(
        var(--plate-nav-mm-close-size-total),
        max(0px, calc((100vw - var(--plate-nav-mm-panel-width)) / 2 - var(--plate-nav-mm-viewport-gutter, 24px)))
    );
}
.pl-subnav.-megamenu.-grid .pl-subnav-close{
    position: fixed;
    top: var(--plate-nav-mm-close-offset, .5rem);
    right: var(--plate-nav-mm-close-offset, .5rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--plate-nav-mm-close-size, 2.25rem);
    height: var(--plate-nav-mm-close-size, 2.25rem);
    padding: 0;
    border: var(--plate-nav-mm-close-border, 1px solid transparent);
    border-radius: var(--plate-nav-mm-close-radius, 999px);
    background: var(--plate-nav-mm-close-background, transparent);
    color: var(--plate-nav-mm-close-color, inherit);
    cursor: pointer;
    line-height: 0;
}
.pl-subnav.-megamenu.-grid .pl-subnav-close:hover,
.pl-subnav.-megamenu.-grid .pl-subnav-close:focus-visible{
    background: var(--plate-nav-mm-close-hover-background, rgba(0,0,0,.06));
    color: var(--plate-nav-mm-close-hover-color, inherit);
}
.pl-subnav.-megamenu.-grid{
    /* Breite weiterhin aus dem Seitenfeld „Breite des Ausklappmenues"
       (--plate-nav-l1-megamenu-width), nur gegen den Viewport gedeckelt. */
    max-width: calc(100vw - 2 * var(--plate-nav-mm-viewport-gutter, 24px));
    margin-inline: auto;
    /* Hoehenbremse: viele Untereintraege mit Bild werden sonst hoeher als der
       Viewport. Default `none` = unveraendert; ein Theme setzt einen Wert. */
    max-height: var(--plate-nav-mm-max-height, none);
    overflow-y: auto;
}
.pl-subnav.-megamenu.-grid > .pl-subnav-grid{
    /* Reserve nur fuer den Teil des Knopfes, der noch ueber dem Inhalt liegt.
       `margin`, nicht `padding`: die Liste traegt im Markup Bootstraps `.p-0`
       (`padding: 0 !important`) — ein Padding hier waere wirkungslos. */
    display: grid;
    grid-template-columns: repeat(var(--plate-nav-mm-columns, 2), minmax(0, 1fr));
    gap: var(--plate-nav-mm-gap, var(--plate-nav-l1-gap, .5rem));
    margin: 0;
    /* NACH dem `margin: 0`-Reset: Reserve fuer den Teil des Knopfes, der noch
       ueber dem Inhalt liegt (`margin`, nicht `padding` — die Liste traegt im
       Markup Bootstraps `.p-0` mit `!important`). */
    margin-right: max(0px, var(--plate-nav-mm-close-size-total) - var(--plate-nav-mm-close-outdent, 0px));
    padding: 0;
    list-style: none;
}
.pl-subnav.-megamenu.-grid > .pl-subnav-grid > .pl-nav-entry{
    display: flex;
    min-width: 0;
}
.pl-subnav.-megamenu.-grid .pl-nav-link{
    flex: 1 1 auto;
    min-width: 0;
}
/* Karten-Anordnung: Bild oben, Text darunter — greift nur, wenn das Thumbnail
   ein Querformat ist (Ratio-Auswahl der FlexForm setzt die Klasse nicht, die
   Optik uebernimmt das Theme; hier nur die neutrale Grundordnung). */
.pl-subnav.-megamenu.-grid .pl-nav-link.linkHasImage{
    flex-direction: column;
    align-items: stretch;
}
.pl-subnav.-megamenu.-grid .pl-nav-link.linkHasImage .figure-element{
    order: 1;
}

/* Thumbnail LINKS neben dem Text (Navigations-FlexForm:
   settings.megaMenuThumbPosition = left). Ohne die Klasse `-thumb-left` bleibt
   es bei der bisherigen Anordnung „Bild ueber dem Text".
   Die Bildbreite ist ueber `--plate-nav-mm-thumb-width` themebar; die Hoehe
   ergibt sich aus dem Seitenverhaeltnis, das die Ratio-Auswahl der FlexForm
   zuschneidet — hier wird KEIN Format erzwungen. */
/* Grid statt Flex-Zeile: Titel (`.text-element`) und Kurztext
   (`.abstract-element`) sind GESCHWISTER des Bildes, keine gemeinsame Huelle.
   Als Flex-Zeile stuenden alle drei nebeneinander — der Titel bekaeme eine
   Restspalte von wenigen Zeichen und zerbraeche in Silben (gemessen 28.08.2026).
   Im Grid spannt das Bild ueber beide Zeilen, Titel und Kurztext stapeln sich
   rechts daneben. Ohne Kurztext bleibt die zweite Zeile einfach leer. */
.pl-subnav.-megamenu.-grid.-thumb-left .pl-nav-link.linkHasImage{
    display: grid;
    grid-template-columns: var(--plate-nav-mm-thumb-width, 88px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--plate-nav-mm-thumb-gap, 12px);
    row-gap: .25rem;
    align-items: start;
}
.pl-subnav.-megamenu.-grid.-thumb-left .pl-nav-link.linkHasImage .figure-element{
    grid-column: 1;
    grid-row: 1 / span 2;
    width: var(--plate-nav-mm-thumb-width, 88px);
}
.pl-subnav.-megamenu.-grid.-thumb-left .pl-nav-link.linkHasImage .text-element{
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.pl-subnav.-megamenu.-grid.-thumb-left .pl-nav-link.linkHasImage .abstract-element{
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}
.pl-subnav.-megamenu.-grid .pl-nav-link.linkHasImage .text-element{
    order: 2;
}
.pl-subnav.-megamenu.-grid .pl-nav-link .abstract-element{
    order: 3;
    display: block;
    font-size: var(--plate-nav-mm-abstract-fontsize, .82em);
    font-weight: var(--plate-nav-mm-abstract-fontweight, 400);
    text-transform: none;
    letter-spacing: normal;
    color: var(--plate-nav-mm-abstract-color, inherit);
}
.pl-subnav.-megamenu.-grid .pl-nav-link .figure-element img{
    display: block;
    width: 100%;
    height: auto;
}
.pl-subnav .pl-nav-link.linkHasImage .text-element{
    order: 2;
}
.pl-subnav .pl-nav-link.linkHasImage .figure-element{
    order: 1;
}
/* li1 */
.pl-nav .pl-nav-link.-l1{
    font-size: var(--plate-nav-l1-fontsize, inherit);
    font-weight: var(--plate-nav-l1-fontweight, inherit);
    text-transform: var(--plate-nav-l1-text-transform, none);
    color: var(--plate-nav-l1-color, inherit);
    background: var(--plate-nav-l1-btn-background, white);
    --atomic-button-background-hover: var(--plate-nav-l1-btn-hover-background, inherit);
    --vars-icon-size: var(--pl-nav-link-l1-iconsize, inherit);
}
.pl-nav .pl-nav-link.-l1:hover{
    color: var(--plate-nav-l1-hover-color, #eee);
    background: var(--plate-nav-l1-hover-background, transparent);
}
/* stuck */
[stuck] .pl-nav-link.-l0{
    background: var(--plate-nav-l0-stuck-background, transparent);
}
[stuck] .pl-nav.-stuckable .pl-nav-link.-l0{
    color: var(--plate-nav-l0-stuck-color, inherit);
    background: var(--plate-nav-l0-stuck-btn-background, inherit);
    --atomic-button-background-hover: var(--plate-nav-l0-stuck-btn-hover-background, inherit);
}
[stuck] .pl-nav.-stuckable .pl-nav-link.-l0,
[stuck] .pl-nav.-stuckable .pl-nav-link-wrapper.-l0 > atomic-click{
    --bs-icon-color: var(--bs-icon-stuck-color, black) !important;
    color: var(--plate-nav-l0-stuck-color, var(--plate-nav-l0-color, inherit));
    background: var(--plate-nav-l0-stuck-background, inherit);
}
[stuck] .pl-nav.-stuckable .pl-nav-link.-l0:hover{
    color: var(--plate-nav-l0-stuck-hover-color, var(--plate-nav-l0-hover-color, inherit));
    --bs-icon-hover-color: var(--bs-icon-stuck-hover-color, var(--plate-nav-l0-hover-color, inherit));
}
/* responsive */
@media (max-width:767px){
    .pl-nav.nav-m-column > ul{
        flex-direction: column;
    }
}