/* Maison Avec Plaisir — shared stylesheet
Palette: soft blush pink + white. Layout/spacing in the restrained,
image-led spirit of apple.com; type pairs an editorial serif display
(Libre Bodoni) with a clean grotesk body (Public Sans) per the
briefing's "Editorial-Charakter, zurückhaltende Typografie". */
/* Self-hosted fonts (no Google Fonts CDN request — avoids sending visitor
IPs to Google, per German case law on third-party font loading). */
@font-face {
font-family: "Libre Bodoni";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("../assets/fonts/LibreBodoni-Variable.woff2") format("woff2");
}
@font-face {
font-family: "Libre Bodoni";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../assets/fonts/LibreBodoni-Italic.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../assets/fonts/PublicSans-Variable.woff2") format("woff2");
}
:root {
--color-bg: #ffffff;
--color-bg-soft: #fdf3f4;
--color-pink-100: #fbe6e8;
--color-pink-200: #f3d3d7;
--color-pink-300: #e7b3ba;
--color-pink-600: #c97e88;
--color-pink-700: #a85f6a;
--color-text: #1d1d1f;
--color-text-soft: #6e6e73;
--color-text-faint: #86868b;
--color-border: #eee0e1;
--font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Libre Bodoni", Georgia, "Times New Roman", serif;
/* Inhaltsbreite 1072px, der Seitenrand kommt außen hinzu. */
--container-w: calc(1072px + 2 * var(--rand));
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 12px;
/* Abstandsraster. Alle vertikalen Abstände zwischen Blöcken setzen sich
aus diesen sechs Stufen zusammen. Vorher standen vierzehn verschiedene
Werte verstreut als Inline-Style in den HTML-Dateien. */
--raum-xs: 12px;
--raum-s: 20px;
--raum-m: 28px;
/* Die drei großen Stufen wachsen mit der Fensterbreite: am Handy (390px)
32 / 40 / 48, ab etwa 1200px 40 / 56 / 72. Vorher standen sie fest und
wurden pro Umbruchpunkt einzeln mit Pixelwerten überschrieben. */
--raum-l: clamp(32px, 1vw + 28px, 40px);
--raum-xl: clamp(40px, 2vw + 32px, 56px);
--raum-2xl: clamp(48px, 3vw + 36px, 72px);
/* Rhythmus der Seite. Jeder Abstand zwischen und in Abschnitten kommt aus
diesen fünf Rollen, nie aus einem freien Pixelwert.
--rand Seitenrand links und rechts 20 -> 32px
--abschnitt Abstand oben/unten je Abschnitt 64 -> 96px
--abschnitt-eng ruhigere Zwischenabschnitte 48 -> 64px
--karte Innenabstand von Karten 20 -> 32px
--spalte Abstand zwischen Rasterspalten 20 -> 32px */
--rand: clamp(20px, 2.5vw + 10px, 32px);
--abschnitt: clamp(64px, 6vw + 40px, 96px);
--abschnitt-eng: clamp(48px, 3vw + 36px, 64px);
--karte: clamp(20px, 1.5vw + 14px, 32px);
--spalte: clamp(20px, 1.5vw + 14px, 32px);
/* Schriftgrößen unterhalb des Fließtexts. Es gab vierzehn Stufen zwischen
0.68 und 1.08rem – Unterschiede von unter einem Pixel, die niemand sieht,
aber jede neue Regel vor die Frage stellen, welchen Wert sie nimmt. */
--text-xs: 0.8rem;
--text-s: 0.86rem;
--text-m: 0.92rem; /* Bedienelemente: Menü, Schaltflächen, Marken-Pillen */
--text-base: 1rem; /* jeder Lesetext */
/* Überschriftenränge.
1 - die Seite selbst, einmal pro Seite.
2 - Abschnittsüberschriften über die volle Spaltenbreite.
3 - Überschriften in schmalen Behältern: Karten, Zeitstrahl, Rechtstexte.
Rang 3 ist kein Zierrat, sondern nötig: Eine Kartenspalte ist 247px
breit, dort bricht eine Überschrift in Rang-2-Größe mitten im Wort um,
weil kein Trennpunkt mehr hineinpasst. */
--titel-1: clamp(2.5rem, 5.5vw, 4.4rem);
--titel-2: clamp(1.9rem, 3.6vw, 2.8rem);
--titel-3: clamp(1.25rem, 2vw, 1.5rem);
/* Zeilenabstände: eng für Überschriften, normal für Oberflächentext,
weit für zusammenhängende Absätze. */
--zeile-eng: 1.12;
--zeile-display: 1.25;
--zeile-normal: 1.5;
--zeile-weit: 1.7;
/* Sperrung für Versalien-Beschriftungen (Eyebrow, Kategorien). */
--sperr-label: 0.08em;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
line-height: var(--zeile-normal);
}
img { max-width: 100%; display: block; }
/* hidden muss auch gegen display-Regeln wie .form { display: grid } gewinnen. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
.container {
max-width: var(--container-w);
margin: 0 auto;
padding-inline: var(--rand);
}
h1, h2, h3, h4 {
margin: 0 0 0.4em;
font-family: var(--font-serif);
font-weight: 500;
letter-spacing: -0.01em;
line-height: var(--zeile-eng);
/* Deutsche Komposita werden schnell länger als ein Handy-Display
("Datenschutzerklärung" misst 390px bei 375px Viewport). Ohne das
schiebt ein einziges Wort die ganze Seite seitlich auf.
Die Trennung greift erst ab 14 Zeichen, damit kurze Wörter in den
Schlagzeilen ungetrennt bleiben ("Lieferant" statt "Liefe-rant").
Ältere Browser ignorieren die Grenze und trennen wie bisher. */
overflow-wrap: break-word;
hyphens: auto;
-webkit-hyphenate-limit-before: 7;
-webkit-hyphenate-limit-after: 5;
hyphenate-limit-chars: 14 7 5;
}
h1 { font-size: var(--titel-1); font-weight: 500; }
h2 { font-size: var(--titel-2); }
h3 { font-size: var(--titel-3); font-family: var(--font-sans); font-weight: 640; letter-spacing: -0.01em; }
/* Zwei Stufen unterhalb von h2 und h3, für Spalten, Karten und Formulare,
wo eine Überschrift in voller Größe den Block sprengt. Vorher standen
dort feste rem-Werte als Inline-Style und wuchsen nicht mit. */
.h-klein { font-size: var(--titel-3); }
.h-kleiner { font-size: var(--titel-3); }
/* Titel der Rechtstexte: kleiner als eine normale h1, aber mitwachsend. */
.legal-titel { font-size: var(--titel-2); }
/* Abschnittsüberschriften auf Impressum und Datenschutz. Semantisch h2
(sonst springt die Gliederung von h1 direkt auf h3 und Screenreader
melden eine Lücke), optisch aber so zurückhaltend wie zuvor. */
.legal-h {
font-family: var(--font-sans);
font-size: var(--titel-3);
font-weight: 640;
margin: 2em 0 0.5em;
}
p { margin: 0 0 1em; color: var(--color-text); }
.lede {
font-size: var(--text-base);
color: var(--color-text-soft);
font-weight: 400;
max-width: 46ch;
}
.eyebrow {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--sperr-label);
text-transform: uppercase;
color: var(--color-pink-700);
margin-bottom: 0.9em;
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--color-border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 104px;
}
.logo-link {
display: flex;
align-items: center;
gap: 14px;
font-weight: 650;
letter-spacing: -0.01em;
white-space: nowrap;
/* Der Link war nur so hoch wie sein Inhalt (68px) und stand mittig in der
104px hohen Kopfzeile. Ober- und unterhalb blieben je 18px, die optisch
zum Logo gehören, aber auf Klicks nicht reagierten – rund ein Drittel
der Kopfzeilenhöhe. Genau das machte den Klick unzuverlässig. stretch
zieht den Link auf die volle Höhe; align-items: center oben hält Bild
und Wortmarke weiterhin mittig, das Aussehen bleibt unverändert. */
align-self: stretch;
}
/* Wortmarke im selben Rosé-Ton wie die Eyebrow „MAISON AVEC PLAISIR“
auf der Startseite – markenweit einheitlich. Etwas kleiner als das
Logo, damit die Navigation daneben genug Platz behält. */
.logo-word {
color: var(--color-pink-700);
font-size: var(--text-base);
}
.logo-mark {
/* Die freigestellte Datei ist eng um die Zeichnung beschnitten, das alte
PNG hatte ringsum weissen Rand. 64 statt vorher 50 px: Hans soll im Kopf
praesenter stehen. Passt in die 104 px hohe Kopfzeile und laesst dem
Menue auch knapp oberhalb von 1121 px Fensterbreite genug Platz. */
height: 64px;
width: auto;
}
/* Oberhalb des Umschaltpunkts steht das Menü neben dem Logo und braucht dort
jeden Pixel: Menü 995px + Logo mit Schriftzug 225px = 1220px bei 1072px
verfügbarer Breite. Ohne den Schriftzug sind es 1063px und alles bleibt
einzeilig. Die Bildmarke allein trägt die Marke; im Burger-Menü darunter
ist Platz genug, dort bleibt der Schriftzug stehen. */
@media (min-width: 1121px) {
.logo-word { display: none; }
}
/* Am Handy braucht die Kontakt-Pille den Platz des Schriftzugs. Die
Bildmarke bleibt, der Name steht auf jeder Seite groß darunter. */
@media (max-width: 560px) {
.logo-word { display: none; }
}
/* Das Logo führt zur Startseite, gab beim Überfahren aber keine Rückmeldung.
Umgekehrt zu den Menüpunkten (0.82 -> 1) hier ein leichtes Zurücknehmen,
weil es bereits voll deckend ist. */
.logo-link { transition: opacity 0.2s ease; }
.logo-link:hover { opacity: 0.72; }
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: background 0.2s ease;
}
/* Der Burger-Knopf hatte keine Rückmeldung. Auf Geräten mit Zeiger
(kleine Notebooks, Tablets mit Maus) fehlte damit der Hinweis, dass er
anklickbar ist. Die Balken nehmen den Rosé-Ton der Marke an. */
.nav-toggle:hover span { background: var(--color-pink-700); }
.site-nav > ul {
display: flex;
align-items: center;
/* 12 statt 16: Der Unterschied kauft die letzten Pixel, die das Menü
braucht, um einzeilig zu bleiben. */
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav a {
font-size: var(--text-m);
/* 700 wurde erst durch die kurzen Beschriftungen moeglich: Das Menue
braucht damit 600 statt 1016 px, die Kopfzeile hat 1072 px. */
font-weight: 700;
color: var(--color-text);
opacity: 0.82;
transition: opacity 0.2s ease;
}
.site-nav a:hover { opacity: 1; }
.site-nav a.nav-cta {
opacity: 1;
background: var(--color-text);
color: #fff;
padding: 8px 18px;
border-radius: 999px;
}
.site-nav a.nav-cta:hover { background: var(--color-pink-700); }
/* Aktueller Bereich im Hauptmenü.
Die Klasse setzt js/main.js beim Laden anhand des Dateinamens – der
Kopfbereich steht in jeder HTML-Datei einzeln, deshalb zentral im Skript.
Gestaltung bewusst zurückhaltend: volle Deckkraft statt der sonstigen
0.82 plus ein schmaler Strich im Rosé der Marke. */
.site-nav .nav-active {
opacity: 1;
position: relative;
}
.site-nav .nav-active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -7px;
height: 2px;
border-radius: 2px;
background: var(--color-pink-700);
}
/* Die Kontakt-Schaltfläche ist bereits dunkel abgesetzt – ein zusätzlicher
Strich darunter wirkte dort wie ein Fehler. */
.site-nav .nav-active.nav-cta::after { display: none; }
/* Innerhalb des Ausklappmenüs liegen die Einträge dicht untereinander; ein
Unterstrich ragte in den nächsten hinein. Dort dieselbe Fläche wie beim
Überfahren – der aktive Eintrag sieht damit aus wie „angesteuert“. */
.dropdown .nav-active::after { display: none; }
.dropdown .nav-active { background: var(--color-pink-100); }
/* Kein Umbruch innerhalb eines Menüpunkts. Bricht ein Punkt zweizeilig um,
ist sein Kasten so breit wie die längere Zeile – neben der kürzeren bleibt
dann Leerraum stehen und die Lücken zwischen den Punkten wirken ungleich
(gemessen 16 bis 104px bei durchgehend 12px Rasterabstand). Die Einträge
im aufgeklappten Menü dürfen weiter umbrechen, dort gilt weiter normal. */
.site-nav > ul > li > a,
.site-nav > ul > li > .dropdown-toggle { white-space: nowrap; }
/* Dropdown (product pillars grouped under "Leistungen") */
.has-dropdown { position: relative; }
.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
font: inherit;
font-size: var(--text-m);
font-weight: 700;
color: inherit;
opacity: 0.82;
cursor: pointer;
padding: 0;
}
.dropdown-toggle .caret { transition: transform 0.2s ease; }
.has-dropdown:hover .dropdown-toggle,
.has-dropdown.open .dropdown-toggle { opacity: 1; }
.has-dropdown.open .dropdown-toggle .caret { transform: rotate(180deg); }
.dropdown {
list-style: none;
margin: 0;
padding: 10px;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 16px;
min-width: 280px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 18px 40px rgba(29, 29, 31, 0.1);
display: none;
z-index: 50;
}
/* Zwischen Auslöser und Ausklappmenü liegen 16px Abstand (margin-top oben).
Beim Herunterfahren steht die Maus dort kurz über keinem der beiden
Elemente – mouseleave feuert auf .has-dropdown und das Menü schließt,
bevor ein Eintrag erreichbar ist. Dieses unsichtbare Feld überbrückt die
Lücke. Es gehört zum Ausklappmenü und zählt damit als "noch im Menü",
sowohl für :hover als auch für mouseleave. Ohne Farbe und ohne Einfluss
auf das Layout – die Optik bleibt unverändert. Es existiert nur, solange
das Menü sichtbar ist, weil .dropdown sonst display:none hat. */
.dropdown::before {
content: "";
position: absolute;
left: 0;
right: 0;
/* 17 statt 16: Der 1px-Rahmen des Menüs verschiebt den Bezugspunkt um
eine Zeile nach unten, sonst bliebe genau am Übergang eine Naht offen. */
top: -17px;
height: 17px;
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown { display: block; }
.dropdown li { border-bottom: none; }
.dropdown a {
display: block;
padding: 11px 14px;
border-radius: 10px;
font-size: var(--text-m);
opacity: 0.85;
white-space: normal;
}
.dropdown a:hover { background: var(--color-pink-100); opacity: 1; }
/* Verlinkungen im Fließtext (Impressum, Datenschutz, Kontakt).
Sie sind bereits unterstrichen, reagierten aber beim Überfahren gar
nicht. Bewusst auf p/li/label eingegrenzt, damit die Partner-Links auf
„Gedeckter Tisch" – die einen eigenen Hover haben – unberührt bleiben. */
main p a[href]:not([class]),
main li a[href]:not([class]),
main label a[href]:not([class]) {
text-decoration: underline;
transition: color 0.2s ease;
}
main p a[href]:not([class]):hover,
main li a[href]:not([class]):hover,
main label a[href]:not([class]):hover {
color: var(--color-pink-700);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-base);
font-weight: 560;
padding: 13px 26px;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--color-text); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-pink { background: var(--color-pink-600); color: #fff; }
.btn-pink:hover { background: var(--color-pink-700); }
.btn-outline {
background: transparent;
border-color: var(--color-text);
color: var(--color-text);
}
.btn-outline:hover { background: var(--color-text); color: #fff; }
/* Umriss-Knopf auf dunklem Grund (Zitatband). Gleiche Form, hellere Kante. */
.btn-outline-hell { border-color: #fff; color: #fff; }
.btn-ghost {
background: transparent;
color: var(--color-pink-700);
padding: 13px 6px;
}
.btn-ghost:hover { color: var(--color-text); }
/* Variante ohne Innenabstand links und rechts: schließt bündig an den
Textblock darüber an. */
.btn-ghost-flush {
display: inline-block;
font-size: var(--text-m);
padding-left: 0;
padding-right: 0;
}
/* Gezeichnete Pfeile und Aufklapp-Zeichen statt Schriftzeichen. */
.pfeil {
width: 1em;
height: 1em;
vertical-align: -0.14em;
margin-left: 2px;
transition: transform 0.2s ease;
}
a:hover .pfeil { transform: translateX(3px); }
.dropdown-toggle svg.caret { width: 10px; height: 6px; vertical-align: 0.15em; }
/* ---------- Layout blocks ---------- */
.section { padding-block: var(--abschnitt); }
/* Zwei Abschnitte, die inhaltlich zusammengehören: Der Übergang bekommt
nicht den vollen Abschnittsabstand, sondern nur eine Rasterstufe. */
/* Ein Paar aus -unten und -oben ergibt 56px zwischen den beiden Abschnitten
und damit genau den Abstand, den .abschnitt-kopf unter sich lässt.
Doppelter Klassenname mit Absicht: Weiter unten setzt eine Medienabfrage
.section auf 64px zurück. Die steht später in der Datei und hätte bei
gleicher Spezifität gewonnen – unterhalb von 860px wären diese beiden
Klassen sonst wirkungslos. */
.section.section-anschluss-oben { padding-top: var(--raum-m); }
.section.section-anschluss-unten { padding-bottom: var(--raum-m); }
.section-tight { padding-block: var(--abschnitt-eng); }
.section-soft { background: var(--color-bg-soft); }
.section-pink { background: var(--color-pink-100); }
.section-dark { background: var(--color-text); color: #fff; }
.section-dark p, .section-dark .lede { color: rgba(255,255,255,0.72); }
.section-dark .eyebrow { color: var(--color-pink-300); }
/* padding-block statt padding: Die Kurzform setzte auch links und rechts
auf 0 und nahm .container damit den Seitenrand. Am Handy lief der Text
bis an den Bildschirmrand. */
.hero {
padding-block: calc(var(--abschnitt) + var(--raum-m)) var(--raum-2xl);
text-align: center;
}
.hero .lede { margin: 0 auto 2.2em; }
/* Markenname im Hero. Eigener span statt der ganzen H1, damit js/ankunft.js
Name und Unterzeile getrennt einziehen lassen kann. */
.hero-marke {
display: block;
/* Eigene Größe statt --titel-1: Der Markenname trägt die Startseite und
soll größer stehen als eine gewöhnliche h1, ohne die h1 der übrigen
zwölf Seiten mitzuziehen. Gemessene Grenzen für eine Zeile: 121px am
Desktop (1072px Spaltenbreite), 38px bei 390px Fensterbreite. Die
Staffelung bleibt darunter - oben 104px, unten 35.2px. */
font-size: clamp(2.2rem, 7.2vw, 6.5rem);
}
/* Hero, an den unmittelbar ein Abschnitt anschließt – der volle untere
Abstand von 90px käme dort zum Abstand des Abschnitts hinzu.
Doppelter Klassenname aus demselben Grund wie bei .section-anschluss-*. */
.hero.hero-kompakt { padding-bottom: var(--raum-xl); }
/* Zweite Zeile der Hero-Überschrift. Sie steht innerhalb der H1 und erbt
damit die Serife – sie ist Teil der Überschrift, kein eigener Absatz.
Kleiner gesetzt, weil beide Zeilen sonst gleich schwer wiegen und der
Markenname nicht mehr führt. Eigene Staffelung statt eines festen
Anteils der H1: Auf dem Handy wäre sie sonst so klein wie der Fließtext
darunter und würde als Überschriftenzeile nicht mehr wahrgenommen. */
.hero-zusatz {
display: block;
/* Rang 3, nicht Rang 2: Auf Rang 2 war die Zeile so groß wie eine
Abschnittsüberschrift und trug seit der Vergrößerung des Markennamens
allein die untere Hälfte des Heros. */
font-size: var(--titel-3);
/* 400 statt der von der h1 geerbten 500 – das Dünnste, was Libre Bodoni
hergibt (die Variable läuft von 400 bis 600). Die hohen Strichkontraste
der Bodoni wirken dadurch spürbar feiner. */
font-weight: 400;
line-height: var(--zeile-display);
/* Rueckt dicht an den Markennamen: beide Zeilen sind eine Ueberschrift.
Der Wert ist auf denselben optischen Abstand abgestimmt wie zwischen
.hero-leistungen und dem Einleitungstext – siehe dort. In px, nicht in
em: Beide Abstände sollen gleich bleiben, die zugehörigen Schriftgrößen
wachsen aber unterschiedlich schnell mit der Bildschirmbreite. */
margin-top: 6px;
}
/* Leistungszeile unter dem Überschriftenblock. Bewusst kleiner als der
Einleitungstext darunter und dafür im Rosé der Marke mit mehr Gewicht:
Sie ist eine Bezeichnung, kein Fließtext, und muss sich vom Absatz
darunter unterscheiden – über die Größe allein ginge das nicht, ohne mit
der Unterzeile darüber ins Gehege zu kommen. */
.hero-leistungen {
font-size: var(--text-base);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-pink-700);
/* Dicht ueber dem Einleitungstext, mit dem sie eine Einheit bildet.
Optisch derselbe Abstand wie zwischen den beiden Ueberschriftenzeilen;
die Kastenwerte unterscheiden sich, weil die Zeilenhoehen ungleich sind
und je die Haelfte des Durchschusses oben und unten mitzaehlt. */
margin: 0 auto 0.2em;
}
.hero-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.hero-split {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--raum-2xl);
align-items: center;
padding-block: var(--abschnitt);
}
.hero-split.reverse { direction: rtl; }
.hero-split.reverse > * { direction: ltr; }
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--raum-xl);
align-items: center;
}
.split.reverse .split-media { order: 2; }
/* Spalten ungleicher Höhe oben bündig statt mittig (Formular neben Karte). */
.split-oben { align-items: start; }
.stack { display: grid; gap: 8px; }
/* minmax(0, 1fr) statt 1fr: sonst kann eine Spalte nicht schmaler werden als
ihr längstes Wort (z. B. „Getränkeeigenmarken“) und wird breiter als die
übrigen – dadurch wären auch die Bilder unterschiedlich groß. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalte); }
.grid-eng { gap: var(--raum-s); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalte); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalte); }
/* Lange Komposita in schmalen Karten sauber umbrechen (lang="de" → Trennung) */
.card h3 { overflow-wrap: break-word; hyphens: auto; }
.card {
background: #fff;
border: 1px solid var(--color-border);
/* Eckig statt rund – auf allen 38 Kästen der Website. */
border-radius: 0;
padding: var(--karte);
}
.card-soft { background: var(--color-bg-soft); border-color: transparent; }
.card .visual { margin-bottom: var(--raum-s); }
/* Der Außenabstand des letzten Elements lag als toter Rand über dem
Innenabstand – in jedem Kasten 16px, die niemand braucht. */
.card > :last-child { margin-bottom: 0; }
/* Kästen einer knappen Aufzählung. Sie tragen nur eine Zeile und einen
Satz und brauchen nicht den Innenabstand eines Kastens mit Bild:
20 statt 32px, oben und unten gleich, damit der Text mittig sitzt. */
.card-schritt { padding: var(--raum-s); }
/* Zeilenabstand 12 statt 28px: Gestapelt sollen die Kästen als eine
Aufzählung zusammenstehen. Der Spaltenabstand bleibt bei 28px, sonst
rückten die vier Kästen nebeneinander am Desktop zu eng. */
.schritte { gap: var(--raum-xs) var(--raum-m); }
/* ---------- Übersicht als Liste ----------
Ein Baustein für jede Übersicht gleichrangiger Punkte (Prinzipien,
Formate, Leistungen, Werte): Überschrift links und senkrecht mittig,
rechts die Punkte untereinander, getrennt durch Haarlinien. Jeder Punkt
trägt links seinen Titel, rechts den Satz dazu. */
.uebersicht {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--raum-xl);
align-items: center;
}
.uebersicht-kopf > :last-child { margin-bottom: 0; }
.uebersicht-kopf .lede { margin-top: var(--raum-s); }
/* Wo der Kopf eine Zwischenüberschrift ist (h3), sieht er trotzdem aus wie
die übrigen Köpfe: Bodoni in Rang 2. */
.uebersicht-kopf h3 {
font-family: var(--font-serif);
font-size: var(--titel-2);
font-weight: 500;
}
.uebersicht-liste { list-style: none; margin: 0; padding: 0; }
.uebersicht-liste li {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: var(--raum-m);
padding: var(--raum-m) 0;
border-top: 1px solid var(--color-border);
}
.uebersicht-liste li:last-child { border-bottom: 1px solid var(--color-border); }
.uebersicht-liste h3 { margin: 0; overflow-wrap: break-word; hyphens: auto; }
/* Punkt ohne Satz (Gedeckter Tisch): Titel über die ganze Zeile statt in
die schmale linke Spalte gezwängt. */
.uebersicht-liste h3:only-child { grid-column: 1 / -1; }
.uebersicht-liste p { margin: 0; color: var(--color-text-soft); }
@media (max-width: 860px) {
.uebersicht { grid-template-columns: minmax(0, 1fr); gap: var(--raum-m); }
.uebersicht-liste li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
/* ---------- Bewegung beim Lesen ----------
1. Ankunft: Die Seite empfängt den Besucher. Gesteuert von js/ankunft.js
(GSAP, selbst gehostet unter js/vendor/). Die Seitenüberschrift steigt
zeilenweise aus einer unsichtbaren Kante auf, auf der Startseite geht
Hans ins Bild. Vor dem Start versteckt .ankunft nur die Elemente, die
gleich einziehen. Fällt das Skript aus, nimmt ein Zeitlimit im Kopf
der Seite die Klasse wieder weg: Der Inhalt ist nie dauerhaft
unsichtbar. Bei reduzierter Bewegung wird .ankunft gar nicht gesetzt.
2. Überschriften mit eigener Spalte neben dem Inhalt laufen beim Scrollen
bis zum Ende ihres Blocks mit (.laeuft-mit, gesetzt von js/main.js nur
dort, wo der Block ins Fenster passt und kürzer ist als sein Nachbar). */
.ankunft .hero h1,
.ankunft .hero .eyebrow,
.ankunft .hero .lede,
.ankunft .hero-hans-bild,
.ankunft .hero-hans-text,
.ankunft main > section:first-child h1 { visibility: hidden; }
.laeuft-mit {
position: sticky;
/* Unter dem 104px hohen Kopf, mit Luft. */
top: calc(104px + var(--raum-l));
}
/* ---------- Placeholder visuals (stand-in for future photography) ---------- */
.visual {
/* Rechteckige Bildkanten – einheitlich mit den .visual-full Bändern */
border-radius: 0;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
background: linear-gradient(150deg, var(--color-pink-100), var(--color-pink-200) 60%, var(--color-pink-300));
}
.visual svg { width: 46%; height: 46%; opacity: 0.9; }
.visual picture {
display: block;
width: 100%;
height: 100%;
}
.visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.visual.tall { aspect-ratio: 3 / 4; }
.visual.wide { aspect-ratio: 16 / 9; }
.visual.square { aspect-ratio: 1 / 1; }
/* Full-bleed hero photo band (breaks out of .container for maximum size) */
.visual-full {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
}
.visual-full img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Taller band for portrait-format source images (keeps the subject in frame) */
.visual-full.band-tall { aspect-ratio: 3 / 2; }
/* Querformat auf allen Breiten. Ein symmetrischer Innenraum verliert im
Hochformat die Seiten und damit seine Mitte – der doppelte Klassenname
sticht deshalb auch die Handy-Regel weiter unten. */
.visual-full.band-quer { aspect-ratio: 3 / 2; }
@media (max-width: 560px) {
.visual-full { aspect-ratio: 4 / 5; }
.visual-full.band-tall { aspect-ratio: 3 / 4; }
}
.visual.mono {
background: linear-gradient(150deg, #fbeef0, #f6dade 55%, #edc3c9);
}
/* Bildrahmen, in dem ein Logo statt eines Fotos steht: Es soll vollständig
sichtbar sein und Luft ringsum behalten, nicht formatfüllend beschnitten. */
.visual-logo { padding: var(--raum-l); }
.visual-logo img { width: auto; height: 100%; object-fit: contain; }
.visual.deep {
background: linear-gradient(155deg, var(--color-pink-300), var(--color-pink-600));
}
.visual.deep svg { opacity: 1; }
/* ---------- Quote / stat ---------- */
.quote-block {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.quote-block blockquote {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.5rem, 2.8vw, 2.3rem);
font-weight: 500;
letter-spacing: -0.005em;
margin: 0 0 0.6em;
}
.quote-block cite { font-style: normal; color: var(--color-text-soft); font-size: var(--text-base); }
/* +3pt emphasis for the lead-in line under a quote */
.quote-block cite.cite-lg { font-size: var(--text-base); line-height: var(--zeile-normal); display: block; max-width: 52ch; margin: 0 auto; }
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.stat-row .stat-num {
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 650;
color: var(--color-pink-700);
}
.stat-row .stat-label {
font-size: var(--text-s);
color: var(--color-text-soft);
}
/* ---------- Produktsäulen auf der Startseite ----------
Die vier Titel sind unterschiedlich lang ("Präsente" gegen
"Getränke-Eigenmarken"). Ohne feste Höhe begänne der Fließtext in jeder
Karte auf einer anderen Höhe – gemessen 270 bis 351px. Zwei Zeilen
reserviert: Titel mit Umbruch füllen sie, kürzere lassen die zweite frei,
und alle Karten fluchten. */
.saeulen h3 {
min-height: calc(2 * 1.12em); /* line-height der Überschriften */
margin-bottom: 0.5em;
}
/* Die vier Beschreibungen sind vier bis fünf Zeilen lang. Ohne das stünde
"Mehr erfahren" in jeder Karte auf einer anderen Höhe. */
.saeulen .card { display: flex; flex-direction: column; }
.saeulen .card .btn-ghost { margin-top: auto; }
/* Sanftes Anheben beim Überfahren – bewusst NUR für die vier Kacheln der
Startseite. Der Selektor ist über .saeulen eingegrenzt, weil .card auch
auf anderen Seiten verwendet wird (Angebotskarten, Partnerkarten) und
dort unverändert bleiben soll.
transform verändert den Layoutfluss nicht: Das Raster bleibt stehen,
nichts springt. Bei 28px Rasterabstand und rund 247px Kartenbreite
wächst die Kachel um etwa 7px – die Nachbarn werden nicht berührt. */
.saeulen a.card {
transition: transform 0.2s ease;
}
.saeulen a.card:hover {
transform: scale(1.02);
}
/* ---------- Partnerübersicht (gedeckter-tisch.html) ----------
Drei Produktbereiche nebeneinander, darunter die Partner als Sprungziele.
Bewusst alles gleichzeitig sichtbar: Anders als bei den 36 Weingütern sind
es hier nur vier Häuser – ein Aufklapp-Mechanismus würde die Übersicht
verstecken statt sie herzustellen. */
/* Kompakt gehalten: Der Block ist eine Wegweiser-Zeile, kein eigenes Kapitel –
er soll den Blick schnell weiterreichen, nicht selbst Raum beanspruchen. */
.partner-uebersicht { padding-block: var(--raum-xl); }
.partner-uebersicht-titel {
text-align: center;
font-size: var(--titel-3);
margin: 0 0 26px;
}
.partner-gruppen {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px 32px;
max-width: 900px;
margin: 0 auto;
}
.partner-gruppe { text-align: center; }
.partner-gruppe h3 {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--sperr-label);
text-transform: uppercase;
color: var(--color-pink-700);
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
.partner-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.partner-links a {
font-size: var(--text-m);
font-weight: 560;
color: var(--color-text-soft);
background: #fff;
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 9px 16px;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.partner-links a:hover,
.partner-links a:focus-visible {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
}
/* Der Kopfbereich klebt oben (104px) – ohne diesen Abstand würde er die
Überschrift des angesprungenen Abschnitts verdecken. */
.partner-abschnitt { scroll-margin-top: 124px; }
/* Dasselbe fuer jeden Abschnitt, der ein Sprungziel traegt. */
.section[id] { scroll-margin-top: 124px; }
@media (max-width: 860px) {
.partner-uebersicht-titel { margin-bottom: var(--raum-s); }
.partner-gruppen { grid-template-columns: minmax(0, 1fr); gap: var(--raum-s); }
}
/* ---------- Zeitstrahl (geschichte-philosophie.html) ----------
Bewusst rein typografisch: keine Bilder je Eintrag, keine Rahmen, keine
neuen Farben. Die durchgehende Linie entsteht aus dem linken Rand der
Inhaltsspalte, der Punkt sitzt als Pseudoelement darauf. Dadurch bleibt
die Linie automatisch so lang wie der Text – ohne feste Höhen. */
.zeitstrahl {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 840px;
}
.zeitstrahl-eintrag {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
gap: 0 var(--raum-l);
}
.zeitstrahl-jahr {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.01em;
line-height: var(--zeile-display);
color: var(--color-pink-700);
text-align: right;
padding-top: 1px;
}
.zeitstrahl-inhalt {
position: relative;
border-left: 1px solid var(--color-border);
padding: 0 0 var(--raum-xl) var(--raum-l);
}
/* Punkt auf der Linie, auf Höhe der ersten Textzeile */
.zeitstrahl-inhalt::before {
content: "";
position: absolute;
left: -5px;
top: 7px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-pink-600);
}
/* Der letzte Eintrag beendet die Linie, statt sie ins Leere laufen zu lassen */
.zeitstrahl-eintrag:last-child .zeitstrahl-inhalt {
border-left-color: transparent;
padding-bottom: 0;
}
/* h2, nicht h3: Jede Station ist gleichrangig; sonst springt die
Gliederung von h1 direkt auf h3. Optisch bleibt sie klein. */
.zeitstrahl-inhalt h2 {
font-family: var(--font-sans);
font-size: var(--titel-3);
font-weight: 640;
letter-spacing: -0.01em;
margin: 0 0 0.6em;
}
.zeitstrahl-inhalt p {
color: var(--color-text);
line-height: var(--zeile-weit);
margin: 0;
max-width: 62ch;
}
@media (max-width: 860px) {
/* Schmale Displays: Jahr über den Text statt daneben. Die Linie entfällt,
weil sie bei einer einzigen Spalte nur Platz kostet. */
.zeitstrahl-eintrag { grid-template-columns: minmax(0, 1fr); gap: 0; }
.zeitstrahl-jahr { text-align: left; margin-bottom: 6px; }
.zeitstrahl-inhalt { border-left: 0; padding: 0 0 var(--raum-xl) 0; }
.zeitstrahl-inhalt::before { display: none; }
}
/* ---------- Karten für Häuser und Weingüter ----------
Dieselbe Kartenoptik trägt zwei Übersichten: die Weingüter auf
wein-champagne.html (.weingut-*) und die Tisch-Partner auf
gedeckter-tisch.html (.haus-*). Bewusst ein gemeinsamer Regelsatz mit
zwei Namen statt kopierter Werte – so bleiben beide Seiten garantiert
deckungsgleich, und die Klassennamen sind auf beiden Seiten treffend. */
/* ---------- Weingut-Übersicht (wein-champagne.html) ----------
Der Inhalt wird aus data/weingueter.json erzeugt, siehe
tools/build-weingueter.py. Ohne JavaScript sind alle Kategorien
untereinander sichtbar; das Skript blendet dann bis auf eine aus. */
.wein-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.wein-filter-btn {
font-family: var(--font-sans);
font-size: var(--text-m);
font-weight: 560;
color: var(--color-text-soft);
background: #fff;
border: 1px solid var(--color-border);
border-radius: 999px;
/* 18px statt 20px: damit passen alle acht Regionen ab 1200px Fensterbreite
in eine Zeile, statt eine einzelne umbrechen zu lassen. */
padding: 11px 18px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wein-filter-btn:hover {
border-color: var(--color-pink-600);
color: var(--color-pink-700);
}
.wein-filter-btn[aria-selected="true"] {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
}
.wein-panel { padding-bottom: var(--abschnitt); }
/* Solange JS die Panels nicht übernommen hat, trennt eine feine Linie die
Kategorien — sonst laufen sie ohne Skript ineinander. */
.wein-panel + .wein-panel { border-top: 1px solid var(--color-border); padding-top: var(--raum-2xl); }
.js-wein-aktiv .wein-panel + .wein-panel { border-top: 0; padding-top: 0; }
.js-wein-aktiv .wein-panel[hidden] { display: none; }
.wein-panel-kopf {
text-align: center;
max-width: 62ch;
margin: 0 auto var(--raum-xl);
}
.wein-panel-kopf h2 { margin-bottom: 0.15em; }
.wein-panel-untertitel {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--text-base);
color: var(--color-pink-700);
margin: 0;
}
.weingut-liste,
.haus-liste {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--raum-2xl) var(--raum-xl);
}
.weingut,
.haus { display: block; }
.weingut-bild,
.haus-bild {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--color-bg-soft);
margin-bottom: 22px;
}
.weingut-bild picture,
.haus-bild picture { display: block; width: 100%; height: 100%; }
.weingut-bild img,
.haus-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Produktaufnahme vor weißem Grund (einzelne Flasche o. ä.): vollständig
zeigen statt beschneiden. Weißer Kachelgrund, damit der freigestellte
Hintergrund des Fotos nahtlos übergeht und die Flasche zu schweben scheint. */
.weingut-bild-freisteller {
background: #fff;
border: 1px solid var(--color-border);
padding: 18px;
}
.weingut-bild-freisteller img { object-fit: contain; }
/* Platzhalter, bis die Fotos vorliegen: ruhige Fläche mit angedeutetem Glas,
damit das Raster schon steht und später nichts springt. */
.weingut-bild-leer {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(150deg, #fbeef0, #f6dade 55%, #edc3c9);
color: var(--color-pink-700);
}
.weingut-bild-leer svg { width: 34px; height: 34px; opacity: 0.4; }
.weingut-text h3,
.haus-text h3 {
font-family: var(--font-serif);
font-size: var(--titel-3);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 0.15em;
}
.weingut-region,
.haus-kategorie {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--sperr-label);
text-transform: uppercase;
color: var(--color-pink-700);
margin: 0 0 0.9em;
}
.weingut-text p:last-child,
/* :last-of-type, nicht p – sonst überschriebe die Regel auch die
Kategoriezeile darüber und färbte sie grau statt rosé. */
.haus-text p:last-of-type {
/* Grundfarbe wie in allen anderen Karten der Website. Vorher stand hier
text-soft – dadurch war der Beschreibungstext auf zwei Seiten grau und
auf elf Seiten dunkel. */
color: var(--color-text);
line-height: var(--zeile-weit);
margin: 0;
max-width: 46ch;
}
@media (max-width: 860px) {
.weingut-liste,
.haus-liste { grid-template-columns: minmax(0, 1fr); gap: var(--raum-2xl); }
.wein-filter-btn { font-size: var(--text-s); padding: 9px 16px; }
}
/* ---------- Reference / partner list ---------- */
.logo-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
/* Der Streifen folgt immer direkt auf eine h2. Der Abstand gehört deshalb
hierher statt als Sonderwert an jede einzelne Überschrift. */
margin-top: var(--raum-xs);
}
.logo-strip span {
font-size: var(--text-m);
font-weight: 560;
padding: 10px 18px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-text-soft);
}
/* Referenzlogos: freistehend, ohne Kasten. In Ruhe alle einfarbig in
Tinte (brightness(0) färbt jedes freigestellte Logo schwarz, die
Deckkraft nimmt es auf Tinte zurück), beim Überfahren in Originalfarbe.
Die Höhen gleichen die Logos optisch an: Breite Wortmarken stehen
niedriger, kompakte Zeichen höher, damit keines lauter wirkt. */
.referenzen {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--raum-l) var(--raum-2xl);
margin-top: var(--raum-xl);
}
.referenz-logo {
--h: 52px;
height: var(--h);
width: auto;
filter: brightness(0);
opacity: 0.8;
transition: filter 0.25s ease, opacity 0.25s ease;
}
.referenz-logo:hover { filter: none; opacity: 1; }
.referenz-boehringer { --h: 60px; }
.referenz-henkel { --h: 76px; }
.referenz-eon { --h: 50px; }
.referenz-breidenbacher { --h: 96px; }
@media (max-width: 560px) {
.referenzen { gap: var(--raum-m) var(--raum-l); }
.referenz-logo { height: calc(var(--h) * 0.72); }
}
/* Referenz direkt im Text (Traumschorle, La Dame Blanche): kurzer Satz,
daneben das Logo, über einer Haarlinie vom Fließtext getrennt. */
.referenz-hinweis {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--raum-xs) var(--raum-s);
margin-top: var(--raum-m);
padding-top: var(--raum-s);
border-top: 1px solid var(--color-border);
font-size: var(--text-m);
color: var(--color-text-soft);
}
.referenz-hinweis .referenz-logo { height: calc(var(--h) * 0.7); }
/* ---------- Imagefilm (Zwei-Klick-Einbettung) ----------
Vor dem Klick liegt nur ein lokales Standbild vor; es geht keine Anfrage
an YouTube raus. Erst der Klick ersetzt das Standbild durch den Player. */
.video-embed { max-width: 900px; margin: 0 auto; }
.video-embed-trigger {
display: block;
position: relative;
width: 100%;
padding: 0;
border: none;
background: var(--color-pink-100);
cursor: pointer;
overflow: hidden;
line-height: 0;
}
.video-embed-trigger img {
width: 100%;
height: auto;
display: block;
transition: transform 0.4s ease, filter 0.3s ease;
}
.video-embed-trigger:hover img,
.video-embed-trigger:focus-visible img {
transform: scale(1.02);
filter: brightness(0.94);
}
.video-embed-trigger:focus-visible {
outline: 3px solid var(--color-pink-700);
outline-offset: 3px;
}
.video-embed-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.video-embed-play svg {
width: 84px;
height: auto;
transition: transform 0.25s ease;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.35));
}
.video-embed-trigger:hover .video-embed-play svg { transform: scale(1.08); }
/* Nach dem Klick eingesetzter Player */
.video-embed-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.video-embed-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-embed-note {
font-size: var(--text-s); /* wie .form-note – ein Maß für Hinweistexte */
color: var(--color-text-faint);
margin: 12px 0 0;
text-align: center;
}
.video-embed-note a { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.video-embed-trigger img,
.video-embed-play svg { transition: none; }
.video-embed-trigger:hover img { transform: none; }
.saeulen a.card { transition: none; }
.saeulen a.card:hover { transform: none; }
}
/* Belegzeile unter einem Fließtext – konkrete Zahl oder Partnername, der die
Aussage darüber überprüfbar macht. Ruhiger als der Fließtext, aber durch die
Akzentlinie klar als eigenständige Angabe erkennbar. */
.fact-note {
margin: var(--raum-m) 0 0;
padding-left: 18px;
border-left: 2px solid var(--color-pink-200);
font-size: var(--text-m);
line-height: var(--zeile-weit);
color: var(--color-text-soft);
max-width: 60ch;
}
/* Wortmarke einer Eigenmarke im Fließtext (z. B. Pamplune) – linksbündig
über dem zugehörigen Text. Steht in einer h2, damit die Marke auch in der
Dokumentgliederung als Überschrift auftaucht. */
.brand-heading {
margin: 0 0 18px;
line-height: 0;
}
.brand-wordmark {
height: 38px;
width: auto;
display: block;
}
/* Einzelnes, zentriertes Bild in begrenzter Breite – für Hochformate,
die in einem Vollbild-Band zu stark beschnitten würden. */
.figure-centered {
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
/* Längerer Fließtext (z. B. die Gründergeschichte): angenehme Zeilenlänge,
etwas größere Schrift und Luft vor den Zwischenüberschriften. */
.prose { text-align: left; }
.prose p {
font-size: var(--text-base); /* dritte Fließtextgröße vermieden */
line-height: var(--zeile-weit);
color: var(--color-text);
max-width: 68ch;
}
.prose p strong { color: var(--color-text); }
.prose h2 {
font-size: var(--titel-2);
margin-top: 2em;
}
.prose > h2:first-child,
.prose .eyebrow + h2 { margin-top: 0; }
/* Gründe-Liste („Warum Gastronomen mit uns arbeiten“): zentriert, gleichmäßige
Abstände, größere Schrift – ersetzt das zuvor unruhige 3er-Raster mit 5 Punkten. */
.reason-list {
list-style: none;
margin: 8px auto 0;
padding: 0;
max-width: 900px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 32px;
}
.reason-list li {
font-size: var(--text-base);
line-height: 1.35;
color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 560px) {
.reason-list { flex-direction: column; gap: var(--raum-xs); }
}
/* ---------- Abschluss jeder Seite ----------
Überschrift links, senkrecht mittig zu Text und Knopf rechts. Ersetzt den
rosa Verlaufsbanner, der auf neun Seiten identisch stand. */
.abschluss {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--raum-xl);
align-items: center;
padding-top: var(--raum-xl);
/* Haarlinie nur über der Inhaltsbreite: Ein border-top läge auf dem
ganzen Container und stünde links und rechts über den Text hinaus. */
background: linear-gradient(var(--color-border), var(--color-border))
center top / calc(100% - 2 * var(--rand)) 1px no-repeat;
}
/* Auf farbigem Abschnitt trennt schon die Fläche, die Linie entfällt. */
.section-soft .abschluss,
.section-pink .abschluss { padding-top: 0; background: none; }
.abschluss h2 { margin: 0; }
.abschluss .lede { max-width: 52ch; margin-bottom: var(--raum-m); }
/* ---------- Forms ---------- */
.form {
display: grid;
gap: var(--raum-s);
max-width: 640px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-s); }
/* Das Formular ist ein Raster; der Knopf würde sonst auf volle Breite gehen. */
.form button[type="submit"] { justify-self: start; }
/* Einwilligungszeile: Kästchen und Text nebeneinander, oben bündig. */
.einwilligung {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 400;
}
.einwilligung input[type="checkbox"] { width: auto; margin-top: 3px; }
label {
font-size: var(--text-s);
font-weight: 560;
display: block;
margin-bottom: 6px;
color: var(--color-text-soft);
}
input, textarea, select {
width: 100%;
font-family: inherit;
font-size: var(--text-base);
padding: 13px 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-text);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-pink-600);
box-shadow: 0 0 0 3px var(--color-pink-100);
}
textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: var(--text-s); color: var(--color-text-faint); }
/* Fehlertext direkt unter dem Feld, gesetzt von js/main.js. */
.feld-fehler {
margin: 6px 0 0;
font-size: var(--text-s);
font-weight: 560;
color: var(--color-pink-700);
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--color-pink-700); }
.form button[type="submit"]:disabled { opacity: 0.6; cursor: progress; transform: none; }
/* Sendefehler mit Ausweg über Telefon und E-Mail. */
.form-status {
padding: var(--raum-s);
background: var(--color-pink-100);
color: var(--color-text);
}
.form-status a { text-decoration: underline; }
/* Bestätigung anstelle des Formulars. */
.form-danke {
max-width: 640px;
padding: var(--karte);
background: var(--color-bg-soft);
}
.form-danke:focus { outline: none; }
.form-danke h3 { margin: 0 0 0.4em; }
.form-danke p { margin: 0; color: var(--color-text-soft); }
.form-danke a { text-decoration: underline; }
/* ---------- Consent-gated third-party embed (map) ----------
Nothing is requested from the third party until the visitor clicks,
so no data leaves the page without prior consent (§ 25 TDDDG). */
.consent-embed {
/* rechteckig wie die Bildflächen */
border-radius: 0;
overflow: hidden;
margin-top: 20px;
background: var(--color-pink-100);
border: 1px solid var(--color-border);
}
.consent-placeholder {
padding: var(--raum-m) var(--raum-s);
text-align: center;
display: grid;
gap: 12px;
justify-items: center;
}
.consent-placeholder svg {
width: 34px;
height: 34px;
opacity: 0.75;
}
.consent-placeholder p {
font-size: var(--text-base); /* ganze Sätze, also Lesetext */
color: var(--color-text-faint);
margin: 0;
max-width: 34ch;
}
.consent-embed iframe { display: block; border: 0; width: 100%; }
/* ---------- Footer ----------
Der Abschied an der Haustür, auf Hauch Rosé mit Haarlinie oben. Links
Hans und der Name, rechts das, was man am Seitenende sucht: Telefon und
E-Mail groß, darunter die Seiten in zwei benannten Gruppen. Raster 5 : 7
wie Übersicht und Abschluss. */
.site-footer {
background: var(--color-bg-soft);
color: var(--color-text);
border-top: 1px solid var(--color-border);
padding-block: var(--abschnitt) var(--raum-m);
}
.fuss {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas:
"marke kontakt"
"marke navi"
"boden boden";
gap: var(--raum-xl) var(--raum-xl);
}
.fuss-marke { grid-area: marke; align-self: start; display: block; }
.fuss-hans {
width: min(220px, 60%);
height: auto;
margin-bottom: var(--raum-m);
}
.fuss-name {
display: block;
font-family: var(--font-serif);
font-size: var(--titel-2);
line-height: var(--zeile-eng);
letter-spacing: -0.01em;
}
.fuss-seit {
display: block;
margin-top: 8px;
font-size: var(--text-m);
color: var(--color-text-soft);
}
.fuss-gruppe {
margin: 0 0 var(--raum-xs);
font-size: var(--text-m);
font-weight: 600;
color: var(--color-pink-700);
}
.fuss-kontakt { grid-area: kontakt; }
.fuss-gross {
display: block;
width: fit-content;
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.2;
color: var(--color-text);
/* Unterstrich mit Abstand, der beim Überfahren Pfingstrose annimmt. */
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: var(--color-pink-300);
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.fuss-gross:hover { color: var(--color-pink-700); text-decoration-color: var(--color-pink-700); }
.fuss-adresse {
margin: var(--raum-s) 0 0;
color: var(--color-text-soft);
}
.fuss-navi {
grid-area: navi;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--raum-m);
padding-top: var(--raum-l);
border-top: 1px solid var(--color-border);
}
.fuss-navi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss-navi a,
.fuss-boden a {
color: var(--color-text-soft);
transition: color 0.2s ease;
}
.fuss-navi a:hover,
.fuss-boden a:hover { color: var(--color-pink-700); }
.fuss-boden {
grid-area: boden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--raum-xs) var(--raum-m);
padding-top: var(--raum-m);
border-top: 1px solid var(--color-border);
font-size: var(--text-s);
color: var(--color-text-soft);
}
/* Die allgemeine Regel p { color: Tinte } überstimmte sonst die Farbe der Zeile. */
.fuss-boden p { margin: 0; color: inherit; }
.fuss-boden p:last-child { display: flex; gap: var(--raum-m); }
/* Aktuelle Seite im Fußbereich (gesetzt von js/main.js). Impressum und
Datenschutz stehen in keinem Hauptmenü, ohne Markierung gäbe es dort
keinen Hinweis, wo man ist. Seitlicher Strich in Pfingstrose. */
.site-footer .nav-active {
color: var(--color-text);
padding-left: 10px;
box-shadow: inset 2px 0 0 var(--color-pink-700);
}
@media (max-width: 860px) {
.fuss {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "marke" "kontakt" "navi" "boden";
gap: var(--raum-l);
}
.fuss-hans { width: 150px; }
}
/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Im schmalen Container gibt dieser bereits die Zeilenlänge vor; die
zusätzliche Begrenzung der Lede auf 46 Zeichen ließe die Spalte springen. */
.narrow .lede { max-width: none; }
/* Einleitung eines Abschnitts (Eyebrow + Überschrift, zentriert) über einem
Raster, einer Einbettung oder einer Aufzählung. Stand vorher fünfzehnmal
mit vier verschiedenen Abständen im HTML. */
.abschnitt-kopf {
text-align: center;
margin-bottom: var(--raum-xl);
}
/* Ein Knopf, der auf einen Textblock folgt. */
.aktion-danach { margin-top: var(--raum-m); }
/* Abstandsstufen für Blöcke, die zu keiner Komponente gehören. Bewusst nur
diese vier – wer einen fünften Wert braucht, hat meist ein Strukturproblem. */
.raum-oben-s { margin-top: var(--raum-s); }
.raum-oben-m { margin-top: var(--raum-m); }
.raum-oben-l { margin-top: var(--raum-l); }
.raum-unten-l { margin-bottom: var(--raum-l); }
.raum-unten-2xl { margin-bottom: var(--raum-2xl); }
/* ---------- Responsive ---------- */
/* Umschaltpunkt aufs Burger-Menü.
Achtung bei Änderungen an den Menüpunkten: Der Inhaltsbereich der Kopfzeile
ist auf 1072px gedeckelt (Container 1120px minus 2×24px Innenabstand). Wird
Logo + Menü zusammen breiter, rücken sie aneinander — ein höherer
Umschaltpunkt hilft dann nicht, weil die Breite nach oben begrenzt bleibt.
In dem Fall Menüabstand, Schriftgröße oder Beschriftung kürzen. */
/* Kontakt-Pille für schmale Fenster: Dort steckt das Menü im Burger, und
der Weg zum Gespräch soll trotzdem immer sichtbar bleiben. */
.kopf-kontakt {
display: none;
margin-left: auto;
margin-right: var(--raum-xs);
padding: 8px 16px;
border-radius: 999px;
background: var(--color-text);
color: #fff;
font-size: var(--text-m);
font-weight: 700;
white-space: nowrap;
transition: background 0.2s ease;
}
.kopf-kontakt:hover { background: var(--color-pink-700); }
@media (max-width: 1120px) {
.nav-toggle { display: flex; }
.kopf-kontakt { display: inline-block; }
.site-nav {
position: fixed;
top: 104px;
left: 0;
right: 0;
height: calc(100vh - 104px);
height: calc(100dvh - 104px);
background: #fff;
border-bottom: 1px solid var(--color-border);
overflow-y: auto;
display: none;
}
.site-nav.open { display: block; }
.site-nav > ul {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px var(--rand) 20px;
}
.site-nav > ul > li { border-bottom: 1px solid var(--color-border); }
.site-nav li:last-child { border-bottom: none; margin-top: 10px; }
.site-nav a { display: block; padding: 14px 0; }
.site-nav a.nav-cta { text-align: center; padding: 12px; }
/* Im Burger-Menü stehen die Punkte gestapelt und durch Linien getrennt.
Ein Unterstrich liefe dort mit dem Zeilenrahmen zusammen, deshalb hier
ein seitlicher Akzent. */
.site-nav .nav-active::after { display: none; }
.site-nav .nav-active {
padding-left: 12px;
box-shadow: inset 3px 0 0 var(--color-pink-700);
}
.dropdown-toggle { padding: 14px 0; width: 100%; justify-content: space-between; }
.dropdown {
position: static;
transform: none;
margin: 0 0 10px;
box-shadow: none;
border: none;
background: var(--color-bg-soft);
display: none;
}
.has-dropdown.open .dropdown { display: block; }
.has-dropdown:hover .dropdown { display: none; }
.has-dropdown.open:hover .dropdown { display: block; }
}
@media (max-width: 860px) {
.hero-split, .split { grid-template-columns: 1fr; }
.hero-split.reverse { direction: ltr; }
.split.reverse .split-media { order: 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.stat-row { grid-template-columns: repeat(2, 1fr); gap: var(--spalte); }
.abschluss { grid-template-columns: minmax(0, 1fr); gap: var(--raum-m); }
}
/* Zeilen der Ankunft (js/ankunft.js fasst die Teile zwischen den
einer Seitenüberschrift so zusammen; auf der Startseite stehen sie fest
im HTML). Als Block brechen sie genau wie die
, die sie ersetzen. */
main h1 .zeile { display: block; }