/* =====================================================================
   Party-Service Göbra – Stylesheet
   ---------------------------------------------------------------------
   Wiedererkennung aus der alten Seite: Schwarz, Hausrot #ae0f0a, Gold
   aus dem Logo, Creme der alten Menü-Kästen, Georgia-Erbe (Gelasio),
   rote Oberlinie über Textkästen, Rauten vor den Menütiteln.

   Aufbau
     1  Schriften
     2  Marken (Farben, Maße, Bewegung)
     3  Grundlagen
     4  Bausteine (Behälter, Abschnitte, Knöpfe, Vorzeilen …)
     5  Kopfleiste und Vollmenü
     6  Bühne (Startseite)
     7  Startseite: Willkommen, Kategorien, Anspruch,
        Namen, Zitat, Stimmen
     8  Seitenkopf der Unterseiten
     9  Menüs
    10  Service
    11  Geschichte
    12  Fotos (Diashow)
    13  Gästebuch
    14  Kontakt und Formulare
    15  Rechtstexte
    16  Kontakt-Aufruf und Fuß
    17  Einblenden und Bewegung
    18  Druck
    19  Anlass-Seiten, Fragen, Brotkrümel, Schnellkontakt (Suche & Anfragen)
    20  Angebot Abi-Feier
   ===================================================================== */

/* ---------------------------------------------------------------------
   1  Schriften (SIL Open Font License, auf dem eigenen Server)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/gelasio-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/gelasio-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/gelasio-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/gelasio-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/sourcesans3-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/sourcesans3-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/sourcesans3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/sourcesans3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   2  Marken
   --------------------------------------------------------------------- */
:root {
  /* Farben – Kontraste geprüft (WCAG AA), siehe README */
  --nacht: #110e0c;          /* warmes Schwarz der Kopfleiste und Bänder */
  --nacht-2: #1c1714;
  --nacht-3: #2b231e;
  --nacht-tief: #0a0807;
  --rot: #ae0f0a;            /* Hausrot der alten Seite – 7,1:1 auf Papier */
  --rot-tief: #8f0c08;
  --rot-hell: #e31e24;       /* Logo-Rot – auf Dunkel nur in großer Schrift */
  --gold: #d7b56d;           /* Logo-Gold – nur auf dunklem Grund */
  --gold-hell: #ead39b;
  --gold-dunkel: #7a5c22;    /* Gold als Schrift auf hellem Grund */
  --gruen: #3f8f3a;          /* Stiel der Chilischote */
  --creme: #f8efdd;          /* Papier der alten Menü-Kästen, etwas ruhiger */
  --creme-2: #f1e3c6;
  --papier: #fffcf6;
  --tinte: #231b16;
  --tinte-leise: #5e5047;
  --hell-leise: #b9ab9b;     /* leiser Text auf Nacht */
  --linie: rgba(35, 27, 22, .14);
  --linie-hell: rgba(248, 239, 221, .16);

  /* Schrift */
  --schrift-titel: "Gelasio", Georgia, "Times New Roman", serif;
  --schrift-text: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-groesse: clamp(1.0625rem, .98rem + .3vw, 1.1875rem);

  /* Maße */
  --breite: 76rem;
  --rand: clamp(1rem, 4.5vw, 2.5rem);
  --abstand: clamp(4.25rem, 9vw, 7.5rem);
  --luft: clamp(1.5rem, 3vw, 2.5rem);
  --radius: 4px;
  --kopf-hoehe: 72px;
  --schatten: 0 1px 2px rgba(17, 14, 12, .06), 0 10px 30px -8px rgba(17, 14, 12, .22);

  /* Bewegung */
  --kurve: cubic-bezier(.2, .7, .2, 1);
  --kurve-weich: cubic-bezier(.45, 0, .2, 1);
  --schnell: .2s;
  --mittel: .45s;

  /* Feines Korn für dunkle Flächen (gegen das Glatte) */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

@media (min-width: 64rem) {
  :root { --kopf-hoehe: 88px; }
}

/* ---------------------------------------------------------------------
   3  Grundlagen
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Weiche Seitenwechsel – wo der Browser es kann */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--text-groesse);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.4rem + 3.6vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 2.3vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--rot-tief); }

strong, b { font-weight: 650; }

ul, ol { padding-left: 1.2em; }

address { font-style: normal; }

button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--fokus, var(--rot));
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--rot); color: #fff; }

.nur-vorleser {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--rot);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--schnell);
}
.sprungmarke:focus { top: 1rem; color: #fff; }

/* ---------------------------------------------------------------------
   4  Bausteine
   --------------------------------------------------------------------- */
.behaelter {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}
.behaelter--schmal { width: min(100% - 2 * var(--rand), 48rem); }

.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt--papier { background: var(--papier); }
.abschnitt--creme { background: var(--creme); }
.abschnitt--nacht {
  background-color: var(--nacht);
  color: var(--creme);
  --fokus: var(--gold);
  isolation: isolate;
}
.abschnitt--nacht a:not(.knopf) { color: var(--gold-hell); }
.abschnitt--nacht a:not(.knopf):hover { color: #fff; }

/* Korn über dunklen Flächen */
.abschnitt--nacht::before,
.buehne__band::before,
.seitenkopf__band::before,
.fuss::before,
.zitat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--korn);
  opacity: .07;
  pointer-events: none;
  z-index: -1;
}

.abschnitt__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.abschnitt__kopf--mitte { margin-inline: auto; text-align: center; }

/* Vorzeile über Überschriften */
.kicker {
  display: flex;
  align-items: flex-start;   /* Raute an der ersten Zeile, auch wenn die Vorzeile umbricht */
  gap: .65em;
  margin: 0 0 .9rem;
  font-family: var(--schrift-text);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--rot);
}
.kicker::before {
  content: "";
  width: .5em; height: .5em;
  flex: none;
  margin-top: .4em;   /* (Zeilenhöhe 1.3 − .5) / 2 */
  background: currentColor;
  transform: rotate(45deg);
}
.abschnitt__kopf--mitte .kicker { justify-content: center; }
.abschnitt--nacht .kicker,
.kicker--gold { color: var(--gold); }

/* Fließtext mit angenehmer Zeilenlänge */
.fliesstext { max-width: 62ch; }
.fliesstext > * { margin: 0; }
.fliesstext > * + * { margin-top: 1em; }
.fliesstext ul { margin: 0; padding: 0; list-style: none; }
.fliesstext li { position: relative; padding-left: 1.4em; }
.fliesstext li + li { margin-top: .6em; }
.fliesstext li::before {
  content: "";
  position: absolute;
  left: .15em; top: .62em;
  width: .42em; height: .42em;
  background: var(--rot);
  transform: rotate(45deg);
}
.abschnitt--nacht .fliesstext li::before { background: var(--gold); }
.einleitung { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); line-height: 1.55; }

/* Roter Strich über Kästen – wie die Boxen der alten Seite */
.kasten { border-top: 2px solid var(--rot); padding-top: 1.25rem; }
.abschnitt--nacht .kasten { border-top-color: var(--gold); }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .75em 1.35em;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .015em;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--schnell), color var(--schnell), border-color var(--schnell),
              transform var(--schnell) var(--kurve), box-shadow var(--schnell);
}
.knopf .symbol { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--schnell) var(--kurve); }
.knopf:hover .symbol--pfeil { transform: translateX(4px); }
.knopf:active { transform: translateY(1px) scale(.985); }

.knopf--rot { background: var(--rot); color: #fff; }
.knopf--rot:hover { background: var(--rot-tief); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(174, 15, 10, .8); }

.knopf--gold-rand { border-color: var(--gold); color: var(--gold-hell); background: transparent; }
.knopf--gold-rand:hover { background: var(--gold); color: var(--nacht); transform: translateY(-2px); }

.knopf--rand { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf--rand:hover { background: var(--tinte); color: var(--papier); transform: translateY(-2px); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Textverweis mit Pfeil */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.75rem;
  font-weight: 650;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 0 1.5px no-repeat;
  transition: background-size var(--mittel) var(--kurve), color var(--schnell);
}
.textlink:hover { background-size: calc(100% - 1.6em) 1.5px; }
.textlink .symbol { width: 1.1em; height: 1.1em; transition: transform var(--schnell) var(--kurve); }
.textlink:hover .symbol { transform: translateX(4px); }

.symbol { width: 1.25em; height: 1.25em; flex: none; }

/* Merkmale (vegan, vegetarisch) */
.merkmal {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .55em .15em .4em;
  border-radius: 999px;
  background: #e5efdc;
  color: #2c5a28;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  white-space: nowrap;
}
.merkmal .symbol { width: 1em; height: 1em; }

/* ---------------------------------------------------------------------
   5  Kopfleiste und Vollmenü
   --------------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nacht-tief);   /* voll deckend – sonst schimmert der Inhalt darunter durch */
  color: var(--creme);
  --fokus: var(--gold);
  view-transition-name: kopf;
  transition: box-shadow var(--mittel);
}
.kopf--kompakt { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7); }

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100% - 2 * var(--rand), var(--breite));   /* bündig mit der Textspalte darunter */
  height: var(--kopf-hoehe);
  margin-inline: auto;
  transition: height var(--mittel) var(--kurve);
}
.kopf--kompakt .kopf__innen { height: calc(var(--kopf-hoehe) - 14px); }

.kopf__logo { display: block; flex: none; margin-right: auto; }
.kopf__logo img {
  width: auto;
  height: calc(var(--kopf-hoehe) - 16px);
  transition: height var(--mittel) var(--kurve);
}
.kopf--kompakt .kopf__logo img { height: calc(var(--kopf-hoehe) - 26px); }

.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.kopf__nav a {
  position: relative;
  display: block;
  padding: .55rem .7rem;
  border-radius: 2px;
  color: var(--creme);
  font-family: var(--schrift-titel);
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--schnell), color var(--schnell);
}
/* Wie auf der alten Seite: Rot hinterlegt beim Darüberfahren */
.kopf__nav a:hover { background: var(--rot); color: #fff; }
.kopf__nav a::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: .25rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mittel) var(--kurve);
}
.kopf__nav a[aria-current="page"] { color: var(--gold-hell); }
.kopf__nav a[aria-current="page"]::after { transform: scaleX(1); }
.kopf__nav a[aria-current="page"]:hover { color: #fff; }

.kopf__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 2.85rem;
  min-height: 2.85rem;
  padding: .5rem;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold-hell);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--schnell), color var(--schnell);
}
.kopf__tel:hover { background: var(--gold); color: var(--nacht); }
.kopf__tel .symbol { width: 1.2rem; height: 1.2rem; }
.kopf__tel-nummer { display: none; }

