/* film-nav.css — Navbar mit Film-Negativ-Rolle rechts: Dose (Foto, canister2) links neben dem Streifen, der Streifen selbst ist komplett in CSS gezeichnet (Perforation als repeat-x-Radial-Gradients, Nav-Links als Kader-Flächen). Dosen-Geometrie (canister2, 92×160): Filmschlitz-Mitte bei 41.8 % der Dosenhöhe, Dose = 1.45 × Streifenhöhe; Streifen bündig an der Navbar-Unterkante, Dose ragt leicht darunter. Bar-Höhen 64/80 px unverändert → kein CLS. */ .mt-filmnav { --fh: 42px; /* Streifenhöhe mobil */ --bar: 64px; /* Navbar-Höhe mobil (wie bisher h-16) */ --gold: hsl(34 45% 70%); --film-ink: hsl(40 14% 92%); --strip-base: hsl(30 6% 8%); --hole: hsl(40 16% 93%); background: hsl(40 12% 97% / 0.58); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid hsl(40 20% 99% / 0.4); box-shadow: 0 8px 32px rgb(20 15 10 / 0.08); } @media (min-width: 1024px) { .mt-filmnav { --fh: 54px; --bar: 80px; } } .mt-film-bar { position: relative; height: var(--bar); display: flex; align-items: center; padding-left: 1.5rem; } @media (min-width: 1024px) { .mt-film-bar { padding-left: 3rem; } } /* Enge Desktops: nur Logo-Bildmarke, damit die Rolle Platz hat */ @media (min-width: 1024px) and (max-width: 1279px) { .mt-film-logo > div { display: none; } } /* Rolle: Dose links + CSS-Streifen, rechtsbündig, nur so breit wie ihr Inhalt. Der Streifen ist vertikal in der Leiste zentriert; die Dose hängt am Filmschlitz (Streifen-Offset 0.256 fh unter der Dosen-Oberkante) und schließt dadurch fast bündig mit der Leisten-Oberkante ab. */ .mt-film-roll { position: absolute; right: 0; top: calc((var(--bar) - var(--fh)) / 2 - 0.128 * var(--fh)); display: flex; align-items: flex-start; } .mt-film-canister { position: relative; z-index: 3; display: block; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.35)); } .mt-film-canister img { height: calc(1.322 * var(--fh)); width: auto; display: block; } /* Der Streifen: dunkle Negativ-Basis + Perforationsreihen oben/unten, Schlitz-Mitte der Dose = 0.418 × 1.45 fh → margin-top 0.106 fh */ .mt-film-strip { position: relative; display: flex; align-items: center; height: var(--fh); margin-top: calc(0.128 * var(--fh)); margin-left: calc(-0.1 * var(--fh)); padding-left: calc(0.32 * var(--fh)); padding-right: calc(0.2 * var(--fh)); border-radius: 0 3px 3px 0; background-color: var(--strip-base); background-image: radial-gradient(50% 50% at 50% 50%, var(--hole) 54%, hsl(30 6% 8% / 0) 63%), radial-gradient(50% 50% at 50% 50%, var(--hole) 54%, hsl(30 6% 8% / 0) 63%), linear-gradient(hsl(30 6% 11%), hsl(30 7% 6%)); background-size: calc(0.26 * var(--fh)) calc(0.17 * var(--fh)), calc(0.26 * var(--fh)) calc(0.17 * var(--fh)), 100% 100%; background-position: left 3px top 2px, left 3px bottom 2px, 0 0; background-repeat: repeat-x, repeat-x, no-repeat; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.3)); } /* Lade-Animation: Film rollt aus der Dose aus und deckt die Navbar auf. Reines CSS (CSP blockt Inline-JS); clip-path-Kante wandert von der Dose nach rechts, die Dose dreht dabei leicht mit (Spule). Negative Insets, damit der drop-shadow im Ruhezustand nicht abgeschnitten wird. */ /* Abrollen nur beim ersten Aufruf pro Sitzung — film-nav.js setzt .mt-nav-instant auf , sobald sessionStorage die Sitzung kennt */ @media (prefers-reduced-motion: no-preference) { html:not(.mt-nav-instant) .mt-film-strip { animation: mt-unroll 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; } html:not(.mt-nav-instant) .mt-film-canister img { animation: mt-dose-spin 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; } } @keyframes mt-unroll { from { clip-path: inset(-14px 100% -14px 0); } to { clip-path: inset(-14px -14px -14px 0); } } @keyframes mt-dose-spin { from { transform: rotate(-10deg); } to { transform: rotate(0deg); } } /* Kurzer Leerkader als Auslauf am rechten Streifenende */ .mt-film-tail { flex: none; align-self: center; width: calc(0.5 * var(--fh)); height: 66%; margin-left: 3px; border-radius: 1px; background: linear-gradient(hsl(30 5% 13%), hsl(30 6% 9%)); box-shadow: inset 0 0 0 1px hsl(40 20% 80% / 0.08); } /* Nav-Links: jeder Link ein eigener Film-Kader (nur Desktop). Wie beim echten Film sind alle Kader gleich breit; längere Labels brechen zentriert auf zwei Zeilen um. */ .mt-film-links { display: none; align-self: center; height: 66%; align-items: stretch; gap: 3px; } .mt-frame { display: flex; align-items: center; justify-content: center; width: clamp(92px, 7.5vw, 108px); padding: 0 4px; border-radius: 1px; background: linear-gradient(hsl(30 5% 13%), hsl(30 6% 9%)); box-shadow: inset 0 0 0 1px hsl(40 20% 80% / 0.08); color: hsl(40 14% 90% / 0.82); font-size: 0.6rem; font-weight: 300; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.35; text-align: center; white-space: normal; text-decoration: none; transition: color 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease; } /* Muss die lux.css-Unterstreichungsregel (header nav a:not(...)) schlagen, die sonst background-image/-size der Kader überschreibt */ .mt-filmnav nav a.mt-frame { background-image: linear-gradient(hsl(30 5% 13%), hsl(30 6% 9%)); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; } .mt-frame:hover { color: var(--gold); box-shadow: inset 0 0 0 1px hsl(34 45% 70% / 0.35); } .mt-frame:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .mt-frame-cta { color: var(--gold); font-weight: 400; box-shadow: inset 0 0 0 1px hsl(34 45% 70% / 0.5); } .mt-frame-cta:hover { box-shadow: inset 0 0 0 1px hsl(34 45% 70% / 0.9); color: hsl(34 55% 78%); } /* Burger als eigener Kader auf dem Streifen (mobil) */ .mt-film-burger { display: flex; align-self: center; align-items: center; height: 66%; padding: 0 12px; border-radius: 1px; background: linear-gradient(hsl(30 5% 13%), hsl(30 6% 9%)); box-shadow: inset 0 0 0 1px hsl(40 20% 80% / 0.08); color: var(--film-ink); cursor: pointer; } @media (min-width: 1024px) { .mt-film-links { display: flex; } .mt-film-burger { display: none; } } /* --- Sanfte Seitenübergänge (View Transitions API, Cross-Document) --------- Progressive Enhancement: Browser ohne Support laden einfach normal. Der Header hat einen eigenen Transition-Namen und bleibt beim Wechsel stehen, nur der Seiteninhalt blendet weich über. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { .mt-filmnav { view-transition-name: mt-header; } ::view-transition-old(root) { animation: mt-vt-out 0.4s cubic-bezier(0.55, 0, 0.55, 0.2) both; } ::view-transition-new(root) { animation: mt-vt-in 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both; } } @keyframes mt-vt-out { to { opacity: 0; transform: translateY(8px); } } @keyframes mt-vt-in { from { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Mobile-Panel im Film-Ton */ .mt-filmnav #mt-mob-panel { background: hsl(28 14% 11% / 0.98); } .mt-filmnav #mt-mob-panel a { color: hsl(40 12% 88% / 0.9); border-color: hsl(40 12% 88% / 0.12); } .mt-filmnav #mt-mob-panel a:hover { color: var(--gold); }