/* ==========================================================================
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: #F4EFE4; /* Editorial-Papier, heller/luftiger (il-Tartufo-Look) */
--espresso: #1E1E1F; /* dunkelste Fläche + Primär-Fließtext (13.4:1 auf Creme) */
--paper: #FFFFFF;
/* Signatur-Akzent = GOLD/Bronze (ersetzt Vietri-Blau). Token-Namen --blue* bleiben,
damit der ganze Bestand ohne Find-Replace auf Gold kippt. */
--blue: #B8924A; /* Gold-Main — NUR Linien/Ornamente/Flächen auf Creme (2.5:1, kein Text!) */
--blue-deep: #7E6335; /* Gold-Deep — Text-Gold auf Creme: Eyebrows, Preise, Links (4.9:1, AA) */
--blue-light: #D4B896; /* Gold-Light — Akzent auf Espresso/dunkel (~8:1 auf #1E1E1F) */
--blue-soft: #EAD9B8; /* weicher Gold-Wash — NIE Text */
--wein: #7A2E3A; /* warme Stütze: Akzent-Headline möglich (8:1) */
--terrakotta: #B5502B; /* warme Stütze: Großschrift/Icons/Trenner — kein Body-Text */
--oliv: #6B6A3C; /* Tags/Labels */
--ocker: #C68A3E; /* nur Flächen/Linien/Hover */
--grey: #8C8377; /* Meta/Caption auf Espresso */
/* Alt-Token-Aliase → ganze Bestands-CSS kippt ohne Find-Replace auf die neue Palette */
--ink: var(--espresso);
--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: #EFE7D6; /* warmes Off-White auf Espresso */
--text-on-cream: var(--espresso);
--muted-on-ink: #B9AE9E;
--muted-on-cream:#6B6256;
/* Hairlines (grund-abhängig) */
--hairline-ink: rgba(239, 231, 214, 0.16);
--hairline-cream: rgba(30, 30, 31, 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(30, 30, 31,0.42) 0%, rgba(30, 30, 31,0.40) 55%, rgba(30, 30, 31,0.82) 100%);
--wash-heritage: linear-gradient(0deg, rgba(30, 30, 31,0.88) 0%, rgba(30, 30, 31,0.30) 55%, rgba(30, 30, 31,0.55) 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: #141414; /* oberer Gradient-Stopp Media-Slot */
--slot-darkest: #0A0A0A; /* unterer Gradient-Stopp Media-Slot */
--embed-dark: #131313; /* Embed-Mount-Grund auf Ink */
/* Form-Fehlerfarben (Status-/Inline-Feedback) */
--error-on-ink: #E2A0A0; /* 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(--ink);
}
/* ==========================================================================
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); }
/* 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(--ink); }
.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);
display: block;
letter-spacing: 0.06em;
}
.wordmark: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); }
.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); }
.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(--gold);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
transform: translateY(-3.75px) rotate(-45deg);
background: var(--gold);
}
/* 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); }
.mobile-nav__tel {
font-family: var(--font-ui);
font-weight: 600;
font-size: 1.25rem;
color: var(--gold);
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(--ink);
}
.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: rgba(237, 231, 216, 0.4);
color: var(--text-on-ink);
}
.btn--ghost:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-2px);
}
/* Ghost auf Cream */
.section--cream .btn--ghost {
border-color: var(--hairline-cream);
color: var(--ink);
}
.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(--ink);
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(--ink) 12%, transparent);
color: var(--ink);
transition: background-color var(--dur-fast) var(--ease-out);
}
.reserve-pill__tel:hover { background: color-mix(in srgb, var(--ink) 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); }
.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); }
/* 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(--ink); }
.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);
}
.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); }
.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(30, 30, 31,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);
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);
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); }
/* 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); }
.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); }
.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);
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); }
/* 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(--ink); }
.breadcrumb span[aria-hidden="true"] { color: var(--gold); }
/* 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);
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); }
/* 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); }
.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); }
.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); }
/* 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); }
.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);
}
.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); }
/* "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: var(--gold);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
[data-hours].is-closed-now .trust__dot::before,
.trust__dot.is-closed-now::before {
background: var(--muted-on-ink);
}
@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):
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