.kopf__knopf {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--rot);
  color: #fff;
  cursor: pointer;
}
.js .kopf__knopf { display: inline-flex; }
.kopf__striche { position: relative; width: 1.3rem; height: .95rem; }
.kopf__striche span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--mittel) var(--kurve), opacity var(--schnell), top var(--mittel) var(--kurve);
}
.kopf__striche span:nth-child(1) { top: 0; }
.kopf__striche span:nth-child(2) { top: calc(50% - 1px); }
.kopf__striche span:nth-child(3) { top: calc(100% - 2px); }
.kopf__knopf[aria-expanded="true"] .kopf__striche span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.kopf__knopf[aria-expanded="true"] .kopf__striche span:nth-child(2) { opacity: 0; }
.kopf__knopf[aria-expanded="true"] .kopf__striche span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Ohne JavaScript: Navigation als umbrechende Zeile unter dem Logo */
.kein-js .kopf__innen { flex-wrap: wrap; height: auto; padding-block: .5rem; }
.kein-js .kopf__nav { display: block; order: 3; width: 100%; overflow-x: auto; }
.kein-js .kopf__nav a { padding: .5rem .55rem; font-size: .95rem; }

@media (min-width: 40rem) {
  .kopf__tel { padding-inline: .9rem; }
  .kopf__tel-nummer { display: inline; }
}

@media (min-width: 75rem) {
  .kopf__nav,
  .kein-js .kopf__nav { display: block; order: 0; width: auto; }
  .kein-js .kopf__innen { flex-wrap: nowrap; height: var(--kopf-hoehe); padding: 0; }
  .js .kopf__knopf { display: none; }
  /* Menü direkt neben dem Logo; „Kontakt“ und Telefon bleiben als Aktionen rechts */
  .kopf__logo { margin-right: 0; }
  .kopf__nav { flex: 1; margin-left: clamp(.5rem, 1.5vw, 1.5rem); }
  .kopf__nav-aktion { margin-left: auto; }
}

/* Vollmenü für schmale Bildschirme */
.vollmenue {
  position: fixed;
  inset: var(--kopf-hoehe) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem var(--rand) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--nacht-tief);
  color: var(--creme);
  --fokus: var(--gold);
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .3s var(--kurve), transform .3s var(--kurve);
}
.vollmenue[hidden] { display: none; }
.vollmenue.ist-offen { opacity: 1; transform: none; }
.vollmenue__nav ul { margin: 0; padding: 0; list-style: none; }
.vollmenue__nav li {
  border-bottom: 1px solid var(--linie-hell);
  opacity: 0;
  transform: translateX(-1.25rem);
  transition: opacity .35s var(--kurve), transform .35s var(--kurve);
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.vollmenue.ist-offen li { opacity: 1; transform: none; }
.vollmenue__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  color: var(--creme);
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  text-decoration: none;
}
.vollmenue__nav a::after {
  content: "";
  width: .45rem; height: .45rem;
  background: var(--rot);
  transform: rotate(45deg) scale(0);
  transition: transform var(--mittel) var(--kurve);
}
.vollmenue__nav a:hover::after,
.vollmenue__nav a[aria-current="page"]::after { transform: rotate(45deg) scale(1); }
.vollmenue__nav a[aria-current="page"] { color: var(--gold-hell); }
.vollmenue__kontakt { display: grid; gap: .75rem; justify-items: start; color: var(--hell-leise); }
.vollmenue__kontakt p { margin: 0; }
.vollmenue__mail { color: var(--gold-hell); }
body.menue-offen { overflow: hidden; }

/* ---------------------------------------------------------------------
   6  Bühne (Startseite)
   --------------------------------------------------------------------- */
.buehne { position: relative; background: var(--nacht); color: var(--creme); --fokus: var(--gold); }

.buehne__bilder {
  position: relative;
  height: clamp(17rem, 58vh, 44rem);   /* für Browser ohne svh (iOS vor 15.4, ältere Android-Browser) */
  height: clamp(17rem, 58svh, 44rem);
  overflow: hidden;
  background: var(--nacht-2);
  touch-action: pan-y pinch-zoom;   /* waagerecht wischt das Skript, senkrecht scrollt die Seite */
}
.buehne__bild {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s var(--kurve-weich);
}
.buehne__bild.ist-aktiv { opacity: 1; z-index: 1; }
.buehne__bild.war-aktiv { opacity: 0; z-index: 0; }
.buehne__bild picture, .buehne__bild img { width: 100%; height: 100%; }
.buehne__bild img {
  object-fit: cover;
  transform-origin: var(--ursprung, 50% 50%);
  will-change: transform;
}
.js .buehne__bild.ist-aktiv img,
.js .buehne__bild.war-aktiv img {
  animation: kenburns var(--folie-dauer, 7.5s) linear forwards;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.12) translate(var(--kb-x, -1.5%), var(--kb-y, -1%)); }
}

.buehne__band {
  position: relative;
  isolation: isolate;
  background: var(--nacht);
  border-top: 1px solid rgba(215, 181, 109, .45);
}
.buehne__raster {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.75rem, 3.6vw, 2.75rem);
}
.buehne h1.kicker { font-size: .8125rem; margin-bottom: .85rem; }

.buehne__zeilen { display: grid; }
.buehne__zeile { grid-area: 1 / 1; }
.js .buehne__zeile { visibility: hidden; }
.js .buehne__zeile.ist-aktiv { visibility: visible; }
.kein-js .buehne__zeile:not(.ist-aktiv) { display: none; }

.buehne__spruch {
  margin: 0 0 .35rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.8rem, 1.15rem + 2.9vw, 3.15rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.buehne__unter { margin: 0; color: var(--hell-leise); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }

/* Wortweise hereinkommen */
.js .buehne__zeile .wort { display: inline-block; opacity: 0; transform: translateY(.45em); }
.js .buehne__zeile.ist-aktiv .wort {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--kurve), transform .6s var(--kurve);
  transition-delay: calc(120ms + var(--i) * 70ms);
}
.js .buehne__zeile .buehne__unter { opacity: 0; transition: opacity .5s; }
.js .buehne__zeile.ist-aktiv .buehne__unter { opacity: 1; transition-delay: .55s; }

.buehne__handlung { margin-top: 1.4rem; }

.buehne__steuerung {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.buehne__steuerung[hidden] { display: none; }
.buehne__punkte { display: flex; gap: .45rem; }
.buehne__punkt {
  position: relative;
  width: clamp(2.2rem, 5vw, 3.2rem);
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.buehne__punkt::before,
.buehne__punkt span {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(50% - 1.5px);
  height: 3px;
  border-radius: 3px;
  background: rgba(248, 239, 221, .25);
}
.buehne__punkt span { background: var(--gold); transform: scaleX(0); transform-origin: left; }
.buehne__punkt.ist-erledigt span { transform: scaleX(1); }
.buehne__punkt.ist-aktiv span { animation: fortschritt var(--folie-dauer, 7.5s) linear forwards; }
.buehne.ist-pausiert .buehne__punkt.ist-aktiv span { animation-play-state: paused; }
@keyframes fortschritt { to { transform: scaleX(1); } }

.buehne__pause {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid rgba(248, 239, 221, .35);
  border-radius: 50%;
  background: none;
  color: var(--creme);
  cursor: pointer;
  transition: border-color var(--schnell), color var(--schnell);
}
.buehne__pause:hover { border-color: var(--gold); color: var(--gold); }
.buehne__pause .symbol { width: 1rem; height: 1rem; grid-area: 1 / 1; }
.buehne__pause .symbol--abspielen { display: none; }
.buehne.ist-pausiert .buehne__pause .symbol--pause { display: none; }
.buehne.ist-pausiert .buehne__pause .symbol--abspielen { display: block; }

@media (min-width: 56rem) {
  .buehne__raster { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; }
  .buehne__steuerung { padding-bottom: .4rem; }
}

/* ---------------------------------------------------------------------
   7  Startseite
   --------------------------------------------------------------------- */

/* Willkommen und Zahlen */
.willkommen__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.willkommen__text .textlink { margin-top: 1rem; }
/* Seit das Laufband entfallen ist (Kundin, 07.10.2026), folgen zwei helle
   Abschnitte aufeinander. Ein Abstand statt zwei, sonst klafft eine Lücke. */
.willkommen + .anlass-karten { padding-top: 0; }

.zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.6vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
/* Schwarze Kacheln mit goldener Schrift (Wunsch der Kundin, 07.10.2026) */
.zahl {
  padding: clamp(.9rem, 2.2vw, 1.25rem) clamp(.9rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.4rem);
  border-top: 2px solid var(--rot);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--nacht);
  color: var(--gold);
}
.zahl__vor {
  display: block;
  color: var(--gold);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.zahl__wert {
  display: block;
  margin: .1rem 0 .35rem;
  color: var(--gold);
  font-family: var(--schrift-titel);
  font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.zahl__text { display: block; color: var(--gold-hell); line-height: 1.4; }

@media (min-width: 60rem) {
  .willkommen__raster { grid-template-columns: 1.15fr 1fr; align-items: center; }
}

/* Kategorien */
.kategorien__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kategorie__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--nacht);
  color: var(--creme);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: transform var(--mittel) var(--kurve), box-shadow var(--mittel);
}
.kategorie__link:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(17, 14, 12, .55); }
.kategorie__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nacht-3); }
.kategorie__bild picture, .kategorie__bild img { width: 100%; height: 100%; }
.kategorie__bild img { object-fit: cover; transition: transform .9s var(--kurve); }
.kategorie__link:hover .kategorie__bild img { transform: scale(1.07); }
.kategorie__band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .1rem .75rem;
  flex: 1;
  padding: .85rem 1rem 1rem;
  border-top: 3px solid var(--rot);
  transition: background-color var(--mittel);
}
.kategorie__link:hover .kategorie__band { background: var(--rot); }
.kategorie__name { font-family: var(--schrift-titel); font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem); font-weight: 600; line-height: 1.2; }
.kategorie__anzahl { grid-column: 1; color: var(--hell-leise); font-size: .875rem; }
.kategorie__link:hover .kategorie__anzahl { color: #fde9e7; }
.kategorie__band .symbol { grid-column: 2; grid-row: 1 / span 2; width: 1.3rem; height: 1.3rem; color: var(--gold); transition: transform var(--mittel) var(--kurve), color var(--schnell); }
.kategorie__link:hover .kategorie__band .symbol { transform: translateX(4px); color: #fff; }

/* Wunschmenü: schwarz mit goldener Schrift wie die übrigen Karten, ohne
   Chili (beides Wunsch der Kundin, 07.10.2026) */
.kategorie--wunsch { grid-column: 1 / -1; }
.kategorie--wunsch .kategorie__link {
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--nacht);
  color: var(--gold);
  border-top: 3px solid var(--gold);
}
.kategorie--wunsch .kategorie__link:hover { background: var(--nacht-2); color: var(--gold); }
.kategorie--wunsch strong { display: block; color: var(--gold); font-family: var(--schrift-titel); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 600; line-height: 1.15; }
.kategorie--wunsch span { color: var(--gold-hell); line-height: 1.45; }
/* Text bleibt mittig im freien Raum, wo er neben der Chili stand */
.kategorie--wunsch .kategorie__link > span:not(.textlink) { margin-block: auto; }
.kategorie--wunsch .textlink { color: var(--gold); }

/* Kachel „Abi-Feier“ (Chris, 08.10.2026: nur als Kachel, keine eigene
   Sektion) – wie eine Kategorie, dazu das Etikett „Angebot“ */
.kategorie__marke {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .3rem .6rem;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--nacht);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -4px rgba(17, 14, 12, .55);
}

