/* ===========================================================================
Ephesus — Freilassing
Stilbild: „Helle Karte im dunklen Haus."
Die Seite steht auf zwei Säulen, nicht auf gestapelten Vollbreiten-
Blöcken: links eine feste Leiste, die Marke, Zustand, Weg und Telefon
dauerhaft zeigt — rechts die Inhaltsspalte. Die Speisekarte kehrt die
Farbwelt um: eine helle Papierkarte, in das dunkle Haus gelegt.
Aufbau dieser Datei
01 Tokens
02 Reset und Grundlagen
03 Typografie
04 Gerüst: Leiste und Inhaltsspalte
05 Buttons
06 Seitenleiste
07 Aktionsleiste am unteren Rand (Handy)
08 Hero
09 Über das Haus
10 Speisekarte (helle Karte)
11 Gastraum: Bilderstreifen und Lightbox
12 Besuch, Öffnungszeiten, Karte
13 Fußzeile
14 Rechtliche Unterseiten
15 Bewegung und prefers-reduced-motion
16 Druck
Hinweis zur Spezifität: Vertikale Sektionsabstände stehen ausschließlich
auf `.sektion` und `.karte` — je eine Regel, ein Token. Kein Kindelement
bringt eigene Außenabstände mit, die sich damit überlagern könnten.
Innenabstände regelt die Fluss-Utility `.fluss`.
=========================================================================== */
/* ---------------------------------------------------------------------------
01 Tokens
------------------------------------------------------------------------ */
:root {
/* Farbe — das dunkle Haus */
--gruen-tief: #16211a; /* Grundfläche der Seite */
--gruen-flaeche: #1f2e23; /* angehobene Flächen: Leisten, Kacheln */
--gruen-tiefer: #101711; /* Vertiefungen: Seitenleiste, Fußzeile */
/* Farbe — Akzente */
--gold: #c9a227; /* Haarlinien, Marken */
--gold-hell: #e2c275; /* Lichtkanten, Fokusring, Primär-Button */
--holz: #b07a46; /* warmer Holzton, sparsam */
/* Farbe — Text auf Dunkel */
--creme: #f2e9dc; /* Fließtext — 13,9:1 */
--creme-leise: #c8bca9; /* Sekundärtext, Unterzeilen — 8,7:1 */
/* Farbe — die helle Karte. Eigene Palette, damit auf dem Papier nichts
aus der dunklen Welt durchschlägt. */
--karte-grund: #f4efe4; /* Papier */
--karte-grund-2: #ece5d6; /* zweite Papierlage: Kopf, Auswahl */
--karte-tinte: #17241b; /* Text auf Papier — 14,0:1 */
--karte-leise: #576558; /* Beschreibungen, Auswahl — 5,4:1 / 4,9:1 */
--karte-preis: #7a5e1e; /* Preise, tiefes Gold — 5,3:1 */
--karte-linie: rgba(23, 36, 27, 0.14);
--karte-linie-stark: rgba(23, 36, 27, 0.28);
/* Farbe — Linien und Licht */
--linie-gold: rgba(201, 162, 39, 0.34);
--linie-leise: rgba(242, 233, 220, 0.13);
--licht: 226, 194, 117; /* RGB-Tripel für Lichtverläufe */
/* Typografie — eine Familie, Hierarchie über Gewicht und Laufweite.
Figtree: geometrisch, doppelstöckiges a, trägt schwere Grade gut. */
--schrift: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--schreibschrift: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
--g-text: 400;
--g-kraeftig: 600;
--g-halbfett: 700;
--g-fett: 800;
/* Laufweite: je größer der Grad, desto enger. */
--lw-display: -0.035em;
--lw-gross: -0.025em;
--lw-mittel: -0.015em;
--lw-label: 0.13em; /* die einzige Sperrung: Mini-Labels */
--t-mini: 0.8125rem; /* 13 px */
--t-klein: 0.9375rem; /* 15 px */
--t-basis: 1.0625rem; /* 17 px */
--t-lead: clamp(1.125rem, 0.95rem + 0.7vw, 1.3125rem);
--t-h3: clamp(1.3125rem, 1.15rem + 0.65vw, 1.625rem);
--t-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3.125rem);
--t-h1: clamp(2.6rem, 1.7rem + 4.2vw, 4.5rem);
/* Maß und Raum */
--rail-b: 19rem; /* Breite der Seitenleiste am Rechner */
--rand: clamp(1.25rem, 4vw, 3rem);
--abstand-sektion: clamp(4rem, 8vw, 7rem);
--leiste-h: 56px; /* Kopfleiste am Handy */
--aktion-h: 60px; /* Aktionsleiste unten am Handy */
--radius: 3px;
--radius-gross: 6px;
--tempo: 180ms;
--kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
color-scheme: dark;
}
@media (min-width: 68rem) {
:root {
--t-basis: 1.125rem; /* 18 px */
--leiste-h: 0px;
--aktion-h: 0px;
}
}
/* ---------------------------------------------------------------------------
02 Reset und Grundlagen
------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--gruen-tief);
color: var(--creme);
font-family: var(--schrift);
font-size: var(--t-basis);
font-weight: var(--g-text);
line-height: 1.6;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Solange die Lightbox offen ist, scrollt die Seite dahinter nicht mit. */
body.ist-gesperrt { overflow: hidden; }
img,
svg,
video { display: block; max-width: 100%; }
/* Muss nach der Regel oben stehen: sonst überstimmt `svg { display: block }`
das hidden-Attribut, und ausgeblendete Symbole bleiben sichtbar. */
[hidden] { display: none !important; }
img,
video { height: auto; }
button,
input,
select { font: inherit; color: inherit; }
/* Sichtbarer Fokus — überall gleich, nie entfernt. */
:focus-visible {
outline: 2px solid var(--gold-hell);
outline-offset: 3px;
border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }
/* Auf dem hellen Papier braucht der Fokusring eine dunkle Farbe. */
.karte__innen :focus-visible { outline-color: var(--karte-preis); }
.sprunglink {
position: absolute;
inset-inline-start: var(--rand);
inset-block-start: -100%;
z-index: 200;
padding: 0.7rem 1.1rem;
background: var(--gold-hell);
color: var(--gruen-tief);
font-weight: 600;
text-decoration: none;
border-radius: var(--radius);
}
.sprunglink:focus { inset-block-start: 0.75rem; }
.nur-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
03 Typografie
------------------------------------------------------------------------ */
h1, h2, h3, h4 {
margin: 0;
font-family: var(--schrift);
font-weight: var(--g-fett);
line-height: 1.1;
letter-spacing: var(--lw-gross);
text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: var(--lw-display); line-height: 0.98; }
h2 { font-size: var(--t-h2); letter-spacing: var(--lw-display); line-height: 1.02; }
h3, h4 {
font-size: var(--t-h3);
font-weight: var(--g-halbfett);
line-height: 1.18;
letter-spacing: var(--lw-mittel);
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--gold-hell); text-underline-offset: 0.2em; }
a:hover { color: var(--creme); }
strong { font-weight: 600; }
.lead {
font-size: var(--t-lead);
line-height: 1.55;
font-weight: var(--g-kraeftig);
color: var(--creme);
max-inline-size: 46ch;
}
.leise { color: var(--creme-leise); }
.klein { font-size: var(--t-klein); }
/* Das Wortlogo. Schreibschrift ausschließlich hier. */
.wortmarke {
font-family: var(--schreibschrift);
font-weight: 400;
line-height: 1;
color: var(--gold-hell);
letter-spacing: 0.01em;
/* Die Schreibschrift hat starke Unterlängen — Raum dafür reservieren. */
padding-block-end: 0.12em;
}
.haarlinie {
border: 0;
block-size: 1px;
background: linear-gradient(90deg, var(--gold), var(--linie-gold) 42%, transparent 92%);
opacity: 0.9;
}
/* ---------------------------------------------------------------------------
04 Gerüst
Am Rechner: feste Leiste links, Inhalt rechts. Darunter liegt alles
untereinander, die Leiste wird zur schmalen Kopfzeile.
------------------------------------------------------------------------ */
.geruest {
min-block-size: 100vh;
/* Platz für die Aktionsleiste am unteren Rand (am Rechner 0). */
padding-block-end: calc(var(--aktion-h) + env(safe-area-inset-bottom, 0px));
}
.inhalt {
/* Ohne das sprengen breite Kinder — Tabellen, Bilderstreifen — das
Raster statt zu scrollen. */
min-inline-size: 0;
}
@media (min-width: 68rem) {
.geruest {
display: grid;
grid-template-columns: var(--rail-b) minmax(0, 1fr);
}
}
/* Einzige Regel für vertikalen Sektionsabstand. */
.sektion {
position: relative;
padding-block: var(--abstand-sektion);
padding-inline: var(--rand);
scroll-margin-block-start: calc(var(--leiste-h) + 0.75rem);
}
/* Textspalte innerhalb einer Sektion. */
.spalte { max-inline-size: 54rem; }
.spalte > * + * { margin-block-start: 1.1rem; }
.spalte > p { max-inline-size: 62ch; }
/* Abstände innerhalb eines Blocks — ein Token, keine Einzelmargins. */
.fluss > * + * { margin-block-start: var(--fluss, 1.25rem); }
/* ---------------------------------------------------------------------------
05 Buttons
------------------------------------------------------------------------ */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.78rem 1.3rem;
border: 1px solid transparent;
border-radius: var(--radius);
font-size: var(--t-klein);
font-weight: var(--g-halbfett);
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: background-color var(--tempo) var(--kurve),
border-color var(--tempo) var(--kurve),
color var(--tempo) var(--kurve);
}
.knopf--licht {
background: var(--gold-hell);
color: var(--gruen-tief);
}
.knopf--licht:hover { background: #eed49a; color: var(--gruen-tief); }
.knopf--linie {
border-color: var(--linie-gold);
color: var(--creme);
background: transparent;
}
.knopf--linie:hover {
border-color: var(--gold-hell);
color: var(--gold-hell);
background: rgba(var(--licht), 0.07);
}
.knopf svg { flex: none; inline-size: 1.05em; block-size: 1.05em; }
/* ---------------------------------------------------------------------------
06 Seitenleiste
Am Rechner steht sie über die ganze Höhe und bleibt beim Scrollen stehen.
Sie trägt alles, was durchgehend erreichbar sein soll. Am Handy klappt
sie zu einer schmalen Kopfleiste zusammen; die Navigation übernimmt
dann die Aktionsleiste am unteren Rand.
------------------------------------------------------------------------ */
.rail {
position: sticky;
inset-block-start: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
block-size: var(--leiste-h);
padding-inline: var(--rand);
background: rgba(16, 23, 17, 0.92);
border-block-end: 1px solid var(--linie-leise);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.rail__oben {
display: flex;
align-items: center;
gap: 0.9rem;
min-inline-size: 0;
}
.rail__marke {
display: flex;
align-items: baseline;
gap: 0.6rem;
text-decoration: none;
color: inherit;
}
.rail__marke .wortmarke { font-size: 1.7rem; }
.rail__seit {
font-size: var(--t-mini);
color: var(--creme-leise);
white-space: nowrap;
}
/* Am Handy trägt die Leiste nur Marke und Zustand. */
.rail__nav,
.rail__unten { display: none; }
@media (min-width: 68rem) {
.rail {
/* Volle Bildschirmhöhe, oben klebend: die Leiste steht, der Inhalt
läuft daran vorbei. */
block-size: 100vh;
block-size: 100svh;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 2rem;
padding-block: clamp(2rem, 3.5vw, 3rem);
padding-inline: clamp(1.5rem, 2vw, 2.25rem);
border-block-end: 0;
border-inline-end: 1px solid var(--linie-leise);
background: var(--gruen-tiefer);
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* Ein schwacher Lichtschein von oben — dieselbe Lampe wie im Hero. */
background-image: radial-gradient(120% 34% at 50% 0%, rgba(var(--licht), 0.09), transparent 70%);
overflow-y: auto;
}
/* Diese vier Regeln sind bewusst an `.rail` gebunden: die Rechtsseiten
verwenden dieselben Bausteine in ihrer schmalen Kopfzeile und sollen
sie dort nicht stehend bekommen. */
.rail .rail__oben {
display: grid;
gap: 1.4rem;
justify-items: start;
}
.rail .rail__marke {
display: grid;
gap: 0.35rem;
justify-items: start;
}
.rail .rail__marke .wortmarke { font-size: 2.6rem; }
.rail .rail__seit {
font-size: var(--t-mini);
letter-spacing: 0.04em;
white-space: normal;
}
.rail__nav { display: block; }
.rail__unten { display: grid; gap: 1.1rem; justify-items: start; }
}
/* Navigation: keine Unterstreichung, sondern ein wandernder Goldstrich
an der linken Kante — er zeigt, wo man gerade steht. */
.rail__nav ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.15rem;
}
.rail__nav a {
position: relative;
display: block;
padding: 0.55rem 0 0.55rem 1.15rem;
color: var(--creme-leise);
font-size: 1.05rem;
font-weight: var(--g-kraeftig);
letter-spacing: var(--lw-mittel);
text-decoration: none;
transition: color var(--tempo) var(--kurve);
}
.rail__nav a::before {
content: '';
position: absolute;
inset-inline-start: 0;
inset-block: 0.62em auto;
inline-size: 0;
block-size: 2px;
background: var(--gold-hell);
transition: inline-size var(--tempo) var(--kurve);
}
.rail__nav a:hover { color: var(--creme); }
.rail__nav a:hover::before { inline-size: 0.6rem; }
.rail__nav a[aria-current='true'] { color: var(--gold-hell); }
.rail__nav a[aria-current='true']::before { inline-size: 0.7rem; }
.rail__ruf { inline-size: 100%; }
.rail__adresse {
font-style: normal;
font-size: var(--t-klein);
line-height: 1.7;
color: var(--creme-leise);
}
.rail__recht {
font-size: var(--t-mini);
color: var(--creme-leise);
}
.rail__recht a { color: var(--creme-leise); text-decoration: none; }
.rail__recht a:hover { color: var(--gold-hell); }
/* Der Live-Zustand: offen oder geschlossen, mit einem Punkt davor. */
.status {
display: inline-grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.1rem 0.55rem;
padding: 0.45rem 0.8rem;
border: 1px solid var(--linie-gold);
border-radius: 999px;
background: rgba(var(--licht), 0.07);
font-size: var(--t-mini);
line-height: 1.35;
}
.status__punkt {
grid-row: 1 / -1;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: #7ec98a;
box-shadow: 0 0 0 3px rgba(126, 201, 138, 0.2);
}
.status__text { font-weight: var(--g-kraeftig); color: var(--creme); }
.status__zusatz { color: var(--creme-leise); }
.status__zusatz:empty { display: none; }
.status[data-zustand='geschlossen'] {
border-color: var(--linie-leise);
background: transparent;
}
.status[data-zustand='geschlossen'] .status__punkt {
background: var(--holz);
box-shadow: 0 0 0 3px rgba(176, 122, 70, 0.18);
}
/* Am Handy ist neben der Marke wenig Platz: nur der Zustand, kein Zusatz. */
@media (max-width: 67.99rem) {
.status { padding: 0.3rem 0.6rem; }
.status__zusatz { display: none; }
}
@media (max-width: 26rem) {
.rail__seit { display: none; }
}
@media (min-width: 68rem) {
.rail .status {
justify-self: start;
padding: 0.5rem 0.9rem;
}
.rail .status__text { grid-column: 2; grid-row: 1; }
.rail .status__zusatz { grid-column: 2; grid-row: 2; }
}
/* ---------------------------------------------------------------------------
07 Aktionsleiste am unteren Rand
Ersetzt am Handy die Navigation der Seitenleiste. Der Anruf — die
wichtigste Handlung des Hauses — sitzt dabei immer unter dem Daumen.
------------------------------------------------------------------------ */
.handyleiste {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 70;
display: grid;
grid-template-columns: repeat(4, 1fr);
block-size: calc(var(--aktion-h) + env(safe-area-inset-bottom, 0px));
padding-block-end: env(safe-area-inset-bottom, 0px);
background: rgba(16, 23, 17, 0.96);
border-block-start: 1px solid var(--linie-leise);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.handyleiste a {
display: grid;
gap: 0.15rem;
place-items: center;
align-content: center;
color: var(--creme-leise);
font-size: 0.6875rem;
font-weight: var(--g-kraeftig);
letter-spacing: 0.02em;
text-decoration: none;
}
.handyleiste svg { inline-size: 21px; block-size: 21px; }
.handyleiste a[aria-current='true'] { color: var(--gold-hell); }
/* Der Anruf ist die Hauptsache und wird als einziger Punkt abgesetzt:
eigene Trennlinie, Goldton. */
.handyleiste__ruf {
color: var(--gold-hell);
border-inline-start: 1px solid var(--linie-leise);
}
/* „Öffnungszeiten" ist die längste Beschriftung der Leiste und stößt auf sehr
schmalen Geräten an die Nachbarn. Dort eine Spur kleiner und ohne Sperrung. */
@media (max-width: 22.5rem) {
.handyleiste a { font-size: 0.625rem; letter-spacing: 0; }
}
@media (min-width: 68rem) {
.handyleiste { display: none; }
}
/* ---------------------------------------------------------------------------
08 Hero
Der Film aus dem Laden füllt die Inhaltsspalte. Damit er nicht als Kasten
auf der Seite klebt, löst ihn ein Verlauf nach unten vollständig in
--gruen-tief auf.
------------------------------------------------------------------------ */
.hero {
position: relative;
display: grid;
align-items: end;
/* Knapp unter Bildschirmhöhe: der Film trägt den Einstieg, aber der
Anfang der Seite bleibt sichtbar. svh vermeidet das Springen durch die
ein- und ausfahrende Adressleiste am Handy. */
min-block-size: min(84vh, 800px);
min-block-size: min(84svh, 800px);
padding-block: 4rem clamp(2.5rem, 6vw, 4.5rem);
overflow: hidden;
isolation: isolate;
scroll-margin-block-start: var(--leiste-h);
}
@media (min-width: 68rem) {
.hero {
/* Die Kopfleiste fällt am Rechner weg — der Film beginnt oben bündig. */
min-block-size: min(92vh, 920px);
min-block-size: min(92svh, 920px);
}
}
.hero__film {
position: absolute;
inset: 0;
z-index: -2;
/* Der Film ist Fläche, kein Bedienelement: Berührungen gehen durch ihn
hindurch, damit ihn niemand versehentlich anhält. */
pointer-events: none;
}
/* Der Film. Er ist von Anfang an vollständig durchsichtig und nimmt keine
Berührungen an — damit ist auch ein Abspielsymbol, das Safari ihm
überstülpen könnte, unsichtbar und untastbar. Sichtbar wird er erst,
wenn app.js nachgewiesen hat, dass er wirklich Bilder liefert; sonst
wird er ganz aus dem Dokument entfernt. */
.hero__film video {
opacity: 0;
pointer-events: none;
}
.hero__film video[data-laeuft] {
opacity: 1;
transition: opacity 500ms var(--kurve);
}
/* Beide liegen deckungsgleich und gleich abgestimmt übereinander. */
.hero__film video,
.hero__ersatz {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: 50% 38%;
/* Leichte Angleichung an die Palette — das Essen behält seine Farbe. */
filter: saturate(0.94) contrast(1.06) brightness(0.92);
}
/* Der Schleier: unten voll in die Seitenfläche, oben genug Tiefe für die
Kopfleiste. Der Text steht unten links, deshalb trägt der untere
Verlauf die Last. */
.hero__schleier {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(22, 33, 26, 0.55) 0%,
rgba(22, 33, 26, 0.2) 58%,
rgba(22, 33, 26, 0) 100%),
linear-gradient(180deg,
rgba(12, 18, 13, 0.7) 0%,
rgba(12, 18, 13, 0.24) 14%,
rgba(22, 33, 26, 0.2) 34%,
rgba(22, 33, 26, 0.7) 54%,
rgba(22, 33, 26, 0.93) 72%,
var(--gruen-tief) 92%);
}
/* Die Ersatzbewegung: eine langsame Kamerafahrt auf dem Standbild.
Sie läuft, solange kein Film übernimmt — und sie läuft überall, weil sie
weder Video noch animiertes Bild ist. Autoplay-Sperren greifen auf
CSS-Bewegungen nicht, und Safari stülpt ihnen kein Bedienelement über.
Vier Sekunden hin, vier zurück: dieselbe Fahrt wie im Film. */
@keyframes hero-fahrt {
from { transform: scale(1.01); }
to { transform: scale(1.19); }
}
.hero__ersatz[data-fahrt] {
transform-origin: 50% 44%;
animation: hero-fahrt 4s ease-in-out infinite alternate;
will-change: transform;
}
.hero__ersatz[data-angehalten] { animation-play-state: paused !important; }
/* Übergabe an den Film: das Standbild blendet weich aus. */
.hero__ersatz[data-uebergeben] { opacity: 0; transition: opacity 500ms var(--kurve); }
/* Warmes Licht von oben — wie eine Pendelleuchte über der Szene. */
.hero::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 62%;
z-index: -1;
pointer-events: none;
background: radial-gradient(48% 88% at 34% -6%, rgba(var(--licht), 0.17), rgba(var(--licht), 0.05) 40%, transparent 76%);
}
.hero__text {
position: relative;
z-index: 1;
padding-inline: var(--rand);
max-inline-size: 38rem;
}
.hero__text > * + * { margin-block-start: 1.25rem; }
/* Der kurze Titel trägt mehr Grad als der frühere Zweizeiler. Die untere
Grenze ist so gewählt, dass „Freilassings" auch am 320-px-Gerät in eine
Zeile passt; darüber wächst er schneller mit als der übrige Text. */
.hero h1 {
font-size: clamp(2.75rem, 1.35rem + 5.6vw, 5.25rem);
letter-spacing: -0.04em;
text-wrap: balance;
}
.hero__text > h1 + * { margin-block-start: 1.5rem; }
.hero__satz {
font-size: var(--t-lead);
line-height: 1.5;
color: var(--creme);
max-inline-size: 34ch;
}
.hero__knoepfe {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-block-start: 1.75rem;
}
/* Erscheint nur, wenn im Betriebssystem „Bewegung reduzieren" eingestellt
ist. Dann braucht es eine Möglichkeit, den Film anzuhalten; sonst hat der
Hero bewusst nichts zum Anfassen. */
.film-schalter {
position: absolute;
inset-block-end: clamp(1rem, 3vw, 1.75rem);
inset-inline-end: var(--rand);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
padding: 0;
border: 1px solid var(--linie-gold);
border-radius: 50%;
background: rgba(16, 23, 17, 0.72);
color: var(--creme);
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.film-schalter:hover { border-color: var(--gold-hell); color: var(--gold-hell); }
/* ---------------------------------------------------------------------------
08b Fotos
Ein Baustein für alle Aufnahmen der Seite. Die Fotos sind Hochformat vom
Handy (3:4); jede Verwendung setzt ihr eigenes Seitenverhältnis und
schneidet mit object-fit: cover zu. Wo der Bildmittelpunkt nicht taugt,
steht die Verschiebung als object-position am ![]()
im Markup — dort,
wo auch das Bild steht.
Keine Filter, keine Farbstiche, keine Verläufe über den Bildern: die
Bildunterschrift steht unter dem Foto, nicht darauf.
------------------------------------------------------------------------ */
/* `align-content: start` ist hier keine Kosmetik: ohne sie dehnt das Raster
die Bildzeile, wenn die Kachel daneben eine zweizeilige Bildunterschrift
hat — dann stünden Fotos und Platzhalter in einer Reihe verschieden hoch.
Die Höhe kommt allein aus dem Seitenverhältnis. */
.bild {
margin: 0;
display: grid;
align-content: start;
gap: 0.6rem;
}
/* `display: contents` reicht die Kinder von ans Raster durch — und
das schließt ein, das dort sonst ein eigenes (leeres) Feld belegt
und das Bild um eine Lücke nach unten schiebt. Deshalb ausdrücklich weg. */
.bild picture { display: contents; }
.bild source,
.streifen__bild source { display: none; }
.bild img {
inline-size: 100%;
object-fit: cover;
border-radius: var(--radius);
background: var(--gruen-flaeche);
}
/* Bildunterschrift: klein, gold, höchstens eine Zeile Gedanke. */
.bildtext {
color: var(--gold-hell);
font-size: var(--t-mini);
font-weight: var(--g-kraeftig);
letter-spacing: 0.01em;
line-height: 1.4;
}
/* Die drei Seitenverhältnisse, die auf der Seite vorkommen. */
/* ---------------------------------------------------------------------------
09 Über die Küche
Überschrift links, Text rechts. Der Abschnitt besteht nur aus zwei Sätzen —
als einzelne schmale Spalte bliebe daneben eine große leere Fläche stehen,
deshalb tragen ihn zwei Spalten gemeinsam.
------------------------------------------------------------------------ */
/* Ein Strang von oben nach unten: Überschrift, ein Absatz, das Haus in voller
Breite, noch ein Absatz. Der Text behält seine Lesebreite, das Bild nicht —
dieser Sprung ist der Punkt. */
.ueber > * + * { margin-block-start: 1.25rem; }
.ueber p { max-inline-size: 62ch; }
/* Die einzige Außenaufnahme der Seite, unbeschnitten: kein aspect-ratio, kein
object-fit, keine Höhe von außen. Was die Breite vorgibt, ergibt die Höhe.
Oben und unten bewusst viel Luft, damit sie für sich steht. */
.aussenbild {
margin: 0;
display: grid;
gap: 0.75rem;
}
.ueber > .aussenbild { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }
.ueber > .aussenbild + * { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); }
.aussenbild picture { display: contents; }
.aussenbild source { display: none; }
.aussenbild img {
inline-size: 100%;
block-size: auto;
border-radius: var(--radius);
}
/* ---------------------------------------------------------------------------
09b Vom Spieß
Drei Bilder nebeneinander. Am Handy stehen sie ebenfalls nebeneinander und
werden gewischt — wie der Bilderstreifen im Gastraum, nur ohne Pfeile:
drei Felder überblickt man auch ohne Bedienelement.
------------------------------------------------------------------------ */
.spiess__kopf { max-inline-size: 54rem; }
.spiess__kopf p { margin-block-start: 0.85rem; max-inline-size: 52ch; }
.spiess__reihe,
.speisen__reihe {
margin-block-start: clamp(1.75rem, 4vw, 2.5rem);
margin-inline: calc(var(--rand) * -1);
padding-inline: var(--rand);
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(14rem, 20rem);
gap: clamp(0.75rem, 2vw, 1.25rem);
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scroll-padding-inline-start: var(--rand);
scrollbar-width: thin;
scrollbar-color: var(--linie-gold) transparent;
}
.spiess__reihe::-webkit-scrollbar,
.speisen__reihe::-webkit-scrollbar { block-size: 6px; }
.spiess__reihe::-webkit-scrollbar-track,
.speisen__reihe::-webkit-scrollbar-track { background: var(--linie-leise); border-radius: 999px; }
.spiess__reihe::-webkit-scrollbar-thumb,
.speisen__reihe::-webkit-scrollbar-thumb { background: var(--linie-gold); border-radius: 999px; }
.spiessbild,
.speisenbild { scroll-snap-align: start; }
.spiessbild img { aspect-ratio: 4 / 5; }
/* 5:4 für die Speisenkacheln. Die Aufnahmen sind Querformat (16:9) und zeigen
das ganze Blech; im Hochformat bliebe davon ein Mittelstreifen übrig, im
Quadrat fielen die Ränder der Baklavaplatte weg. Bei 5:4 bleiben gut 70 %
der Bildbreite stehen — genug für das ganze Blech, ohne dass die Kachel zu
einem flachen Streifen wird. */
.speisenbild img { aspect-ratio: 5 / 4; }
/* Passen alle Felder nebeneinander, braucht es kein Scrollen mehr — drei
Spießbilder früher als fünf Speisenkacheln. */
@media (min-width: 52rem) {
.spiess__reihe {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-columns: auto;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
}
}
@media (min-width: 64rem) {
.speisen__reihe {
grid-auto-flow: row;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-columns: auto;
margin-inline: 0;
padding-inline: 0;
overflow: visible;
}
}
/* ---------------------------------------------------------------------------
09c Unsere Speisen
Fünf Kacheln, sonst nichts — die Überschrift trägt den Abschnitt allein.
------------------------------------------------------------------------ */
.speisen__reihe { grid-auto-columns: minmax(12.5rem, 18rem); }
/* ---------------------------------------------------------------------------
10 Speisekarte
Die Karte kehrt die Farbwelt um: helles Papier, dunkelgrüne Tinte, Preise
in tiefem Gold. Sie liegt als eigenes Objekt im dunklen Haus — man merkt
beim Scrollen, dass man jetzt die Karte in der Hand hat.
Rund 130 Positionen. Statt einer endlosen Scrollstrecke wählt man links
die Kategorie und liest rechts nur diese. speisekarte.js baut daraus
ARIA-Tabs; Preise stehen ausschließlich in data/menu.js.
------------------------------------------------------------------------ */
.karte {
padding-block: var(--abstand-sektion);
padding-inline: var(--rand);
scroll-margin-block-start: calc(var(--leiste-h) + 0.75rem);
}
.karte__innen {
max-inline-size: 72rem;
padding: clamp(1.5rem, 4vw, 3.25rem);
border-radius: var(--radius-gross);
background: var(--karte-grund);
color: var(--karte-tinte);
/* Die Karte liegt auf dem Tisch, nicht in der Seite: harter Schatten
nach unten, oben eine helle Kante. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 0 rgba(201, 162, 39, 0.35),
0 26px 60px -30px rgba(0, 0, 0, 0.75);
}
.karte__innen a { color: var(--karte-preis); }
.karte__innen a:hover { color: var(--karte-tinte); }
.karte__kopf {
padding-block-end: clamp(1.5rem, 3vw, 2.25rem);
margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
border-block-end: 1px solid var(--karte-linie-stark);
}
.karte__kopf h2 { color: var(--karte-tinte); }
.karte__kopf p {
margin-block-start: 0.85rem;
max-inline-size: 48ch;
color: var(--karte-leise);
font-size: var(--t-klein);
}
/* minmax(0, 1fr) statt 1fr: sonst zieht die waagerechte Auswahlleiste die
Spalte auf ihre volle Inhaltsbreite auf, und die Seite scrollt seitlich. */
.karte__raster {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
}
@media (min-width: 62rem) {
.karte__raster {
grid-template-columns: 13.5rem minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
}
/* --- Kategorienauswahl ---------------------------------------------------
Am Rechner eine stehende Liste, die neben der Karte mitläuft; am Handy
eine waagerecht scrollende Leiste.
---------------------------------------------------------------------- */
.kategorien {
/* Das Band läuft am Handy über die Papierkante hinaus. Der Innenabstand
sitzt an der Spur selbst, damit die Kategorien beim Wischen bis an die
Kante laufen — sichtbar wird so, dass rechts noch mehr kommt. */
margin-inline: calc(clamp(1.5rem, 4vw, 3.25rem) * -1);
border-block: 1px solid var(--karte-linie);
background: var(--karte-grund-2);
}
.kategorien__spur {
display: flex;
align-items: center;
gap: 0.35rem;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
padding-block: 0.5rem;
padding-inline: clamp(1.5rem, 4vw, 3.25rem);
/* Sonst rastet die erste Kategorie bündig an der Papierkante ein. */
scroll-padding-inline-start: clamp(1.5rem, 4vw, 3.25rem);
}
.kategorien__spur::-webkit-scrollbar { display: none; }
.karte-tab {
flex: none;
scroll-snap-align: start;
padding: 0.55rem 0.9rem;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--karte-leise);
font-size: var(--t-klein);
font-weight: var(--g-kraeftig);
letter-spacing: var(--lw-mittel);
white-space: nowrap;
cursor: pointer;
transition: color var(--tempo) var(--kurve), background-color var(--tempo) var(--kurve);
}
.karte-tab:hover { color: var(--karte-tinte); background: rgba(23, 36, 27, 0.06); }
.karte-tab[aria-selected='true'] {
background: var(--karte-tinte);
color: var(--karte-grund);
}
.kategorien__trenner {
flex: none;
inline-size: 1px;
block-size: 1.4rem;
margin-inline: 0.4rem;
background: var(--karte-linie-stark);
}
@media (min-width: 62rem) {
.kategorien {
position: sticky;
inset-block-start: 1.5rem;
margin-inline: 0;
border: 0;
background: transparent;
}
.kategorien__spur {
display: grid;
gap: 0.1rem;
overflow: visible;
padding: 0;
}
.karte-tab {
inline-size: 100%;
text-align: start;
padding: 0.6rem 0.85rem;
white-space: normal;
}
/* Am Rechner steht statt eines vollen Blocks ein feiner Balken links —
ruhiger in einer langen Liste. */
.karte-tab[aria-selected='true'] {
background: rgba(23, 36, 27, 0.07);
color: var(--karte-tinte);
box-shadow: inset 2px 0 0 var(--karte-preis);
}
.kategorien__trenner {
inline-size: auto;
block-size: 1px;
margin: 0.65rem 0.85rem;
}
}
/* --- Eine Kategorie ------------------------------------------------------ */
.karte__koerper { min-inline-size: 0; }
.kategorie { max-inline-size: 46rem; }
.kategorie:focus { outline: none; }
.kategorie__kopf {
display: grid;
gap: 0.3rem;
margin-block-end: 0.5rem;
}
.kategorie__gruppe {
font-size: var(--t-mini);
font-weight: var(--g-kraeftig);
letter-spacing: var(--lw-label);
text-transform: uppercase;
color: var(--karte-preis);
}
.kategorie__name { color: var(--karte-tinte); }
.kategorie__notiz {
font-size: var(--t-klein);
color: var(--karte-leise);
}
.kategorie__liste { margin: 0; padding: 0; list-style: none; }
/* --- Eine Position -------------------------------------------------------
Kein Punktraster zwischen Name und Preis: der Preis steht in einer
eigenen, rechts ausgerichteten Spalte, darunter eine Haarlinie. Das
liest sich auch am schmalen Handy noch als Tabelle.
---------------------------------------------------------------------- */
.gericht {
padding-block: 0.8rem;
border-block-end: 1px solid var(--karte-linie);
}
.gericht:last-child { border-block-end: 0; }
.gericht__zeile {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 1.5rem;
align-items: baseline;
}
.gericht__name {
font-weight: var(--g-kraeftig);
letter-spacing: var(--lw-mittel);
color: var(--karte-tinte);
}
.gericht__preis {
font-weight: var(--g-halbfett);
font-variant-numeric: tabular-nums;
color: var(--karte-preis);
white-space: nowrap;
}
.gericht__preis .euro { font-weight: var(--g-kraeftig); opacity: 0.72; }
.euro { margin-inline-start: 0.1em; }
/* Zwei Größen: klein und groß rechtsbündig untereinander. */
.gericht__groessen {
margin: 0;
display: grid;
grid-template-columns: auto auto;
column-gap: 0.6rem;
row-gap: 0.1rem;
text-align: end;
font-size: var(--t-klein);
}
.gericht__groessen dt {
color: var(--karte-leise);
font-size: var(--t-mini);
}
.gericht__groessen dd {
margin: 0;
font-weight: var(--g-halbfett);
font-variant-numeric: tabular-nums;
color: var(--karte-preis);
white-space: nowrap;
}
.gericht__beschreibung {
margin-block-start: 0.2rem;
max-inline-size: 58ch;
font-size: var(--t-klein);
line-height: 1.5;
color: var(--karte-leise);
}
/* Varianten hängen eingerückt unter ihrer Position. */
.gericht__varianten {
margin: 0.55rem 0 0;
padding-inline-start: 0.9rem;
border-inline-start: 2px solid var(--karte-linie);
list-style: none;
}
.gericht__varianten li + li { margin-block-start: 0.3rem; }
.gericht__varianten .gericht__name {
font-weight: var(--g-text);
color: var(--karte-leise);
font-size: var(--t-klein);
}
.gericht__varianten .gericht__preis { font-size: var(--t-klein); }
/* Reine Preislisten — etwa Spirituosen — dürfen zweispaltig laufen. */
@media (min-width: 46rem) {
.kategorie--liste .kategorie__liste {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(2rem, 4vw, 3.5rem);
}
}
.kategorie--liste .gericht { padding-block: 0.6rem; }
.kategorie--liste .gericht__name { font-weight: var(--g-text); }
.kategorie--liste .gericht:last-child { border-block-end: 1px solid var(--karte-linie); }
.karte__hinweise {
--fluss: 0.5rem;
margin-block-start: clamp(2rem, 4vw, 3rem);
padding-block-start: 1.25rem;
border-block-start: 1px solid var(--karte-linie-stark);
max-inline-size: 62ch;
font-size: var(--t-mini);
color: var(--karte-leise);
}
/* ---------------------------------------------------------------------------
11 Gastraum
Ein waagerechter Streifen statt eines Mosaiks: man wischt durch die
Bilder wie durch einen Filmstreifen. Er läuft bewusst über den rechten
Seitenrand hinaus, damit man sieht, dass dort noch mehr liegt.
------------------------------------------------------------------------ */
/* Überschrift und Pfeile stehen in einer Zeile; wird es zu eng, rutschen
die Pfeile darunter und bleiben rechts ausgerichtet. */
.galerie__kopf {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: 0.75rem 1.5rem;
}
.streifen__navi {
display: flex;
gap: 0.5rem;
margin-inline-start: auto;
}
.streifen__knopf {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 1px solid var(--linie-leise);
border-radius: 50%;
background: transparent;
color: var(--creme);
cursor: pointer;
transition: border-color var(--tempo) var(--kurve),
color var(--tempo) var(--kurve),
opacity var(--tempo) var(--kurve);
}
.streifen__knopf:hover:not(:disabled) { border-color: var(--gold-hell); color: var(--gold-hell); }
/* Am Ende des Streifens erlischt der Pfeil, statt zu verschwinden — so
springt die Zeile nicht. */
.streifen__knopf:disabled { opacity: 0.4; cursor: default; }
.streifen {
margin-block-start: clamp(1.75rem, 4vw, 2.5rem);
/* Aus dem Seitenrand heraus, dann von innen wieder hinein: der Streifen
beginnt bündig mit dem Text und endet an der Bildschirmkante. */
margin-inline: calc(var(--rand) * -1);
padding-inline: var(--rand);
padding-block-end: 0.75rem;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(15rem, 21rem);
gap: clamp(0.75rem, 1.5vw, 1.25rem);
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
/* Ohne das rastet das erste Bild bündig an der Bildschirmkante ein und
frisst den Seitenrand auf — es soll mit der Überschrift fluchten. */
scroll-padding-inline-start: var(--rand);
scrollbar-width: thin;
scrollbar-color: var(--linie-gold) transparent;
}
.streifen::-webkit-scrollbar { block-size: 6px; }
.streifen::-webkit-scrollbar-track { background: var(--linie-leise); border-radius: 999px; }
.streifen::-webkit-scrollbar-thumb { background: var(--linie-gold); border-radius: 999px; }
/* Ein Feld ist Bild plus Unterschrift. Die Unterschrift steht unter dem
Foto, nicht als Verlauf darauf — auf dem Bild liegt nichts. */
.streifen__feld {
scroll-snap-align: start;
margin: 0;
display: grid;
gap: 0.6rem;
align-content: start;
}
.streifen__bild {
display: block;
inline-size: 100%;
margin: 0;
padding: 0;
border: 1px solid var(--linie-leise);
border-radius: var(--radius);
background: var(--gruen-flaeche);
overflow: hidden;
cursor: pointer;
transition: border-color var(--tempo) var(--kurve);
}
.streifen__bild:hover { border-color: var(--linie-gold); }
.streifen__bild picture { display: contents; }
.streifen__bild img {
inline-size: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
transition: transform 420ms var(--kurve);
}
.streifen__bild:hover img { transform: scale(1.03); }
/* --- Lightbox ------------------------------------------------------------ */
/* Ein geschlossenes