/* ========================================================= Liquid Glass Navigation – YOOtheme Einfügen: YOOtheme Customizer → Settings → Custom Code → CSS Anpassen über die Variablen in :root ========================================================= */ @property --lg-tint-color { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c0 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c1 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c2 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c3 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c4 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c5 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c6 { syntax: ''; inherits: true; initial-value: #f3e8d4; } @property --lg-c7 { syntax: ''; inherits: true; initial-value: #f3e8d4; } :root { --lg-nav-gap: 10px; /* Abstand zum oberen Rand */ --lg-nav-max: 1200px; /* maximale Breite der Leiste */ --lg-nav-height: 64px; --lg-tint: .2; /* Tint-Stärke 0–.8 */ /* Moodboard-Palette: Nussbaum, Leinen, Cognac-Leder */ --lg-ink: #2a1710; /* Nussbaum-Espresso (Schrift auf hellem Grund) */ --lg-cream: #f6ecd9; /* Leinen (Schrift auf dunklem Grund) */ --lg-shadow-rgb: 56, 26, 12; /* warmer Schatten statt Schwarz */ --lg-hi-rgb: 255, 240, 218; /* warme Glanzkanten statt Weiß */ --lg-accent: #a44e22; /* Cognac */ --lg-accent-hover: #8a3a12; /* Rost (Hover) */ } /* Header schwebt über dem Inhalt; nur die Glas-Leiste fängt Klicks ab */ html body .tm-header, html body .tm-header-mobile { --lg-text: rgba(var(--lg-hi-rgb),.96); --lg-text-shadow: 0 1px 6px rgba(var(--lg-shadow-rgb),.25); position: fixed !important; top: 0; left: 0; right: 0; z-index: 980; pointer-events: none; } /* YOOtheme-Sticky abschalten (Leiste ist ohnehin immer fixiert) */ .tm-header [uk-sticky], .tm-header-mobile [uk-sticky] { position: static !important; width: auto !important; margin: 0 !important; transform: none !important; animation: none !important; } .tm-header .uk-sticky-placeholder, .tm-header-mobile .uk-sticky-placeholder { display: none !important; } /* Sticky-Zustand darf das Aussehen der Leiste nicht verändern (kein Höhen-/Padding-Sprung) */ .tm-header .uk-navbar-sticky, .tm-header-mobile .uk-navbar-sticky { box-shadow: none; } .tm-header .uk-navbar-container .uk-navbar, .tm-header-mobile .uk-navbar-container .uk-navbar { transition: none; } /* Die Glas-Leiste */ .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { --lg-radius: 999px; pointer-events: auto; position: relative; isolation: isolate; width: min(var(--lg-nav-max), calc(100% - 24px)); margin: var(--lg-nav-gap) auto 0; border-radius: var(--lg-radius); /* partieller Tint: 8 Farb-Stops von links nach rechts, werden per JS je nach Hintergrund gesetzt */ background: linear-gradient(90deg, color-mix(in srgb, var(--lg-c0) var(--lg-a0, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c1) var(--lg-a1, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c2) var(--lg-a2, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c3) var(--lg-a3, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c4) var(--lg-a4, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c5) var(--lg-a5, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c6) var(--lg-a6, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c7) var(--lg-a7, calc(var(--lg-tint) * 100%)), transparent)) !important; box-shadow: 0 10px 30px rgba(var(--lg-shadow-rgb),.20), 0 2px 6px rgba(var(--lg-shadow-rgb),.12), inset 0 0 0 .5px rgba(var(--lg-hi-rgb),.35), inset 0 1px 1px rgba(var(--lg-hi-rgb),.35), inset 0 -8px 16px -8px rgba(var(--lg-hi-rgb),.18) !important; border: 0 !important; /* Fallback (Safari/Firefox): nur Blur. Chromium überschreibt per JS mit dem Refraktions-Filter */ -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); transition: --lg-tint-color .4s ease, --lg-c0 .4s ease, --lg-c1 .4s ease, --lg-c2 .4s ease, --lg-c3 .4s ease, --lg-c4 .4s ease, --lg-c5 .4s ease, --lg-c6 .4s ease, --lg-c7 .4s ease, color .4s ease; } .tm-header .uk-navbar-container > .uk-container, .tm-header-mobile .uk-navbar-container > .uk-container { padding: 0 14px !important; max-width: none; } .tm-header .uk-navbar, .tm-header-mobile .uk-navbar { min-height: var(--lg-nav-height); } /* Texte, Icons, Logo */ .tm-header .uk-navbar-nav > li > a, .tm-header .uk-navbar-item, .tm-header .uk-navbar-toggle, .tm-header-mobile .uk-navbar-item, .tm-header-mobile .uk-navbar-toggle { color: var(--lg-text) !important; text-shadow: var(--lg-text-shadow); transition: color .4s ease, background .25s ease; } .tm-header .uk-navbar-nav > li { display: flex; align-items: center; } /* Abstand zwischen den Menüpunkten (Theme-Gap 48px ist für Pills zu groß) */ .tm-header .uk-navbar-nav { gap: 6px !important; } @media (max-width: 1240px) { .tm-header .uk-navbar-nav > li > a { padding: 0 14px !important; } .tm-header .uk-navbar-nav { gap: 2px !important; } } @media (max-width: 1100px) { .tm-header .uk-navbar-nav > li > a { padding: 0 10px !important; letter-spacing: .06em !important; } .tm-header .uk-navbar-container .uk-button { padding: 0 18px !important; } .tm-header .uk-logo { font-size: 20px; } } /* Links als flache, breite Glas-Pills */ .tm-header .uk-navbar-nav > li > a { --lg-pill-h: 38px; height: var(--lg-pill-h) !important; min-height: 0 !important; padding: 0 20px !important; border-radius: 999px; align-self: center; white-space: nowrap; position: relative; letter-spacing: .1em; font-weight: 500; /* ruhig, Bauhaus-artig */ } .tm-header .uk-navbar-nav > li > a, .tm-header .uk-button { transition: color .4s ease, background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; } /* Hover / aktiv: Glas-Pill mit Highlight-Kanten */ .tm-header .uk-navbar-nav > li:hover > a, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"], .tm-header .uk-navbar-nav > li.uk-active > a { background: color-mix(in srgb, var(--lg-text) 9%, transparent); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 4px 12px rgba(var(--lg-shadow-rgb),.10), inset 0 0 0 .5px color-mix(in srgb, var(--lg-text) 12%, transparent), inset 0 1px 1px rgba(var(--lg-hi-rgb),.55), inset 0 -4px 8px -4px rgba(var(--lg-hi-rgb),.3); } /* Buttons in der Leiste (z. B. „Get Listed“): getöntes Glas statt Vollfarbe */ .tm-header .uk-navbar-container .uk-button, .tm-header-mobile .uk-navbar-container .uk-button { height: 38px; line-height: 38px; padding: 0 28px !important; border-radius: 999px; color: var(--lg-text) !important; text-shadow: var(--lg-text-shadow); border: 0 !important; background-image: none !important; background: color-mix(in srgb, var(--lg-accent) 94%, transparent) !important; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: 0 6px 16px color-mix(in srgb, var(--lg-accent) 38%, transparent), inset 0 0 0 .5px rgba(var(--lg-hi-rgb),.45), inset 0 1px 1px rgba(var(--lg-hi-rgb),.5), inset 0 -6px 10px -6px rgba(var(--lg-hi-rgb),.3) !important; } .tm-header .uk-navbar-container .uk-button:hover, .tm-header .uk-navbar-container .uk-button:focus-visible { background: color-mix(in srgb, var(--lg-accent-hover) 98%, transparent) !important; transform: translateY(-1px); } /* Suchsymbol & Toggle: Glas-Pill beim Hover */ .tm-header .uk-navbar-toggle { border-radius: 999px; height: 40px; min-height: 0; align-self: center; padding: 0 12px; transition: background .25s ease, box-shadow .25s ease, color .4s ease; } .tm-header .uk-navbar-toggle:hover, .tm-header .uk-navbar-toggle:focus-visible { background: color-mix(in srgb, var(--lg-text) 12%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--lg-text) 18%, transparent), inset 0 1px 1px rgba(var(--lg-hi-rgb), .45); } /* Fokus der Nav-Links (Tastatur) */ .tm-header .uk-navbar-nav > li > a:focus-visible { outline: 2px solid var(--lg-text); outline-offset: 2px; } .tm-header .uk-navbar-container .uk-button { color: var(--lg-cream) !important; letter-spacing: .08em; font-weight: 500; text-shadow: 0 1px 4px rgba(var(--lg-shadow-rgb),.25); } /* YOOtheme-Standardstrich unter dem aktiven Punkt entfernen */ .tm-header .uk-navbar-nav > li > a::before, .tm-header .uk-navbar-nav > li > a::after { display: none !important; } /* Logo übernimmt die Textfarbe (bei mehrfarbigem Logo diesen Block entfernen) */ .tm-header .uk-logo, .tm-header-mobile .uk-logo { color: var(--lg-text) !important; } .tm-header .uk-logo svg *, .tm-header-mobile .uk-logo svg * { fill: currentColor !important; } /* Dropdown-Panels als Glas-Karten (Customizer → Header → „Dropbar" auf „Dropdown" stellen) */ .tm-header .uk-navbar-dropdown, .tm-header .uk-dropbar { margin-top: 8px; border-radius: 24px; color: var(--lg-text); background: color-mix(in srgb, var(--lg-tint-color) 14%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 16px 40px rgba(var(--lg-shadow-rgb),.22), inset 0 0 0 .5px rgba(var(--lg-hi-rgb),.35), inset 0 1px 1px rgba(var(--lg-hi-rgb),.3); } .tm-header .uk-navbar-dropdown a, .tm-header .uk-navbar-dropdown .uk-nav > li > a { color: var(--lg-text); } /* Platz für die schwebende Leiste, damit sie keinen Inhalt verdeckt (bei Seiten mit Hero-Bild ganz oben auskommentieren/entfernen) */ body:not(.lgn-no-offset) .tm-page { padding-top: calc(var(--lg-nav-height) + var(--lg-nav-gap) * 2); } @media (prefers-reduced-motion: reduce) { .tm-header .uk-navbar-container, .tm-header-mobile .uk-navbar-container { transition: none; } } /* ========================================================= Clone-Engine (Safari/Firefox): die Seite liegt als verzerrte Kopie in der Leiste. Tint, Innenschatten und Inhalt liegen darüber. ========================================================= */ .tm-header .uk-navbar-container.lgn-clone, .tm-header-mobile .uk-navbar-container.lgn-clone { --lg-tint-bg: linear-gradient(90deg, color-mix(in srgb, var(--lg-c0) var(--lg-a0, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c1) var(--lg-a1, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c2) var(--lg-a2, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c3) var(--lg-a3, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c4) var(--lg-a4, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c5) var(--lg-a5, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c6) var(--lg-a6, calc(var(--lg-tint) * 100%)), transparent), color-mix(in srgb, var(--lg-c7) var(--lg-a7, calc(var(--lg-tint) * 100%)), transparent)); background: none !important; /* Sicherheitsboden: normales Milchglas unter der Kopie – greift, falls ein Browser den Refraktions-Filter nicht rendert */ -webkit-backdrop-filter: blur(14px) saturate(180%) !important; backdrop-filter: blur(14px) saturate(180%) !important; box-shadow: 0 10px 30px rgba(var(--lg-shadow-rgb),.20), 0 2px 6px rgba(var(--lg-shadow-rgb),.12) !important; } .lgn-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; -webkit-user-select: none; user-select: none; transform: translateZ(0); } .lgn-filter { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .lgn-clone::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: var(--lg-tint-bg); box-shadow: inset 0 0 0 .5px rgba(var(--lg-hi-rgb),.35), inset 0 1px 1px rgba(var(--lg-hi-rgb),.35), inset 0 -8px 16px -8px rgba(var(--lg-hi-rgb),.18); } .lgn-clone > .uk-container { position: relative; z-index: 2; } /* Scroll-gesteuerte Verschiebung der Seitenkopie. Bewusst left/top statt transform: ein zusammengesetztes (Compositor-)Kind lässt Safari den SVG-Filter am Elternelement ignorieren. */ @keyframes lgn-follow { from { left: var(--lgn-x, 0px); top: var(--lgn-y, 0px); } to { left: var(--lgn-x, 0px); top: calc(var(--lgn-y, 0px) - var(--lgn-range, 0px)); } } @supports (animation-timeline: scroll()) { .lgn-clone .lgn-tl { animation: lgn-follow linear both; animation-timeline: scroll(root block); } } @keyframes lgn-test { from { transform: translateX(0); } to { transform: translateX(10px); } } @keyframes lgn-test-top { from { left: 0; } to { left: 10px; } }