/* Die Wunschmenü-Karte füllt die letzte Reihe auf: index.php rechnet aus,
   wie viele Spalten frei sind (--spalten-2, --spalten-3). Am Handy steht sie
   allein, die Abi-Kachel nimmt dort bei gerader Kategorienzahl die ganze Breite. */
@media (max-width: 39.99rem) {
  .kategorie--breit { grid-column: 1 / -1; }
  .kategorie--breit .kategorie__bild { aspect-ratio: 2 / 1; }
}
@media (min-width: 40rem) {
  .kategorie--wunsch { grid-column: span var(--spalten-2, 2); }
}
@media (min-width: 64rem) {
  .kategorien__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kategorie--wunsch { grid-column: span var(--spalten-3, 1); }
  /* Als Leiste über zwei oder drei Spalten: Text links, „Anfrage stellen“ rechts */
  .kategorie--leiste .kategorie__link { flex-direction: row; align-items: center; }
  .kategorie--leiste .textlink { flex: none; }
}

/* Anspruch */
.versprechen__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.versprechen__bild { position: relative; margin: 0; }
.versprechen__rahmen {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.versprechen__rahmen picture, .versprechen__rahmen img { width: 100%; height: 115%; }
.versprechen__rahmen img { object-fit: cover; }
/* Kein Zierwinkel mit z-index: -1 an eingeblendeten Bildern: Er war nur während
   der Einblendung zu sehen und verschwand danach hinter dem Abschnitt (Chris,
   08.10.2026, „taucht kurz ein Rand … auf und verschwindet dann wieder“).
   Ebenso bei .foto-rahmen und .portraet__rahmen. */
.versprechen__liste {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0 2.25rem;
  padding: 0;
  list-style: none;
}
.versprechen__liste li { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; align-content: start; }
.versprechen__liste .symbol {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: .55rem;
  border-radius: 50%;
  background: var(--creme);
  color: var(--rot);
}
.versprechen__liste h3 { margin: .15rem 0 0; font-size: 1.2rem; }
.versprechen__liste p { margin: 0; color: var(--tinte-leise); }

@media (min-width: 56rem) {
  .versprechen__raster { grid-template-columns: .9fr 1.1fr; }
  .versprechen__liste { grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
}

/* Namensgeschichte */
.namen__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.namen__buehne { text-align: center; }
.namen__herkunft {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem clamp(1rem, 3vw, 2rem);
  margin: 0 0 clamp(1rem, 3vw, 1.75rem);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem);
  letter-spacing: .04em;
  color: var(--hell-leise);
}
.namen__name { white-space: nowrap; }
.namen__name b { font-weight: 700; color: var(--creme); transition: color .5s var(--kurve); }
/* Das Wort ist der Schriftzug „Göbra’S“ aus dem Logo (Kundin, 07.10.2026):
   drei deckungsgleiche Bilder aus werkzeuge/schriftzug-raster.js. Als
   Inline-SVG zeigte ein Android-Handy rote Rechtecke statt der Buchstaben.
   Die Fläche entspricht der viewBox der SVG (179 × 65 Einheiten), jedes Bild
   ist ringsum 2 Einheiten größer – daher die Prozentwerte. */
.namen__wort { margin: 0; }
.namen__wort .schriftzug { position: relative; display: block; width: min(100%, 34rem); aspect-ratio: 179 / 65; margin-inline: auto; }
.schriftzug__teil { position: absolute; top: -3.0769%; left: -1.1173%; width: 102.2346%; }
.schriftzug__teil img { display: block; width: 100%; height: auto; }
.namen__text .textlink { margin-top: 1rem; }
/* Das ’S fliegt von rechts ein und ragte sonst am Handy über den Rand */
.namen { overflow-x: clip; }

/* Bewegung: Silben leuchten auf, dann fliegen die drei Teile des Schriftzugs
   ein (translate) und rücken zusammen (transform): Gö, bra, ’S.
   Prozent beziehen sich auf ein Bild (183 × 69 Einheiten): 11 Einheiten
   seitlich und 9 nach oben, wie vorher in der SVG. */
.js .namen__name b { color: var(--hell-leise); }
.js .namen__wort .schriftzug__teil { opacity: 0; translate: 0 -13.0435%; transform: translateX(calc((var(--i) - 1) * 6.0109%)); }
.js [data-namen].ist-sichtbar .namen__name b { color: var(--gold); transition-delay: calc(.2s + var(--i) * .35s); }
.js [data-namen].ist-sichtbar .schriftzug__teil {
  opacity: 1;
  translate: none;
  transform: none;
  transition: opacity .7s var(--kurve), translate .7s var(--kurve), transform .8s var(--kurve-weich);
  transition-delay: calc(1.25s + var(--i) * .22s), calc(1.25s + var(--i) * .22s), 2.3s;
}

@media (min-width: 60rem) {
  .namen__raster { grid-template-columns: 1.15fr 1fr; }
}

/* Zitat: schwarz mit goldener Schrift (Kundin, 07.10.2026). Goldene
   Haarlinien trennen es vom schwarzen Abschnitt darüber. */
.zitat {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: var(--nacht);
  color: var(--gold);
  border-block: 1px solid rgba(215, 181, 109, .3);
  overflow: hidden;
  --fokus: var(--gold);
}
.zitat figure { margin: 0 auto; text-align: center; }
.zitat blockquote { margin: 0; }
.zitat__text {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 1.2rem + 4vw, 4.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}
.zitat__text::before { content: "„"; }
.zitat__text::after { content: "“"; }
.zitat figcaption {
  margin-top: 1.5rem;
  color: var(--gold-hell);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.zitat figcaption::before { content: "— "; }
.zitat__zeichen {
  position: absolute;
  right: -2rem;
  bottom: -5rem;
  width: clamp(14rem, 30vw, 24rem);
  height: auto;
  color: rgba(215, 181, 109, .08);
  z-index: -1;
}
.js .zitat__text .wort { display: inline-block; opacity: 0; transform: translateY(.4em); }
.js .zitat.ist-sichtbar .zitat__text .wort {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--kurve), transform .6s var(--kurve);
  transition-delay: calc(var(--i) * 85ms);
}
/* Am Desktop dezenter (Kundin, 07.10.2026): kleinere, leichtere Schrift,
   schmaleres Band. Handys bleiben unverändert, auch quer (bis 1023 px). */
@media (min-width: 64rem) {
  .zitat { padding-block: clamp(3.75rem, 5.5vw, 5rem); }
  .zitat__text { font-size: clamp(2.35rem, 1.5rem + 1.35vw, 2.75rem); font-weight: 400; }
  .zitat .zitat__zeichen { width: clamp(14rem, 19vw, 17rem); bottom: -3.5rem; }
}

/* Stimmen aus dem Gästebuch.
   Überbreite am Handy vermeiden: Die verborgenen Stimmen liegen 1,5rem nach
   rechts versetzt (clip), und die Spalte darf nicht mit der Punktreihe
   wachsen (minmax). Die Punkte rücken bei Bedarf zusammen, die Pfeile
   bleiben rund. */
.stimmen { overflow-x: clip; }
.stimmen__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.stimmen__kopf .knopf-reihe { margin-top: 1.75rem; }
.stimmen__karussell { position: relative; }
.stimmen__zeichen { width: 3.5rem; height: auto; margin-bottom: 1rem; color: var(--rot); }
.stimmen__liste { display: grid; margin: 0; padding: 0; list-style: none; touch-action: pan-y pinch-zoom; }
.stimme { margin: 0; }
.stimme blockquote {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.05rem + .75vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
}
.stimme blockquote p + p { margin-top: .6em; }
.stimme__name { margin-top: 1.25rem; color: var(--tinte-leise); }
.stimme__name strong { color: var(--tinte); font-weight: 700; }
.kein-js .stimme + .stimme { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--linie); }

.js .stimmen__liste .stimme {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity .55s var(--kurve), transform .55s var(--kurve), visibility 0s .55s;
}
.js .stimmen__liste .stimme.ist-aktiv {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--kurve) .1s, transform .55s var(--kurve) .1s, visibility 0s;
}
.js .stimmen__liste .stimme.ist-aktiv.von-links { transform: none; }
.js .stimmen__liste .stimme.geht-rechts { transform: translateX(1.5rem); }
.js .stimmen__liste .stimme.geht-links { transform: translateX(-1.5rem); }

