/* ============================================================
Header — Divi 5 Menu custom styles (Menu ID 145)
Targets the et_pb_menu modules inside header layout 363986.
- et_pb_menu_0_tb_header = DESKTOP
- et_pb_menu_1_tb_header = MOBILE
============================================================ */
/* -----------------------------------------------------------
Logo sizing — exact values from DiviMenus shortcode
Desktop row: 230px (desktop) / 330px (tablet) / 153px (phone)
Mobile row: 252px (desktop) / 252px (tablet) / 246px (phone)
----------------------------------------------------------- */
:root { --mi-bar-h: 80px; }
.mi-menu-desktop .et_pb_menu__logo img {
width: 230px !important;
max-width: 230px !important;
height: auto !important;
/* viewBox 507.4×166 — reserviert die Höhe, bevor das SVG lädt (kein CLS). */
aspect-ratio: 507.4 / 166 !important;
}
/* Mobile-Logo: breitenbasiert (SVG rendert zuverlässig), max-width:100%
hält den Hamburger sichtbar. Die Höhe ergibt sich fix aus der Breite,
wächst also NICHT mit der Schriftgröße. */
.mi-menu-mobile .et_pb_menu__logo img {
width: 252px !important;
max-width: 100% !important;
height: auto !important;
/* viewBox 507.4×148 — reserviert die Höhe, bevor das SVG lädt (kein CLS). */
aspect-ratio: 507.4 / 148 !important;
}
@media (max-width: 980px) {
.mi-menu-desktop .et_pb_menu__logo img { width: 330px !important; max-width: 330px !important; }
.mi-menu-mobile .et_pb_menu__logo img { width: 252px !important; max-width: 100% !important; }
}
@media (max-width: 767px) {
.mi-menu-desktop .et_pb_menu__logo img { width: 153px !important; max-width: 153px !important; }
.mi-menu-mobile .et_pb_menu__logo img { width: 246px !important; max-width: 100% !important; }
}
.mi-menu-desktop .et_pb_menu__logo-wrap { margin: 10px 0 6px 0; padding-left: 10px; }
.mi-menu-mobile .et_pb_menu__logo-wrap { margin: 10px 0 0 25px; }
/* -----------------------------------------------------------
iOS „Font 125 %" (= Safari-Seitenzoom): Header muss sich
ausgehen, der Hamburger darf nie abgeschnitten werden.
1. Logo-Spalte darf schrumpfen (min-width:0 + flex-shrink),
Hamburger-Spalte (.et_pb_menu__wrap) bleibt fix (flex 0 0 auto,
siehe Layout-Sektion weiter unten).
2. Die Sticky-Mobile-Zeile an die (gezoomte) Viewport-Breite
binden statt fix 375px — sonst läuft der rechte Rand raus.
----------------------------------------------------------- */
html body .mi-menu-mobile .et_pb_menu__logo-wrap {
flex: 0 1 auto !important;
min-width: 0 !important;
}
html body .et_pb_section_1_tb_header .et_pb_row_2_tb_header:not(.et_pb_sticky--editing) {
width: 100% !important;
max-width: 1300px !important;
box-sizing: border-box !important;
}
/* -----------------------------------------------------------
Typography — copied from DiviMenus original attrs
Desktop: 18px, #474747
Mobile: 24px, #FFFFFF, weight 600, letter-spacing .05px
----------------------------------------------------------- */
.mi-menu-desktop .et-menu li > a {
font-size: 18px !important;
color: #474747 !important;
font-weight: 500;
}
.mi-menu-mobile .et-menu li > a {
font-size: 18px !important;
color: #FFFFFF !important;
font-weight: 500;
}
.mi-menu-desktop .et_mobile_menu,
.mi-menu-mobile .et_mobile_menu {
background-color: #44546a !important;
border-top-color: #44546a !important;
text-align: center !important;
padding: 10px 0 !important;
}
.mi-menu-desktop .et_mobile_menu li,
.mi-menu-mobile .et_mobile_menu li {
border: 0 !important;
padding: 0 !important;
}
.mi-menu-desktop .et_mobile_menu li a,
.mi-menu-mobile .et_mobile_menu li a {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 600 !important;
letter-spacing: .05em !important;
text-transform: uppercase !important;
text-align: center !important;
padding: 14px 0 !important;
display: block !important;
cursor: pointer !important;
}
.mi-menu-desktop .et_mobile_menu li,
.mi-menu-mobile .et_mobile_menu li,
.mi-menu-mobile .mobile_menu_bar,
.mi-menu-mobile .mobile_nav {
cursor: pointer !important;
}
/* Newsletter inside mobile overlay — flat light block, dark text */
.mi-menu-desktop .et_mobile_menu li.dd-newsletter-btn > a,
.mi-menu-mobile .et_mobile_menu li.dd-newsletter-btn > a {
background: #c9d1dc !important;
color: #44546a !important;
border-radius: 0 !important;
margin: 8px 18% !important;
padding: 14px 0 !important;
font-weight: 600 !important;
}
/* EN flag HIDDEN in mobile overlay (per user spec) */
.mi-menu-desktop .et_mobile_menu li.dd-language-switcher,
.mi-menu-mobile .et_mobile_menu li.dd-language-switcher {
display: none !important;
}
/* Mobile: NO hover at all — kills every state on every selector */
html body .mi-menu-desktop .et_mobile_menu li,
html body .mi-menu-mobile .et_mobile_menu li,
html body .mi-menu-desktop .et_mobile_menu li:hover,
html body .mi-menu-mobile .et_mobile_menu li:hover,
html body .mi-menu-desktop .et_mobile_menu li.current-menu-item,
html body .mi-menu-mobile .et_mobile_menu li.current-menu-item,
html body .mi-menu-desktop .et_mobile_menu li.current-menu-ancestor,
html body .mi-menu-mobile .et_mobile_menu li.current-menu-ancestor,
html body .mi-menu-desktop .et_mobile_menu li.current-menu-item > a,
html body .mi-menu-mobile .et_mobile_menu li.current-menu-item > a,
html body .mi-menu-desktop .et_mobile_menu li.current-menu-ancestor > a,
html body .mi-menu-mobile .et_mobile_menu li.current-menu-ancestor > a,
html body .mi-menu-desktop .et_mobile_menu li > a,
html body .mi-menu-mobile .et_mobile_menu li > a,
html body .mi-menu-desktop .et_mobile_menu li > a:hover,
html body .mi-menu-mobile .et_mobile_menu li > a:hover,
html body .mi-menu-desktop .et_mobile_menu li > a:focus,
html body .mi-menu-mobile .et_mobile_menu li > a:focus,
html body .mi-menu-desktop .et_mobile_menu li > a:active,
html body .mi-menu-mobile .et_mobile_menu li > a:active {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
opacity: 1 !important;
}
/* Newsletter item keeps its own styling — re-apply AFTER the kill-switch */
html body .mi-menu-desktop .et_mobile_menu li.dd-newsletter-btn > a,
html body .mi-menu-mobile .et_mobile_menu li.dd-newsletter-btn > a {
background: #c9d1dc !important;
background-color: #c9d1dc !important;
color: #44546a !important;
}
/* Kill Divi's default 1px divider lines between mobile items */
html body .mi-menu-desktop .et_mobile_menu li a,
html body .mi-menu-mobile .et_mobile_menu li a,
html body .mi-menu-desktop .et_mobile_menu li,
html body .mi-menu-mobile .et_mobile_menu li {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
}
/* -----------------------------------------------------------
Newsletter item — desktop pill (higher-specificity to beat Divi)
----------------------------------------------------------- */
html body .mi-menu-desktop .et-menu li.dd-newsletter-btn > a {
background: #697688 !important;
background-color: #697688 !important;
color: #ffffff !important;
padding: 6px 20px !important;
border-radius: 22px !important;
font-weight: 500 !important;
font-size: 16px !important;
line-height: 1.5 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .2) !important;
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html body .mi-menu-desktop .et-menu li.dd-newsletter-btn > a:hover {
background: #556374 !important;
background-color: #556374 !important;
color: #ffffff !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, .28) !important;
transform: translateY(-1px);
}
/* -----------------------------------------------------------
EN = language-switcher (text replaced by image)
----------------------------------------------------------- */
.mi-menu-desktop li.dd-language-switcher > a,
.mi-menu-mobile li.dd-language-switcher > a {
font-size: 0 !important;
line-height: 0 !important;
width: 28px;
height: 28px;
display: inline-block;
background-image: url('../img/flag-en.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
padding: 0 !important;
vertical-align: middle;
}
/* -----------------------------------------------------------
MOBILE menu — hide 2nd level (sub-menus) entirely
----------------------------------------------------------- */
.mi-menu-desktop .et_mobile_menu .sub-menu,
.mi-menu-mobile .et_mobile_menu .sub-menu {
display: none !important;
}
.mi-menu-desktop .et_mobile_menu li.menu-item-has-children > a::after,
.mi-menu-mobile .et_mobile_menu li.menu-item-has-children > a::after {
display: none !important;
}
/* -----------------------------------------------------------
MOBILE hamburger — weißer Outline-Kreis auf dunklem Header,
Icon (Burger/X) auch weiß — matcht das Original
----------------------------------------------------------- */
.mi-menu-mobile .mobile_menu_bar::before {
font-size: 30px;
line-height: 40px;
margin: 0;
position: static;
color: #ffffff !important;
}
.mi-menu-mobile .mobile_nav.closed .mobile_menu_bar::before {
content: "\61" !important; /* Burger */
color: #ffffff !important;
font-size: 30px !important;
}
.mi-menu-mobile .mobile_nav.opened .mobile_menu_bar::before {
content: "\4d" !important; /* X */
color: #ffffff !important;
font-size: 30px !important;
line-height: 40px !important;
}
/* Kreis = weiße Kontur, transparent gefüllt — beide Zustände */
.mi-menu-mobile .mobile_menu_bar,
.mi-menu-mobile .mobile_nav.closed .mobile_menu_bar,
.mi-menu-mobile .mobile_nav.opened .mobile_menu_bar {
background: transparent !important;
background-color: transparent !important;
border: 2px solid #ffffff !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
transition: background-color .2s ease;
}
.mi-menu-mobile .mobile_menu_bar:hover {
background: rgba(255,255,255,.08) !important;
}
/* Mobile-Menü Layout (gilt < 1300px):
- Logo links, Hamburger rechts, beide vertikal zentriert
- KEIN horizontaler Nav (et-menu-nav komplett aus)
- Expandiertes Menü volle Viewport-Breite unter dem Header */
.mi-menu-mobile,
.mi-menu-mobile .et_pb_menu_inner_container {
position: relative !important;
}
html body .mi-menu-mobile .et_pb_menu__menu,
html body .mi-menu-mobile nav.et-menu-nav {
display: none !important;
}
html body .mi-menu-mobile .et_pb_menu_inner_container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-right: 20px !important;
height: var(--mi-bar-h) !important; /* feste Höhe → wächst nicht mit Font/Inhalt */
}
html body .mi-menu-mobile .et_pb_menu__wrap {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
margin-left: auto !important;
flex: 0 0 auto !important;
}
html body .mi-menu-mobile .et_mobile_nav_menu,
html body .mi-menu-mobile .mobile_nav {
display: inline-flex !important;
align-items: center !important;
float: none !important;
margin: 0 !important;
position: static !important;
transform: none !important;
}
/* Expandiertes Mobile-Menü volle Viewport-Breite unter dem Header */
html body .mi-menu-mobile .et_mobile_menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
text-align: center !important;
margin: 0 !important;
box-sizing: border-box !important;
}
/* -----------------------------------------------------------
Search icon (desktop only) — Divi's eingebautes Inline-Search
wird komplett ausgeblendet; unser eigenes Overlay übernimmt.
----------------------------------------------------------- */
/* Search-Button absolut am rechten Rand des Menu-Moduls fixieren —
keine Abhängigkeit mehr von flex/wrap-Verhalten von Divi */
.mi-menu-desktop {
position: relative !important;
}
html body .mi-menu-desktop .et_pb_menu__search-button {
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
z-index: 5 !important;
}
.mi-menu-desktop .et_pb_menu__search-button::before {
color: inherit;
font-size: 20px;
}
/* Damit der Suche-Button nicht über das EN-Flag steht: Menü-Inhalt rechts Padding */
.mi-menu-desktop .et_pb_menu_inner_container {
padding-right: 60px !important;
}
/* Divi's eingebautes Suchfeld (das den Menü-Container überschreibt) wegblenden */
.mi-menu-desktop .et_pb_menu__search,
.mi-menu-desktop .et_pb_menu__search-form,
.mi-menu-desktop .et_pb_menu__search-container {
display: none !important;
}
/* Menü bleibt IMMER sichtbar — Divi toggelt sonst diverse "is-search"-States,
die die Menu-Items ausblenden. Hier hart zurückholen. */
html body .mi-menu-desktop .et_pb_menu__menu,
html body .mi-menu-desktop .et-menu-nav,
html body .mi-menu-desktop .et-menu {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
list-style: none !important;
}
html body .mi-menu-desktop .et-menu > li {
opacity: 1 !important;
visibility: visible !important;
list-style: none !important;
list-style-type: none !important;
}
html body .mi-menu-desktop .et-menu > li::marker {
content: "" !important;
display: none !important;
}
html body .mi-menu-desktop.et_pb_is_search .et_pb_menu__menu,
html body .mi-menu-desktop .et_pb_menu_visible .et_pb_menu__menu {
display: flex !important;
opacity: 1 !important;
}
/* -----------------------------------------------------------
Top-Bar Social-Menü — natives WP-Menu (ID 146) über
et_pb_menu mit module_class="mi-topbar-menu" in Section 0.
Text-Labels ausblenden, Icons via mask-image auf dem .
----------------------------------------------------------- */
/* alte DiviMenus-Zeile komplett verstecken */
.et_pb_divimenus,
.divi-menus-outer-container {
display: none !important;
}
/* Top-Section (GERMAN - Top Header Sticky) kompakt + volle Breite */
.et_pb_section_0_tb_header {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
.et_pb_section_0_tb_header .et_pb_row {
width: 100% !important;
max-width: 100% !important;
padding: 4px 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.et_pb_section_0_tb_header .et_pb_column {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Eigenes kontrolliertes Rechts-Padding für die Icon-Reihe */
.mi-topbar-menu {
padding-right: 30px !important;
}
@media (max-width: 767px) {
.mi-topbar-menu {
padding-right: 14px !important;
}
}
.mi-topbar-menu,
.mi-topbar-menu .et_pb_menu_inner_container,
.mi-topbar-menu .et_pb_menu__menu,
.mi-topbar-menu .et_pb_menu__wrap {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* flacher Streifen — alles an Default-Abstand rausnehmen */
.mi-topbar-menu {
padding-top: 2px !important;
padding-bottom: 2px !important;
min-height: 0 !important;
line-height: 1 !important;
}
.mi-topbar-menu .et_pb_menu_inner_container {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
min-height: 0 !important;
line-height: 1 !important;
width: 100% !important;
}
.mi-topbar-menu .et_pb_menu__wrap {
margin-left: auto !important;
width: auto !important;
flex: 0 0 auto !important;
}
.mi-topbar-menu .et_pb_menu__menu {
text-align: right !important;
margin-left: auto !important;
}
.mi-topbar-menu nav.et-menu-nav {
float: right !important;
padding: 0 !important;
background: transparent !important;
width: auto !important;
margin-left: auto !important;
display: block !important;
}
.mi-topbar-menu ul.et-menu {
margin-left: auto !important;
justify-content: flex-end !important;
}
.mi-topbar-menu ul.et-menu {
display: flex !important;
gap: 14px !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.mi-topbar-menu ul.et-menu li {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
background: transparent !important;
}
.mi-topbar-menu ul.et-menu li::before,
.mi-topbar-menu ul.et-menu li::marker { content: "" !important; display: none !important; }
/* Menü-Link = Icon (Text wird per font-size:0 + color:transparent versteckt) */
.mi-topbar-menu ul.et-menu li > a {
display: inline-block !important;
width: 22px !important;
height: 22px !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
background-color: #ffffff !important;
-webkit-mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-size: contain !important;
mask-repeat: no-repeat !important;
mask-position: center !important;
transition: background-color .15s ease, transform .15s ease;
opacity: .95;
}
.mi-topbar-menu ul.et-menu li > a:hover {
background-color: #d6b754 !important;
color: transparent !important;
transform: scale(1.08);
opacity: 1;
}
.mi-topbar-menu .et_pb_menu__search-button,
.mi-topbar-menu .et_pb_menu__search { display: none !important; }
/* Topbar-Menü behält seine Icon-Reihe auf ALLEN Breakpoints — kein Hamburger */
.mi-topbar-menu .et_mobile_nav_menu,
.mi-topbar-menu .mobile_menu_bar,
.mi-topbar-menu .mobile_nav {
display: none !important;
}
.mi-topbar-menu .et_pb_menu__menu,
.mi-topbar-menu nav.et-menu-nav {
display: block !important;
float: right !important;
}
.mi-topbar-menu ul.et-menu,
.mi-topbar-menu .et_pb_menu__menu > nav > ul.et-menu {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Position 7: Flagge monochrom — gleicher Stil wie die restlichen Icons
(weißer Pfad via mask, Hover → Gold wie die anderen) */
.mi-topbar-en {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 767px) {
.mi-topbar-menu ul.et-menu { gap: 10px !important; }
.mi-topbar-menu ul.et-menu li > a { width: 18px !important; height: 18px !important; }
}
/* -----------------------------------------------------------
Eigenes Search-Overlay (slideTop wie das Original)
Inline unterhalb der Menu-Section — Top-Bar + Menü bleiben sichtbar.
----------------------------------------------------------- */
.mi-search-overlay {
position: relative;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
z-index: 10;
}
.mi-search-overlay.is-open {
max-height: 120px;
}
.mi-search-inner {
max-width: 980px;
margin: 0 auto;
padding: 22px 28px;
}
.mi-search-form {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.mi-search-input {
flex: 1;
height: 48px;
padding: 0 14px;
border: 0;
border-bottom: 2px solid #44546a;
font-size: 20px;
color: #44546a;
background: transparent;
outline: none;
font-family: inherit;
}
.mi-search-input::placeholder {
color: #9aa3b1;
}
.mi-search-submit {
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: #697688;
cursor: pointer;
position: relative;
transition: background-color .15s ease;
}
.mi-search-submit:hover {
background: #44546a;
}
.mi-search-submit::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.mi-search-close {
width: 40px;
height: 40px;
border: 0;
background: transparent;
font-size: 30px;
line-height: 1;
color: #44546a;
cursor: pointer;
padding: 0;
}
.mi-search-close:hover {
color: #697688;
}
/* -----------------------------------------------------------
Top-level menu item spacing — gleichmäßig via gap statt padding
----------------------------------------------------------- */
.mi-menu-desktop .et-menu {
gap: 36px !important;
}
.mi-menu-desktop .et-menu > li {
padding: 0 !important;
margin: 0 !important;
}
/* Sauberer Abstand zwischen Logo und Home */
.mi-menu-desktop .et-menu > li:first-child,
.mi-menu-desktop .et-menu > li.first {
margin-left: 50px !important;
}
/* Aktives Item: NICHT ausgegraut — gleiche Farbe wie Standard-Items, nur etwas fetter */
html body .mi-menu-desktop .et-menu > li.current-menu-item > a,
html body .mi-menu-desktop .et-menu > li.current-menu-ancestor > a,
html body .mi-menu-desktop .et-menu > li.current_page_item > a,
html body .mi-menu-desktop .et-menu > li.current_page_parent > a,
html body .mi-menu-desktop .et-menu > li.current_page_ancestor > a {
color: #474747 !important;
font-weight: 500 !important;
}
/* Ausnahme: Newsletter-Button bleibt auch als aktive Seite weiß */
html body .mi-menu-desktop .et-menu > li.dd-newsletter-btn.current-menu-item > a,
html body .mi-menu-desktop .et-menu > li.dd-newsletter-btn.current-menu-ancestor > a,
html body .mi-menu-desktop .et-menu > li.dd-newsletter-btn.current_page_item > a,
html body .mi-menu-desktop .et-menu > li.dd-newsletter-btn.current_page_parent > a,
html body .mi-menu-desktop .et-menu > li.dd-newsletter-btn.current_page_ancestor > a {
color: #ffffff !important;
}
/* Sub-menu aktives Item: bleibt weiß (Hintergrund ist blaugrau) */
html body .mi-menu-desktop .et-menu .sub-menu > li.current-menu-item > a,
html body .mi-menu-desktop .et-menu .sub-menu > li.current_page_item > a {
color: #ffffff !important;
font-weight: 600 !important;
}
/* Hover-bridge: invisible 14px strip below parent items that have a
dropdown — keeps the sub-menu open while moving the cursor down */
.mi-menu-desktop .et-menu > li.menu-item-has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -14px;
height: 14px;
background: transparent;
}
/* Remove Divi's auto ">" after items with children + dessen 20px padding-right */
.mi-menu-desktop .et-menu li.menu-item-has-children > a::after {
display: none !important;
}
html body .mi-menu-desktop .et-menu .menu-item-has-children > a:first-child,
html body .mi-menu-desktop .et-menu .menu-item-has-children > a {
padding-right: 0 !important;
}
/* -----------------------------------------------------------
DESKTOP sub-menu (Angebot dropdown)
Dark panel, white text, rounded, speech-bubble arrow, icons
Extra-specific selectors to beat Divi's inline rgba(255,255,255,0).
----------------------------------------------------------- */
html body .mi-menu-desktop ul.sub-menu[class],
html body .mi-menu-desktop .nav li ul[class],
.mi-menu-desktop .nav li ul,
.mi-menu-desktop .et-menu .sub-menu {
background-color: #697688 !important;
opacity: 1 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 18px 14px !important;
margin-top: 0 !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, .22) !important;
min-width: 320px !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
position: absolute !important;
}
/* Invisible hover bridge: fills the visual gap so hover doesn't drop out */
.mi-menu-desktop .et-menu .sub-menu::after {
content: "";
position: absolute;
top: -28px;
left: 0;
right: 0;
height: 28px;
background: transparent;
}
/* Keep parent hover state while moving into the dropdown */
.mi-menu-desktop .et-menu li.menu-item-has-children:hover > .sub-menu,
.mi-menu-desktop .et-menu li.menu-item-has-children .sub-menu:hover {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Speech-bubble arrow pointing at parent item */
.mi-menu-desktop .et-menu .sub-menu::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #697688;
}
/* Sub-menu items */
.mi-menu-desktop .et-menu .sub-menu li {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
width: 100% !important;
}
.mi-menu-desktop .et-menu .sub-menu li a {
color: #ffffff !important;
background: transparent !important;
padding: 14px 24px 14px 58px !important;
font-size: 17px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
border-radius: 0 !important;
position: relative !important;
width: 100% !important;
opacity: 1 !important;
transition: color .15s ease;
}
.mi-menu-desktop .et-menu .sub-menu li a:hover {
background: transparent !important;
color: #d6b754 !important;
}
/* Top-level item hover (Home/Über uns/...) — blue-grey, NOT gold */
html body .mi-menu-desktop .et-menu > li > a:hover {
color: #697688 !important;
}
/* -----------------------------------------------------------
Responsive visibility — avoid desktop + mobile menu overlap
----------------------------------------------------------- */
@media (min-width: 1300px) {
.mi-menu-mobile { display: none !important; }
/* Desktop: flex-order so Newsletter + EN sit after Kontakt visually,
while DB order has them before (for mobile layout) */
.mi-menu-desktop .et-menu {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.mi-menu-desktop .et-menu > li.dd-newsletter-btn {
order: 10 !important;
margin-left: auto !important; /* schiebt Newsletter+EN+Search ans rechte Ende */
}
.mi-menu-desktop .et-menu > li.dd-language-switcher { order: 11 !important; }
}
/* Desktop Menu Row = .et_pb_row_1_tb_header, Mobile Menu Row = .et_pb_row_2_tb_header.
Hohe Spezifität + explizit alle Mobile-Teile ausblenden — Divi hat sonst gern
inline-styles von et-tb-layout.js an .et_mobile_menu etc. */
@media (max-width: 1299px) {
html body .mi-menu-desktop,
html body .et_pb_row_1_tb_header,
html body .et_pb_section_1_tb_header > .et_pb_row_1_tb_header {
display: none !important;
}
html body .et_pb_row_2_tb_header,
html body .mi-menu-mobile { display: block !important; }
}
@media (min-width: 1300px) {
html body .mi-menu-mobile,
html body .mi-menu-mobile .et_mobile_menu,
html body .mi-menu-mobile .et_mobile_nav_menu,
html body .mi-menu-mobile .mobile_menu_bar,
html body .mi-menu-mobile .mobile_nav,
html body .et_pb_row_2_tb_header,
html body .et_pb_section_1_tb_header > .et_pb_row_2_tb_header {
display: none !important;
}
html body .et_pb_row_1_tb_header,
html body .mi-menu-desktop { display: block !important; }
}
/* -----------------------------------------------------------
KONTAKT dropdown — contact-card look (Hauptsitz + Salzburg + social)
Pin, Hauptsitz-Titel und "Salzburg" bilden EIN einziges klickbares
Element — pin als ::before, "Salzburg" als ::after auf demselben .
----------------------------------------------------------- */
html body .mi-menu-desktop li.mi-kontakt-parent > .sub-menu {
padding: 22px 34px 22px !important;
min-width: 440px !important;
text-align: center !important;
background-color: #697688 !important;
}
/* Hauptsitz — kombinierter Block (Pin oben, Titel, "Salzburg" darunter) */
html body .mi-menu-desktop .sub-menu > li.mi-k-title {
text-align: center !important;
margin-bottom: 6px !important;
}
html body .mi-menu-desktop .sub-menu > li.mi-k-title > a {
font-size: 26px !important;
font-weight: 500 !important;
padding: 56px 0 26px !important;
color: #ffffff !important;
letter-spacing: 0 !important;
line-height: 1.25 !important;
text-align: center !important;
position: relative !important;
display: block !important;
transition: color .15s ease;
}
/* Pin-Icon direkt über "Hauptsitz" — via mask-image, damit nur die
Farbe wechselt und nicht das Bild neu geladen/skaliert wird */
html body .mi-menu-desktop .sub-menu > li.mi-k-title > a::before {
content: "";
position: absolute;
left: 50%;
top: 4px;
transform: translateX(-50%);
width: 44px;
height: 44px;
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
transition: background-color .15s ease;
background-image: none;
}
/* "Salzburg" als Untertitel derselben Zeile */
html body .mi-menu-desktop .sub-menu > li.mi-k-title > a::after {
content: "Salzburg";
display: block;
margin-top: 4px;
font-size: 16px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0;
opacity: .95;
}
html body .mi-menu-desktop .sub-menu > li.mi-k-title > a:hover {
color: #d6b754 !important;
}
html body .mi-menu-desktop .sub-menu > li.mi-k-title > a:hover::before {
background-color: #d6b754;
}
/* Email row with envelope icon — no background change on hover (layout-safe) */
.mi-menu-desktop .sub-menu > li.mi-k-email > a {
font-size: 15px !important;
padding: 10px 0 10px 36px !important;
color: #ffffff !important;
position: relative;
font-weight: 500 !important;
border-radius: 0 !important;
background: transparent !important;
}
.mi-menu-desktop .sub-menu > li.mi-k-email > a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
opacity: .9;
}
.mi-menu-desktop .sub-menu > li.mi-k-email > a:hover {
background: transparent !important;
color: #d6b754 !important;
opacity: 1 !important;
}
/* Social row — circular icons.
Icon wird über mask-image + background-color gezeichnet, damit
der Hover-Wechsel NUR die Farbe ändert (Icon-Shape bleibt identisch). */
.mi-menu-desktop .sub-menu > li.mi-k-social {
display: inline-block !important;
width: auto !important;
margin: 12px 4px 0 !important;
padding: 0 !important;
}
.mi-menu-desktop .sub-menu > li.mi-k-social > a {
font-size: 0 !important;
width: 42px !important;
height: 42px !important;
padding: 0 !important;
border: 2px solid #ffffff !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: transparent !important;
background-image: none !important;
position: relative;
transition: background-color .15s ease, border-color .15s ease;
overflow: hidden;
}
/* Icon via Maske — Farbe kommt aus background-color des ::before */
.mi-menu-desktop .sub-menu > li.mi-k-social > a::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: #ffffff;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
transition: background-color .15s ease;
}
.mi-menu-desktop .sub-menu > li.mi-k-social > a:hover {
background-color: #f4e4c1 !important;
border-color: #f4e4c1 !important;
}
/* Icon-Farbe matcht Section-Background → wirkt wie aus der Beige-Scheibe ausgestanzt */
.mi-menu-desktop .sub-menu > li.mi-k-social > a:hover::before {
background-color: #697688;
}
/* Mask-images pro Icon (monochrom — Farbe bestimmt das ) */
.mi-menu-desktop .sub-menu > li.mi-k-ig > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.mi-menu-desktop .sub-menu > li.mi-k-li > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.mi-menu-desktop .sub-menu > li.mi-k-yt > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.mi-menu-desktop .sub-menu > li.mi-k-wa > a::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* -----------------------------------------------------------
CLS-Reserve: Complianz-Video-Platzhalter reservieren 16:9.
Ohne reservierte Höhe schiebt der Platzhalter→iframe-Tausch
(nach Cookie-Zustimmung) den Inhalt nach unten. Greift nur
auf Seiten mit eingebetteten Videos (z. B. Diplom-Trainer).
----------------------------------------------------------- */
.cmplz-placeholder-element.cmplz-video {
aspect-ratio: 16 / 9;
height: auto;
}
/* -----------------------------------------------------------
Menü-Icons (Font Awesome 5) — pro Menüpunkt im Backend
wählbar (Design → Menüs), gerendert von menu-icons.php als