/* 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;

  --container-w: 1120px;
  --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;
  --raum-l: 40px;
  --raum-xl: 56px;
  --raum-2xl: 72px;

  /* 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; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

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 {
  /* 50 statt 68: Die freigestellte Datei ist eng um die Zeichnung beschnitten,
     das alte PNG hatte ringsum weissen Rand. Bei 50 px ist die Figur genau so
     gross wie vorher, der Kasten drumherum aber schmaler. */
  height: 50px;
  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; }
}

/* 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 { font-size: 0.7em; 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: gleiche Schriftgröße wie die Eyebrow darüber, linksbündig
   ohne Innenabstand – schließt damit bündig an den Textblock an. */
.btn-ghost-flush {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--sperr-label);
  text-transform: uppercase;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Layout blocks ---------- */

.section { padding: 96px 0; }
/* 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: 64px 0; }
.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); }

.hero {
  padding: 120px 0 90px;
  text-align: center;
}
.hero .lede { margin: 0 auto 2.2em; }
/* Markenname im Hero. Er wird beim Laden von rechts nach links aufgedeckt:
   clip-path beschneidet ihn zunächst bis zum rechten Rand (linker Einzug
   100%), dann wandert die Kante nach links und gibt die Schrift frei.
   Eigener span statt der ganzen H1, damit die Zeile darunter ruhig stehen
   bleibt. forwards hält den Endzustand, sonst spränge die Schrift zurück. */
.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);
  clip-path: inset(0 0 0 100%);
  animation: von-rechts-aufdecken 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes von-rechts-aufdecken {
  to { clip-path: inset(0 0 0 0); }
}
/* Wer Bewegung abgestellt hat, sieht beide Zeilen sofort und vollständig. */
@media (prefers-reduced-motion: reduce) {
  .hero-marke,
  .hero-zusatz { clip-path: none; animation: none; }
}

/* 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;
  /* Dieselbe Einblendung wie beim Markennamen, nur langsamer und etwas
     später – so führt der Name und die Zeile folgt ihm nach. */
  clip-path: inset(0 0 0 100%);
  animation: von-rechts-aufdecken 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
  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: 64px;
  align-items: center;
  padding: 90px 0;
}
.hero-split.reverse { direction: rtl; }
.hero-split.reverse > * { direction: ltr; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  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: 32px; }
.grid-eng { gap: var(--raum-s); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }

/* 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: 32px;
}
.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: 20px; }

/* 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); }


/* ---------- 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: 700px) {
  .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: 44px 0; }

.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: 760px) {
  .partner-uebersicht { padding: 34px 0; }
  .partner-uebersicht-titel { margin-bottom: 20px; }
  .partner-gruppen { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ---------- 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 36px;
}

.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 52px 36px;
}

/* 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: 760px) {
  /* 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 40px 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: 96px; }

/* 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: 72px; }
.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 56px;
}

.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: 64px 56px;
}

.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: 48px; }
  .wein-panel { padding-bottom: 64px; }
  .wein-panel-kopf { margin-bottom: 40px; }
  .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);
}

/* Referenz-/Partnerlogos. Aktiv, sobald Logodateien unter
   assets/logos/referenzen/ liegen: <span> durch
   <img class="logo-strip-img" src="..." alt="Firmenname"> ersetzen.
   Einheitliche Höhe + entsättigt, damit die Fremdlogos die Marke
   nicht überstrahlen; bei Hover in Originalfarbe. */
.logo-strip-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.logo-strip-img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 700px) { .logo-strip-img { height: 26px; } }

/* ---------- 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: 26px 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: 700px) {
  .reason-list { flex-direction: column; gap: var(--raum-xs); }
}

/* ---------- CTA banner ---------- */

.cta-banner {
  border-radius: 0;
  padding: var(--raum-l) var(--raum-xl);
  /* Alle Banner gleich hoch. Der Regelfall, Überschrift plus zweizeiliger
     Vorspann, ergibt 270 px; kürzere Texte füllen auf diese Höhe auf statt
     ein flacheres Kästchen zu bilden. Das Raster hält den Inhalt dabei
     mittig, sonst klebte er oben. */
  min-height: 270px;
  display: grid;
  align-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-pink-200), var(--color-pink-300));
}
.cta-banner h2 { margin-bottom: 0.3em; }
/* Im Raster zoege der Knopf sonst ueber die ganze Breite. */
.cta-banner .btn { justify-self: center; }
/* Abstand zwischen Vorspann und Knopf. Stand vorher auf allen zehn Seiten
   einzeln im HTML. */
.cta-banner .lede { margin-bottom: 1.6em; }
/* Variante ohne Fläche: derselbe Aufbau, aber auf dem Abschnittshintergrund. */
.cta-banner-schlicht { background: transparent; padding: 0; min-height: 0; }

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: 18px;
  max-width: 640px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* 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); }
.form-success {
  display: none;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-pink-100);
  color: var(--color-pink-700);
  font-weight: 560;
}

/* ---------- 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: 28px 22px;
  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 ---------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  padding: 56px 0 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
/* 26 statt 36, gleiche Rechnung wie bei .logo-mark. */
.footer-logo { height: 26px; margin-bottom: 14px; }
.footer-brand p { color: var(--color-text-soft); font-size: var(--text-m); }
.footer-links, .footer-contact { display: grid; gap: 10px; align-content: start; }
.footer-links a, .footer-contact a {
  font-size: var(--text-m);
  color: var(--color-text-soft);
}
.footer-links a:hover, .footer-contact a:hover { color: var(--color-text); }

/* Aktuelle Seite im Fußbereich. Impressum und Datenschutz stehen in keinem
   Hauptmenü – ohne diese Markierung gäbe es dort keinen Hinweis darauf, wo
   man sich befindet. Gestaltet wie im Burger-Menü: seitlicher Strich im Rosé
   der Marke, weil die Links auch hier untereinander stehen. */
.site-footer .nav-active {
  color: var(--color-text);
  padding-left: 10px;
  box-shadow: inset 3px 0 0 var(--color-pink-700);
}
.footer-copy {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin: 0;
}

/* ---------- 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-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. */
@media (max-width: 1120px) {
  .nav-toggle { display: flex; }
  .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 24px 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; gap: 36px; }
  .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: 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 64px 0; }
  .hero { padding: 84px 0 56px; }
  .cta-banner { padding: var(--raum-m) var(--raum-s); }
}