.stimme__text--gekuerzt blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stimmen__steuerung { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.stimmen__steuerung[hidden] { display: none; }
.rund-knopf {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1.5px solid var(--tinte);
  border-radius: 50%;
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  transition: background-color var(--schnell), color var(--schnell), transform var(--schnell) var(--kurve);
}
.rund-knopf:hover { background: var(--tinte); color: var(--papier); }
.rund-knopf:active { transform: scale(.94); }
.rund-knopf .symbol { width: 1.15rem; height: 1.15rem; }
.stimmen__steuerung .rund-knopf { flex: none; }
.stimmen__punkte { display: flex; gap: .35rem; min-width: 0; margin-inline: .5rem; }
.stimmen__punkt {
  width: 2rem;
  height: 2.9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.stimmen__punkt::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: .55rem; height: .55rem;
  background: var(--tinte-leise);
  opacity: .35;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: opacity var(--schnell), background-color var(--schnell), transform var(--mittel) var(--kurve);
}
.stimmen__punkt.ist-aktiv::before { opacity: 1; background: var(--rot); transform: translate(-50%, -50%) rotate(45deg) scale(1.3); }

/* Anführungszeichen zeichnet sich */
.js .stimmen__zeichen path { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--kurve) .2s; }
.js .stimmen.ist-sichtbar .stimmen__zeichen path { clip-path: inset(0 0 0 0); }

@media (min-width: 60rem) {
  .stimmen__raster { grid-template-columns: .8fr 1.2fr; align-items: start; }
}

/* ---------------------------------------------------------------------
   8  Seitenkopf der Unterseiten
   --------------------------------------------------------------------- */
.seitenkopf { position: relative; background: var(--nacht); color: var(--creme); --fokus: var(--gold); }
.seitenkopf__bild {
  position: relative;
  height: clamp(11rem, 34vh, 26rem);
  height: clamp(11rem, 34svh, 26rem);
  overflow: hidden;
  background: var(--nacht-2);
}
.seitenkopf__bild picture, .seitenkopf__bild img { width: 100%; height: 100%; }
.seitenkopf__bild img { object-fit: cover; transform: scale(1.06); }
.js .seitenkopf__bild img { animation: kopf-zoom 1.8s var(--kurve) forwards; }
@keyframes kopf-zoom { from { transform: scale(1.14); } to { transform: scale(1.04); } }

.seitenkopf__band {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(215, 181, 109, .45);
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 4.4vw, 3.25rem);
}
.seitenkopf h1 { margin-bottom: .35em; color: #fff; }
.seitenkopf__text { max-width: 52rem; margin: 0; color: var(--hell-leise); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
.seitenkopf--ohne-bild .seitenkopf__band { border-top: 0; padding-top: clamp(2.5rem, 6vw, 4rem); }

.js .seitenkopf__band .kicker,
.js .seitenkopf__band h1,
.js .seitenkopf__band .seitenkopf__text {
  animation: hoch .7s var(--kurve) both;
}
.js .seitenkopf__band h1 { animation-delay: .08s; }
.js .seitenkopf__band .seitenkopf__text { animation-delay: .16s; }
@keyframes hoch { from { opacity: 0; transform: translateY(14px); } }

/* ---------------------------------------------------------------------
   9  Menüs
   --------------------------------------------------------------------- */
.menues-intro { display: grid; gap: 2rem; }
.menues-intro__fakten {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menues-intro__fakten li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-top: 2px solid var(--rot);
  background: var(--creme);
}
.menues-intro__fakten .symbol { width: 1.75rem; height: 1.75rem; color: var(--rot); }
.menues-intro__fakten strong { display: block; font-family: var(--schrift-titel); font-size: 1.15rem; line-height: 1.2; }
.menues-intro__fakten span { color: var(--tinte-leise); font-size: .95rem; }

@media (min-width: 60rem) {
  .menues-intro { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; }
}

/* Filter */
.filter {
  position: sticky;
  top: calc(var(--kopf-hoehe) - 14px);
  z-index: 20;
  background: rgba(248, 239, 221, .96);
  border-block: 1px solid var(--linie);
  backdrop-filter: blur(6px);
}
.kein-js .filter { display: none; }
.filter__innen {
  display: flex;
  gap: .5rem;
  padding-block: .7rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter__innen::-webkit-scrollbar { display: none; }
.filter__knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 2.75rem;
  padding: .45rem .9rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--schnell), color var(--schnell), border-color var(--schnell), transform var(--schnell) var(--kurve);
}
.filter__knopf:hover { border-color: var(--tinte); }
.filter__knopf:active { transform: scale(.96); }
.filter__knopf[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.filter__knopf--vegan[aria-pressed="true"] { background: #2c5a28; border-color: #2c5a28; }
.filter__knopf .symbol { width: 1.05em; height: 1.05em; }
.filter__trenner { flex: none; width: 1px; margin-inline: .25rem; background: var(--linie); }

.menue-gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + 4.5rem); }
.menue-gruppe + .menue-gruppe { margin-top: clamp(3rem, 6vw, 4.5rem); }
.menue-gruppe[hidden] { display: none; }
.menue-gruppe__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.25rem; }
.menue-gruppe__kopf h2 { margin: 0; }
.menue-gruppe__kopf::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.menue-liste { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.menue-liste > li[hidden] { display: none; }

.menue {
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: 0 1px 0 var(--linie), 0 12px 28px -24px rgba(17, 14, 12, .5);
  transition: box-shadow var(--mittel);
}
.menue[open] { box-shadow: 0 1px 0 var(--linie), 0 22px 40px -26px rgba(17, 14, 12, .55); }
.menue__kopf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem 1rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
  cursor: pointer;
  list-style: none;
}
.menue__kopf::-webkit-details-marker { display: none; }
.menue__titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
}
.menue__titel .symbol--raute { width: .55em; height: .55em; color: var(--rot); flex: none; align-self: center; }
.menue__unter { display: block; grid-column: 1; margin: 0; color: var(--tinte-leise); font-size: .95rem; }
.menue__merkmale { display: inline-flex; gap: .35rem; }
.menue__rechts { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .9rem; }
.menue__preis-kurz { text-align: right; line-height: 1.15; white-space: nowrap; }
.menue__preis-kurz strong { display: block; color: var(--rot); font-family: var(--schrift-titel); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.menue__preis-kurz span { color: var(--tinte-leise); font-size: .8rem; }
.menue__preis-kurz .menue__mwst { display: block; }
.menue__auf {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--creme);
  color: var(--rot);
  transition: transform var(--mittel) var(--kurve), background-color var(--schnell), color var(--schnell);
}
.menue__auf .symbol { width: 1.1rem; height: 1.1rem; }
.menue__kopf:hover .menue__auf { background: var(--rot); color: #fff; }
.menue[open] .menue__auf { transform: rotate(135deg); background: var(--rot); color: #fff; }
.menue__auf-text { position: absolute; }

@media (max-width: 34rem) {
  .menue__preis-kurz { display: none; }
}

.menue__inhalt { padding: 0 clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem); }
.menue__abschnitte { columns: 1; column-gap: 3rem; }
@media (min-width: 52rem) {
  .menue__abschnitte--zwei { columns: 2; }
}
.menue-abschnitt { margin-bottom: 1.5rem; }
.menue-abschnitt__titel { break-after: avoid; }
.posten li { break-inside: avoid; }
.menue-abschnitt__titel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--linie);
  color: var(--rot);
  font-family: var(--schrift-titel);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 600;
}
.menue-abschnitt__einheit { color: var(--tinte-leise); font-family: var(--schrift-text); font-size: .85rem; font-style: normal; font-weight: 600; }
.posten { list-style: none; margin: 0; padding: 0; }
.posten li { padding-block: .35rem; }
.posten__zeile { display: flex; align-items: baseline; gap: .5rem; }
.posten__name { font-weight: 500; }
.posten__name:has(+ .posten__beschreibung) { font-weight: 700; }
.posten__beschreibung { color: var(--tinte-leise); }
.posten__name + .posten__beschreibung::before { content: " – "; }
/* Punktlinie zum Preis wie auf einer gedruckten Karte */
.posten__punkte { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted rgba(35, 27, 22, .28); transform: translateY(-.3em); }
.posten__preis { color: var(--tinte); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten__oder { display: block; margin-top: .3rem; color: var(--gold-dunkel); font-family: var(--schrift-titel); font-style: italic; }

.menue__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}
.preisschild {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.preisschild__stempel {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 6.6rem;
  height: 6.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  text-align: center;
  line-height: 1.05;
  box-shadow: inset 0 0 0 3px var(--rot), inset 0 0 0 5px rgba(255, 255, 255, .55);
}
.preisschild__stempel strong { display: block; font-family: var(--schrift-titel); font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.preisschild__stempel span { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.preisschild__hinweis { margin: 0; color: var(--tinte-leise); max-width: 26ch; }
.preisschild__mwst { display: block; color: var(--tinte); }
.js .menue[open] .preisschild__stempel { animation: stempel .55s var(--kurve) .15s both; }
@keyframes stempel {
  0% { transform: scale(.4) rotate(-20deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(4deg); opacity: 1; }
  100% { transform: none; }
}

.menue-hinweise { display: grid; gap: 2rem; }
.menue-hinweise__kasten { padding: clamp(1.25rem, 3vw, 2rem); background: var(--creme); border-top: 2px solid var(--rot); }
.menue-hinweise__pdf { display: inline-flex; align-items: center; gap: .6rem; }
@media (min-width: 60rem) {
  .menue-hinweise { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.menues-leer { padding: 2rem; background: var(--creme); text-align: center; }

/* Menüfotos: Titelfoto am linken Rand des Kopfes. Beim Aufklappen setzt
   sich die Fotospalte nach unten fort, wie auf den Menüseiten der
   Präsentationsmappe 2011. Auf dem Handy stehen die weiteren Fotos als
   Reihe über dem Menütext. */
.menue--foto { --foto-b: 5.75rem; }
.menue--foto .menue__kopf {
  position: relative;
  align-content: center;   /* Titel und Untertitel beisammen, mittig neben dem Foto */
  min-height: var(--foto-b);
  padding-left: calc(var(--foto-b) + .9rem);
}
.menue__foto {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--foto-b);
  overflow: hidden;
  background: var(--creme);
}
.menue__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--kurve);
}
.menue__kopf:hover .menue__foto img { transform: scale(1.06); }
.menue__fotos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 3px calc(-1 * clamp(1rem, 2.5vw, 1.5rem)) 1.25rem;
}
.menue__fotos img { width: 100%; }
@media (max-width: 47.99rem) {
  .menue--foto .menue__titel .symbol--raute { display: none; }
  /* Nur hier zuschneiden: am Desktop gilt das Format aus width/height,
     sonst hätten die Fotos vor dem Laden keine Höhe */
  .menue__fotos img { aspect-ratio: 4 / 3; object-fit: cover; }
  .menue__fotos picture:only-child img { aspect-ratio: 2 / 1; }   /* ein Foto allein nicht so hoch */
}
@media (min-width: 48rem) {
  .menue--foto { --foto-b: clamp(9rem, 3rem + 10vw, 12rem); --foto-luft: clamp(1.25rem, 2.5vw, 1.75rem); }
  .menue--foto .menue__kopf { min-height: 7.5rem; padding-left: calc(var(--foto-b) + var(--foto-luft)); }
  .menue--foto .menue__inhalt {
    display: grid;
    grid-template-columns: var(--foto-b) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--foto-luft);
    padding-left: 0;
  }
  .menue--foto .menue__inhalt > * { grid-column: 2; }
  /* Spalte unter dem Titelfoto; Fotos in ihrem eigenen Format */
  .menue--foto .menue__fotos {
    grid-column: 1;
    grid-row: 1 / 4;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    align-content: start;
    margin: 3px 0 0;
  }
  .menue--foto .menue__abschnitte { padding-top: 1rem; }
}

/* ---------------------------------------------------------------------
   10  Service
   --------------------------------------------------------------------- */
.zweispaltig { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 56rem) {
  .zweispaltig { grid-template-columns: 1.1fr .9fr; }
  .zweispaltig--bild-links { grid-template-columns: .9fr 1.1fr; }
  .zweispaltig--bild-links > :first-child { order: 0; }
}
.foto-rahmen { position: relative; margin: 0; }
.foto-rahmen__innen { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); box-shadow: var(--schatten); }
.foto-rahmen__innen--quer { aspect-ratio: 3 / 2; }
.foto-rahmen__innen picture, .foto-rahmen__innen img { width: 100%; height: 100%; }
.foto-rahmen__innen img { object-fit: cover; }
.foto-rahmen figcaption { margin-top: .75rem; color: var(--tinte-leise); font-size: .9rem; }

