@charset "UTF-8";
/* Bad Sachsa navigation: Schönhagen menu pattern (glass header, mega menu, mobile drawer) in Bad Sachsa colours. */

:root {
  --oh-surface: #f3f5f2; --oh-surface-raised: #fff; --oh-surface-moss: #e9efe8; --oh-line: #dde3dc;
  --oh-ink: #15262f; --oh-ink-muted: #4f5e64; --oh-green: #12395c; --oh-green-soft: #dbe7f2;
  --oh-orange: #3c6b17; --oh-orange-dark: #2f5612; --oh-on-orange: #fff;
  --oh-night: #12395c; --oh-on-night: #dce7f0; --oh-focus: #1a5f9e;
  --oh-font: "Source Sans 3", system-ui, sans-serif; --oh-serif: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--oh-font); color: var(--oh-ink); background: var(--oh-surface-raised); -webkit-font-smoothing: antialiased; }
html.oh-menu-open, html.oh-menu-open body { overflow: hidden; }
.oh-label { font: 700 12.5px/16px var(--oh-font); letter-spacing: .1em; text-transform: uppercase; }
.oh-header :focus-visible { outline: 3px solid var(--oh-focus); outline-offset: 3px; }

/* Header */
.oh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--oh-surface-raised); color: var(--oh-ink); container: ohhead / inline-size; box-shadow: 0 1px 0 var(--oh-line); transition: background-color .45s ease, color .35s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
.oh-header .oh-util, .oh-header .oh-util a, .oh-header .oh-lang b, .oh-icon-btn, .oh-menu-btn { transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
/* Clear (glass) state over the hero; JS drops it on hover, focus, scroll or an open menu */
.oh-header.is-clear { background: rgba(20, 16, 12, .22); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.is-clear .oh-util { color: rgba(255, 255, 255, .88); border-bottom-color: rgba(255, 255, 255, .16); }
.is-clear .oh-util a:hover { color: #fff; }
.is-clear .oh-lang b { color: #fff; }
.is-clear .oh-nav__btn, .is-clear .oh-util { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
.is-clear .oh-icon-btn, .is-clear .oh-menu-btn { background: rgba(255, 255, 255, .18); color: #fff; }
.oh-logo { position: relative; }
.oh-logo .oh-logo__light { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s ease; }
.oh-logo .oh-logo__dark { transition: opacity .35s ease; }
.is-clear .oh-logo__light { opacity: 1; }
.is-clear .oh-logo__dark { opacity: 0; }
.oh-util { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 40px; font: 500 13.5px/18px var(--oh-font); color: var(--oh-ink-muted); border-bottom: 1px solid var(--oh-line); }
.oh-util__l, .oh-util__r { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.oh-util a { color: inherit; font-weight: 700; text-decoration: none; }
.oh-util a:hover { color: var(--oh-green); text-decoration: underline; text-underline-offset: 4px; }
.oh-lang { display: flex; gap: 10px; font: 700 13px var(--oh-font); letter-spacing: .06em; }
.oh-lang a { font-weight: 500; opacity: .75; }
.oh-lang b { color: var(--oh-ink); }

.oh-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 10px 40px; }
.oh-logo { justify-self: start; display: block; line-height: 0; }
.oh-logo img { height: 64px; width: auto; }
.oh-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.oh-nav__btn { display: inline-flex; align-items: center; gap: 9px; font: 500 17px var(--oh-font); color: inherit; background: none; border: 0; padding: 13px 20px; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.oh-nav__btn:hover { background: var(--oh-surface-moss); }
.oh-nav__btn.is-open { background: var(--oh-green); color: #fff; }
.oh-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; opacity: .7; }
[aria-expanded="true"] > .oh-caret { transform: rotate(-135deg) translateY(-1px); }
.oh-bar__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.oh-icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--oh-ink); background: var(--oh-surface); text-decoration: none; transition: background-color .2s ease; }
.oh-icon-btn:hover { background: var(--oh-surface-moss); }
.oh-icon-btn svg { width: 20px; height: 20px; }
.oh-cta { display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px; border-radius: 999px; background: var(--oh-orange); color: var(--oh-on-orange); font: 700 15.5px/1 var(--oh-font); text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.oh-cta:hover { background: var(--oh-green); color: #fff; }
.oh-menu-btn { display: none; align-items: center; gap: 8px; font: 700 15.5px var(--oh-font); color: inherit; background: var(--oh-surface); border: 0; border-radius: 999px; padding: 12px 18px; cursor: pointer; }
.oh-burger { display: grid; gap: 4px; } .oh-burger i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

/* Mega menu: full-width panel, page dimmed behind */
.oh-backdrop { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 19; background: rgba(10, 22, 32, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: oh-fade .3s ease both; }
.oh-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(220px, 290px); gap: 36px; padding: 52px max(56px, calc((100% - 1640px) / 2)) 56px; background: var(--oh-surface-raised); border-radius: 0 0 28px 28px; border-top: 1px solid var(--oh-line); box-shadow: 0 40px 100px -30px rgba(10, 22, 32, .55); animation: oh-drop .45s cubic-bezier(.2, .7, .1, 1) both; }
.oh-mega__intro { display: flex; flex-direction: column; gap: 16px; }
.oh-mega__name { margin: 0; font: 600 clamp(26px, 2vw, 32px)/1.05 var(--oh-serif); letter-spacing: -.02em; color: var(--oh-green); }
.oh-mega__lead { margin: 0; font-size: 17px; line-height: 26px; color: var(--oh-ink-muted); }
.oh-mega__all { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font: 700 16px var(--oh-font); color: var(--oh-ink); text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid var(--oh-orange); }
.oh-mega__all span { transition: transform .25s ease; }
.oh-mega__all:hover span { transform: translateX(4px); }
.oh-mega__cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px 28px; align-content: start; padding-left: 36px; border-left: 1px solid var(--oh-line); }
.oh-mega__col { animation: oh-rise .5s cubic-bezier(.2, .7, .1, 1) both; animation-delay: calc(.06s + var(--i, 0) * .05s); }
.oh-mega__title { margin: 0 0 14px; font: 700 12.5px var(--oh-font); letter-spacing: .12em; text-transform: uppercase; color: var(--oh-ink-muted); }
.oh-mega ul, .oh-drawer__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.oh-mega li a { text-wrap: pretty; display: flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--oh-ink); text-decoration: none; font: 400 17.5px/1.3 var(--oh-font); }
.oh-mega li a::after { content: "→"; font-size: 15px; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s ease; color: var(--oh-orange); }
.oh-mega li a:hover { color: var(--oh-green); }
.oh-mega li a:hover::after { opacity: 1; transform: none; }
.oh-mega__feature { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; padding: 26px; border-radius: 18px; background: var(--oh-green); color: #fff; text-decoration: none; animation: oh-rise .55s cubic-bezier(.2, .7, .1, 1) .12s both; }
.oh-mega__feature img, .oh-drawer__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.oh-mega__feature::after, .oh-drawer__feature::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 26, 36, 0) 25%, rgba(14, 26, 36, .82) 100%); }
.oh-mega__feature:hover img { transform: scale(1.06); }
.oh-mega__feature-text { display: grid; gap: 8px; padding-right: 52px; }
.oh-mega__feature-text > span:last-child { font-size: 15px; line-height: 21px; opacity: .92; }
.oh-mega__feature-title { font: 600 24px/1.15 var(--oh-serif); letter-spacing: -.01em; }
.oh-mega__feature-go, .oh-drawer__feature-go { position: absolute; right: 22px; bottom: 24px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--oh-ink); transition: transform .3s ease, background-color .25s ease; }
.oh-mega__feature:hover .oh-mega__feature-go { transform: rotate(-45deg); background: var(--oh-orange); color: var(--oh-on-orange); }
@keyframes oh-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes oh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes oh-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mobile drawer: full screen under the header, scrolls on its own */
.oh-drawer { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 8px; padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--oh-surface-raised); border-top: 1px solid var(--oh-line); animation: oh-fade .25s ease both; }
.oh-drawer__quick { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.oh-drawer__quick li, .oh-drawer__list > li { animation: oh-rise .45s cubic-bezier(.2, .7, .1, 1) both; animation-delay: calc(var(--i, 0) * .04s); }
.oh-drawer__quick a { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; min-height: 76px; padding: 14px 14px 12px 16px; border-radius: 16px; background: var(--oh-surface); color: var(--oh-ink); font: 700 15.5px/1.2 var(--oh-font); text-decoration: none; }
.oh-drawer__quick a > span:last-child { opacity: .55; }
.oh-drawer__quick li:first-child a { background: var(--oh-orange); color: var(--oh-on-orange); }
.oh-drawer__quick li:first-child a > span:last-child { opacity: 1; }
.oh-drawer__list { list-style: none; margin: 0; padding: 0; }
.oh-drawer__list > li { border-bottom: 1px solid var(--oh-line); }
.oh-drawer__list > li > button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; color: var(--oh-ink); background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--oh-font); }
.oh-drawer__name { display: grid; gap: 6px; min-width: 0; font: 600 25px/1.05 var(--oh-serif); letter-spacing: -.02em; color: var(--oh-green); }
.oh-drawer__name small { font: 400 14.5px/1.35 var(--oh-font); letter-spacing: 0; color: var(--oh-ink-muted); }
.oh-drawer__pm { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--oh-surface); transition: background-color .25s ease, transform .35s cubic-bezier(.2, .7, .1, 1); }
.oh-drawer__pm::before, .oh-drawer__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.2, .7, .1, 1); }
.oh-drawer__pm::after { transform: rotate(90deg); }
.is-open > button .oh-drawer__pm { background: var(--oh-green); color: #fff; transform: rotate(180deg); }
.is-open > button .oh-drawer__pm::after { transform: rotate(0deg); }
.oh-drawer__panel { display: grid; gap: 22px; padding: 2px 0 26px; animation: oh-rise .4s cubic-bezier(.2, .7, .1, 1) both; }
.oh-drawer__feature { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 20px 64px 20px 20px; border-radius: 18px; background: var(--oh-green); color: #fff; text-decoration: none; }
.oh-drawer__feature-text { display: grid; gap: 6px; }
.oh-drawer__feature-title { font: 700 21px/1.15 var(--oh-font); }
.oh-drawer__feature-text > span:last-child { font-size: 14.5px; line-height: 20px; opacity: .92; }
.oh-drawer__feature-go { right: 16px; bottom: 18px; width: 40px; height: 40px; }
.oh-drawer__group .oh-mega__title { margin-bottom: 4px; }
.oh-drawer__group li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--oh-line); color: var(--oh-ink); text-decoration: none; font: 400 18px/1.3 var(--oh-font); }
.oh-drawer__group li:last-child a { border-bottom: 0; }
.oh-drawer__group li a::after { content: "→"; font-size: 15px; color: var(--oh-ink-muted); }
.oh-drawer__foot { display: grid; gap: 14px; margin-top: 18px; }
.oh-drawer__call { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 16px 18px 20px; border-radius: 20px; background: var(--oh-night); color: var(--oh-on-night); }
.oh-drawer__call > span { display: grid; gap: 3px; min-width: 0; }
.oh-drawer__call .oh-label { opacity: .7; }
.oh-drawer__call b { font: 700 22px/1.1 var(--oh-font); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-drawer__call small { font-size: 13px; opacity: .7; }
.oh-drawer__tel { flex: none; padding: 12px 18px; border-radius: 999px; background: var(--oh-orange); color: var(--oh-on-orange); font: 700 15px var(--oh-font); text-decoration: none; }
.oh-drawer__lang { display: flex; gap: 6px; justify-content: center; }
.oh-drawer__lang a { min-width: 52px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--oh-line); color: var(--oh-ink); text-align: center; font: 700 14px var(--oh-font); text-decoration: none; }
.oh-drawer__lang a.is-on { background: var(--oh-green); border-color: var(--oh-green); color: #fff; }

/* Responsive (container = header width) */
@container ohhead (max-width: 1240px) { .oh-mega { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 36px; padding: 40px 32px; } .oh-mega__cols { gap: 32px 28px; padding-left: 32px; } .oh-mega__feature { display: none; } }
@container ohhead (max-width: 1180px) { .oh-nav__btn { padding: 12px 14px; font-size: 16px; } .oh-bar { padding: 10px 24px; } .oh-util { padding: 8px 24px; } .oh-icon-btn { display: none; } }
@container ohhead (max-width: 1000px) {
  .oh-util__tel, .oh-util__ti { display: none; }
  .oh-util { padding: 6px 16px; }
  .oh-bar { grid-template-columns: 1fr auto; padding: 6px 16px; gap: 12px; }
  .oh-logo img { height: 52px; }
  .oh-nav, .oh-mega, .oh-backdrop, .oh-cta { display: none; }
  .oh-menu-btn { display: inline-flex; }
}
@container ohhead (min-width: 1001px) { .oh-drawer { display: none; } }
@media (prefers-reduced-motion: reduce) { .oh-header *, .oh-header *::before, .oh-header *::after { animation: none !important; transition: none !important; } }

/* Bad Sachsa additions */
.oh-header { font-family: var(--oh-font); }
.oh-util__tag { font-weight: 600; }
.oh-mega__feature.no-img { background: linear-gradient(160deg, #1a5f9e, #12395c); }
.oh-mega__feature.no-img::after { display: none; }
.oh-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Groups sit close together: fixed column width instead of stretching */
.oh-mega__cols { grid-template-columns: repeat(var(--n, 3), minmax(150px, 210px)); gap: 28px 40px; justify-content: start; }
.oh-mega__feature { justify-self: end; width: 100%; max-width: 290px; }