/* ========================= Root & Base ========================= */ * { box-sizing: border-box } html { scroll-behavior: auto; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; /* Safari/Samsung/Chrome Android */ text-size-adjust: 100%; /* Standard-Eigenschaft */ } :root { --black:#000; --bg:#041419; --fg:#eee1e1; --muted:#aeaeae; --accent:#235ac0; --header-h: 64px; --burgerbg: #0e1b23; /* Tile/Grid system */ --tile-w: 460px; /* Default; via [data-size] überschreibbar */ --tile-gap: 60px; --tile-pad-x: 200px; /* seitliche Innenräume (Desktop) */ --thumb-ar: 16/9; /* Thumbnail Aspect Ratio, nicht Player */ --content-w: calc(var(--tile-w) * 3 + var(--tile-gap) * 2); --mobile-pad: 45px; } /* Stufen (per data-size am ) */ :root[data-size="XS"] { --tile-w: 320px; --tile-pad-x: 200px; --tile-gap: 45px } :root[data-size="S"] { --tile-w: 380px; --tile-pad-x: 150px; --tile-gap: 40px } :root[data-size="M"] { --tile-w: 460px; --tile-pad-x: 100px; --tile-gap: 35px } :root[data-size="L"] { --tile-w: 560px; --tile-pad-x: 50px; --tile-gap: 30px } :root[data-size="XL"] { --tile-w: 680px; --tile-pad-x: 0px; --tile-gap: 25px } html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, Segoe UI, Roboto; font-variant-ligatures: none; } .wrap { max-width:1600px; margin:auto; padding: 24px; } @media (max-width: 900px){ .wrap { max-width: 100%; padding-left: var(--mobile-pad); padding-right: var(--mobile-pad); } } header { padding:56px 24px 24px } h1 { font-size:42px; margin:0 0 8px } h2 { font-size:35px; margin:0 0 72px; text-align:center } nav a { margin-right:16px; color:var(--muted); text-decoration:none } .small { color:var(--muted); font-size:14px } p { margin: 0 } p + p { margin-top: 1em } /* Fokus nur bei Tastatur zeigen */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px } :focus:not(:focus-visible) { outline: none } /* Sprungziele: nie Outline, wenn Fokus nicht via Tastatur kam */ [id]:focus:not(:focus-visible), section[id]:focus:not(:focus-visible) { outline: none } /* Keine Outline für fokussierte Anchor-Sections */ section[id]:focus, [id]:focus { outline: none !important; box-shadow: none !important; } /* Auf Touch-Geräten: keine Outline für Sektionen, wenn sie Fokus bekommen */ @media (hover:none) and (pointer:coarse){ section[id]:focus, [id]:focus { outline: none !important; } } /* Tap Highlight reset */ a, button, .home-link, .burger { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); outline: none; } a:focus, button:focus, .home-link:focus, .burger:focus { outline: none; box-shadow: none } /* ========================= Fixed Top Navigation ========================= */ .site-nav{ position: fixed; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; padding: 0 24px; background: color-mix(in oklab, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 50; box-shadow: 0 0px 6px 8px rgba(0,0,0,0.5); } .site-nav .wrap{ max-width: none; width: 100%; margin: 0; padding: 0; display: flex; align-items: center; } .home-link { margin-right: auto; display: flex; align-items: center; padding: 0; color: var(--fg); text-decoration: none; transition: color .15s ease; } .home-link.tapped { color: var(--accent) } /* erbt auf SVG via currentColor */ .home-icon { display:block; width:24px; height:24px } @media (max-width: 900px) { .home-link { position: relative } .home-link::before { /* Klickfläche vergrößern ohne Layout-Shift */ content: ""; position: absolute; inset: -10px; } } .nav-list{ display:flex; gap:12px; list-style:none; margin:0; padding:0 } .nav-list a{ position: relative; color: var(--muted); text-decoration:none; font-weight:500; display:inline-block; transition: color .20s ease, transform .25s ease; } .nav-list a.active { color: var(--fg); transform: scale(1.12); transform-origin: center; /* symmetrisch wachsen */} .nav-list a.clicked { transform: scale(0.92); transform-origin: center; } /* Auch im Mobile-Overlay */ .nav-overlay a.active { filter: brightness(1.42); color: var(--fg); } .nav-list a::before{ content:""; position:absolute; inset:-12px -12px; /* größere Hit-Area */ } /* ===== Center Toggle (never-shifting divider, fixed gaps) ===== */ .site-toggle{ /* center the whole control in the nav */ position: absolute; margin-left: 90px; display: grid; grid-template-columns: 1fr 1fr; /* equal halves */ align-items: center; justify-items: stretch; min-width: 20px; /* your “good width”, adjust if needed */ text-transform: lowercase; --toggle-gap: 5px; /* fixed space from the center bar to text */ --divider-w: 3px; --divider-h: 1.3em; --inactive: var(--muted); --active: var(--fg); } /* immovable center bar */ .site-toggle::after{ content: ""; position: absolute; left: 47%; top: 55%; transform: translate(-50%,-50%); width: var(--divider-w); height: var(--divider-h); background: currentColor; opacity: .7; pointer-events: none; } /* inner pads create fixed offset from the divider, so text never “eats” into the gap when it gets bigger */ .site-toggle > a{ position: relative; display: grid; place-items: center; color: var(--inactive); text-decoration: none; line-height: 1; font-size: 1.15rem; /* base size */ font-weight: 500; transition: color .25s ease, transform .35s ease, font-weight .45s ease; isolation: isolate; } /* fixed spacing near the divider (right side gets left padding, left side gets right padding) */ .site-toggle > a:first-child{ padding-right: calc(var(--toggle-gap) + var(--divider-w)/2); } .site-toggle > a:last-child { padding-left: calc(var(--toggle-gap) + var(--divider-w)/2); } /* Während Boot: noch nicht groß */ html.booting .site-toggle > a[aria-current="page"] { transform: scale(1); } /* Active state: brighter + thicker + a gentle scale (scale comes with transform-origin set away from the divider so it grows outward) */ .site-toggle > a[aria-current="page"]{ color: var(--active); font-weight: 500; transform: scale(1.15); } .site-toggle a.clicked { transform: scale(0.88); transform-origin: center; } /* make the left label grow to the LEFT, the right label to the RIGHT */ .site-toggle > a:first-child[aria-current="page"]{ transform-origin: center; } .site-toggle > a:last-child[aria-current="page"] { transform-origin: center; } /* Pulse-Farbe wie beim Home-Icon */ .site-toggle > a.tapped { color: var(--accent); } @media (max-width: 900px){ .site-toggle{ font-size: 1rem; --toggle-gap: 8px; margin-left: 0px; left: 53%; transform: translateX(-50%);} .site-toggle > a{ font-size: 1.1rem;} } /* Burger */ .burger { display:none; background:none; border:none; font-size:28px; cursor:pointer; color:var(--fg) } .burger.active { color: var(--accent) } /* Hover nur auf Geräten mit Maus */ @media (hover: hover){ .home-link:hover, .nav-list a:hover, .burger:hover, .site-toggle > a:hover { color: var(--accent) } } /* ========================= Mobile Burger Menu Overlay - Always rendered; hidden via transform/opacity/visibility - One boolean: [data-open] present = open ========================= */ .nav-overlay{ display:none; } @media (max-width: 900px){ .burger { display:flex; justify-content: center; align-items: center;} .site-nav .nav-list { display:none } body.menu-open { overflow:hidden } .nav-overlay{ position: fixed; inset: var(--header-h) 0 0 0; z-index: 9999; display:flex; flex-direction:column; align-items:stretch; gap:0; --menu-bg: color-mix(in srgb, var(--bg) 90%, transparent); background: var(--menu-bg); padding:0; margin:0; list-style:none; overflow:hidden; backface-visibility:hidden; will-change:transform, opacity; /* hidden (base) */ visibility:hidden; pointer-events:none; opacity:0; transition: opacity .7s ease, visibility .7s; } .nav-overlay[data-open]{ visibility:visible; pointer-events:auto; opacity:1; transition: visibility 0s } /* Optional: disable transitions for instant-close on link taps */ .nav-overlay.no-anim, .nav-overlay.no-anim[data-open]{ transition:none !important } .nav-overlay li{ margin:0; padding:0; display:flex; justify-content:flex-end; opacity:0; transition:opacity .80s ease; } .nav-overlay[data-open] li{ opacity:1 } /* Stagger in/out */ .nav-overlay[data-open] li:nth-child(1){transition-delay:.03s} .nav-overlay[data-open] li:nth-child(2){transition-delay:.06s} .nav-overlay[data-open] li:nth-child(3){transition-delay:.09s} .nav-overlay[data-open] li:nth-child(4){transition-delay:.12s} .nav-overlay[data-open] li:nth-child(5){transition-delay:.15s} .nav-overlay[data-open] li:nth-child(6){transition-delay:.18s} .nav-overlay[data-open] li:nth-child(7){transition-delay:.21s} .nav-overlay[data-open] li:nth-child(8){transition-delay:.24s} .nav-overlay[data-open] li:nth-child(9){transition-delay:.27s} .nav-overlay[data-open] li:nth-child(10){transition-delay:.30s} .nav-overlay:not([data-open]) li:nth-child(1){transition-delay:.10s} .nav-overlay:not([data-open]) li:nth-child(2){transition-delay:.09s} .nav-overlay:not([data-open]) li:nth-child(3){transition-delay:.08s} .nav-overlay:not([data-open]) li:nth-child(4){transition-delay:.07s} .nav-overlay:not([data-open]) li:nth-child(5){transition-delay:.06s} .nav-overlay:not([data-open]) li:nth-child(6){transition-delay:.05s} .nav-overlay:not([data-open]) li:nth-child(7){transition-delay:.04s} .nav-overlay:not([data-open]) li:nth-child(8){transition-delay:.03s} .nav-overlay:not([data-open]) li:nth-child(9){transition-delay:.02s} .nav-overlay:not([data-open]) li:nth-child(10){transition-delay:.01s} .nav-overlay a{ display:flex; align-items:center; justify-content:center; width:100vw; padding:16px 24px; text-decoration:none; color:var(--fg); font-weight:600; background:var(--menu-bg); border-top:1px solid rgba(255,255,255,.078); border-radius:0; } .nav-overlay li:nth-last-child(2) > a{ border-bottom:1px solid rgba(255,255,255,.078); } .nav-overlay .nav-footer{ margin-top:auto; justify-content:center; text-align:center; margin-bottom:30px; color:var(--muted); font-size:14px; line-height:1.4; opacity:1; } .nav-overlay a:hover, .nav-overlay a:active, .nav-overlay a:focus { filter: brightness(1.42) } } /* Bewegungsreduktion: zentral (war doppelt vorhanden) */ @media (prefers-reduced-motion: reduce){ .nav-overlay, .nav-overlay *{ transition: none !important } } /* ========================= Hero / Landing ========================= */ .hero.landing{ min-height: calc(100svh - var(--header-h)); display:grid; place-items:center; text-align:center; padding:24px; margin-bottom: 40px; background: url("assets/img/Background_blended.jpg") no-repeat center/cover; } .hero-inner{ margin-top: calc(var(--header-h) * 0.5) } .hero-title{ color:var(--fg); font-size:clamp(42px, 8vw, 96px); line-height:1.05; margin:0 0 8px 0; letter-spacing:.5px; } .hero-subtitle{ color:var(--fg); font-size:clamp(16px, 2.5vw, 26px); margin-bottom:20px } .social-links{ padding-top: 0px; display:flex; gap:20px; justify-content:center } .social-links a{ color:var(--fg); text-decoration:none; display:inline-flex; align-items:center } .icon-mask{display: inline-block; vertical-align: middle; --icon:none; width:36px; aspect-ratio: 1/1; height:auto; background-color:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat } .social-links a:hover{ color:var(--accent) } .hero{ height:100vh;} /* ========================= Sections / Split ========================= */ .section{ scroll-margin-top: calc(var(--header-h) + 30px); position: relative; padding-bottom: 0px; /* Trennstricht Abstand */ margin-bottom: 160px; /* Abstand von Trennstrich zu nächster Section */ } .section:last-of-type{ margin-top: 60px; } /* .section::after{ content:""; position:absolute; bottom: 0px; left:50%; transform:translateX(-50%); width: calc(80vw - 2 * var(--mobile-pad)); /* viewportabhängig max-width: calc(2 * var(--tile-w)); height:3px; background: color-mix(in srgb, var(--muted) 30%, transparent); } .section:last-of-type::after{ display:none } */ /* Mobile/Tablet: stacken, Float aufheben */ @media (max-width: 900px) { .section {margin-bottom: 100px; scroll-margin-top: calc(var(--header-h) + 0px);} .section:last-of-type { margin-bottom: 120px} } .slogan{ font-size:24px; margin:0 auto 0; text-align:left; line-height: 1; } /* ABOUT: float-basiertes „Text frisst Bild“-Layout */ .about-flow { max-width: var(--content-w); margin: 0 auto 28px; padding: 0 var(--tile-pad-x); font-size: 1rem; line-height: 1.6; text-align:justify; } /* Mobile: sauberer Blocksatz */ .about-flow p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; /* falls mal ein langes Wort/URL kommt */ word-break: normal; /* kein aggressives Brechen */ } /* About-Container soll Floats „einsammeln“ */ .about-flow::after { content: ""; display: block; clear: both; } /* Das Bild „schwimmt“ links; Text umfließt es und läuft darunter weiter */ .about-photo { float: left; margin: 0 24px 10px 0; max-width: calc(var(--tile-w) * 0.8); width:23%; border-radius:12px; display:block; } .about-photo img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 1/1; object-fit: cover; } /* extra Aspect RAtio für about Gallery fotos */ #about .media-grid .photo { aspect-ratio: 3 / 3.2; } /* extra Aspect RAtio für about Gallery fotos */ #about .media-grid .photo img { object-fit: cover; object-position: 50% 30%; } /* Mobile/Tablet: stacken, Float aufheben */ @media (max-width: 900px) { .slogan{ text-align:center } .about-flow { max-width: var(--tile-w); padding: 0; } .about-photo { float: none; width: 100%; margin: 0 auto 16px; /* Bild oben, Text darunter */ shape-outside: none; max-width: 100%; } #about .media-grid {margin: 0;} } /* ========================= Services Grid ========================= */ .services-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--tile-gap); max-width:var(--content-w); padding:0 var(--tile-pad-x); margin: 0px auto 0; justify-items:center; } /* Card */ .service-card{ width:100%; max-width:var(--tile-w); text-align:center } .service-card h3{ margin:0 0 16px 0; font-size:20px } /* Image tile */ .service-img{ display:block; width:100%; aspect-ratio:4/4; height:auto; border-radius:12px; overflow:hidden; background:#071a21; box-shadow:0 8px 24px rgba(0,0,0,.25); transition: transform .1s ease; margin:0 auto 12px; } .service-img img{ width:100%; height:100%; object-fit:cover; display:block } .service-img:hover{ transform: translateY(-6px) } .service-desc{ color:var(--muted); font-size:18px; font-weight:600; } @media (max-width:900px){ .services-grid{ grid-template-columns:1fr; max-width:var(--tile-w); padding:0; margin: 0 auto; gap:24px; } .service-desc{ margin: 0 0 20px 0; } } /* Button */ .service-card .btn{ display:inline-block; padding:10px 16px; border-radius:10px; background:#0e1b23; color:#ececec; border:1px solid rgba(255,255,255,.12); text-decoration:none; } .service-card .btn:hover{ background:#12232b } .btn-booking{ font-size:20px; display:block; margin: 48px auto 0; background:#0e1b23; color:#ececec; border:4px solid rgba(255,255,255,.12); padding:28px calc(var(--tile-w) * 0.2); border-radius:10px; cursor:pointer } .btn-booking:hover{ background:#12232b } /* ========================= Clients Grid ========================= */ .clients-grid{ list-style:none; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tile-gap); row-gap: 25px; max-width: calc(2 * var(--tile-w) + var(--tile-gap)); padding: 0 var(--tile-pad-x); margin: 0px auto 0; align-items: stretch; /* Höhe richtet sich nach größter Zelle */ justify-items: center; /* keine horizontale Streckung */ text-align: center; } .client-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:16px; font-weight:600; line-height:1.2; padding:4px 6px; } .client-item .line{ display:block; margin-top:8px } @media (max-width:900px){ .clients-grid{ grid-template-columns: repeat(2, 1fr); width: 100%; justify-content: center; /* falls max-width > Inhalt */ justify-items: center; row-gap: 27px; } } /* ========================= Contact ========================= */ .contact-info{ text-align:center; max-width:600px; margin: 0px auto; font-size:1.10em; } .contact-info p{ margin:15px 0 } .contact-links{ margin-top:12px; font-size:16px } .contact-info a{ color:var(--fg); text-decoration:underline; font-weight:500 } .contact-info a:hover{ color:var(--accent) } /* ========================= Footer ========================= */ footer{ text-align:center; padding: 60px 0 160px; } footer p{ margin:0 0 18px 0 } footer a{ color:var(--fg); text-decoration:underline } footer a:hover{ color:var(--accent) } .footer-landing{ padding-top:0; padding-bottom: 0; } .footer-credit{ display:inline-flex; justify-content:center; align-items:center; gap:10px; font-size:14px; color:var(--muted); line-height:1.3; margin-top:10px; text-align:center; margin-bottom: 40px; } .footer-credit .names{ text-align:left; margin-left:5px } @media (max-width:900px){ footer .media-settings-link{ display:block; white-space:nowrap; word-break:keep-all; hyphens:none; margin-top:12px; text-align:center; } footer {padding: 16px 0 120px} } /* ========================= Embeds / Media ========================= */ .media-grid .tile{ width:100%; max-width:var(--tile-w)} .embed{ --radius:12px; position:relative; width:100%; max-width:var(--tile-w) } :where(.embed.youtube, .embed.vimeo){ aspect-ratio: var(--thumb-ar) } /* youtube embed behaviour */ .embed iframe{ width:100%; height:100%; border:0; border-radius:var(--radius); display:block; } .credit { margin-top: 4px; font-size: 18px; font-weight: 500; color: var(--muted); text-align: center; } /* Spotify */ .embed.spotify{ grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--tile-gap) * 2) / 1.5); max-width: none; aspect-ratio: 1.5; min-height: 352px; max-height: 470px; height: 100%; overflow:hidden; } @media (max-width:900px){ .embed.spotify{ width:100%; margin:0 auto; max-height: 600px; height:550px; } .embed{margin-bottom: 30px;} } /* Native Video */ .embed.video{ aspect-ratio:var(--thumb-ar); background:var(--black); border-radius:var(--radius); display:block } .embed.video video.thumb{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius) } .embed.video video.playing{ aspect-ratio:auto; width:auto; height:auto; object-fit:contain; max-width:100% } .embed.video:has(video.playing){ aspect-ratio:auto } .embed.video:has(video.playing) video{ width:100%; height:auto; object-fit:contain } /* Fotos */ /* Foto-Kachel – funktioniert mit oder */ .media-grid .photo{ display:block; width:100%; max-width:var(--tile-w); aspect-ratio: var(--gallery-ar, 5/4); border-radius:12px; overflow:hidden; background:#071a21; box-shadow:0 8px 24px rgba(0,0,0,.25); content-visibility: visible; contain-intrinsic-size: auto; transition:transform .1s ease; will-change:transform; } .media-grid .photo:hover{ transform:translateY(-6px); } .media-grid .photo img{ width:100%; height:100%; object-fit:cover; display:block; } /* Falls Lightbox deaktiviert (About): keine Hover-Animation, Cursor normal */ .js-gallery[data-lightbox="false"] .photo:hover{ transform:none; cursor:default; } /* Grid Container für Media */ .media-grid{ display:grid; justify-content:center; justify-items:center; max-width:var(--content-w); grid-template-columns: repeat(3, minmax(0, var(--tile-w))); gap:var(--tile-gap); margin: 0px auto 0; padding:0 var(--tile-pad-x); align-items:start; } /* Desktop: 3 Spalten → in die Mitte (Spalte 2) */ @media (min-width: 901px){ .media-grid > .center-single{ grid-column: 2; justify-self: center; } } /* Mobile/Tablet: bleibt automatisch 1 Spalte, nix kaputt */ @media (max-width:900px){ .media-grid{ grid-template-columns:1fr; gap:var(--tile-gap); padding-left:0; padding-right:0; max-width:var(--tile-w); margin: 0 auto 0px; } .media-grid > *, .media-grid :is(.embed, a.photo){ width:100%; max-width:100%; } } /* ========================= Responsive Tweaks ========================= */ @media (max-width:600px){ .embed{ --player-height:320px } } /* ========================= Images ========================= */ .content-img{ max-width: calc(var(--tile-w) * 0.8); width:100%; aspect-ratio:auto; border-radius:12px; display:block; } @media (max-width:900px){ .content-img{ max-width:100%; width:100% } } .img-responsive{ max-width:100%; height:auto; display:block } .media-img{ max-width:200px; height:auto; display:block; margin:0 auto } .section-img{ max-width:600px; width:100%; height:auto; margin:24px 0; display:block } .image{ max-width:100%; height:auto; display:inline-block } /* --- Studio Gallery Layout --- */ .gallery-layout{ display:flex; flex-direction:column; gap:0px; margin:0 auto 0;} @media (max-width:900px){ .gallery-layout{ gap:20px; padding-left:0; padding-right:0; max-width:var(--tile-w) } } .gallery-footer{ display:flex; justify-content:center; padding-top:8px } /* Lightbox */ .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:24px; z-index:999 } .lightbox[hidden]{ display:none } .lightbox img{ max-width:90vw; max-height:90vh; border-radius:12px } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:28px; cursor:pointer; display:grid; place-items:center } .lb-prev{ left:16px } .lb-next{ right:16px } .lb-nav:hover{ background:rgba(255,255,255,.15) } .lb-counter{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; color:#eaeaea; font-size:14px; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12) } body.lb-open{ overflow:hidden } .lb-close{ position:absolute; top:16px; right:16px; background:transparent; border:0; color:#fff; font-size:28px; line-height:1; cursor:pointer } .btn-more{ font-size:16px; display:block; margin: 24px auto 0; background:#0e1b23; color:#ececec; border:4px solid rgba(255,255,255,.12); padding:12px 40px; border-radius:10px; cursor:pointer } .btn-more:hover{ background:#12232b } [hidden]{ display: none !important } /* ========================================================= FIX AT THE SOURCE: player widths on mobile ========================================================= */ @media (max-width:900px){ .embed.spotify{ min-width:0px } .section::after{ width: calc(var(--tile-w)/1.5 - var(--mobile-pad)) } .btn-more{margin-top: 30px;} } /* ========================= Landing: Zweig-Auswahl (Music/Film) ========================= */ .landing-chooser{ min-height: 100svh; /* eine min-height reicht */ display:grid; grid-template-rows: 1fr 1fr; margin-bottom:40px; } .choice{ position:relative; display:block; text-decoration:none; color:var(--fg); } .choice-figure{ position:relative; inset:0; margin:0; height:100%; display:grid; place-items:center; overflow:hidden; isolation:isolate; } .choice-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: translateZ(0) scale(1.02); filter:saturate(0.95) contrast(1.05); will-change: transform, filter, opacity; transition: transform .35s ease, filter .35s ease; } .choice-figure::before{ content:""; position:absolute; inset:0; background:#000; opacity:.35; pointer-events:none; will-change:opacity; transition:opacity .35s ease; transform:translateZ(0); backface-visibility:hidden; } .choice-figure figcaption{ position:relative; z-index:1; font-size:clamp(42px,8vw,96px); font-weight:700; letter-spacing:.5px; line-height:1; text-shadow:0 6px 30px rgba(0,0,0,.45); } .choice:focus-visible .choice-figure{ outline:2px solid var(--accent); outline-offset:-2px } .choice:hover .choice-figure img{ transform:scale(1.05); filter:saturate(1.8) contrast(1.2) } .choice:hover .choice-figure::before{ opacity:.55 } @media (max-width:900px){ .landing-chooser{ grid-template-rows: 1fr 1fr } } /* Impressum Links (wie Contact Links, ohne zentrierten Textzwang) */ .impressum-links a{ color:var(--fg); text-decoration:underline; font-weight:500 } .impressum-links a:hover{ color:var(--accent); text-decoration:underline }