.leistungen {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.leistung {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: 0 14px 30px -26px rgba(17, 14, 12, .6);
  transition: transform var(--mittel) var(--kurve), box-shadow var(--mittel);
}
.leistung:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(17, 14, 12, .65); }
.leistung .symbol { width: 2.4rem; height: 2.4rem; margin-bottom: 1rem; color: var(--rot); }
.leistung h3 { margin-bottom: .4rem; }
.leistung p { margin: 0; color: var(--tinte-leise); }
@media (min-width: 40rem) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .leistungen { grid-template-columns: repeat(4, 1fr); } }

/* Ablauf mit Linie, die sich beim Scrollen zeichnet */
.ablauf {
  position: relative;
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}
.ablauf::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% var(--fortschritt, 100%) no-repeat, rgba(215, 181, 109, .2);
}
.schritt { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.25rem; counter-increment: schritt; }
.schritt::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--nacht);
  color: var(--gold-hell);
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 600;
  z-index: 1;
}
.schritt h3 { margin: .55rem 0 .35rem; color: #fff; }
.schritt p { margin: 0; color: var(--hell-leise); }
@media (min-width: 64rem) {
  .ablauf { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .ablauf::before {
    left: 1.6rem; right: 1.6rem; top: 1.6rem; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(var(--gold), var(--gold)) 0 0 / var(--fortschritt, 100%) 100% no-repeat, rgba(215, 181, 109, .2);
  }
  .schritt { grid-template-columns: 1fr; gap: .9rem; }
}

.anlaesse-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.anlaesse-liste li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem .45rem .7rem;
  border-radius: 999px;
  background: var(--creme);
  font-weight: 600;
}
.anlaesse-liste .symbol { width: 1.2rem; height: 1.2rem; }

/* ---------------------------------------------------------------------
   11  Geschichte
   --------------------------------------------------------------------- */
.namen--gross .namen__wort .schriftzug { width: min(100%, 46rem); }
.namen--gross .namen__raster { grid-template-columns: 1fr; text-align: center; }
.namen--gross .namen__text { max-width: 40rem; margin-inline: auto; }

.portraet { margin: 0; }
.portraet__rahmen {
  position: relative;
  max-width: 24rem;
  margin-inline: auto;
}
.portraet__rahmen img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); filter: sepia(.15) contrast(1.02); }
.portraet figcaption {
  margin-top: 1.75rem;
  text-align: center;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.15rem;
}
/* Zweites Foto (Kundin, 08.10.2026: beide Bilder): klein und versetzt vor dem
   Porträt wie ein aufgelegter Abzug, die Unterschrift rückt rechts daneben */
.portraet__zweites {
  position: absolute;
  left: -.6rem;
  bottom: -2.75rem;
  width: 46%;
  padding: .35rem;
  border-radius: calc(var(--radius) + .15rem);
  background: var(--papier);
  box-shadow: 0 14px 30px -12px rgba(17, 14, 12, .5);
}
.portraet__zweites picture { display: block; }
.portraet__rahmen .portraet__zweites img { aspect-ratio: 1; object-fit: cover; box-shadow: none; filter: none; }
/* Breite wie der Rahmen, damit die Unterschrift bündig mit dem Foto abschließt.
   Prozente beziehen sich hier auf die Spalte, daher die Obergrenze in rem. */
.portraet--paar figcaption { max-width: 24rem; margin: 1.4rem auto 0; padding-left: min(50%, 12rem); text-align: right; }
@media (min-width: 56rem) {
  .portraet__zweites { left: -3rem; bottom: -3rem; width: 54%; }
  .portraet--paar figcaption { padding-left: min(54%, 13rem); }
}

.zeitstrahl {
  position: relative;
  display: grid;
  gap: 2.25rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.zeitstrahl::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--rot), var(--rot)) 0 0 / 100% var(--fortschritt, 100%) no-repeat, rgba(174, 15, 10, .15);
}
.station { position: relative; padding-left: 2.75rem; }
.station::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 1.15rem;
  height: 1.15rem;
  background: var(--papier);
  border: 2px solid var(--rot);
  transform: rotate(45deg);
  transition: background-color .5s var(--kurve);
}
.station.ist-sichtbar::before,
.kein-js .station::before { background: var(--rot); }
.station h3 { margin-bottom: .3rem; }
.station p { margin: 0; color: var(--tinte-leise); }

.werte {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--rot);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.werte__gross {
  margin: 0 0 .75rem;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 1rem + 4.5vw, 4.4rem);
  font-weight: 600;
  line-height: 1.1;
}
.werte__text { max-width: 40rem; margin: 0 auto; color: #fde9e7; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); }
.js .werte__gross .wort { display: inline-block; opacity: 0; transform: translateY(.5em) scale(.96); }
.js .werte.ist-sichtbar .werte__gross .wort {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--kurve), transform .6s var(--kurve);
  transition-delay: calc(var(--i) * .3s);
}

.gruss { text-align: center; }
.gruss p { margin: 0 auto; max-width: 36rem; }
.gruss__unterschrift {
  margin-top: 1rem !important;
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-style: italic;
  color: var(--rot);
}
.gruss .symbol--herz { width: 1.6rem; height: 1.6rem; margin: 1.25rem auto 0; color: var(--rot); }
.js .gruss.ist-sichtbar .symbol--herz { animation: herzschlag 1.4s var(--kurve) .6s 2; }
@keyframes herzschlag {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.25); }
  40% { transform: scale(.95); }
  60% { transform: scale(1.15); }
}

/* ---------------------------------------------------------------------
   12  Fotos (Diashow)
   --------------------------------------------------------------------- */
.diashow { background: var(--nacht); color: var(--creme); --fokus: var(--gold); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.diashow__buehne {
  position: relative;
  height: clamp(18rem, 68vh, 46rem);
  height: clamp(18rem, 68svh, 46rem);
  margin-inline: auto;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}
.diashow__folie {
  position: absolute;
  inset: 0;
  display: grid;
  /* Feste Zeile, sonst wächst sie mit dem Bild und max-height: 100% greift nicht */
  grid-template: 100% / 100%;
  place-items: center;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--kurve-weich), transform .9s var(--kurve), visibility 0s .9s;
}
.diashow__folie.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .9s var(--kurve-weich), transform .9s var(--kurve), visibility 0s; z-index: 1; }
/* Nur die aktuelle Folie und ihre Nachbarn liegen im Layout – so lädt der
   Browser die übrigen Fotos erst, wenn sie gebraucht werden. */
.js .diashow__folie { display: none; }
.js .diashow__folie.ist-nah,
.js .diashow__folie.ist-aktiv,
.js .diashow__folie.war-vorne { display: grid; }
.diashow--schieben .diashow__folie { transform: translateX(8%); }
.diashow--schieben .diashow__folie.ist-aktiv { transform: none; }
.diashow--schieben .diashow__folie.war-vorne { transform: translateX(-8%); }
.diashow__folie picture { display: contents; }
/* <source> würde sonst als Grid-Element die erste Zelle belegen und das Bild in
   eine zweite, unbegrenzte Zeile schieben. Die Bildauswahl per srcset bleibt. */
.diashow__folie source { display: none; }
.diashow__folie img {
  width: auto;
  height: auto;
  max-width: min(100%, var(--max-b, 100%));
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.diashow--zoom .diashow__folie.ist-aktiv img { animation: diashow-zoom var(--folie-dauer, 6s) linear forwards; }
@keyframes diashow-zoom { from { transform: scale(1); } to { transform: scale(1.045); } }
.diashow.ist-pausiert .diashow__folie.ist-aktiv img { animation-play-state: paused; }

.diashow__leiste {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.diashow__titel { margin: 0; font-family: var(--schrift-titel); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); min-height: 1.5em; }
.diashow__zaehler { color: var(--hell-leise); font-size: .9rem; font-variant-numeric: tabular-nums; }
.diashow__knoepfe { display: flex; gap: .5rem; }
.diashow .rund-knopf { border-color: rgba(248, 239, 221, .4); color: var(--creme); }
.diashow .rund-knopf:hover { background: var(--gold); border-color: var(--gold); color: var(--nacht); }
.diashow__fortschritt { height: 2px; margin-top: 1rem; background: rgba(248, 239, 221, .15); overflow: hidden; }
.diashow__fortschritt span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.diashow.laeuft .diashow__fortschritt span { animation: fortschritt var(--folie-dauer, 6s) linear forwards; }
.diashow.ist-pausiert .diashow__fortschritt span { animation-play-state: paused; }
.diashow .symbol--abspielen { display: none; }
.diashow.ist-pausiert .symbol--pause { display: none; }
.diashow.ist-pausiert .symbol--abspielen { display: block; }

.diashow__daumen {
  display: flex;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: .25rem 0 .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--nacht-3) transparent;
}
.diashow__daumen li { flex: none; scroll-snap-align: center; }
.diashow__daumen button {
  display: block;
  width: 5.5rem;
  height: 3.9rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: var(--nacht-2);
  opacity: .55;
  cursor: pointer;
  overflow: hidden;
  transition: opacity var(--schnell), border-color var(--schnell), transform var(--schnell) var(--kurve);
}
.diashow__daumen button:hover { opacity: .9; }
.diashow__daumen button[aria-current="true"] { opacity: 1; border-color: var(--gold); transform: translateY(-2px); }
.diashow__daumen img { width: 100%; height: 100%; object-fit: cover; }

