/* ========================================================================== Casino Restaurant Wittlich — Animierte Variante (Dark) D2 Digital · Entwurf/Experiment Aufbau dieser Datei: 1 Design-Tokens 2 Reset & Basis 3 Layout (container, section, split, grid) 4 Header & Navigation 5 Typografie-Bausteine & Buttons 6 Inhaltskomponenten (Karten, Panels, Speisekarte, Formular, Karte) 7 Footer 8 ANIMATIONSMUSTER 1–6 (GSAP/ScrollTrigger, siehe assets/js/main.js) 9 Utilities, Responsive, prefers-reduced-motion MARKENFARBEN (Rot/Gold, hell): Vom Kunden vorgegeben — --text #55040c, --background #d8d6d0, --secondary #7a1d26, --accent #f4db73 (nachträglich mehrfach angepasst, ursprünglich #dfc57e). Genau dieselbe Farbfamilie wie in der vorigen Runde, diesmal aber Text und Fläche vertauscht: die Fläche ist jetzt HELL (#d8d6d0), die Schrift DUNKELROT (#55040c) — vorher war es umgekehrt. Nur 4 unterschiedliche Werte für ein System, das ~12 Rollen braucht (4 Flächenstufen, 3 Textstufen, 3 Button-Zustände, 2 Akzent-Varianten) — die fehlenden Zwischenstufen wurden algorithmisch in derselben Sättigung/Farbfamilie ergänzt (siehe einzelne Kommentare unten), nicht frei erfunden. Weil Gold (--accent) selbst hell ist, kann es auf der jetzt hellen Fläche nicht mehr als Text-/Rahmen-Akzent (--gold-Rolle) dienen — dafür zu wenig Kontrast. Diese Rolle übernimmt jetzt --secondary (dunkles Rot), Gold bleibt ausschließlich den Buttons vorbehalten. Die CSS-Variablennamen (--bg, --green, --gold, --champagne …) sind aus den vorigen Farbrunden übrig geblieben und wurden NICHT erneut umbenannt, um nicht wieder jede Fundstelle im Stylesheet anzufassen. Weil die Fläche jetzt wieder hell ist, brauchen Text-über-Foto-Stellen wieder eine eigene, fest verdrahtete Farbe: --on-photo/--on-photo-accent zeigen NICHT auf --ink/--gold (die sind jetzt dunkel), sondern auf eigene helle Literalwerte (siehe unten) — die Foto-Scrims bleiben dunkel, unabhängig von der jetzt hellen Seitenfläche. ========================================================================== */ /* ========================================================================== 1 · DESIGN-TOKENS ========================================================================== */ :root { /* Fläche ist jetzt wieder HELL: --background (vorgegeben) ist ein warmes Hellgrau. --bg-alt/--panel/--panel-2 sind Abstufungen desselben Farbtons (~45°), zunehmend dunkler — --accent (Gold) bleibt bewusst NUR den Buttons vorbehalten, damit er dort als "das ist klickbar" unverwechselbar bleibt. */ --bg: #D8D6D0; /* Grundton (vorgegeben: --background) */ --bg-alt: #CECCC5; /* abgesetzte Bänder (ergänzt) */ --panel: #C4C0B5; /* Panels/Karten (ergänzt) */ --panel-2: #BAB5A6; /* tiefere Panels (ergänzt) */ /* Schrift ist jetzt wieder DUNKEL: --ink (vorgegeben: --text) ist das dunkle Rot. --ink-dim/-faint sind hellere Abstufungen derselben Rot-Familie (~354°) — heller je weniger prominent der Text sein soll, aber immer noch dunkel genug für WCAG-AA auf jeder Flächenstufe. */ --ink: #55040C; /* Fließtext (vorgegeben: --text) */ --ink-dim: #761922; /* gedämpfter Text (ergänzt) */ --ink-faint: #713339; /* Meta, Hinweise (ergänzt) */ /* Akzente: --accent ist vorgegeben (Gold), bleibt unverändert und ist weiterhin NUR für Buttons reserviert. Button-TEXT ist dunkel (--ink), nicht hell: Kontrast dunkles Rot auf Gold = 8,8:1. */ --green: #F4DB73; /* Buttons (--accent, angepasst) */ --green-hover: #F8E7A2; /* (ergänzt, heller) */ --green-active: #F7CB14; /* (ergänzt, dunkler/satter) */ /* Text-/Rahmen-Akzent (Eyebrows, Links, Icons) darf NICHT mehr Gold sein: Gold ist selbst hell und hätte auf der jetzt hellen Fläche viel zu wenig Kontrast (nur 1,2:1). Diese Rolle übernimmt --secondary (vorgegeben, dasselbe dunkle Rot wie --ink, nur eine Stufe heller) — Hover vertieft zusätzlich Richtung --ink, statt heller zu werden. */ --gold: #7A1D26; /* Text-/Rahmen-Akzent (vorgegeben: --secondary) */ --champagne: #55040C; /* Hover/Betonung, tiefer statt heller (= --ink) */ --line: rgba(122, 29, 38, 0.18); --line-strong: rgba(122, 29, 38, 0.38); /* Text über abgedunkelten Fotos braucht wieder eine eigene, fest verdrahtete Farbe: die Fläche ist jetzt hell, aber die Foto-Scrims bleiben dunkel (siehe .hero-mosaic__wordmark, .pin-panel__bg::after u.a.) — darüber muss der Text hell bleiben, unabhängig davon, dass --ink jetzt dunkel ist. Feste Werte, keine Verweise auf --ink/--gold. */ --on-photo: #D8D6D0; --on-photo-accent: #F4DB73; /* Typografie */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif; /* Abstände */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 7rem; --max-width: 1200px; --header-h: 5.5rem; } /* ========================================================================== 2 · RESET & BASIS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink-dim); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* "clip" statt "hidden": fängt horizontalen Überstand der Parallax-Ebenen ab, erzeugt dabei aber KEINEN eigenen Scroll-Container — sonst bricht das Pinning von ScrollTrigger (Muster 5). */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: var(--gold); text-decoration: none; transition: color 0.25s ease; } a:hover { color: var(--champagne); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.15; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); } h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); } h3 { font-size: 1.45rem; } p { color: var(--ink-dim); } ::selection { background: var(--green); color: var(--ink); } /* dunkler Text, Gold ist hell */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Sprungmarke für Tastatur-/Screenreader-Nutzung */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--panel); padding: 0.75rem 1.25rem; font-weight: 600; } .skip-link:focus { left: 1rem; top: 1rem; } /* ========================================================================== 3 · LAYOUT ========================================================================== */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 4rem); } .container--narrow { max-width: 820px; } .section { padding: clamp(4rem, 9vw, 7rem) 0; } .section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; } .section--alt { background: var(--bg-alt); } .section--panel { background: var(--panel); } /* erste Sektion einer Seite ohne Hero: schiebt den Inhalt unter den Header */ .section--first { padding-top: calc(var(--header-h) + 4rem); } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .section__head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section__head p { margin-top: 1rem; } .section__head--center { margin-left: auto; margin-right: auto; text-align: center; } .text-center { text-align: center; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } /* ========================================================================== 4 · HEADER & NAVIGATION ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 300; padding: 1.6rem 0; transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease; border-bottom: 1px solid transparent; } /* Logo und Navigation sind standardmäßig dunkel (--ink/--gold): auf der Startseite wurden die Hero-Mosaik-Kacheln extra so positioniert, dass sie den Header freilassen (siehe m-tile--02/05 weiter unten) — dort liegt der Header nie über einem abgedunkelten Foto, sondern immer über der flachen Seitenfläche (hell), auf der dunkle Schrift richtig ist. Die Unterseiten haben aber einen vollflächigen Foto-Hero (.hero-compact), der bis unter den ungescrollten Header reicht — dort säße dunkle Schrift auf dunkel abgedunkeltem Foto (praktisch unsichtbar). Für genau diesen Fall werden --ink/--gold innerhalb des ungescrollten Headers lokal auf die festen Foto-Textfarben umgebogen; alle Header-Regeln darunter nutzen ohnehin var(--ink)/var(--gold) und übernehmen den umgebogenen Wert automatisch. Sobald gescrollt wird, hat der Header einen soliden hellen Hintergrund — dort gilt wieder die normale dunkle Schrift. */ body:has(.hero-compact) .site-header:not(.is-scrolled) { --ink: var(--on-photo); --gold: var(--on-photo-accent); } /* Ausnahme von der Ausnahme: das ausgeklappte mobile Menü (.nav.is-open) hat unabhängig vom Scroll-Zustand IMMER einen soliden hellen Hintergrund (siehe @media weiter unten) — die helle Foto-Textfarbe von oben würde darauf verschwinden. Feste Literalwerte wie bei --on-photo, aus demselben Grund: hier ist ausdrücklich wieder die normale dunkle Farbe nötig, nicht die aktuellen (austauschbaren) --ink/--gold-Werte. Höhere Selektor-Spezifität als die Regel oben, damit das bei offenem Menü auf Unterseiten wirklich gewinnt. */ body:has(.hero-compact) .site-header:has(.nav.is-open) { --ink: #55040C; --gold: #7A1D26; } .site-header.is-scrolled { /* Hell, wie die neue Fläche (--bg). */ background: rgba(216, 214, 208, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.9rem 0; border-bottom-color: var(--line); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: baseline; gap: 0.6rem; color: var(--ink); } .brand:hover { color: var(--gold); } /* Logo-Icon: align-self statt .brand-weites align-items, damit die Grundlinie von Name/Sub-Zeile davon unberührt bleibt. */ .brand__logo { align-self: center; height: 2.4rem; width: auto; border-radius: 6px; } .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; color: inherit; } .brand__sub { font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); } .nav { display: flex; align-items: center; gap: 2rem; } .nav__list { display: flex; gap: 1.7rem; list-style: none; } .nav__list a { color: var(--ink); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; position: relative; padding-bottom: 0.25rem; } .nav__list a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .nav__list a:hover { color: var(--gold); } .nav__list a:hover::after, .nav__list a[aria-current="page"]::after { width: 100%; } .nav__list a[aria-current="page"] { color: var(--gold); } .lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--gold); } .lang-switch a { color: var(--gold); } .lang-switch a:hover { color: var(--ink); } .lang-switch a[aria-current="true"] { color: var(--ink); } /* Burger — zwei Striche, die sich beim Öffnen kreuzen */ .nav-toggle { display: none; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; position: relative; z-index: 320; } .nav-toggle span { position: absolute; left: 8px; right: 8px; height: 1.5px; background: var(--ink); transition: transform 0.35s ease, opacity 0.25s ease; } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 23px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ========================================================================== 5 · TYPOGRAFIE-BAUSTEINE & BUTTONS ========================================================================== */ .eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-dim); } .btn { position: relative; /* Anker für die Eckklammern (::before/::after) */ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.9rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Eckklammern: zwei dünne Winkel, die den Button leicht außerhalb seiner eigenen Kante einrahmen (wie ein Fadenkreuz) — eckig statt rund, damit es zur restlichen scharfkantigen Formsprache der Seite passt. Reine Deko, deshalb pointer-events:none, und in Fluss-Layouts sollte der umgebende Container kein overflow:hidden haben, sonst werden die Klammern abgeschnitten (bei .btn-row & Co. ist das nicht der Fall). */ .btn::before, .btn::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--gold); pointer-events: none; transition: border-color 0.25s ease; } .btn::before { top: -6px; left: -6px; border-width: 1px 0 0 1px; } .btn::after { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; } .btn:hover::before, .btn:hover::after { border-color: var(--champagne); } /* Dunkler Text statt Weiß: Gold ist hell (--accent), Weiß darauf hätte nur 1,7:1 Kontrast — das dunkle Rot der Schrift (--ink) dagegen 8,8:1. */ .btn--primary { background: var(--green); color: var(--ink); } .btn--primary:hover { background: var(--green-hover); color: var(--ink); } .btn--outline { background: transparent; color: var(--gold); border-color: var(--gold); } .btn--outline:hover { border-color: var(--champagne); color: var(--champagne); } .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } /* Textlink mit Pfeil */ .arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .arrow-link span { transition: transform 0.3s ease; display: inline-block; } .arrow-link:hover span { transform: translateX(5px); } /* Hinweisbox für offene Punkte im Entwurf */ .placeholder-note { display: block; border-left: 2px solid var(--green); background: rgba(244, 219, 115, 0.14); padding: 1rem 1.25rem; font-size: 0.88rem; color: var(--ink-dim); } /* ========================================================================== 6 · INHALTSKOMPONENTEN ========================================================================== */ /* -- Info-Leiste (Öffnungszeiten / Küche / Adresse) --------------------- War zwischenzeitlich als Parallelogramm (skewX) umgesetzt, auf ausdrücklichen Wunsch wieder zu einfachen Rechtecken zurückgebaut. .info-card__inner bleibt als reiner Padding-Wrapper bestehen (kein eigener Winkel mehr aufzuheben), damit an der HTML-Struktur nichts geändert werden musste. */ .info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; } .info-card { background: var(--bg); border: 1px solid var(--line); } .info-card__inner { display: flex; gap: 1rem; align-items: flex-start; padding: 1.8rem 1.6rem; } .info-card svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; } .info-card__title { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; } .info-card__text { color: var(--ink); font-size: 0.95rem; line-height: 1.5; } /* Telefon und E-Mail sind Links, sollen die Karten-Reihe aber nicht aufbrechen: Farbe wie der übrige Kartentext, Klickbarkeit über eine zurückhaltende Unterlinie, Gold erst beim Hover. */ .info-card__text a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; } .info-card__text a:hover, .info-card__text a:focus-visible { color: var(--gold); text-decoration-color: currentColor; } /* -- Bereichskarten ------------------------------------------------------ Derzeit auf keiner Seite im Einsatz: Auf „Räumlichkeiten“ hat das Karussell (Muster 7) diese Übersicht ersetzt. Bleibt als Baustein im System, falls eine ruhigere Variante gebraucht wird. Gleiches gilt für .arrow-link weiter oben. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .card { border: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; transition: border-color 0.3s ease, transform 0.4s ease; } .card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .card__media { position: relative; aspect-ratio: 4 / 3; background-image: var(--card-image); background-size: cover; background-position: center; filter: grayscale(25%) brightness(0.8); transition: filter 0.5s ease, transform 0.7s ease; } .card:hover .card__media { filter: grayscale(0) brightness(0.95); transform: scale(1.03); } .card__body { padding: 1.6rem; } .card__body h3 { margin-bottom: 0.6rem; } .card__body p { font-size: 0.95rem; margin-bottom: 1.1rem; } /* -- Panel & Datenzeilen ------------------------------------------------- */ .panel { background: var(--panel); border: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.2rem); } .panel--outline { background: transparent; } /* War als Parallelogramm-Variante gedacht (z. B. Kontakt), auf ausdrücklichen Wunsch wieder zu einem einfachen Rechteck zurückgebaut — verhält sich jetzt wie .panel. Klasse und .panel__inner-Wrapper bleiben im Markup bestehen, damit an der HTML-Struktur nichts geändert werden musste. */ .data-row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; } .data-row:last-child { border-bottom: 0; } .data-row span:first-child { color: var(--ink-dim); } .data-row span:last-child { color: var(--ink); white-space: nowrap; } /* -- Speisekarte --------------------------------------------------------- */ .menu-group + .menu-group { margin-top: 2.8rem; } .menu-group h3 { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; color: var(--gold); padding-bottom: 0.8rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); } .menu-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .menu-item__name { color: var(--ink); font-size: 1.05rem; font-family: var(--font-display); } .menu-item__desc { font-size: 0.88rem; color: var(--ink-faint); } .menu-item__price { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; } /* -- Neuigkeiten --------------------------------------------------------- War als Parallelogramm umgesetzt (wie die Info-Karten), auf ausdrücklichen Wunsch wieder zu einem einfachen Rechteck zurückgebaut. */ .news-list { display: grid; gap: 1.5rem; } .news-card { border: 1px solid var(--line); border-left: 2px solid var(--green); background: var(--bg-alt); transition: border-color 0.3s ease, background 0.3s ease; } .news-card:hover { background: var(--panel); border-left-color: var(--gold); } .news-card__inner { padding: clamp(1.5rem, 3vw, 2.2rem); } .news-card time { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; } .news-card h3 { margin-bottom: 0.6rem; } /* -- Kontakt ------------------------------------------------------------- */ .contact-line { display: flex; gap: 1rem; align-items: flex-start; padding: 0.9rem 0; border-bottom: 1px solid var(--line); color: var(--ink); } .contact-line:last-child { border-bottom: 0; } .contact-line svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; } .form-field { margin-bottom: 1.2rem; } .form-field label { display: block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.45rem; } .form-field input, .form-field textarea { width: 100%; background: rgba(0, 0, 0, 0.04); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 1rem; padding: 0.85rem 1rem; transition: border-color 0.25s ease, background 0.25s ease; } .form-field input:focus, .form-field textarea:focus { border-color: var(--gold); background: rgba(0, 0, 0, 0.07); outline: none; } .form-field textarea { resize: vertical; min-height: 130px; } .form-check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 1.4rem; } .form-check input { margin-top: 4px; accent-color: var(--green); } .form-note { font-size: 0.8rem; color: var(--ink-faint); margin-top: 1rem; } /* Honeypot gegen einfache Spam-Bots — für Menschen unsichtbar */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -- Karte mit Zwei-Klick-Einwilligung (DSGVO) --------------------------- */ .map-consent { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; text-align: center; padding: 2rem; } .map-consent p { font-size: 0.9rem; max-width: 42ch; margin-bottom: 1.2rem; } .map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -- Rechtstexte --------------------------------------------------------- */ .legal h2 { font-size: 1.25rem; margin: 2.4rem 0 0.7rem; color: var(--gold); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; } .legal p { margin-bottom: 1rem; } .legal p:last-child { margin-bottom: 0; } /* Der neue Datenschutztext bringt Aufzaehlungen und fette Lauftext- Ueberschriften mit, die die alten Rechtstexte nicht hatten. Punkte in Gold, damit die Listen zur Akzentfarbe der h2 passen. */ .legal ul { margin: 0 0 1rem 1.25rem; padding: 0; } .legal li { margin-bottom: 0.35rem; } .legal li::marker { color: var(--gold); } .legal p strong { color: var(--ink); font-weight: 600; } .legal .legal-stand { margin-top: 2.5rem; font-size: 0.9rem; color: var(--ink-faint); } /* ========================================================================== 7 · FOOTER ========================================================================== */ .site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); } .footer-brand { display: flex; align-items: center; gap: 0.9rem; } .footer-brand__logo { height: 3rem; width: auto; border-radius: 6px; flex-shrink: 0; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; } .footer-nav a { color: var(--ink-dim); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; } .footer-nav a:hover { color: var(--gold); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; font-size: 0.8rem; color: var(--ink-faint); } .footer-bottom__legal { display: flex; gap: 1.4rem; } .footer-bottom__legal a { color: var(--ink-faint); } .footer-bottom__legal a:hover { color: var(--gold); } /* Dritter Flex-Kind neben Copyright und Rechtslinks (space-between rückt es mittig ein) — gleiche unauffällige Farbe wie die Links daneben, nicht mehr golden. */ .footer-credit { color: var(--ink-faint); } .footer-credit a { color: var(--ink-faint); font-weight: 600; } .footer-credit a:hover { color: var(--gold); } /* ========================================================================== 8 · ANIMATIONSMUSTER Alle sechs Muster stammen aus unserer Technikbibliothek und werden in assets/js/main.js mit GSAP + ScrollTrigger angesteuert. ========================================================================== */ /* -- Muster 1 · Hero-Mosaik mit Zerstreu-Effekt -------------------------- Große Wortmarke, davor und dahinter verschachtelte Fotokacheln. Der Wechsel der z-index-Werte um den Wert der Wortmarke (55) herum erzeugt den "verwoben"-Eindruck. Beim Scrollen zerstreuen sich die Kacheln. */ .hero-mosaic { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; } .hero-mosaic__stage { position: absolute; inset: 0; margin: auto; width: 82vw; height: 42vw; } /* Die Wortmarke liegt über ALLEN Kacheln (deren z-index reicht bis 70). Der Name des Hauses darf nie von einem Foto angeschnitten werden — die Kacheln staffeln sich weiterhin untereinander in der Tiefe, ziehen aber ausnahmslos hinter der Schrift durch. */ .hero-mosaic__wordmark { position: absolute; inset: 0; margin: auto; height: 18vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vw; z-index: 100; pointer-events: none; text-align: center; } /* Weicher Schleier direkt hinter der Schrift. Ohne ihn steht helles Off-White auf hellen Bildpartien (Kegelbahn, Fensterfront) und wird unruhig — der Verlauf beruhigt genau den Bereich unter der Wortmarke, ohne die Fotos ringsum abzudunkeln. Bewusst schwach gehalten (kein kräftiger "Glow") und per --wordmark-glow an main.js gekoppelt: die Kacheln zerstreuen sich beim Scrollen, der Schleier blendet im selben Scroll-Abschnitt auf 0 aus, statt starr stehen zu bleiben. */ .hero-mosaic__wordmark::before { content: ''; position: absolute; inset: -7vw -12vw; z-index: -1; opacity: var(--wordmark-glow, 1); background: radial-gradient(ellipse at center, rgba(85, 4, 12, 0.42) 0%, rgba(85, 4, 12, 0.24) 45%, rgba(85, 4, 12, 0) 72%); } .hero-mosaic__word { font-family: var(--font-display); font-weight: 700; font-size: 13vw; line-height: 0.9; letter-spacing: -0.02em; /* Bleibt hell — sitzt über Fotos mit dunklem Scrim, tauscht deshalb nicht mit dem allgemeinen (jetzt dunklen) --ink um. */ color: var(--on-photo); white-space: nowrap; /* Eigene Glow-Quelle, unabhängig vom Schleier (::before) — muss dieselbe --wordmark-glow-Variable mitnehmen, sonst bleibt beim Ausblenden ein Rest-Glow um die Buchstaben stehen. */ text-shadow: 0 0 60px rgba(85, 4, 12, calc(0.55 * var(--wordmark-glow, 1))); } .hero-mosaic__sub { font-size: clamp(0.62rem, 0.9vw, 0.8rem); letter-spacing: 0.42em; text-transform: uppercase; color: var(--on-photo-accent); white-space: nowrap; } .m-tile { position: absolute; clip-path: inset(100%); transform: scale(1.8); will-change: clip-path, transform, opacity; } .m-tile__inner { width: 100%; height: 100%; overflow: hidden; } .m-tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(22%) brightness(0.82) contrast(1.05); } /* left-Werte in gleichmäßigen 10vw-Schritten, statt der ursprünglich wahllosen Abstände (mal 1vw, mal 14vw auseinander — das erzeugte den dichten Haufen) oder der zu weiten 13vw-Schritte danach (praktisch keine Überlappung mehr). Bei 10vw-Schritten überlappen benachbarte Kacheln durchgängig um 3–13vw — sichtbare Verschachtelung, aber gleichmäßig statt zufällig. Negative bzw. über 82vw hinausgehende Werte sind Absicht: left ist relativ zur unsichtbaren, zentrierten Bühne (82vw breit, 9vw Rand zum Viewport auf jeder Seite) — die Kacheln dürfen über diese Bühne hinausragen, geklippt wird erst am äußeren .hero-mosaic (siehe dessen overflow: hidden). */ .m-tile--01 { top: 11vw; left: -3vw; width: 21vw; height: 15vw; z-index: 60; } /* top per calc() statt reinem vw-Wert: die Kachel muss den Header (feste Höhe --header-h) zuverlässig frei lassen, unabhängig von der Fensterbreite. Ein reiner vw-Wert würde das nur bei einer einzigen Breite zufällig treffen — bei schmaleren Fenstern rutscht die Kachel sonst wieder unter den Header. Der Abstand danach (2rem) ist bewusst ebenfalls fest statt vw-basiert, damit die Lücke bei jeder Fensterbreite gleich groß bleibt, statt bei schmalen Fenstern wieder zusammenzuschrumpfen. */ .m-tile--02 { top: calc(var(--header-h) + 2rem); left: 7vw; width: 13vw; height: 8vw; z-index: 20; } .m-tile--03 { top: 8vw; left: 17vw; width: 15vw; height: 22vw; z-index: 10; } .m-tile--04 { top: 25vw; left: 27vw; width: 23vw; height: 12vw; z-index: 50; } /* Gleicher Grund wie bei m-tile--02: fester Abstand statt vw-Wert, damit die Kachel den Header bei jeder Fensterbreite zuverlässig frei lässt. */ .m-tile--05 { top: calc(var(--header-h) + 2rem); left: 37vw; width: 21vw; height: 13vw; z-index: 30; } .m-tile--06 { top: 22vw; left: 47vw; width: 20vw; height: 13vw; z-index: 70; } .m-tile--07 { top: 8vw; left: 57vw; width: 16vw; height: 17vw; z-index: 15; } .hero-mosaic__hint { position: absolute; bottom: 2.2rem; left: 0; right: 0; text-align: center; z-index: 80; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; /* War --on-photo-accent (hell) für Fotos gedacht — an dieser Position liegt der Hinweis aber oft auf der freien, hellen Seitenfläche zwischen den Kacheln, wo helle Schrift kaum zu lesen war. Jetzt dunkel, damit er überall sichtbar bleibt. */ color: var(--ink); } /* -- Kompakter Hero für Unterseiten -------------------------------------- */ .hero-compact { position: relative; min-height: 62vh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero-compact__bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; background-image: var(--hero-image); background-size: cover; background-position: center; filter: grayscale(25%) brightness(0.55); will-change: transform; z-index: 0; } .hero-compact::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(85,4,12,0.85) 0%, rgba(85,4,12,0.35) 45%, rgba(85,4,12,0.92) 100%); } .hero-compact .container { position: relative; z-index: 2; } .hero-compact__content { max-width: 720px; } .hero-compact__content p { margin-top: 1.2rem; font-size: clamp(1rem, 1.4vw, 1.15rem); } /* Sitzt über dem abgedunkelten Foto oben — bleibt hell, unabhängig vom allgemeinen (jetzt dunklen) Text auf der restlichen, hellen Seite. */ .hero-compact__content .eyebrow { color: var(--on-photo-accent); } .hero-compact__content h1 { color: var(--on-photo); } .hero-compact__content p { color: var(--on-photo); opacity: 0.85; } /* -- Muster 2 · Laufband / Marquee -------------------------------------- Zwei identische Textblöcke laufen als Einheit nach links; bei -50 % springt die Verschiebung unsichtbar auf 0 % zurück (nahtloser Loop). */ .marquee { overflow: hidden; padding: clamp(1.8rem, 3vw, 3rem) 0; background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee__track { display: flex; width: max-content; } .marquee__track span { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 6vw, 5.5rem); line-height: 1.1; color: rgba(85, 4, 12, 0.16); white-space: nowrap; padding-right: 3vw; } .marquee--gold .marquee__track span { color: rgba(244, 219, 115, 0.22); } /* --panel ist jetzt wieder hell (Beige-Familie) — der Klassenname passt damit wieder wörtlich. Text und Rahmen laufen im dunklen Text-Akzent (--gold-Rolle = --secondary), nicht mehr hell. */ .marquee--beige { background: var(--panel); border-color: rgba(122, 29, 38, 0.25); } .marquee--beige .marquee__track span { color: rgba(85, 4, 12, 0.75); } /* -- Muster 3 · Headline-Reihen, seitlich eingeschoben ------------------- Jede Überschrift startet außerhalb des sichtbaren Bereichs (links oder rechts) und gleitet einmalig an ihre Position, sobald die Zeile in den Sichtbereich kommt (main.js setzt dafür .is-visible auf .reveal-row, per IntersectionObserver — bewusst ohne GSAP, siehe Kommentar dort). .reveal-row hat overflow:hidden, das übernimmt das Ausblenden, solange die Zeile noch nicht in Position ist — kein separates Abdeck-Panel nötig. */ .reveal-rows { position: relative; padding: clamp(4rem, 8vw, 8rem) 0; overflow: hidden; } .reveal-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .reveal-row:first-of-type { border-top: 1px solid var(--line); } .reveal-row__link { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: clamp(0.6rem, 1.2vw, 1.2rem) 0; color: var(--ink); } .reveal-row h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6.5vw, 6.5rem); line-height: 1.05; letter-spacing: -0.02em; color: inherit; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease; /* Ausgangszustand: außerhalb der Zeile, links. Ohne JS (kein .is-visible möglich) bleibt dieser Wert bestehen — der