/* ================================================================ SEEGFUI — Mooinzen-Stil Header + Mega-Menü (SEE-71) Nutzt die Design-Tokens aus style.css (:root). ================================================================ */ :root { --sg-navy: #1F3A4D; /* maritimes Tiefblau — Top-Bar */ --sg-head-h: 76px; /* Höhe Haupt-Header */ --sg-topbar-h: 38px; } /* GeneratePress-Default-Header ausblenden — wir rendern einen eigenen */ .site-header { display: none !important; } .sg-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--c-accent); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0; } .sg-skip:focus { left: 0; } /* ---------------------------------------------------------------- */ /* Wrapper — sticky */ /* ---------------------------------------------------------------- */ .sg-headwrap { position: sticky; top: 0; z-index: 200; background: var(--c-bg); font-family: var(--font-sans); transition: box-shadow .25s ease; } .sg-headwrap.is-stuck { box-shadow: 0 6px 24px rgba(31,58,77,.08); } /* ---------------------------------------------------------------- */ /* 1) Utility-Top-Bar */ /* ---------------------------------------------------------------- */ .sg-topbar { background: var(--sg-navy); color: #Eaf1f6; font-size: 0.8125rem; line-height: 1; } .sg-topbar__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); height: var(--sg-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sg-topbar__promo { margin: 0; max-width: none; display: flex; align-items: center; gap: 8px; font-weight: 500; } .sg-topbar__promo .sg-icon { width: 16px; height: 16px; color: #9FC6DE; } .sg-topbar__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; } .sg-topbar__links a { color: #CFE0EA; transition: color .15s; } .sg-topbar__links a:hover { color: #fff; } @media (max-width: 760px) { .sg-topbar__links { display: none; } .sg-topbar__promo { justify-content: center; width: 100%; text-align: center; font-size: .78rem; } } /* ---------------------------------------------------------------- */ /* 2) Haupt-Header */ /* ---------------------------------------------------------------- */ .sg-header { border-bottom: 1px solid var(--c-line); background: var(--c-bg); } .sg-header__inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); height: var(--sg-head-h); display: flex; align-items: center; gap: 24px; } .sg-brand { display: inline-flex; align-items: center; flex: 0 0 auto; } .sg-brand__img { height: 44px; width: auto; display: block; } /* SEE-99: Auf WooCommerce-Seiten (Shop/Coming-Soon/Cart/…) trägt die Klasse .woocommerce. Dadurch gewinnt WC-Core-Regel `.woocommerce img, .woocommerce-page img { height:auto }` (Spezifität 0,1,1) gegen `.sg-brand__img` (0,1,0) → die Wortmarke rendert in nativer Größe (2101×781) und läuft horizontal über. Mit Header-Scope (0,2,0) re-asserten. */ .sg-header .sg-brand__img, .sg-header .sg-brand img { height: 44px; width: auto; max-width: 100%; } /* Zentrale Navigation */ .sg-nav { flex: 1 1 auto; display: flex; justify-content: center; } .sg-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .sg-nav__item { position: static; } .sg-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 0.95rem; font-weight: 500; color: var(--c-ink); border-radius: 6px; white-space: nowrap; transition: color .15s, background .15s; } .sg-nav__link:hover { color: var(--c-accent); background: var(--c-accent-wash); } .sg-nav__item.is-accent .sg-nav__link { color: var(--c-accent); font-weight: 600; } .sg-nav__caret { width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .2s; opacity: .6; } .sg-nav__item.is-open .sg-nav__caret { transform: rotate(225deg) translateY(-1px); } .sg-nav__item.is-open > .sg-nav__link { color: var(--c-accent); background: var(--c-accent-wash); } /* Rechte Icon-Gruppe */ .sg-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; } .sg-action { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; background: none; border: 0; cursor: pointer; color: var(--c-ink); position: relative; transition: background .15s, color .15s; } .sg-action:hover { background: var(--c-bg-soft); color: var(--c-accent); } .sg-action .sg-icon { width: 22px; height: 22px; } .sg-cart-count { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; line-height: 1; } .sg-cart-count[hidden] { display: none; } /* Generischer Icon-Wrapper */ .sg-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; } .sg-icon svg { width: 100%; height: 100%; display: block; } /* ---------------------------------------------------------------- */ /* 3) Mega-Dropdown */ /* ---------------------------------------------------------------- */ .sg-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-bg); border-top: 1px solid var(--c-line); box-shadow: 0 24px 48px rgba(31,58,77,.12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 50; } .sg-nav__item.has-mega.is-open .sg-mega, .sg-nav__item.has-mega:hover .sg-mega { opacity: 1; visibility: visible; transform: translateY(0); } .sg-mega__inner { max-width: var(--container); margin: 0 auto; padding: 36px var(--pad-x) 40px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; } .sg-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .sg-mega__title { margin: 0 0 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); } .sg-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sg-mega__link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: 8px; color: var(--c-ink); font-size: 0.95rem; transition: background .15s, color .15s; } .sg-mega__link:hover { background: var(--c-accent-wash); color: var(--c-accent); } .sg-mega__link .sg-icon { width: 22px; height: 22px; color: var(--c-accent); flex: 0 0 22px; } .sg-mega__link.is-soon { color: var(--c-ink-soft); } .sg-mega__link.is-soon .sg-icon { color: var(--c-ink-soft); } /* Untergruppen-Label innerhalb einer Spalte (z.B. „Motive", SEE-131) */ .sg-mega__subhead { margin: 12px 0 4px; padding: 0 0 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); border-top: 1px solid var(--c-line); padding-top: 12px; } .sg-mega__list > .sg-mega__subhead:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .sg-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--c-bg-muted); color: var(--c-ink-soft); padding: 2px 7px; border-radius: 999px; margin-left: auto; } /* Featured-Kachel */ .sg-mega__featured { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--c-bg-soft); border: 1px solid var(--c-line); color: var(--c-ink); transition: box-shadow .2s, transform .2s; } .sg-mega__featured:hover { box-shadow: 0 16px 32px rgba(31,58,77,.12); transform: translateY(-2px); } .sg-mega__featured-img { display: block; height: 168px; background-size: cover; background-position: center; } .sg-mega__featured-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; } .sg-mega__featured-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); } .sg-mega__featured-title { font-family: var(--font-script); font-size: 1.6rem; line-height: 1.05; font-weight: 700; } .sg-mega__featured-text { font-size: .85rem; color: var(--c-ink-soft); } .sg-mega__featured-cta { margin-top: 6px; font-size: .85rem; font-weight: 600; color: var(--c-accent); } /* ---------------------------------------------------------------- */ /* Such-Overlay */ /* ---------------------------------------------------------------- */ .sg-search { border-top: 1px solid var(--c-line); background: var(--c-bg); } .sg-search__form { max-width: var(--container); margin: 0 auto; padding: 16px var(--pad-x); display: flex; gap: 12px; } .sg-search__input { flex: 1 1 auto; border: 1px solid var(--c-line); border-radius: 8px; padding: 12px 16px; font-size: 1rem; font-family: var(--font-sans); color: var(--c-ink); } .sg-search__input:focus { outline: none; border-color: var(--c-accent); } .sg-search__submit { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--c-accent); color: #fff; padding: 0 20px; border-radius: 8px; font-weight: 600; } .sg-search__submit:hover { background: var(--c-accent-hover); } .sg-search__submit .sg-icon { width: 18px; height: 18px; color: #fff; } /* ---------------------------------------------------------------- */ /* Burger (nur Mobile sichtbar) */ /* ---------------------------------------------------------------- */ .sg-burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; border-radius: 8px; } .sg-burger span { display: block; width: 22px; height: 2px; margin: 4px auto; background: var(--c-ink); border-radius: 2px; transition: transform .2s, opacity .2s; } .sg-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sg-burger.is-open span:nth-child(2) { opacity: 0; } .sg-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------------------------------------------------------------- */ /* Mobile-Menü (Akkordeon) */ /* ---------------------------------------------------------------- */ .sg-overlay { position: fixed; inset: 0; background: rgba(31,58,77,.42); z-index: 190; } .sg-mobile { position: fixed; top: 0; right: 0; z-index: 195; width: min(420px, 88vw); height: 100dvh; background: var(--c-bg); box-shadow: -12px 0 40px rgba(31,58,77,.18); overflow-y: auto; padding: calc(var(--sg-topbar-h) + 20px) 0 40px; } .sg-mobile__list { list-style: none; margin: 0; padding: 0; } .sg-mobile__item { border-bottom: 1px solid var(--c-line); } .sg-mobile__link, .sg-mobile__toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px var(--pad-x); font-size: 1.05rem; font-weight: 600; color: var(--c-ink); background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); } .sg-mobile__link.is-accent { color: var(--c-accent); } .sg-mobile__link .sg-icon, .sg-mobile__toggle .sg-icon { width: 22px; height: 22px; color: var(--c-accent); } .sg-mobile__chevron { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--c-ink-soft); border-bottom: 2px solid var(--c-ink-soft); transform: rotate(45deg); transition: transform .2s; } .sg-mobile__toggle[aria-expanded="true"] .sg-mobile__chevron { transform: rotate(225deg); } .sg-mobile__sub { padding: 4px var(--pad-x) 18px; background: var(--c-bg-soft); } .sg-mobile__subtitle { margin: 14px 0 6px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-soft); } .sg-mobile__sub ul { list-style: none; margin: 0 0 6px; padding: 0; } .sg-mobile__sub a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; color: var(--c-ink); font-size: .98rem; } .sg-mobile__sub a:hover { color: var(--c-accent); } .sg-mobile__sub .sg-icon { width: 20px; height: 20px; color: var(--c-accent); } /* Untergruppen-Label im Mobile-Accordion (z.B. „Motive", SEE-131) */ .sg-mobile__subhead { margin: 8px 0 2px; padding: 8px 4px 2px; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-soft); border-top: 1px solid var(--c-line); } body.sg-noscroll { overflow: hidden; } /* ---------------------------------------------------------------- */ /* Responsive Umschaltung */ /* ---------------------------------------------------------------- */ @media (max-width: 1024px) { .sg-nav { display: none; } .sg-action--search, .sg-action[aria-label="Konto"] { display: none; } .sg-burger { display: block; } .sg-header__inner { justify-content: space-between; } .sg-brand { flex: 1 1 auto; } } @media (min-width: 1025px) { .sg-mobile, .sg-overlay, .sg-burger { display: none !important; } }