/* ────────────────────────────────────────────────────────── KOS KLIMA — Globales Float-Nav (auf allen Seiten identisch) Wird via in jeder Subpage geladen, damit CSS vor dem Body bereit ist (kein FOUC). ────────────────────────────────────────────────────────── */ /* Subpage-Abstand oben: Body bekommt Padding damit Hero unter dem Nav startet */ body { padding-top: 90px; background: #fff; } @media (max-width: 720px) { body { padding-top: 72px; } } /* Sanfter Fade ins Weiße zwischen Padding und Content */ .nav-fade-mask { position: fixed; top: 0; left: 0; right: 0; height: 120px; z-index: 49; background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 60%, rgba(255,255,255,0) 100%); pointer-events: none; } @media (max-width: 720px) { .nav-fade-mask { height: 90px; } } .float-nav { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: max-content; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; animation: floatNavIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } @keyframes floatNavIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.94); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .float-nav { opacity: 1; animation: none; } } .float-nav-row { display: flex; align-items: stretch; gap: 8px; } .float-nav-pill { display: flex; align-items: center; background: rgba(255,255,255,0.68); backdrop-filter: blur(32px) saturate(210%); -webkit-backdrop-filter: blur(32px) saturate(210%); border: 1px solid rgba(255,255,255,0.88); border-radius: 999px; box-shadow: 0 8px 32px rgba(55,83,116,0.10), 0 2px 8px rgba(55,83,116,0.06), inset 0 1px 0 rgba(255,255,255,0.95); padding: 6px 10px 6px 18px; gap: 2px; white-space: nowrap; transition: box-shadow 0.3s ease, background 0.3s ease; min-height: 44px; box-sizing: border-box; } .float-nav.is-scrolled .float-nav-pill { background: rgba(255,255,255,0.90); box-shadow: 0 4px 20px rgba(55,83,116,0.10), inset 0 1px 0 rgba(255,255,255,1); } .float-nav-logo { display: flex; align-items: center; flex-shrink: 0; } .float-nav-logo img { height: 26px; width: auto; margin-bottom: 4px; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-logo:hover img { transform: scale(1.06); } .float-nav-sep { width: 1px; height: 18px; background: rgba(55,83,116,0.12); margin: 0 8px; flex-shrink: 0; } .float-nav-links { display: flex; align-items: center; list-style: none; gap: 0; margin: 0; padding: 0; } .float-nav-links > li > a, .float-nav-links > li > button { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-headline, system-ui); font-size: 11px; font-weight: 600; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.09em; padding: 7px 11px; border-radius: 999px; background: none; border: none; cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); white-space: nowrap; text-decoration: none; } .float-nav-links > li > a:hover, .float-nav-links > li > button:hover { background: var(--blue-dark, #375374); color: #fff; transform: translateY(-1px); } .float-nav-links > li > a:hover svg, .float-nav-links > li > button:hover svg { stroke: #fff; opacity: 0.9; } .float-nav-links > li > button.is-active { background: rgba(55,83,116,0.08); color: var(--blue-dark, #375374); } .fn-chev { width: 9px; height: 9px; opacity: 0.4; flex-shrink: 0; transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-links > li > button.is-active .fn-chev { transform: rotate(180deg); } .float-nav-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-dark, #375374); color: #fff; padding: 5px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 24px rgba(55,83,116,0.18), 0 2px 6px rgba(55,83,116,0.10); font-family: var(--font-headline, system-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; flex-shrink: 0; white-space: nowrap; line-height: 32px; transition: background 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); text-decoration: none; } .float-nav-cta .arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); } .float-nav-cta:hover { background: #2c4863; box-shadow: 0 12px 32px rgba(55,83,116,0.22), 0 3px 8px rgba(55,83,116,0.12); transform: translateY(-1px); } .float-nav-cta:hover .arrow { transform: translateX(3px); } .float-nav-tray { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.68); backdrop-filter: blur(32px) saturate(210%); -webkit-backdrop-filter: blur(32px) saturate(210%); border: 1px solid rgba(255,255,255,0.88); border-radius: 999px; box-shadow: 0 8px 28px rgba(55,83,116,0.10), 0 2px 6px rgba(55,83,116,0.06), inset 0 1px 0 rgba(255,255,255,0.95); padding: 6px 10px; white-space: nowrap; opacity: 0; transform: translateY(-12px) scale(0.94); pointer-events: none; transition: opacity 0.32s cubic-bezier(0.2,0.9,0.3,1.2), transform 0.38s cubic-bezier(0.34,1.56,0.64,1); min-height: 44px; box-sizing: border-box; } .float-nav.tray-open .float-nav-tray { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .fn-tray-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; font-family: var(--font-headline, system-ui); font-size: 11px; font-weight: 600; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.09em; transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4); text-decoration: none; } .fn-tray-chip:hover { background: var(--blue-dark, #375374); color: #fff; transform: translateY(-1px); } .fn-tray-chip-icon { width: 18px; height: 18px; border-radius: 5px; background: rgba(55,83,116,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } .fn-tray-chip:hover .fn-tray-chip-icon { background: rgba(108,173,198,0.16); } .fn-tray-chip-icon svg { width: 10px; height: 10px; stroke: var(--blue-dark, #375374); } .fn-tray-chip:hover .fn-tray-chip-icon svg { stroke: var(--blue-light, #6CADC6); } .fn-tray-sep { width: 1px; height: 18px; background: rgba(55,83,116,0.10); flex-shrink: 0; } .mobile-top-bar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgba(255,255,255,0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(55,83,116,0.08); } .mobile-top-bar .logo-img { height: 38px; width: auto; } .mobile-burger { background: none; border: none; padding: 8px; color: var(--blue-dark, #375374); cursor: pointer; display: flex; } .mobile-burger svg { display: block; transition: transform 0.3s; } .mobile-burger.is-open svg { transform: rotate(90deg); } @media (max-width: 900px) { .float-nav { display: none; } .mobile-top-bar { display: flex; } } .mobile-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: #fff; z-index: 100; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--hairline, rgba(55,83,116,0.10)); } .mobile-menu-head .logo-img { height: 44px; } .mobile-menu-close { background: none; border: none; color: var(--blue-dark, #375374); cursor: pointer; padding: 8px; font-size: 28px; line-height: 1; } .mobile-menu-body { flex: 1 0 auto; display: flex; flex-direction: column; padding: 18px clamp(20px, 5vw, 40px) 24px; gap: 0; } .mobile-menu-body a { font-family: var(--font-headline, system-ui); font-weight: 700; font-size: 17px; color: var(--blue-dark, #375374); text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 2px; border-bottom: 1px solid var(--hairline, rgba(55,83,116,0.10)); transition: color 0.2s, padding-left 0.25s; text-decoration: none; } .mobile-menu-body a:last-child { border-bottom: none; } .mobile-menu-body a:hover, .mobile-menu-body a:active { color: var(--blue-light, #6CADC6); padding-left: 12px; } .mobile-menu-foot { padding: 24px clamp(20px, 5vw, 40px) 40px; border-top: 1px solid var(--hairline, rgba(55,83,116,0.10)); display: flex; flex-direction: column; gap: 16px; } .mobile-menu-foot .nav-cta { display: flex; justify-content: center; align-items: center; gap: 8px; text-align: center; width: 100%; padding: 16px 22px; font-size: 14px; letter-spacing: 0.1em; border-radius: 14px; background: var(--blue-dark, #375374); color: #fff; box-shadow: 0 8px 20px rgba(55,83,116,0.22); font-family: var(--font-headline, system-ui); font-weight: 700; text-transform: uppercase; text-decoration: none; } .mobile-menu-foot .nav-cta .arrow { font-size: 16px; } body.menu-locked { overflow: hidden; } /* Scrollbar konsistent halten → keine seitliche Verschiebung beim Mobile-Menü-Öffnen */ html { overflow-y: scroll; }