/* ========================================================================== GOLFO DI NAPOLI — Design-System (production-grade) Pizzeria Napoletana · Köln-Weiden Editoriales Gastro-Magazin · Ink/Cream-Kapitelwechsel · Gold-Faden -------------------------------------------------------------------------- INHALT 00 @font-face (8 self-hosted woff2, font-display:swap) 01 Design-Tokens (Custom Properties: Palette · Type · Space · Motion · Layer) 02 Reset & Base 03 Typografie-Utilities (Eyebrow, Lead, Headlines, Body) 04 Layout-Container & Sektions-Grundwechsel (Ink ↔ Cream) 05 Wortmarke (Split: "di Napoli" in Gold) 06 Header & Desktop-Navigation 07 Nav-Toggle & Mobile-Overlay-Nav 08 Buttons (primary / ghost / text / sm · Trailing-Icon) 09 Sticky-Reserve-Pill 10 Hero (Cinematic, Duoton-Wash) 11 Manifest (schmale Lese-Kolumne) 12 Speisekarte (editoriale Linien-Liste, Push-Hover) 13 Speisekarte-Seite (Kategorie-Subnav) 14 Heritage-Full-Bleed-Spread 15 Öffnungszeiten — Signatur-Gold-Block (Live-Heute) 16 Galerie — Magazine-Spread (12-col ungleich) 17 Media-Slots (Inline-SVG-Platzhalter "Foto folgt") 18 Reservieren / Bestellen — Embeds & Hairline-Layout 19 Map-Platzhalter 20 NAP-Block & Lese-Sektionen (Impressum/Datenschutz) 21 Footer 22 Reveal-Animationen (IntersectionObserver-Klassen) 23 Responsive (375 / 768 / 1024 / 1440 — mobile-first) 24 prefers-reduced-motion 25 Print ========================================================================== */ /* ========================================================================== 00 · @FONT-FACE — self-hosted (DSGVO, kein Google-CDN) Pfade relativ zu css/styles.css → ../assets/fonts/ ========================================================================== */ /* Fraunces — Editorial-Display (Sektions-Headlines, Hero). Variable opsz+wght. */ @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-var-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } /* Cormorant Garamond — Wortmarke (eleganter High-Contrast-Serif). Variable 300–700. */ @font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../assets/fonts/lora-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../assets/fonts/lora-400italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Lora"; src: url("../assets/fonts/lora-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Lora"; src: url("../assets/fonts/lora-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../assets/fonts/worksans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../assets/fonts/worksans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("../assets/fonts/worksans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Pinyon Script"; src: url("../assets/fonts/pinyon-script.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ========================================================================== 01 · DESIGN-TOKENS ========================================================================== */ :root { /* ===== PALETTE — Creme-Editorial + neapolitanisches Vietri-Blau (Signatur) ===== Anti-KI Fine-Dining. Basis Creme/Espresso, EIN Star-Akzent: Vietri-Blau (aus den echten Tellerfotos). Warme Stützfarben nur sparsam, nie Fließtext. */ --creme: #EFE4D4; /* Naturpapier warm — Carta di Napoli (Hassans Inspo 16.07.) */ --espresso: #33261A; /* Espresso-TINTE: Primär-Text — nie mehr #000 (Druckfarbe auf Papier) */ --paper: #FFFFFF; /* Signatur-Akzent = GOLD/Bronze (ersetzt Vietri-Blau). Token-Namen --blue* bleiben, damit der ganze Bestand ohne Find-Replace auf Gold kippt. */ --blue: #A5854F; /* Antik-Gold — NUR Linien/Script/Strokes, nie Flächenfüllung (kein Text!) */ --blue-deep: #75592C; /* Gold-Deep — Text-Gold auf Creme/Band (AA-fest) */ --blue-light: #96703C; /* Gold-Rich — Display-Akzente, CTA-Konturen (Hover #8A6228) */ --blue-soft: #E4D3C0; /* Papier-Stufe 2 — Zonen-Bänder statt Farbwechsel */ --wein: #7A2E3A; /* warme Stütze: Akzent-Headline möglich (8:1) */ --terrakotta: #B5502B; /* warme Stütze: Großschrift/Icons/Trenner — kein Body-Text */ --oliv: #48523E; /* Oliv-Tief — Stempel/Badge-Solitär (VERA-ITALIA-Prinzip) */ --ocker: #C68A3E; /* nur Flächen/Linien/Hover */ --grey: #6E6046; /* Meta/Caption auf Papier */ /* Alt-Token-Aliase → ganze Bestands-CSS kippt ohne Find-Replace auf die neue Palette */ --ink: #E4D3C0; /* DIE INVERSION: Ex-Dunkelflächen werden Papier-Bänder */ --cream: var(--creme); --gold: var(--blue); /* Akzent war Gold → jetzt Vietri-Blau */ --gold-deep: var(--blue-deep); --bordeaux: var(--wein); /* Fließtext-Farben pro Grund */ --text-on-ink: #33261A; /* Bänder sind hell -> Tinte darauf dunkel */ --text-on-cream: var(--espresso); --muted-on-ink: #6E6046; --muted-on-cream:#6B6256; /* Hairlines (grund-abhängig) */ --hairline-ink: rgba(51, 38, 26, 0.18); --hairline-cream: rgba(51, 38, 26, 0.14); --hairline-blue: rgba(184, 146, 74, 0.34); --gold-line: var(--blue); /* Duoton-Wash für Bild-Slots (Espresso mit Vietri-Blau-Tiefe statt Bordeaux) */ --wash-hero: linear-gradient(180deg, rgba(51,38,26,0.30) 0%, rgba(51,38,26,0.20) 55%, rgba(51,38,26,0.50) 100%); --wash-heritage: linear-gradient(0deg, rgba(51,38,26,0.62) 0%, rgba(51,38,26,0.18) 55%, rgba(51,38,26,0.38) 100%); /* --- Typografie-Familien --- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-wordmark: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-serif: "Lora", Georgia, "Times New Roman", serif; --font-ui: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-script: "Pinyon Script", "Cormorant Garamond", Georgia, cursive; /* --- Typo-Skala (clamp mobil → desktop) --- */ --fs-hero: clamp(3.4rem, 9vw, 6rem); --fs-display-xl: clamp(2.6rem, 6vw, 4.5rem); --fs-display: clamp(2rem, 4vw, 3rem); --fs-h2-serif: clamp(2.1rem, 4vw, 3.4rem); --fs-h3: clamp(1.15rem, 1.8vw, 1.4rem); --fs-lead: clamp(1.25rem, 2.4vw, 1.7rem); --fs-body: clamp(0.9375rem, 2vw, 1.0625rem); /* 15→17px (Mobile-Lesbarkeit) */ --fs-ui: 0.9375rem; /* 15px */ --fs-meta: 0.8125rem; /* 13px */ --fs-eyebrow: 0.75rem; /* 12px */ /* --- Spacing (8px-Basis) --- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --space-3xl: 128px; --space-4xl: 160px; /* Section-Padding-Varianten (NICHT uniform) */ --section-pad: clamp(64px, 9vw, 128px); --section-pad-manifest: clamp(96px, 12vw, 160px); --section-pad-teaser: clamp(64px, 8vw, 96px); --section-pad-reserve: clamp(64px, 7vw, 96px); --overlay-pad: clamp(40px, 7vw, 96px); /* --- Container --- */ --container: 1240px; --container-narrow: 780px; --container-wide: 1440px; --container-text: 68ch; --container-pad: clamp(24px, 5vw, 64px); /* --- Radius --- */ --radius-pill: 999px; --radius-sm: 10px; --radius-md: 16px; /* --- Motion --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 0.25s; --dur: 0.45s; --dur-slow: 0.7s; /* --- Layer --- */ --z-base: 1; --z-overlay: 50; --z-header: 100; --z-mobile-nav: 200; --z-sticky: 300; /* Header-Höhe für scroll-padding & sticky-Offsets */ --header-h: 76px; /* Duoton-Slot-Tiefen (Media-/Embed-Platzhalter auf dunklem Grund) */ --slot-dark: #E4D3C0; /* Media-Slot = Papier-Fenster statt Schwarz-Loch */ --slot-darkest: #D8C6AE; /* unterer Papier-Ton */ --embed-dark: #131313; /* Embed-Mount-Grund auf Ink */ /* Form-Fehlerfarben (Status-/Inline-Feedback) */ --error-on-ink: #8C2F39; /* gedämpftes Rot auf Espresso */ --error-on-cream: var(--wein); /* Wein als Fehlerton auf Creme (8:1) */ /* Print-Override-Töne (intentional hardcoded für Druck-Klarheit) */ --print-bg: #FFFFFF; --print-text: #000000; } /* ========================================================================== 02 · RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-md)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { background: var(--ink); color: var(--text-on-ink); font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.68; min-height: 100vh; /* KEIN overflow-x:hidden hier — macht body zum Scroll-Container und bricht position:sticky (Sticky-Galerie). Horizontalen Überlauf an der Quelle clippen. */ } /* Body-Lock wenn Mobile-Nav offen */ body.nav-open { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } p { text-wrap: pretty; } :where(h1, h2, h3, h4) { text-wrap: balance; } /* Sichtbare Fokus-Ringe (Tastatur) Default = dunkles Bronze (6,1:1 auf Creme) — Seiten-Grund ist hell. Auf dunklen Flächen (Ink-Sektionen, Header, Footer, Hero) heller Gold-Ton (~8:1). */ :focus-visible { outline: 2px solid #6E5629; outline-offset: 3px; border-radius: 2px; } .section--ink :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--blue-light); } /* Skip-Link — hart versteckt (clip-Pattern, übersteht transform-Resets), erscheint ausschließlich bei Tastatur-Fokus */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link:focus-visible { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 999; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; background: var(--espresso); color: var(--creme); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); padding: 0.7rem 1.2rem; border-radius: 2px; } /* Screenreader-only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } ::selection { background: var(--gold); color: var(--espresso); } /* ========================================================================== 03 · TYPOGRAFIE-UTILITIES ========================================================================== */ /* Eyebrow — EIN Brand-System, max. 1 pro Section, an Kapitel-Anfängen. Work-Sans-Caps in Gold mit vorangestelltem 24px-Goldstrich. */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.22em; color: var(--blue-light); /* Default = auf dunklem Espresso-Grund (hell genug) */ line-height: 1; } .eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: var(--blue-light); margin-right: 0.75rem; flex: 0 0 auto; } .eyebrow--bordeaux { color: var(--wein); } .eyebrow--bordeaux::before { background: var(--wein); } /* Auf hellem Creme → tiefes Vietri-Blau für sauberen Kontrast der Eyebrow-Caps */ .section--cream .eyebrow { color: var(--blue-deep); } .section--cream .eyebrow::before { background: var(--blue-deep); } /* Display / Headlines */ .display-hero { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero); line-height: 0.98; letter-spacing: 0.05em; text-transform: uppercase; } .display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xl); line-height: 1.02; letter-spacing: 0.055em; text-transform: uppercase; } .display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: 1.04; letter-spacing: 0.06em; text-transform: uppercase; } /* Editorial-Headlines jetzt in Cormorant (elegant, hoher Kontrast) statt Lora */ .headline { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2-serif); line-height: 1.06; letter-spacing: 0.005em; } /* Lead (Manifest) */ .lead { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; } .lead em, .lead .accent { font-style: italic; color: var(--bordeaux); } /* Auf Ink-Grund Lead-Akzent → Gold (Bordeaux zu dunkel) */ .section--ink .lead em, .section--ink .lead .accent { color: var(--blue-light); font-style: italic; } /* Fließtext-Block */ .prose { max-width: var(--container-text); font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.68; } .prose p + p { margin-top: 1.1em; } .prose a { color: inherit; border-bottom: 1px solid var(--gold); transition: color var(--dur-fast) var(--ease-out); } .section--cream .prose a { border-color: var(--bordeaux); } .prose a:hover { color: var(--bordeaux); } .section--ink .prose a:hover { color: var(--gold-text); } /* Meta / Caption */ .meta { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--muted-on-ink); } .section--cream .meta { color: var(--muted-on-cream); } /* Signierte Zeile (Manifest "Familie + Steinofen") */ .signature { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-body); color: var(--muted-on-cream); } .section--ink .signature { color: var(--muted-on-ink); } /* ========================================================================== 04 · LAYOUT-CONTAINER & SEKTIONS-GRUNDWECHSEL Kein Trennlinien-System — Rhythmus = Grundwechsel + Padding-Varianz. ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } /* Sektion-Grund-Toggle */ .section { padding-block: var(--section-pad); position: relative; } .section--ink { background: var(--ink); color: var(--text-on-ink); } .section--cream { background: var(--cream); color: var(--text-on-cream); } /* Padding-Varianten (impeccable: vary spacing) */ .section--manifest { padding-block: var(--section-pad-manifest); } .section--teaser { padding-block: var(--section-pad-teaser); } .section--reserve { padding-block: var(--section-pad-reserve); } .section--flush-bottom { padding-bottom: 0; } .section--flush { padding-block: 0; } /* Sektions-Kopf (Eyebrow → Headline → Lead Rhythmus) */ .section-head { max-width: var(--container-text); } .section-head .eyebrow + .headline, .section-head .eyebrow + .display, .section-head .eyebrow + .display-xl { margin-top: var(--space-md); } .section-head .headline + .lead, .section-head .display-xl + .lead, .section-head .display + .lead { margin-top: var(--space-lg); } .section-head--center { margin-inline: auto; text-align: center; } /* ========================================================================== 05 · WORTMARKE (Split: "Golfo" + "di Napoli" in Gold) Ein-span-tauschbar für späteren Logo-Tausch. ========================================================================== */ .wordmark { display: inline-flex; flex-direction: column; line-height: 0.92; font-family: var(--font-wordmark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-on-ink); transition: opacity var(--dur-fast) var(--ease-out); } .section--cream .wordmark, .wordmark--on-cream { color: var(--espresso); } .wordmark__line { font-size: clamp(1.5rem, 2.4vw, 1.85rem); display: block; } .wordmark__accent { font-size: clamp(0.95rem, 1.6vw, 1.15rem); color: var(--gold-text); display: block; letter-spacing: 0.06em; } .wordmark:hover { opacity: 0.85; } /* --- Kopfzeilen-Marke: das Emblem statt der gesetzten Wortmarke ----------- Kundenwunsch 08.08.: „Wir haben ja oben links so eine Schrift von GOLFO di NAPOLI, und da soll einfach das Logo hin." Fassung: die freigestellte Druckfassung. Die Gold-auf-Schwarz-Variante bringt ihre eigene schwarze Ellipse mit und säße als Fleck auf dem hellen Papierband der Leiste (--ink ist seit der Carta-Umstellung #E4D3C0, kein dunkler Ton). „druck" statt „hell", weil sie kräftigere Mindeststriche hat und bei rund 50 px Höhe deutlich standfester steht. Größe: das Oval ist 1,34-mal so breit wie hoch. Bei 52 px sind das 70 px Breite — schmaler als die getippte Wortmarke vorher (90 px), das enge mobile Breitenbudget bleibt also unangetastet. Der Kunde weiß, dass die Krone „TRATTORIA" in dieser Größe als Textur liest, nicht als Schrift (Versalhöhe 3,7 % der Logohöhe), und hat sich bewusst dafür entschieden. */ .brandmark { display: inline-flex; align-items: center; flex: 0 0 auto; /* Ausgleich für die auslaufende Ovalflanke — optisch bündig mit dem Textsatz darunter, nicht mathematisch. */ margin-left: -3px; transition: opacity var(--dur-fast) var(--ease-out); } .brandmark img { display: block; width: auto; height: clamp(46px, 5.4vw, 58px); } .brandmark:hover { opacity: 0.85; } /* Hero-Variante (riesig) */ .wordmark--hero { line-height: 0.84; color: var(--text-on-ink); } .wordmark--hero .wordmark__line { font-size: var(--fs-hero); } .wordmark--hero .wordmark__accent { /* Verhältnis Line:Accent auf ~1,4 austariert (mobil 54:38, optisch ausgewogen) */ font-size: clamp(2.2rem, 5.5vw, 3rem); letter-spacing: 0.08em; color: var(--blue-light); /* "di Napoli" auf dunklem Hero-Foto */ } /* Footer-Variante */ .wordmark--footer .wordmark__line { font-size: 1.7rem; } .wordmark--footer .wordmark__accent { font-size: 1.05rem; color: var(--blue-light); } /* ========================================================================== 06 · HEADER & DESKTOP-NAVIGATION ========================================================================== */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--ink) 88%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--hairline-ink); transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } /* Header über Cream-Hero / nach Scroll fester */ .site-header[data-scrolled="true"] { background: color-mix(in srgb, var(--ink) 96%, transparent); } .site-header__inner { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--container-pad); min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } /* Desktop-Nav */ .site-nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.2rem); } .site-nav__link { position: relative; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); letter-spacing: 0.01em; color: var(--text-on-ink); padding-block: 0.4rem; transition: color var(--dur-fast) var(--ease-out); } /* Wachsende Gold-Unterstreichung von links */ .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .site-nav__link:hover { color: var(--gold-text); } .site-nav__link:hover::after { transform: scaleX(1); } /* Aktiver Punkt (data-nav-current Match via aria-current) */ .site-nav__link[aria-current="page"] { color: var(--gold-text); } .site-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .site-header__actions { display: flex; align-items: center; gap: var(--space-sm); } /* ========================================================================== 07 · NAV-TOGGLE & MOBILE-OVERLAY-NAV ========================================================================== */ .nav-toggle { display: none; /* nur < 1024px sichtbar */ position: relative; width: 44px; height: 44px; border-radius: var(--radius-sm); flex-direction: column; align-items: center; justify-content: center; gap: 6px; z-index: calc(var(--z-mobile-nav) + 1); } .nav-toggle__bar { display: block; width: 24px; height: 1.5px; background: var(--text-on-ink); border-radius: 2px; transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } /* Hamburger → X */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); background: var(--espresso); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); background: var(--espresso); } /* Mobile-Overlay-Nav */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-mobile-nav); background: var(--ink); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xl); padding: clamp(2rem, 8vw, 4rem) var(--container-pad); opacity: 0; visibility: hidden; transform: translateY(-1.5%); transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .mobile-nav[hidden] { display: flex; } /* JS togglet .is-open statt hidden-Attr */ .mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-md); } .mobile-nav__list a { display: inline-block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(2rem, 9vw, 3rem); line-height: 1; color: var(--text-on-ink); /* Stagger-Start (JS setzt .is-open am Container) */ opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out); } .mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: translateY(0); } /* gestaffelte Delays */ .mobile-nav.is-open .mobile-nav__list li:nth-child(1) a { transition-delay: 0.06s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(2) a { transition-delay: 0.13s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(3) a { transition-delay: 0.20s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(4) a { transition-delay: 0.27s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(5) a { transition-delay: 0.34s; } .mobile-nav.is-open .mobile-nav__list li:nth-child(6) a { transition-delay: 0.41s; } .mobile-nav__list a:hover, .mobile-nav__list a[aria-current="page"] { color: var(--gold-text); } .mobile-nav__tel { font-family: var(--font-ui); font-weight: 600; font-size: 1.25rem; color: var(--gold-text); letter-spacing: 0.02em; opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: 0.48s; } .mobile-nav.is-open .mobile-nav__tel { opacity: 1; transform: translateY(0); } /* ========================================================================== 08 · BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-ui); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1; padding: 1rem 1.9rem; border-radius: 2px; border: 1px solid transparent; white-space: nowrap; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); will-change: transform; } .btn:active { transform: scale(0.98); } /* Primary (Gold) */ .btn--primary { background: var(--gold); color: var(--espresso); } .btn--primary:hover { transform: translateY(-1px); background: #A5813F; } .btn--primary:focus-visible { outline: 2px solid #6E5629; outline-offset: 2px; } /* Ghost (auf Ink) */ .btn--ghost { background: transparent; border-color: var(--hairline-cream); color: var(--espresso); } .btn--ghost:hover { border-color: var(--gold-text); color: var(--gold-text); transform: translateY(-2px); } /* Ghost auf Cream */ .section--cream .btn--ghost { border-color: var(--hairline-cream); color: var(--espresso); } .section--cream .btn--ghost:hover { border-color: var(--bordeaux); color: var(--bordeaux); } /* Small (Header) */ .btn--sm { padding: 0.6rem 1.1rem; font-size: 0.875rem; } /* Text-Button ("Ganze Karte ansehen →") mit wachsender Gold-Linie */ .btn--text { display: inline-flex; align-items: center; gap: 0.5rem; position: relative; padding: 0.4rem 0; font-family: var(--font-ui); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.14em; color: inherit; background: none; border: none; border-radius: 0; } .btn--text::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .btn--text:hover::after { transform: scaleX(1); } .btn--text .btn__arrow { transition: transform var(--dur) var(--ease-out); } .btn--text:hover .btn__arrow { transform: translateX(3px); } /* Trailing-Pfeil — nackt, kein Icon-Kreis (Editorial-Linie statt App-Pille) */ .btn__icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; transition: transform var(--dur) var(--ease-out); } .btn--primary:hover .btn__icon { transform: translateX(3px); } .btn__icon svg { width: 12px; height: 12px; } /* Button-Reihe (NIE zwei fette nebeneinander im Hero — nur sekundär-Kontexte) */ .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } /* ========================================================================== 09 · STICKY-RESERVE-PILL (Hero-Ersatz für Doppel-CTA) Erscheint per IntersectionObserver nach Hero-Austritt. ========================================================================== */ .reserve-pill { position: fixed; bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: 0.7rem; background: var(--gold); color: var(--espresso); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); padding: 0.85rem 1.3rem; border-radius: var(--radius-pill); box-shadow: 0 8px 30px rgba(10, 10, 10, 0.25); /* Start: versteckt, slidet rein — visibility verhindert Tab-Fokus im unsichtbaren Zustand */ opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } .reserve-pill[hidden] { display: none; } .reserve-pill.is-visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s; } .reserve-pill__tel { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--espresso) 12%, transparent); color: var(--espresso); transition: background-color var(--dur-fast) var(--ease-out); } .reserve-pill__tel:hover { background: color-mix(in srgb, var(--espresso) 22%, transparent); } .reserve-pill__tel svg { width: 16px; height: 16px; } .reserve-pill__label { line-height: 1; } /* ========================================================================== 10 · HERO (Cinematic, ~90vh, Duoton-Wash) ========================================================================== */ .hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end; padding: 0; background: var(--ink); overflow: hidden; isolation: isolate; } /* Bild-/Slot-Layer */ .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media .media-slot { width: 100%; height: 100%; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Duoton-Wash über Bild (Bebas-Weiß & Gold bleiben AA) */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash-hero); pointer-events: none; } .hero__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); padding-bottom: clamp(4rem, 12vh, 8rem); padding-top: clamp(6rem, 14vh, 9rem); } .hero .eyebrow { color: var(--blue-light); } .hero .eyebrow::before { background: var(--blue-light); } .hero h1 { margin-top: var(--space-md); } .hero__lead { /* Mobile etwas breiter (sonst nur 3–4 Worte/Zeile), Desktop bei 46ch gedeckelt */ max-width: clamp(35ch, 100%, 46ch); margin-top: var(--space-lg); color: var(--text-on-ink); } /* Hero auf Schmal-Viewports niedriger → schneller Scroll zum Inhalt */ @media (max-width: 600px) { .hero { min-height: 70vh; } } /* Scroll-Cue (dezent, kein Doppel-CTA) */ .hero__cue { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--space-xl); font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-ink); } .hero__cue-line { display: inline-block; width: 1px; height: 2.4rem; background: linear-gradient(180deg, var(--gold), transparent); animation: cue-pulse 2.4s var(--ease-soft) infinite; } @keyframes cue-pulse { 0%, 100% { opacity: 0.4; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } } /* ========================================================================== 11 · MANIFEST (schmale zentrierte Lese-Kolumne) ========================================================================== */ .manifest { text-align: center; } .manifest .lead { margin-inline: auto; max-width: 32ch; } .manifest .signature { margin-top: var(--space-lg); display: inline-block; } .manifest .eyebrow { margin-bottom: var(--space-lg); /* zentriert: Strich-Pseudo lässt inline-flex zu */ } /* ========================================================================== 12 · SPEISEKARTE — editoriale Linien-Liste (KEINE Cards) + Push-Hover ========================================================================== */ .menu-list { margin-top: var(--space-xl); } .menu-list__intro { margin-bottom: var(--space-lg); max-width: var(--container-text); } .menu-item { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--space-lg); padding-block: var(--space-md); padding-inline: var(--space-2xs); border-bottom: 1px solid var(--hairline-cream); transition: background-color var(--dur) var(--ease-out); } .section--ink .menu-item { border-bottom-color: var(--hairline-ink); } /* stiller Hover — warmer Gold-Hauch, keine Layout-Bewegung */ .menu-item:hover, .menu-item:focus-within { background-color: rgba(184, 146, 74, 0.05); } .section--ink .menu-item:hover, .section--ink .menu-item:focus-within { background-color: rgba(212, 184, 150, 0.06); } /* Foto-Speisekarte: Bild je Gericht */ .menu-item--with-image { grid-template-columns: clamp(76px, 9vw, 104px) 1fr auto; align-items: center; column-gap: var(--space-md); } .menu-item__image { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: rgba(0, 0, 0, 0.05); } .menu-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .menu-item--with-image:hover .menu-item__image img { transform: scale(1.05); } @media (max-width: 600px) { .menu-item--with-image { grid-template-columns: 64px 1fr auto; column-gap: var(--space-sm); } } @media (max-width: 375px) { .menu-item--with-image { grid-template-columns: 50px 1fr auto; } } .menu-item__body { min-width: 0; } .menu-item__name { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; transition: color var(--dur) var(--ease-out); } .menu-item:hover .menu-item__name, .menu-item:focus-within .menu-item__name { color: var(--bordeaux); } .section--ink .menu-item:hover .menu-item__name, .section--ink .menu-item:focus-within .menu-item__name { color: var(--gold-text); } .menu-item__desc { margin-top: 0.35rem; font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--muted-on-cream); } .section--ink .menu-item__desc { color: var(--muted-on-ink); } .menu-item__price { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-h3); font-variant-numeric: tabular-nums; white-space: nowrap; color: inherit; } /* optionale Tags (z.B. "vegetarisch") */ .menu-item__tag { display: inline-block; margin-left: 0.6rem; font-family: var(--font-ui); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bordeaux); vertical-align: middle; } .section--ink .menu-item__tag { color: var(--gold-text); } /* Teaser-Footer (Text-Button "Ganze Karte ansehen") */ .menu-teaser__cta { margin-top: var(--space-xl); } /* ========================================================================== 13 · SPEISEKARTE-SEITE — Kategorie-Subnav (sticky, KEIN Tab-Schema) ========================================================================== */ .menu-page__header { padding-bottom: var(--section-pad-teaser); } .category-nav { position: sticky; top: var(--header-h); z-index: var(--z-overlay); background: color-mix(in srgb, var(--cream) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline-cream); } .category-nav__list { display: flex; gap: clamp(1rem, 3vw, 2rem); overflow-x: auto; scrollbar-width: none; padding: var(--space-md) var(--container-pad); max-width: var(--container); margin-inline: auto; } .category-nav__list::-webkit-scrollbar { display: none; } .category-nav__link { position: relative; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); letter-spacing: 0.04em; color: var(--muted-on-cream); white-space: nowrap; padding-block: 0.3rem; transition: color var(--dur-fast) var(--ease-out); } .category-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .category-nav__link:hover, .category-nav__link.is-active { color: var(--espresso); } .category-nav__link.is-active::after { transform: scaleX(1); } /* Kategorie-Sektion */ .menu-category { scroll-margin-top: calc(var(--header-h) + 4rem); } .menu-category__title { font-family: var(--font-display); font-size: var(--fs-display); letter-spacing: 0.02em; text-transform: uppercase; } .menu-category__intro { margin-top: var(--space-md); max-width: var(--container-text); color: var(--muted-on-cream); font-style: italic; } .section--ink .menu-category__intro { color: var(--muted-on-ink); } /* ========================================================================== 14 · HERITAGE — Full-Bleed-Spread (Text-Overlay über Gradient) ========================================================================== */ .heritage { position: relative; min-height: 70vh; display: flex; align-items: flex-end; padding: 0; background: var(--ink); overflow: hidden; isolation: isolate; } .heritage__media { position: absolute; inset: 0; z-index: -2; } .heritage__media .media-slot { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .heritage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wash-heritage); pointer-events: none; } .heritage__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--overlay-pad) var(--container-pad); color: var(--text-on-ink); } .heritage__inner .eyebrow { color: var(--blue-light); } .heritage__inner .eyebrow::before { background: var(--blue-light); } .heritage__title { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--fs-display-xl); letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.96; } .heritage__text { max-width: 54ch; margin-top: var(--space-md); color: var(--text-on-ink); } /* ========================================================================== 15 · ÖFFNUNGSZEITEN — Signatur-Gold-Block (Live-Heute) ========================================================================== */ .hours { background: var(--ink); color: var(--text-on-ink); border: 1px solid var(--gold-line); border-radius: var(--radius-md); padding: clamp(1.75rem, 4vw, 2.75rem); } .hours__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); } .hours__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-text); } .hours-list { display: block; } .hours-list > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-md); padding-block: 0.6rem; border-bottom: 1px solid var(--hairline-ink); } .hours-list > div:last-child { border-bottom: 0; } .hours-list dt { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); letter-spacing: 0.04em; } .hours-list dd { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; color: var(--text-on-ink); } /* Ruhetag — sichtbar gedämpft */ .hours-list .is-closed dt, .hours-list .is-closed dd { color: var(--muted-on-ink); } .hours-list .is-closed dd { font-style: italic; } /* Heutiger Tag — Gold-Hervorhebung + Punkt (JS setzt .is-today via [data-day]) */ .hours-list .is-today { position: relative; padding-left: 1.1rem; } .hours-list .is-today dt, .hours-list .is-today dd { color: var(--gold-text); } .hours-list .is-today::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); } /* Ruhetag bleibt auch als "heute" gedämpft (ehrlich) */ .hours-list .is-today.is-closed dt, .hours-list .is-today.is-closed dd { color: var(--grey); } /* Auf Creme-Grund (z.B. reservieren.html): dunkle Text-Farben statt Off-White — sonst sind die Zeiten auf hellem Grund praktisch unsichtbar (Kontrast-Bug) */ .section--cream .hours-list dt { color: var(--text-on-cream); } .section--cream .hours-list dd { color: rgba(30, 30, 31, 0.78); } .section--cream .hours-list > div { border-bottom-color: var(--hairline-cream); } .section--cream .hours-list .is-closed dt, .section--cream .hours-list .is-closed dd { color: var(--muted-on-cream); } .section--cream .hours-list .is-today dt, .section--cream .hours-list .is-today dd { color: var(--blue-deep); } .section--cream .hours-list .is-today::before { background: var(--blue-deep); } .section--cream .hours-list .is-today.is-closed dt, .section--cream .hours-list .is-today.is-closed dd { color: var(--muted-on-cream); } /* NAP-Teaser neben/unter Hours */ .hours-block { display: grid; gap: var(--space-xl); align-items: start; } /* ========================================================================== 16 · GALERIE — Magazine-Spread (12-col, ungleiche Spans) ========================================================================== */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(8px, 1.5vw, 16px); margin-top: var(--space-xl); } .gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); isolation: isolate; } .gallery__item .media-slot, .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-soft); } .gallery__item:hover .media-slot, .gallery__item:hover img { transform: scale(1.03); } /* Gold-Hairline-Frame (fade-in bei Hover) */ .gallery__item::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: calc(var(--radius-sm) - 4px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); z-index: 2; } .gallery__item:hover::after { opacity: 1; } /* Ungleicher Spread (Desktop) — variable aspect-ratios */ .gallery__item--a { grid-column: 1 / 8; aspect-ratio: 16 / 10; } .gallery__item--b { grid-column: 8 / 13; aspect-ratio: 4 / 5; } .gallery__item--c { grid-column: 1 / 5; aspect-ratio: 1 / 1; } .gallery__item--d { grid-column: 5 / 13; aspect-ratio: 16 / 9; } .gallery__item--e { grid-column: 1 / 6; aspect-ratio: 4 / 5; } .gallery__item--f { grid-column: 6 / 13; aspect-ratio: 3 / 2; } /* ========================================================================== 17 · MEDIA-SLOTS — Inline-SVG-Platzhalter "Foto folgt" Warmer Duoton (Ink → Bordeaux → Gold-Andeutung). 1:1 tauschbar gegen gleicher Ratio. ========================================================================== */ .media-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; height: 100%; background: radial-gradient(120% 100% at 70% 20%, rgba(0,0,0,0.40) 0%, transparent 55%), radial-gradient(80% 80% at 20% 90%, rgba(143,182,218,0.10) 0%, transparent 50%), linear-gradient(160deg, var(--slot-dark) 0%, var(--slot-darkest) 100%); color: var(--muted-on-ink); overflow: hidden; } .media-slot__glyph { width: clamp(36px, 6vw, 56px); height: auto; color: var(--gold-text); opacity: 0.8; } .media-slot__label { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-ink); text-align: center; padding-inline: 1rem; } .media-slot__date { display: block; margin-top: 0.25rem; color: var(--gold-text); font-size: 0.7rem; letter-spacing: 0.16em; } /* feine Gold-Hairline innen (premium-Anmutung) */ .media-slot::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(143, 182, 218, 0.20); border-radius: 4px; pointer-events: none; } /* ========================================================================== 18 · RESERVIEREN / BESTELLEN — Embeds & Hairline-Layout ========================================================================== */ /* Hairline-Split-Layout (NICHT Doppel-Card) */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 768px) { .split--2 { grid-template-columns: 1.15fr 0.85fr; } } .split__col + .split__col { position: relative; } /* Hairline-Trenner zwischen Spalten (Desktop) */ @media (min-width: 768px) { .split--2.split--divided .split__col:first-child { padding-right: clamp(2rem, 4vw, 3.5rem); } .split--2.split--divided .split__col:last-child { padding-left: clamp(2rem, 4vw, 3.5rem); border-left: 1px solid var(--hairline-cream); } .section--ink .split--2.split--divided .split__col:last-child { border-left-color: var(--hairline-ink); } } /* Embed-Mount (resmio / GloriaFood) — lazy via IO, Skeleton-Shimmer */ .embed-mount { position: relative; min-height: 420px; border-radius: var(--radius-md); border: 1px solid var(--hairline-cream); overflow: hidden; background: color-mix(in srgb, var(--cream) 96%, var(--ink)); } .section--ink .embed-mount { border-color: var(--hairline-ink); background: var(--embed-dark); } /* Skeleton-Shimmer bis JS lädt */ .embed-mount:not(.is-loaded)::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 20%, color-mix(in srgb, var(--gold) 8%, transparent) 50%, transparent 80% ); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } .embed-mount:not(.is-loaded)::after { content: "Wird geladen …"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-cream); } .section--ink .embed-mount:not(.is-loaded)::after { color: var(--muted-on-ink); } .embed-mount.is-loaded::before, .embed-mount.is-loaded::after { display: none; content: none; animation: none; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* tel-Fallback-Block (immer sichtbar über jedem Embed) */ .tel-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md) 0; margin-bottom: var(--space-lg); border-top: 1px solid var(--hairline-cream); border-bottom: 1px solid var(--hairline-cream); } .section--ink .tel-fallback { border-color: var(--hairline-ink); } .tel-fallback__text { font-family: var(--font-serif); font-size: var(--fs-body); } .tel-fallback__num { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--bordeaux); transition: color var(--dur-fast) var(--ease-out); } .section--ink .tel-fallback__num { color: var(--gold-text); } /* Icon folgt der Link-Farbe → klarere CTA-Affordance bei Hover */ .tel-fallback__num svg { transition: color var(--dur-fast) var(--ease-out); } .tel-fallback__num:hover svg { color: var(--bordeaux); } .section--ink .tel-fallback__num:hover svg { color: var(--gold-text); } .tel-fallback__num:hover { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== 19 · MAP-PLATZHALTER (statisches SVG + Maps-Links, KEIN iframe) ========================================================================== */ .map { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--hairline-cream); background: var(--ink); aspect-ratio: 16 / 9; } .section--ink .map { border-color: var(--hairline-ink); } .map svg { width: 100%; height: 100%; display: block; } .map__pin { color: var(--gold-text); } .map__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } /* ========================================================================== 20 · NAP-BLOCK & LESE-SEKTIONEN (Impressum / Datenschutz) ========================================================================== */ /* NAP (Name/Adresse/Telefon — pixelgleich überall) */ .nap { display: grid; gap: var(--space-md); } .nap__group {} .nap__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-text); margin-bottom: 0.4rem; } .section--cream .nap__label { color: var(--blue-deep); } .nap__value { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.5; font-style: normal; } .nap__value a { transition: color var(--dur-fast) var(--ease-out); } .nap__value a:hover { color: var(--bordeaux); } .section--ink .nap__value a:hover { color: var(--gold-text); } /* Brotkrümel-Navigation (Lese-Seiten) */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: var(--container-narrow); margin: 0 auto var(--space-lg); font-family: var(--font-ui); font-size: var(--fs-meta); letter-spacing: 0.02em; } .section--cream .breadcrumb { color: var(--muted-on-cream); } .breadcrumb a { color: var(--blue); transition: color var(--dur-fast) var(--ease-out); } .breadcrumb a:hover { color: var(--bordeaux); } .breadcrumb [aria-current="page"] { color: var(--espresso); } .breadcrumb span[aria-hidden="true"] { color: var(--gold-text); } /* Lese-Sektion (Impressum/Datenschutz) — schmal, Lora-Body */ .legal { max-width: var(--container-narrow); margin-inline: auto; } .legal h1 { font-family: var(--font-display); font-size: var(--fs-display); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: var(--space-lg); } .legal h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; margin-top: var(--space-xl); margin-bottom: var(--space-sm); } .legal p, .legal li { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.7; } .legal p + p { margin-top: 1em; } .legal ul { list-style: disc; padding-left: 1.4rem; margin-top: 0.6rem; } .legal li { margin-top: 0.3rem; } .legal a { border-bottom: 1px solid var(--bordeaux); transition: color var(--dur-fast) var(--ease-out); } .legal a:hover { color: var(--bordeaux); } .legal address { font-style: normal; } /* Hervorgehobener Hinweis (z.B. § 19 UStG) */ .callout { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 1px solid var(--hairline-blue); background: color-mix(in srgb, var(--gold) 7%, transparent); font-family: var(--font-serif); font-size: var(--fs-body); } .section--ink .callout { border-color: var(--hairline-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); } /* Inline-Code / Dateiname-Literale in Lese-Sektionen */ .legal code, .callout code { font-family: Menlo, "Courier New", monospace; font-size: 0.92em; background: color-mix(in srgb, var(--gold) 8%, transparent); padding: 0.12em 0.38em; border-radius: var(--radius-sm); color: var(--blue-deep); } /* ========================================================================== 21 · FOOTER ========================================================================== */ .site-footer { background: var(--ink); color: var(--text-on-ink); border-top: 1px solid var(--hairline-ink); padding-top: var(--section-pad); } .site-footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); display: grid; gap: var(--space-xl); grid-template-columns: 1fr; } .site-footer__brand .wordmark { margin-bottom: var(--space-md); } .site-footer__tagline { font-family: var(--font-serif); font-style: italic; color: var(--muted-on-ink); max-width: 38ch; } .site-footer__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-text); margin-bottom: var(--space-sm); } .site-footer__nap { font-style: normal; } .site-footer__nap p { font-family: var(--font-serif); line-height: 1.5; } .site-footer__nap p + .site-footer__label { margin-top: var(--space-md); } .site-footer__nap a { transition: color var(--dur-fast) var(--ease-out); } .site-footer__nap a:hover { color: var(--gold-text); } /* Footer-Öffnungszeiten (kompakte hours-list) */ .hours-list--footer > div { grid-template-columns: 2.5rem 1fr; padding-block: 0.35rem; border-bottom: 1px solid var(--hairline-ink); font-family: var(--font-ui); font-size: var(--fs-meta); } .hours-list--footer dt { color: var(--muted-on-ink); font-weight: 500; } .hours-list--footer dd { font-variant-numeric: tabular-nums; } .hours-list--footer .is-today dt, .hours-list--footer .is-today dd { color: var(--gold-text); } .hours-list--footer .is-today { padding-left: 0.9rem; } .hours-list--footer .is-today::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); } .hours-list--footer .is-closed dt, .hours-list--footer .is-closed dd { color: var(--muted-on-ink); font-style: italic; } .site-footer__nav ul { display: grid; gap: 0.5rem; } .site-footer__nav a { font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--text-on-ink); transition: color var(--dur-fast) var(--ease-out); } .site-footer__nav a:hover { color: var(--gold-text); } .site-footer__ig { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-ui); font-size: var(--fs-ui); color: var(--text-on-ink); transition: color var(--dur-fast) var(--ease-out); } .site-footer__ig:hover { color: var(--gold-text); } /* Footer-Bar (Copy / Legal / Tax) */ .site-footer__bar { max-width: var(--container); margin-inline: auto; margin-top: var(--section-pad); padding: var(--space-lg) var(--container-pad); border-top: 1px solid var(--hairline-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); } .site-footer__bar p { font-family: var(--font-ui); font-size: var(--fs-meta); color: var(--muted-on-ink); } .site-footer__legal { display: inline-flex; align-items: center; gap: 0.5rem; } .site-footer__legal a { transition: color var(--dur-fast) var(--ease-out); } .site-footer__legal a:hover { color: var(--gold-text); } .site-footer__tax { flex-basis: 100%; } /* ========================================================================== 22 · REVEAL-ANIMATIONEN (IntersectionObserver setzt .is-in) WICHTIG: Inhalt startet SICHTBAR — Reveal nur als Enhancement. Kein opacity:0-Blank-Render (Headless/PDF-konform). ========================================================================== */ /* Default sichtbar; Reveal-Enhancement nur wenn JS .reveal-ready am setzt. Markup: [data-reveal] auf jedem Element; optional [data-reveal-group] als Stagger-Container (JS setzt transition-delay per Kind-Index inline). */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: transform, opacity; } .reveal-ready [data-reveal].is-in { opacity: 1; transform: translateY(0); will-change: auto; } /* ========================================================================== 23 · RESPONSIVE (mobile-first; Breakpoints 768 / 1024 / 1440) ========================================================================== */ /* --- < 1024px: Mobile-/Tablet-Navigation aktiv --- */ @media (max-width: 1023.98px) { .site-nav { display: none; } .site-header__actions .site-header__order { display: none; } .nav-toggle { display: inline-flex; } /* Galerie → 1-Spalte-Stack, gleiche Reihenfolge */ .gallery { grid-template-columns: 1fr; } .gallery__item { grid-column: 1 / -1 !important; aspect-ratio: 4 / 3 !important; } } /* --- ≥ 768px: Tablet-Aufweitungen --- */ @media (min-width: 768px) { .hours-block { grid-template-columns: 1fr; } .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; grid-template-areas: "brand nap hours" "brand nav social"; column-gap: var(--space-2xl); row-gap: var(--space-xl); } .site-footer__brand { grid-area: brand; } .site-footer__nap { grid-area: nap; } .site-footer__hours { grid-area: hours; } .site-footer__nav { grid-area: nav; } .site-footer__social { grid-area: social; } } /* --- ≥ 1024px: Desktop-Nav, Hours neben NAP --- */ @media (min-width: 1024px) { .nav-toggle { display: none; } .site-nav { display: block; } .hours-block { grid-template-columns: 0.9fr 1.1fr; } } /* --- ≥ 1440px: großzügigere Lese-Achse --- */ @media (min-width: 1440px) { :root { --header-h: 84px; } } /* --- Sehr schmal (375px) — Pill & Buttons kompakter --- */ @media (max-width: 420px) { .reserve-pill { left: 0.75rem; right: 0.75rem; justify-content: space-between; } .reserve-pill__label { font-size: 0.875rem; } .btn { padding: 0.8rem 1.3rem; } .menu-item { column-gap: var(--space-md); } .site-footer__bar { flex-direction: column; align-items: flex-start; } } /* ========================================================================== 24 · prefers-reduced-motion — alles instant / nur kurze opacity ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Reveal: sofort sichtbar, kein translate */ .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Sticky-Pill sofort sichtbar (kein Slide) */ .reserve-pill { transition: opacity 0.12s linear !important; transform: none !important; } .reserve-pill.is-visible { transform: none !important; } /* Speisekarte-Push deaktiviert — nur Farbwechsel bleibt */ /* Galerie kein Scale */ .gallery__item:hover .media-slot, .gallery__item:hover img { transform: none !important; } /* Scroll-Cue Puls aus */ .hero__cue-line { animation: none !important; opacity: 0.7; } /* Mobile-Nav-Links ohne Stagger-Transform */ .mobile-nav.is-open .mobile-nav__list a, .mobile-nav.is-open .mobile-nav__tel { transform: none !important; transition-delay: 0s !important; } } /* ========================================================================== 25 · PRINT ========================================================================== */ @media print { .site-header, .mobile-nav, .nav-toggle, .reserve-pill, .hero__cue, .embed-mount { display: none !important; } body { background: var(--print-bg); color: var(--print-text); } .section--ink, .section--cream, .hours, .heritage { background: var(--print-bg) !important; color: var(--print-text) !important; } .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } a { color: var(--print-text); text-decoration: underline; } } /* ========================================================================== 26 · INDEX-KOMPONENTEN — Trust-Zeile & Highlights (Signature-Karten) Erben Tokens aus 01. Genutzt auf index.html (Trust unter Hero, Highlights). ========================================================================== */ /* --- Trust-Zeile (kompakte 4-Zellen-Leiste auf Ink, unter dem Hero) --- */ .trust { padding-block: clamp(40px, 5vw, 64px); } .trust__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg) var(--space-2xl); } .trust__cell { display: flex; flex-direction: column; gap: 0.3rem; position: relative; } .trust__label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold-text); } .trust__value { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.4; color: var(--text-on-ink); } .trust__value a { transition: color var(--dur-fast) var(--ease-out); } .trust__value a:hover { color: var(--gold-text); } /* "Heute geöffnet"-Status — Punkt erbt Farbe aus JS-Status-Klasse */ .trust__dot { display: inline-flex; align-items: center; gap: 0.6rem; } .trust__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: 0 0 auto; transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } [data-hours].is-open-now .trust__dot::before, .trust__dot.is-open-now::before { background: #4E7A50; /* GRUEN = geoeffnet (Hassan-Memo 20.07.) */ box-shadow: 0 0 0 4px color-mix(in srgb, #4E7A50 22%, transparent); } [data-hours].is-closed-now .trust__dot::before, .trust__dot.is-closed-now::before { background: #B8443C; /* ROT = geschlossen */ box-shadow: 0 0 0 4px color-mix(in srgb, #B8443C 18%, transparent); } @media (min-width: 600px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .trust__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } } /* --- Highlights — Signature-Karten (3-spaltig, editorial, KEIN Card-Lift-Klischee) --- */ .highlight-grid { margin-top: var(--space-xl); display: grid; grid-template-columns: 1fr; gap: clamp(var(--space-lg), 4vw, var(--space-2xl)); } .highlight-card { display: flex; flex-direction: column; } .highlight-card__media { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 4 / 3; isolation: isolate; } .highlight-card__media .media-slot, .highlight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-soft); } .highlight-card:hover .highlight-card__media img, .highlight-card:hover .highlight-card__media .media-slot { transform: scale(1.03); } /* Gold-Hairline-Frame bei Hover (Gold-Faden) */ .highlight-card__media::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold); border-radius: calc(var(--radius-sm) - 4px); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease-out); z-index: 2; } .highlight-card:hover .highlight-card__media::after { opacity: 1; } .highlight-card__body { padding-top: var(--space-md); } .highlight-card__title { font-family: var(--font-display); font-size: var(--fs-display); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; } .highlight-card__text { margin-top: var(--space-sm); font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.6; color: var(--muted-on-cream); max-width: 38ch; } .section--ink .highlight-card__text { color: var(--muted-on-ink); } @media (min-width: 768px) { .highlight-grid { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { .highlight-card:hover .highlight-card__media img, .highlight-card:hover .highlight-card__media .media-slot { transform: none !important; } } /* ========================================================================== 25 · EDITORIAL-KOMPONENTEN (AP2 — baut auf AP1-Lock auf) Drop-Cap · Hairline-Divider · Vietri-Ornament · Hover-Dish-Preview · asymmetrisches Editorial-Raster · ruhige Espresso-Outline-CTA. Alle token-basiert, keine Hex-Hardcodes, reduced-motion-sicher. ========================================================================== */ /* --- 25.1 Drop-Cap (Story-Abschnitt: erste Fraunces-Versalie) ----------- */ .dropcap::first-letter { float: left; font-family: var(--font-display); font-weight: 600; /* ~4 Zeilen hoch: line-height des Bodys (1.6) × 4 ≈ 6.4 → optisch via Größe + LH 0.82 */ font-size: 4em; line-height: 0.82; padding-right: 0.08em; padding-top: 0.04em; margin-right: 0.04em; color: var(--blue-deep); /* leichte editoriale Charakter-Note der Versalie */ font-feature-settings: "case" 1; -webkit-font-smoothing: antialiased; } /* Auf dunklem Espresso-Grund: hellerer Vietri-Ton */ .section--ink .dropcap::first-letter { color: var(--blue-light); } /* Drop-Cap reduziert auf Schmal-Viewports (verhindert Reflow-Bruch) */ @media (max-width: 480px) { .dropcap::first-letter { font-size: 3.2em; line-height: 0.86; } } /* --- 25.2 Hairline-Divider-System (1px statt Card-Schatten) ------------- */ .rule-hairline { border: 0; height: 1px; width: 100%; margin: 0; background: var(--hairline-cream); } /* Auf dunklem Espresso/Ink-Grund */ .rule-hairline.rule--ink, .section--ink .rule-hairline { background: var(--hairline-ink); } /* Vietri-Blau-Akzentlinie (Signatur) */ .rule-hairline.rule--blue { background: var(--hairline-blue); } /* Kurze, zentrierte Akzent-Hairline (z. B. unter Eyebrow/Section-Head) */ .rule-hairline.rule--short { width: clamp(48px, 8vw, 88px); margin-inline: auto; } /* --- 25.3 Vietri-Ornament (stroke-only, dezent, kleine Opacity) -------- Nutzt das SVG als Mask → exakte Einfärbung über Tokens, kein -Tint-Hack. Default: dezenter Section-Divider, horizontal zentriert. */ .ornament { --ornament-size: clamp(40px, 6vw, 72px); --ornament-color: var(--blue); --ornament-opacity: 0.22; display: block; width: var(--ornament-size); height: var(--ornament-size); margin-inline: auto; background-color: var(--ornament-color); opacity: var(--ornament-opacity); -webkit-mask: url("../assets/img/vietri-ornament.svg") center / contain no-repeat; mask: url("../assets/img/vietri-ornament.svg") center / contain no-repeat; pointer-events: none; } /* Auf dunklem Grund: hellerer Vietri-Ton, etwas präsenter */ .section--ink .ornament { --ornament-color: var(--blue-light); --ornament-opacity: 0.28; } /* Als Section-Divider: mit vertikalem Rhythmus + flankierenden Hairlines */ .ornament--divider { --ornament-size: 13px; --ornament-opacity: 1; width: 13px; height: 13px; margin-block: var(--space-xl); position: relative; /* Outline-Raute (il-Tartufo-Look) statt Vietri-Kachel */ -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202L22%2012L12%2022L2%2012Z'%20fill='none'%20stroke='black'%20stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202L22%2012L12%2022L2%2012Z'%20fill='none'%20stroke='black'%20stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat; } .ornament--divider::before, .ornament--divider::after { content: ""; position: absolute; top: 50%; width: clamp(40px, 14vw, 160px); height: 1px; background: var(--hairline-blue); } .ornament--divider::before { right: calc(100% + var(--space-md)); } .ornament--divider::after { left: calc(100% + var(--space-md)); } /* Als Eck-Akzent (Karten/Editorial-Sektion): absolut positioniert, sehr leise */ .ornament--corner { --ornament-size: clamp(72px, 10vw, 132px); --ornament-opacity: 0.10; position: absolute; top: var(--space-md); right: var(--space-md); margin: 0; z-index: 0; } /* --- 25.4 Hover-Dish-Preview (Thumbnail erscheint on hover/focus) ------- WICHTIG: kein opacity:0-Default ohne Gate. Hidden-State NUR wenn Motion erlaubt ist (no-preference) — bei reduced-motion bleibt das Thumbnail statisch sichtbar/zugänglich. */ .menu-item--with-image.menu-item--preview { /* erbt das Foto-Grid, aber Thumb-Spalte reserviert ihren Platz immer */ grid-template-columns: clamp(76px, 9vw, 104px) 1fr auto; } .menu-item__thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--blue-soft); } .menu-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Default (inkl. reduced-motion / kein Media-Support): voll sichtbar, ruhig */ @media (prefers-reduced-motion: no-preference) { .menu-item__thumb { opacity: 0; transform: translateX(-6px) scale(0.96); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: opacity, transform; } /* Erscheint bei Hover des Eintrags UND bei Tastatur-Fokus (focus-within) */ .menu-item--preview:hover .menu-item__thumb, .menu-item--preview:focus-within .menu-item__thumb { opacity: 1; transform: translateX(0) scale(1); } } /* Touch/Mobil (kein Hover): Foto dauerhaft sichtbar — sonst bleibt die reservierte Thumb-Spalte als leere Lücke stehen (Verify-Defekt #1). Sanfte Reveal-Transition. */ @media (hover: none) { .menu-item__thumb { opacity: 1 !important; transform: none !important; transition: transform var(--dur-fast) var(--ease-out) !important; } } /* --- 25.5 Editorial-Raster (12-Spalten asymmetrisch, gespiegelt) ------- Text 2/6 · Bild 7/12 — viel Creme-Weißraum, mobil gestapelt. */ .editorial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; } .editorial-grid__text, .editorial-grid__media { min-width: 0; } .editorial-grid__media img, .editorial-grid__media .media-slot { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 880px) { .editorial-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--space-xl); row-gap: 0; } /* Standard: Text links (Spalten 2–6), Bild rechts (7–12) */ .editorial-grid__text { grid-column: 2 / 7; } .editorial-grid__media { grid-column: 7 / 13; } /* Gespiegelt: Bild links (1–6), Text rechts (8–12) */ .editorial-grid--mirror .editorial-grid__media { grid-column: 1 / 7; } .editorial-grid--mirror .editorial-grid__text { grid-column: 8 / 12; } } /* --- 25.6 Ruhige CTA-Variante (Espresso-Outline → Blau-Fill on hover) --- Ergänzt die bestehenden .btn-Varianten (keine Dublette). */ .btn--quiet { background: transparent; border-color: var(--espresso); color: var(--espresso); } .btn--quiet:hover { background: var(--blue); border-color: var(--blue); color: var(--creme); transform: translateY(-2px); } .btn--quiet:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; } /* Auf dunklem Espresso/Ink-Grund: heller Vietri-Outline → Blau-Fill */ .section--ink .btn--quiet { border-color: var(--blue-light); color: var(--blue-light); } .section--ink .btn--quiet:hover { background: var(--blue-light); border-color: var(--blue-light); color: var(--espresso); } /* --- 25.7 Reduced-Motion-Guard für AP2-Komponenten --------------------- */ @media (prefers-reduced-motion: reduce) { /* Thumb bleibt sichtbar (Hidden-State ist via no-preference gegatet, greift hier also gar nicht — diese Regel macht es explizit robust). */ .menu-item__thumb { opacity: 1 !important; transform: none !important; } .btn--quiet:hover { transform: none !important; } } /* ========================================================================== 26 · FOOTER-NEWSLETTER + FORMULAR-HELFER (Kunden-Mail-Capture) ========================================================================== */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .news-form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .site-footer__news{max-width:32ch} .site-footer__news-lead{font-family:var(--font-serif);font-size:var(--fs-meta);color:var(--muted-on-ink);margin:.4rem 0 1rem;line-height:1.5} .news-form .field{margin-bottom:.7rem} .news-form input[type=email]{width:100%;font-family:var(--font-ui);font-size:var(--fs-ui);padding:.7rem .85rem;color:var(--text-on-ink);background:color-mix(in srgb, var(--creme) 12%, transparent);border:1.5px solid var(--blue-light);border-radius:var(--radius-sm);transition:border-color var(--dur-fast) var(--ease-out)} .news-form input[type=email]::placeholder{color:var(--muted-on-ink)} .news-form input[type=email]:hover{border-color:color-mix(in srgb, var(--blue-light) 80%, white)} .news-form input[type=email]:focus, .news-form input[type=email]:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px;border-color:var(--blue-light)} .news-form .field--check label{display:flex;gap:.5rem;align-items:flex-start;font-family:var(--font-ui);font-size:var(--fs-meta);line-height:1.45;color:var(--muted-on-ink);cursor:pointer} .news-form .field--check a{color:var(--blue-light)} .news-form .field--check input{margin-top:.2rem;accent-color:var(--blue);flex:0 0 auto} .news-form .form-status{margin-top:.6rem;font-family:var(--font-ui);font-size:var(--fs-meta);color:var(--text-on-ink)} .news-form .form-status[data-state=error]{color:var(--error-on-ink)} .news-form .form-status[data-state=ok]{color:var(--blue-light)} /* ========================================================================== 27 · RESERVIERUNGS-FORMULAR (selbstgebaut, kein resmio) + Bestell-CTA Editorial-Form auf Creme: Lora-Labels, ruhige Vietri-Akzente, AA-Kontraste. Felder, Fehler-States, Status-Region, Honeypot, Multi-Spalten-Rows. ========================================================================== */ /* --- 27.1 Feld-Grundlayout (Top-Level, von reservieren.html genutzt) ----- */ .res-form .field { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-md); } .res-form .field > label { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-ui); color: var(--text-on-cream); letter-spacing: 0.01em; } .section--ink .res-form .field > label { color: var(--text-on-ink); } .res-form .field > label .req { color: var(--blue-deep); margin-left: 0.2rem; } .res-form .field__opt { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); color: var(--muted-on-cream); letter-spacing: 0.02em; } .section--ink .res-form .field__opt { color: var(--muted-on-ink); } /* Multi-Feld-Reihe (Telefon/E-Mail · Datum/Uhrzeit/Personen) */ .res-form .res-form__row, .res-form .field--row { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); } .res-form .res-form__row .field { margin-bottom: 0; } @media (min-width: 600px) { .res-form .res-form__row.field--row { grid-template-columns: 1fr 1fr; } /* Datum/Uhrzeit/Personen: drei Spalten ab Tablet */ .res-form .res-form__row.field--row:has(.field:nth-child(3)) { grid-template-columns: 1fr 1fr 0.9fr; } } /* --- 27.2 Eingabe-Felder ------------------------------------------------- */ .res-form input[type="text"], .res-form input[type="tel"], .res-form input[type="email"], .res-form input[type="date"], .res-form input[type="time"], .res-form select, .res-form textarea { width: 100%; font-family: var(--font-serif); font-size: var(--fs-ui); line-height: 1.4; padding: 0.85rem 1rem; color: var(--text-on-cream); background: #FCF9F2; /* warmes Papier statt Reinweiß */ border: 1px solid rgba(30, 30, 31, 0.25); border-radius: 2px; color-scheme: light; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); -webkit-appearance: none; appearance: none; } .res-form textarea { resize: vertical; min-height: 5.5rem; } .res-form select { background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.15rem, calc(100% - 0.8rem) 1.15rem; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.4rem; } .res-form input::placeholder, .res-form textarea::placeholder { color: var(--muted-on-cream); } .res-form input:hover, .res-form select:hover, .res-form textarea:hover { border-color: var(--blue); } .res-form input:focus, .res-form select:focus, .res-form textarea:focus, .res-form input:focus-visible, .res-form select:focus-visible, .res-form textarea:focus-visible { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent); } /* Forced-Colors / Windows-High-Contrast: box-shadow-Ring wird dort entfernt → sichtbaren Outline wiederherstellen (WCAG 2.4.7). Kein Effekt im Normalmodus. */ @media (forced-colors: active) { .res-form input:focus, .res-form select:focus, .res-form textarea:focus, .res-form input:focus-visible, .res-form select:focus-visible, .res-form textarea:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } /* Dunkler Grund (falls Form mal auf Ink steht) */ .section--ink .res-form input[type="text"], .section--ink .res-form input[type="tel"], .section--ink .res-form input[type="email"], .section--ink .res-form input[type="date"], .section--ink .res-form input[type="time"], .section--ink .res-form select, .section--ink .res-form textarea { color: var(--text-on-ink); background: color-mix(in srgb, var(--creme) 8%, transparent); border-color: var(--blue-light); } /* --- 27.3 Fehler-State (forms.js setzt aria-invalid + .field-error) ------ */ .res-form [aria-invalid="true"] { border-color: var(--error-on-cream); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-on-cream) 22%, transparent); } .section--ink .res-form [aria-invalid="true"] { border-color: var(--error-on-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-on-ink) 24%, transparent); } .field-error { font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-meta); color: var(--error-on-cream); margin-top: var(--space-3xs); } .section--ink .field-error { color: var(--error-on-ink); } /* --- 27.4 Consent-Checkbox (Reservierung) -------------------------------- */ .res-form .form-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; margin-bottom: var(--space-md); } .res-form .form-consent input[type="checkbox"] { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--blue); flex: 0 0 auto; } .res-form .form-consent label { font-family: var(--font-serif); font-size: var(--fs-meta); line-height: 1.5; color: var(--text-on-cream); cursor: pointer; } .section--ink .res-form .form-consent label { color: var(--text-on-ink); } .res-form .form-consent a { color: var(--blue); border-bottom: 1px solid var(--blue); transition: color var(--dur-fast) var(--ease-out); } .res-form .form-consent a:hover { color: var(--blue-deep); } /* --- 27.5 Hinweis-Zeile + Submit ----------------------------------------- */ .res-form__hint { margin-block: var(--space-xs) var(--space-md); color: var(--muted-on-cream); } .section--ink .res-form__hint { color: var(--muted-on-ink); } .res-form .contact-form__hint { font-family: var(--font-ui); font-size: var(--fs-meta); line-height: 1.5; color: var(--muted-on-cream); margin-top: var(--space-md); } .section--ink .res-form .contact-form__hint { color: var(--muted-on-ink); } .res-form .contact-form__hint .req { color: var(--blue-deep); } .res-form__submit { margin-top: var(--space-sm); justify-self: start; } /* --- 27.6 Honeypot (display:none — WCAG-fest, SR ignoriert) -------------- */ .res-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .res-form__fields { display: grid; } /* --- 27.7 Globale Status-Region (aria-live; ok/error via data-state) ----- */ .form-status { margin-top: var(--space-md); font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-ui); line-height: 1.5; color: var(--text-on-cream); } .section--ink .form-status { color: var(--text-on-ink); } .form-status[data-state="error"] { color: var(--error-on-cream); } .section--ink .form-status[data-state="error"] { color: var(--error-on-ink); } .form-status[data-state="ok"] { color: var(--blue-deep); } .section--ink .form-status[data-state="ok"] { color: var(--blue-light); } /* Submit-Button volle Breite auf Schmal-Viewports */ @media (max-width: 480px) { .res-form__submit { width: 100%; justify-self: stretch; } } /* Reduced-Motion: keine Feld-Transitions */ @media (prefers-reduced-motion: reduce) { .res-form input, .res-form select, .res-form textarea, .field-error, .form-status, .tel-fallback__num svg { transition: none !important; } } /* --- 27.8 Bestell-CTA (bestellen.html → Amigos-Link, kein Bestellsystem) - */ .order-direct { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-top: var(--space-lg); } .order-direct__cta { align-self: flex-start; } .order-direct__note { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.7; color: var(--muted-on-cream); max-width: 52ch; } .section--ink .order-direct__note { color: var(--muted-on-ink); } @media (max-width: 480px) { .order-direct__cta { align-self: stretch; } } /* ========================================================================== 27 · VIETRI-BORDÜRE (faithful Teller-Motiv) — Band/Divider ========================================================================== */ /* Signatur-Bordüre (Gold auf Espresso) — rationiert: max. 1x pro Seite, vor dem Footer */ .vietri-band{width:100%;height:24px;background:url(../assets/img/vietri-border.svg) repeat-x center / auto 24px} .vietri-band--slim{height:18px;background-size:auto 18px} .vietri-band--tall{height:30px;background-size:auto 30px} @media (max-width:600px){.vietri-band{height:20px;background-size:auto 20px}} /* Hero-Eck-Siegel — Arabesken-Medaillon (Teller-Mitte) */ .hero{position:relative} .hero__seal{position:absolute;bottom:clamp(14px,4vw,40px);right:clamp(14px,4vw,46px); width:clamp(86px,11vw,150px);aspect-ratio:1;background:var(--text-on-ink); -webkit-mask:url(../assets/img/vietri-medallion.svg) no-repeat center/contain; mask:url(../assets/img/vietri-medallion.svg) no-repeat center/contain; opacity:.5;pointer-events:none;z-index:3} @media (max-width:600px){.hero__seal{opacity:.38}} /* Vietri-Band als Sektions-Divider: etwas Luft drumherum */ .vietri-band.is-divider{margin:0} /* ========================================================================== 28 · LOGO-INTRO — Wortmarken-Vorhang (Erstbesuch) -------------------------------------------------------------------------- Markup-Vertrag (js/motion.js steuert):

Golfo di Napoli

JS setzt beim Mount, fügt .is-leaving für den Wipe-up und entfernt das Overlay nach 'transitionend'. KEIN externes Bild. ========================================================================== */ /* Das Intro-Overlay ist KOMPLETT self-contained in js/intro.js (injiziert eigenes