/* ========================================================= QTTB main menu - shared by every page ========================================================= */ :root { --qn-accent: #e54e53; --qn-accent-dark: #cf3b40; --qn-ink: #272930; --qn-text: #3a3c42; --qn-muted: #6d7078; --qn-line: #e7e7ea; --qn-soft: #f7f7f8; --qn-bar-h: 76px; } /* The theme gives position:absolute and a fixed viewport height, which stops a sticky header after one screen. */ body#wrapper { height: auto; min-height: 100%; } /* ========================================================= HEADER + MENU Scoped to #qn-header, so the theme's `header`, `.navbar`, `.open` and `.dropdown` rules never reach it. ========================================================= */ #qn-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--qn-line); line-height: 1.4; text-align: left; transition: box-shadow .2s ease; } #qn-header.is-stuck { box-shadow: 0 2px 12px rgba(39, 41, 48, .12); } #qn-header *, #qn-header *::before, #qn-header *::after { box-sizing: border-box; } #qn-header .qn-inner { max-width: 1170px; min-height: var(--qn-bar-h); margin: 0 auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* brand */ #qn-header .qn-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--qn-ink); text-decoration: none; } #qn-header .qn-brand img { display: block; height: 52px; width: auto; } #qn-header .qn-brand strong { display: block; font-size: 18px; font-weight: 700; color: var(--qn-ink); } #qn-header .qn-brand small { display: block; margin-top: 2px; font-size: 12px; color: var(--qn-muted); } /* menu */ #qn-header .qn-menu { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } #qn-header .qn-menu > li { position: relative; margin: 0; padding: 0; } #qn-header .qn-link { position: relative; display: flex; align-items: center; gap: 7px; height: var(--qn-bar-h); margin: 0; padding: 0 14px; border: 0; background: none; color: var(--qn-text); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s ease; } /* red underline, like the theme's original menu */ #qn-header .qn-link::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--qn-accent); transform: scaleX(0); transition: transform .2s ease; } #qn-header .qn-link:hover, #qn-header .qn-link:focus-visible, #qn-header li.is-active > .qn-link, #qn-header li.is-open > .qn-link { color: var(--qn-accent); } #qn-header .qn-link:hover::before, #qn-header li.is-active > .qn-link::before, #qn-header li.is-open > .qn-link::before { transform: scaleX(1); } /* chevron on section buttons */ #qn-header .qn-parent::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; } #qn-header li.is-open > .qn-parent::after { margin-top: 3px; transform: rotate(-135deg); } /* "Kontakt" as the call to action */ #qn-header .qn-menu > li.qn-cta { margin-left: 10px; } #qn-header .qn-cta > a { display: inline-block; padding: 11px 20px; border-radius: 4px; background: var(--qn-accent); color: #fff; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; } #qn-header .qn-cta > a:hover, #qn-header .qn-cta.is-active > a { background: var(--qn-accent-dark); color: #fff; } /* dropdown panels */ #qn-header .qn-sub { position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--qn-line); border-top: 3px solid var(--qn-accent); border-radius: 0 0 6px 6px; box-shadow: 0 14px 30px rgba(39, 41, 48, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } #qn-header .qn-sub--right { left: auto; right: 0; } #qn-header .qn-sub a { display: block; padding: 10px 20px; color: var(--qn-text); font-size: 14px; line-height: 1.35; text-decoration: none; white-space: nowrap; } #qn-header .qn-sub a:hover, #qn-header .qn-sub a:focus-visible { background: var(--qn-soft); color: var(--qn-accent); } #qn-header .qn-sub li.is-active > a { color: var(--qn-accent); font-weight: 600; } #qn-header a:focus-visible, #qn-header button:focus-visible { outline: 2px solid var(--qn-accent); outline-offset: 2px; } /* hamburger — hidden on desktop */ #qn-header .qn-toggle { display: none; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--qn-accent); border-radius: 4px; background: #fff; color: var(--qn-accent); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; } #qn-header .qn-bars, #qn-header .qn-bars::before, #qn-header .qn-bars::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; } #qn-header .qn-bars { position: relative; } #qn-header .qn-bars::before, #qn-header .qn-bars::after { content: ""; position: absolute; left: 0; } #qn-header .qn-bars::before { top: -6px; } #qn-header .qn-bars::after { top: 6px; } #qn-header .qn-toggle[aria-expanded="true"] .qn-bars { background: transparent; } #qn-header .qn-toggle[aria-expanded="true"] .qn-bars::before { transform: translateY(6px) rotate(45deg); } #qn-header .qn-toggle[aria-expanded="true"] .qn-bars::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- desktop: open state is controlled by the script ---------- */ @media (min-width: 992px) { #qn-header .qn-has-sub.is-open > .qn-sub { opacity: 1; visibility: visible; transform: none; } } /* ---------- small laptops: tighten so it stays one line ---------- */ @media (min-width: 992px) and (max-width: 1199px) { #qn-header .qn-brand small { display: none; } #qn-header .qn-link { padding: 0 10px; font-size: 14px; } #qn-header .qn-link::before { left: 10px; right: 10px; } #qn-header .qn-cta > a { padding: 10px 16px; font-size: 14px; } } /* ---------- tablet + mobile ---------- */ @media (max-width: 991px) { :root { --qn-bar-h: 64px; } #qn-header .qn-brand img { height: 44px; } #qn-header .qn-toggle { display: inline-flex; } #qn-header .qn-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--qn-bar-h)); overflow-y: auto; background: #fff; border-top: 1px solid var(--qn-line); box-shadow: 0 14px 30px rgba(39, 41, 48, .16); } #qn-header .qn-nav.is-open { display: block; } #qn-header .qn-menu { flex-direction: column; align-items: stretch; } #qn-header .qn-menu > li { border-bottom: 1px solid var(--qn-line); } #qn-header .qn-link { width: 100%; height: auto; justify-content: space-between; padding: 16px 20px; font-size: 16px; } #qn-header .qn-link::before { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); } #qn-header .qn-link:hover::before, #qn-header li.is-active > .qn-link::before, #qn-header li.is-open > .qn-link::before { transform: scaleY(1); } #qn-header .qn-sub, #qn-header .qn-sub--right { display: none; position: static; min-width: 0; padding: 0 0 8px; border: 0; border-radius: 0; box-shadow: none; background: var(--qn-soft); opacity: 1; visibility: visible; transform: none; transition: none; } #qn-header .qn-has-sub.is-open > .qn-sub { display: block; } #qn-header .qn-sub a { padding: 12px 20px 12px 36px; font-size: 15px; white-space: normal; } #qn-header .qn-menu > li.qn-cta { margin: 0; padding: 16px 20px 20px; border-bottom: 0; } #qn-header .qn-cta > a { display: block; padding: 14px; text-align: center; font-size: 16px; } } @media (max-width: 520px) { #qn-header .qn-brand small { display: none; } #qn-header .qn-brand strong { font-size: 16px; } } @media (max-width: 360px) { #qn-header .qn-toggle-label { display: none; } } #qn-header.is-loading *, #qn-header.is-loading *::before, #qn-header.is-loading *::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { #qn-header *, #qn-header *::before, #qn-header *::after { transition: none !important; } }