/* Reset & Base */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-bg: #0a0a0a; --color-surface: #141414; --color-text: #f5f5f5; --color-text-muted: #9a9a9a; --color-border: #2a2a2a; --color-accent: #ffffff; --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); --container-max-width: 1400px; --section-padding: 8rem; --header-opacity: 0.95; --gallery-gap: 16px; --gallery-radius: 8px; } /* Tastatur-Fokus sichtbar machen (Maus-Klicks lösen :focus-visible nicht aus) */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Reduzierte Bewegung respektieren (funnel.css hat eigene, feinere Regeln) */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } html { scroll-behavior: smooth; } /* Lenis Smooth Scroll (script.js aktiviert es auf Unterseiten; Lenis setzt die Klassen auf ): natives Smooth-Scrolling muss dann aus sein — Lenis führt das Scrollen selbst, sonst doppelt sich die Easing-Kurve. (lenis-smooth trägt Lenis 1.3 nur WÄHREND eines animierten Scrolls, daher hier an html.lenis gehängt.) https://lenis.darkroom.engineering */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 2rem; } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 0; background: linear-gradient(to bottom, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: padding 0.3s var(--transition-smooth); } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'EB Garamond', 'Playfair Display', serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.382em; /* 1/φ² — Hero-Charakter, kollisionsfrei bis ~769px */ color: var(--color-text); text-decoration: none; white-space: nowrap; transition: opacity 0.3s ease; } .logo:hover { opacity: 0.7; } /* „by Daniel Hoffmann" im Logo: kleiner als der Markenteil und ausgebleicht */ .logo-by { font-size: 0.75em; font-weight: 400; letter-spacing: 0.09em; /* 1/φ² des Logos ÷ φ³ — gleiches Verhältnis wie im Hero */ color: var(--color-text-muted); } /* Breite Screens: volle Hero-Laufweite 1/φ (0,618em) — platztechnisch erst sicher, wenn die Navigation komplett sichtbar ist */ @media (min-width: 1024px) { .logo { letter-spacing: 0.618em; } .logo-by { letter-spacing: 0.146em; } } .nav { display: flex; gap: 2.5rem; } .nav-link { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); text-decoration: none; position: relative; transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--color-text); transition: width 0.3s var(--transition-smooth); } .nav-link:hover { color: var(--color-text); } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--color-text); } .nav-link.active::after { width: 100%; } .nav-home { display: flex; align-items: center; } .nav-home svg { width: 18px; height: 18px; display: block; } .lang-toggle { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; font-family: inherit; color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border); border-radius: 100px; padding: 0.25rem 0.75rem; cursor: pointer; transition: all 0.3s ease; } .lang-toggle:hover { color: var(--color-text); border-color: var(--color-text); } /* Burger-Button für die mobile Navigation (nur ≤ 768px sichtbar) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; padding: 0.625rem 0.5rem; background: transparent; border: none; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); border-radius: 1px; transition: transform 0.3s var(--transition-smooth), opacity 0.3s ease; } /* Geöffnet: Burger wird zum X */ .header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Unterseiten: Abstand zum fixierten Header */ .page { padding-top: 6rem; } /* Seiten-Banner (Unterseiten): optionales Foto/Video direkt über main.page, im Edit-Mode aktivierbar. Deaktiviert existiert das Element gar nicht — es wird also kein Platz reserviert. Wie der Hero läuft das Banner teilweise unter dem fixierten Header durch. */ .page-banner { position: relative; width: 100%; /* svh statt vh: wie beim Hero (s. Kommentar dort) */ height: 40vh; height: 40svh; overflow: hidden; } .page-banner img, .page-banner video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Abdunklung über dem Banner-Motiv (wie Hero-Overlay, Werte aus dem Edit-Mode; Default 0 = transparent). Liegt über img UND video. */ .page-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient( rgba(10, 10, 10, var(--banner-overlay-top, 0)), rgba(10, 10, 10, var(--banner-overlay-bottom, 0)) ); z-index: 1; pointer-events: none; } /* Fließender Übergang nach unten in die Hintergrundfarbe (wie Hero-Fade) */ .page-banner.banner-fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--banner-fade-height, 35%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg)); opacity: var(--banner-fade-strength, 1); z-index: 2; pointer-events: none; } /* Abstand Banner → erster Inhalt der Seite: im Edit-Modus pro Seite einstellbar (--banner-content-gap in rem, Default = Section-Padding). Steht vor den späteren Shop-Regeln, damit die Featured-Überlappung auf /shop Vorrang hat. */ .page-banner + .page > section:first-child { padding-top: var(--banner-content-gap, var(--section-padding)); } /* Hero */ .hero { /* svh statt vh: vh ändert sich auf Mobile beim Ein-/Ausblenden der URL-Leiste und löst mitten beim Scrollen einen Reflow der Seite aus */ height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; padding: 0 2rem; /* KEIN CSS-Fallback-Foto: es blitzte beim Seitenaufruf kurz auf, bevor das Video lief, und lud unnötig ein 2000-px-Bild. Ein Foto-Hero (falls konfiguriert) wird von siteSettings.js inline gesetzt; im Flow erscheint ein Bild ohnehin erst beim Scrollen (Wasser). */ } /* Fließender Übergang: Das Hero-Bild läuft unten weich in die Hintergrundfarbe der Seite aus (Schalter im Edit-Mode). Stärke (Deckkraft) und Weichheit (Höhe der Zone) kommen als CSS-Variablen aus den Edit-Settings. */ .hero.hero-fade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hero-fade-height, 35%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-bg)); opacity: var(--hero-fade-strength, 1); pointer-events: none; } /* Text und Scroll-Indikator bleiben über dem Übergangs-Gradient */ .hero.hero-fade .hero-content { position: relative; z-index: 1; } .hero.hero-fade .scroll-indicator { z-index: 1; } /* Video-Hero: Das Hintergrund-Video liegt hinter Inhalt und Abdunklung. Der dunkle Gradient (sonst Teil des Hero-backgrounds) wird als ::before-Overlay über das Video gelegt, damit er es ebenfalls abdunkelt. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero.hero-has-video { background: none; } .hero.hero-has-video::before { content: ''; position: absolute; inset: 0; background: linear-gradient( rgba(10, 10, 10, var(--hero-overlay-top, 0.55)), rgba(10, 10, 10, var(--hero-overlay-bottom, 0.85)) ); z-index: 1; pointer-events: none; } /* Video-Hero + Fade: Das Fade-Gradient (::after) muss ÜBER dem Overlay (::before, z-index 1) liegen, sonst dunkelt das Overlay den weichen Übergang unten wieder ab. Inhalt bleibt ganz oben. */ .hero.hero-has-video.hero-fade::after { z-index: 2; } .hero.hero-has-video .hero-content { position: relative; z-index: 3; } .hero.hero-has-video .scroll-indicator { z-index: 3; } /* Brand-Lockup: die h1 schrumpft auf Inhaltsbreite, damit sich die Byline rechtsbündig unter der Brand-Zeile ausrichtet. Vertikale Abstände im Hero folgen dem Goldenen Schnitt (φ ≈ 1,618): Brand→Byline 1/φ rem, h1→CTAs φ rem bzw. φ²/φ³ (s. .hero-byline/.hero-ctas) */ .hero-title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin: 0 auto 1.618rem; width: fit-content; text-align: left; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s var(--transition-smooth) 0.3s forwards; } /* „SPERO VISION" in EB Garamond (lokal gehostet, fonts.css), Versalien und stark gesperrt. Laufweite auf die Goldener-Schnitt-Reihe gesnappt: 0,618em = 1/φ (zur Byline 0,146em = 1/φ⁴ → Verhältnis φ³, s. .hero-byline). Das negative margin-right kompensiert die Laufweite hinter dem letzten Buchstaben — sonst hinge die Byline versetzt zur sichtbaren rechten Kante. */ .hero-brand { display: block; font-family: 'EB Garamond', 'Playfair Display', serif; font-weight: 400; font-size: clamp(1.2rem, 5.5vw, 4.25rem); line-height: 1.15; letter-spacing: 0.618em; margin-right: -0.618em; text-transform: uppercase; } /* „by Daniel Hoffmann": EB Garamond, klein, leicht gesperrt — Laufweite 0,146em = 1/φ⁴ (zur Brand 0,618em = 1/φ → Verhältnis φ³), kompensiert via negativem margin-right, rechtsbündig unter der Brand-Zeile; Abstand nach oben 1/φ rem (Goldener Schnitt) */ .hero-byline { display: block; margin-top: 0.618rem; margin-right: -0.146em; font-family: 'EB Garamond', 'Playfair Display', serif; font-size: clamp(0.8rem, 1.3vw, 1rem); font-weight: 400; letter-spacing: 0.146em; text-align: right; color: var(--color-text); } /* Hero-CTAs: primär (Akzent) + sekundär (Ghost). Abstand zum Lockup φ³ ≈ 4,236rem (Goldener Schnitt, s. .hero-title) */ .hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 4.236rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 1s var(--transition-smooth) 0.9s forwards; } .hero-cta { display: inline-block; padding: 0.875rem 1.75rem; font-size: 0.9375rem; font-weight: 600; border-radius: 8px; text-decoration: none; transition: transform 0.2s var(--transition-smooth), box-shadow 0.3s ease, border-color 0.2s ease; } .hero-cta-primary { color: #0a0a0a; background: var(--color-accent); } .hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 25%, transparent); } .hero-cta-ghost { color: var(--color-text); border: 1px solid var(--color-border); background: rgba(10, 10, 10, 0.35); } .hero-cta-ghost:hover { border-color: var(--color-accent); transform: translateY(-2px); } /* Startseiten-Hero: die beiden CTAs bewusst subtil — leicht gesperrte Kapitälchen, damit sie dem Lockup nicht die Aufmerksamkeit nehmen. Die beiden Varianten sind exakte Gegenteile: primary gefüllt (weiße Fläche, dunkle Schrift), ghost als feine Kontur (transparent, hell). Gilt nur für .hero-ctas (Startseite); die .hero-cta-Buttons auf Unterseiten (.page-ctas) bleiben prägnant. */ .hero-ctas .hero-cta { padding: 0.7rem 1.4rem; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; transition: transform 0.2s var(--transition-smooth), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .hero-ctas .hero-cta-primary { color: #0a0a0a; background: var(--color-accent); border: 1px solid var(--color-accent); } .hero-ctas .hero-cta-primary:hover { background: color-mix(in srgb, var(--color-accent) 82%, transparent); border-color: color-mix(in srgb, var(--color-accent) 82%, transparent); box-shadow: none; } .hero-ctas .hero-cta-ghost { color: var(--color-text); background: transparent; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); } .hero-ctas .hero-cta-ghost:hover { color: #0a0a0a; background: var(--color-accent); border-color: var(--color-accent); box-shadow: none; } /* Home: Teaser-Trio (Videoproduktion / Presets / Blog) hinter der Galerie */ .home-teasers { padding: 0 0 var(--section-padding); } .home-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .home-teaser { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--gallery-radius); overflow: hidden; text-decoration: none; color: var(--color-text); transition: transform 0.2s var(--transition-smooth), border-color 0.2s ease; } .home-teaser:hover { transform: translateY(-4px); border-color: var(--color-accent); } .home-teaser-image { aspect-ratio: 16 / 10; overflow: hidden; } .home-teaser-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--transition-smooth); } .home-teaser:hover .home-teaser-image img { transform: scale(1.04); } .home-teaser-body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; padding: 1.5rem; } .home-teaser-body h3 { margin: 0; font-size: 1.25rem; font-weight: 500; } .home-teaser-body p { margin: 0; flex: 1; font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); } .home-teaser-link { margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--color-accent); } @media (max-width: 900px) { .home-teaser-grid { grid-template-columns: 1fr; } } .scroll-indicator { position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); width: 24px; height: 40px; border: 1.5px solid var(--color-text-muted); border-radius: 12px; display: flex; justify-content: center; padding-top: 8px; opacity: 0; animation: fadeIn 1s ease 1.2s forwards; } .scroll-indicator span { width: 4px; height: 8px; background: var(--color-text); border-radius: 2px; animation: scrollBounce 2s infinite; } /* Home: Intro-Text zwischen Hero und Galerie (SEO-Kontext um die Werke) */ .home-intro { padding: 4rem 0 0; } /* CTA-Zeile in Section-Headern der Unterseiten (Buttons: .hero-cta) */ .page-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; } /* Fakten-Chips auf /ueber */ .about-chips { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; margin: 1.75rem 0 0; padding: 0; list-style: none; } .about-chips li { padding: 0.4375rem 0.9375rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 100px; } .home-intro .container { max-width: 680px; text-align: center; } .home-intro-title { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 300; letter-spacing: -0.01em; } .home-intro-text { margin-top: 1.25rem; font-size: 1rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.7; } .home-intro-text a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; } .home-intro-text a:hover { color: var(--color-accent); } /* Portfolio */ .portfolio { padding: var(--section-padding) 0 4rem; } /* Galerie über die volle Fensterbreite (edge-to-edge) */ .portfolio .container { max-width: none; padding: 0; } /* Titel und Filter bleiben in der gewohnten zentrierten Box */ .portfolio .section-header { max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding: 0 2rem; } .section-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 4rem; gap: 2rem; } .section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 300; letter-spacing: -0.01em; text-align: center; } .filter-buttons { display: flex; gap: 0.5rem; background: var(--color-surface); padding: 0.375rem; border-radius: 100px; } .filter-btn { font-family: inherit; font-size: 0.875rem; font-weight: 400; padding: 0.625rem 1.5rem; border: none; background: transparent; color: var(--color-text-muted); border-radius: 100px; cursor: pointer; transition: all 0.3s var(--transition-smooth); } .filter-btn:hover { color: var(--color-text); } .filter-btn.active { background: var(--color-accent); color: #0a0a0a; } /* Gallery */ .gallery-grid { display: flex; flex-direction: column; gap: var(--gallery-gap); } .masonry-block { display: flex; gap: var(--gallery-gap); align-items: flex-start; } .gallery-column { display: flex; flex-direction: column; gap: var(--gallery-gap); flex: 1; min-width: 0; } .gallery-item { position: relative; border-radius: var(--gallery-radius); overflow: hidden; cursor: pointer; background: var(--color-surface); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s var(--transition-smooth) forwards; } .gallery-item.feature { width: 100%; flex-shrink: 0; } .gallery-item.feature img { width: 100%; height: auto; display: block; aspect-ratio: var(--aspect-ratio); object-fit: cover; } .gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--transition-smooth), filter 0.5s ease; /* Ladezustand: sanfter Schimmer hinter dem Bild statt leerer Box — sobald die (opake) Datei geladen ist, deckt sie den Schimmer ab. Endlich (5 Durchläufe), damit die Animation nicht unsichtbar weiterläuft und Compositing kostet */ background: linear-gradient(100deg, var(--color-surface) 40%, #1e1e1e 50%, var(--color-surface) 60%); background-size: 200% 100%; animation: tileShimmer 1.6s linear 5; } @keyframes tileShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } .gallery-item:hover img { transform: scale(1.05); } .item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.4s ease; z-index: 2; } .gallery-item:hover .item-overlay { opacity: 1; } /* Overlay styles */ .overlay-solid .item-overlay { background: rgba(0,0,0,0.6); } .overlay-minimal .item-overlay { background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%); } .overlay-none .item-overlay { background: none; } /* Hover styles */ .hover-brightness .gallery-item:hover img { transform: scale(1.02); filter: brightness(1.15); } .hover-none .gallery-item:hover img { transform: none; } /* ========== GRID STYLES ========== */ /* Grid Style: Masonry (default) */ .gallery-grid.grid-style-masonry { display: flex; flex-direction: column; gap: var(--gallery-gap); } /* Grid Style: Equal Grid */ .gallery-grid.grid-style-grid .grid-block { width: 100%; } .gallery-grid.grid-style-grid .gallery-item { overflow: hidden; position: relative; } .gallery-grid.grid-style-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Grid Style: List */ .gallery-grid.grid-style-list { display: flex; flex-direction: column; gap: var(--gallery-gap); } .gallery-grid.grid-style-list .gallery-item { width: 100%; max-width: 800px; margin: 0 auto; } /* Grid Style: Justified */ .gallery-grid.grid-style-justified { display: flex; flex-direction: column; gap: 0; } .gallery-grid.grid-style-justified .justified-row { width: 100%; } .gallery-grid.grid-style-justified .gallery-item { overflow: hidden; position: relative; flex-shrink: 0; } .gallery-grid.grid-style-justified .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .item-title { font-size: 1.125rem; font-weight: 500; color: var(--color-text); transform: translateY(10px); transition: transform 0.4s var(--transition-smooth); } .item-category { font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; transform: translateY(10px); transition: transform 0.4s var(--transition-smooth) 0.05s; } .gallery-item:hover .item-title, .gallery-item:hover .item-category { transform: translateY(0); } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 60px; height: 60px; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 3; } .play-icon svg { width: 24px; height: 24px; color: var(--color-text); margin-left: 3px; } .gallery-item[data-category="video"]:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Album-Karten (Startseite: ein Eintrag pro Album mit Cover) */ /* Volle Breite wie die Bilder-Galerie, nur ein kleiner Randabstand in Höhe des Galerie-Gaps */ .album-grid { width: 100%; display: grid; padding: 0 var(--gallery-gap); } .album-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--gallery-radius); overflow: hidden; cursor: pointer; background: var(--color-surface); color: inherit; text-decoration: none; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s var(--transition-smooth) forwards; } .album-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--transition-smooth), filter 0.5s ease; } .album-card:hover img { transform: scale(1.05); } /* Album-Name muss immer lesbar sein — Overlay dauerhaft sichtbar */ .album-card .item-overlay { opacity: 1; } .album-card .item-title, .album-card .item-category { transform: none; } .album-card .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Kopfzeile der Album-Seite: Zurück-Link + Album-Titel */ .album-backbar { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 0 var(--gallery-gap); margin-bottom: 2rem; } .album-back { background: none; border: 1px solid var(--color-border); color: var(--color-text); font-family: inherit; font-size: 0.875rem; padding: 0.5rem 1.25rem; border-radius: 100px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease; } .album-back:hover { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-accent); } .album-page-title { font-size: 1.5rem; font-weight: 500; margin: 0; } /* Optionaler Album-Kontext + Preset-CTA (serverseitig, nur für Alben mit gepflegtem Kontext-Key im i18n-Dict) */ .album-context { max-width: 680px; margin: 0 auto 3rem; text-align: center; } .album-context-text { margin: 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--color-text-muted); } .album-context-cta { margin-top: 1.25rem; } /* ===== Shop: Neo-Tokyo-Vending-Machine ===== */ /* Die Shop-SEITE ist die Maschine — kein eingebettetes Widget mehr: der Header ist die Maschinen-Oberkante (Schild mit 自動販売機 + Titel mittig in der Menüzeile, cyane LED-Linie als Unterkante), die Produkte liegen mittig hinter Glas, das Bedienpanel steht rechts daneben (scrollt normal mit), das Ausgabefach schwebt als fixierte Leiste am unteren Bildschirmrand (immer sichtbar, auch beim Scrollen). Interaktion: Klickbar ist pro Produkt nur das Bild (Titel/Preis sind reine Anzeige). Stil: Neo-Tokyo — dunkles Metall, Neon in Shu-Rot (--vend-red) und Cyan, Amber-LED, traditionelle Elemente (Kanji-Signet, Seigaiha-Wellenmuster am Panel, Papier-Preisschild). Maschinen-Farben als --vend-* auf body.page-shop, weil Header und Footer (Maschinen-Sockel) dazugehören und außerhalb von .vend-machine liegen. */ body.page-shop { --vend-paper: #f0ebdd; --vend-red: #e23b2e; --vend-cyan: #41e6e0; --vend-amber: #ffb02e; --vend-ink: #e8e6df; --vend-panel-1: #1b1b20; --vend-panel-2: #121216; --vend-window-1: #202024; --vend-window-2: #121214; /* Seitenhintergrund = Maschinengehäuse (statt globalem --color-bg) */ background: linear-gradient(180deg, #17171c 0%, #121216 40%, #0e0e12 100%); } /* Die Section hat selbst kein Padding: Inhalt schließt oben direkt an den Header (bzw. das Seiten-Banner) an, unten an den Footer */ .shop { padding: 0; } /* Reiner Struktur-Wrapper — das „Gehäuse" ist die ganze Seite */ .vend-machine { position: relative; } /* Mit aktivem Seiten-Banner folgt der Inhalt direkt dessen Fade */ body:has(.page-banner) .shop:has(.vend-featured) { padding-top: 0; } /* Header IST die Maschinen-Oberkante: das Schild (自動販売機 + Titel) steht mittig in der Menüzeile selbst, die cyane LED-Linie ist die Unterkante der Menüleiste. script.js setzt auf dieser Seite beim Scrollen keinen flachen Hintergrund mehr, damit das Metall stehen bleibt */ .page-shop .header { background: linear-gradient(180deg, #1e1e24 0%, #151519 100%); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 2px solid var(--vend-cyan); box-shadow: 0 6px 24px rgba(65, 230, 224, 0.12), 0 12px 32px rgba(0, 0, 0, 0.5); } /* Mit aktivem Seiten-Banner füllt das Banner den Raum unter dem fixierten Header — dann nur wenig Abstand */ body.page-shop:has(.page-banner) .page { padding-top: 2.5rem; } /* Das Schild steht mittig in der Menüzeile: es nimmt den freien Raum zwischen Logo und Navigation ein und zentriert sich darin */ .vend-marquee-sign { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 0.875rem; flex-wrap: wrap; } .vend-marquee-jp { font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; font-size: clamp(0.75rem, 1.4vw, 0.875rem); line-height: 1.1; font-weight: 700; letter-spacing: 0.35em; color: var(--vend-red); text-shadow: 0 0 8px rgba(226, 59, 46, 0.5), 0 0 20px rgba(226, 59, 46, 0.25); } /* Die Seiten-H1 ist das Maschinen-Schild — in Zeilenhöhe der globalen Navigation gehalten, damit die Menüleiste nicht höher wird als auf den anderen Seiten */ .vend-title { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.1; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text); text-shadow: 0 0 12px rgba(65, 230, 224, 0.18); } /* Korpus: Fenster + Bedienpanel laufen mittig in der Container-Mitte (wie der restliche Seiteninhalt), nichts steht über den Viewport-Rand hinaus */ .vend-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; max-width: var(--container-max-width); margin: 0 auto; padding: 3rem 2rem 3.5rem; } /* Rechte Spalte mit dem Bedienpanel — scrollt ganz normal mit dem Inhalt mit (nicht sticky) */ .vend-right { align-self: start; min-width: 0; } /* Schaufenster mit Innenbeleuchtung und Glas-Reflex */ .vend-window { position: relative; padding: 2rem; border-radius: 12px; background: linear-gradient(180deg, var(--vend-window-1) 0%, var(--vend-window-2) 75%); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.35), inset 0 18px 36px rgba(0, 0, 0, 0.45); overflow: hidden; } /* Innenbeleuchtung: helle LED-Röhre oben im Fenster, deren Lichtkegel nach unten ausläuft (wie die Leuchtstoffröhre im echten Automaten) */ .vend-window::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, transparent 0%, rgba(214, 246, 248, 0.9) 18%, rgba(214, 246, 248, 0.9) 82%, transparent 100%); box-shadow: 0 2px 14px 4px rgba(65, 230, 224, 0.28), 0 30px 70px 10px rgba(65, 230, 224, 0.1); pointer-events: none; z-index: 2; } .vend-glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 24%, transparent 38%, transparent 62%, rgba(255, 255, 255, 0.05) 80%, transparent 92%); } /* Fachböden: metallene Kante unter den Produkten (mit Luft zum Fach) */ .vend-shelf { position: relative; padding-bottom: 1.75rem; } .vend-shelf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #45454d, #1f1f24); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55); } .vend-shelf-featured:empty { display: none; padding-bottom: 0; } .vend-shelf-featured:not(:empty) { margin-bottom: 1.75rem; } /* Produkt-Fächer im Fenster — auto-fit statt auto-fill: die vorhandenen Fächer füllen die Fensterbreite immer komplett aus (keine leeren, unsichtbaren Spuren rechts bei wenigen Produkten) */ .vend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; } .vend-item { display: flex; flex-direction: column; } /* Klickbar sind nur Bild und PUSH-Button (Anker) — Titel/Preis: reine Anzeige. Hover greift ausschließlich auf dem Bild, der Text bleibt statisch. */ .vend-item-image { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0c0e15; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s ease, border-color 0.25s ease; } .vend-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .vend-item-image:hover { transform: translateY(-4px); border-color: rgba(65, 230, 224, 0.5); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.45), 0 0 22px rgba(65, 230, 224, 0.3); } /* Typ-Etikett (Digital/Print) als Papier-Preisschild (札) */ .vend-tag { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #201c12; background: var(--vend-paper); padding: 0.2rem 0.5rem; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } .vend-item-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4375rem; padding-top: 0.75rem; } /* Fach-Nummer in Cyan-Neon */ .vend-code { font-family: 'Courier New', ui-monospace, monospace; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; color: var(--vend-cyan); text-shadow: 0 0 8px rgba(65, 230, 224, 0.55); } /* Titel: maximal 2 Zeilen, Rest abgeschnitten — und 2 Zeilen immer reserviert, damit einzeilige Titel das Layout nicht verschieben */ .vend-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; /* 2 Zeilen × line-height 1.35 */ font-size: 0.875rem; font-weight: 400; line-height: 1.35; color: var(--color-text); } /* LED-Preisanzeige (Bernstein-Glühen) */ .vend-led { display: inline-block; font-family: 'Courier New', ui-monospace, monospace; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; color: var(--vend-amber); background: #120d04; border: 1px solid rgba(255, 176, 46, 0.28); border-radius: 4px; padding: 0.25rem 0.5625rem; text-shadow: 0 0 7px rgba(255, 176, 46, 0.6); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85); } /* Featured-Fach (A1): großes Fach oben im Fenster — Ausnahme: Titel darf hier länger laufen (kein 2-Zeilen-Clamp) */ .vend-featured { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 2rem; align-items: center; } .vend-featured-media { position: relative; display: block; overflow: hidden; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0c0e15; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); transition: transform 0.25s var(--transition-smooth), box-shadow 0.25s ease, border-color 0.25s ease; } /* Produktbild im Original-Seitenverhältnis (kein Cover-Zuschnitt) */ .vend-featured-media img { width: 100%; height: auto; display: block; } .vend-featured-media:hover { transform: translateY(-4px); border-color: rgba(65, 230, 224, 0.5); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5), 0 0 22px rgba(65, 230, 224, 0.3); } .vend-save { position: absolute; top: 0.5rem; right: 0.5rem; font-size: 0.8125rem; font-weight: 800; color: #ffffff; background: var(--vend-red); padding: 0.25rem 0.625rem; border-radius: 100px; box-shadow: 0 0 14px rgba(226, 59, 46, 0.55); } .vend-featured-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; min-width: 0; } .vend-featured-title { font-size: 1.375rem; font-weight: 500; line-height: 1.3; color: var(--color-text); } .vend-featured-text { font-size: 0.9375rem; font-weight: 300; line-height: 1.55; color: var(--color-text-muted); } .vend-price-row { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.25rem; } .vend-old { font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); } /* Bedienpanel: dunkles Metall in Site-Tönen mit sehr dezentem Seigaiha-Wellenmuster (traditionelles Muster, niedrige Deckkraft) */ .vend-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-radius: 12px; background-image: radial-gradient(circle at 50% 130%, transparent 58%, rgba(232, 230, 223, 0.035) 60%, rgba(232, 230, 223, 0.035) 66%, transparent 68%), radial-gradient(circle at 50% 130%, transparent 58%, rgba(232, 230, 223, 0.035) 60%, rgba(232, 230, 223, 0.035) 66%, transparent 68%), linear-gradient(180deg, var(--vend-panel-1), var(--vend-panel-2)); background-size: 44px 22px, 44px 22px, 100% 100%; background-position: 0 0, 22px 11px, 0 0; border: 1px solid var(--color-border); border-bottom: 2px solid var(--vend-red); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); color: var(--vend-ink); } /* LED-Matrix-Display mit Scanlines — feste Höhe: ändert sich nicht, egal ob Idle-Text oder Auswahl + Preis angezeigt wird */ .vend-display { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; height: 6.25rem; padding: 0.875rem 1rem; border-radius: 8px; background: #150f05; border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), inset 0 0 4px rgba(255, 176, 46, 0.3); font-family: 'Courier New', ui-monospace, monospace; overflow: hidden; } .vend-display::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px); } /* Titelzeile: max. 2 Zeilen mit … — zusammen mit der festen Display-Höhe bleibt das Panel bei jedem Inhalt gleich hoch */ .vend-display-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8125rem; letter-spacing: 0.04em; line-height: 1.35; color: var(--vend-amber); text-shadow: 0 0 7px rgba(255, 176, 46, 0.6); } .vend-display-price { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; color: var(--vend-amber); text-shadow: 0 0 12px rgba(255, 176, 46, 0.75); } .vend-display-price:empty { display: none; } /* Entnehmen-Button unter dem Display: immer sichtbar, grau solange nichts gewählt ist — wird rot (Shu), sobald mind. 1 Produkt im Ausgabefach liegt. Wie bei den Tasten: ein einziger neutraler Schatten, keine farbige Kante */ .vend-collect { appearance: none; cursor: default; width: 100%; font-size: 0.9375rem; font-weight: 700; font-family: inherit; color: #b9bec9; background: linear-gradient(180deg, #3c3c44, #2d2d34); border: none; border-radius: 100px; padding: 0.75rem 1rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s var(--transition-smooth); } .vend-collect.is-ready { cursor: pointer; color: #ffffff; background: linear-gradient(180deg, #f0563f, var(--vend-red)); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .vend-collect.is-ready:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); } /* Nummernfeld: dunkle Drucktasten mit Rot-Aktivzustand. Ein einziger weicher, neutraler Schatten für alle Zustände — keine harte 3D-Unterkante (las „abgeschnitten") und keine farbige Kante (wirkte bei aktivem Rot wie ein roter Schatten) */ .vend-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; } .vend-key { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0.625rem 0.25rem 0.5625rem; font-family: 'Courier New', ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--vend-ink); background: linear-gradient(180deg, #28282e, #1b1b20); border: 1px solid #38383f; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); transition: transform 0.08s ease; } .vend-key:active { transform: translateY(1px); } .vend-key-push { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.2em; opacity: 0.55; } /* Aktiv = gefüllt in Shu-Rot, Schatten bleibt neutral */ .vend-key.is-active { color: #ffffff; background: linear-gradient(180deg, #f0563f, var(--vend-red)); border-color: #c73226; } .vend-side-jp { font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; text-align: center; color: #78829a; } /* Ausgabefach: schwebt als fixierte Leiste am unteren Bildschirmrand — immer sichtbar, auch beim Scrollen (wie das Fach eines echten Automaten, das ja auch nicht „mitscrollt"). Rote LED-Linie als Oberkante. Damit die Leiste am Seitenende nicht den Footer verdeckt, bekommt der Footer unten entsprechend Luft (s. .page-shop .footer). */ .vend-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; /* unter dem Header (100) */ padding: 0.625rem 0 0.75rem; background: linear-gradient(180deg, #17171c, #101014); border-top: 2px solid var(--vend-red); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.55), 0 -2px 14px rgba(226, 59, 46, 0.22); } /* Inhalt der Leiste läuft in der Container-Mitte mit */ .vend-tray-inner { max-width: var(--container-max-width); margin: 0 auto; padding: 0 2rem; } .vend-tray-label { display: block; margin-bottom: 0.375rem; font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', sans-serif; font-size: 0.8125rem; letter-spacing: 0.4em; text-align: center; color: rgba(255, 255, 255, 0.5); } .vend-tray-slot { display: flex; flex-direction: row; align-items: center; /* Fixe Größe: der Schacht wächst nicht mit der Anzahl der Produkte — sie reihen sich horizontal, bei Überlänge wird gescrollt. Kompakt gehalten, weil die Leiste fixiert am Bildschirmrand schwebt */ justify-content: safe center; gap: 0.875rem; height: 6.75rem; padding: 0.625rem 1.25rem; border-radius: 12px; background: linear-gradient(180deg, #05060a, #10131c); border: 1px solid rgba(255, 255, 255, 0.06); /* Klappen-Schatten: das Fach wirkt nach innen vertieft */ box-shadow: inset 0 16px 26px rgba(0, 0, 0, 0.8); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .vend-tray-slot::-webkit-scrollbar { display: none; } .vend-tray-hint { font-size: 0.875rem; font-weight: 300; letter-spacing: 0.08em; text-align: center; color: rgba(255, 255, 255, 0.35); } /* Entnommenes Produkt im Ausgabefach: nur das Bild (nebeneinander), oben rechts ein rotes × zum Wiederentfernen */ .vend-pickup { position: relative; flex: none; animation: vend-pop 0.35s var(--transition-smooth); } @keyframes vend-pop { from { transform: translateY(20px) scale(0.85); opacity: 0; } } .vend-pickup-img { width: 5.25rem; height: 5.25rem; display: block; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); } .vend-pickup-remove { appearance: none; cursor: pointer; position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; line-height: 1; color: #ffffff; background: linear-gradient(180deg, #ff5a4e, #e03024); border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); transition: transform 0.15s var(--transition-smooth); } .vend-pickup-remove:hover { transform: scale(1.15); } /* Feedback „geht nicht": Produkt liegt schon im Ausgabefach */ @keyframes vend-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .vend-shake { animation: vend-shake 0.4s ease; } /* Hinweis + Bundle-CTA + Zahlarten-Hinweis unter dem Fenster (das Ausgabefach schwebt fixiert darüber) */ .vend-under { max-width: var(--container-max-width); margin: 0 auto; padding: 0 2rem 4rem; text-align: center; } .shop-note { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); text-align: center; } /* Zahlarten-/Käuferschutz-Hinweis (Risiko-Umkehr) */ .shop-pay { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-muted); text-align: center; margin-top: 2rem; } /* Footer = Maschinen-Sockel: gleiche Dunkelstufe wie das Gehäuse, keine helle Trennlinie. margin-bottom = Höhe der fixierten Ausgabefach-Leiste, damit sie am Seitenende nichts verdeckt */ .page-shop .footer { border-top: none; background: #0b0b0e; margin-bottom: 9.5rem; } /* Schild vs. Navigation: ab hier wird es eng — nur noch der Titel, das Kanji-Signet gibt den Platz frei */ @media (max-width: 1100px) { .page-shop .vend-marquee-jp { display: none; } } @media (max-width: 768px) { .page-shop .vend-title { font-size: 1rem; letter-spacing: 0.22em; } } @media (max-width: 900px) { /* Panel wandert unter das Fenster */ .vend-body { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 2rem 2.5rem; } .vend-keypad { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } } @media (max-width: 640px) { .vend-body { padding: 1.5rem 1rem 2rem; } .vend-window { padding: 1rem; } .vend-featured { grid-template-columns: 1fr; gap: 1rem; } .vend-featured-media { max-width: 280px; margin: 0 auto; } .vend-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .vend-tray-slot { height: 5.5rem; justify-content: flex-start; } .vend-pickup-img { width: 4.25rem; height: 4.25rem; } /* Fixierte Ausgabefach-Leiste ist auf Mobile flacher */ .page-shop .footer { margin-bottom: 8rem; } } /* Packages (Video-Pakete) */ .packages { padding: var(--section-padding) 0; } /* Leistungen-Seite: Kopfbereich kompakter — Titel, Intro und CTA näher zusammen, kleinerer Abstand zu den Karten (nur /pakete nutzt .packages) */ .packages { padding-top: 4rem; } /* /pakete hat ein Seiten-Banner: '.page-banner + .page > section:first-child' setzt padding-top auf --section-padding (8 rem) — hier gezielt wieder verringern */ .page-banner + .page > section.packages:first-child { padding-top: 4rem; } .packages .section-header { margin-bottom: 2.5rem; gap: 0.375rem; } /* Untertitel, Intro- und Standort-Zeile enger stapeln */ .packages .section-header .packages-subtitle { margin-top: 0.625rem; line-height: 1.45; } .packages .section-header .packages-location { margin-top: 0.25rem; line-height: 1.45; } .packages .page-ctas { margin-top: 2.5rem; } .packages .packages-grid { margin-top: 2.5rem; } .packages-subtitle { font-size: 1.0625rem; font-weight: 300; color: var(--color-text-muted); text-align: center; margin-top: 1rem; } .packages-launch { display: inline-block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 100px; padding: 0.375rem 1rem; margin-top: 1.25rem; } .section-header .packages-launch { display: table; margin-left: auto; margin-right: auto; } /* Querverweis Pakete → Fitnessstudios-Landingpage */ .packages-fitness-note { font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); text-align: center; } .packages-fitness-note a { margin-left: 0.5rem; } .packages-location { font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); text-align: center; margin-top: 0.75rem; } .packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-top: 4rem; align-items: stretch; } /* Projekt-Pakete-Sektion auf /pakete (Long-Form-Karten) */ .packages-projects { margin-top: 5rem; } .packages-projects .packages-grid { margin-top: 2.5rem; } .package-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 2rem; transition: transform 0.3s var(--transition-smooth), border-color 0.3s ease, box-shadow 0.3s ease; } /* Bild-Karten auf /pakete (Leistungen) */ .package-card-img { width: calc(100% + 4rem); height: auto; max-width: none; margin: -2rem -2rem 1.25rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px 8px 0 0; } /* Service-Detailseiten (/leistungen/) */ .service-hero-img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 8px; margin-top: 2.5rem; } @media (max-width: 640px) { .service-hero-img { aspect-ratio: 16 / 9; } } .service-section { max-width: 720px; margin: 4rem auto 0; } .service-text { color: var(--color-text-muted); font-weight: 300; line-height: 1.7; margin-top: 1.25rem; } /* „Weitere Leistungen"-Grid auf den Detailseiten */ .service-others { margin-top: 5rem; } .service-others .packages-grid { margin-top: 2.5rem; } a.service-card { text-decoration: none; color: inherit; } .service-card-more { color: var(--color-accent); font-size: 0.9375rem; font-weight: 500; } .package-card:hover { transform: translateY(-4px); border-color: var(--color-text); } .package-card--featured { border-color: var(--color-accent); box-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 12%, transparent); } .package-card--featured:hover { border-color: var(--color-accent); box-shadow: 0 0 48px color-mix(in srgb, var(--color-accent) 20%, transparent); } .package-badge { position: absolute; top: -0.75rem; right: 1.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0a0a0a; background: var(--color-accent); padding: 0.25rem 0.75rem; border-radius: 100px; } .package-title { font-size: 1.25rem; font-weight: 500; color: var(--color-text); } .package-desc { font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); margin-top: 0.5rem; } .package-features { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; } .package-features li { position: relative; font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); padding-left: 1.5rem; } .package-features li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } .package-pricing { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.125rem; } .package-price-later { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-muted); text-decoration: line-through; } .package-price { font-size: 1.5rem; font-weight: 600; color: var(--color-text); } .package-price-unit { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); } .package-cta { display: block; text-align: center; margin-top: 1.5rem; padding: 0.875rem 1.5rem; font-size: 0.9375rem; font-weight: 600; color: #0a0a0a; background: var(--color-accent); border-radius: 8px; text-decoration: none; transition: transform 0.2s var(--transition-smooth), box-shadow 0.3s ease; } .package-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-accent) 25%, transparent); } .package-cta:active { transform: translateY(0); } .packages-consult { margin-top: 5rem; margin-left: auto; margin-right: auto; max-width: 720px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 3rem 2rem; } .packages-consult-title { font-size: 1.5rem; font-weight: 500; color: var(--color-text); } .packages-consult-text { font-size: 1rem; font-weight: 300; color: var(--color-text-muted); margin-top: 0.75rem; } .packages-consult-actions { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .packages-consult-cta { display: inline-block; margin-top: 0; min-width: 260px; } .packages-consult-secondary { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; } .packages-consult-secondary:hover { color: var(--color-text); } .packages-singles { margin-top: 5rem; max-width: 720px; margin-left: auto; margin-right: auto; } .packages-singles-title { font-size: 1.125rem; font-weight: 500; color: var(--color-text); text-align: center; } .packages-singles-list { list-style: none; margin-top: 1.5rem; border-top: 1px solid var(--color-border); } .packages-singles-list li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); } .packages-singles-list li span:last-child { color: var(--color-text); white-space: nowrap; } .packages-notes { margin-top: 3rem; text-align: center; display: flex; flex-direction: column; gap: 0.375rem; } .packages-notes p { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); } .packages-legal { font-size: 0.8125rem !important; } @media (max-width: 600px) { .packages-grid { grid-template-columns: 1fr; } } /* Fitnessstudios-Landingpage (/fitnessstudios) — Karten/Pakete/CTA verwenden die vorhandenen packages-Klassen, hier nur das eigene Layout */ .fitness-section { padding: calc(var(--section-padding) / 2) 0; } .fitness-section:first-child { padding-top: var(--section-padding); } .fitness-hero { text-align: center; } .fitness-hero .container { max-width: 760px; } .fitness-hero-actions { margin-top: 2rem; display: flex; justify-content: center; } .fitness-cta { display: inline-block; margin-top: 0; min-width: 260px; } .fitness-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2.5rem; align-items: stretch; } .fitness-solution { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .fitness-solution-text { font-size: 1.0625rem; font-weight: 300; color: var(--color-text-muted); margin-top: 1rem; line-height: 1.6; } .fitness-solution-list { text-align: left; } .fitness-section-header { margin-bottom: 0; gap: 0.25rem; } .fitness-note { margin-top: 2.5rem; text-align: center; font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); } .fitness-cross { margin-top: 1rem; text-align: center; } .fitness-steps, .packages-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; } .packages-steps { margin-top: 5rem; } .fitness-step, .packages-step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.5rem; } .fitness-step-num, .packages-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0.875rem; font-weight: 600; color: #0a0a0a; background: var(--color-accent); } .fitness-step-title, .packages-step-title { font-size: 1.0625rem; font-weight: 500; color: var(--color-text); margin-top: 1rem; } .fitness-step-text, .packages-step-text { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); margin-top: 0.5rem; line-height: 1.6; } .fitness-faq, .packages-faq { max-width: 720px; margin: 2.5rem auto 0; } /* Auf /pakete steht die FAQ innerhalb der Packages-Sektion — mehr Abstand */ .packages-faq { margin-top: 5rem; } /* Überschrift „Häufige Fragen": gleicher Abstand zu den Feldern wie bei den Einzelbausteinen */ .packages-faq .packages-singles-title { margin-bottom: 1.5rem; } .fitness-faq details, .packages-faq details { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); margin-bottom: 0.875rem; padding: 1.25rem 1.5rem; } .fitness-faq summary, .packages-faq summary { cursor: pointer; font-weight: 500; color: var(--color-text); list-style: none; } /* Safari zeigt sonst zusätzlich zum + das native Disclosure-Dreieck */ .fitness-faq summary::-webkit-details-marker, .packages-faq summary::-webkit-details-marker { display: none; } .fitness-faq summary::before, .packages-faq summary::before { content: '+'; display: inline-block; color: var(--color-accent); font-weight: 700; margin-right: 0.75rem; transition: transform 0.25s ease; } .fitness-faq details[open] summary::before, .packages-faq details[open] summary::before { transform: rotate(45deg); } .fitness-faq details p, .packages-faq details p { margin-top: 0.875rem; color: var(--color-text-muted); font-weight: 300; line-height: 1.6; font-size: 0.9375rem; } .fitness-final { margin-top: 0; } @media (max-width: 600px) { .fitness-grid { grid-template-columns: 1fr; } } /* About */ .about { padding: var(--section-padding) 0; text-align: center; } .about-content { max-width: 600px; margin: 0 auto; } .about-text { font-size: 1.125rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.8; margin-top: 1.5rem; } /* Kontakt */ .contact { padding: var(--section-padding) 0; text-align: center; } .contact-content { max-width: 1000px; margin: 0 auto; } /* 2-Spalten-Layout: Formular links, Kontaktkarte rechts */ .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; margin-top: 3rem; text-align: left; align-items: start; } .contact-grid .contact-form { margin-top: 0; } .contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 2rem; display: flex; flex-direction: column; gap: 0.625rem; } .contact-card-title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 500; color: var(--color-text); } .contact-card .contact-email { margin: 0; } .contact-card .contact-replytime { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } } .contact-email { display: block; width: fit-content; margin: 1.5rem auto 0; font-size: 1.125rem; font-weight: 300; color: var(--color-text-muted); text-decoration: none; transition: color 0.3s ease; } .contact-email + .contact-email { margin-top: 0.5rem; } .contact-email:hover { color: var(--color-accent); } .contact-location { font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); margin-top: 1rem; } .contact-form { margin: 3rem auto 0; text-align: left; display: flex; flex-direction: column; gap: 1.25rem; } .contact-field label { display: block; font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-bottom: 0.5rem; } .contact-field input, .contact-field select, .contact-field textarea { width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font-family: inherit; font-size: 0.9375rem; font-weight: 300; padding: 0.75rem 1rem; transition: border-color 0.3s ease; } .contact-field textarea { resize: vertical; min-height: 120px; } .contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: none; border-color: var(--color-accent); } /* Honeypot: aus dem Viewport schieben statt display:none — einfache Bots erkennen display:none und überspringen das Feld sonst */ .contact-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .contact-submit { align-self: center; background: var(--color-accent); color: #0a0a0a; border: none; border-radius: 100px; font-family: inherit; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.875rem 2.5rem; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; } .contact-submit:hover { transform: translateY(-2px); } .contact-submit:disabled { opacity: 0.6; cursor: default; transform: none; } .contact-form-status { min-height: 1.25rem; margin: 0; font-size: 0.875rem; font-weight: 300; text-align: center; } .contact-form-status.ok { color: var(--color-accent); } .contact-form-status.error { color: #e05555; } .contact-privacy { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-muted); margin-top: 1.5rem; } .contact-privacy a { color: inherit; text-decoration: underline; } .contact-replytime { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-muted); margin-top: 1.5rem; } .contact-direct { font-size: 0.875rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin-top: 3rem; } /* Rechtstexte */ .legal { padding: var(--section-padding) 0; } .legal-content { max-width: 800px; margin: 0 auto; font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.8; } .legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4 { color: var(--color-text); font-weight: 500; margin: 2rem 0 0.75rem; } .legal-content p { margin: 0 0 1rem; } .legal-content ul, .legal-content ol { margin: 0 0 1rem 1.5rem; } .legal-content a { color: var(--color-text); } .legal-content img { max-width: 100%; height: auto; } /* Blog */ .blog { padding: var(--section-padding) 0; } .blog-subtitle { font-size: 1.0625rem; font-weight: 300; color: var(--color-text-muted); text-align: center; margin-top: 1rem; } .blog-empty { text-align: center; color: var(--color-text-muted); font-weight: 300; margin-top: 3rem; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .blog-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; text-decoration: none; transition: transform 0.3s var(--transition-smooth), border-color 0.3s ease; } .blog-card:hover { transform: translateY(-4px); border-color: var(--color-text); } .blog-card-image { aspect-ratio: 16 / 9; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--transition-smooth); } .blog-card:hover .blog-card-image img { transform: scale(1.05); } .blog-card-info { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem 1.25rem; } /* Datum als Chip auf den Karten */ .blog-card-date { align-self: flex-start; font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 100px; padding: 0.1875rem 0.625rem; } .blog-card-title { font-size: 1.0625rem; font-weight: 400; color: var(--color-text); line-height: 1.4; } .blog-card-excerpt { font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.6; } .blog-card-more { font-size: 0.8125rem; font-weight: 500; color: var(--color-accent); margin-top: 0.25rem; } /* Blog: Einzelartikel */ .blog-article { max-width: 920px; margin: 0 auto; } /* Entwurfs-Hinweis in der Admin-Vorschau (?preview=, noindex) */ .blog-draft-banner { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: #0a0a0a; background: var(--color-accent); border-radius: 8px; padding: 0.625rem 1rem; margin-bottom: 1.5rem; } .blog-article-title { text-align: left; margin-top: 1.5rem; } /* Meta-Zeile unter dem Artikeltitel: Autor + Datum + Lesezeit */ .blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.25rem; } .blog-author { display: inline-flex; align-items: center; gap: 0.625rem; } .blog-author-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 600; color: #0a0a0a; background: var(--color-accent); flex-shrink: 0; } .blog-author-text { display: flex; flex-direction: column; } .blog-author-name { font-size: 0.875rem; font-weight: 500; color: var(--color-text); } .blog-author-role { font-size: 0.75rem; font-weight: 300; color: var(--color-text-muted); } .blog-article-date, .blog-reading-time { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-muted); } .blog-article-date::before, .blog-reading-time::before { content: "·"; margin-right: 1.25rem; color: var(--color-border); } @media (max-width: 640px) { .blog-article-date::before, .blog-reading-time::before { content: none; margin-right: 0; } } /* Related-Posts am Artikelende */ .blog-related { margin-top: 3.5rem; } .blog-related-title { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1.5rem; } .blog-related-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Gestalteter Produkt-CTA am Artikelende (Brücke Artikel → Verkaufsseite) */ .blog-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3.5rem; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } .blog-cta-title { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; } .blog-cta-sub { margin: 0.5rem 0 0; font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); } .blog-cta-button { flex-shrink: 0; } .blog-article-image { width: 100%; border-radius: 8px; margin-top: 2rem; display: block; } .blog-back { color: var(--color-text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.3s ease; } .blog-back:hover { color: var(--color-accent); } .blog-article p:last-child { margin-top: 3rem; } /* Blog: Fließtext (aus dem Rich-Text-Editor) */ .blog-content { margin-top: 2.5rem; font-size: 0.9375rem; font-weight: 300; color: var(--color-text-muted); line-height: 1.8; } .blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4 { color: var(--color-text); font-weight: 500; margin: 2rem 0 0.75rem; } .blog-content p { margin: 0 0 1rem; } .blog-content ul, .blog-content ol { margin: 0 0 1rem 1.5rem; } .blog-content blockquote { border-left: 2px solid var(--color-border); padding-left: 1.25rem; margin: 0 0 1rem; font-style: italic; } .blog-content img { max-width: 100%; height: auto; border-radius: 8px; } .blog-content a { color: var(--color-text); } /* Footer */ .footer { padding: 4rem 0 2rem; border-top: 1px solid var(--color-border); } /* 5-Spalten-Footer: Marke / Navigation / Kontakt / Social / Rechtliches */ .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4375rem; } .footer-col-title { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .footer-brand-name { margin: 0 0 0.375rem; font-size: 1.0625rem; font-weight: 600; color: var(--color-text); } .footer-brand-line { margin: 0; font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); } .footer-social-link { display: inline-flex; align-items: center; gap: 0.5rem; } .footer-social-link svg { width: 15px; height: 15px; flex-shrink: 0; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } .footer-link { font-size: 0.875rem; color: var(--color-text-muted); text-decoration: none; transition: color 0.3s ease; } .footer-link:hover { color: var(--color-text); } .social-links { display: flex; gap: 1rem; } .social-link { position: relative; width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); text-decoration: none; transition: all 0.3s ease; } .social-link svg { width: 18px; height: 18px; } .social-link:hover { border-color: var(--color-text); color: var(--color-text); transform: translateY(-2px); } /* Tooltip mit Beschreibung beim Hovern (Text aus aria-label) */ .social-link::after { content: attr(aria-label); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text); font-size: 0.75rem; font-weight: 400; padding: 0.375rem 0.75rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .social-link:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } .footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid var(--color-border); } .footer-bottom p { font-size: 0.75rem; color: var(--color-text-muted); } .footer-location { margin: 0.125rem 0 0; font-size: 0.875rem; font-weight: 300; color: var(--color-text-muted); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.95); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s var(--transition-smooth); } .lightbox.active { opacity: 1; visibility: visible; } .lightbox-content { position: relative; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; } .lightbox-image { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 4px; cursor: zoom-out; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; } .lightbox.active .lightbox-image { transform: scale(1); } .lightbox-info { margin-top: 1rem; text-align: center; opacity: 0; transform: translateY(10px); transition: all 0.4s var(--transition-smooth) 0.2s; } .lightbox.active .lightbox-info { opacity: 1; transform: translateY(0); } /* Auf Album-Seiten entfallen die Caption-Labels (identisches Rauschen) — die leere Caption erzeugt sonst nur Leerraum unterm Bild */ .lightbox-info:has(.lightbox-title:empty):has(.lightbox-category:empty) { display: none; } .lightbox-title { font-size: 1.125rem; font-weight: 500; color: var(--color-text); display: block; } .lightbox-category { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.25rem; display: block; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; background: none; border: none; color: var(--color-text); cursor: pointer; padding: 1rem; opacity: 0.6; transition: opacity 0.3s ease; z-index: 10; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { opacity: 1; } .lightbox-close { top: 1rem; right: 1rem; } .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 28px; height: 28px; } .lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); } .lightbox-video { display: none; max-width: 90vw; max-height: 80vh; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(6px); } 60% { transform: translateY(3px); } } /* Responsive */ @media (max-width: 1024px) { .gallery-grid, .masonry-block { gap: var(--gallery-gap); } .gallery-column { gap: var(--gallery-gap); } } @media (max-width: 768px) { .header { padding: 1rem 0; /* backdrop-filter auf Mobile aus: der Weichzeichner über dem scrollenden Inhalt verursacht Ruckler und Aufblitzen der Bilder */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* Geöffnetes Menü: Header und Panel undurchsichtig */ .header.nav-open { background: var(--color-bg); } .nav-toggle { display: flex; } /* Navigation als aufklappbares Panel unter dem Header */ .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0 1.25rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .header.nav-open .nav { display: flex; } .nav-link { padding: 0.875rem 2rem; font-size: 1rem; } .nav-link::after { display: none; } .nav-home { padding: 0.875rem 2rem; } .nav .lang-toggle { align-self: flex-start; margin: 0.75rem 2rem 0; padding: 0.5rem 1rem; font-size: 0.875rem; } .item-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%); } .item-title, .item-category { transform: translateY(0); } .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } .lightbox-prev, .lightbox-next { display: none; } } /* Touch-Geräte: :hover bleibt nach dem Antippen „kleben" — die teure Bild-Skalierung würde sonst mitten beim Scrollen ausgelöst. translateZ(0) hält Karten und Bilder auf stabilen Compositor-Ebenen, damit Mobile-Browser sie beim Scrollen nicht neu rastern (Flackern). */ @media (hover: none) { .gallery-item, .album-card { transform: translateZ(0); } .gallery-item img, .album-card img { transform: translateZ(0); backface-visibility: hidden; } .gallery-item:hover img, .album-card:hover img { transform: none; } /* Touch-Targets Richtung 44 px (WCAG-Minimum 24 px war schon erfüllt) */ .footer-link { display: inline-block; padding: 0.625rem 0; } .nav .lang-toggle { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 480px) { .container { padding: 0 1rem; } .hero { padding: 0 1rem; } .filter-buttons { flex-wrap: wrap; justify-content: center; } /* Zweizeilig umbrechende Pill: weniger Radius, sonst unförmige Stadium-Form */ .packages-launch { border-radius: 18px; } } /* ============================================================ Horizontale Flow-Experience (nur Startseite, three.js) Greift ausschließlich, wenn flow.js body.flow-mode setzt — ohne ihn (No-JS, reduced-motion, WebGL-Fehler, Edit-Mode) bleibt die Seite eine ganz normale vertikale Seite. Aufbau: .flow-stage (100vh) = Hero + je Album ein Panel; danach folgt der Footer im normalen Dokumentfluss. Der Hero- Titel wandert beim Wechsel nach oben (kleiner), eine Linie durchstreicht ihn zunehmend mit dem Scroll-Fortschritt. ============================================================ */ #flow-canvas, #flow-beam { display: none; } /* Die Stage ist der horizontale Bereich; der Rest der Seite (Footer) bleibt normal vertikal scrollbar. */ body.flow-mode .flow-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; } body.flow-mode #flow-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* main ist die statische Bühne (kein Verschieben der Abschnitte mehr): der Hintergrund verschmilzt im WebGL, nur die Cover schieben herein. */ body.flow-mode main.flow-track { position: relative; height: 100%; /* über dem WebGL-Canvas (z-index 0): Inhalte sichtbar und klickbar, das Visual scheint durch die transparenten Stellen */ z-index: 1; } /* Die Panels liegen übereinander; sichtbar macht sie ihr Inhalt. */ body.flow-mode main > section.hero { height: 100%; padding-top: 0; padding-bottom: 0; } /* Hero & Content fangen keine Zeiger-Events ab — sonst lägen sie über den Album-Links und das Cover wäre nicht durchgehend klickbar (die CTAs steuert flow.js über ihren Wrapper inline selbst). */ body.flow-mode main > section.hero, body.flow-mode .hero-content { pointer-events: none; } /* Die statische Werke-Übersicht (Album-Karten) wird im Flow-Modus durch die generierten Album-Panels ersetzt (flow.js baut sie aus denselben Karten auf — No-JS/reduced-motion sehen weiter die Karten) */ body.flow-mode main > section.portfolio { display: none; } /* Album-Panels: unsichtbare Vollbild-Hülle; klickbar ist NUR der Link */ body.flow-mode main > section.flow-album { position: absolute; inset: 0; height: auto; overflow: visible; pointer-events: none; } .flow-album-inner { position: absolute; inset: 0; } /* Hero: das Visual liefert der WebGL-Canvas (Video-/Bild-Textur). Das DOM-Video bleibt für die Textur aktiv, ist aber unsichtbar. */ body.flow-mode .hero { background-image: none; } body.flow-mode .hero-video { opacity: 0; pointer-events: none; } /* Der Fade zum Seitenhintergrund ergibt ohne Seitenhintergrund keinen Sinn — im Flow-Modus entfällt er. */ body.flow-mode .hero::after { display: none; } /* Der klassische Scroll-Pfeil wird vom Strahl abgelöst. */ body.flow-mode .scroll-indicator { display: none; } /* --- Wandernder Titel: flow.js zieht .hero-title in diesen Wrapper (volle Breite, text-align center) und animiert translateY/scale pro Frame aus derselben Feder wie die Panels (organisch). --- */ .flow-title { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; text-align: center; will-change: transform; transform-origin: top center; } /* Durchstreich-Linie: haardünn, leicht geneigt, subtiler Glow. ZWEI Ebenen (flow.js steuert width/height/opacity inline): die subtile Basis durchstreicht den Titel ab dem ersten Album VOLL, das hellere Segment wächst ∝ Scroll-Fortschritt (Positionsanzeige). */ .flow-title-line { position: absolute; left: -2%; top: 37%; height: 1px; width: 0; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.16); opacity: 0; transform: rotate(-0.6deg); pointer-events: none; } .flow-title-line-strong { position: absolute; left: -2%; top: 37%; height: 1px; width: 0; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 8px rgba(255, 255, 255, 0.25); opacity: 0; transform: rotate(-0.6deg); pointer-events: none; } /* --- Album-Cover: unsichtbare Link-Hülle (Größe/Position/Klick); das sichtbare Cover rendert WebGL deckungsgleich dahinter. Kein box-shadow: die Hülle ist transparent — der Schatten stünde als falscher dunkler Rand um das WebGL-Cover. --- */ .flow-album-link { position: absolute; left: 50%; top: 50%; display: block; width: min(1120px, 86vw); aspect-ratio: 16 / 10; max-height: 62vh; border-radius: var(--gallery-radius, 12px); text-decoration: none; pointer-events: auto; transform: translate(-50%, -50%); will-change: transform; } /* Album-Titel zentral über dem Cover. KEINE Abdunklung mehr hinter dem Text: die sichtbare Beschriftung rendert WebGL als oberste Ebene (mit eigenem Schatten in der Textur) — ein DOM-Gradient läge sonst ÜBER der Schrift und würde sie wie „unter Wasser" wirken lassen. */ .flow-album-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1.5rem; text-align: center; } .flow-album-title { margin: 0; /* Light-Garamond (EB Garamond gibt es nicht unter 400): deutlich dünnere Strichstärke für die Album-Titel */ font-family: 'Cormorant Garamond', 'EB Garamond', serif; font-weight: 300; /* Größe um den Faktor φ über dem vorherigen Wert: 6,5vw × 1,618 ≈ 10,5vw, 5rem × 1,618 ≈ 8,1rem */ font-size: clamp(2.4rem, 10.5vw, 8.1rem); line-height: 1.08; letter-spacing: 0.16em; color: #ffffff; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.65); } /* Cover-Beschriftung (nur der Titel) rendert als WebGL-Textur (flow.js) — das DOM-Original bleibt für SEO/Screenreader erhalten und wird erst unsichtbar, wenn die Textur steht */ .flow-album-overlay.flow-label-gl .flow-album-title { opacity: 0; } /* Kurze/segenschmale Viewports: Cover kleiner halten */ @media (max-height: 760px) { .flow-album-link { width: min(880px, 80vw); aspect-ratio: 16 / 9; } } /* --- Der Strahl (Beam): haardünne Linie, Nummern, Progress-Glow --- */ body.flow-mode #flow-beam { display: block; position: absolute; left: 50%; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(430px, 64vw); height: 2.25rem; z-index: 110; } .flow-beam-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.22); } /* Leuchtendes Segment: NUR der Abschnitt unter der aktiven Zahl — Position folgt kontinuierlich der Panel-Position (flow.js schreibt --flow-progress 0..1 pro Frame, --flow-seg = 1/n einmalig). */ .flow-beam-progress { position: absolute; left: calc(var(--flow-progress, 0) * 100%); bottom: -0.5px; height: 2px; width: calc(var(--flow-seg, 0.2) * 100%); background: var(--color-accent, #ffffff); border-radius: 2px; box-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.45); } .flow-beam-buttons { position: absolute; inset: 0; display: flex; } .flow-beam-buttons button { flex: 1; align-self: flex-start; padding: 0 0 0.625rem; border: 0; background: none; font: inherit; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.42); cursor: pointer; transition: color 0.35s ease, text-shadow 0.35s ease; } .flow-beam-buttons button:hover { color: rgba(255, 255, 255, 0.85); } .flow-beam-buttons button.active { color: #ffffff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.8); } .flow-beam-buttons button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; } /* Mobile: Panels mit möglichem Überlauf scrollen intern vertikal; Panel-Wechsel läuft per Horizontal-Swipe. */ @media (max-width: 900px) { body.flow-mode main > section { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; } body.flow-mode #flow-beam { width: min(300px, 72vw); bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); } .flow-album-link { width: 92vw; aspect-ratio: 4 / 3; max-height: 62vh; } .flow-album-title { letter-spacing: 0.1em; } }