/* transition.css — Marken-Überblendung bei jedem Seitenaufruf/-wechsel. Das Overlay liegt auf jeder Seite ganz oben im und ist sofort sichtbar (deckt die Ladephase ab → nie ein schwarzer/leerer Bildschirm). transition.js blendet es aus, sobald der Seiteninhalt bereit ist. */ /* Scrollbar-Platz dauerhaft reservieren: Während die ankommende Seite noch leer ist (vor dem React-Render), gibt es keine vertikale Scrollbar → der Viewport wäre ~15px breiter und das zentrierte Logo würde nach rechts und beim Render wieder nach links springen. „stable" hält die Breite konstant → kein Springen. */ html { scrollbar-gutter: stable; overflow-x: hidden; } #bzt-veil { position: fixed; inset: 0; z-index: 9999; background: var(--ink-900); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 40px); opacity: 1; transition: opacity 0.5s ease; } #bzt-veil.is-hidden { opacity: 0; pointer-events: none; } #bzt-veil.is-instant { transition: none; opacity: 1; } #bzt-veil .bzt-veil-logo { height: clamp(130px, 24vh, 260px); width: auto; display: block; } #bzt-veil .bzt-veil-wm { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.32em; text-indent: 0.32em; color: var(--silver); font-size: clamp(14px, 2.2vw, 24px); } /* Logo & Wortmarke werden NICHT mehr einzeln eingeblendet — sie stehen sofort ruhig im Overlay. Die Überblendung passiert allein über die Opacity des gesamten Overlays (#bzt-veil). So gibt es beim Seitenwechsel kein kurzes Aufblitzen/Einfliegen des Logos mehr; das Bild bleibt ruhig. */ @media (prefers-reduced-motion: reduce) { #bzt-veil { transition: opacity 0.25s ease; } }