/* ============================================================================ LAZAAR31 – Bewegung und Feinschliff Diese Datei wird als LETZTE geladen und legt sich ueber alle anderen. Sie aendert kein Layout, sondern nur, wie sich die Seite anfuehlt: Einblenden beim Scrollen, mitfahrende Navigationsleiste, Lesefortschritt, Hover- und Fokuszustaende. Zwei Sicherungen sind eingebaut: 1. Alles, was etwas versteckt, haengt an html.motion. Diese Klasse setzt theme.js noch vor dem ersten Zeichnen und nimmt sie wieder zurueck, falls motion.js nicht ankommt. Ohne JavaScript ist jeder Inhalt sofort sichtbar. 2. Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt am Ende der Datei alle Bewegung abgeschaltet. Hinweis zu position:fixed ------------------------- traegt container-type:inline-size (Grundlage der cqw-Masse). Das bringt Layout-Containment mit sich – wird dadurch zum Bezugsrahmen fuer fixierte Elemente, die dann am Dokument haengen statt am Fenster. Die mitfahrende Leiste, der Fortschrittsbalken und der Knopf "nach oben" werden deshalb von motion.js an gehaengt; Forumsfenster sind und liegen in der obersten Ebene des Browsers. ========================================================================= */ /* --- Bewegungsmuster ------------------------------------------------------ */ @keyframes lzFadeUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}} @keyframes lzFadeLeft{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}} @keyframes lzFadeRight{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}} @keyframes lzZoomIn{from{opacity:0;transform:scale(.955)}to{opacity:1;transform:none}} @keyframes lzFadeDown{from{opacity:0;transform:translate3d(0,-14px,0)}to{opacity:1;transform:none}} @keyframes lzFadeIn{from{opacity:0}to{opacity:1}} @keyframes lzPopIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}} @keyframes lzFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.4%,0)}} @keyframes lzFloatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2.6%,0)}} @keyframes lzPulseRing{0%{transform:scale(.75);opacity:.5}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}} @keyframes lzMenuIn{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:none}} @keyframes lzPan{from{background-position:0% 50%}to{background-position:200% 50%}} @keyframes lzSpin{to{transform:rotate(360deg)}} /* ============================================================================ 1. Einblenden beim Scrollen motion.js beobachtet die Elemente und setzt .is-visible, sobald sie in den Blick kommen. --lz-delay staffelt Geschwister leicht gegeneinander. Bewusst als animation und nicht als transition: dadurch bleiben die transition-Regeln der Bausteine (Hover auf Karten und Knoepfen) unberuehrt und fuehlen sich weiterhin flott an. ========================================================================= */ html.motion .reveal, html.motion .about-reveal{opacity:0} html.motion .reveal.is-visible, html.motion .about-reveal.is-visible{ animation:lzFadeUp .75s var(--ease-out) both; animation-delay:var(--lz-delay,0ms); } html.motion .reveal--left.is-visible{animation-name:lzFadeLeft} html.motion .reveal--right.is-visible{animation-name:lzFadeRight} html.motion .reveal--zoom.is-visible{animation-name:lzZoomIn} /* ============================================================================ 2. Kopfbereich Der grosse Kopf bleibt, wo er ist – er gehoert zum Bildaufbau der Startseite. Beim Scrollen faehrt zusaetzlich eine schmale Leiste ein. ========================================================================= */ html.motion .site-header{animation:lzFadeDown .7s var(--ease-out) both} .site-header .logo{transition:box-shadow .3s var(--ease-out)} .site-header .logo__img{transition:transform .45s var(--ease-spring)} .site-header .logo:hover .logo__img{transform:scale(1.12) rotate(-4deg)} .site-header .logo:hover{box-shadow:0 .6cqw 1.6cqw -.6cqw rgba(210,20,30,.65)} /* --- Mitfahrende Leiste (von motion.js an gehaengt) ---------------- */ .site-topbar{ position:fixed; left:0;right:0;top:0; z-index:58; font-family:'Inter',system-ui,sans-serif; background:rgba(251,250,249,.88); background:color-mix(in srgb,var(--surface) 88%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--border-color); box-shadow:0 12px 30px -24px rgba(20,15,10,.8); transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .4s var(--ease-out),opacity .3s var(--ease-out); } .site-topbar.is-visible{transform:none;opacity:1;pointer-events:auto} .site-topbar__inner{display:flex;align-items:center;gap:20px;max-width:1440px;margin:0 auto;padding:8px 26px} .site-topbar__logo{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:38px;height:46px;background:var(--brand);text-decoration:none;transition:transform .3s var(--ease-spring)} .site-topbar__logo img{width:60%;height:auto;object-fit:contain} .site-topbar__logo:hover{transform:translateY(-2px)} .site-topbar__nav{display:flex;flex-wrap:wrap;gap:24px;margin-left:6px;min-width:0} .site-topbar__link{position:relative;padding:6px 0;color:var(--text-color);font-size:12px;font-weight:800;letter-spacing:.09em;text-decoration:none;white-space:nowrap;transition:color .2s var(--ease-out)} .site-topbar__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s var(--ease-out)} .site-topbar__link:hover{color:var(--brand)} .site-topbar__link:hover::after{transform:scaleX(1);transform-origin:0 50%} .site-topbar__link--active{color:var(--brand)} .site-topbar__link--active::after{transform:scaleX(1)} .site-topbar__theme{margin-left:auto;width:36px;height:36px} .site-topbar__theme .theme-toggle__icon{width:18px;height:18px} /* Auf schmalen Schirmen fuehrt der Knopf "nach oben" zurueck zum Menue. */ @media (max-width:768px){ .site-topbar{display:none} } /* --- Navigation im Kopf: mitlaufender Unterstrich ------------------------- */ .nav__link{position:relative;transition:color .25s var(--ease-out)} .nav__link::after{ content:""; position:absolute; left:0;right:0;bottom:-.19cqw; height:.19cqw; background:var(--brand); transform:scaleX(0); transform-origin:100% 50%; transition:transform .35s var(--ease-out); } .nav__link:hover::after, .nav__link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%} .nav__link--active::after{transform:scaleX(1)} /* --- Mobiles Menue -------------------------------------------------------- */ #mobile-menu.is-open{animation:lzMenuIn .3s var(--ease-out) both} html.motion #mobile-menu.is-open .nav-mobile__link{animation:lzFadeUp .4s var(--ease-out) both} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(1){animation-delay:.03s} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(2){animation-delay:.06s} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(3){animation-delay:.09s} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(4){animation-delay:.12s} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(5){animation-delay:.15s} html.motion #mobile-menu.is-open .nav-mobile__link:nth-child(6){animation-delay:.18s} .nav-mobile__link{transition:color .2s var(--ease-out),padding-left .25s var(--ease-out)} .nav-mobile__link:hover{color:var(--brand);padding-left:6px} /* --- Umschalter hell/dunkel ----------------------------------------------- */ .theme-toggle__icon{transition:transform .5s var(--ease-spring),opacity .3s ease} .theme-toggle:hover .theme-toggle__icon{transform:rotate(35deg)} html[data-theme="dark"] .theme-toggle:hover .theme-toggle__icon{transform:rotate(-20deg)} /* --- Burger-Knopf --------------------------------------------------------- */ #nav-toggle .nav-toggle__bar{transition:transform .3s var(--ease-out),opacity .2s ease} #nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg)} #nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0} #nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ============================================================================ 3. Lesefortschritt und Zurueck-nach-oben Beide Bausteine legt motion.js an – im HTML steht dafuer nichts. ========================================================================= */ .scroll-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent} .scroll-progress__bar{ height:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--brand),var(--brand-bright),var(--brand)); background-size:200% 100%; animation:lzPan 4s linear infinite; } .to-top{ position:fixed; right:24px; bottom:24px; z-index:57; width:46px;height:46px; display:grid;place-items:center; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--card-bg); color:var(--text-color); cursor:pointer; box-shadow:0 12px 28px -14px rgba(20,15,10,.55); opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; transition:opacity .3s var(--ease-out),transform .3s var(--ease-spring),background-color .25s ease,color .25s ease,border-color .25s ease; } .to-top.is-visible{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-3px)} .to-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ============================================================================ 4. Knoepfe – leichtes Anheben und ein Lichtstreif beim Ueberfahren ========================================================================= */ .cta, .btn-forum, .about-button:not(.about-button--text), .highlights-button:not(.highlights-button--text){ position:relative; overflow:hidden; isolation:isolate; transition:transform .28s var(--ease-spring),box-shadow .28s var(--ease-out),background-color .25s ease,color .25s ease; } .cta::after, .btn-forum::after, .about-button:not(.about-button--text)::after, .highlights-button:not(.highlights-button--text)::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.3) 46%,transparent 64%); transform:translateX(-130%); transition:transform .75s var(--ease-out); } .cta:hover::after, .btn-forum:hover::after, .about-button:not(.about-button--text):hover::after, .highlights-button:not(.highlights-button--text):hover::after{transform:translateX(130%)} .cta:hover, .btn-forum:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .cta:active, .btn-forum:active, .about-button:active{transform:translateY(0) scale(.98)} /* Textknopf: der Unterstrich zieht sich beim Ueberfahren zusammen. */ .about-button--text{position:relative;border-bottom-color:transparent!important} .about-button--text::before{ content:""; position:absolute; left:0;right:0;bottom:0; height:1px; background:currentColor; transform:scaleX(1); transform-origin:0 50%; transition:transform .35s var(--ease-out); } .about-button--text:hover::before{transform:scaleX(.35)} /* ============================================================================ 5. Karten und Flaechen ========================================================================= */ .card, .info-card, .schedule-item, .clip-card{ transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out); } .card:hover, .info-card:hover, .clip-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong); } .schedule-item:hover{transform:translateX(4px);border-color:var(--border-strong)} .forum-widget{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)} .forum-widget:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)} .value-card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s var(--ease-out)} .value-card:hover{border-color:rgba(210,20,30,.3)} .value-card__icon{transition:transform .45s var(--ease-spring)} .value-card:hover .value-card__icon{transform:translateY(-4px) scale(1.07)} .tag{transition:background-color .25s ease,color .25s ease,transform .25s var(--ease-out)} .tag:hover{transform:translateY(-1px)} /* ============================================================================ 6. Startseite – die Bildbuehne bekommt Leben Nur Deckkraft und Verschiebung, damit die ausgemessene Komposition an ihrem Platz bleibt. ========================================================================= */ html.motion .hero__content > *{animation:lzFadeUp .85s var(--ease-out) both} html.motion .hero__title{animation-delay:.06s} html.motion .hero__tagline{animation-delay:.16s} html.motion .hero__status{animation-delay:.26s} html.motion .hero__ctas{animation-delay:.36s} html.motion .hero__visual{animation:lzFadeIn 1.1s var(--ease-out) both} .hv--goat{animation:lzFloat 7s ease-in-out infinite} .hv--controller{animation:lzFloat 5.4s ease-in-out infinite;animation-delay:-1.6s} .hv--drops{animation:lzFloatSoft 4.6s ease-in-out infinite;animation-delay:-.9s} .hv--waves{animation:lzFloatSoft 6.2s ease-in-out infinite;animation-delay:-2.2s} /* ============================================================================ 7. Live-Anzeigen – ein weicher Ring statt nur Blinken ========================================================================= */ .live-dot--red{position:relative} .live-dot--red::after{ content:""; position:absolute; inset:-.28cqw; border-radius:50%; border:1px solid var(--brand); animation:lzPulseRing 2.2s ease-out infinite; pointer-events:none; } .live-dot--still::after{display:none} /* ============================================================================ 8. Fokus – ueberall sichtbar, ueberall gleich ========================================================================= */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; } /* ============================================================================ 9. Kopf- und Fusszeile ========================================================================= */ .site-footer__heartbeat{transition:opacity .4s ease} .site-footer:hover .site-footer__heartbeat{opacity:1} .site-footer__social .icon-link, .site-header__icons .icon-link{transition:transform .3s var(--ease-spring)} .site-footer__social .icon-link:hover{transform:translateY(-3px) scale(1.08)} .site-header__icons .icon-link:hover{transform:translateY(-2px) scale(1.08)} /* ============================================================================ 10. Ladeanzeige fuer nachgeladene Inhalte ========================================================================= */ .lz-spinner{ width:18px;height:18px; border:2px solid var(--border-color); border-top-color:var(--brand); border-radius:50%; animation:lzSpin .8s linear infinite; } /* ============================================================================ 11. Weniger Bewegung, wenn das Betriebssystem es so will ========================================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } html.motion .reveal, html.motion .about-reveal{opacity:1} .scroll-progress{display:none} }