/* =========================================================================
Weinhaus Renker · Überlingen
One-Pager — handgeschriebene Weinkarte trifft warme, ehrliche Editorial-Wärme
Farben in OKLCH, committed strategy: Weinrot + Walnuss + Papier + Tulpe
========================================================================= */
/* ---- Schriften: lokal ausgeliefert, kein Abruf bei Google (DSGVO) ----
Variable Fonts, Latin-Subset von Google Fonts – deckt Deutsch komplett ab. */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/young-serif.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("fonts/mulish.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/mulish-italic.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/shantell-sans.woff2") format("woff2"); }
:root {
/* ---- Palette (OKLCH) ---- */
--wine: oklch(0.40 0.115 18); /* deep wine red — primary */
--wine-deep: oklch(0.30 0.095 20); /* darker wine */
--walnut: oklch(0.26 0.035 45); /* dark walnut brown */
--walnut-ink: oklch(0.205 0.028 45); /* near-black warm ink */
--paper: oklch(0.968 0.010 78); /* warm off-white — the house's own paper */
--paper-2: oklch(0.945 0.014 74); /* slightly deeper paper for banding */
--tulip: oklch(0.70 0.145 22); /* soft tulip rose — the one accent */
--tulip-soft: oklch(0.86 0.055 30); /* pale tulip wash */
--chalk-bg: oklch(0.265 0.018 165); /* dark slate-green chalkboard */
--chalk-ink: oklch(0.94 0.012 150); /* chalk white */
--gold: oklch(0.78 0.095 78); /* candle-glow highlight */
/* ---- Semantic ---- */
--bg: var(--paper);
--surface: var(--paper);
--ink: var(--walnut-ink);
--ink-soft: oklch(0.36 0.028 42); /* muted body — still ≥4.5:1 on paper */
--line: oklch(0.86 0.018 60); /* hairline on paper */
--on-dark: oklch(0.95 0.012 78);
--on-dark-soft:oklch(0.83 0.020 72);
/* ---- Type ---- */
--font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
--font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-hand: "Shantell Sans", "Segoe Print", "Bradley Hand", cursive;
--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
--step-0: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
--step-1: clamp(1.2rem, 1.10rem + 0.5vw, 1.5rem);
--step-2: clamp(1.5rem, 1.30rem + 1vw, 2.1rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3rem);
--step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
/* ---- Space ---- */
--gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
--section-y: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
--wrap: 74rem;
--wrap-narrow: 62rem;
--radius: 4px;
/* Navbar-Höhe (Logo-Höhe + vertikales Padding) — für die Hero-Höhe */
--nav-h: calc(clamp(2.6rem, 2rem + 1.6vw, 3.3rem) + 1.2rem);
/* ---- Motion ---- */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
/* ---- z-scale ---- */
--z-backdrop: 90; /* unter dem Header, damit nur die Seite dahinter unschärft */
--z-sticky: 100;
--z-nav-menu: 110;
}
/* ===================== Reset / base ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
font-kerning: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-wrap: break-word; /* lange dt. Komposita brechen notfalls, statt zu überlaufen */
}
/* Jedes eigene `display` würde das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.01em;
text-wrap: balance;
color: var(--walnut-ink);
}
p { text-wrap: pretty; }
::selection { background: var(--tulip-soft); color: var(--walnut-ink); }
:focus-visible {
outline: 3px solid var(--wine);
outline-offset: 3px;
border-radius: 2px;
}
.wrap {
width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto;
/* Notch/abgerundete Ecken im Querformat – box-sizing: border-box, der
Inhalt rückt also ein, statt die Breite zu sprengen. */
padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
/* --wrap-narrow ist als Token schon vorhanden (bislang ungenutzt) – die
Modifier-Klasse fehlte für Sections mit schmalerer Lesebreite. */
.wrap--narrow { --wrap: var(--wrap-narrow); }
.skip-link {
position: absolute; left: 50%; translate: -50% -140%;
z-index: 200; background: var(--wine); color: var(--on-dark);
padding: 0.6rem 1.1rem; border-radius: var(--radius);
font-weight: 600; text-decoration: none;
transition: translate 0.2s var(--ease-out-quart);
}
.skip-link:focus-visible { translate: -50% 12px; }
/* ===================== Shared bits ===================== */
.overline {
font-family: var(--font-hand);
font-size: var(--step-1);
color: var(--wine);
line-height: 1;
margin-bottom: 0.5rem;
transform: rotate(-1.5deg);
transform-origin: left;
}
.section__title { font-size: var(--step-3); }
.section { padding-block: var(--section-y); }
/* Sticky-Header-Höhe beim Ankersprung berücksichtigen */
:where(#ueber-uns, #speisekarte, #wein-bier, #kultur, #aktuelles, #terrasse, #kontakt) { scroll-margin-top: 5rem; }
.section__head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__intro {
margin-top: 1rem; font-size: var(--step-1);
color: var(--ink-soft); line-height: 1.55; max-width: 60ch;
}
.section--spaces .section__intro { margin-inline: auto; }
/* ---- Tulip motif ---- */
.tulip { width: 1.6em; height: auto; fill: currentColor; overflow: visible; }
.tulip__stem { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; }
/* ---- Buttons ---- */
.btn {
--btn-bg: var(--wine); --btn-fg: var(--on-dark);
display: inline-flex; align-items: center; justify-content: center;
min-height: 3rem; padding: 0.75rem 1.5rem;
font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
border: 1.5px solid var(--btn-bg); border-radius: 999px;
background: var(--btn-bg); color: var(--btn-fg);
transition: transform 0.18s var(--ease-out-quart),
box-shadow 0.25s var(--ease-out-quart),
background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solid { box-shadow: 0 6px 18px -10px oklch(0.30 0.095 20 / 0.7); }
.btn--ghost { background: transparent; color: var(--wine); border-color: color-mix(in oklch, var(--wine) 45%, transparent); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn--whatsapp { --btn-bg: #0e7a40; --btn-fg: #fff; box-shadow: 0 6px 18px -10px oklch(0.3 0.1 150 / 0.7); }
@media (hover: hover) {
.btn--whatsapp:hover { --btn-bg: #0b6835; transform: translateY(-2px); }
}
@media (hover: hover) {
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px oklch(0.30 0.095 20 / 0.85); }
.btn--ghost:hover { background: var(--wine); color: var(--on-dark); border-color: var(--wine); transform: translateY(-2px); }
}
.link-arrow {
display: inline-flex; align-items: center; gap: 0.5rem;
min-height: 44px;
font-weight: 700; color: var(--wine); text-decoration: none;
width: max-content;
}
.link-arrow span { transition: transform 0.22s var(--ease-out-quart); }
@media (hover: hover) {
.link-arrow:hover span { transform: translateX(5px); }
}
/* ---- Image frames / placeholders (bis echte Bilder existieren) ---- */
.frame {
position: relative; overflow: hidden; border-radius: var(--radius);
background:
radial-gradient(120% 90% at 25% 15%, oklch(0.48 0.10 25 / 0.55), transparent 60%),
radial-gradient(120% 120% at 85% 90%, oklch(0.24 0.03 45 / 0.65), transparent 55%),
linear-gradient(150deg, var(--walnut) 0%, var(--wine-deep) 100%);
box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06), 0 24px 48px -32px oklch(0.20 0.03 40 / 0.6);
}
/* tulip watermark on every placeholder */
.frame::after {
content: "";
position: absolute; inset: 0;
background: no-repeat center / clamp(60px, 22%, 120px)
url('data:image/svg+xml;utf8,');
opacity: 0.9; pointer-events: none;
}
.frame img {
width: 100%; height: 100%; object-fit: cover;
color: transparent; /* verbirgt Alt-Text/Broken-Glyph solange kein Bild existiert */
position: relative; z-index: 1;
}
.frame__cap {
position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
padding: 1.4rem 1.1rem 0.9rem;
font-size: var(--step--1); color: var(--on-dark);
background: linear-gradient(transparent, oklch(0.20 0.03 40 / 0.8));
}
/* ===================== Header / Nav ===================== */
.site-head {
position: sticky; top: 0; z-index: var(--z-sticky);
background: var(--paper);
box-shadow: 0 1px 0 color-mix(in oklch, var(--line) 60%, transparent);
transition: box-shadow 0.3s ease;
}
.site-head[data-elevated="true"] {
box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px oklch(0.20 0.03 40 / 0.6);
}
.nav {
width: min(100% - 2.4rem, var(--wrap));
margin-inline: auto;
display: flex; align-items: center; gap: 1rem;
padding-block: 0.6rem;
padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand__logo { height: clamp(2.6rem, 2rem + 1.6vw, 3.3rem); width: auto; display: block; }
.nav__links { list-style: none; display: flex; gap: 1.4rem; padding: 0; }
.nav__links a {
text-decoration: none; font-weight: 600; font-size: 0.98rem;
color: inherit; padding: 0.3rem 0; position: relative;
}
.nav__links a::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
background: var(--tulip); transform: scaleX(0); transform-origin: left;
transition: transform 0.25s var(--ease-out-quart);
}
.nav__links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) {
.nav__links a:hover::after { transform: scaleX(1); }
}
.nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.nav__cta { min-height: 2.6rem; padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.nav__toggle { display: none; }
/* ===================== Hero ===================== */
.hero {
/* Abstände und Copy schrumpfen auf flachen Bildschirmen mit (svh), damit der
Hero auch auf 1366×768 oder dem iPhone SE genau eine Bildschirmhöhe hat. */
--hero-pad-top: min(clamp(2rem, 6vw, 4rem), 5svh);
position: relative; isolation: isolate;
min-height: calc(100vh - var(--nav-h)); /* Fallback */
min-height: calc(100svh - var(--nav-h)); /* volle Höhe minus Navbar */
display: grid; align-items: stretch;
padding: var(--hero-pad-top) 0 min(clamp(3rem, 6vw, 4.5rem), 9svh);
color: var(--on-dark);
overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; border-radius: 0; z-index: -2; box-shadow: none; }
.hero__bg::after { opacity: 0.10; background-size: clamp(140px, 30%, 280px); }
.hero__bg img { height: 100%; }
.hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, oklch(0.20 0.03 30 / 0.55) 0%, transparent 30%),
linear-gradient(0deg, oklch(0.18 0.04 25 / 0.92) 4%, oklch(0.22 0.05 22 / 0.55) 40%, oklch(0.25 0.05 22 / 0.35) 100%);
}
.hero__inner {
width: min(100% - 2.4rem, var(--wrap));
margin-inline: auto;
padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
/* Zeile 1 hält das Schild oben an der Navbar, Zeile 2 zentriert die Copy
im verbleibenden Raum. */
display: grid;
grid-template-rows: auto minmax(0, 1fr);
row-gap: min(clamp(1.25rem, 4vw, 2rem), 2.5svh);
}
.hero__copy { grid-row: 2; align-self: center; max-width: 40rem; }
.hero__kicker {
font-family: var(--font-body); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
font-size: 0.78rem; color: var(--tulip-soft); margin-bottom: min(1rem, 1.6svh);
}
.hero__title {
color: var(--on-dark);
font-size: min(var(--step-4), 7.2svh);
line-height: 1.02;
letter-spacing: -0.02em;
text-shadow: 0 2px 30px oklch(0.15 0.03 30 / 0.5);
}
.hero__lead {
margin-top: min(1.25rem, 2svh); font-size: min(var(--step-1), 2.9svh); line-height: 1.6;
color: var(--on-dark-soft); max-width: 46ch;
}
.hero__actions { margin-top: min(1.8rem, 3svh); display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero .btn--ghost { color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 55%, transparent); }
.hero .btn--ghost:hover { background: var(--on-dark); color: var(--wine); border-color: var(--on-dark); }
.hero__hours {
margin-top: min(1.8rem, 3svh); display: inline-flex; align-items: center; gap: 0.6rem;
font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
color: var(--on-dark);
background: oklch(0.20 0.03 30 / 0.45);
border: 1px solid oklch(1 0 0 / 0.14);
padding: 0.55rem 1rem;
/* Einzeilig exakt so rund wie eine Kapsel (Höhe ~43px), zweizeilig auf dem
Telefon ein sauberer Block statt einer verzerrten 999px-Pille. */
border-radius: 1.375rem;
text-wrap: balance;
backdrop-filter: blur(4px);
}
.hours__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px oklch(0.78 0.095 78 / 0.25); }
/* ---- Hanging door sign ----
Unter 80rem gibt es rechts neben der Headline keine freie Spalte (gemessen:
das Schild überlappt die H1 bis 1280px). Dort hängt es deshalb im Fluss über
der Copy statt daneben – mit kürzeren Seilen, damit es kompakt bleibt. */
.hero__sign {
grid-row: 1; justify-self: start;
width: clamp(132px, 34vw, 196px);
margin-top: calc(-1 * var(--hero-pad-top));
margin-left: clamp(0rem, 2vw, 2rem);
transform-origin: top center;
animation: sway 6s ease-in-out infinite;
}
/* Seile laufen oben hinter die (undurchsichtige) Navbar und kommen darunter
hervor – so wirkt das Schild, als hinge es an der Navbar. */
.sign__ropes { display: flex; justify-content: space-between; padding-inline: 18%; height: min(clamp(48px, 15vw, 88px), 8svh); }
.sign__ropes span { width: 2px; background: linear-gradient(oklch(0.55 0.04 60), oklch(0.35 0.04 50)); border-radius: 2px; }
.sign__board {
position: relative;
background: linear-gradient(160deg, oklch(0.34 0.04 50), oklch(0.24 0.035 45));
border: 2px solid oklch(0.62 0.07 70 / 0.7);
border-radius: 6px;
padding: clamp(0.7rem, 2vw, 1.1rem) 1rem;
text-align: center;
box-shadow: 0 18px 30px -18px oklch(0.15 0.03 30 / 0.9), inset 0 0 20px oklch(0 0 0 / 0.3);
}
.sign__board::before {
content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0;
width: 14px; height: 14px; border-radius: 50%;
background: oklch(0.55 0.05 60); box-shadow: 0 0 0 3px oklch(0.30 0.03 45);
}
.sign__line {
display: block; font-family: var(--font-hand);
font-size: clamp(1.05rem, 3.2vw, 1.5rem); font-weight: 600;
color: var(--gold); line-height: 1.15;
text-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
}
@keyframes sway {
0%, 100% { transform: rotate(-2.6deg); }
50% { transform: rotate(2.6deg); }
}
/* Ab hier ist links neben der Copy (max 40rem) genug Platz für das Schild:
es hängt wieder als Overlay im leeren linken Drittel. */
@media (min-width: 80rem) {
.hero { align-items: center; }
/* max-width zurück auf den Container: hält die Copy mittig im Viewport,
genau wie vor der Umstellung. */
.hero__inner { max-width: 40rem; grid-template-rows: minmax(0, 1fr); row-gap: 0; }
.hero__copy { grid-row: 1; }
.hero__sign {
position: absolute;
/* Das Padding des Hero herausrechnen, sonst begänne das Seil erst darunter
und das Schild schwebte statt zu hängen. */
top: calc(-1 * var(--hero-pad-top));
left: clamp(1rem, 8vw, 6rem); z-index: 1;
width: clamp(150px, 22vw, 230px);
margin: 0; justify-self: auto;
}
.sign__ropes { height: clamp(84px, 9vw, 118px); }
}
/* Ranke aus dem Logo (weißes SVG, schon gespiegelt), wächst von rechts
unten ins Bild. Unter 80rem nur oben rechts in der Ecke neben dem Schild,
damit sie nicht unter der Headline liegt. */
.hero__ranke {
position: absolute; top: 0; right: 0; z-index: 0;
height: clamp(190px, 50vw, 300px); width: auto;
opacity: 0.85;
pointer-events: none;
}
@media (min-width: 80rem) {
/* Nach rechts gedreht (um die Ecke unten rechts), damit sie größer sein kann,
ohne in die Copy (40rem mittig) zu wachsen. */
.hero__ranke {
top: auto; bottom: 0;
height: min(85%, 44rem, calc((50vw - 20rem) * 1.45));
transform-origin: bottom right;
transform: rotate(6deg);
}
}
@media (orientation: landscape) and (max-height: 32rem) {
.hero__ranke { display: none; }
}
/* ===================== Über uns ===================== */
.section--about { background: var(--paper); }
.about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__copy > p { margin-top: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.about__copy .section__title { margin-top: 0.2rem; }
.quote {
margin-top: 2rem; position: relative; padding-left: 2.9rem;
}
.quote::before {
content: ""; position: absolute; left: 0; top: 0.05em;
width: 1.8rem; height: 2.3rem;
background: left top / contain no-repeat
url('data:image/svg+xml;utf8,');
}
.quote__text { font-family: var(--font-hand); font-size: var(--step-2); color: var(--wine); line-height: 1.2; }
.quote__by { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-soft); }
.about__portrait { aspect-ratio: 4 / 5; max-height: 40rem; }
.about__portrait img { object-position: 30% 45%; }
.about__portrait .frame__cap { font-family: var(--font-hand); font-size: var(--step-1); }
@media (min-width: 60rem) {
.about__grid { grid-template-columns: 1.15fr 0.85fr; }
}
/* ===================== Speisekarte: die Tafel ===================== */
.chalk { margin-top: clamp(2rem, 5vw, 3.5rem); }
.chalk__frame {
margin-inline: auto;
background:
radial-gradient(140% 120% at 20% 0%, oklch(0.32 0.02 165 / 0.8), transparent 60%),
var(--chalk-bg);
color: var(--chalk-ink);
border: 10px solid oklch(0.30 0.03 50);
border-radius: 6px;
padding: clamp(1.8rem, 5vw, 3rem);
box-shadow: inset 0 0 60px oklch(0 0 0 / 0.45), 0 26px 50px -34px oklch(0.15 0.02 40 / 0.8);
position: relative;
}
/* Slow-Food-Auszeichnung: klebt schräg auf der oberen rechten Ecke der Tafel.
Auf dem Telefon ragt sie weniger über den Rand – sonst entstünde seitlicher
Scroll. */
.award {
position: absolute; top: 0; right: 0; z-index: 2;
width: clamp(4.75rem, 13vw, 8rem);
translate: 12% -22%; rotate: 7deg;
box-shadow: 0 14px 28px -14px oklch(0.15 0.02 40 / 0.75);
transition: rotate 0.25s var(--ease-out-quart);
}
.award img { display: block; width: 100%; height: auto; }
@media (hover: hover) { .award:hover { rotate: 2deg; } }
/* Erst ab 72rem steht neben der Tafel genug Rand, damit sie weiter überstehen darf. */
@media (min-width: 72rem) { .award { translate: 38% -26%; } }
.chalk__frame::before {
content: ""; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
background: radial-gradient(80% 60% at 70% 30%, oklch(1 0 0 / 0.04), transparent 70%);
}
/* ---------- Speisekarte (Auszug) ---------- */
.section--menu {
/* Überschrift und Tafel stehen auf derselben Breite – eine Quelle, damit sie
nicht auseinanderlaufen. */
--tafel-breite: min(100%, 58rem);
background: var(--paper-2);
}
/* Der Abschnitt ist breiter als die 46ch der übrigen: `balance` (global auf
h1–h3) würde die Überschrift mittig umbrechen, statt die Breite zu nutzen,
`pretty` füllt die Zeile. */
.section--menu .section__head { max-width: var(--tafel-breite); }
.section--menu .section__title { text-wrap: pretty; }
.section--menu .section__intro { margin-inline: auto; }
.section--menu .chalk__frame { width: var(--tafel-breite); }
/* Die Karte steht auf der Tafel – helle Kreide auf dunklem Grund. Die Tafel
wächst nach unten mit der Zahl der Gerichte. */
.menu-card { margin-top: 0; }
.menu-card__laden { color: color-mix(in oklch, var(--chalk-ink) 75%, transparent); margin: 0; }
/* Die Kategorien bleiben leise Beschriftungen – in der Handschrift der Tafel
sähen sie aus wie ein zweites „Frisch angeschrieben“. */
.menu-card__gruppe {
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: color-mix(in oklch, var(--chalk-ink) 62%, transparent);
margin: 2rem 0 0.7rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid color-mix(in oklch, var(--chalk-ink) 22%, transparent);
}
.menu-card__gruppe:first-child { margin-top: 0; }
.menu-item { padding: 0.8rem 0; }
.menu-item + .menu-item {
border-top: 1px dotted color-mix(in oklch, var(--chalk-ink) 18%, transparent);
}
/* Handschrift für die Gerichte – als hätte sie jemand angeschrieben. Die
Schrift läuft kleiner als die Auszeichnungsschrift, deshalb etwas mehr Grad. */
.menu-item__name {
font-family: var(--font-hand);
font-weight: 600;
font-size: var(--step-2);
line-height: 1.2;
color: var(--chalk-ink);
margin: 0 0 0.35rem;
}
.menu-item__text {
color: color-mix(in oklch, var(--chalk-ink) 80%, transparent);
margin: 0;
max-width: 62ch;
}
/* Ohne JS bleibt die Tafel leer – der Hinweis steht daneben auf Papier. */
.menu-noscript { color: var(--ink-soft); text-align: center; margin-top: 2rem; }
/* ---------- Aktuelles: Banner mit senkrechten Abschnitten ---------- */
.section--news {
background: var(--wine-deep); color: var(--on-dark);
padding-block: clamp(2rem, 5vw, 3rem);
}
.news__banner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.news__head .overline { color: var(--tulip-soft); }
.news__head .section__title { color: var(--on-dark); }
@media (width >= 60rem) {
.news__banner { grid-template-columns: auto 1fr; align-items: start; column-gap: clamp(2rem, 4vw, 3.5rem); }
}
.aktuell {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.aktuell__laden { color: var(--on-dark-soft); }
/* Breit: senkrechte Linie links an jeder Spalte. Schmal: die Spalten liegen
untereinander, dann trennt eine waagerechte Linie. */
.aktuell__eintrag {
display: grid; gap: 0.9rem; align-content: start;
padding: 0.25rem clamp(1.2rem, 3vw, 2rem);
border-left: 1px solid oklch(1 0 0 / 0.22);
}
@media (width < 44rem) {
.aktuell__eintrag { padding: 1.4rem 0; border-left: 0; border-top: 1px solid oklch(1 0 0 / 0.22); }
.aktuell__eintrag:first-child { border-top: 0; padding-top: 0; }
}
.aktuell__bild {
width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
border-radius: var(--radius); background: var(--wine-deep);
}
.aktuell__datum {
display: block; font-family: var(--font-hand);
font-size: var(--step-0); color: var(--gold);
}
.aktuell__art {
display: inline-block; margin-top: 0.3rem;
font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--on-dark-soft);
}
.aktuell__titel { font-family: var(--font-display); font-size: var(--step-1); color: var(--on-dark); margin: 0.3rem 0 0.5rem; }
.aktuell__beschreibung { color: var(--on-dark-soft); margin: 0; max-width: 52ch; font-size: var(--step--1); line-height: 1.6; }
.aktuell__beschreibung a { color: var(--on-dark); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* ===================== Wein & Bier ===================== */
.section--cellar { background: var(--walnut); color: var(--on-dark); }
.section--cellar .section__title,
.section--cellar .cellar__row dt { color: var(--on-dark); }
.section--cellar .overline { color: var(--tulip-soft); }
.section--cellar .section__intro { color: var(--on-dark-soft); }
.cellar__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cellar__img { aspect-ratio: 5 / 6; }
.cellar__list { margin-top: 1.8rem; display: grid; gap: 0; }
.cellar__row { padding-block: 1.15rem; border-top: 1px solid oklch(1 0 0 / 0.14); }
.cellar__row:last-child { border-bottom: 1px solid oklch(1 0 0 / 0.14); }
.cellar__row dt { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 0.3rem; }
.cellar__row dd { color: var(--on-dark-soft); max-width: 54ch; }
@media (min-width: 60rem) {
.cellar__grid { grid-template-columns: 0.8fr 1.2fr; }
}
/* ===================== Kultur ===================== */
.section--culture { background: var(--paper); }
.culture__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.events { list-style: none; padding: 0; display: grid; gap: 0; }
.event {
display: grid; gap: 0.2rem;
grid-template-columns: minmax(6.5rem, auto) 1fr;
grid-template-areas: "type title" "type meta";
column-gap: 1.4rem;
padding-block: 1.3rem;
border-top: 1px solid var(--line);
align-items: baseline;
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event__type {
grid-area: type; align-self: start;
font-family: var(--font-hand); font-size: var(--step-1); color: var(--wine); line-height: 1.1;
}
.event__title { grid-area: title; font-family: var(--font-display); font-size: var(--step-1); color: var(--walnut-ink); }
.event__meta { grid-area: meta; color: var(--ink-soft); font-size: var(--step--1); }
/* Auf dem Telefon bleiben neben der 6.5rem-Typspalte nur ~140px für den Titel –
dort untereinander statt zweispaltig. */
@media (max-width: 30rem) {
.event {
grid-template-columns: 1fr;
grid-template-areas: "type" "title" "meta";
row-gap: 0.15rem;
}
}
.teaser {
background: var(--tulip-soft);
border-radius: var(--radius);
padding: clamp(1.6rem, 4vw, 2.2rem);
color: var(--walnut-ink);
}
.teaser__title { font-size: var(--step-2); margin-bottom: 0.7rem; }
.teaser__text { color: color-mix(in oklch, var(--walnut-ink) 85%, transparent); margin-bottom: 1.2rem; }
@media (min-width: 54rem) {
.culture__grid { grid-template-columns: 1.4fr 0.6fr; }
}
/* ===================== Terrasse & Räume ===================== */
.section--spaces { background: var(--paper-2); }
.spaces__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.space { aspect-ratio: 4 / 3; }
.space__cap {
position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
padding: 2rem 1.3rem 1.1rem; color: var(--on-dark);
background: linear-gradient(transparent, oklch(0.18 0.03 40 / 0.85));
display: grid; gap: 0.1rem;
}
.space__seats { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.space__place { font-size: var(--step--1); color: var(--on-dark-soft); }
.spaces__note { margin-top: 1.8rem; text-align: center; font-size: var(--step-1); color: var(--ink-soft); }
.spaces__note a { color: var(--wine); font-weight: 700; text-underline-offset: 3px; display: inline-block; padding-block: 0.5rem; }
@media (min-width: 48rem) {
.spaces__grid { grid-template-columns: 1fr 1fr; }
}
/* ===================== Kontakt ===================== */
.section--contact { background: var(--wine-deep); color: var(--on-dark); }
.section--contact .section__title { color: var(--on-dark); }
.section--contact .overline { color: var(--tulip-soft); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact__details {
font-style: normal; margin-top: 1.8rem;
display: grid; gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.contact__block { color: var(--on-dark); line-height: 1.7; }
.contact__label {
display: block; font-family: var(--font-hand); font-size: var(--step-1);
color: var(--tulip-soft); margin-bottom: 0.3rem;
}
/* Telefon und WhatsApp sind der Hauptweg zur Reservierung – eigene Zeile,
eigene Trefferfläche, statt zwei 20px hohe Inline-Links am
. */
.contact__block a:not(.btn) {
color: var(--on-dark); text-decoration: none; text-underline-offset: 3px;
display: flex; align-items: center; width: max-content; max-width: 100%;
min-height: 44px;
}
@media (hover: hover) {
.contact__block a:not(.btn):hover { text-decoration: underline; }
}
.contact__block .btn { margin-top: 0.5rem; min-height: 2.75rem; padding: 0.45rem 1.3rem; }
.contact__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.section--contact .btn--solid { --btn-bg: var(--gold); --btn-fg: var(--walnut-ink); box-shadow: 0 8px 22px -12px oklch(0 0 0 / 0.7); }
.section--contact .btn--ghost { color: var(--on-dark); border-color: oklch(1 0 0 / 0.4); }
.section--contact .btn--ghost:hover { background: var(--on-dark); color: var(--wine-deep); border-color: var(--on-dark); }
.contact__map { aspect-ratio: 4 / 3; }
@media (min-width: 60rem) {
.contact__grid { grid-template-columns: 1.1fr 0.9fr; }
}
/* ===================== Footer ===================== */
.site-foot {
background: var(--walnut-ink); color: var(--on-dark-soft);
padding-top: clamp(2rem, 4vw, 3rem);
/* Home-Indicator nicht überbauen */
padding-bottom: max(clamp(2rem, 4vw, 3rem), env(safe-area-inset-bottom, 0px));
}
.foot__grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: start; }
.foot__brand { display: grid; justify-items: start; gap: 0.3rem; }
.foot__logo { height: clamp(3rem, 2.5rem + 1.5vw, 3.9rem); width: auto; display: block; }
.foot__motto { font-family: var(--font-hand); color: var(--tulip-soft); }
/* Hauslied-Player (neben dem Logo im Footer) */
.foot__lockup { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.hauslied {
display: inline-flex; align-items: center; gap: 0.5rem;
min-height: 44px;
padding: 0.45rem 1rem 0.45rem 0.8rem;
background: transparent; cursor: pointer;
border: 1.5px solid color-mix(in oklch, var(--gold) 55%, transparent);
border-radius: 999px; color: var(--gold);
font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s var(--ease-out-quart);
}
.hauslied:active { transform: translateY(0) scale(0.98); }
@media (hover: hover) {
.hauslied:hover { background: var(--gold); color: var(--walnut-ink); border-color: var(--gold); transform: translateY(-2px); }
}
.hauslied__icon {
position: relative; width: 14px; height: 14px; flex: none;
display: inline-grid; place-items: center;
}
/* Play: Dreieck */
.hauslied__icon::before {
content: ""; position: absolute; left: 3px;
border-left: 11px solid currentColor;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
transition: opacity 0.15s ease;
}
/* Pause: zwei Balken (nur wenn abgespielt) */
.hauslied__icon::after {
content: ""; position: absolute; inset: 1px auto 1px 0; width: 100%;
background:
linear-gradient(currentColor, currentColor) 2px 0 / 4px 100% no-repeat,
linear-gradient(currentColor, currentColor) 10px 0 / 4px 100% no-repeat;
opacity: 0; transition: opacity 0.15s ease;
}
.hauslied.is-playing .hauslied__icon::before { opacity: 0; }
.hauslied.is-playing .hauslied__icon::after { opacity: 1; }
.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;
}
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; }
.foot__nav a {
color: var(--on-dark-soft); text-decoration: none; font-weight: 600;
display: inline-flex; align-items: center; min-height: 44px;
}
@media (hover: hover) {
.foot__nav a:hover { color: var(--on-dark); }
}
.foot__legal { font-size: var(--step--1); color: color-mix(in oklch, var(--on-dark-soft) 80%, transparent); }
.foot__legal a { color: inherit; text-underline-offset: 2px; }
.foot__egg:hover { color: var(--tulip-soft); }
.foot__credit { display: flex; align-items: center; gap: 0.3rem 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
.foot__credit a { display: block; border-radius: 999px; transition: transform 0.2s var(--ease-out-quart); }
.foot__credit a:hover { transform: rotate(-2deg) scale(1.04); }
.foot__credit img { height: 2.1rem; width: auto; display: block; }
@media (min-width: 54rem) {
.foot__grid { grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "brand legal"; row-gap: 1.25rem; }
.foot__brand { grid-area: brand; }
.foot__nav { grid-area: nav; justify-content: flex-end; }
.foot__legal { grid-area: legal; text-align: right; }
.foot__credit { justify-content: flex-end; }
}
/* Mit Maus braucht die Leiste keine 44px-Trefferfläche – die schob den Text
sonst unter die Oberkante des Logos. */
@media (min-width: 54rem) and (pointer: fine) {
.foot__nav a { min-height: 0; line-height: 1.2; }
}
/* ===================== Reveal on scroll ===================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: none; }
/* ===================== Mobile nav =====================
56rem statt 52rem: bei 834px blieben zwischen Logo und erstem Link nur 16px –
eine Schriftmetrik weiter und die Leiste kollidiert. */
@media (max-width: 56rem) {
.nav__toggle {
display: inline-flex; align-items: center; gap: 0.5rem;
background: none; border: 0; cursor: pointer; color: inherit;
font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
padding: 0.4rem; margin-left: auto; min-height: 44px;
}
.nav__toggle-box { width: 22px; height: 14px; position: relative; }
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
background: currentColor; transition: transform 0.3s var(--ease-out-quart), opacity 0.2s ease;
}
.nav__toggle-bar { top: 6px; }
.nav__toggle-bar::before { top: -6px; }
.nav__toggle-bar::after { top: 6px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { top: 0; transform: rotate(90deg); opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after { top: 0; transform: rotate(90deg); }
.nav__menu {
position: fixed; inset: 0 0 0 auto; z-index: var(--z-nav-menu);
width: min(84vw, 320px); flex-direction: column; align-items: stretch;
justify-content: flex-start; gap: 0.5rem;
background: var(--paper);
padding: 5rem max(1.6rem, env(safe-area-inset-right, 0px))
max(2rem, env(safe-area-inset-bottom, 0px)) 1.6rem;
box-shadow: -20px 0 50px -30px oklch(0.15 0.03 30 / 0.8);
transform: translateX(100%);
transition: transform 0.35s var(--ease-out-expo);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav__menu.is-open { transform: translateX(0); }
.nav__links { flex-direction: column; gap: 0.2rem; }
.nav__links a {
color: var(--walnut-ink); font-size: 1.15rem;
display: flex; align-items: center; min-height: 48px;
border-bottom: 1px solid var(--line);
}
.site-head:not([data-elevated="true"]) .nav__links a { color: var(--walnut-ink); }
.nav__cta { margin-top: 1rem; align-self: stretch; }
body.nav-open { overflow: hidden; }
.nav-backdrop {
position: fixed; inset: 0; z-index: var(--z-backdrop);
background: oklch(0.18 0.03 30 / 0.5); backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}
/* ===================== Telefon hochkant =====================
Gemessen: Reservieren-Button lag bei 320/360px unter dem Fold, die
Öffnungszeiten auf jedem Telefon. Beides muss ohne Scrollen sichtbar sein –
der Hauptkontext ist „unterwegs, kurz vor dem Losgehen". */
@media (max-width: 30rem) {
.hero { --hero-pad-top: 1.5rem; padding-bottom: 2.5rem; }
.hero__kicker { margin-bottom: 0.7rem; }
.hero__title { font-size: clamp(2rem, 1.35rem + 3.2vw, 2.6rem); }
.hero__lead { font-size: var(--step-0); margin-top: 0.9rem; }
.hero__actions { margin-top: 1.35rem; }
.hero__hours { margin-top: 1.35rem; }
}
/* ===================== Telefon im Querformat =====================
~390px Höhe: 100svh-Hero würde die Copy aus dem Bild schieben, und für ein
hängendes Schild ist schlicht keine Höhe da. */
@media (orientation: landscape) and (max-height: 32rem) {
.hero {
min-height: 0;
padding-block: 1.5rem 2.5rem;
}
.hero__sign { display: none; }
.hero__title { font-size: var(--step-3); }
.hero__lead { margin-top: 0.9rem; }
.hero__actions, .hero__hours { margin-top: 1.1rem; }
}
/* ===================== Reservierungs-Dialog =====================
Natives