/* VDR Header — geteilte Komponente, identisch zur Hauptseite (index.html). */ :root{ --fg-blur-subtle:8px; --fg-blur-standard:14px; --fg-blur-premium:18px; --fg-ivory-bg:rgba(250,250,247,.82); --fg-ivory-solid:#f7f6f0; --fg-ivory-edge:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(20,26,22,.05); --fg-forest-bg:rgba(10,28,21,.5); --fg-forest-edge:inset 0 1px 0 rgba(195,204,199,.16), inset 0 0 0 1px rgba(178,188,183,.14); --fg-champ-grad:linear-gradient(180deg,#eef1ef 0%,#dfe4e1 45%,#cdd4d0 55%,#e6eae8 100%); --fg-champ-ink:#101510; --fg-edge-gold:rgba(178,188,183,.38); --fg-dur-fast:.18s; --fg-dur:.28s; --fg-ease:cubic-bezier(.2,.7,.2,1); --radius:14px; --shadow:0 1px 2px rgba(16,21,16,.04), 0 12px 32px -16px rgba(16,21,16,.18); } /* Header base + Nav + Dropdown + Mobile */ header .wrap{max-width:none; padding-left:clamp(20px,2.6vw,44px); padding-right:clamp(20px,2.6vw,44px)} header{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(var(--fg-blur-standard)); -webkit-backdrop-filter:saturate(180%) blur(var(--fg-blur-standard)); background:var(--fg-ivory-bg); border-bottom:0; /* harte Linie -> weicher Fade via ::after */ box-shadow:var(--fg-ivory-edge); /* feine warme Lichtkante (Ivory Glass) */ } /* beim Scrollen subtil kompakter (Klasse via kleinem rAF-freien Listener) */ .nav{transition:height var(--fg-dur) var(--fg-ease)} .brand-logo{transition:transform .25s ease, height var(--fg-dur) var(--fg-ease)} header.is-scrolled .nav{height:66px} header.is-scrolled .brand-logo{height:44px} @media (max-width:560px){ header.is-scrolled .nav{height:60px} header.is-scrolled .brand-logo{height:36px} } @media (prefers-reduced-motion:reduce){ .nav, .brand-logo{transition:none} } /* Fallback ohne backdrop-filter: opakes, weiterhin hochwertiges Ivory */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ header{background:var(--fg-ivory-solid)} } header::after{content:""; position:absolute; left:0; right:0; top:100%; height:16px; pointer-events:none; background:linear-gradient(180deg, rgba(16,24,19,.10), rgba(16,24,19,.035) 46%, transparent)} .nav{display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px} .brand{display:inline-flex; align-items:center; line-height:0; flex-shrink:0} .brand-logo{height:56px; width:auto; display:block; transition:transform .25s ease} .brand:hover .brand-logo{transform:scale(1.02)} @media (max-width:560px){ .nav{height:72px} .brand-logo{height:42px} } .nav-links{display:flex; gap:28px; font-size:.92rem; color:var(--muted)} .nav-links a:hover{color:var(--ink)} /* Liquid-Glass Dropdown (Leistungen) */ .nav-dd{position:relative; display:inline-flex} .nav-dd-trigger{display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer; font:inherit; font-size:.92rem; color:var(--muted); padding:0; transition:color .2s} .nav-dd-trigger:hover, .nav-dd.open .nav-dd-trigger{color:var(--ink)} .nav-dd-chev{width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--fg-ease)} .nav-dd.open .nav-dd-chev{transform:rotate(-135deg) translateY(-2px)} .nav-dd-panel{position:absolute; top:calc(100% + 16px); left:50%; width:384px; padding:10px; border-radius:20px; z-index:60; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(-10px) scale(.96); transform-origin:top center; background:rgba(250,250,247,.97); /* deckender als der Header (.82): Inhalt darf nicht durchscheinen */ backdrop-filter:blur(var(--fg-blur-premium)) saturate(1.35); -webkit-backdrop-filter:blur(var(--fg-blur-premium)) saturate(1.35); border:1px solid var(--fg-edge-gold); box-shadow:var(--fg-ivory-edge), 0 26px 64px -26px rgba(16,21,16,.42), 0 8px 20px -12px rgba(16,21,16,.22); transition:opacity .3s var(--fg-ease), transform .36s var(--fg-ease)} .nav-dd-panel::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 32%); opacity:.75} .nav-dd-panel::after{content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; transform:translateX(-50%) rotate(45deg); background:var(--fg-ivory-solid); border-left:1px solid var(--fg-edge-gold); border-top:1px solid var(--fg-edge-gold)} .nav-dd.open .nav-dd-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)} @media(hover:hover) and (pointer:fine){ /* Unsichtbare Bruecke ueber die 16px-Luecke zwischen Trigger und Panel. Ohne sie verliert .nav-dd:hover den Hover, sobald der Cursor in Richtung Menue nach unten faehrt, und das Panel schliesst sich, bevor man es erreicht. Breite = Panelbreite, damit auch diagonales Ziehen zu den aeusseren Eintraegen haelt. Ausserhalb von :hover pointer-events:none, damit der Streifen nie Klicks unter dem Header abfaengt. */ .nav-dd::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:384px; height:20px; pointer-events:none} .nav-dd:hover::after{pointer-events:auto} .nav-dd:hover .nav-dd-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)} /* Tastatur: da der Mausklick auf Desktop bewusst nichts mehr fixiert, oeffnet Tab-Fokus das Panel. Bewusst :focus-visible (nicht :focus-within), sonst bliebe es nach einem Mausklick offen stehen. Eigene Regel, damit Browser ohne :has() den Hover-Fall behalten. */ .nav-dd:has(.nav-dd-trigger:focus-visible) .nav-dd-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)} } .dd-item{position:relative; display:flex; align-items:center; gap:13px; padding:12px 13px; border-radius:13px; text-decoration:none; color:var(--ink); transition:background .2s} .dd-item + .dd-item{margin-top:2px} .dd-item:hover{background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(235,239,237,.55))} .dd-ico{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--copper-ink); background:rgba(139,150,145,.12); border:1px solid rgba(139,150,145,.22)} .dd-ico svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .dd-txt strong{display:block; font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--green); letter-spacing:-.01em; white-space:nowrap} .dd-txt span{display:block; font-size:.8rem; color:var(--muted); margin-top:1px} .dd-arr{margin-left:auto; color:var(--copper-ink); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s} .dd-item:hover .dd-arr{opacity:1; transform:translateX(0)} .nav-dd.open .dd-item{animation:ddIn .42s var(--fg-ease) backwards} @media(hover:hover) and (pointer:fine){ .nav-dd:hover .dd-item{animation:ddIn .42s var(--fg-ease) backwards} } .nav-dd .dd-item:nth-child(1){animation-delay:.05s} .nav-dd .dd-item:nth-child(2){animation-delay:.11s} .nav-dd .dd-item:nth-child(3){animation-delay:.17s} @keyframes ddIn{from{opacity:0; transform:translateY(7px)}} @media(prefers-reduced-motion:reduce){ .nav-dd-panel, .nav-dd-chev, .dd-item, .dd-arr{transition:none; animation:none} } /* Header-CTA-Button: bewusst auf `header` gescopet, damit diese Basis-Regel NICHT die Seiten-Buttons (.btn-copper/.btn-primary in pillar.css bzw. inline) ueberschreibt, wenn dieses Stylesheet nach dem Seiten-CSS geladen wird. */ header .btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font-weight:600; font-size:.95rem; background:var(--green); color:#fff; border:1px solid var(--green); transition:transform .15s ease, background .2s ease; } header .btn:hover{background:var(--green-2); transform:translateY(-1px)} header .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)} header .btn.ghost:hover{background:#fff; border-color:var(--ink)} header .btn .arr{transition:transform .2s ease} header .btn:hover .arr{transform:translateX(3px)} /* Header nav menu: desktop = inline row, mobile = dropdown */ .nav-menu{display:flex; align-items:center; gap:24px} .nav-toggle{ display:none; width:44px; height:44px; flex-shrink:0; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line); border-radius:12px; color:var(--ink); cursor:pointer; transition:border-color .2s ease; } .nav-toggle:hover{border-color:var(--ink)} .nav-toggle:focus-visible{outline:2px solid var(--green); outline-offset:2px} .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{ display:block; width:20px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease, background .2s ease; } .nav-toggle-bars{position:relative} .nav-toggle-bars::before{content:""; position:absolute; top:-6px; left:0} .nav-toggle-bars::after{content:""; position:absolute; top:6px; left:0} header.nav-open .nav-toggle-bars{background:transparent} header.nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)} header.nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:780px){ .nav-toggle{display:inline-flex} .nav-menu{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(250,250,247,.97); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:6px 0 18px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; } header.nav-open .nav-menu{opacity:1; visibility:visible; transform:none} .nav-menu .nav-links{flex-direction:column; gap:0; width:100%; font-size:1.05rem} .nav-menu .nav-links a{display:block; padding:15px 28px; color:var(--ink); border-top:1px solid var(--line)} .nav-menu .nav-links a:first-child{border-top:0} .nav-menu .nav-cta{margin:16px 28px 0; justify-content:center} /* Dropdown im Hamburger-Menue: inline aufklappen statt schwebendes Glas-Panel */ .nav-dd{display:block; width:100%} .nav-dd-trigger{display:flex; justify-content:space-between; width:100%; padding:15px 28px; font-size:1.05rem; color:var(--ink); border-top:1px solid var(--line)} .nav-dd-chev{transform:rotate(45deg)} .nav-dd.open .nav-dd-chev{transform:rotate(-135deg) translateY(3px)} .nav-dd-panel{position:static; transform:none !important; width:auto; padding:2px 18px 10px; border:0; box-shadow:none; background:rgba(139,150,145,.05); backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:0; display:none; opacity:1; pointer-events:auto} .nav-dd-panel::before, .nav-dd-panel::after{display:none} .nav-dd.open .nav-dd-panel{display:block} .dd-item{animation:none !important} } @media (prefers-reduced-motion:reduce){ .nav-menu, .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after{transition:none} } /* Mobile-Glass-Sheet */ /* Mobile-Menue als Ivory-Glass-Sheet */ @media (max-width:780px){ .nav-menu{ background:rgba(250,250,247,.93); /* Sheet deckender als Header: Menuepunkte immer klar lesbar */ backdrop-filter:saturate(160%) blur(var(--fg-blur-premium)); -webkit-backdrop-filter:saturate(160%) blur(var(--fg-blur-premium)); border-radius:0 0 18px 18px; box-shadow:var(--fg-ivory-edge), 0 28px 56px -28px rgba(16,21,16,.32); border-bottom:1px solid rgba(20,26,22,.06); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-menu{background:#faf9f4} } } /* Sheet-Animation */ /* Glass-Sheet federt auf, Menuepunkte fliessen nach */ @media (max-width:780px){ .nav-menu{transition:opacity .28s var(--fg-ease), transform .4s cubic-bezier(.3,1.35,.4,1), visibility .28s} header.nav-open .nav-menu .nav-links a{animation:sheetIn .38s var(--fg-ease) backwards} header.nav-open .nav-menu .nav-links a:nth-child(1){animation-delay:.04s} header.nav-open .nav-menu .nav-links a:nth-child(2){animation-delay:.08s} header.nav-open .nav-menu .nav-links a:nth-child(3){animation-delay:.12s} header.nav-open .nav-menu .nav-links a:nth-child(4){animation-delay:.16s} header.nav-open .nav-menu .nav-cta{animation:sheetIn .38s var(--fg-ease) .2s backwards} } @keyframes sheetIn{from{opacity:0; transform:translateY(-7px)}} /* Umgebungsadaptiver Header */ /* ===== Umgebungsadaptiver Header: Ivory ueber Hell, Forest Glass ueber Dunkel ===== */ header{transition:background var(--fg-dur) var(--fg-ease), box-shadow var(--fg-dur) var(--fg-ease)} header.is-over-dark{ background:rgba(7,26,20,.72); box-shadow:inset 0 1px 0 rgba(195,204,199,.22), inset 0 -1px 0 rgba(0,0,0,.35); } header.is-over-dark::after{background:linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.08) 46%, transparent)} header.is-over-dark .nav-links{color:#c9d4cb} /* Der Dropdown-Trigger ist ein