/* =============================================================================
Hofgut Rosenau — Gestaltungs-Token (Farben, Schriften, Abstände).
============================================================================= */
/* 2 — Design-Tokens --------------------------------------------------------- */
:root {
/* Markenfarben */
--color-cream: #FAF6EE;
--color-beige: #F1E7D3;
--color-brown: #3C2F29;
--color-grey: #737373; /* Markenwert; für Fließtext siehe --color-body */
--color-olive: #6E7A49;
--color-red: #A71C18;
/* Abgeleitete Farben.
--color-grey ist der Markenwert aus der Vorgabe. Für laufenden Fließtext ist
er zu hell: auf der Grundfläche erreicht er 4.37:1, auf Creme 4.40:1, auf dem
Beige-Markenwert 3.86:1 — alles unter WCAG AA (4.5:1). --color-body ist die
nächstliegende Nuance, die besteht (5.38:1 auf der Grundfläche). */
--color-body: #656565;
--color-red-dark: #8A1613;
/* Die eine helle Grundfläche für alle hellen Abschnitte, Kopf und Fuß.
Warmes, sehr helles Beige: Farbton 79.5° statt 90.5° beim Creme und Sättigung
C* 3.5 statt 4.3, dadurch weniger gelblich; ΔE 4.8 zu reinem Weiß, also
spürbar wärmer. Helligkeit L* 96.8 lässt dem Papierton (ΔE 2.8) und den
Platzhaltern Abstand. Gewählt aus drei Kandidaten (#F8F5EF wirkte grauer,
#FBF5F0 rosig). Eigener Token, damit --color-cream als Markenwert und im
hellen Button auf Olivgrün unverändert bleibt. */
--color-ground: #FAF5EF;
/* Rollen-Tokens. Abschnitte auf dunklem Grund überschreiben sie lokal. */
--color-surface: var(--color-ground);
--color-heading: var(--color-brown);
--color-text: var(--color-body);
--color-accent: var(--color-red);
--color-line: rgba(60, 47, 41, 0.16);
--color-line-strong: rgba(60, 47, 41, 0.32);
--color-focus: var(--color-red);
/* Platzhalterflächen */
/* Kaum vom Weiß abweichend — hebt eine Fläche vom Creme ab, ohne sie einzufärben. */
--color-paper: #FFFDF8;
--color-placeholder: #E7E0D4;
--color-placeholder-bw: #D8D5D0;
--color-placeholder-line: #C3B9A7;
--color-placeholder-text: #55504A;
/* Schrift */
--font-display: 'Libre Caslon Text', 'Iowan Old Style', Georgia, serif;
--font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
/* Ruhige, geradlinige Schrift für Buttons und Aktionslinks. */
--font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;
--text-xs: 0.8125rem;
--text-sm: 0.9375rem;
--text-base: clamp(1.0625rem, 0.25vw + 1rem, 1.1875rem);
--text-lead: clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
--text-h3: clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
--text-h2: clamp(1.875rem, 2.4vw + 1rem, 2.875rem);
--text-h1: clamp(2.5rem, 5vw + 0.75rem, 4.25rem);
--tracking-wide: 0.16em;
--tracking-wider: 0.22em;
/* Abstände */
--space-2xs: 0.375rem;
--space-xs: 0.625rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.25rem;
--space-xl: 3.5rem;
--space-2xl: 5rem;
--section-padding: clamp(4rem, 9vw, 8rem);
--container-max: 74rem;
--container-narrow: 46rem;
--gutter: clamp(1.25rem, 5vw, 3rem);
--measure: 62ch;
/* Form und Bewegung */
--radius: 2px;
/* Nur für Buttons: größer als jede Buttonhöhe, ergibt immer ganz runde Enden. */
--radius-pill: 999px;
--header-height: 5.5rem;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--transition: 220ms var(--ease);
}
/* =============================================================================
Hofgut Rosenau — Gestaltung
Aufbau: 1 Schriften · 2 Tokens (eigene Datei src/styles/tokens.css, wird
vorher geladen) · 3 Reset · 4 Basis-Typografie · 5 Layout
6 Komponenten · 7 Abschnitte · 8 Kopf/Fuß · 9 Scroll-Reveals
Pfade zu Schriften und Bildern absolut (/fonts/, /assets/), weil die Seiten
unter /speisekarte/ usw. liegen.
============================================================================= */
/* 1 — Schriften (self-hosted, aus den Fontsource-Paketen kopiert) ------------ */
@font-face {
font-family: 'Libre Caslon Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/libre-caslon-text-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 400 seit 2026-10-20 nur für „Tisch reservieren“ in der Kopfzeile
(weniger kräftig als die übrigen Buttons). Aus @fontsource/jost
5.0.17, 9.5 KB, Lizenz wie Jost 500 (SIL OFL, fonts/LICENSE-jost.txt). */
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/jost-latin-400-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/jost-latin-500-normal.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 3 — Reset ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-padding-top: calc(var(--header-height) + var(--space-sm));
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
background-color: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img {
display: block;
max-width: 100%;
height: auto;
}
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
figure, figcaption, address, p, h1, h2, h3 { margin: 0; }
/* Keine Kursive auf der Website (seit 2026-11-02): die geschwungenen Formen
sind schlecht lesbar. Hinweise heben sich über Größe, Farbe oder Stellung ab. */
address { font-style: normal; }
a { color: inherit; }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
border-radius: var(--radius);
}
/* 4 — Basis-Typografie ------------------------------------------------------ */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
color: var(--color-heading);
line-height: 1.12;
text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--text-h3); line-height: 1.25; }
p { max-width: var(--measure); }
.lead {
font-size: var(--text-lead);
line-height: 1.6;
}
/* Unterzeilen direkt unter einer Überschrift (Einleitung und Lead), seit
2026-10-21 im Überschriften-Braun statt im Fließtext-Grau, damit sie neben
der Überschrift wahrnehmbar sind; Größe unverändert. Braun auf der
Grundfläche 11.88:1. Auf Olivgrün und den abgedunkelten Bildflächen bleiben
sie weiß (dort ist --color-heading Beige bzw. Weiß, Beige reichte nicht). */
:is(h1, h2) + :is(.lead, .section__intro) { color: var(--color-heading); }
.section--olive :is(h1, h2) + :is(.lead, .section__intro),
.section--bild :is(h1, h2) + :is(.lead, .section__intro) { color: var(--color-text); }
/* Kleines, weit gesperrtes Label — greift die Wortmarke des Logos auf.
max-width setzt die Zeilenlänge aus `p` zurück: das Label ist keine Fließtextzeile. */
/* Damit sie neben den großen Überschriften nicht untergehen, eine Stufe größer: 15 statt 13px, Strich 2rem statt 1.75rem; Stärke, Farbe
und Laufweite wie bisher. Rot auf der Grundfläche 6.86:1, Weiß auf Olivgrün
4.62:1. */
.eyebrow {
display: flex;
align-items: center;
gap: var(--space-xs);
max-width: none;
margin-bottom: var(--space-sm);
color: var(--color-accent);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: var(--tracking-wider);
line-height: 1.4;
text-transform: uppercase;
}
.eyebrow::before {
content: '';
width: 2rem;
height: 1px;
flex: none;
background-color: currentColor;
}
.section__head--center .eyebrow {
justify-content: center;
text-wrap: balance;
}
.section__head--center .eyebrow::after {
content: '';
width: 2rem;
height: 1px;
flex: none;
background-color: currentColor;
}
/* 5 — Layout ---------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
/* `color` muss auf derselben Ebene stehen, auf der die dunklen Abschnitte
--color-text überschreiben: Nachfahren erben sonst den auf `body` berechneten
Grauwert, statt var(--color-text) im Abschnitt neu auszuwerten. */
.section,
.hero,
.site-footer {
color: var(--color-text);
}
.section {
padding-block: var(--section-padding);
background-color: var(--color-surface);
}
.section--olive {
--color-surface: var(--color-olive);
--color-heading: var(--color-beige);
--color-text: #FFFFFF;
/* Beige erreicht auf Oliv nur 3.77:1 — für die kleinen Labels zu wenig. */
--color-accent: #FFFFFF;
--color-line: rgba(255, 255, 255, 0.3);
--color-line-strong: rgba(255, 255, 255, 0.5);
--color-focus: #FFFFFF;
}
.section__head { margin-bottom: var(--space-xl); }
.section__head--center {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.section__intro {
margin-top: var(--space-md);
max-width: 48ch;
}
.section__head--center .lead { margin-top: var(--space-md); }
/* Folgen in einem Abschnitt zwei Container aufeinander (Text, dann Bildfläche),
brauchen sie einen eigenen Abstand — die Abschnittspolsterung liegt außen. */
.section > .container + .container { margin-top: var(--space-xl); }
/* Trägt Buttons und Links — ebenfalls ohne Fließtext-Zeilenlänge. */
.section__foot {
max-width: none;
margin-top: var(--space-xl);
}
.section__foot--center { text-align: center; }
/* Zweispaltiges Muster: Text neben Bildfläche. */
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
align-items: center;
}
.split--reverse .split__text { order: 2; }
/* Ohne Bild (Kontakt auf der Startseite, Honig): nur der Text, in Lesebreite. */
.split.split--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.split--ohne-bild > .split__text { max-width: 46rem; }
.split__text > * + * { margin-top: var(--space-md); }
.split__text > .section__foot { margin-top: var(--space-lg); }
/* Hochzeitstag (Feiern & Veranstaltungen, seit 2026-10-22): Text in Lesebreite
links wie die übrigen Abschnitte, darunter der Link zur PDF als Button, damit
er gut sichtbar ist; er öffnet in einem neuen Tab. */
.hochzeitstag__text { max-width: 40rem; }
.hochzeitstag__text > * + * { margin-top: var(--space-md); }
.hochzeitstag__text > .hochzeitstag__pdf { margin-top: var(--space-lg); }
/* 6 — Komponenten ----------------------------------------------------------- */
/* 6.1 Buttons */
/* Pille: Die runden Enden brauchen mehr seitliches Innenmaß als die eckige Form
(2.4em statt 2em), sonst sitzt die Schrift gequetscht in der Rundung. Ohne
Versalien und mit kaum Laufweite braucht es keinen Ausgleich links mehr. */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.95em 2.4em;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
/* Normale Groß- und Kleinschreibung statt Versalien; dafür kaum Laufweite
(0.02em statt 0.1em), die Wortbilder von Jost tragen sich selbst. */
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--transition), color var(--transition),
border-color var(--transition);
}
/* Spezifität (0,2,0) schlägt den globalen :focus-visible mit --radius, damit der
Fokusrahmen der Pillenform folgt statt eckig darum zu liegen. */
.button:focus-visible { border-radius: var(--radius-pill); }
.button--compact { padding: 0.8em 1.85em; }
.button--primary {
background-color: var(--color-red);
border-color: var(--color-red);
color: #FFFFFF;
}
.button--ghost {
border-color: var(--color-red);
color: var(--color-red);
}
/* Outline auf dunklem Grund oder Foto: weißer Rand, weiße Schrift, transparent.
Beim Darüberfahren und Drücken eine zarte weiße Füllung (12 %). */
.button--ghost-light {
border-color: #FFFFFF;
color: #FFFFFF;
}
/* Für dunkle Abschnitte (Olivgrün, Braun). */
.button--light {
background-color: var(--color-cream);
border-color: var(--color-cream);
color: var(--color-brown);
}
/* Farbwechsel wie bisher. Beim Darüberfahren nur mit Maus, damit er auf Touch
nicht nach dem Tippen hängen bleibt; im gedrückten Zustand überall, so gibt
es auch auf Touch und bei reduzierter Bewegung eine sichtbare Rückmeldung. */
.button--primary:active { background-color: var(--color-red-dark); border-color: var(--color-red-dark); }
.button--ghost:active {
border-color: var(--color-red-dark);
background-color: rgba(167, 28, 24, 0.07);
color: var(--color-red-dark);
}
.button--light:active { background-color: #FFFFFF; border-color: #FFFFFF; }
.button--ghost-light:active { background-color: rgba(255, 255, 255, 0.12); }
@media (hover: hover) {
.button--primary:hover { background-color: var(--color-red-dark); border-color: var(--color-red-dark); }
.button--ghost:hover {
border-color: var(--color-red-dark);
background-color: rgba(167, 28, 24, 0.07);
color: var(--color-red-dark);
}
.button--light:hover { background-color: #FFFFFF; border-color: #FFFFFF; }
.button--ghost-light:hover { background-color: rgba(255, 255, 255, 0.12); }
}
/* Bewegung: nur ohne Wunsch nach reduzierter Bewegung, nur transform. Beim
Darüberfahren bewegt sich nichts, nur die Farbe wechselt. */
@media (prefers-reduced-motion: no-preference) {
.button {
transition: background-color var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition);
}
/* Gedrückt: leicht kleiner. 80 ms, damit das Zurücksetzen beim Tippen
spürbar ist, bevor die Seite wechselt. */
.button:active {
transform: scale(0.97);
transition-duration: 80ms;
}
}
/* 6.2 Textlink mit Pfeil */
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-2xs);
padding-bottom: 0.15em;
border-bottom: 1px solid var(--color-line-strong);
color: var(--color-heading);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
/* Wie die Buttons: normale Schreibung, kaum Laufweite. */
letter-spacing: 0.02em;
text-decoration: none;
transition: color var(--transition), border-color var(--transition);
}
.link-arrow::after {
content: '→';
transition: transform var(--transition);
}
.link-arrow:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
@media (prefers-reduced-motion: no-preference) {
.link-arrow:hover::after { transform: translateX(0.25em); }
}
/* Auf Olivgrün in Weiß statt Beige: Der Link ist mit 15px kleine Schrift und
braucht 4.5:1 (Weiß 4.62:1, Beige 3.77:1). */
.section--olive .link-arrow { color: var(--color-text); }
/* 6.3 Bildplätze: ein Rahmen mit dem Format des Platzes (--bildformat, die
Höhen einzelner Plätze weiter unten), gleich für Platzhalter und echtes
Bild. Das Bild füllt den Rahmen zugeschnitten, nie verzerrt; welcher Teil
sichtbar bleibt, bestimmt der Brennpunkt aus dem Studio (object-position
aus der Stildatei des Baus, sonst die Mitte). */
.bildplatz {
aspect-ratio: var(--bildformat, 3 / 2);
border-radius: var(--radius);
}
.bildplatz--bild {
position: relative;
overflow: hidden;
}
.bildplatz--bild > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Platzhalterflächen — bewusst als Entwurfsfläche erkennbar. */
.placeholder {
display: grid;
place-items: center;
padding: var(--space-md);
background-color: var(--color-placeholder);
background-image: repeating-linear-gradient(
45deg,
transparent 0 12px,
rgba(60, 47, 41, 0.035) 12px 24px
);
border: 1px solid var(--color-placeholder-line);
color: var(--color-placeholder-text);
text-align: center;
}
.bildplatz--hoch { --bildformat: 4 / 5; }
.bildplatz--breit { --bildformat: 21 / 9; }
.placeholder--bw {
background-color: var(--color-placeholder-bw);
background-image: repeating-linear-gradient(
45deg,
transparent 0 12px,
rgba(40, 40, 40, 0.04) 12px 24px
);
border-color: #BFBBB5;
}
.placeholder__label {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
/* 7 — Abschnitte ------------------------------------------------------------ */
/* 7.1 Hero mit Video
Füllt beim Laden den ganzen Bildschirm und liegt unter der Kopfzeile; die
Kopfzeile ist mit ihrer Linie 1px höher als --header-height (gemessen 89
bzw. 73px, wie bei der Bildsektion).
Höhe 100lvh: die Höhe bei eingefahrener Browserleiste, also die größte, die
das iPhone zeigt. Bei ausgefahrener Leiste reicht der Hero unter die Leiste,
die nächste Section bleibt in beiden Zuständen verdeckt, und die Höhe springt
beim Ein- und Ausfahren nicht (anders als dvh). Der Text steht mittig in der
kleinsten Höhe (100svh), also nie unter der Leiste. Ohne lvh/svh gilt 100vh,
auf iPhone und Android ebenfalls die große Höhe. Wird der Inhalt höher (Handy
quer), wächst der Hero mit. */
.hero {
/* Abdunklung im Ton der Bildsektionen (--bild-schleier), aber leichter.
Gemessen am hellsten Bild des Platzhalter-Videos (alle 200 Bilder,
hellster Punkt rgb(134, 145, 100)), aus Pixeln hinter Überzeile,
Überschrift, Einleitung und hellem Button bei 320 bis 1920px: mindestens
5.58:1, ohne Abdunklung 2.99:1. Beim echten Video neu messen. */
--hero-schleier: rgba(20, 18, 16, 0.35);
--color-heading: #FFFFFF;
--color-text: #FFFFFF;
--color-accent: #FFFFFF;
--color-focus: #FFFFFF;
position: relative;
display: grid;
min-height: 100vh;
min-height: 100lvh;
margin-top: calc(-1 * var(--header-height) - 1px);
padding-block: 0;
overflow: hidden;
/* Fläche, bis das Standbild da ist: der dunkle Ton der Abdunklung
(--hero-schleier) statt Olivgrün, das beim ersten Besuch kurz aufblitzte
(gemessen bei 4 Mbit/s: Handy 100 bis 150 ms, Desktop rund 340 ms). */
background-color: rgb(20, 18, 16);
}
/* iPhone mit Safari ab iOS 26: Die Seite wird unter der schwebenden
Adressleiste weitergezeichnet, sichtbar ist mehr als jede CSS-Höhe.
Gemessen im Simulator (iPhone 17, iOS 27, 2026-10-23): beim Laden 812 Punkte
sichtbare Fläche, 100lvh = 754, 100svh = 714; ohne Zuschlag schaute die
nächste Section 58 Punkte hinter der Leiste hervor. 5rem Zuschlag (834)
decken das mit Reserve. Nur iOS (-webkit-touch-callout), anderswo bleibt der
Hero genau bildschirmhoch. */
@supports (-webkit-touch-callout: none) {
.hero { min-height: calc(100lvh + 5rem); }
}
.hero__media {
position: absolute;
inset: 0;
}
/* Standbild und Video füllen die Fläche, zugeschnitten statt verzerrt. */
.hero__standbild,
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__standbild.placeholder {
--bildformat: auto;
align-items: end;
border: 0;
border-radius: 0;
}
/* Das Video erscheint erst, wenn es wirklich läuft (main.js setzt is-playing);
bis dahin, ohne JavaScript, bei reduzierter Bewegung und bei Fehlern steht
das Standbild. */
.hero__video {
opacity: 0;
transition: opacity 0.6s ease;
}
.hero__video.is-playing { opacity: 1; }
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--hero-schleier);
}
.hero__content {
position: relative;
grid-area: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-self: center;
/* Oben festhalten: Ist der Hero höher als der sichtbare Bereich (iOS-Zuschlag
unten), bleibt der Text trotzdem mittig in 100svh. */
align-self: start;
/* 60rem, damit der große Name ab etwa 600px in einer Zeile steht (1920px:
rund 820px breit); der Satz darunter hat seine eigene Höchstbreite. */
width: min(100% - 2 * var(--gutter), 60rem);
min-height: 100vh;
min-height: 100svh;
padding-top: calc(var(--header-height) + var(--space-lg));
padding-bottom: var(--space-xl);
text-align: center;
}
/* Auftritt (nur Startseite, Klasse hero-auftritt aus Basis.astro, nur mit
JavaScript und ohne reduzierte Bewegung): zuerst nur das Video, nach 1.5 s
blenden Text und Buttons in 1 s ein; die Kopfzeile blendet in 0.5 s ein,
sobald main.js kopf-ein setzt: mit dem ersten Schnitt des Videos, ohne
Video nach 2.5 s, spätestens nach einer festen Frist. Der Browser führt die Animation aus (nur opacity und
transform, wie beim Pferd ruhig auch in Safari). Scrollen, eine Taste, Fokus
oder Tippen setzen hero-sofort (main.js): dann steht alles sofort. Fokus
beendet den Auftritt zusätzlich per CSS (:focus-within), auch wenn Tab vor
dem Laden von main.js gedrückt wird. */
@media (prefers-reduced-motion: no-preference) {
.js.hero-auftritt:not(.hero-sofort):not(:focus-within) .hero__content {
animation: hero-ein 1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s both;
}
.js.hero-auftritt:not(.hero-sofort):not(.kopf-ein):not(:focus-within) .site-header {
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
}
.js.hero-auftritt.kopf-ein:not(.hero-sofort) .site-header {
animation: kopf-ein 0.5s ease-out both;
}
}
@keyframes hero-ein {
from { opacity: 0; transform: translateY(1rem); }
}
/* Der Satz unter dem Namen und der Claim darüber blenden am Schnitt aus
(satz-aus aus main.js), gemeinsam und spiegelbildlich zum Einblenden: 1 s, 1rem nach unten, Kurve umgekehrt. Sein
Platz bleibt, die Knöpfe springen nicht. */
@media (prefers-reduced-motion: no-preference) {
.js.hero-auftritt.satz-aus .hero__content .lead,
.js.hero-auftritt.satz-aus .hero__content .hero__claim {
animation: satz-aus 1s cubic-bezier(0.64, 0, 0.78, 0.39) both;
}
}
@keyframes satz-aus {
to { opacity: 0; transform: translateY(1rem); }
}
/* visibility: unsichtbar auch nicht anklickbar oder per Tab erreichbar. */
@keyframes kopf-ein {
from { opacity: 0; visibility: hidden; transform: translateY(-0.5rem); }
}
/* Seit 2026-11-02: der Name groß (bei 1440px 102px statt der
68px der übrigen h1), darunter der Satz aus Sanity in derselben Schrift,
kleiner, meist in einer Zeile (1440px 42px), damit vom Video viel zu sehen
bleibt. Am Handy bricht der Name nur zwischen den Wörtern um („Hofgut“ /
„Rosenau“, 390px: 52px). Eigene Größen nur hier, darum keine Token. */
.hero .hero__title {
/* Abstand zum Satz mitwachsend: 24px am Handy, 36px ab 1800px. */
margin-bottom: clamp(var(--space-md), 2vw, var(--space-lg));
font-size: clamp(3.25rem, 6vw + 1rem, 7rem);
line-height: 1.05;
letter-spacing: -0.01em;
}
.hero__wort { white-space: nowrap; }
/* Claim über dem Namen als Überzeile: Versalien, gesperrt, mit feinen Linien
zu beiden Seiten, in Beige statt Weiß, damit er sich vom Namen und vom Satz
abhebt. Etwas größer als die übrigen Überzeilen (15px am Handy, 20px ab
1440px), weil er vor bewegtem Bild steht. */
.hero .hero__claim {
justify-content: center;
margin-bottom: var(--space-md);
color: var(--color-beige);
font-size: clamp(var(--text-sm), 0.55vw + 0.75rem, 1.25rem);
text-wrap: balance;
}
.hero .hero__claim::after {
content: '';
width: 2rem;
height: 1px;
flex: none;
background-color: currentColor;
}
/* Unter 36rem passt der Claim mit den Linien nicht in eine Zeile (gemessen:
Text bei 15px rund 450px breit, mit Linien 530px); zweizeilig stehen die
Linien schief daneben, darum dort ohne Linien. */
@media (max-width: 36rem) {
.hero .hero__claim::before,
.hero .hero__claim::after { display: none; }
}
.hero__content .lead {
max-width: 30ch;
margin-inline: auto;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.8vw + 1rem, 2.75rem);
line-height: 1.25;
text-wrap: balance;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
max-width: none;
margin-top: var(--space-xl);
}
/* 7.1a Essen und Speisekarte: zwei Bildplätze, ein großes Hochformat und ein
kleineres, das vorne unten links übersteht. Nebeneinander gestellt wurden zwei
Bilder bei 1440px höchstens 341 x 426px groß und wirkten schwächer als das eine
Bild davor (rund 520 x 650px); überlappend bleibt das große Bild groß
(445 x 556px bei 1440px, das kleine 296 x 370px).
Die Bildspalte ist breiter als die Textspalte (7 : 5). Raster in Achteln: das
große Bild belegt sechs, das kleine vier, beide in derselben Zeile; das kleine
sitzt unten und ragt um --space-2xl darunter hinaus. Der Rand in der Fläche
des Abschnitts trennt die beiden Bilder wie ein Passepartout. Auf dem Handy
stehen die Bilder nach dem Text, in derselben Anordnung. */
.split--bilder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.speise__bilder {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
padding-bottom: var(--space-2xl);
}
/* Beschriftung oben, weil das kleine Bild das untere Drittel überdeckt. */
.speise__bilder > :first-child {
grid-column: 3 / -1;
grid-row: 1;
align-items: start;
}
/* Rand um das kleine Bild als eigene Fläche mit derselben Rundung wie das
Bild (ein Schatten mit Ausdehnung würde die Ecken um seine Breite runder
machen). Der Rand liegt außen: Die negativen Abstände halten das Bild selbst
an seiner Stelle und in seiner Größe. */
.speise__bild--versetzt {
grid-column: 1 / 5;
grid-row: 1;
align-self: end;
position: relative;
margin: calc(-1 * var(--space-xs));
margin-bottom: calc(-1 * (var(--space-2xl) + var(--space-xs)));
padding: var(--space-xs);
border-radius: var(--radius);
background-color: var(--color-surface);
}
/* 7.2 Saisonale Empfehlung */
/* .hinweis (Formular, Rechtstexte) teilt das Aussehen der Empfehlung. */
.recommendation,
.hinweis {
padding: var(--space-md) var(--space-lg);
border-left: 2px solid var(--color-accent);
background-color: var(--color-paper);
}
.recommendation__label {
color: var(--color-accent);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.recommendation__dish {
margin-top: var(--space-2xs);
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.3;
}
.recommendation__text { margin-top: var(--space-xs); }
.recommendation__preis {
margin-top: var(--space-xs);
color: var(--color-heading);
font-family: var(--font-ui);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* 7.3 Veranstaltungen */
/* Versteckte Termine (vergangen oder über der Anzahl, siehe main.js) bleiben
versteckt, auch gegen display: grid. */
.events[hidden],
.event[hidden] { display: none !important; }
.events {
display: grid;
gap: 0;
border-top: 1px solid var(--color-line);
}
.event {
display: grid;
grid-template-columns: 7rem minmax(0, 1fr);
gap: var(--space-lg);
padding-block: var(--space-lg);
border-bottom: 1px solid var(--color-line);
}
.event__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
padding: var(--space-sm);
/* Papierton: Das Kästchen bleibt heller als die Fläche darunter, wie früher das
Creme auf der Nuance. Creme auf der Grundfläche wäre mit ΔE 1.1 kaum sichtbar. */
background-color: var(--color-paper);
border: 1px solid var(--color-line);
color: var(--color-heading);
text-align: center;
align-self: start;
}
.event__day {
font-family: var(--font-display);
font-size: 1.75rem;
line-height: 1;
}
.event__month {
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.event__title { margin-bottom: var(--space-2xs); }
/* Bildplatz je Termin (nur Startseite, .events--bild), für Flyer oder Fotos.
Hochformat 4 : 5 für alle Termine gleich. Ein echtes Bild füllt den Platz und
wird zugeschnitten, nicht verzerrt. Auf breiten Bildschirmen zwischen Datum
und Text, 10rem breit (12.5rem hoch), damit Bild und Text zusammenstehen; ganz
rechts ließ es eine leere Mitte. Auf dem Handy über dem Text (Reihenfolge im
HTML), höchstens 18rem breit, damit drei Termine untereinander nicht zu einer
Bildstrecke werden. */
.events--bild .event { grid-template-columns: 7rem 10rem minmax(0, 1fr); }
/* Termin ohne Bild: Datum und Text wie in einer Liste ohne Bilder, keine leere
Spalte (eine Stufe mehr Spezifität als die Zeile darüber). */
.events--bild .event.event--ohne-bild { grid-template-columns: 7rem minmax(0, 1fr); }
.event__bild {
--bildformat: 4 / 5;
grid-column: 2;
grid-row: 1;
margin: 0;
overflow: hidden;
}
.event__bild img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Auf Olivgrün zurückgenommen wie die Karten: leicht abgedunkelt statt hell,
Streifen und Rand in Weiß, Beschriftung weiß (5.20:1 auf der Fläche, 4.63:1 im
ungünstigsten Pixel des helleren Streifens). */
.section--olive .event__bild {
background-color: rgba(60, 47, 41, 0.12);
background-image: repeating-linear-gradient(
45deg,
transparent 0 12px,
rgba(255, 255, 255, 0.05) 12px 24px
);
border-color: var(--color-line);
color: var(--color-text);
}
/* Termine auf Olivgrün. Beige erreicht dort nur 3.77:1 und trägt nur die großen
Abschnittsüberschriften; Termintitel (20–24px) brauchen 4.5:1, daher Weiß
(4.62:1), wie die Kartentitel bei den Feiern. Das Datumskästchen wird wie diese
Karten leicht abgedunkelt statt hell: Weiß darauf 5.20:1, und es bleibt ruhig. */
.section--olive .event__title { color: var(--color-text); }
.section--olive .event__date {
background-color: rgba(60, 47, 41, 0.12);
color: var(--color-text);
}
.event__meta {
margin-bottom: var(--space-xs);
color: var(--color-accent);
font-size: var(--text-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Mehrere Absätze in einem Termin (Text, Eintritt, Reservierung). */
.event__body p + p { margin-top: var(--space-2xs); }
/* 7.4 Karten (Feiern) */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-md);
}
/* Die Fläche dunkelt den Grund leicht ab statt ihn aufzuhellen: weißer Text
gewinnt dadurch Kontrast (5.2:1), statt ihn zu verlieren. */
.card {
padding: var(--space-lg);
border: 1px solid var(--color-line);
border-radius: var(--radius);
background-color: rgba(60, 47, 41, 0.12);
}
.card__title { margin-bottom: var(--space-xs); }
/* Beige trägt auf Oliv nur große Überschriften (3.8:1); Kartentitel in Weiß. */
.section--olive .card__title { color: var(--color-text); }
/* 7.4a Bildsektion (Feiern im Hofgut)
Füllt die sichtbare Höhe unter der festen Kopfzeile, damit ein Foto später den
ganzen Bildschirm einnimmt. Bildfläche und Inhalt teilen sich eine Rasterzelle;
wird der Inhalt höher als der Bildschirm, wächst die Zelle mit, nichts wird
abgeschnitten. Das Foto kommt später als ![]()
in .section__bild, gebunden an
den Abschnitt und nicht an den Bildschirm.
Schon jetzt wirkt die Sektion wie mit dem Foto: Über dem grauen Platzhalter
liegt die Abdunklung --bild-schleier, aller Text ist weiß. Beim Tausch gegen das
Foto werden nur das ![]()
eingesetzt und --bild-schleier angepasst.
Neutrales Dunkel zu 70 %, kein Braun: Das Dunkelgrau-Braun ist in der Palette
kein Flächenton, und ein Foto wird üblicherweise neutral abgedunkelt. Weiß
erreicht darauf 8.42:1 (heller Streifen, ungünstigster Fall), auf den
Glas-Karten 6.36:1, auf der Hover-Füllung des Buttons 6.07:1. */
.section--bild {
--bild-schleier: rgba(20, 18, 16, 0.7);
--color-heading: #FFFFFF;
--color-text: #FFFFFF;
--color-accent: #FFFFFF;
--color-line: rgba(255, 255, 255, 0.3);
--color-line-strong: rgba(255, 255, 255, 0.5);
--color-focus: #FFFFFF;
display: grid;
padding-block: 0;
}
.section--bild > .section__bild,
.section--bild > .container { grid-area: 1 / 1; }
/* svh: die Höhe bei sichtbarer Browserleiste, damit auf dem iPhone nichts unter
die Leiste rutscht. Ohne svh-Unterstützung bleibt die Höhe des Inhalts, nie 100vh.
1px: die Unterkante der Kopfzeile; gemessen ist die Kopfzeile 73 bzw. 89px hoch,
nicht 72 bzw. 88px, sonst stünde die Sektion 1px unter den Bildschirmrand. */
@supports (min-height: 100svh) {
.section--bild { min-height: calc(100svh - var(--header-height) - 1px); }
/* Feiern auf der Startseite: so hoch wie der ganze Bildschirm, nicht nur die
Fläche unter der Kopfzeile. Beim Scrollen gibt es so einen Moment, in dem
unter der Kopfzeile nur das Bild steht. (0,2,0) gewinnt gegen die Regel
darüber. */
.section--bild.feiern-band { min-height: 100svh; }
}
/* Das Seitenverhältnis des Platzhalters muss entfallen, sonst leitet es aus der
Breite eine Höhe ab (bei 1440px wären das 960px) statt der Bildschirmhöhe. */
.section__bild {
--bildformat: auto;
position: relative;
display: grid;
align-items: end;
justify-items: center;
margin: 0;
border: 0;
border-radius: 0;
/* Die Beschriftung sitzt im unteren Innenabstand des Inhalts (mindestens 4rem)
und läuft daher nie in die Karten. */
padding: var(--space-md) var(--gutter);
color: var(--color-text);
}
/* Abdunklung über Platzhalter oder Foto, unter der Beschriftung. */
.section__bild::after {
content: '';
position: absolute;
inset: 0;
background-color: var(--bild-schleier);
}
.section__bild > .placeholder__label { position: relative; z-index: 1; }
/* Das spätere Foto füllt die Sektion und wird zugeschnitten, nicht verzerrt. */
.section__bild img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Über die Abdunklung heben: Die ist positioniert und würde sonst über dem
normal gesetzten Inhalt gezeichnet (Überschrift, Text und Button verschwanden). */
.section--bild > .container {
position: relative;
z-index: 1;
align-self: center;
padding-block: var(--section-padding);
}
/* Gläserne Karten: klar statt milchig, also wenig Weiß (4 %) und leichte
Weichzeichnung (6px statt 12px), dazu ein heller Rand und eine feine
Lichtkante oben wie bei Glas. Ohne Unterstützung der Weichzeichnung greift
die erste Regel, eine deckendere dunkle Fläche: Weiß darauf 12.14:1. Mit
Weichzeichnung liegt weniger Weiß über dem abgedunkelten Grund als vorher
(10 %), der weiße Titel gewinnt dadurch Kontrast. Safari braucht -webkit-. */
.section--bild .card {
background-color: rgba(30, 24, 20, 0.45);
border-color: rgba(255, 255, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.section--bild .card {
background-color: rgba(255, 255, 255, 0.04);
-webkit-backdrop-filter: blur(6px) saturate(1.15);
backdrop-filter: blur(6px) saturate(1.15);
}
}
/* Anlässe auf der Startseite: nur der Name, groß und mittig (1440px 38px,
390px 28px), zwischen den Größen von h3 und h2, darum eigene Werte. */
.cards--anlaesse .card {
display: grid;
place-items: center;
min-height: clamp(7rem, 8vw + 3rem, 10rem);
text-align: center;
}
.cards--anlaesse .card__title {
margin: 0;
font-size: clamp(1.75rem, 1.4vw + 1.1rem, 2.375rem);
line-height: 1.15;
}
/* 7.4b Pferd aus dem Zweitlogo, groß und angeschnitten hinter der Überschrift,
auf der Startseite (Besonderheiten) und seit 2026-10-21 im Hintergrund der
Abschnitts mit der Speisekarte (.karte-pferd, siehe unten). Rein
dekorativ. Die Datei assets/pferd-linien.webp (aus eingang/Pferd-Neu.png) ist
nur die Form: eine CSS-Maske, die Farbe kommt aus dem CSS.
Lage: Ein Punkt auf der oberen Mähnenlinie (--pferd-ax/--pferd-ay, Anteile der
Bildbreite, gemessen an der Datei: x 650 px, y 349 px von 2696) liegt genau
in der Mitte der Überschrift. --pferd-hy ist die Höhe dieser Mitte über der
Oberkante des Abschnitts, gemessen bei 390, 768, 1440 und 1920px
(Abweichung höchstens 8px). So steht der Kopf links neben der Überschrift,
die Mähne läuft dahinter durch, Rücken, Beine und Schweif sind rechts und
unten vom Abschnitt angeschnitten. Die Hülle schneidet ab, damit nichts
seitlich oder in Nachbarabschnitte ragt (kein Überlauf der Seite).
Auf dem Desktop verschiebt main.js das Pferd beim Scrollen mit halber
Geschwindigkeit; in der Handy-Ansicht (bis 48rem), bei reduzierter Bewegung
und ohne JavaScript steht es still an dieser Stelle (seit 2026-10-19). */
.section--pferd {
position: relative;
isolation: isolate;
/* Startseite: Überschrift sitzt eine Überzeile unter dem Innenabstand. */
--pferd-hy: calc(var(--section-padding) + 4.5rem + 0.6vw);
}
.section__pferd {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
/* Breite: Der Kopf (Ohren bis Nase, 0.323 der Bildbreite) soll ganz im freien
Feld über dem Bildplatz stehen, der Rumpf rechts und unten angeschnitten sein.
Höchstens 87.5rem (1400px; das freie Feld ist bei 1440px 510px hoch, der
Kopf 452px). Bis 1400px scharf bei doppelter Pixeldichte
genug, die Datei hat 2696px. Handy: eigener, größerer Ausschnitt (siehe unten). */
.pferd {
--pferd-w: min(97vw, 87.5rem);
--pferd-ax: 0.241;
--pferd-ay: 0.1295;
position: absolute;
left: calc(50% - var(--pferd-ax) * var(--pferd-w));
top: calc(var(--pferd-hy, 10rem) - var(--pferd-ay) * var(--pferd-w));
display: block;
width: var(--pferd-w);
aspect-ratio: 2696 / 2938;
}
/* Speisekarte (seit 2026-10-21): dasselbe Pferd im Hintergrund des Abschnitts
mit der Karte, hinter dem Papier wie auf der Startseite (nicht auf der
Karte). Die Hülle schneidet am Ende des Abschnitts ab, das
Weihnachtsmenü bleibt frei. Zwei Klassen, damit der Wert sicher vor dem der
Startseite gewinnt. */
.section--pferd.karte-pferd { --pferd-hy: 14rem; }
/* Ab 1024px steht die Karte schmal (46rem) in der Mitte. Der Kopf schaut links
neben ihr hervor (Nase 0.25 der Bildbreite vor dem Mähnenpunkt, nie über den
Fensterrand hinaus), unter dem linken Bild; der Rumpf kommt rechts neben der
Karte wieder heraus. 52rem: Ohren rund 650px unter der Oberkante des
Abschnitts, das linke Bild endet bei 1440px nach 520px. */
@media (min-width: 64rem) {
.section--pferd.karte-pferd { --pferd-hy: 52rem; }
.karte-pferd .pferd { left: max(0px, calc(50% - 23rem - 0.25 * var(--pferd-w))); }
}
@media (min-width: 48.0625rem) {
.pferd { will-change: transform; }
}
/* Mitscrollen per scroll-gesteuerter Animation (seit 2026-10-22, Safari ab 26,
Chrome ab 115): Der Browser verschiebt das Pferd selbst im Takt des
Scrollens, statt dass JavaScript es nachschiebt (ruckelte in Safari).
main.js setzt die Klasse nur, wo Bewegung erlaubt ist, und misst die Strecke
(--pferd-von, --pferd-bis); ohne Unterstützung schiebt main.js wie bisher.
view-timeline-inset 0: sonst zählt die Zeitleiste den Abstand für die
Kopfzeile (scroll-padding-top) mit, gemessen 48px Versatz gegenüber vorher. */
@supports (animation-timeline: view()) {
@keyframes pferd-mitlauf {
from { transform: translate3d(0, var(--pferd-von, 0px), 0); }
to { transform: translate3d(0, var(--pferd-bis, 0px), 0); }
}
.section--pferd {
view-timeline: --pferd-abschnitt block;
view-timeline-inset: 0px;
}
.pferd.pferd--mitlauf {
animation: pferd-mitlauf linear both;
animation-timeline: --pferd-abschnitt;
}
}
/* Handy: 180vw, höchstens 44rem. Der Kopf füllt dann gut ein Drittel der
Breite links neben der Überschrift, die Mähne läuft quer hinter ihr durch,
der Rumpf liegt außerhalb. Bei 390px: Kopf 226px hoch, Nase 41px über dem
Bildplatz. */
@media (max-width: 40rem) {
.pferd { --pferd-w: min(180vw, 44rem); }
}
/* Farbe: das Überschriftenbraun, sehr durchsichtig, ohne Verlauf (dunkel,
geringe Deckkraft). 8 % ergeben auf der
Grundfläche #EBE5DF; Fließtext über einer Linie hat dort 4.66:1. Mehr geht
nicht: Bei 10 % wären es 4.49:1 und damit unter WCAG AA. Die Deckkraft liegt
auf dem ganzen Element, so braucht es kein color-mix().
Ohne Masken-Unterstützung bleibt die Fläche leer statt als Block zu erscheinen. */
@supports (mask-size: contain) or (-webkit-mask-size: contain) {
.pferd {
background-color: var(--color-brown, #3C2F29);
opacity: 0.08;
-webkit-mask: url("/assets/pferd-linien.webp") center / contain no-repeat;
mask: url("/assets/pferd-linien.webp") center / contain no-repeat;
}
}
/* 7.4b-2 Marienkäfer (seit 2026-10-22, nur Über uns): krabbelt einmal von unten
links diagonal nach oben rechts über den Bildschirm, gebaut von main.js. Die Bühne liegt fest über dem Inhalt (45,
unter der Kopfzeile mit 50), fängt keine Klicks ab und schneidet ab, was
über den Rand läuft (kein Überlauf). Größe etwa eine Daumenkuppe auf dem
Handy (48px bei 390px), höchstens 64px. */
.marienkaefer {
position: fixed;
inset: 0;
z-index: 45;
overflow: hidden;
pointer-events: none;
}
.marienkaefer__bild {
position: absolute;
top: 0;
left: 0;
width: clamp(3rem, 2rem + 3vw, 4rem);
height: auto;
will-change: transform;
}
/* 7.4c Besonderheiten der Rosenau: seit 2026-10-20 zwei kurze Punkte
(Gartenterrasse, Honig; die Ausstattung steht nur noch auf der Kontaktseite)
über dem Pferd, in der schmalen Inhaltsbreite wie der Kopf darüber, damit
die zwei Spalten nicht auseinanderfallen. Link nur beim Honig. Fließtext
über den Pferd-Linien (höchstens #EBE5DF) 4.66:1. */
.besonderheiten {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-xl) var(--space-2xl);
margin-top: var(--space-2xl);
}
.besonderheiten h3 { margin-bottom: var(--space-xs); }
.besonderheiten p + .link-arrow { margin-top: var(--space-sm); }
@media (min-width: 64rem) {
.besonderheiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Breites Bild unter den Besonderheiten: erst ab 64rem 21 : 9. Darunter wäre
es ein Streifen (bei 390px 350 x 150px, bei 768px 691 x 296px); am Handy
4 : 3 (350 x 263px), ab 40rem 16 : 9 (768px: 691 x 389px). Ein Foto 3 : 2
wird am Handy seitlich beschnitten, gut ein Zehntel; das sizes im HTML lädt
dafür etwas breiter. */
.besonderheiten__bild.bildplatz--breit { --bildformat: 4 / 3; }
@media (min-width: 40rem) {
.besonderheiten__bild.bildplatz--breit { --bildformat: 16 / 9; }
}
@media (min-width: 64rem) {
.besonderheiten__bild.bildplatz--breit { --bildformat: 21 / 9; }
}
#ueber-uns > .section__foot { margin-top: var(--space-xl); }
/* 7.4d Zitat als eigenes Band nach den Besonderheiten, seit 2026-10-19 auf
einem Bild: Es nutzt den Aufbau der Bildsektion (7.3, Abdunklung
--bild-schleier, heller Text), aber ohne Bildschirmhöhe, die Höhe ergibt sich
aus dem Innenabstand. Das Zitat groß und kursiv in der Überschriftenschrift,
eine kurze helle Linie darüber. Weiß auf dem abgedunkelten Platzhalter
aus Pixeln gemessen 8.56:1, ohne Abdunklung wären es 1.46:1 (Gegenprobe).
Zwei Klassen, damit die Bildschirmhöhe aus 7.3 sicher verliert, gleich
welche Regel im Bündel später steht. */
.section--bild.zitat-band { min-height: 0; text-align: center; }
.section--bild.zitat-band > .container { padding-block: calc(var(--section-padding) * 1.5); }
.zitat-band .zitat::before {
content: '';
display: block;
width: 3rem;
height: 1px;
margin: 0 auto var(--space-xl);
background-color: var(--color-accent);
}
.zitat blockquote p {
max-width: 28ch;
margin-inline: auto;
color: var(--color-heading);
font-family: var(--font-display);
font-size: clamp(1.875rem, 3.2vw + 0.75rem, 3.5rem);
line-height: 1.25;
text-wrap: balance;
}
.zitat figcaption {
margin-top: var(--space-sm);
font-family: var(--font-ui);
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
}
/* 7.5 Galerie */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-md);
}
/* Die Kacheln einer Zeile schließen unten bündig ab: das Seitenverhältnis gibt
die Zeilenhöhe vor, die Fläche füllt sie dann aus. Die feste Breite ist nötig,
damit das Seitenverhältnis aus der gewachsenen Höhe keine Breite ableitet. */
.gallery__item {
display: grid;
/* minmax(0, 1fr) statt auto: sonst wächst die Spalte auf die Breite, die das
Seitenverhältnis aus der gewachsenen Zeilenhöhe ableitet. */
grid-template-columns: minmax(0, 1fr);
}
.gallery__item > .bildplatz {
width: 100%;
height: 100%;
}
/* 7.5a Wisch-Reihe: Bilder nebeneinander, seitlich wischbar, rastet am Bild
ein (scroll-snap). Galerie-Vorschau der Startseite und Räumlichkeiten auf
Feiern & Veranstaltungen. Es ist immer ein Stück des nächsten Bildes zu
sehen (Handy 82 %, Tablet 46 %, breit 38 % der Reihe je Bild), damit klar
ist, dass es weitergeht. Auf dem Desktop setzt main.js zwei Pfeile dazu;
ohne JavaScript bleibt die Reihe nativ wischbar und scrollbar. Antippen
öffnet weiter die Bildansicht. */
.wisch-reihe {
--wisch-breite: 82%;
display: flex;
gap: var(--space-sm);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--wisch-rand, 0px);
padding-inline: var(--wisch-rand, 0px);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.wisch-reihe::-webkit-scrollbar { display: none; }
.wisch-reihe > * {
flex: 0 0 var(--wisch-breite);
scroll-snap-align: start;
}
.gallery.wisch-reihe .bildplatz { --bildformat: 4 / 5; }
/* Galerie-Vorschau mit wenigen Bildern (data-anzahl): Passen alle Bilder
nebeneinander, stehen sie mittig statt links mit leerem Rest. Ein Bild
immer, zwei ab 48rem (je 46 %), drei ab 64rem (je 38 %). Nur dort, wo
nichts überläuft, sonst wäre der Anfang der Reihe nicht erreichbar. */
.gallery.wisch-reihe[data-anzahl="1"] { justify-content: center; }
/* Räumlichkeiten: randlos im grünen Band, das erste Bild bündig zum Inhalt.
(0,2,0): .bildband (Raster) steht weiter unten im Bündel und gewönne sonst. */
.raeume-band.wisch-reihe {
display: flex;
--wisch-rand: max(var(--gutter), calc(50vw - var(--container-max) / 2 + var(--gutter)));
}
.raeume-band.wisch-reihe > .bildplatz {
grid-column: auto;
height: auto;
--bildformat: 4 / 3;
}
@media (min-width: 48rem) {
.wisch-reihe { --wisch-breite: 46%; gap: var(--space-md); }
.gallery.wisch-reihe[data-anzahl="2"] { justify-content: center; }
}
@media (min-width: 64rem) {
.wisch-reihe { --wisch-breite: 38%; }
/* Drei Bilder zu je 38 % passen nicht ganz (114 % mit Abständen): dann
je ein Drittel, alle ganz zu sehen, ohne Wischen. */
.gallery.wisch-reihe[data-anzahl="3"] { --wisch-breite: calc((100% - 2 * var(--space-md)) / 3); }
/* Nur drei Bilder, randlos: an der sichtbaren Breite rechts vom Innenrand
bemessen (2.4 Bilder), damit das dritte bei jeder Breite angeschnitten ist.
Mit 44 % der Inhaltsbreite waren bei 1920px alle drei ganz zu sehen. */
.raeume-band.wisch-reihe { --wisch-breite: calc((100vw - var(--wisch-rand)) / 2.4); }
}
@media (prefers-reduced-motion: no-preference) {
.wisch-reihe { scroll-behavior: smooth; }
}
/* Pfeile (nur mit JavaScript, auf allen Geräten seit 2026-10-19): rund, 48px
groß und damit gut tippbar (empfohlen sind mindestens 44px), im Papierton
mit braunem Zeichen (12.67:1), mittig an den Rändern der Reihe. Rand im
Fließtextgrau, damit der Kreis als Bedienelement mindestens 3:1 hat: gegen
die Grundfarbe 5.38:1, gegen den Bildplatz 4.44:1; auf Grün hebt sich der
helle Kreis selbst ab (4.55:1). Farbe und Rand
fest, nicht über --color-heading und --color-line-strong: im grünen Band
sind die auf Beige bzw. Weiß umgestellt (Pfeil dort sonst 1.21:1). */
.wisch-rahmen { position: relative; }
.wisch-pfeil {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid var(--color-body, #656565);
border-radius: var(--radius-pill);
background-color: var(--color-paper);
color: var(--color-brown);
font-family: var(--font-ui);
font-size: 1.5rem;
line-height: 1;
transform: translateY(-50%);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wisch-pfeil--zurueck { left: var(--space-sm); }
.wisch-pfeil--vor { right: var(--space-sm); }
.wisch-pfeil[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) {
.wisch-pfeil:hover { background-color: var(--color-ground); }
}
/* 7.5b Gutschein der Startseite: Rot nur als Rahmen, keine Fläche im Inneren
(die rote Fläche wurde verworfen). Klassischer Doppelrahmen in Markenrot:
außen die kräftigere Linie (2px auf dem Handy, ab etwa 1200px 3px), innen
1px, dazwischen ein schmaler freier Streifen der Grundfläche (6px, ab etwa
1100px 8px). Gleiches Mittel wie beim Papier: die innere Linie ist eine
Kontur mit negativem Abstand, sie liegt im Innenabstand, nicht über dem
Text, und bleibt im Kontrastmodus sichtbar. Der Rahmen sitzt im Container,
auf dem Handy bleibt der Seitenrand (--gutter, 20px) zur Bildschirmkante. */
.gutschein-rahmen {
--rahmen-aussen: clamp(2px, 0.15vw + 1px, 3px);
--rahmen-abstand: clamp(0.375rem, 0.4vw + 0.2rem, 0.5rem);
padding: clamp(2rem, 5vw, 4.5rem);
border: var(--rahmen-aussen) solid var(--color-red);
outline: 1px solid var(--color-red);
outline-offset: calc(-1 * (var(--rahmen-aussen) + var(--rahmen-abstand) + 1px));
}
/* Gutschein-Bild der Startseite:
der echte Gutschein klein und schräg, er ragt aus dem roten Rahmen. Ruhig,
ohne Bewegung, nie über Text oder Beschriftung (gemessen 320 bis 1920px).
Ab 48rem unten links über dem Rahmen, halb über den Seitenrand hinaus und
unter den Rahmen (gemessen 1440px: 45px darunter, 23px links daneben), bis
10rem (160px) breit. Handy: gespiegelt unten rechts, nur über der unteren
rechten Ecke des Bildplatzes, der Text darüber bleibt frei; 5.5 bis 6.5rem
breit.
Die Datei hat 680px, also immer über 4 Bildpunkte je CSS-Pixel.
Die Lage rechnet von der Außenkante des Rahmens: --gutschein-einzug ist der
gemessene Einzug (10px bei 390, 18px ab 1440px), abzüglich der Linie, weil
absolute Lagen an der Innenkante der Linie beginnen. */
.gutschein-rahmen {
--gutschein-einzug: clamp(0.625rem, 1.2vw + 0.3rem, 1.125rem);
position: relative;
}
.gutschein-rahmen__bild {
position: absolute;
left: calc(var(--gutschein-einzug) - var(--rahmen-aussen) - 0.5 * var(--gutter));
bottom: calc(var(--gutschein-einzug) - var(--rahmen-aussen) - var(--space-xl));
z-index: 1;
width: clamp(8rem, 11vw, 10rem);
height: auto;
border-radius: var(--radius);
transform: rotate(-6deg);
/* Dieselben drei Schatten wie der Gutschein auf der Gutschein-Seite. */
box-shadow:
0 2px 4px rgba(20, 18, 16, 0.2),
0 14px 24px -6px rgba(20, 18, 16, 0.3),
0 36px 64px -18px rgba(20, 18, 16, 0.45);
}
@media (max-width: 48rem) {
.gutschein-rahmen__bild {
left: auto;
right: calc(var(--gutschein-einzug) - var(--rahmen-aussen) - 0.5 * var(--gutter));
bottom: calc(var(--gutschein-einzug) - var(--rahmen-aussen) - var(--space-lg));
width: clamp(5.5rem, 26vw, 6.5rem);
transform: rotate(6deg);
}
/* Die Beschriftung des Bildplatzes rückt in die freie linke Fläche (bei 320
und 360px lag sie sonst unter dem Gutschein); mit Foto entfällt sie. */
.gutschein-rahmen .split__media { padding-inline-end: clamp(5.5rem, 26vw, 6.5rem); }
}
/* 7.6 Kontakt */
.contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.contact-block--full { grid-column: 1 / -1; }
.contact-block__title {
margin-bottom: var(--space-xs);
color: var(--color-accent);
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.contact-block__note {
margin-bottom: var(--space-sm);
font-size: var(--text-sm);
}
.contact-block a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Route planen (Kontakt, Anfahrt), seit 2026-10-20: heller Button im grünen
Band mit eigenem Standort-Symbol in Markenrot; im Kontaktabschnitt der
Startseite auf der hellen Fläche als button--ghost (Rot auf der Grundfläche
6.86:1, beim Darüberfahren dunkles Rot). (0,2,0) nimmt die Unter-
streichung aus .contact-block a zurück. Symbol 20px, rechnerisch Rot auf
Creme 6.90:1 (Bedienelement, Soll 3:1), Schrift Braun auf Creme 11.95:1,
der Button gegen Olivgrün 4.29:1. */
.contact-block__route { margin-top: var(--space-md); }
.contact-block .route-planen {
gap: var(--space-xs);
min-height: 2.75rem;
text-decoration: none;
}
.route-planen__symbol {
flex: none;
width: 1.25rem;
height: 1.25rem;
color: var(--color-red);
}
/* Auf dem Outline-Button folgt das Symbol der Schrift (Rot, beim
Darüberfahren dunkles Rot). */
.button--ghost .route-planen__symbol { color: currentColor; }
.hours {
max-width: 26rem;
font-size: var(--text-sm);
}
.hours__row {
display: flex;
justify-content: space-between;
gap: var(--space-sm);
padding-block: 0.4rem;
border-bottom: 1px solid var(--color-line);
}
.hours dt { color: var(--color-heading); }
.hours dd { font-variant-numeric: tabular-nums; text-align: right; }
/* Hinweis unter der Liste (warme Küche): Abstand nach oben statt nach unten. */
.hours + .contact-block__note { margin-top: var(--space-sm); margin-bottom: 0; }
/* 7.6a Speisekarte (speisekarte.html): ruhig wie eine gedruckte Karte. Schmale
Spalte, Kategorien mittig, je Eintrag Gericht und Preis in einer Zeile, die
Beschreibung darunter, getrennt durch die feine Linie. Nur vorhandene Tokens. */
/* minmax(0, 1fr): ohne feste Spalte nimmt das Raster die Breite des breitesten
Inhalts (gemessen 320px: 281px in einer 230px breiten Karte, 6px Überlauf). */
.karte {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2xl);
}
.karte__titel {
margin-bottom: var(--space-md);
font-size: var(--text-h3);
text-align: center;
}
.karte__liste { border-top: 1px solid var(--color-line); }
.karte__eintrag {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-md);
row-gap: var(--space-2xs);
padding-block: var(--space-sm);
border-bottom: 1px solid var(--color-line);
}
.karte__gericht {
/* Gleich, ob h3 oder h4 (Suppen als Unterpunkt, Weihnachtsmenü): h4 hat
sonst die fette Standardschrift und Außenabstände des Browsers. */
margin: 0;
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 400;
line-height: 1.4;
}
.karte__preis {
grid-column: 2;
grid-row: 1;
color: var(--color-heading);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Beschreibung eines Gerichts: seit 2026-10-22 wie der Text der Empfehlung auf
der Startseite (EB Garamond, aufrecht, Fließtextgröße 17 bis 19px,
--color-body #656565, 5.73:1 auf dem Papierton), vorher kursiv in 15px und
schwer lesbar. */
.karte__beschreibung {
grid-column: 1 / -1;
font-size: var(--text-base);
}
/* 7.6b Formular (Kontakt). Nur vorhandene Tokens.
Feldrahmen im Markengrau #737373: 4.37:1 gegen die Grundfläche, über den 3:1,
die Bedienelemente brauchen (die feine Linienfarbe hätte nur 1.3:1). Fehler in
Rot, 6.86:1 auf der Grundfläche. Fokus über den globalen :focus-visible. */
.formular {
display: grid;
gap: var(--space-md);
}
/* align-content: start, damit ein Feld zusätzliche Höhe nicht auf Beschriftung
und Eingabefeld verteilt (seit 2026-10-21): In einer Reihe (PLZ/Ort) machte
eine mehrzeilige Meldung im einen Feld die Reihe höher, das Nachbarfeld wurde
gestreckt, sein Eingabefeld wuchs von 50 auf bis zu 104px und rutschte nach
unten (gemessen 390 und 320px, 14 von 18 Fehlerkombinationen). */
.formular__feld {
display: grid;
/* Eine Spalte, nie breiter als das Feld: sonst drückte das längste Wort einer
Meldung („Postleitzahl“, 65px) das PLZ-Feld bei 320px von 58.8 auf 65.3px auf. */
grid-template-columns: minmax(0, 1fr);
align-content: start;
gap: var(--space-2xs);
}
.formular label,
.formular legend {
color: var(--color-heading);
font-size: var(--text-sm);
}
.formular__pflicht { color: var(--color-red); }
.formular__optional,
.formular__hinweistext {
color: var(--color-text);
font-size: var(--text-xs);
}
.formular input:not([type='checkbox']),
.formular select,
.formular textarea {
width: 100%;
padding: 0.7em 0.9em;
border: 1px solid var(--color-grey);
border-radius: var(--radius);
background-color: var(--color-paper);
color: var(--color-heading);
font: inherit;
line-height: 1.4;
}
.formular textarea { resize: vertical; }
/* Eine Stufe spezifischer als die Feldregel darüber (.formular input:not(…) hat
0,2,1), sonst blieb der Rahmen bei Fehlern grau. Rot 6.86:1 gegen die Fläche. */
.formular .formular__feld [aria-invalid='true'] { border-color: var(--color-red); }
.formular__fehlertext {
color: var(--color-red);
font-size: var(--text-sm);
/* Lange Wörter in schmalen Spalten (PLZ bei 320px) nach Silben trennen. */
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.formular__gruppe {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.formular__gruppe legend {
margin-bottom: var(--space-xs);
padding: 0;
}
/* Felder einer Reihe oben bündig statt auf die Reihenhöhe gestreckt; die
Meldung steht unter ihrem Feld, das Nachbarfeld bleibt, wie es ist. */
.formular__reihe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
align-items: start;
gap: var(--space-md);
}
/* Auswahlfeld (Uhrzeit) im selben Kasten wie die Eingabefelder daneben:
Safari zeichnet ein Auswahlfeld sonst als eigenes Bedienelement und
übergeht den Innenabstand (gemessen in WebKit: Uhrzeit 27 bis 30px hoch,
Personen 50 bis 55px). Ohne eigene Darstellung gilt die Feldregel oben;
der Pfeil ist derselbe Winkel wie beim Datum. Eine Stufe spezifischer als
.formular select. */
.auswahl { position: relative; display: block; }
.formular .auswahl select {
-webkit-appearance: none;
appearance: none;
padding-right: 2.6em;
cursor: pointer;
}
.auswahl::after {
content: '';
position: absolute;
top: 50%;
right: 1.1em;
width: 0.55em;
height: 0.55em;
border-right: 1.5px solid var(--color-heading);
border-bottom: 1.5px solid var(--color-heading);
transform: translateY(-75%) rotate(45deg);
pointer-events: none;
}
/* Ein einzelnes Feld so breit wie ein Feld in einer Reihe mit zwei Feldern
(Anzahl der Gäste wie Personen): Die Reihe teilt sich ab 2 × 10rem plus
Abstand (21.5rem) in zwei Spalten, darunter ist das Feld voll breit. */
.formular__halb { container-type: inline-size; }
@container (min-width: 21.5rem) {
.formular__halb > .formular__feld { width: calc((100% - var(--space-md)) / 2); }
}
/* Häkchen links, Text daneben; der Text darf umbrechen. */
.formular__feld--auswahl {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: var(--space-sm);
}
.formular__feld--auswahl input {
width: 1.15rem;
height: 1.15rem;
margin-top: 0.3em;
accent-color: var(--color-red);
}
.formular__feld--auswahl .formular__fehlertext { grid-column: 2; }
.formular__zusammenfassung {
padding: var(--space-sm) var(--space-md);
border-left: 2px solid var(--color-red);
background-color: var(--color-paper);
color: var(--color-heading);
}
.formular__zusammenfassung ul { margin-top: var(--space-2xs); }
.formular__zusammenfassung li { list-style: disc; margin-left: 1.25em; }
.formular__zusammenfassung a { color: var(--color-red); }
.formular__absenden { margin: 0; }
.button:disabled { cursor: not-allowed; opacity: 0.6; }
/* Formular: erst das Anliegen, dann nur die
passenden Gruppen. Ausgeblendetes bleibt ausgeblendet, auch wenn eine Klasse
eine Anzeige setzt. */
.formular [hidden] { display: none !important; }
/* Gruppen mit eigenem Titel und feiner Linie darüber, damit keine Wand aus
Feldern entsteht. */
.formular__block {
display: grid;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-line);
}
.formular .formular__blocktitel {
float: left;
width: 100%;
margin-bottom: var(--space-2xs);
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.25;
}
.formular__blocktitel .formular__optional { font-family: var(--font-body); }
/* PLZ schmal, Ort breit, auch auf dem Handy nebeneinander. */
.formular__reihe--ort { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
/* Auswahl als Pillen wie die Buttons (Anliegen, Versand, Art der Feier): das
Auswahlfeld bleibt für Tastatur und Screenreader da, sichtbar ist die Pille.
Mindestens 44px hoch. Gewählt: Rot mit weißer Schrift 7.44:1; sonst Rahmen
im Markengrau (4.37:1 gegen die Fläche) und braune Schrift. */
.wahl-reihe {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.wahl { position: relative; display: inline-flex; }
.wahl input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.wahl span {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: 0.55em 1.2em;
border: 1px solid var(--color-grey);
border-radius: var(--radius-pill);
background-color: var(--color-paper);
color: var(--color-heading);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.2;
transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.wahl input:checked + span {
border-color: var(--color-red);
background-color: var(--color-red);
color: #FFFFFF;
}
.wahl input:focus-visible + span {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
.formular__wahl[aria-invalid='true'] .wahl span { border-color: var(--color-red); }
@media (hover: hover) {
.wahl input:not(:checked):hover + span { border-color: var(--color-red); }
}
/* Gutscheinwert mit Euro-Zeichen im Feld. */
.betrag { max-width: 12rem; }
.betrag__feld { position: relative; display: block; }
.formular .betrag input { padding-right: 2.2em; }
/* Mit den Knöpfen aus main.js (seit 2026-10-21): „−“, Feld, „+“ als ein Bauteil
mit gemeinsamem Rahmen. Knöpfe so hoch wie das Feld (rund 50px) und 3rem
breit, also über den 44px fürs Tippen. Die eingebauten Pfeile des
Zahlenfelds sind dann ausgeblendet, damit es keine doppelten Bedienelemente
gibt. Ohne JavaScript bleibt das Feld wie zuvor. */
.betrag--knoepfe {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) 3rem;
max-width: 15rem;
}
.betrag--knoepfe .betrag__feld { grid-column: 2; grid-row: 1; }
.formular .betrag--knoepfe input {
border-radius: 0;
-moz-appearance: textfield;
appearance: textfield;
text-align: center;
padding-inline: 0.6em 1.8em;
}
.betrag--knoepfe input::-webkit-outer-spin-button,
.betrag--knoepfe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.betrag--knoepfe .betrag__einheit { right: 0.8em; }
.betrag__knopf {
grid-row: 1;
min-height: 2.75rem;
border: 1px solid var(--color-grey);
background-color: var(--color-paper);
color: var(--color-heading);
font-family: var(--font-ui);
font-size: var(--text-lead);
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.betrag__knopf--minus {
grid-column: 1;
border-right: 0;
border-radius: var(--radius) 0 0 var(--radius);
}
.betrag__knopf--plus {
grid-column: 3;
border-left: 0;
border-radius: 0 var(--radius) var(--radius) 0;
}
.betrag__knopf[aria-disabled='true'] { color: var(--color-grey); opacity: 0.4; cursor: default; }
.betrag__knopf:active:not([aria-disabled='true']) { background-color: rgba(167, 28, 24, 0.08); }
@media (hover: hover) {
.betrag__knopf:not([aria-disabled='true']):hover { background-color: rgba(167, 28, 24, 0.08); }
}
.betrag__einheit {
position: absolute;
top: 50%;
right: 0.9em;
transform: translateY(-50%);
color: var(--color-heading);
pointer-events: none;
}
/* Hinweis bei Abholung: ruhig, mit roter Linie links wie der Hinweis-Kasten. */
.formular__info {
max-width: none;
padding-left: var(--space-sm);
border-left: 2px solid var(--color-accent);
font-size: var(--text-sm);
}
/* Datumsauswahl (main.js): großer Knopf mit dem gewählten Tag „Mo., 19.10.26“
und darunter ein Monatsblatt. Tage mindestens 44px hoch, bei 320px
Fensterbreite sieben Spalten zu je rund 37px Breite. Nicht wählbare Tage
(vergangen, Dienstag, Mittwoch) blass und durchgestrichen. */
.datum-knopf {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 3.25rem;
padding: 0.7em 0.9em;
border: 1px solid var(--color-grey);
border-radius: var(--radius);
background-color: var(--color-paper);
color: var(--color-heading);
font: inherit;
font-size: var(--text-lead);
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.datum-knopf::after {
content: '';
width: 0.55em;
height: 0.55em;
margin-left: var(--space-sm);
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-25%) rotate(45deg);
}
.datum-knopf[aria-expanded='true']::after { transform: translateY(25%) rotate(-135deg); }
.datum-knopf--leer { color: var(--color-text); }
.formular .formular__feld .datum-knopf[aria-invalid='true'] { border-color: var(--color-red); }
.kalender {
display: grid;
gap: var(--space-xs);
max-width: 26rem;
padding: var(--space-sm);
border: 1px solid var(--color-line-strong);
border-radius: var(--radius);
background-color: var(--color-paper);
}
.kalender__kopf {
display: flex;
align-items: center;
justify-content: space-between;
}
.kalender__monat {
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-lead);
}
.kalender__blaettern {
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-heading);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.kalender__blaettern:disabled { opacity: 0.3; cursor: default; }
.kalender__raster { display: grid; gap: 2px; }
/* Schmale Handys: das Monatsblatt reicht etwas in den Innenrand des Papiers
(bleibt innerhalb der inneren Papierlinie), damit die Tage breiter werden:
gemessen 390px rund 43px statt 36px je Tag. */
@media (max-width: 30rem) {
.kalender {
margin-inline: calc(-1 * var(--space-xs));
padding: var(--space-2xs);
}
}
.kalender__zeile {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 2px;
}
.kalender__zeile--kopf {
color: var(--color-text);
font-family: var(--font-ui);
font-size: var(--text-xs);
text-align: center;
}
.kalender__tag {
width: 100%;
min-height: 2.75rem;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--color-heading);
font-family: var(--font-ui);
font-size: var(--text-base);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.kalender__tag--heute { box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.kalender__tag[aria-disabled='true'] {
color: var(--color-grey);
opacity: 0.45;
text-decoration: line-through;
cursor: default;
}
.kalender__tag[aria-pressed='true'] { background-color: var(--color-red); color: #FFFFFF; }
@media (hover: hover) {
.kalender__blaettern:not(:disabled):hover,
.kalender__tag:not([aria-disabled='true']):not([aria-pressed='true']):hover {
background-color: rgba(167, 28, 24, 0.08);
}
}
/* 7.7 Seitenkopf einer Unterseite */
.page-header { padding-top: calc(var(--section-padding) * 0.7); }
.page-header__title { font-size: clamp(2.25rem, 4vw + 0.9rem, 3.5rem); }
/* Impressum und Datenschutz: Hinweis- oder Platzhalterzeile unter dem Titel. */
.page-header__text { margin-top: var(--space-md); }
/* Rechtstexte (Impressum, Datenschutz-Entwurf, seit 2026-10-21): ruhige
Lesespalte in der schmalen Breite, Zwischentitel in Abschnittsgröße h3,
Absätze mit gleichmäßigem Abstand. Nur vorhandene Tokens. */
.rechtstext-abschnitt { padding-top: 0; }
.page-header--rechtstext { padding-bottom: var(--space-2xl); }
.rechtstext > * + * { margin-top: var(--space-md); }
.rechtstext h2 { margin-top: var(--space-xl); font-size: var(--text-h3); }
.rechtstext h3 { margin-top: var(--space-lg); font-size: var(--text-base); font-family: var(--font-body); font-weight: 600; }
.rechtstext ul { padding-left: 1.25em; }
.rechtstext li { list-style: disc; }
.rechtstext li + li { margin-top: var(--space-2xs); }
/* Vermerk über dem Datenschutz-Entwurf und gekennzeichnete Platzhalter darin:
im Markenrot, damit beim Vorführen klar ist, was noch fehlt. Rot auf der
Grundfläche 6.86:1. */
.page-header__text--entwurf {
color: var(--color-red);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.rechtstext__platzhalter { color: var(--color-red); }
/* 7.9 Unterseiten: Bausteine für die mutigere Gestaltung (nur Unterseiten).
Alles aus den vorhandenen Tokens; neu sind nur Anordnungen und Größen. */
/* Großer Seitenkopf: starker Größenkontrast zur Fließschrift. */
.kopf-gross { padding-block: calc(var(--section-padding) * 0.6) var(--section-padding); }
.kopf-gross__titel {
font-size: clamp(3.25rem, 10vw, 8.5rem);
line-height: 0.95;
letter-spacing: -0.015em;
}
.kopf-gross .lead { margin-top: var(--space-md); max-width: 36ch; }
/* Abschnitt ohne Innenabstand oben und unten, für randlose Bänder. */
.section--band { padding-block: 0; }
/* Randloses Bildband über die ganze Fensterbreite, drei Bilder in 5 : 3 : 4. */
.bildband {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
gap: var(--space-2xs);
}
.bildband > .bildplatz {
--bildformat: auto;
height: clamp(16rem, 34vw, 32rem);
border: 0;
border-radius: 0;
}
/* Papier mit doppelter feiner Linie, wie eine gedruckte Karte. */
.papier {
padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
border: 1px solid var(--color-line-strong);
outline: 1px solid var(--color-line);
outline-offset: -0.6rem;
background-color: var(--color-paper);
}
/* „&“ in einer großen Überschrift nur so hoch wie die Kleinbuchstaben (das n):
In Libre Caslon Text ist das & 0.79em hoch (0.78 über, 0.01 unter der
Grundlinie), das n 0.54em; 0.54 / 0.79 = 0.68. Gemessen im Browser mit
der Schrift der Überschrift, Schriftgröße 1000px. */
.titel-und { font-size: 0.68em; }
/* Große Ziffer in der Akzentfarbe (Rot auf hell 6.86:1, Weiß auf Olivgrün 4.62:1). */
.ziffer {
display: block;
color: var(--color-accent);
font-family: var(--font-display);
font-size: clamp(3rem, 6vw, 5rem);
line-height: 1;
}
/* Fehlen Bilder im Band (data-anzahl), teilen sich die vorhandenen die Breite. */
.bildband[data-anzahl="2"] { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.bildband[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 48rem) {
.bildband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bildband > :first-child { grid-column: 1 / -1; }
.bildband > .bildplatz { height: clamp(11rem, 45vw, 16rem); }
/* Zwei Bilder nebeneinander statt eins breit und eins halb. */
.bildband[data-anzahl="2"] > :first-child { grid-column: auto; }
}
/* 7.9a Speisekarte: eine edle gedruckte Karte auf Papier, mittig, flankiert
von zwei Hochformaten, die über den Kartenrand ragen (nur breit). Gericht und
Preis mit gepunkteter Führungslinie, Beschreibung kursiv darunter. */
.karte-buehne {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
.karte-buehne > .karte-edel { grid-column: 1 / -1; grid-row: 2; }
.karte-buehne__bild { --bildformat: 3 / 4; }
/* Die Fotos neben der Karte treten hinter das Papier zurück: weniger Farbe und
Kontrast, dazu ein Schleier in der Grundfläche. So wirkt jedes Foto neben der
hellen Karte ruhig, ohne es einzeln zu bearbeiten. Im Kontrastmodus ohne
Schleier (er würde dort in der Systemfarbe liegen). */
.karte-buehne__bild.bildplatz--bild > img { filter: saturate(0.75) contrast(0.9); }
.karte-buehne__bild.bildplatz--bild::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--color-ground);
opacity: 0.2;
pointer-events: none;
}
@media (forced-colors: active) {
.karte-buehne__bild.bildplatz--bild::after { display: none; }
}
.karte-edel .karte { gap: var(--space-2xl); }
/* Kopf der gedruckten Karte: das Logo mit Unterzeile klein und mittig, darunter
eine durchgehende feine Linie (die Raute ist seit 2026-10-19 entfallen). Rein dekorativ
(aria-hidden), der Seitentitel steht im Seitenkopf. */
.karte__kopf {
display: grid;
justify-items: center;
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.karte__kopf img { width: min(13rem, 60%); }
.karte__zier {
position: relative;
width: min(12rem, 50%);
height: 1px;
background-color: var(--color-line-strong);
}
/* Kategorien wie auf einer gedruckten Karte: gesperrte Großbuchstaben in der
Überschriftenschrift zwischen zwei feinen Linien. */
.karte-edel .karte__titel {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
font-size: var(--text-h3);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.karte-edel .karte__titel::before,
.karte-edel .karte__titel::after {
content: '';
flex: 1;
height: 1px;
background-color: var(--color-line);
}
.karte-edel .karte__liste { border-top: 0; }
/* Erste Spalte minmax(0, max-content) und Silbentrennung: bei 320px passen
lange Namen wie „Confiertes Fjordforellenfilet“ sonst samt Preis nicht in
die Karte (gemessen: Preise ragten bis 51px hinaus, Seite 6px zu breit). */
.karte-edel .karte__eintrag {
grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
align-items: baseline;
padding-block: var(--space-xs);
border-bottom: 0;
}
/* Gänge der saisonalen Menüs sind h3 (Gliederung unter der h2 des Menüs),
brechen aber um wie bisher, ohne den ausgeglichenen Umbruch der h3. */
.karte__liste--saison .karte__gericht { text-wrap: wrap; }
.karte-edel .karte__gericht {
font-size: var(--text-lead);
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
}
.karte__fuellung {
grid-column: 2;
grid-row: 1;
align-self: end;
margin-bottom: 0.4em;
border-bottom: 1px dotted var(--color-line-strong);
}
.karte-edel .karte__preis { grid-column: 3; }
/* Gänge eines Menüs (Menü der Karte, saisonale Menüs): zwischen zwei Gängen
eine kleine Tilde in der Akzentfarbe, linksbündig wie die Gänge, wie auf der
bisherigen Website (Rot auf Papier 6.86:1). Rein schmückend: der leere
Alternativtext hinter dem Schrägstrich hält sie von Screenreadern fern;
Browser ohne diese Schreibweise nehmen die erste Zeile. */
.karte__liste--gaenge > .karte__eintrag + .karte__eintrag::before {
content: '~';
content: '~' / '';
grid-column: 1 / -1;
color: var(--color-accent);
font-family: var(--font-display);
font-size: var(--text-lead);
line-height: 1;
/* Unten so viel Luft wie oben (Abstand der Einträge), damit die Tilde
mittig zwischen den Gängen steht. */
margin-bottom: var(--space-xs);
}
/* Unterpunkt einer Kategorie (Suppen unter Vorspeisen): kleiner als der
Kategorietitel, mittig, ohne Strich. */
.karte__untertitel {
margin: var(--space-lg) 0 var(--space-2xs);
color: var(--color-accent);
font-size: var(--text-base);
text-align: center;
}
/* Mehrere Preise zu einem Gericht (Blattsalat) und die Preise eines Menüs:
je Zeile Bezeichnung, Führungslinie, Preis wie bei den Gerichten. */
.karte__varianten {
grid-column: 1 / -1;
display: grid;
gap: var(--space-2xs);
margin-top: var(--space-2xs);
}
/* Die Bezeichnung darf umbrechen (minmax(0, max-content)), sonst passt
„als Vorspeisensalat“ samt Preis bei 320px nicht in die Karte. */
.karte__varianten li {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(1.5rem, 1fr) auto;
align-items: baseline;
column-gap: var(--space-md);
}
.karte__varianten .karte__preis { grid-column: 3; grid-row: 1; }
.karte__variante { font-size: var(--text-sm); }
.karte__varianten--menue {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-line);
}
.karte__varianten--menue .karte__variante {
color: var(--color-heading);
font-size: var(--text-base);
}
/* Sehr schmale Bildschirme (bis 360px): ohne gepunktete Führungslinie, damit
der Name die Breite bis zum Preis bekommt. Mit Linie blieben bei 320px nur
rund 106px für den Namen, die Trennung zerlegte ihn in viele Silben. */
@media (max-width: 22.5rem) {
.karte-edel .karte__eintrag,
.karte__varianten li {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-sm);
}
.karte__fuellung { display: none; }
.karte-edel .karte__preis,
.karte__varianten .karte__preis { grid-column: 2; }
/* „Vegetarisches“ ragte bei 320px 15px über die Karte bis an die innere
Papierlinie: halbe Laufweite und kleinerer Abstand zu den Seitenlinien. */
.karte-edel .karte__titel {
gap: var(--space-xs);
letter-spacing: calc(var(--tracking-wide) / 2);
}
}
/* Hinweis unter der Karte: tagesaktuelle Änderungen, Zeiten der warmen Küche. */
.karte__hinweis {
padding-top: var(--space-md);
border-top: 1px solid var(--color-line);
font-size: var(--text-sm);
text-align: center;
}
.karte__hinweis p { margin-inline: auto; }
.karte__hinweis p + p { margin-top: var(--space-2xs); }
/* Weihnachten: Öffnungszeiten und Weihnachtsfeier als zwei Hinweise unter der
Karte, breit nebeneinander. */
.weihnachten__info {
display: grid;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.weihnachten__info h3 { margin-bottom: var(--space-2xs); font-size: var(--text-h3); }
@media (min-width: 48rem) {
.weihnachten__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.karte-buehne {
grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr);
align-items: start;
gap: 0;
}
.karte-buehne > .karte-edel { grid-column: 2; grid-row: 1; }
.karte-buehne__bild { position: relative; z-index: 1; }
.karte-buehne__bild--links {
grid-column: 1;
grid-row: 1;
margin-top: var(--space-2xl);
margin-right: calc(-1 * var(--space-xl));
}
.karte-buehne__bild--rechts {
grid-column: 3;
grid-row: 1;
align-self: end;
margin-bottom: var(--space-2xl);
margin-left: calc(-1 * var(--space-xl));
}
}
/* Unter 64rem stünden die zwei Fotos nicht neben der Karte, sondern direkt
unter dem Bildband im Kopf: Dort fallen sie weg, die Karte folgt auf das
Bildband. Ausgeblendet laden sie auch nicht (loading="lazy"; ohne
JavaScript lädt der Browser solche Bilder trotzdem). */
@media (max-width: 63.99rem) {
.karte-buehne__bild { display: none; }
.karte-buehne > .karte-edel { grid-row: auto; }
}
/* Seitenkopf geteilt: Text links bündig zum Inhalt, Bild randlos bis an den
rechten Fensterrand. 50vw - Inhaltsbreite/2 setzt den Text auf die Kante des
Containers; auf dem Handy steht das Bild unter dem Text. */
.kopf-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding-block: 0;
}
.kopf-split__text {
align-self: center;
padding: calc(var(--section-padding) * 0.6) var(--gutter) var(--section-padding);
}
.kopf-split__bild { position: relative; }
/* Ohne Bild folgt gleich der nächste Abschnitt mit eigenem Abstand oben; der
volle Abstand unten ergäbe zusammen rund 250px Lücke (1440px). */
.kopf-split--ohne-bild .kopf-split__text { padding-bottom: var(--space-lg); }
/* Im geteilten Kopf hat der Titel nur die linke Spalte: bei 8.5rem ragte
"Gutschein" bei 1440px unter das Bild. 6.5vw passt in die Spalte. */
.kopf-split .kopf-gross__titel { font-size: clamp(3.25rem, 6.5vw, 6.5rem); }
/* Abstand zwischen Titel und Lead wie im großen Seitenkopf (.kopf-gross .lead);
ohne ihn stand der Lead bei Gutschein und Kontakt direkt am Titel, bei Jobs
reichte die Unterlänge des großen „J“ in seine erste Zeile. */
.kopf-split .lead { margin-top: var(--space-md); }
.kopf-split__bild > .bildplatz {
--bildformat: auto;
height: clamp(20rem, 90vw, 28rem);
border: 0;
border-radius: 0;
}
@media (min-width: 64rem) {
.kopf-split {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
min-height: clamp(34rem, 52vw, 46rem);
}
/* Kopf ohne Bild (Jobs): nur der Text, so hoch wie er ist. */
.kopf-split.kopf-split--ohne-bild { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.kopf-split__text {
padding-inline-start: max(var(--gutter), calc(50vw - var(--container-max) / 2 + var(--gutter)));
padding-inline-end: var(--space-2xl);
}
.kopf-split__bild > .bildplatz { height: 100%; }
}
/* 7.9b Gutschein: der echte Gutschein (assets/gutschein-hofgut-rosenau.webp,
680 x 1440) liegt schräg im Raum vor dem Bild. Höchstens 15rem (240px)
breit: die Datei hat 680px, das reicht auch bei doppelter Pixeldichte
(2.8 Bildpunkte je CSS-Pixel); über 340px würde sie unscharf.
Die Neigung steht in drei Variablen; ohne JavaScript, auf Touch-Geräten
und bei reduzierter Bewegung bleibt die ruhige Grundneigung. Mit Maus
setzt main.js --neig-x/--neig-y je nach Zeigerposition um bis zu 8 Grad. */
/* Handy und Tablet: rechts, damit die Beschriftung des Bildplatzes frei bleibt;
die rückt dafür in die linke freie Fläche (Innenabstand = Gutscheinbreite). */
.gutschein-bild {
position: absolute;
/* Etwas mehr als der Seitenrand: die Schräglage schiebt die rechte untere
Ecke um rund 10px nach außen (gemessen bei 390px). */
right: calc(var(--gutter) + var(--space-2xs));
bottom: calc(-1 * var(--space-xl));
z-index: 1;
width: clamp(8.5rem, 38vw, 11rem);
perspective: 1200px;
}
.kopf-split__bild--gutschein > .placeholder {
padding-inline-end: calc(clamp(8.5rem, 38vw, 11rem) + var(--gutter));
}
.gutschein-bild__karte {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
transform:
rotateX(var(--neig-x, 5deg))
rotateY(var(--neig-y, -12deg))
rotate(-4deg);
/* Drei Schatten übereinander wie bei einem Gegenstand im Licht: ein knapper
Kontaktschatten, ein mittlerer und ein weiter, weicher. Neutrales Dunkel
wie die Abdunklung der Bildsektionen (--bild-schleier). */
box-shadow:
0 2px 4px rgba(20, 18, 16, 0.2),
0 14px 24px -6px rgba(20, 18, 16, 0.3),
0 36px 64px -18px rgba(20, 18, 16, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
.gutschein-bild__karte { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@media (min-width: 64rem) {
.gutschein-bild {
right: auto;
left: calc(-1 * var(--space-2xl));
bottom: var(--space-xl);
width: clamp(12rem, 16vw, 15rem);
}
.kopf-split__bild--gutschein > .placeholder { padding-inline-end: var(--space-md); }
}
.schritte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--space-lg);
}
.schritte > li {
padding-top: var(--space-md);
border-top: 1px solid var(--color-line-strong);
}
.schritte .ziffer { margin-bottom: var(--space-sm); }
.schritte h3 { margin-bottom: var(--space-xs); }
/* Hinweis-Kasten im Fließtext (Hochzeitstag, Honig); der Hinweis im
Kontaktformular bleibt unberührt. */
.split__text .hinweis h3,
.split__text .hinweis h4 {
margin: 0 0 var(--space-2xs);
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: 400;
}
/* Honig im Abschnitt Atmosphäre (Über uns): unter dem Trio, mit Abstand,
Titel in Abschnittsgröße, obwohl eine Ebene tiefer (h3). */
.atmo-honig { margin-top: calc(var(--space-2xl) * 1.5); }
.atmo-honig__titel { font-size: var(--text-h2); }
.split__text .hinweis p + p { margin-top: var(--space-2xs); }
.split__text .hinweis a { color: var(--color-red); text-underline-offset: 0.2em; }
/* Zwei Wege zum Gutschein: A als Hinweis-Kasten, B als vier Schritte. */
.gutschein-wege { display: grid; gap: var(--space-md); }
/* Jeder Weg eine weiße Karte im Aussehen des Hinweis-Kastens (Papierton, rote
Linie links), oben ein großer roter Buchstabe. So ist sofort klar, welche
Schritte zu welchem Weg gehören. */
.weg {
padding: var(--space-lg) var(--space-xl) var(--space-xl);
border-left: 2px solid var(--color-accent);
background-color: var(--color-paper);
}
.weg__buchstabe {
color: var(--color-accent);
font-family: var(--font-display);
font-size: clamp(2.5rem, 4vw, 3.5rem);
line-height: 1;
}
.weg h3 { margin: var(--space-xs) 0 var(--space-sm); font-size: clamp(1.625rem, 1.2vw + 1.2rem, 2.125rem); }
/* Abholung nur während der Öffnungszeiten (seit 2026-10-21): unter dem Text
der Karte A, durch eine feine Linie abgesetzt, in kleinerer Schrift. */
.weg__hinweis {
margin-top: var(--space-md);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-line);
font-size: var(--text-sm);
}
/* Die vier Schritte kompakt: kleine Ziffer im Kreis, Text daneben. */
.weg__schritte { display: grid; gap: var(--space-sm); counter-reset: schritt; }
.weg__schritte li {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: var(--space-sm);
align-items: baseline;
counter-increment: schritt;
}
.weg__schritte li::before {
content: counter(schritt);
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border: 1px solid var(--color-accent);
border-radius: var(--radius-pill);
color: var(--color-accent);
font-family: var(--font-ui);
font-size: var(--text-xs);
transform: translateY(-0.1em);
}
@media (min-width: 48rem) {
.gutschein-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-lg); }
}
/* Großer Abstand nach der Karte, die unten aus dem Kopf herausragt. */
.gutschein-ablauf { padding-top: calc(var(--section-padding) + var(--space-xl)); }
/* Ein randloses Bild über die ganze Fensterbreite. */
.bild-randlos > .bildplatz {
--bildformat: auto;
height: clamp(18rem, 42vw, 38rem);
border: 0;
border-radius: 0;
}
/* Asymmetrisch: Bild über sechs von zwölf Spalten, Text versetzt daneben. */
.versatz { display: grid; gap: var(--space-lg); }
.versatz__bild > .bildplatz { --bildformat: 4 / 5; }
.versatz__text > * + * { margin-top: var(--space-md); }
.versatz__text .lead {
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-h3);
line-height: 1.35;
}
@media (min-width: 64rem) {
.versatz {
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
gap: var(--space-md);
}
.versatz__bild { grid-column: 1 / 7; grid-row: 1; }
.versatz__text { grid-column: 8 / -1; grid-row: 1; }
/* Das Bild ragt unten in den nächsten Abschnitt; der bekommt dafür oben mehr
Innenabstand (.nach-ueberhang), damit nichts darunter verschwindet. */
.ragt-unten {
position: relative;
z-index: 1;
margin-bottom: calc(-1 * (var(--section-padding) + var(--space-2xl)));
}
.nach-ueberhang { padding-top: calc(var(--section-padding) * 2 + var(--space-2xl)); }
}
/* Unter 64rem wie am Desktop gedacht: erst der Text, darunter das Bild (nur
in der Anzeige, im HTML steht das Bild vorn), schmaler als die Spalte und
links bündig; es ragt um --space-xl in den nächsten Abschnitt, der dafür
oben entsprechend mehr Innenabstand bekommt. */
@media (max-width: 63.99rem) {
.versatz__bild { order: 1; width: min(85%, 28rem); }
.ragt-unten {
position: relative;
z-index: 1;
margin-bottom: calc(-1 * (var(--section-padding) + var(--space-xl)));
}
.nach-ueberhang { padding-top: calc(var(--section-padding) * 2 + var(--space-xl)); }
}
/* Team (Über uns): je Person eine Karte mit Porträt im Hochformat 4 : 5, darunter
bzw. daneben Name, Funktion und Text. Die Liste .team nimmt weitere gleiche
Karten auf, untereinander. Handy und Tablet: Bild über dem Text, höchstens
22rem breit; ab 64rem Bild links (5 von 12 Spalten), Text rechts. */
.team { display: grid; gap: var(--space-2xl); }
.team-karte { display: grid; gap: var(--space-lg); align-items: start; }
.team-karte__bild {
--bildformat: 4 / 5;
width: 100%;
max-width: 22rem;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* Bildplatz auf Olivgrün zurückgenommen wie der Flyer-Platz der Termine:
leicht abgedunkelt, Streifen und Rand hell, Beschriftung weiß (5.20:1 auf
der Fläche). */
.section--olive .team-karte__bild.placeholder {
background-color: rgba(60, 47, 41, 0.12);
background-image: repeating-linear-gradient(
45deg,
transparent 0 12px,
rgba(255, 255, 255, 0.05) 12px 24px
);
border-color: var(--color-line);
color: var(--color-text);
}
.team-karte__text > * + * { margin-top: var(--space-md); }
/* Name in der Überschriftenschrift, Funktion klein und gesperrt darunter. Auf
Olivgrün beides weiß: der Name ist auf dem Handy 20px und braucht 4.5:1,
Beige erreicht nur 3.77:1, Weiß 4.62:1 (Befund der Release-Prüfung). */
.team-karte__name { font-size: var(--text-h3); }
.section--olive .team-karte__name { color: var(--color-text); }
.team-karte__text > .team-karte__rolle {
margin-top: var(--space-2xs);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.team-karte__text > .team-karte__rolle + p { margin-top: var(--space-lg); }
/* Zwei Teile im Team (seit 2026-10-22): „Gastgeber“ und „Küche“, getrennt
durch eine feine Linie mit viel Luft. Rangordnung in drei klar
unterschiedenen Stufen: Überzeile „Team“ klein und gesperrt (15px), die
Teile als große Überschrift (h2, 30 bis 46px, Beige wie die großen
Überschriften auf Olivgrün, 3.77:1, reicht ab 24px), der Leitsatz der Küche
in der Fließtextschrift in Einleitungsgröße (19 bis 23px, weiß, 4.62:1).
Abstände innerhalb eines Teils höchstens 3.5rem, zwischen den Teilen 2 x
5rem plus Linie, damit die zwei Teile auf einen Blick getrennt sind. Der
Abschnitt hat keine eigene Hauptüberschrift, ihn benennt die Überzeile. */
.team__kopf { margin-bottom: var(--space-lg); }
.team__kopf .eyebrow { margin-bottom: var(--space-sm); }
.team__gruppe {
color: var(--color-heading);
font-size: var(--text-h2);
line-height: 1.15;
}
.team__kopf .lead {
max-width: 32ch;
margin-top: var(--space-sm);
color: var(--color-text);
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: 1.5;
}
.team__trenner {
height: 1px;
margin-block: var(--space-2xl);
border: 0;
background-color: var(--color-line);
}
/* Die zwei Gastgeber über der Küche: je Porträt 4 : 5,
darunter Name und kurze Beschreibung; ab 48rem nebeneinander, auf dem Handy
untereinander. Bildplätze und Schrift wie die Team-Karte. */
.gastgeber {
display: grid;
/* untereinander 3.5rem, weniger als der Abstand zur Küche */
gap: var(--space-xl);
}
.gastgeber-karte { display: grid; gap: var(--space-sm); align-content: start; }
.gastgeber-karte .team-karte__bild { margin-bottom: var(--space-xs); }
@media (min-width: 48rem) {
/* Je höchstens 24rem breit, damit die Gastgeber die Team-Karte darunter
(Porträt 5 von 12 Spalten, bei 1440px rund 420px) nicht überragen. */
.gastgeber { grid-template-columns: repeat(2, minmax(0, 24rem)); gap: var(--space-xl); }
.gastgeber-karte .team-karte__bild { max-width: none; }
}
.team + .section__foot { margin-top: var(--space-xl); }
@media (min-width: 64rem) {
.team-karte {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-2xl);
}
.team-karte__bild { max-width: none; }
/* Ohne Porträt nur der Text, in Lesebreite. */
.team-karte.team-karte--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.team-karte--ohne-bild .team-karte__text { max-width: 46rem; }
}
/* Trio: drei Hochformate, das mittlere tiefer gesetzt. Auf dem Handy zwei
nebeneinander, das dritte quer darunter. */
.trio {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm);
align-items: start;
}
.trio .bildplatz { --bildformat: 3 / 4; }
.trio > :nth-child(2) { margin-top: var(--space-xl); }
.trio > :nth-child(3) { grid-column: 1 / -1; }
.trio > :nth-child(3) .bildplatz { --bildformat: 16 / 9; }
@media (min-width: 48rem) {
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.trio > :nth-child(2) { margin-top: var(--space-2xl); }
.trio > :nth-child(3) { grid-column: auto; margin-top: var(--space-md); }
.trio > :nth-child(3) .bildplatz { --bildformat: 3 / 4; }
}
/* 7.9d Galerie: eine Bildwand in Spalten mit wechselnden Formaten statt eines
gleichförmigen Rasters, unterbrochen von einem randlosen Bild. Drei Spalten
breit, zwei ab Handybreite; jedes Bild bleibt ganz in seiner Spalte. */
.kopf-links { text-align: left; }
.kopf-links .kopf-gross__titel { max-width: 12ch; }
.bildwand { columns: 2; column-gap: var(--space-sm); }
.bildwand > * {
break-inside: avoid;
margin-bottom: var(--space-sm);
}
.bildwand .bildplatz { --bildformat: 4 / 5; }
/* Weniger Bilder als Spalten (data-anzahl): nur so viele Spalten wie Bilder,
mittig, jede so breit wie sonst. */
.bildwand[data-anzahl="1"] { columns: 1; max-width: calc((100% - var(--space-sm)) / 2); margin-inline: auto; }
/* Galerie auf Touch-Geräten (keine Maus, keine Bildansicht): main.js baut eine
Folge aus allen Bildern (.galerie-folge), jedes Bild groß (88 % der Breite,
ein Stück des nächsten bleibt sichtbar), mit Pfeilen und Zähler darunter.
Ohne JavaScript werden die Bildwände hier selbst zu Wisch-Reihen. */
.galerie-folge { padding-bottom: var(--section-padding); }
.galerie-folge__reihe {
--wisch-breite: 88%;
--wisch-rand: var(--gutter);
}
.galerie-folge__reihe .bildplatz { --bildformat: 4 / 5; }
.galerie-folge__zaehler {
margin: var(--space-sm) auto 0;
color: var(--color-heading);
font-family: var(--font-ui);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
text-align: center;
}
@media not all and (hover: hover) and (pointer: fine) {
.bildwand {
display: flex;
gap: var(--space-sm);
columns: auto;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.bildwand::-webkit-scrollbar { display: none; }
.bildwand > * {
flex: 0 0 88%;
margin-bottom: 0;
scroll-snap-align: start;
}
/* (0,3,0) wie die wechselnden Formate oben, und später: alle hochkant. */
.bildwand > :nth-child(n) .bildplatz { --bildformat: 4 / 5; }
}
.bildwand > :nth-child(3n + 2) .bildplatz { --bildformat: 1 / 1; }
.bildwand > :nth-child(4n + 3) .bildplatz { --bildformat: 3 / 2; }
.bildwand > :nth-child(5n + 1) .bildplatz { --bildformat: 2 / 3; }
/* Abstand zum Fuß nach dem letzten Teil der Bildwand. */
.galerie-schluss { padding-bottom: var(--section-padding); }
@media (min-width: 64rem) {
.bildwand { columns: 3; column-gap: var(--space-md); }
.bildwand > * { margin-bottom: var(--space-md); }
.bildwand[data-anzahl="1"] { max-width: calc((100% - 2 * var(--space-md)) / 3); }
.bildwand[data-anzahl="2"] { columns: 2; max-width: calc((100% - 2 * var(--space-md)) / 3 * 2 + var(--space-md)); margin-inline: auto; }
}
/* 7.9e Kontakt: einladend statt Formularwüste. Großer Titel und die Telefon-
nummer groß im geteilten Kopf, Karte randlos rechts; Öffnungszeiten und Anfahrt
im olivgrünen Band; das Formular auf Papier neben einer kurzen Einladung. */
.telefon-gross {
display: inline-block;
margin-top: var(--space-lg);
color: var(--color-heading);
font-family: var(--font-display);
font-size: var(--text-h2);
line-height: 1.1;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.kontakt-adresse { margin-top: var(--space-md); }
.kontakt-weitere { margin-top: var(--space-sm); }
.kontakt-weitere a { text-underline-offset: 0.2em; }
/* Feiertage: Datum mit Anlass ist länger als ein Wochentag, also oben bündig. */
.hours--feiertage .hours__row { align-items: baseline; }
.contact-block__title--abstand { margin-top: var(--space-lg); }
/* Auf Olivgrün tragen die kleinen Tagesnamen kein Beige (3.77:1), also Weiß. */
.section--olive .hours dt { color: var(--color-text); }
.zeiten-anfahrt {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-xl);
}
.formular-buehne { display: grid; gap: var(--space-xl); }
.formular-buehne__einladung > * + * { margin-top: var(--space-md); }
@media (min-width: 64rem) {
.formular-buehne {
grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
align-items: start;
gap: var(--space-2xl);
}
/* Die Einladung bleibt beim Ausfüllen neben dem Formular stehen. */
.formular-buehne__einladung {
position: sticky;
top: calc(var(--header-height) + var(--space-lg));
}
}
/* 7.9f Feiern & Veranstaltungen: festlich. Seitenkopf als bildschirmhohe
Bildfläche wie "Feiern im Hofgut" auf der Startseite (Abdunklung, weißer Text),
Anlässe als große Liste mit Ziffern im Oliv-Band, Räume als randloses Band,
Termine mit Bildplatz, Anfrage auf Papier. */
.kopf-bild .kopf-gross__titel { font-size: clamp(2.75rem, 8vw, 7rem); }
.kopf-bild .lead { margin-inline: auto; }
/* Mit JavaScript (kopf-ueber-bild) liegt die Kopfzeile durchsichtig auf dem
Bild: Der Seitenkopf rückt wie der Hero um ihre Höhe nach oben (mit Linie
1px mehr) und füllt die ganze sichtbare Höhe; der Inhalt bleibt mittig im
Bereich unter der Kopfzeile. Ohne JavaScript bleibt er unter der Kopfzeile
wie bisher. */
.js.kopf-ueber-bild .kopf-bild { margin-top: calc(-1 * var(--header-height) - 1px); }
.js.kopf-ueber-bild .kopf-bild > .container { padding-top: calc(var(--section-padding) + var(--header-height) + 1px); }
/* Auf allen Geräten bildschirmhoch wie das Feiern-Band der Startseite. Am
Handy hochkant wird das Querformat dabei stark zugeschnitten (390 x 844:
1263px breit, gut 1.5 Bildpunkte je Punkt bei dreifacher Dichte); hinter der
Abdunklung reicht das. Dieselbe Höhe steht in feiern-veranstaltungen.astro
(fuellt), daraus entsteht sizes. */
@supports (min-height: 100svh) {
.js.kopf-ueber-bild .section--bild.kopf-bild { min-height: 100svh; }
}
/* Zwei Pfeile im Seitenkopf statt eines Buttons: der kurze führt einen
Abschnitt weiter (Anlässe), der lange weiter hinunter (Termine); die Länge
zeigt, wie weit es geht. Beschriftung klein und gesperrt wie die
Funktion in den Team-Karten, je Wort eine Zeile, damit beide Pfeile auf
derselben Höhe beginnen. Linie und Spitze nur aus CSS, in der Textfarbe
der Bildfläche (Weiß). */
.kopf-pfeile {
display: flex;
justify-content: center;
align-items: flex-start;
gap: var(--space-xl);
margin-top: var(--space-xl);
}
.kopf-pfeil {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-2xs);
color: var(--color-text);
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: var(--tracking-wider);
line-height: 1.4;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
}
/* Zwei Zeilen hoch, unten bündig: „Anlässe“ steht so auf der Höhe von
„Veranstaltungen“. */
.kopf-pfeil__text {
display: flex;
align-items: flex-end;
justify-content: center;
width: min-content;
min-height: 2.8em;
}
.kopf-pfeil__linie {
position: relative;
width: 1px;
height: 2.5rem;
background-color: currentColor;
}
.kopf-pfeil--lang .kopf-pfeil__linie { height: 5rem; }
/* Spitze: ein um 45 Grad gedrehtes Quadrat mit zwei Kanten, die Ecke unten
auf dem Ende der Linie. */
.kopf-pfeil__linie::after {
content: '';
position: absolute;
bottom: 1px;
left: 50%;
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateX(-50%) rotate(45deg);
}
/* Schmale Handys: Mit 3.5rem Lücke und voller Laufweite brauchten beide
Pfeile 363px und schoben die Seite bei 320 bis 360px seitlich über (gemessen
44px bei 320px). Bis 24rem kleinere Lücke und engere Laufweite. */
@media (max-width: 24rem) {
.kopf-pfeile { gap: var(--space-md); }
.kopf-pfeil { letter-spacing: 0.14em; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.kopf-pfeil__linie { transition: transform var(--transition); }
.kopf-pfeil:hover .kopf-pfeil__linie { transform: translateY(0.25rem); }
}
/* Anlässe (Feiern & Veranstaltungen): drei Bildkarten auf der Grundfläche,
die mittlere tiefer gesetzt, damit die Reihe nicht starr wirkt. */
.anlass-karten { display: grid; gap: var(--space-xl); }
/* Handy: quer, sonst werden drei Hochformate untereinander sehr lang. */
.anlass-karte .bildplatz { --bildformat: 3 / 2; margin-bottom: var(--space-md); }
.anlass-karte h3 { margin-bottom: var(--space-xs); font-size: var(--text-h2); }
.anlass-karte__link { margin-top: var(--space-sm); }
@media (min-width: 48rem) {
.anlass-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.anlass-karte .bildplatz { --bildformat: 4 / 5; }
.anlass-karte:nth-child(2) { margin-top: var(--space-2xl); }
}
/* Räumlichkeiten: das grüne Band trägt Kopf und randloses Bildband. */
.raeume-band { margin-top: var(--space-xl); }
/* Anfrage am Seitenende: schlicht, eine feine Linie trennt von den Terminen,
der Button ist größer als die übrigen. */
.anfrage-schlicht { border-top: 1px solid var(--color-line); }
.button--gross {
padding: 1.1em 3em;
font-size: var(--text-base);
}
/* Ein Bild ragt von unten in den vorigen Abschnitt (Gegenstück zu .ragt-unten
auf Über uns). Bis 2026-10-22 das Hochzeitstag-Plakat auf Feiern &
Veranstaltungen, zurzeit ungenutzt und als Baustein behalten. Der vorige
Abschnitt bekommt dafür unten mehr Innenabstand (.vor-ueberhang). */
@media (min-width: 64rem) {
.ragt-oben {
position: relative;
z-index: 1;
align-self: start;
/* ragt um eine halbe Abschnittshöhe plus 5rem ins Grün (1440px: 144px) */
margin-top: calc(-1 * (var(--section-padding) * 1.5 + var(--space-2xl)));
}
/* 64px Luft zwischen Bildband und Plakat */
.vor-ueberhang { padding-bottom: calc(var(--section-padding) + var(--space-2xl)); }
}
/* 7.9g Jobs: ohne Papier (wirkte wie eine Zeitung). Je Stelle ein Kopf mit
Titel und Umfang, darunter zwei Spalten "Das bringst du mit" und "Wir bieten",
darunter deutlich der Bewerbungsweg als weiße Karte mit roter Linie links
(Aussehen des Hinweis-Kastens). Weitere Stellen stehen untereinander, getrennt
durch eine Linie. Gibt es keine .stelle, erscheint .stellen__leer; ohne :has()
bleibt der Hinweis verborgen. */
.stellen {
display: grid;
gap: var(--space-2xl);
max-width: var(--container-max);
}
.stelle + .stelle { padding-top: var(--space-2xl); border-top: 1px solid var(--color-line); }
.stelle__kopf { max-width: 40rem; margin-bottom: var(--space-xl); }
.stelle__titel { font-size: var(--text-h1); }
.stelle__umfang {
margin-top: var(--space-xs);
color: var(--color-heading);
font-size: var(--text-lead);
}
.stelle__spalten { display: grid; gap: var(--space-xl); }
.stelle__spalten h3 {
margin-bottom: var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-line);
}
.stelle__text > p + p { margin-top: var(--space-sm); }
.stelle__liste { display: grid; gap: var(--space-2xs); }
/* Feiner roter Strich vor jedem Punkt, wie die Linien an den Überzeilen. */
.stelle__liste li {
display: flex;
gap: var(--space-sm);
align-items: baseline;
}
.stelle__liste li::before {
content: '';
flex: 0 0 1.25rem;
height: 1px;
background-color: var(--color-accent);
transform: translateY(-0.3em);
}
.stelle__bewerbung {
margin-top: var(--space-xl);
padding: var(--space-lg) var(--space-xl);
border-left: 2px solid var(--color-accent);
background-color: var(--color-paper);
}
.stelle__bewerbung h3 { margin-bottom: var(--space-xs); font-size: var(--text-h2); }
.stelle__bewerbung p { font-size: var(--text-lead); }
.stelle__bewerbung p + p { margin-top: var(--space-xs); font-size: var(--text-base); }
.stelle__bewerbung a {
color: var(--color-red);
text-underline-offset: 0.2em;
overflow-wrap: anywhere;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.stelle__bewerbung a:hover { color: var(--color-red-dark); }
}
@media (min-width: 64rem) {
.stelle__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
}
.stellen__leer {
display: none;
font-size: var(--text-lead);
}
.stellen:not(:has(.stelle)) .stellen__leer { display: block; }
.stellen__stand {
margin-top: var(--space-lg);
font-size: var(--text-sm);
}
/* 8 — Kopfzeile und Fußzeile ------------------------------------------------ */
/* Nur für Screenreader, sichtbar bleibt nichts (z. B. "A. " vor Abholung). */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Sprunglink für Tastatur: ohne Fokus auf einen Punkt zusammengeschnitten,
nicht nur über den oberen Rand geschoben. Knapp über dem Rand wurde er
sichtbar, sobald die Seite oben nachfedert (Neuladen, Trackpad). */
.skip-link {
position: absolute;
left: var(--space-sm);
top: var(--space-sm);
z-index: 100;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
background-color: var(--color-red);
color: #FFFFFF;
font-size: var(--text-sm);
text-decoration: none;
}
.skip-link:focus-visible {
width: auto;
height: auto;
padding: 0.75em 1.25em;
overflow: visible;
clip-path: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
/* Grundfläche zu 92 % deckend. Erste Zeile ist der Rückfall ohne color-mix(). */
background-color: rgba(250, 245, 239, 0.92);
background-color: color-mix(in srgb, var(--color-ground) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid transparent;
transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled {
border-bottom-color: var(--color-line);
box-shadow: 0 10px 30px -25px rgba(60, 47, 41, 0.6);
}
/* Kopfzeile über Video oder Bild (kopf-ueber-bild aus Basis.astro: Startseite
und Feiern & Veranstaltungen, nur mit JavaScript): Solange is-scrolled fehlt,
liegt die Kopfzeile durchsichtig darauf, Logo, Punkte und Menü-Knopf weiß.
main.js setzt is-scrolled auf der Startseite beim ersten Scrollen, auf der
Feiern-Seite erst, wenn das Bild oben unter der Kopfzeile vorbei ist; dann
fällt die helle Fläche von oben herein und die Farben wechseln zurück, oben
ist sie wieder weg. Bei offenem Menü ist die Fläche immer da. Die Fläche ist
ein eigenes ::before, damit sie gleiten kann; ohne JavaScript bleibt die
Kopfzeile wie überall. */
.js.kopf-ueber-bild .site-header {
background-color: transparent;
backdrop-filter: none;
}
.js.kopf-ueber-bild .site-header::before {
content: '';
position: absolute;
inset: 0 0 -1px;
z-index: -1;
background-color: rgba(250, 245, 239, 0.92);
background-color: color-mix(in srgb, var(--color-ground) 92%, transparent);
backdrop-filter: blur(8px);
transform: translateY(-101%);
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js.kopf-ueber-bild .site-header.is-scrolled::before,
.js.kopf-ueber-bild .site-header.is-nav-open::before { transform: none; }
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) {
border-bottom-color: transparent;
box-shadow: none;
/* Fokusrahmen weiß wie im Hero, rot wäre auf Video und Bild zu schwach. */
--color-focus: #FFFFFF;
}
/* Kontrastmodus: Die Kopfzeile liegt immer auf ihrer Systemfläche, das Logo
bleibt ungefiltert (weiß wäre im hellen Modus unlesbar). */
@media (forced-colors: active) {
.js.kopf-ueber-bild .site-header::before { transform: none; background-color: Canvas; }
}
/* Weiß über Video und Bild; (0,4,1) gewinnt gegen .site-nav a:not(.button):hover. */
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .site-nav a:not(.button) { color: #FFFFFF; }
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .nav-toggle__bars,
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .nav-toggle__bars::before,
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .nav-toggle__bars::after { background-color: #FFFFFF; }
/* „Tisch reservieren“ über dem Video als Outline wie „Speisekarte ansehen“
(weißer Rand, weiße Schrift); mit der hellen Fläche wird er im selben Takt
wieder rot. (0,6,0) gewinnt gegen .button--primary und dessen :hover. */
.js.kopf-ueber-bild .site-header .site-nav__cta .button {
transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .site-nav__cta .button {
background-color: transparent;
border-color: #FFFFFF;
color: #FFFFFF;
}
@media (hover: hover) {
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .site-nav__cta .button:hover { background-color: rgba(255, 255, 255, 0.12); }
}
/* Der Schriftzug ist grau und rot; über Video und Bild weiß. */
.js.kopf-ueber-bild .site-header__logo img { transition: filter var(--transition); }
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .site-header__logo img { filter: brightness(0) invert(1); }
/* Im Kontrastmodus ungefiltert (nach der Regel darüber, gleiche Spezifität). */
@media (forced-colors: active) {
.js.kopf-ueber-bild .site-header:not(.is-scrolled):not(.is-nav-open) .site-header__logo img { filter: none; }
}
.js.kopf-ueber-bild .site-header .nav-toggle__bars,
.js.kopf-ueber-bild .site-header .nav-toggle__bars::before,
.js.kopf-ueber-bild .site-header .nav-toggle__bars::after { transition: background-color var(--transition); }
@media (prefers-reduced-motion: reduce) {
.js.kopf-ueber-bild .site-header::before { transition: none; }
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
min-height: var(--header-height);
/* Breiter als der Inhalt: fast die ganze Fensterbreite, Rand 24 bis 80px (4vw).
So haben Logo und acht Navigationspunkte Luft und die Navigation klappt
erst später zu. */
max-width: none;
margin-inline: auto;
padding-inline: clamp(var(--space-md), 4vw, var(--space-2xl));
}
/* Das Logo wird nie gestaucht; wird es eng, klappt die Navigation zu. */
.site-header__logo { flex-shrink: 0; }
/* Schriftzug ohne Unterzeile (assets/rosenau-schriftzug.png, 1085 x 158,
Seitenverhältnis 6.87 : 1): 192 bis 256px breit, also 28 bis 37px hoch. */
.site-header__logo img { width: clamp(12rem, 16vw, 16rem); }
/* Schmale Handys: Logo, Abstand und Menü-Knopf passten bei 320px nicht
nebeneinander (6px Überlauf). 10.5rem Logo und 1.5rem Abstand reichen. */
@media (max-width: 24rem) {
.site-header__inner { gap: var(--space-md); }
.site-header__logo img { width: 10.5rem; }
}
.site-nav__list {
display: flex;
align-items: center;
/* Mit der breiteren Kopfzeile wieder mitwachsend: 1rem bis 2.25rem. */
gap: clamp(var(--space-sm), 1.5vw, var(--space-lg));
}
.site-nav a {
/* Größer als früher (15px): Fließtextgröße, 17 bis 19px, auf breiten
Bildschirmen weiter wachsend bis zur Größe der Einleitungstexte (21px bei
1440px, 23px ab 1590px), damit die Kopfzeile ihre Breite nutzt. Gilt auch
für "Tisch reservieren". */
font-size: max(var(--text-base), min(1.45vw, var(--text-lead)));
text-decoration: none;
white-space: nowrap;
transition: color var(--transition);
}
/* "Tisch reservieren" seit 2026-10-20 in 90 % der Schriftgröße der
Navigationspunkte (80 % war zu klein, 100 % zu kräftig) und
in Jost 400 statt 500, also etwas leichter als die übrigen Buttons; das
Gewicht gilt auch im aufgeklappten Menü. Knappes Innenmaß, damit der Button
nur wenig höher ist als die Textpunkte. (0,2,0) schlägt .button und
.site-nav a; Größe und Innenmaß im aufgeklappten Menü regelt Abschnitt 10. */
.site-nav__cta .button {
padding: 0.45em 1.25em;
font-size: calc(max(var(--text-base), min(1.45vw, var(--text-lead))) * 0.9);
font-weight: 400;
}
.site-nav a:not(.button) {
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.site-nav a:not(.button):hover,
.site-nav a[aria-current='page'] {
color: var(--color-heading);
border-bottom-color: var(--color-red);
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
gap: var(--space-xs);
/* Nur das Symbol (seit 2026-10-19 ohne das Wort "Menü"; für Screenreader
aria-label "Menü öffnen" bzw. "Menü schließen"). Tippfläche 48 x 48px,
mindestens 44px wie empfohlen. */
min-width: 3rem;
min-height: 3rem;
margin-right: calc(-1 * var(--space-xs));
padding: 0;
font-size: var(--text-base);
letter-spacing: 0.02em;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
display: block;
width: 1.5rem;
height: 1px;
background-color: var(--color-heading);
}
.nav-toggle__bars {
position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
content: '';
position: absolute;
left: 0;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.site-footer {
padding-block: var(--space-2xl) var(--space-lg);
background-color: var(--color-surface);
/* Gleiche Fläche wie der Kontaktabschnitt darüber: eine feine Linie trennt. */
border-top: 1px solid var(--color-line);
}
.site-footer__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--space-xl);
align-items: start;
}
/* Seit 2026-10-20 das Original-Logo mit der Unterzeile „Ihr Restaurant auf
der Tübinger Höhe“ (assets/hofgut_rosenau_logo.png, 1100 x 309), statt
Schriftzug und eigener Zeile darunter. 18rem, damit die
kleine Unterzeile lesbar bleibt; die Datei hat 1100px, also über 3.8
Bildpunkte je CSS-Pixel. */
.site-footer__logo { width: min(100%, 18rem); height: auto; }
.site-footer__zeiten,
.site-footer__social { margin-top: var(--space-sm); font-size: var(--text-sm); }
/* Social-Symbole (Fuß aller Seiten und Kontakt), seit 2026-10-20: selbst
gehostete SVG ohne Skript oder Einbettung der Anbieter, neuer Tab.
30px, weil Instagram sein Symbol nicht kleiner als 29 x 29px erlaubt;
Tippfläche je 44px, das erste Symbol steht bündig zum Text darüber.
Farben stehen in den Dateien: Instagram Markenrot, Facebook-Blau (Regel
von Facebook). Kein Effekt beim Darüberfahren, die Logos bleiben unverändert. */
.social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2xs);
}
.social__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.75rem;
min-height: 2.75rem;
-webkit-tap-highlight-color: transparent;
}
.social__link:first-child { margin-inline-start: calc((1.875rem - 2.75rem) / 2); }
.social__link img { width: 1.875rem; height: 1.875rem; }
.site-footer__nav ul {
display: grid;
gap: var(--space-2xs);
}
.site-footer a { text-underline-offset: 0.2em; }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { color: var(--color-red); text-decoration: underline; }
.site-footer__meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-2xl);
padding-top: var(--space-md);
border-top: 1px solid var(--color-line);
font-size: var(--text-xs);
}
.site-footer__meta p { max-width: none; }
/* Hinweis auf die Erstellerin: Text in der Schrift der Bedienelemente und in
Fließtextfarbe. Der Schriftzug steht deutlich größer daneben: seine
Großbuchstaben (80 % der Bildhöhe, gemessen an der Datei) sind 1.8-mal so
hoch wie die des Textes (Jost: 0.7em) und sitzen mittig auf ihnen.
Bildhöhe 1.8 × 0.7em / 0.8 = 1.58em; vertical-align setzt die Bildunterkante
so, dass die Mitte der Buchstaben auf der Mitte der Großbuchstaben des
Textes liegt (0.35em − 0.63em − 0.2 × 1.58em = −0.6em). Zwischen Text und
Schriftzug 0.8em (Leerzeichen und Außenabstand). Gemessen bei 13px:
Großbuchstaben 9px und 16.75px (1.86-mal), Mitten 0.1px auseinander.
Der Innenabstand oben und unten macht die Tippfläche mindestens 44px hoch,
ohne die Zeile höher zu machen. */
.site-footer__credit {
font-family: var(--font-ui);
font-weight: 500;
}
.site-footer__qleva {
margin-inline-start: 0.45em;
padding-block: 0.85rem;
-webkit-tap-highlight-color: transparent;
}
.site-footer__qleva img {
/* In der Textzeile statt als Block (allgemeine Regel für Bilder). */
display: inline;
width: auto;
height: 1.58em;
vertical-align: -0.6em;
}
/* Kontrastmodus mit dunklem Hintergrund: Bilder werden dort nicht umgefärbt,
der dunkelgraue Schriftzug verschwände auf Schwarz (rund 1.7:1). Nur dort
wird er ganz hell gezeigt; sonst immer in seinen eigenen Farben. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
.site-footer__qleva img { filter: brightness(0) invert(1); }
}
/* Bildansicht (main.js): Bilder in [data-bildansicht] werden mit JavaScript
anklickbar und öffnen groß in einem