/* ============================================================ * THEME HEADER REPLACE (Block Themes / Classic) * ============================================================ */ body.mh-has-master-header header.wp-block-template-part, body.mh-has-master-header .wp-site-blocks > header, body.mh-has-master-header header.site-header, body.mh-has-master-header .site-header { display: none !important; } /* ============================================================ * ROOT HEADER * ============================================================ */ #master-header, .mh-header { width: 100%; position: relative; z-index: 999; box-sizing: border-box; font-family: inherit; } /* Prevent header-related overlays (drawers/modals) from creating horizontal scroll. NOTE: On some Android browsers/WebViews, applying overflow-x only on is not sufficient and a "ghost" horizontal viewport can remain visible. Therefore we also clip the element whenever the Master Header is active. */ html { overflow-x: hidden; } body.mh-has-master-header { overflow-x: hidden; } /* Prefer overflow-x:clip where supported (avoids scrollbars + is stricter). */ @supports (overflow-x: clip) { html { overflow-x: clip; } body.mh-has-master-header { overflow-x: clip; } } /* Additional hard guard: ensure the header never exceeds the visual viewport. */ #master-header, .mh-header { max-width: 100vw; } /* Glass Look (optional) */ .mh-header { backdrop-filter: blur(12px); background: var(--mh-header-bg, rgba(255, 255, 255, 0.75)); color: var(--mh-header-text, inherit); border-bottom: 1px solid rgba(0,0,0,.06); } /* ============================================================ * INNER LAYOUT * ============================================================ */ .mh-inner { display: flex; align-items: center; width: 100%; max-width: 1400px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; height: 100%; min-width: 0; /* allow flex children to shrink instead of forcing overflow */ } /* Optional: Multi-row header (elements may wrap into multiple lines) */ #master-header.mh-multirow { height: auto !important; } #master-header.mh-multirow .mh-inner { height: auto !important; flex-wrap: wrap; row-gap: 10px; } #master-header.mh-multirow .mh-column { flex-wrap: wrap; } /* Multi-row with explicit line assignment (per element) */ #master-header.mh-multirow .mh-column.mh-has-lines { flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; /* vertical gap between lines */ } #master-header.mh-multirow .mh-column.mh-has-lines .mh-line { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; /* safety on small screens */ } /* ============================================================ * MULTI-ROW: Per-Line Height (Zeilenhöhe) * - Values are provided as CSS variables via inline style: * --mh-row1-height-desktop: 48px; etc. * - 0 / unset = Auto * ============================================================ */ #master-header.mh-device-desktop { --mh-row1-height: var(--mh-row1-height-desktop, auto); --mh-row2-height: var(--mh-row2-height-desktop, auto); --mh-row3-height: var(--mh-row3-height-desktop, auto); --mh-row4-height: var(--mh-row4-height-desktop, auto); } #master-header.mh-device-tablet { --mh-row1-height: var(--mh-row1-height-tablet, auto); --mh-row2-height: var(--mh-row2-height-tablet, auto); --mh-row3-height: var(--mh-row3-height-tablet, auto); --mh-row4-height: var(--mh-row4-height-tablet, auto); } #master-header.mh-device-mobile { --mh-row1-height: var(--mh-row1-height-mobile, auto); --mh-row2-height: var(--mh-row2-height-mobile, auto); --mh-row3-height: var(--mh-row3-height-mobile, auto); --mh-row4-height: var(--mh-row4-height-mobile, auto); } #master-header.mh-multirow .mh-column.mh-has-lines .mh-line-1 { min-height: var(--mh-row1-height, auto); } #master-header.mh-multirow .mh-column.mh-has-lines .mh-line-2 { min-height: var(--mh-row2-height, auto); } #master-header.mh-multirow .mh-column.mh-has-lines .mh-line-3 { min-height: var(--mh-row3-height, auto); } #master-header.mh-multirow .mh-column.mh-has-lines .mh-line-4 { min-height: var(--mh-row4-height, auto); } /* Preserve the classic left/center/right alignment per column */ #master-header.mh-multirow .mh-column:first-child .mh-line { justify-content: flex-start; } #master-header.mh-multirow .mh-column:nth-child(2) .mh-line { justify-content: center; } #master-header.mh-multirow .mh-column:last-child .mh-line { justify-content: flex-end; } /* ============================================================ * RESPONSIVE SAFETY (prevent horizontal overflow) * ============================================================ */ .mh-column { min-width: 0; /* long items (search/button/text) can shrink */ } .mh-column > * { min-width: 0; max-width: 100%; } /* On small screens allow wrapping (content adapts instead of overflowing) */ @media (max-width: 768px) { #master-header .mh-inner { flex-wrap: wrap; row-gap: 10px; } #master-header .mh-column { flex-wrap: wrap; } #master-header .mh-search { max-width: 100%; } #master-header .mh-search .mh-search-input { min-width: 0; } } /* Full width (per device layout) */ .mh-header.mh-fullwidth .mh-inner, #master-header.mh-fullwidth .mh-inner { max-width: none; } /* ============================================================ * COLUMNS * ============================================================ */ .mh-column { display: flex; align-items: center; gap: 12px; box-sizing: border-box; } .mh-column:first-child { justify-content: flex-start; } .mh-column:nth-child(2) { justify-content: center; } .mh-column:last-child { justify-content: flex-end; } /* ============================================================ * LOGO * ============================================================ */ .mh-logo img { max-height: var(--mh-logo-max-height, 48px); width: auto; height: auto; display: block; } /* ============================================================ * LOGO SWAP (SHRINK) * ============================================================ */ .mh-logo { position: relative; } .mh-logo-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--mh-social-color, inherit); } .mh-logo img { display: block; } /* Shrink-Logo standardmäßig aus */ .mh-logo-shrink { display: none; } /* Beim Shrink: Swap */ #master-header.mh-shrink .mh-logo-main { display: none; } #master-header.mh-shrink .mh-logo-shrink { display: block; } /* Optional: Disable shrink logo swap (keep main logo visible in shrink state) */ .mh-logo.mh-no-shrink-logo .mh-logo-shrink { display: none !important; } #master-header.mh-shrink .mh-logo.mh-no-shrink-logo .mh-logo-main { display: block !important; } #master-header.mh-shrink .mh-logo.mh-no-shrink-logo .mh-logo-shrink { display: none !important; } /* ============================================================ * MENU * ============================================================ */ .mh-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; } .mh-menu li { position: relative; } .mh-menu a { text-decoration: none; font-weight: 500; color: inherit; padding: 6px 0; } /* ============================================================ * SEARCH * ============================================================ */ .mh-search form { display: flex; width: 100%; } /* Search width control (from editor: --mh-search-width) */ .mh-search { width: var(--mh-search-width, auto); max-width: 100%; } .mh-search .mh-search-form { width: 100%; } .mh-search .mh-search-input { width: 100%; min-width: 0; } .mh-search input[type="search"] { padding: 6px 10px; border-radius: 6px; border: 1px solid #d1d5db; } /* ============================================================ * BUTTONS (BASE) * ============================================================ */ .mh-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; } .mh-button:hover { transform: translateY(-1px); } /* ============================================================ * BUTTON PRESETS * ============================================================ */ .mh-primary { background: var(--mh-primary-bg, #2563eb); color: var(--mh-primary-color, #ffffff); } .mh-primary:hover { background: var(--mh-primary-bg-hover, #1e40af); } .mh-secondary { background: var(--mh-secondary-bg, #e5e7eb); color: var(--mh-secondary-color, #111827); } .mh-secondary:hover { background: var(--mh-secondary-bg-hover, #d1d5db); } .mh-ghost { background: transparent; color: var(--mh-ghost-color, #2563eb); } .mh-ghost:hover { background: rgba(37,99,235,.08); } /* ============================================================ * WOO CART * ============================================================ */ .mh-woo-cart a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; } /* Drawer mode uses a