/* Vollbild */
.diashow:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
.diashow:fullscreen .diashow__buehne { height: 80vh; width: 100%; }
.diashow:fullscreen .diashow__daumen { justify-content: center; }

/* Handy hochkant: quadratische Fläche. Die Galerie hat etwa gleich viele Hoch- und
   Querformate; in der hohen Fläche stand ein Querformat klein zwischen zwei großen
   schwarzen Balken (über 300 px leer). */
@media (max-width: 47.99rem) and (orientation: portrait) {
  .js .diashow:not(:fullscreen) .diashow__buehne { height: auto; aspect-ratio: 1; max-height: 68vh; max-height: 68svh; }
}

/* Ohne JavaScript: alle Fotos als Raster */
.kein-js .diashow__buehne { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.kein-js .diashow__folie { position: static; opacity: 1; visibility: visible; display: block; }
.kein-js .diashow__folie img { max-height: none; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kein-js .diashow__folie figcaption.nur-vorleser { position: static !important; width: auto; height: auto; margin: .4rem 0 0; clip: auto; white-space: normal; color: var(--hell-leise); font-size: .9rem; }
.kein-js .diashow__leiste,
.kein-js .diashow__daumen,
.kein-js .diashow__fortschritt { display: none; }

/* ---------------------------------------------------------------------
   13  Gästebuch
   --------------------------------------------------------------------- */
.gaestebuch-kopf { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2rem, 5vw, 3rem); }
@media (min-width: 52rem) { .gaestebuch-kopf { grid-template-columns: 1fr auto; } }
.gaestebuch-kopf__zahl { margin: 0; color: var(--tinte-leise); }
.gaestebuch-kopf__zahl strong { color: var(--rot); font-family: var(--schrift-titel); font-size: 1.6rem; }

.eintraege { columns: 1; column-gap: clamp(1rem, 2.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 44rem) { .eintraege { columns: 2; } }
@media (min-width: 72rem) { .eintraege { columns: 3; } }
.eintrag {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.25rem, 3vw, 1.6rem);
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: 0 14px 30px -26px rgba(17, 14, 12, .55);
}
.eintrag blockquote { margin: 0; }
.eintrag blockquote p { margin: 0; }
.eintrag blockquote p + p { margin-top: .7em; }
.eintrag footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); font-size: .95rem; }
.eintrag cite { font-style: normal; font-weight: 700; }
.eintrag time { color: var(--tinte-leise); }

.mehr-laden { margin-top: 2rem; text-align: center; }
.blaettern { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }

.eintrag-formular {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: var(--schatten);
}
.eintrag-formular summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}
.eintrag-formular summary::-webkit-details-marker { display: none; }
.eintrag-formular summary h2 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.eintrag-formular[open] summary { margin-bottom: 1.25rem; }
.eintrag-formular[open] .menue__auf { transform: rotate(135deg); background: var(--rot); color: #fff; }

/* ---------------------------------------------------------------------
   14  Kontakt und Formulare
   --------------------------------------------------------------------- */
.kontakt-raster { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 60rem) { .kontakt-raster { grid-template-columns: .85fr 1.15fr; align-items: start; } }

.kontaktdaten { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.kontaktdaten li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: center; }
.kontaktdaten .symbol {
  width: 2.6rem;
  height: 2.6rem;
  padding: .6rem;
  border-radius: 50%;
  background: var(--creme);
  color: var(--rot);
}
.kontaktdaten a { font-weight: 650; font-variant-numeric: tabular-nums; }
.kontaktdaten small { display: block; color: var(--tinte-leise); font-size: .85rem; }
.anruf-kasten {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--rot);
  background: var(--creme);
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.1rem;
}

.formular { display: grid; gap: 1.1rem; }
.formular p, .formular .feld { margin: 0; }
.formular__kasten {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: var(--schatten);
}
.formular__kasten h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.feld { display: grid; gap: .35rem; align-content: start; }
.feld label, .feld legend { font-weight: 650; }
.feld .pflicht { color: var(--rot); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1.5px solid #cbbfb2;
  border-radius: var(--radius);
  background: #fff;
  color: var(--tinte);
  font: inherit;
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
.feld input:not([type="checkbox"]):not([type="radio"]),
.feld select { height: 3.25rem; }
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus,
.feld select:focus,
.feld textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(174, 15, 10, .18); }
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--rot); }
.feld__hilfe { color: var(--tinte-leise); font-size: .9rem; }
.feld-reihe { display: grid; gap: 1.1rem; }
@media (min-width: 36rem) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .feld-reihe--drei { grid-template-columns: 1fr 1fr 1fr; } }
fieldset.feld { margin: 0; padding: 0; border: 0; }
.auswahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.auswahl label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem .95rem;
  border: 1.5px solid #cbbfb2;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--schnell), background-color var(--schnell);
}
.auswahl input { width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; accent-color: var(--rot); }
.auswahl label:has(input:checked) { border-color: var(--rot); background: #fbeceb; }
.haken { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-weight: 400; }
.haken input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: .2rem 0 0; accent-color: var(--rot); }
.datenschutz-hinweis { color: var(--tinte-leise); font-size: .9rem; }
.honigtopf { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border-left: 4px solid;
}
.meldung--gut { background: #eaf3e4; border-color: #3f7a37; color: #1f3d1b; }
.meldung--fehler { background: #fbeceb; border-color: var(--rot); color: #5c0b07; }
.meldung ul { margin: .4rem 0 0; }
.meldung .symbol { width: 1.5rem; height: 1.5rem; }
.js .meldung--gut { animation: hoch .6s var(--kurve) both; }

/* ---------------------------------------------------------------------
   15  Rechtstexte
   --------------------------------------------------------------------- */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { margin-top: 2.25em; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem); }
.rechtstext h3 { margin-top: 1.75em; font-size: 1.2rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext ol { padding-left: 1.4em; }   /* „1. Liste“ aus dem Editor der Verwaltung */
.rechtstext li + li { margin-top: .35em; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext__stand { margin-top: 3rem; color: var(--tinte-leise); font-size: .9rem; }

/* ---------------------------------------------------------------------
   16  Kontakt-Aufruf und Fuß
   --------------------------------------------------------------------- */
.aufruf__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.aufruf__telefon {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin: 1.1rem 0 1.4rem;
  padding-block: .35em;
  color: var(--gold) !important;
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
}
.aufruf__telefon .symbol { width: .8em; height: .8em; transition: transform .5s var(--kurve); }
.aufruf__telefon:hover { color: #fff !important; }
.aufruf__telefon:hover .symbol { animation: klingeln .7s var(--kurve); }
@keyframes klingeln {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg); }
  40% { transform: rotate(13deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(5deg); }
}
.aufruf__daten { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.aufruf__daten li { padding-top: 1rem; border-top: 1px solid var(--linie-hell); }
.aufruf__daten small { display: block; margin-bottom: .15rem; color: var(--hell-leise); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (min-width: 60rem) { .aufruf__raster { grid-template-columns: 1.4fr 1fr; } }

.fuss {
  position: relative;
  isolation: isolate;
  background: var(--nacht-tief);
  color: var(--hell-leise);
  font-size: .97rem;
  --fokus: var(--gold);
}
.fuss a { color: var(--creme); text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); text-decoration: underline; }
.fuss__raster { display: grid; gap: 2.25rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
.fuss__logo img { width: 12rem; height: auto; margin-bottom: 1rem; }
.fuss__marke p { max-width: 30ch; margin: 0; }
.fuss__titel {
  margin-bottom: 1rem;
  color: var(--gold);
  font-family: var(--schrift-text);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.fuss__liste { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fuss__liste li { display: flex; align-items: center; gap: .6rem; }
.fuss__liste .symbol { width: 1.1rem; height: 1.1rem; color: var(--gold); }
.fuss__leiste { border-top: 1px solid var(--linie-hell); }
.fuss__leiste-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.25rem;
  font-size: .9rem;
}
.fuss__leiste p { margin: 0; }
.fuss__leiste ul { display: flex; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

/* 404 */
.nicht-gefunden { text-align: center; }
.nicht-gefunden__zahl { font-family: var(--schrift-titel); font-size: clamp(5rem, 3rem + 10vw, 9rem); font-style: italic; color: var(--rot); line-height: 1; margin: 0; }
.nicht-gefunden .knopf-reihe { justify-content: center; margin-top: 2rem; }

/* ---------------------------------------------------------------------
   17  Einblenden und Bewegung
   --------------------------------------------------------------------- */
.js [data-einblenden] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--kurve), transform .5s var(--kurve);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-einblenden].ist-sichtbar { opacity: 1; transform: none; }
.js [data-einblenden="links"] { transform: translateX(-24px); }
.js [data-einblenden="rechts"] { transform: translateX(24px); }
.js [data-einblenden="zoom"] { transform: scale(.96); }

/* Parallaxe: Bild bewegt sich etwas langsamer als die Seite */
[data-parallaxe] img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-einblenden] { transform: none; }
  .js .buehne__bild img, .seitenkopf__bild img { animation: none !important; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------------
   18  Druck
   --------------------------------------------------------------------- */
@media print {
  .kopf, .vollmenue, .fuss__leiste ul, .buehne__steuerung, .filter, .aufruf,
  .diashow__leiste, .diashow__daumen, .menue__auf, .sprungmarke, .eintrag-formular { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .abschnitt, .abschnitt--nacht, .seitenkopf, .seitenkopf__band, .zitat, .werte { background: #fff !important; color: #000 !important; padding-block: 1rem; }
  .seitenkopf__bild, .buehne__bilder { display: none; }
  .seitenkopf h1, .schritt h3 { color: #000; }
  .menue { box-shadow: none; break-inside: avoid; }
  .menue__inhalt { display: block !important; }
  .menue__foto, .menue__fotos, .menue-karte__foto { display: none !important; }
  /* Dunkle Flächen druckt der Browser nicht – Gold auf Weiß wäre kaum lesbar */
  .zahl, .kategorie__link, .kategorie__band { background: none !important; box-shadow: none; }
  .zahl *, .kategorie__link *, .zitat figcaption { color: #000 !important; }
  .menue--foto .menue__kopf { min-height: 0; padding-left: clamp(1rem, 2.5vw, 1.5rem); }
  .menue--foto .menue__inhalt { padding-left: clamp(1rem, 2.5vw, 1.5rem); }
  a { color: #000; text-decoration: none; }
  .rechtstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  [data-einblenden] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   19  Anlass-Seiten, Fragen, Brotkrümel, Schnellkontakt
       Bausteine für Suchmaschinen und Anfragen: Jede Anlass-Seite
       beantwortet eine Suche vollständig und endet mit einer Anfrage.
   --------------------------------------------------------------------- */

/* Kontakt in der Kopfleiste als Knopf – die wichtigste Handlung */
.kopf__nav .kopf__anfrage { margin-left: .35rem; background: var(--rot); color: #fff; }
.kopf__nav .kopf__anfrage:hover { background: var(--rot-tief); }
.kopf__nav .kopf__anfrage::after { background: #fff; }
.kopf__nav .kopf__anfrage[aria-current="page"] { color: #fff; }

/* Anlass-Seiten im Vollmenü */
.vollmenue__titel {
  margin: 1.75rem 0 .7rem;
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vollmenue__nav .vollmenue__anlaesse { display: flex; flex-wrap: wrap; gap: .5rem; }
.vollmenue__nav .vollmenue__anlaesse li { border: 0; }
.vollmenue__nav .vollmenue__anlaesse a {
  display: inline-flex;
  min-height: 2.75rem;
  padding: .45rem 1rem;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
}
.vollmenue__nav .vollmenue__anlaesse a::after { content: none; }
.vollmenue__nav .vollmenue__anlaesse a:hover,
.vollmenue__nav .vollmenue__anlaesse a[aria-current="page"] { border-color: var(--gold); color: var(--gold-hell); }

/* Brotkrümel im Seitenkopf */
.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .4rem;
  margin: -.6rem 0 .4rem;
  padding: 0;
  list-style: none;
  color: var(--hell-leise);
  font-size: .875rem;
}
.brotkrumen li { display: inline-flex; align-items: center; gap: .4rem; }
.brotkrumen li + li::before { content: "›"; color: var(--gold); }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--hell-leise); text-decoration: none; }
.brotkrumen a:hover { color: #fff; text-decoration: underline; }

/* Startseite: Karten der Anlass-Seiten */
/* Leitsatz unter der Überschrift: rückt an sie heran, jede Zeile beginnt neu */
.leitsatz {
  margin: -.3em 0 1.3em;
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 1.05rem + .75vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--rot);
  text-wrap: balance;
}
.leitsatz span { display: block; }
.anlass-karten__raster { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.anlass-karte__link {
  display: grid;
  grid-template-columns: clamp(5.5rem, 20vw, 7.25rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.25rem);
  height: 100%;
  padding: .7rem 1.1rem .7rem .7rem;
  border-top: 3px solid var(--rot);
  border-radius: var(--radius);
  background: var(--creme);
  color: var(--tinte);
  text-decoration: none;
  box-shadow: 0 14px 30px -26px rgba(17, 14, 12, .6);
  transition: transform var(--mittel) var(--kurve), box-shadow var(--mittel), background-color var(--mittel);
}
.anlass-karte__link:hover { color: var(--tinte); background: var(--creme-2); transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(17, 14, 12, .7); }
.anlass-karte__bild { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--nacht-3); }
.anlass-karte__bild picture, .anlass-karte__bild img { width: 100%; height: 100%; }
.anlass-karte__bild img { object-fit: cover; transition: transform .9s var(--kurve); }
.anlass-karte__link:hover .anlass-karte__bild img { transform: scale(1.08); }
.anlass-karte__text { display: grid; gap: .2rem; }
.anlass-karte__name { font-family: var(--schrift-titel); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.2; }
.anlass-karte__zeile { color: var(--tinte-leise); font-size: .95rem; line-height: 1.4; }
.anlass-karte__link > .symbol { width: 1.3rem; height: 1.3rem; color: var(--rot); transition: transform var(--mittel) var(--kurve); }
.anlass-karte__link:hover > .symbol { transform: translateX(4px); }
@media (min-width: 40rem) {
  .anlass-karten__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anlass-karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .anlass-karten__raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .anlass-karte { grid-column: span 2; }
  .anlass-karte:nth-child(n+4),
  .anlass-karte:last-child:nth-child(odd) { grid-column: span 3; }
}

/* Anlass-Seite: Einleitung mit Eckpunkten */
.anlass-intro__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.anlass-intro__handlung { margin-top: 1.75rem; }
.anlass-punkte { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.anlass-punkte li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-top: 2px solid var(--rot);
  background: var(--creme);
}
.anlass-punkte .symbol { width: .75rem; height: .75rem; margin-top: .5rem; color: var(--rot); }
.anlass-punkte strong { display: block; font-family: var(--schrift-titel); font-size: 1.15rem; line-height: 1.25; }
.anlass-punkte span { color: var(--tinte-leise); }
.anlass-punkte .anlass-punkte__vertrauen { background: var(--nacht); border-top-color: var(--gold); }
.anlass-punkte__vertrauen strong { color: #fff; }
.anlass-punkte .anlass-punkte__vertrauen span { color: var(--hell-leise); }
.anlass-punkte .anlass-punkte__vertrauen .symbol { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: var(--rot-hell); }
@media (min-width: 60rem) {
  .anlass-intro__raster { grid-template-columns: 1.35fr 1fr; align-items: start; }
}

/* Menüs als Karten (Auszug, das ganze Menü steht auf /menues/) */
.menue-karten { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
.menue-karte {
  --karte-rand: clamp(1.25rem, 3vw, 1.6rem);
  display: flex;
  flex-direction: column;
  padding: var(--karte-rand);
  border-top: 2px solid var(--rot);
  background: var(--papier);
  box-shadow: 0 14px 30px -26px rgba(17, 14, 12, .55);
}
.menue-karte__foto {
  margin: calc(-1 * var(--karte-rand)) calc(-1 * var(--karte-rand)) 1.1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--creme);
}
.menue-karte__foto picture, .menue-karte__foto img { width: 100%; height: 100%; }
.menue-karte__foto img { object-fit: cover; }
.menue-karte__titel { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .4rem; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); }
.menue-karte__titel .symbol { flex: none; width: .55em; height: .55em; color: var(--rot); }
.menue-karte__merkmale { margin: 0 0 .5rem; }
.menue-karte__unter { margin: 0 0 .5rem; color: var(--tinte-leise); font-size: .95rem; font-style: italic; }
.menue-karte__posten { display: grid; gap: .45rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.menue-karte__posten li { position: relative; padding-left: 1.15em; line-height: 1.45; }
.menue-karte__posten li::before {
  content: "";
  position: absolute;
  left: .1em; top: .6em;
  width: .38em; height: .38em;
  background: var(--gold-dunkel);
  transform: rotate(45deg);
}
.menue-karte__mehr { margin: .6rem 0 0; color: var(--tinte-leise); font-size: .9rem; }
.menue-karte__fuss { margin-top: auto; }
.menue-karte__preis { margin: 1.1rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.menue-karte__preis strong { color: var(--rot); font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 600; }
.menue-karte__preis small { display: block; color: var(--tinte-leise); font-size: .85rem; }
.menue-karte__preis .menue-karte__mwst { color: var(--tinte); font-weight: 600; }
.menue-karte__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.knopf--klein { min-height: 2.75rem; padding: .55em 1.05em; font-size: .95rem; }
.menue-karten__hinweis { margin: 1.5rem 0 0; color: var(--tinte-leise); font-size: .92rem; }
@media (min-width: 44rem) { .menue-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .menue-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Stimmen als Karten (Anlass-Seiten) */
.stimmen-karten__kopf { display: grid; gap: .25rem; }
.stimmen-karten__kopf p { margin: 0; }
.eintraege--karten { display: grid; columns: auto; gap: clamp(1rem, 2.5vw, 1.5rem); }
.eintraege--karten .eintrag { display: flex; flex-direction: column; margin: 0; background: var(--creme); }
.eintraege--karten .eintrag footer { margin-top: auto; }
.eintraege--karten .eintrag blockquote { margin-bottom: 1rem; }
.eintrag__weiter { margin-top: .35rem; font-size: .95rem; }
@media (min-width: 52rem) { .eintraege--karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Häufige Fragen */
.fragen__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.fragen__kopf p:last-child { color: var(--tinte-leise); }
.fragen__liste { display: grid; gap: .65rem; }
.frage { border-top: 2px solid var(--rot); background: var(--papier); box-shadow: 0 14px 30px -26px rgba(17, 14, 12, .55); }
.abschnitt--papier .frage { background: var(--creme); }
.frage__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
}
.frage__kopf::-webkit-details-marker { display: none; }
.frage__titel { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.3; transition: color var(--schnell); }
.frage__kopf:hover .frage__titel { color: var(--rot); }
.frage__auf {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--linie);
  border-radius: 50%;
  color: var(--rot);
  transition: transform var(--mittel) var(--kurve), background-color var(--schnell), color var(--schnell), border-color var(--schnell);
}
.frage__auf .symbol { width: 1rem; height: 1rem; }
.frage[open] .frage__auf { transform: rotate(135deg); border-color: var(--rot); background: var(--rot); color: #fff; }
.frage__antwort { max-width: none; padding: 0 1.15rem 1.2rem; color: var(--tinte-leise); }
.frage__antwort > * { max-width: 62ch; }
@media (min-width: 60rem) {
  .fragen__raster { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .fragen__kopf { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
}

/* Weitere Anlässe und verlinkte Anlass-Pillen */
.weitere-anlaesse { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--linie); }
.weitere-anlaesse__titel { margin-bottom: 1rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.weitere-anlaesse__liste { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.anlaesse-liste li:has(> a) { padding: 0; background: none; }
.weitere-anlaesse__liste a,
.anlaesse-liste a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .45rem 1rem .45rem .75rem;
  border-radius: 999px;
  background: var(--creme);
  color: var(--tinte);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--schnell), color var(--schnell), transform var(--schnell) var(--kurve);
}
.weitere-anlaesse__liste a:hover,
.anlaesse-liste a:hover { background: var(--tinte); color: var(--papier); transform: translateY(-2px); }
.weitere-anlaesse__liste .symbol { width: 1.2rem; height: 1.2rem; }

/* Service: Liefergebiet */
.gebiet__adresse { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; margin: 1.5rem 0 0; font-weight: 600; }
.gebiet__adresse .symbol { width: 1.5rem; height: 1.5rem; color: var(--rot); }
.gebiet__adresse small { display: block; color: var(--tinte-leise); font-weight: 400; }
.gebiet__adresse small a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.menue-gruppe__mehr { font-size: .95rem; }

/* Sprungziel /menues/#menue-… : Menü kurz hervorheben */
.menue { scroll-margin-top: calc(var(--kopf-hoehe) + 4.75rem); }
.js .menue.ist-ziel { outline: 3px solid transparent; outline-offset: 4px; animation: ziel 2.2s ease .4s; }
@keyframes ziel {
  0%, 100% { outline-color: transparent; }
  25%, 60% { outline-color: rgba(174, 15, 10, .45); }
}

/* Kontakt: Ansprechpartnerin, Absenden, „So geht es weiter“ */
.ansprechpartnerin {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.1rem;
  align-items: center;
  margin: 2rem 0 0;
  padding: 1.1rem;
  border-left: 3px solid var(--rot);
  background: var(--creme);
}
.ansprechpartnerin__bild { aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--nacht-3); }
.ansprechpartnerin__bild picture, .ansprechpartnerin__bild img { width: 100%; height: 100%; }
.ansprechpartnerin__bild img { object-fit: cover; object-position: 50% 18%; }
.ansprechpartnerin figcaption { color: var(--tinte-leise); line-height: 1.45; }
.ansprechpartnerin strong { display: block; color: var(--tinte); font-family: var(--schrift-titel); font-size: 1.15rem; }
.feld-reihe__hinweis { grid-column: 1 / -1; margin-top: -.6rem !important; }
.formular__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.formular__absenden span { color: var(--tinte-leise); font-size: .9rem; }
.weiter { margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.weiter__titel { margin: 0 0 .75rem; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; }
.weiter__liste { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: weiter; }
.weiter__liste li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .7rem; align-items: start; color: var(--tinte-leise); counter-increment: weiter; }
.weiter__liste li::before {
  content: counter(weiter);
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--creme);
  color: var(--rot);
  font-family: var(--schrift-titel);
  font-weight: 700;
}
.weiter__anruf { margin: 1rem 0 0; }
.weiter__anruf a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; font-weight: 650; }
.weiter__anruf .symbol { width: 1.1rem; height: 1.1rem; }

/* Gästebuch: Bitte um eine Google-Bewertung (nur wenn der Link gesetzt ist) */
.bewertung-hinweis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem 1rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--gold-dunkel);
  background: var(--papier);
}
.bewertung-hinweis .symbol { width: 1.6rem; height: 1.6rem; color: var(--gold-dunkel); }
.bewertung-hinweis p { margin: 0; }
.bewertung-hinweis .knopf { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 48rem) {
  .bewertung-hinweis { grid-template-columns: auto 1fr auto; }
  .bewertung-hinweis .knopf { grid-column: auto; }
}

/* Fuß: Spalten, Öffnungszeiten, Instagram */
.fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.fuss__marke,
.fuss__raster > .fuss__spalte:nth-child(2),
.fuss__spalte--zeiten { grid-column: 1 / -1; }
.fuss__liste--kontakt { margin-top: 1rem; }
.fuss__marke .fuss__sozial { margin-top: .75rem; }
.fuss__sozial a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; }
.fuss__sozial .symbol { width: 1.2rem; height: 1.2rem; color: var(--gold); }

/* Öffnungszeiten (Chris, 09.10.2026): Den heutigen Tag setzt main.js auf .ist-heute. */
.fuss__zeiten { margin-top: -.2rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fuss__zeiten th,
.fuss__zeiten td { padding: .2rem 0; text-align: left; vertical-align: baseline; }
.fuss__zeiten th { padding-right: 1rem; font-weight: 400; }
.fuss__zeiten td { color: var(--creme); white-space: nowrap; }
.fuss__zeiten .ist-heute th,
.fuss__zeiten .ist-heute td { color: var(--gold-hell); font-weight: 700; }

/* Mit Öffnungszeiten (.fuss__raster--zeiten): bis 60rem Kontakt und Zeiten
   nebeneinander, bis 72rem vier Spalten unter der Marke, danach fünf. */
@media (min-width: 48rem) {
  .fuss__raster { grid-template-columns: 1.3fr 1fr 1fr; }
  .fuss__raster--zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__raster > .fuss__spalte:nth-child(2),
  .fuss__spalte--zeiten { grid-column: auto; }
}
@media (min-width: 60rem) {
  .fuss__raster--zeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .fuss__raster { grid-template-columns: 1.5fr 1.15fr 1fr 1fr; }
  .fuss__raster--zeiten { grid-template-columns: 1.4fr 1.1fr 1.1fr 1fr 1fr; }
  .fuss__marke { grid-column: auto; }
}

/* Schnellkontakt am unteren Rand – nur auf dem Handy, im Daumenbereich */
.aktionsleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .5rem var(--rand) calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(10, 8, 7, .96);
  border-top: 1px solid rgba(215, 181, 109, .35);
  box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, .55);
  --fokus: var(--gold);
  transform: translateY(110%);
  transition: transform .35s var(--kurve);
}
.aktionsleiste.ist-sichtbar,
.kein-js .aktionsleiste { transform: none; }
.aktionsleiste__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold-hell);
  font-weight: 700;
  text-decoration: none;
}
.aktionsleiste__knopf:hover { color: #fff; }
.aktionsleiste__knopf--rot { border-color: var(--rot); background: var(--rot); color: #fff; }
.aktionsleiste__knopf .symbol { width: 1.15rem; height: 1.15rem; }
.kein-js .fuss__leiste { padding-bottom: 4.5rem; }
@media (min-width: 48rem) {
  .aktionsleiste { display: none; }
  .kein-js .fuss__leiste { padding-bottom: 0; }
}

@media print {
  .aktionsleiste, .weitere-anlaesse, .brotkrumen, .frage__auf, .bewertung-hinweis { display: none !important; }
  .frage .frage__antwort { display: block !important; }
}

/* Ortsangaben nicht mitten im Namen umbrechen */
.zusammen { white-space: nowrap; }

/* ---------------------------------------------------------------------
   20  Angebot Abi-Feier (/abifeier/, Kundin 08.10.2026)
   --------------------------------------------------------------------- */
/* Am Handy steht der Preis gleich unter dem Leitsatz, am Desktop daneben */
.abi-intro__raster {
  display: grid;
  grid-template-areas: "lead" "preis" "leistung";
  gap: clamp(2rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.abi-intro__leistung { grid-area: leistung; }
.abi-preis { grid-area: preis; }
/* Der Leitsatz der Mail, gesetzt wie der Leitsatz der Startseite */
.abi-intro__lead {
  grid-area: lead;
  max-width: 34ch;
  margin: 0;
  color: var(--rot);
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  font-style: italic;
  line-height: 1.35;
  text-wrap: balance;
}

/* Preis: schwarze Karte mit Gold wie die Zahlen-Kacheln der Startseite */
.abi-preis {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--nacht);
  color: var(--creme);
  box-shadow: var(--schatten);
  --fokus: var(--gold);
}
.abi-preis__titel { color: var(--gold); }
.abi-preis__betrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0; color: var(--gold-hell); }
.abi-preis__betrag strong {
  color: var(--gold);
  font-family: var(--schrift-titel);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.abi-preis__mwst { margin: .5rem 0 0; color: var(--gold-hell); }
.abi-preis__mindest { margin: 1rem 0 1.5rem; font-weight: 700; }
@media (min-width: 60rem) {
  .abi-intro__raster { grid-template-columns: 1.3fr .85fr; grid-template-areas: "lead preis" "leistung preis"; }
  .abi-preis { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
}

/* Die vier Gänge: je zwei Fotos aus der Galerie neben der Speisenliste */
.abi-gaenge { display: grid; gap: clamp(3.5rem, 8vw, 6rem); }
.abi-gang { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.abi-gang__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.5vw, 1rem); align-items: start; }
.abi-gang__bild { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--creme-2); box-shadow: var(--schatten); }
.abi-gang__bild:nth-child(2) { margin-top: clamp(1.5rem, 5vw, 3rem); }
.abi-gang__bild picture, .abi-gang__bild img { width: 100%; height: 100%; }
.abi-gang__bild img { object-fit: cover; }
/* Eigener Abstand zur Speisenliste (Chris, 08.10.2026): .fliesstext ul hat
   sonst margin 0, die Liste klebte an der Überschrift */
.abi-gang__text h3 { margin-bottom: .65em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.abi-gang__text li + li { margin-top: .8em; }
.abi-gang__text li:has(strong) { color: var(--tinte-leise); }
.abi-gang__text li strong { display: block; color: var(--tinte); font-family: var(--schrift-titel); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 56rem) {
  .abi-gang { grid-template-columns: .95fr 1.05fr; }
  .abi-gang--gespiegelt { grid-template-columns: 1.05fr .95fr; }
  .abi-gang--gespiegelt .abi-gang__bilder { order: 2; }
}

.abi-bedingungen { display: grid; gap: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 0; list-style: none; }
.abi-bedingungen h3 { margin-bottom: .45rem; font-size: 1.2rem; }
.abi-bedingungen p { margin: 0; color: var(--tinte-leise); }
@media (min-width: 40rem) { .abi-bedingungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media print {
  .abi-gang__bilder { display: none; }
  .abi-preis { background: none !important; box-shadow: none; position: static; }
  .abi-preis * { color: #000 !important; }
}