/* Fleischerei Raabe, zweite Fassung. Farben und Logo stammen von der heutigen Seite. Gestaltung: DESIGN.md */

@font-face {
  font-family: "Rubik";
  src: url("../fonts/rubik.691cd1d9b4.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}

:root {
  --rot: #6a0c05;
  --rot-dunkel: #4f0904;
  --bordeaux: #6a0c05;
  --weiss: #ffffff;
  --grund-getoent: #f4f1ee;
  --text: #1f1c1c;
  --text-leise: #5a5353;
  --text-auf-bordeaux: #f3e3e1;
  --linie: #d9d1cd;
  --linie-hell: rgb(255 255 255 / 0.28);
  --fokus: var(--bordeaux);

  --schrift: "Rubik", system-ui, sans-serif;
  --schrift-titel: "Rubik", system-ui, sans-serif;
  --radius: 4px;
  --rand: clamp(1.25rem, 5vw, 2.5rem);
  --breite: 70rem;
  --kante: max(var(--rand), calc((100cqw - var(--breite)) / 2));
  --abstand: clamp(3rem, 8vw, 6rem);
  --titel-gross: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);

  --kopf-h: 4.5rem;
  --logo-h: 2.375rem;
  --kopf-h-klein: 4rem;
  --marke-klein: 0.86;
  --marke-schrift: 0.8rem;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --kurve: var(--ease-out);
  --dauer-ui: 260ms;
  --dauer-hover-bild: 700ms;
  --dauer-druck: 200ms;
  --dauer-kurz: 200ms;
  --dauer-kopf: var(--dauer-hover-bild);
  /* Weich an- und auslaufend: Kopfzeile, Logo und Schrift bewegen sich gemeinsam und ohne Ruck */
  --kurve-kopf: cubic-bezier(0.45, 0, 0.2, 1);
  --dauer-menue: 400ms;
  --dauer-auftritt: 600ms;
  --dauer-bild: var(--dauer-hover-bild);
  --stufe: 55ms;
  --weg: 16px;
}

@media (min-width: 68rem) {
  :root {
    --kopf-h: 5.25rem;
    --logo-h: 3rem;
    --kopf-h-klein: 4.25rem;
    --marke-schrift: 0.85rem;
  }
}

@view-transition {
  navigation: auto;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Nichts darf die Seite seitlich verschieben (Wischgeste, bewegte Elemente) */
html,
body { overflow-x: clip; overscroll-behavior-x: none; }

/* Mit Skript rollt seite.js selbst zu Sprungzielen (eine Kurve, in allen Browsern gleich). */
html.js { scroll-behavior: auto; }

[id] { scroll-margin-top: calc(var(--kopf-h-klein) + 1rem); }

html:has(.kopf[data-offen]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* Fuß bleibt auf kurzen Seiten unten (Muster wie TJCreate: Hülle min-height 100vh, main flex 1 0 auto) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main { flex: 1 0 auto; }

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

h1,
h2,
h3,
p,
ul,
dl,
dd { margin: 0; }

ul { padding: 0; list-style: none; }

p,
li,
dd { text-wrap: pretty; }

h1,
h2,
h3 {
  color: var(--bordeaux);
  font-family: var(--schrift-titel);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 43.75rem) {
  h1,
  h2,
  h3 { hyphens: manual; }
}

h1 { font-size: var(--titel-gross); font-weight: 800; line-height: 1.05; }

h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); font-weight: 800; }

h3 { font-size: 1.375rem; font-weight: 800; }

a {
  color: var(--bordeaux);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dauer-kurz) var(--kurve);
}

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

main:focus { outline: none; }

.rand { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Dunkle Fläche: Bordeaux mit heller Schrift */

.dunkel { --fokus: var(--weiss); background: var(--bordeaux); color: var(--weiss); }

.dunkel h1,
.dunkel h2,
.dunkel h3,
.dunkel a:not(.knopf) { color: var(--weiss); }

.dunkel .strichliste li::before { background: var(--weiss); }

/* Sprungmarke und Entwurfshinweis */

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  background: var(--weiss);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top var(--dauer-kurz) var(--kurve);
}

.sprung:focus { top: 0.5rem; }

/* Kopf: eine Zeile, schrumpft beim Rollen (data-klein, gesetzt von seite.js) */

/* Der Kopf bleibt oben stehen und reserviert dauerhaft seine große Höhe im Fluss; nur die Zeile darin schrumpft. */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--kopf-h-klein);
  margin-bottom: calc(var(--kopf-h) - var(--kopf-h-klein));
  view-transition-name: kopf;
}

.kopf-zeile {
  position: relative;
  height: var(--kopf-h);
  background: var(--weiss);
  /* Weicher Schatten statt Trennstrich: eine harte Linie wirkte beim Schrumpfen wie ein Fremdkörper (Timo, 28.10.) */
  box-shadow: 0 6px 16px -10px rgb(40 20 10 / 0);
  transition:
    height var(--dauer-kopf) var(--kurve-kopf),
    box-shadow var(--dauer-kopf) var(--kurve-kopf);
}

.kopf[data-klein] .kopf-zeile { height: var(--kopf-h-klein); box-shadow: 0 6px 16px -10px rgb(40 20 10 / 0.28); }

.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

/* RAABE-Marke links, daneben orange Schrift (Text, Orange abgedunkelt für AA auf Weiß). Beim Schrumpfen verkleinert sich die Marke leicht,
   die Schrift blendet aus und rückt nach links; nur Deckkraft und Transform, der Platz bleibt reserviert, das Menü springt nicht. */
.marke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; min-height: 2.75rem; white-space: nowrap;
  /* Optische Mitte: Die Tinte des Logos liegt bei 61 % der Höhe (schwere Wortmarke unten, leichter Rabenkopf oben);
     ein kleiner Zug nach oben setzt den Schwerpunkt der Marke samt Schrift in die Mitte der Leiste. */
  translate: 0 calc(var(--logo-h) * -0.06);
}

.marke-bild {
  height: var(--logo-h);
  width: auto;
  transform-origin: left center;
  transition: transform var(--dauer-kopf) var(--kurve-kopf);
}

.marke-schrift {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  /* Mittig zur Wortmarke RAABE (untere 60 % des Logos, Mitte bei 70 %), nicht zum Kopf des Raben;
     gegenläufige Ränder verschieben die Mitte um 20 %, ohne die Kopfhöhe zu ändern */
  margin-block: calc(var(--logo-h) * 0.2) calc(var(--logo-h) * -0.2);
  color: #b85a0a;
  font-size: var(--marke-schrift);
  font-weight: 400;
  line-height: 1;
  transition:
    opacity var(--dauer-kopf) var(--kurve-kopf),
    transform var(--dauer-kopf) var(--kurve-kopf);
}

.marke-schrift span:first-child { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

.kopf[data-klein] .marke-bild { transform: scale(var(--marke-klein)); }

.kopf[data-klein] .marke-schrift { opacity: 0; transform: translateX(-0.25rem); }

@media (prefers-reduced-motion: reduce) {
  .marke-bild,
  .marke-schrift { transition: none; }
}

.kopf .kopf-telefon { display: none; }

.menue-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--weiss);
  color: var(--bordeaux);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dauer-druck) var(--kurve), background-color var(--dauer-kurz) var(--kurve);
}

.menue-knopf:active { transform: scale(0.98); }

.menue-balken,
.menue-balken::before,
.menue-balken::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dauer-ui) var(--kurve), background-color var(--dauer-ui) var(--ease-out);
}

.menue-balken { position: relative; }

.menue-balken::before,
.menue-balken::after { content: ""; position: absolute; left: 0; }

.menue-balken::before { transform: translateY(-6px); }

.menue-balken::after { transform: translateY(6px); }

.menue-knopf[aria-expanded="true"] .menue-balken { background: transparent; }

.menue-knopf[aria-expanded="true"] .menue-balken::before { transform: rotate(45deg); }

.menue-knopf[aria-expanded="true"] .menue-balken::after { transform: rotate(-45deg); }

/* Menü am Handy: bordeauxfarbene Fläche unter dem Kopf, Punkte laufen gestaffelt ein */

.menue {
  --fokus: var(--weiss);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  height: calc(100dvh - var(--kopf-h-klein));
  padding: 1.5rem var(--rand) 2rem;
  background: var(--bordeaux);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--dauer-menue) var(--kurve),
    visibility 0s linear var(--dauer-menue);
}

.kopf[data-offen] .menue { visibility: visible; opacity: 1; transition-delay: 0s; }

.menue li {
  border-bottom: 1px solid var(--linie-hell);
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity var(--dauer-menue) var(--kurve), transform var(--dauer-menue) var(--kurve);
}

.kopf[data-offen] .menue li {
  opacity: 1;
  transform: none;
  transition-delay: calc(80ms + var(--n, 0) * var(--stufe));
}

.menue a:not(.knopf) {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 3.5rem;
  color: var(--weiss);
  font-family: var(--schrift-titel);
  font-size: 1.625rem;
  font-weight: 600;
  text-decoration: none;
}

/* Unterstrich in Textbreite, wächst per scaleX von links */
.menue a:not(.knopf)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-ui) var(--kurve);
}

.menue a[aria-current="page"]::after { transform: scaleX(1); }

.menue-tel { justify-self: start; }

/* Ohne Skript steht das Menü offen und ohne Überlagerung da. */
html:not(.js) .menue {
  position: static;
  height: auto;
  visibility: visible;
  opacity: 1;
}

html:not(.js) .menue li { opacity: 1; transform: none; }

html:not(.js) .menue-knopf { display: none; }

@media (min-width: 68rem) {
  .kopf-innen { gap: 1.25rem; }

  .menue {
    --fokus: var(--bordeaux);
    position: static;
    display: block;
    height: auto;
    margin-left: auto;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .menue ul { display: flex; gap: clamp(1rem, 1.8vw, 2rem); }

  .menue li {
    border-bottom: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menue a:not(.knopf) {
    min-height: 2.75rem;
    color: var(--text);
    font-family: var(--schrift);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .menue a:not(.knopf)::after { bottom: 0.4rem; background: var(--rot); }

  .menue .menue-tel,
  .kopf .menue-knopf { display: none; }
  .kopf .kopf-telefon {
    display: inline-flex;
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-size: 0.9375rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .menue a:not(.knopf):hover::after { transform: scaleX(1); }

  .menue-knopf:hover { background: var(--grund-getoent); }
}

/* Knöpfe */

.knopf-zeile { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Zwei Stufen: Hauptknopf (.knopf-voll) umrandet mit Hauch-Tönung und Pfeil, Nebenknopf (.knopf) mit feinem Rahmen.
   Auf dunklem Grund (.dunkel, Handymenü) kehren beide ins Weiße. Wo zwei Knöpfe stehen, ist genau einer der Hauptknopf. */
.knopf {
  --knopf-farbe: var(--bordeaux);
  --knopf-grund: rgb(106 12 5 / 0.07);
  --knopf-hover: rgb(106 12 5 / 0.13);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.55rem 1.15rem;
  background-color: var(--knopf-grund);
  color: var(--knopf-farbe);
  border: 2px solid var(--knopf-farbe);
  border-radius: var(--radius);
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--dauer-druck) var(--kurve),
    background-color var(--dauer-ui) var(--ease-out),
    border-color var(--dauer-ui) var(--ease-out),
    color var(--dauer-ui) var(--ease-out);
}

/* Pfeil am Ende des Hauptknopfs (Zierde, wird nicht vorgelesen); der Knopf mit eigenem Pfeil-Zeichen bleibt, wie er ist */
.knopf-voll:not(.knopf-pfeil)::after {
  content: "→" / "";
  flex: none;
  transition: transform var(--dauer-ui) var(--ease-out);
}

.knopf:not(.knopf-voll) {
  --knopf-grund: transparent;
  --knopf-hover: transparent;
  --knopf-farbe: var(--text);
  border-width: 1px;
  border-color: var(--linie);
}

:is(.dunkel, .menue) .knopf-voll { --knopf-farbe: var(--weiss); --knopf-grund: rgb(255 255 255 / 0.08); --knopf-hover: rgb(255 255 255 / 0.16); }

.dunkel .knopf:not(.knopf-voll),
.menue .knopf:not(.knopf-voll) { --knopf-farbe: var(--weiss); border-color: rgb(255 255 255 / 0.4); }

.knopf:active { transform: scale(0.97); }

.knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Knopf mit Pfeil nach unten (Sprung zum Abschnitt darunter) */
.knopf-pfeil { gap: 0.6rem; }
.knopf-pfeil-zeichen { flex: none; transition: transform var(--dauer-ui) var(--kurve); }
@media (hover: hover) and (pointer: fine) {
  .knopf-pfeil:hover .knopf-pfeil-zeichen { transform: translateY(0.18rem); }
}
@media (prefers-reduced-motion: reduce) {
  .knopf-pfeil-zeichen { transition: none; }
  .knopf-pfeil:hover .knopf-pfeil-zeichen { transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background-color: var(--knopf-hover); }

  .knopf-voll:hover::after { transform: translateX(0.25rem); }

  .knopf:not(.knopf-voll):hover { border-color: var(--bordeaux); color: var(--bordeaux); }

  :is(.dunkel, .menue) .knopf:not(.knopf-voll):hover { border-color: var(--weiss); color: var(--weiss); }
}

@media (prefers-reduced-motion: reduce) {
  .knopf-voll::after { transition: none; }
  .knopf-voll:hover::after { transform: none; }
}

/* Gefüllte Variante (.knopf-gefuellt): Weinrot, weißer Text und Pfeil; Kopf-Kontakt, Tel. bei „So bekommen Sie es“ (Wild), Essenplan als PDF.
   Fokus, :active und Pfeilbewegung kommen von .knopf bzw. .knopf-voll. */
.knopf.knopf-gefuellt {
  --knopf-farbe: var(--weiss);
  --knopf-grund: var(--rot);
  --knopf-hover: var(--rot-dunkel);
  --fokus: var(--bordeaux);
  border: 2px solid var(--rot);
}

@media (hover: hover) and (pointer: fine) {
  .knopf.knopf-gefuellt:hover { border-color: var(--rot-dunkel); color: var(--weiss); }
}

/* Im Handymenü liegt der Kontakt-Knopf auf Bordeaux: weiß gefüllt mit weinroter Schrift, damit er sich abhebt */
.kopf .menue .menue-tel.knopf {
  --knopf-farbe: var(--rot);
  --fokus: var(--weiss);
  min-height: 3rem;
  color: var(--rot);
  background-color: var(--weiss);
  border: 2px solid var(--weiss);
}

.kopf .menue .menue-tel.knopf:active { background-color: rgb(255 255 255 / 0.88); border-color: rgb(255 255 255 / 0.88); color: var(--rot); }

@media (hover: hover) and (pointer: fine) {
  .kopf .menue .menue-tel.knopf:hover { background-color: rgb(255 255 255 / 0.88); border-color: rgb(255 255 255 / 0.88); color: var(--rot); }
}

/* Abschnitte */

.abschnitt { padding-block: var(--abstand); }

.abschnitt-getoent { background: var(--grund-getoent); }

.einstieg {
  max-width: 38rem;
  color: var(--text-leise);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.5;
}

.dunkel .einstieg { color: var(--text-auf-bordeaux); }

.strichliste { display: grid; }

.strichliste li {
  display: flex;
  gap: 1rem;
  padding-block: 0.5rem;
  line-height: 1.4;
}

.strichliste li::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((1lh - 0.5rem) / 2);
  background: var(--rot);
}

/* Bildrahmen: beschneidet das Foto, damit es sich innen enthüllen und bewegen kann */

.rahmen { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--grund-getoent); }

.rahmen img { width: 100%; height: 100%; object-fit: cover; }

.band .rahmen img { transition: scale var(--dauer-hover-bild) var(--ease-out); will-change: scale; }

/* Einstieg der Startseite: Text 5/12, Foto bis an den rechten Rand */

.buehne,
.angebot,
.feier,
.sorte,
.party,
.ueber,
.seitenkopf-bild { container-type: inline-size; display: grid; }

.buehne { background: var(--grund-getoent); }

.buehne-text {
  display: grid;
  gap: 1rem;
  align-content: center;
  justify-items: start;
  padding: 2.5rem var(--rand) 1.75rem;
}

.buehne h1 { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); }

/* Die drei Sätze unter der Überschrift stehen im Blocksatz; „Ihr Experte …“ bleibt in eigener Zeile */
.buehne .einstieg { text-align: justify; hyphens: auto; }

.buehne-bild img,
.seitenkopf-foto img { position: absolute; top: -6%; left: 0; height: 112%; }

.buehne-bild img { object-position: 50% 45%; }

/* Überblendung der Einstiegsfotos: drei Fotos, je 6 s, 1,2 s Überblendung, nur opacity */
.buehne-folie { position: absolute; inset: 0; display: block; }

.buehne-bild { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }

.wort {
  display: inline-block;
  padding: 0.05em 0.04em 0.16em;
  margin-bottom: -0.16em;
  overflow: hidden;
  vertical-align: top;
}

.wort > span {
  display: inline-block;
  animation: hoch var(--dauer-auftritt) var(--kurve) both;
  animation-delay: calc(var(--i, 0) * var(--stufe));
}

@media (min-width: 40rem) {
  .buehne-bild { aspect-ratio: 2 / 1; }
}

@media (min-width: 64rem) {
  .buehne { grid-template-columns: minmax(0, 1fr) minmax(0, min(58%, 750px)); }

  .buehne-text {
    gap: 1.5rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) 2rem clamp(2.5rem, 5vw, 4.5rem) var(--kante);
  }

  .buehne-bild { aspect-ratio: auto; min-height: 30rem; }

  /* Die Textspalte ist hier schmal (42 % der Breite, bei breiten Fenstern Rest neben dem 750-px-Foto):
     die Überschrift richtet sich nach ihr, damit das längste Wort („Willkommen“, 6,0 em) nicht ins Foto läuft. */
  .buehne h1 {
    --spalte: calc(max(42cqw, 100cqw - 750px) - 2rem - var(--kante));
    font-size: min(clamp(2.5rem, 1.2rem + 4.6vw, 5rem), calc(var(--spalte) / 6.2));
  }
}

/* Faktenband unter dem Einstieg: volle Breite in Bordeaux, drei Aussagen, oben und unten gleich viel Luft, schließt bündig an den Einstieg an */

.belege {
  --band-luft: clamp(2rem, 4vw, 3.25rem);
  grid-column: 1 / -1;
  display: grid;
  padding: var(--band-luft) var(--rand);
  background: var(--bordeaux);
  color: var(--weiss);
}

.belege li {
  padding: 1rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.belege li > span { display: block; hyphens: manual; }

.belege .ohne-umbruch { white-space: nowrap; }

.belege li > span::first-letter { text-transform: uppercase; }

.belege li:first-child { padding-top: 0; border-top: 0; }

.belege li:last-child { padding-bottom: 0; }

@media (min-width: 48rem) {
  /* Drei gleich breite Spalten über die Breite des Seitencontainers, Text mittig, feine Trenner */
  .belege { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: var(--kante); }

  .belege li,
  .belege li:first-child,
  .belege li:last-child {
    display: grid;
    place-items: center;
    padding: 0.25rem 1rem;
    border-top: 0;
    font-size: clamp(1.0625rem, 0.6rem + 1vw, 1.375rem);
  }

  .belege li + li { border-left: 1px solid rgb(255 255 255 / 0.25); }
}

/* Leiste unter dem Einstieg: drei Felder nebeneinander */

.leiste-raster { display: grid; }

.leiste-feld {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding-block: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.leiste-feld + .leiste-feld { border-top: 1px solid var(--linie-hell); }

.leiste-feld h2 { font-size: 1.0625rem; }

.leiste-feld a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-block: -0.5rem;
}

@media (min-width: 48rem) {
  .leiste-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Gleiche Spalten, gleicher Innenrand links und rechts, Inhalt mittig: Trennlinien und Ränder liegen symmetrisch */
  .leiste-feld { padding: 1.75rem 1.5rem; justify-items: center; text-align: center; }

  .leiste-feld .zeiten { max-width: 20rem; text-align: left; }

  .leiste-feld + .leiste-feld { border-top: 0; border-left: 1px solid var(--linie-hell); }
}

/* Angebot: Rot-Fläche mit großer Überschrift, daneben die Zeilen */

.angebot-flaeche {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 3rem) var(--rand);
  background: var(--rot);
}

.angebot-flaeche h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.08; }

.angebot-liste { padding: 0.5rem var(--rand) 1.5rem; }

.angebot-liste li { border-bottom: 1px solid var(--linie); }

.angebot-liste a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding-block: 0.75rem;
  color: var(--text);
  font-family: var(--schrift-titel);
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.angebot-liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer-ui) var(--kurve);
}

.angebot-liste span { transition: transform var(--dauer-ui) var(--kurve); }

.angebot-liste a:focus-visible::after { transform: scaleX(1); }

.angebot-liste a:focus-visible span { transform: translateX(0.5rem); }

@media (hover: hover) and (pointer: fine) {
  .angebot-liste a:hover::after { transform: scaleX(1); }

  .angebot-liste a:hover span { transform: translateX(0.5rem); }
}

@media (min-width: 64rem) {
  .angebot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .angebot-flaeche { padding: 4rem 3rem 4rem var(--kante); }

  .angebot-liste { align-self: center; padding: 3rem var(--kante) 3rem 4rem; }
}

/* Leitsatz: über die Breite gesetzt, Text und Knopf versetzt darunter */

.leitsatz { display: grid; gap: 2rem; }

.leitsatz-text,
.hervor {
  color: var(--bordeaux);
  font-family: var(--schrift-titel);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.leitsatz-text { font-size: clamp(2rem, 1rem + 4.6vw, 4.5rem); }

.leitsatz-neben {
  display: grid;
  gap: 1.25rem;
  max-width: 30rem;
  justify-items: start;
}

/* Partyservice-Anriss mit Fotoband: das Band wandert beim Rollen seitlich, der Abschnitt hält dafür an */

.feier { gap: 1.5rem; padding-block: 2.5rem; overflow: clip; }

.feier-text {
  display: grid;
  gap: 1rem;
  align-content: center;
  justify-items: start;
  padding-inline: var(--rand);
}

.feier-text h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); hyphens: manual; }

.band-rahmen { overflow: clip; container-type: inline-size; }

.band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  padding-inline: var(--rand);
}

.band .rahmen { aspect-ratio: 3 / 4; }

@media (min-width: 64rem) {
  .feier { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 3rem; padding-block: 3rem; }

  .feier-text { padding-left: var(--kante); }

  .band { padding-right: var(--rand); }
}

@keyframes wandern {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

@media (max-width: 47.99rem) {
  .band-rahmen { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }

  .band { display: flex; gap: 0.5rem; width: max-content; }

  .band li { flex: none; width: 62vw; scroll-snap-align: start; }
}

/* Wisch-Hinweis: Punkte unter dem Band, nur wo es sich wischen lässt */
.band-punkte { display: flex; justify-content: center; gap: 0.5rem; padding: 0.875rem var(--rand) 0; }

.band-punkte span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bordeaux) 25%, var(--weiss));
  transition: background-color var(--dauer-ui) var(--kurve), transform var(--dauer-ui) var(--kurve);
}

.band-punkte span[data-aktiv] { background: var(--bordeaux); transform: scale(1.25); }

@media (min-width: 48rem) {
  .band-punkte { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .band-punkte span { transition: none; }
}

/* Angeheftet: Der Abschnitt bleibt stehen, solange man durch die Fotos rollt; das Band wandert dabei linear seitlich (benannte View-Timeline auf der Strecke, Bereich „contain“),
   das letzte Foto ist ganz zu sehen, wenn die Seite weiterläuft. Die Fotos bleiben bewusst klein und stehen mittig (Timo, 27.10.: „die waren vorher vieeel kleiner“).
   Ohne Unterstützung oder bei reduzierter Bewegung bleibt alles normal wischbar. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .feier-strecke {
      height: 300svh;
      view-timeline: --feier block;
    }

    /* Der Abschnitt ist nur so hoch wie Text und Fotos und heftet sich mittig unter dem Kopf an; so entsteht beim Hineinrollen kein großer Leerraum (Timo, 28.10.).
       --feier-h schätzt die Höhe für die Mitte: mobil Text über dem Band, breit nur das Band plus Rand. */
    .feier {
      --band-h: min(44svh, 24rem);
      --feier-h: calc(20rem + 1rem + var(--band-h) + 3rem);
      position: sticky;
      top: max(calc(var(--kopf-h-klein) + 1.5rem), calc((100svh + var(--kopf-h-klein) - var(--feier-h)) / 2));
      gap: 1rem;
      padding-block: 1.5rem;
    }

    .band {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      width: max-content;
      padding-right: var(--rand);
      animation: wandern linear both;
      animation-timeline: --feier;
      animation-range: contain 0% contain 100%;
    }

    .band li.rahmen { flex: none; width: auto; height: var(--band-h); aspect-ratio: 3 / 4; scroll-snap-align: none; }

    .band-punkte { display: none; }
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 64rem) {
  @supports (animation-timeline: view()) {
    .feier { --band-h: min(56svh, 28rem); --feier-h: calc(var(--band-h) + 3rem); align-items: center; gap: 3rem; }
  }
}

/* Öffnungszeiten: zwei große Felder nebeneinander, eines hell, eines Bordeaux */

.zeiten-felder { display: grid; }

.zeiten-titel { margin-bottom: 1.5rem; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }

.standort {
  display: grid;
  gap: 1rem;
  align-content: start;
  justify-items: start;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.standort-hell { background: var(--grund-getoent); }

.zeiten {
  --zeilenlinie: var(--linie);
  display: grid;
  width: 100%;
  max-width: 28rem;
  border-top: 1px solid var(--zeilenlinie);
}

.dunkel .zeiten { --zeilenlinie: var(--linie-hell); }

.zeiten div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--zeilenlinie);
}

.zeiten dt { color: var(--text-leise); }

.dunkel .zeiten dt { color: var(--text-auf-bordeaux); }

.zeiten dd { font-weight: 600; font-variant-numeric: tabular-nums; }

.standort-draht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.standort-fax { color: var(--text-leise); }

@media (min-width: 48rem) {
  .zeiten-felder { grid-template-columns: 1fr 1fr; }

  .zeiten-titel { grid-column: 1 / -1; }
}

/* Schlussgruß: Bordeaux-Band, oben und unten gleich viel Luft wie das Faktenband; der Fuß ist dunkler und trennt sich so klar ab */

.gruss { --band-luft: clamp(2rem, 4vw, 3.25rem); padding-block: var(--band-luft); }

.gruss .rand { display: grid; gap: 1rem; justify-items: start; }

.gruss-text {
  /* Oberkante der Glyphen optisch auf die Bandluft ziehen (Zeilenabstand über der Kappenhöhe) */
  margin-top: -0.17em;
  max-width: 24ch;
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
}

.gruss-text-leicht { font-weight: 500; }

.gruss-name { font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 400; }

.gruss-name strong { font-weight: 800; }

/* Unterseiten: Seitenkopf als geteilte Fläche */

.seitenkopf { padding-block: clamp(2.5rem, 7vw, 5rem); }

.seitenkopf-geteilt { display: grid; gap: 1.5rem; align-items: end; }

.seitenkopf-zurueck { justify-self: start; }

.seitenkopf-geteilt .lesetext-inhalt { display: block; margin-bottom: 1.5rem; }

@media (min-width: 64rem) {
  .seitenkopf-geteilt .lesetext-inhalt { display: block; }
}

.seitenkopf-rechts { display: grid; gap: 1.5rem; justify-items: start; }

.seitenkopf-bild { padding-block: 0; }

.seitenkopf-text {
  display: grid;
  gap: 1.25rem;
  align-content: center;
  justify-items: start;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--rand);
}

.seitenkopf-foto { aspect-ratio: 3 / 2; border-radius: 0; }

@media (min-width: 56rem) {
  .seitenkopf-geteilt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; }
  .seitenkopf-zurueck { justify-self: end; }
}

@media (min-width: 64rem) {
  .seitenkopf-bild { grid-template-columns: minmax(0, 1fr) minmax(0, min(58%, 750px)); }

  .seitenkopf-text { padding: 4rem 2rem 4rem var(--kante); }

  .seitenkopf-foto { aspect-ratio: auto; min-height: 26rem; }

  /* Wie bei .buehne h1: längstes Wort („Fleischerimbiss“, 8,0 em) bleibt in der Textspalte. */
  .seitenkopf-bild h1 {
    --spalte: calc(max(42cqw, 100cqw - 750px) - 2rem - var(--kante));
    font-size: min(var(--titel-gross), calc(var(--spalte) / 8.1));
  }
}

/* Fleischerei: Reihen aus Text und Foto auf Farbfläche, im Wechsel */

.sorte-text {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(2rem, 6vw, 4.5rem) var(--rand);
}

.sorte-text h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }

.sorte:not(.dunkel):not(.sorte-gedreht) { background: var(--grund-getoent); }

.sorte-gedreht { background: var(--weiss); }

.sorte-foto { display: grid; align-content: center; justify-items: start; padding: 0 var(--rand) clamp(2rem, 6vw, 3.5rem); }

.sorte-foto .rahmen { width: 100%; aspect-ratio: 3 / 2; }

.sorte-foto .rahmen-hoch { aspect-ratio: 3 / 4; width: min(100%, 18rem); margin-inline: auto; }

.sorte-ohne-bild .sorte-text { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Abschnitt mit drei Fotos: Text oben, die Fotos nebeneinander darunter */
.sorte-foto-reihe { gap: 1rem; justify-items: stretch; }

@media (min-width: 52rem) {
  .sorte { grid-template-columns: minmax(0, 1fr) auto; }

  .sorte-foto .rahmen { width: clamp(20rem, 36vw, 32rem); }

  .sorte-foto .rahmen-hoch { width: clamp(15rem, 24vw, 21rem); }

  .sorte-text { padding: 4rem 3rem 4rem var(--kante); }

  .sorte-foto { padding: 4rem var(--kante) 4rem 0; }

  .sorte-gedreht { grid-template-columns: auto minmax(0, 1fr); }

  .sorte-gedreht .sorte-foto { order: -1; padding: 4rem 0 4rem var(--kante); }

  .sorte-gedreht .sorte-text { padding: 4rem var(--kante) 4rem 3rem; }

  .sorte-fotos { grid-template-columns: minmax(0, 1fr); }

  .sorte-fotos .sorte-text { padding: 4rem var(--kante) 2rem; }

  .sorte-fotos .sorte-foto-reihe { order: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 0 var(--kante) 4rem; }

  .sorte-foto-reihe .rahmen { width: 100%; }

  .sorte-ohne-bild { grid-template-columns: minmax(0, 1fr); }

  .sorte-ohne-bild .sorte-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 3rem;
    padding-inline: var(--kante);
  }
}

/* Fleischerimbiss: Speisetafel in drei Gruppen, darunter der Mittagstisch auf Bordeaux */

.speise { padding-block: var(--abstand); }

.speise-intro {
  max-width: 44rem;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  color: var(--bordeaux);
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.speise-raster { display: grid; gap: 2rem; }

.speise-gruppe { display: grid; gap: 0.5rem; align-content: start; }

.speise-gruppe h2 { padding-bottom: 0.75rem; border-bottom: 2px solid var(--bordeaux); font-size: 1.5rem; }

.speise-gruppe li {
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.mittag { padding-block: var(--abstand); }

.mittag-raster { display: grid; gap: 2rem; align-items: center; }

.mittag h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; }

.mittag-rechts { display: grid; gap: 1.5rem; justify-items: start; }

.mittag-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.mittag-liefer { font-family: var(--schrift-titel); font-size: 1.375rem; font-weight: 800; }

@media (min-width: 56rem) {
  .speise-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }

  .speise-gruppe:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }

  .mittag-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}

/* Essenplan (Daten: src/daten/essenplan.json) */

.essenplan { padding-block: var(--abstand); background: var(--grund-getoent); }

.essenplan .rand { display: grid; gap: 1.5rem; }

.plan-titel { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; }

.plan-zeitraum { display: block; margin-top: 0.5rem; font-size: 1.25rem; font-weight: 600; color: var(--bordeaux); }

.plan { border-top: 2px solid var(--bordeaux); }

.plan-eintrag {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--linie);
}

.plan-eintrag h3 { font-size: 1.125rem; color: var(--bordeaux); }

.plan-gericht { font-family: var(--schrift-titel); font-size: 1.1875rem; font-weight: 600; line-height: 1.35; }

.plan-allergene { margin-top: 0.25rem; font-family: var(--schrift); font-size: 0.875rem; font-weight: 400; color: var(--text-leise); }

.plan-preis { font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 800; white-space: nowrap; }

.plan-taeglich {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 0.25rem;
  background: color-mix(in srgb, var(--rot) 6%, var(--weiss));
  border: 1px solid color-mix(in srgb, var(--rot) 30%, var(--weiss));
  border-radius: var(--radius);
}

.plan-taeglich h3 { font-size: 1.375rem; color: var(--bordeaux); }

.plan-taeglich h3 span { display: block; margin-top: 0.125rem; font-size: 1rem; font-weight: 600; color: var(--text-leise); }

.plan-taeglich .plan { margin-top: 0.75rem; border-top: 0; }

.plan-taeglich .plan-eintrag:last-child { border-bottom: 0; }

.plan-hinweise { display: grid; gap: 0.25rem; color: var(--text-leise); font-size: 0.9375rem; }

.plan-pdf { justify-self: start; }

.plan-legende { display: grid; gap: 0.25rem; color: var(--text-leise); font-size: 0.9375rem; }

.plan-legende strong { color: var(--bordeaux); font-weight: 600; }

.plan-legende-link { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 0.2em; }

.plan-hinweis-leer { color: var(--text-leise); }

/* Zusatzstoffe und Allergene (öffentliche Legende) */

.zs { display: grid; gap: 2rem; justify-items: start; }

.zs > * { width: min(100%, 46rem); }

.zs > p:has(.knopf) { width: auto; }

.zs-gruppe { display: grid; gap: 0.75rem; }

.zs-gruppe h2 { color: var(--bordeaux); }

.zs-liste { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }

.zs-liste li { display: flex; gap: 1rem; align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--linie); }

.zs-nr { min-width: 2.5rem; font-weight: 600; color: var(--bordeaux); font-variant-numeric: tabular-nums; }

.zs-fuss { color: var(--text-leise); }

@media (min-width: 48rem) {
  .plan-taeglich { padding-inline: 1.5rem; }
  .plan-taeglich .plan-eintrag { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-eintrag { grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: baseline; gap: 1.5rem; }
}

/* Über uns */

.ueber-text {
  display: grid;
  gap: 1.5rem;
  align-content: center;
  padding: var(--abstand) var(--rand);
  font-size: 1.125rem;
}

.hervor { margin-top: 0.5rem; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }

/* Eckdaten: rote Fläche mit drei Angaben nebeneinander */

.ueber-bild { min-height: 18rem; border-radius: 0; background: var(--rot); }

.ueber-bild img { position: absolute; inset: 0; }

/* Überlappt die Kante des Fotos darüber um 1 px: dessen weichgezeichnete Randzeile zeigte sonst den weißen Grund als Naht.
   padding-top kompensiert den negativen margin, damit der erste Eckdaten-Eintrag nicht über dem roten Trennstrich liegt. */
.eckband { margin-top: -1px; padding-top: 4px; border-top: 1px solid var(--rot); background: var(--rot); color: var(--weiss); }

.eckdaten { display: grid; padding-block: clamp(1.5rem, 4vw, 3rem); }

.eckdaten li {
  padding-block: 1rem;
  text-align: center;
  text-wrap: balance;
  border-bottom: 1px solid var(--linie-hell);
  font-family: var(--schrift-titel);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  /* „Fleischereifachgeschäft“ ist breiter als eine Spalte auf dem Tablet quer; Trennstelle steht als ­ im Text */
  overflow-wrap: break-word;
}

.eckdaten li:last-child { border-bottom: 0; }

@media (min-width: 56rem) {
  /* Foto links: im Kopf darüber steht es rechts, zwei Fotos übereinander lesen sich wie eines */
  .ueber { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .ueber-text { padding-left: 4rem; padding-right: var(--kante); }

  .ueber-bild { order: -1; }

  .ueber-bild { min-height: 26rem; }

  .eckdaten { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .eckdaten li { display: grid; place-items: center; padding: 0.5rem clamp(1rem, 2vw, 2rem); border-bottom: 0; border-left: 1px solid var(--linie-hell); }

  .eckdaten li:first-child { border-left: 0; }
}

/* Partyservice: Text links, Angebot auf getönter Fläche rechts */

.party-text {
  display: grid;
  gap: 1rem;
  align-content: center;
  padding: clamp(2rem, 6vw, 4rem) var(--rand);
}

.party-angebot { padding: clamp(2rem, 6vw, 4rem) var(--rand); background: var(--grund-getoent); }

.party-angebot h2 { margin-bottom: 1rem; }

.party-zusatz { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.5; }

@media (min-width: 40rem) {
  .strichliste-spalten { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

.angebot-zweispaltig { display: grid; gap: 2rem; }

@media (min-width: 40rem) {
  .angebot-zweispaltig { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

@media (min-width: 60rem) {
  .party { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

  .party-text { padding: 4rem 3rem 4rem var(--kante); }

  .party-angebot { padding: 4rem var(--kante) 4rem 3rem; }
}

.galerie-kopf { display: grid; gap: 0.75rem; align-items: end; }

.galerie-leitsatz {
  color: var(--bordeaux);
  font-family: var(--schrift-titel);
  font-size: clamp(1.625rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.galerie-hinweis { color: var(--text-leise); }

@media (min-width: 52rem) {
  .galerie-kopf { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; }

  .galerie-hinweis { justify-self: end; text-align: right; }
}

/* Galerie als Mosaik: am Handy 2 Spalten, ab 48rem 4 Spalten mit zwei 2x2-Bildern oben; die Zahl der kleinen Bilder muss durch 4 teilbar sein, sonst steht eines allein in der letzten Zeile */

.galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.galerie li:nth-child(-n+2) { grid-column: span 2; }

.galerie li { display: grid; }

.galerie a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: zoom-in;
}

.galerie img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dauer-hover-bild) var(--ease-out);
  will-change: transform;
}

/* Feuerplatte: Flamme und Spießring mittig im 3:2-Ausschnitt halten */
.galerie img[src*="grill-spiesse-feuerplatte"] { object-position: 38% 50%; }

@media (min-width: 48rem) {
  .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }

  .galerie li:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }

  .galerie li:nth-child(2) { grid-area: 1 / 3 / 3 / 5; }
}

@media (hover: hover) and (pointer: fine) {
  .galerie a:hover img { transform: scale(1.04); }

  .band .rahmen:hover img { scale: 1.04; }
}

/* Lichtbox: füllt das Fenster, das Foto passt immer ganz hinein; ein Klick irgendwohin schließt */

.lichtbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 1rem;
  background: transparent;
  border: 0;
  cursor: zoom-out;
}

.lichtbox[open] {
  display: grid;
  place-items: center;
  animation: einblenden var(--dauer-menue) var(--kurve);
}

.lichtbox::backdrop { background: rgb(31 28 28 / 0.92); }

.lichtbox[open]::backdrop { animation: einblenden var(--dauer-menue) var(--kurve); }

.lichtbox img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 2rem);
  border-radius: var(--radius);
  object-fit: contain;
}

.lichtbox-zu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: rgb(31 28 28 / 0.6);
  color: var(--weiss);
  border: 1px solid var(--linie-hell);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Lesetext (Impressum, Datenschutz): schmale Spalte, höchstens etwa 70 Zeichen je Zeile */

.lesetext-raster { display: grid; gap: 2rem; }

.lesetext { display: grid; max-width: 70ch; gap: 1rem; justify-items: start; line-height: 1.65; }

.lesetext h2 { margin: 2rem 0 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }

.lesetext h3 { margin: 1rem 0 0; font-size: 1.1875rem; }

.lesetext ul,
.lesetext ol { display: grid; gap: 0.5rem; padding-left: 1.25rem; }

.lesetext ul { list-style: disc; }

.lesetext ol { list-style: decimal; }

.lesetext a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Am Handy entfällt das Verzeichnis: Es schöbe den Text einen ganzen Bildschirm nach unten. */
.lesetext-inhalt { display: none; }

.lesetext-inhalt ul { display: grid; }

.lesetext-inhalt li { padding-block: 0.6rem; line-height: 1.35; }

/* Inline statt Block: So läuft der Strich bei zweizeiligen Einträgen unter jeder Zeile einzeln. */
.lesetext-inhalt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.6rem 2px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(var(--rot), var(--rot)) left bottom / 0 2px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--dauer-ui) var(--kurve);
}

nav.lesetext-inhalt a::after { content: none; }

@media (hover: hover) and (pointer: fine) {
  .lesetext-inhalt a:hover { background-size: 100% 2px; }
}

@media (min-width: 64rem) {
  .lesetext-raster { grid-template-columns: 18rem minmax(0, 70ch); gap: 3.5rem; }

  .lesetext-inhalt { display: block; }

  .lesetext-inhalt { position: sticky; top: calc(var(--kopf-h-klein) + 3rem); align-self: start; }
}

/* Textlinks: Unterstrich wächst beim Überfahren von links ein und läuft nach rechts hinaus */

.lesetext a,
.lesetext-inhalt a,
.leiste a,
.fuss a { position: relative; }

.lesetext a::after,
.lesetext-inhalt a::after,
.leiste a::after,
.fuss a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dauer-ui) var(--kurve);
}

.fuss a::after { background: var(--weiss); }

.leiste a::after { bottom: 0; background: var(--weiss); }

/* Fuß */

.fuss {
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--rot-dunkel);
  color: var(--weiss);
  --fokus: var(--weiss);
}

.fuss-raster { display: grid; gap: 2rem; }

.fuss-raster > div { display: grid; gap: 0.5rem; align-content: start; }

.fuss-name {
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.fuss-name-zeile { font-weight: 400; }

.fuss-inhaber {
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}

.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--weiss);
  text-decoration: none;
}

.fuss-signatur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-hell);
  color: var(--text-auf-bordeaux);
  font-size: 0.875rem;
}

@media (hover: hover) and (pointer: fine) {
  .lesetext a:hover::after,
  .lesetext-inhalt a:hover::after,
  .leiste a:hover::after,
  .fuss a:hover::after { transform: scaleX(1); transform-origin: left; }
}

@media (min-width: 48rem) {
  .fuss-raster { grid-template-columns: repeat(3, 1fr); }

  /* Mail-Zeile auf Höhe der Adresszeilen, gleiche Abstände zu den Links darunter (Zeilen sind 44 px hohe Tippflächen) */
  .fuss-mail { margin-block: -0.5625rem -0.5rem; }
}

/* Verwaltung (/verwaltung, /admin) und Wildseite */

button.knopf { cursor: pointer; }

.knopf:disabled,
.knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.wk-kopf { padding-block: clamp(2rem, 6vw, 3.5rem); }

.wk-kopf-innen { display: grid; gap: 1.25rem; justify-items: start; }

.wk-abschnitt { padding-block: clamp(1.5rem, 4vw, 3rem); }

.wk-nur-lesen { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }

.wk-leise { color: var(--text-leise); font-size: 0.9375rem; }

.wk-stand { min-height: 1.5rem; margin-block: 0.75rem; color: var(--bordeaux); font-weight: 600; }

.wk-karte { display: grid; gap: 1.25rem; padding: 1.5rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }

/* Reiter */
.wk-reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--bordeaux); }

.wk-reiter button {
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  background: transparent;
  color: var(--bordeaux);
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve);
}

/* Schmale Fenster: Reiter gleich breit, lange Beschriftung darf umbrechen */
@media (max-width: 40rem) {
  .wk-reiter button { flex: 1 1 0; min-width: 0; padding-inline: 0.25rem; font-size: clamp(0.6875rem, 3.7vw, 0.9375rem); white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
}

.wk-reiter button[aria-selected="true"] { background: var(--bordeaux); color: var(--weiss); }

@media (max-width: 30rem) {
  .wk-reiter button { padding-inline: 0.25rem; }
}

@media (hover: hover) and (pointer: fine) {
  .wk-reiter button[aria-selected="false"]:hover { background: color-mix(in srgb, var(--bordeaux) 9%, var(--weiss)); }
}

.wk-bereich { padding-top: 1.5rem; }

/* Eingaben */
.wk-feld { display: grid; gap: 0.375rem; align-content: start; min-width: 0; }

.wk-feld > span:first-child,
.wk-feldname { font-weight: 600; color: var(--bordeaux); }

.wk-eingabe,
.wk-eingabe-text {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  line-height: 1.5;
  background: var(--weiss);
  color: var(--text);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dauer-kurz) var(--kurve);
}

textarea.wk-eingabe { min-height: 6rem; resize: vertical; }

.wk-eingabe:hover { border-color: var(--text-leise); }

.wk-eingabe:focus-visible { outline: 1px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }

.wk-kasten input:focus-visible { outline: 1px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }

.wk-reiter button:focus-visible,
.wk-wochenknopf:focus-visible,
.wk-symbol:focus-visible,
.wk-textknopf:focus-visible,
.wk-vorschlaege li:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--bordeaux); }

.wk-zelle { position: relative; display: flex; align-items: center; gap: 0.5rem; }

.wk-zeilen { display: grid; gap: 0.5rem; }

/* Feld und Entfernen-Knopf in einer Zeile */
.wk-zeile { display: flex; align-items: flex-start; gap: 0.5rem; }

.wk-zeile > .wk-eingabe { flex: 1; min-width: 0; }

textarea.wk-mehrzeilig { min-height: 3rem; resize: none; overflow: clip; }

/* Abschnitte in der Karte mit klarem Abstand */
.wk-karte > h2:not(:first-child) { margin-top: 1.5rem; }

.wk-preiszeile { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }

.wk-preis { width: 7rem; text-align: right; }

.wk-kennzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

.wk-kennwert { font-weight: 600; }

.wk-textknopf {
  justify-self: start;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  color: var(--rot-dunkel);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.wk-symbol {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 3rem;
  min-height: 3rem;
  background: var(--weiss);
  color: var(--bordeaux);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Kästchen und Schalter */
.wk-kasten { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; cursor: pointer; }

/* Kästchen und Auswahlpunkte in den Farben der Seite: Rahmen bordeaux, gewählt rot; Fokusring wie bei den Knöpfen */
.wk-kasten input {
  flex: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  appearance: none;
  background: var(--weiss);
  border: 2px solid var(--linie);
  border-radius: var(--radius);
  accent-color: var(--rot-dunkel);
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve), border-color var(--dauer-kurz) var(--kurve);
}

.wk-kasten input[type="radio"] { border-radius: 50%; }

.wk-kasten { padding-inline: 0.25rem; border-radius: var(--radius); }

.wk-kasten input[type="checkbox"]:checked {
  background: var(--rot-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  border-color: var(--rot-dunkel);
}

.wk-kasten input[type="radio"]:checked {
  border-color: var(--rot-dunkel);
  background: radial-gradient(circle, var(--rot-dunkel) 0 45%, var(--weiss) 50%);
}

.wk-kasten input:disabled { opacity: 0.45; cursor: not-allowed; }

.wk-kasten:has(input:disabled) { cursor: not-allowed; color: var(--text-leise); }

@media (hover: hover) and (pointer: fine) {
  .wk-kasten:hover input:not(:disabled) { border-color: var(--rot); }
  .wk-kasten:hover input:not(:disabled):not(:checked) { background: color-mix(in srgb, var(--rot) 7%, var(--weiss)); }
  .wk-kasten:hover input:checked:not(:disabled) { background-color: var(--rot); border-color: var(--rot); }
}

/* Native Reste im Stil der Seite: Rückfallfarbe, Autofill, Scrollleisten, Datum, Datei */
:root { accent-color: var(--rot-dunkel); }
.wk-eingabe:-webkit-autofill,
.wk-eingabe:-webkit-autofill:hover,
.wk-eingabe:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--weiss) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); }
.wk-dialog, .wk-vorschlaege, textarea.wk-eingabe { scrollbar-color: var(--bordeaux) var(--weiss); scrollbar-width: thin; }
input[type="date"].wk-eingabe { color-scheme: light; }
input[type="date"].wk-eingabe::-webkit-calendar-picker-indicator { cursor: pointer; padding: 0.25rem; border-radius: var(--radius); }
.wk-eingabe::file-selector-button { transition: border-color var(--dauer-ui) var(--ease-out), color var(--dauer-ui) var(--ease-out); margin-inline-end: 0.75rem; padding: 0.375rem 0.75rem; border: 2px solid var(--bordeaux); border-radius: var(--radius); background: var(--weiss); color: var(--bordeaux); font: inherit; font-weight: 600; cursor: pointer; }
.wk-eingabe::file-selector-button:hover { border-color: var(--rot); color: var(--rot-dunkel); }
::selection { background: color-mix(in srgb, var(--rot) 25%, var(--weiss)); }
.dunkel ::selection,
.fuss ::selection,
.menue ::selection,
.eckband ::selection { background: rgb(255 255 255 / 0.3); color: var(--weiss); }

/* Zusatzstoff-Auswahl als Raster */
@media (min-width: 40rem) {
  .wk-gruppe { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .wk-gruppe legend { grid-column: 1 / -1; }
}

/* Auswahllisten und Zahlenfelder im selben Stil wie die Textfelder */
select.wk-eingabe {
  appearance: none;
  padding-right: 2.5rem;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%236a0c05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0.75rem center / 1rem no-repeat;
  cursor: pointer;
}

input[type="number"].wk-eingabe { appearance: textfield; }

input[type="number"].wk-eingabe::-webkit-inner-spin-button,
input[type="number"].wk-eingabe::-webkit-outer-spin-button { appearance: none; margin: 0; }

.wk-eingabe:disabled { background: color-mix(in srgb, var(--bordeaux) 6%, var(--weiss)); color: var(--text-leise); cursor: not-allowed; }

.wk-gruppe { display: grid; gap: 0.25rem; min-width: 0; margin: 0; padding: 0; border: 0; }

.wk-gruppe legend { padding: 0; margin-bottom: 0.5rem; font-weight: 600; color: var(--bordeaux); }

/* Vorschlagsliste (Autofill) */
.wk-vorschlaege {
  position: absolute;
  inset: 100% 0 auto 0;
  z-index: 5;
  max-height: 16rem;
  margin-top: 0.25rem;
  overflow: auto;
  list-style: none;
  background: var(--weiss);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
}

.wk-vorschlaege[hidden] { display: none; }

.wk-vorschlaege li { transition: background-color var(--dauer-ui) var(--ease-out); padding: 0.75rem; min-height: 3rem; cursor: pointer; border-bottom: 1px solid var(--linie); }

.wk-vorschlaege li:last-child { border-bottom: 0; }

.wk-vorschlaege li[aria-selected="true"] { background: var(--bordeaux); color: var(--weiss); }

@media (hover: hover) and (pointer: fine) {
  .wk-vorschlaege li:hover { background: color-mix(in srgb, var(--bordeaux) 9%, var(--weiss)); }
  .wk-vorschlaege li[aria-selected="true"]:hover { background: var(--bordeaux); }
}

/* Wochen: Liste links, Bearbeiten rechts; schmal nacheinander */
.wk-wochen { display: grid; gap: 1.5rem; align-items: start; }

.wk-liste { display: grid; gap: 1rem; align-content: start; }

.wk-liste h2 { font-size: 1.5rem; }

.wk-wochenliste { display: grid; gap: 0.5rem; }

.wk-wochenknopf {
  display: grid;
  align-content: center;
  gap: 0.125rem;
  min-height: 3.5rem;
  padding: 0.5rem 1rem;
  background: var(--weiss);
  color: var(--text);
  border: 3px solid var(--rot);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dauer-ui) var(--ease-out), background-color var(--dauer-ui) var(--ease-out);
}

.wk-wochenknopf:hover { border-color: var(--rot-dunkel); }

.wk-wochenknopf[aria-current="true"] { border-color: var(--rot-dunkel); background: color-mix(in srgb, var(--rot) 8%, var(--weiss)); }

.wk-marke { font-size: 0.875rem; font-weight: 400; color: var(--bordeaux); }

.wk-frueher summary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  border: 0;
  border-radius: var(--radius);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--bordeaux);
}

.wk-frueher summary::-webkit-details-marker { display: none; }

.wk-frueher summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dauer-kurz) var(--kurve);
}

.wk-frueher[open] summary::before { transform: rotate(45deg); }

.wk-frueher summary { transition: color var(--dauer-ui) var(--ease-out); }

.wk-frueher summary:hover { color: var(--rot-dunkel); }

.wk-frueher summary:focus { outline: none; }

.wk-frueher summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.wk-frueher .wk-wochenliste { margin-top: 0.5rem; }

.wk-platz { display: grid; gap: 1.25rem; min-width: 0; }

.wk-editor-kopf { display: grid; gap: 0.75rem; justify-items: start; }

.wk-editor-kopf h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }

.wk-tage { display: grid; gap: 1rem; }

.wk-tag {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  background: var(--weiss);
  border: 0; /* Rahmen als Schatten, damit die Überschrift im Kasten steht und nicht auf der Linie */
  box-shadow: 0 0 0 1px var(--linie);
  border-radius: var(--radius);
}

/* float löst die Legende aus der Rahmenlinie, sie wird normales Rasterelement im Kasten */
.wk-tag legend { float: left; justify-self: start; padding: 0.375rem 0.75rem; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--weiss); background: var(--rot); border-radius: var(--radius); }

.wk-tag[data-fehler] { box-shadow: 0 0 0 2px var(--rot); }

.wk-tag-inhalt,
.wk-taeglich-liste { display: grid; gap: 1rem; }

.wk-eintrag { display: grid; gap: 1rem; }

.wk-schalter { min-height: 2.75rem; }

.wk-tag > legend + .wk-schalter { margin-top: -0.5rem; }

.wk-taeglich-eintrag { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

.wk-taeglich-eintrag[data-fehler] { outline: 2px solid var(--rot); outline-offset: 0.5rem; }

.wk-entfernen,
.wk-loeschen,
.wk-hinzu { justify-self: start; }

.wk-leiste {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--weiss);
  border-top: 2px solid var(--bordeaux);
}

.wk-meldungen:empty { display: none; }

/* Schmale Fenster: Aktionsleiste einzeilig und niedrig; Speichern breit, PDF und Löschen kurz daneben */
/* Leerzeichen im Zusatz bleibt in der Flex-Zeile erhalten */
.wk-zusatz { white-space: pre; }

@media (max-width: 40rem) {
  .wk-leiste { gap: 0.5rem; padding: 0.5rem 1rem; }
  .wk-leiste .knopf-zeile { flex-wrap: nowrap; gap: 0.5rem; }
  .wk-leiste .knopf { min-height: 2.75rem; padding: 0.25rem 0.75rem; text-transform: capitalize; }
  .wk-leiste .knopf-voll { flex: 1 1 auto; }
  .wk-zusatz { display: none; }
}

.wk-fehler,
.wk-erfolg { padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 600; }

.wk-fehler { background: #fdecea; color: #8a1410; border: 2px solid var(--rot-dunkel); }

.wk-erfolg { background: #eef6ee; color: #1f5a2b; border: 2px solid #2e7d3e; }

.wk-fehler[hidden],
.wk-erfolg[hidden] { display: none; }

/* Wochenwahl, Legende, Texte */
.wk-wochenwahl { display: flex; align-items: center; justify-content: center; gap: 1rem; }

.wk-wochenwahl-text { min-width: 11rem; text-align: center; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 800; }

.wk-legende-liste,
.wk-textliste { display: grid; gap: 1rem; }

.wk-legende-zeile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.5rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }

.wk-legende-zeile .wk-auswahl,
.wk-legende-zeile .wk-legende-werkzeug { grid-column: 1 / -1; }

.wk-legende-werkzeug { display: flex; gap: 0.5rem; }

.wk-symbol:disabled { color: var(--text-leise); background: color-mix(in srgb, var(--bordeaux) 8%, var(--weiss)); cursor: default; }

.wk-nr { text-align: center; }

.wk-auswahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.wk-auswahl button {
  min-height: 3rem;
  padding: 0.5rem 1rem;
  background: var(--weiss);
  color: var(--bordeaux);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.wk-auswahl button[aria-checked="true"] { background: var(--bordeaux); color: var(--weiss); }

.wk-auswahl button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Laden und Ausfall */
.wk-skelett { display: grid; gap: 1rem; }

.wk-skelett-zeile { height: 4rem; background: color-mix(in srgb, var(--bordeaux) 8%, var(--weiss)); border-radius: var(--radius); animation: wk-puls 1.4s ease-in-out infinite alternate; }

@keyframes wk-puls { from { opacity: 0.5; } to { opacity: 1; } }

.wk-ausfall { justify-items: start; }

/* Fenster */
.wk-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  background: var(--weiss);
  color: var(--text);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
  overflow: auto;
  overscroll-behavior: contain;
}

.wk-dialog-breit { width: min(44rem, calc(100vw - 2rem)); }

.wk-dialog::backdrop { background: rgb(40 8 4 / 0.55); }

.wk-dialog[open] { animation: einblenden var(--dauer-menue) var(--kurve) both; }

.wk-dialog h2 { padding: 1.25rem 1.5rem 0; font-size: 1.5rem; color: var(--bordeaux); }

.wk-dialog-koerper { display: grid; gap: 1rem; padding: 1rem 1.5rem 1.5rem; }

.wk-dialog-knoepfe { margin-top: 0.5rem; }

@media (min-width: 56rem) {
  .wk-wochen { grid-template-columns: 18rem minmax(0, 1fr); gap: 2rem; }

  .wk-liste { position: sticky; top: calc(var(--kopf-h-klein) + 1rem); }

  .wk-zurueck { display: none; }

  .wk-legende-zeile { grid-template-columns: 4.5rem minmax(0, 1fr) auto auto; }

  .wk-legende-zeile .wk-auswahl,
  .wk-legende-zeile .wk-legende-werkzeug { grid-column: auto; }

  .wk-eintrag { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: 1.5rem; }
}

@media (max-width: 55.99rem) {
  .wk-wochen[data-ansicht="liste"] .wk-platz { display: none; }

  .wk-wochen[data-ansicht="editor"] .wk-liste { display: none; }
}

/* Verwaltungsübersicht */
.admin-links { display: grid; gap: 1rem; }

.admin-link {
  display: grid;
  gap: 0.375rem;
  padding: 1.5rem;
  background: var(--weiss);
  color: var(--text);
  border: 2px solid var(--bordeaux);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background-color var(--dauer-ui) var(--kurve), transform var(--dauer-druck) var(--kurve);
}

.admin-link:active { transform: scale(0.99); }

.admin-link-titel { font-family: var(--schrift-titel); font-size: 1.375rem; font-weight: 800; color: var(--bordeaux); }

.admin-link-gross { padding-block: clamp(2rem, 6vw, 3rem); background: var(--bordeaux); }

.admin-link-gross .admin-link-titel { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); color: var(--weiss); }

.admin-link-gross .admin-link-text { color: var(--weiss); }

@media (hover: hover) and (pointer: fine) {
  .admin-link:hover { background: color-mix(in srgb, var(--bordeaux) 9%, var(--weiss)); }
  .admin-link-gross:hover { background: var(--rot-dunkel); }
}

@media (min-width: 48rem) {
  .admin-links { grid-template-columns: 1fr 1fr; }

  .admin-link-gross { grid-column: 1 / -1; }
}

/* Wild */
.wild-sorten { display: grid; gap: 1.25rem; align-content: start; }

.wild-text { display: grid; gap: 1rem; max-width: 40rem; }

.wild-sammel { max-width: 40rem; }

/* Kicker über der Überschrift im Seitenkopf: schmale Marke mit feinem Rand im Seitenstil */
/* Saison-Hinweis: bewusst ohne Rahmen, damit er nicht wie ein Knopf wirkt; kurzer Strich davor wie eine Notiz */
.kicker {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-auf-bordeaux);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.seitenkopf-foto .wild-hero-bild { object-fit: cover; object-position: center; }

/* Sortenblöcke: Foto und Text je Sorte; Handy gestapelt, Tablet Foto links, Desktop drei Spalten */
.wild-karten { display: grid; gap: 1.5rem; margin-top: 0.75rem; }

.wild-abschnitt {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: clip;
  background: var(--grund-getoent);
  border-radius: var(--radius);
}

.wild-foto { aspect-ratio: 4 / 3; border-radius: 0; }

.wild-karte-text { display: grid; gap: 0.75rem; align-content: start; padding: 1.25rem 1.5rem 1.5rem; }

.wild-karte-text h3 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.2; color: var(--bordeaux); text-wrap: balance; }

/* Sorte ohne Foto: Textkachel im Seitenstil (Bordeaux), gleiche Höhe wie die Nachbarn */
.wild-abschnitt-ohne-foto { grid-template-rows: 1fr; align-items: center; background: var(--bordeaux); color: var(--weiss); }

.wild-abschnitt-ohne-foto .wild-karte-text { padding: 1.75rem 1.5rem; }

.wild-abschnitt-ohne-foto .wild-karte-text h3 { color: var(--weiss); }

.wild-merkmale { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.wild-merkmale li {
  white-space: nowrap;
  padding: 0.3rem 0.75rem;
  background: var(--weiss);
  border: 1px solid color-mix(in srgb, var(--rot) 30%, var(--weiss));
  border-radius: var(--radius);
  color: var(--bordeaux);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

/* Wurst- und Schinkenliste, schnelle Küche: ruhiger Fließtext in Lesebreite */
.wild-spezial { display: grid; gap: 1.25rem; margin-top: 3rem; }

.wild-spezial h2 { line-height: 1.15; text-wrap: balance; max-width: 40rem; }

.wild-spezial > p { max-width: 40rem; }

/* Wurst- und Schinkenliste als ruhiges Kartenraster: Foto 4:3 oben, Name fett, Text; Einträge ohne Foto als Textkarte */
.wild-liste { display: grid; gap: 1.5rem; }

.wild-eintrag {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: clip;
  background: var(--grund-getoent);
  border-radius: var(--radius);
}

.wild-eintrag .wild-foto { aspect-ratio: 2 / 1; }

/* Eintrag ohne Foto: Farbfläche im Seitenstil, füllt die Zeilenhöhe der Nachbarkarten */
.wild-eintrag-ohne-foto { grid-template-rows: 1fr; align-items: center; background: var(--bordeaux); color: var(--weiss); }

.wild-eintrag-ohne-foto .wild-eintrag-text { padding: 1.75rem 1.5rem; font-size: 1.125rem; }

.wild-eintrag-ohne-foto .wild-eintrag-text strong { color: var(--weiss); }

.wild-eintrag-text { padding: 1.25rem 1.5rem 1.5rem; text-wrap: pretty; }

.wild-eintrag-text strong { color: var(--bordeaux); font-weight: 700; }

.wild-spezial p { text-wrap: pretty; }

/* „Für die schnelle Küche“: Text und Foto, ab 64rem nebeneinander */
.wild-schnell { gap: 1.5rem; align-items: center; }

.wild-schnell-text { display: grid; gap: 1.25rem; align-content: center; }

.wild-schnell-text p { max-width: 40rem; }

.wild-schnell-foto { aspect-ratio: 1600 / 822; }

.wild-geschenk { display: grid; gap: 2rem; align-items: center; }

.wild-geschenk-text p { text-wrap: balance; }

.wild-geschenk-text { display: grid; gap: 1rem; justify-items: start; max-width: 40rem; }

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .wild-abschnitt { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

  .wild-abschnitt-ohne-foto { grid-template-columns: minmax(0, 1fr); }

  .wild-karte-text { align-content: center; padding: 1.5rem 2rem; }

  .wild-geschenk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 40rem) {
  .wild-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Letzte Karte allein in der Zeile: über die ganze Breite, Foto links, Text rechts */
  .wild-eintrag:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }

  .wild-eintrag:last-child:nth-child(odd) .wild-foto { aspect-ratio: 4 / 3; }

  .wild-eintrag:last-child:nth-child(odd) .wild-eintrag-text { padding: 1.5rem 2rem; font-size: 1.125rem; }
}

@media (min-width: 48rem) {
  .wild-schnell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}

@media (min-width: 64rem) {
  .wild-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }

  .wild-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }

  .wild-eintrag:last-child:nth-child(3n + 2),
  .wild-eintrag:last-child:nth-child(3n) { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; align-items: stretch; }

  .wild-eintrag:last-child:nth-child(3n + 1) .wild-foto { aspect-ratio: 2 / 1; }

  .wild-eintrag:last-child:nth-child(3n + 1) .wild-eintrag-text { padding: 2rem 3rem; font-size: 1.25rem; }

  .wild-schnell { gap: 4rem; }

  .wild-geschenk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
}

.wild-zwei { display: grid; gap: 2.5rem; }

@media (min-width: 48rem) {
  .wild-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-content: start; }
}

.plan-wechselt { animation: einblenden var(--dauer-menue) var(--kurve) both; }

/* Bewegung: eine Kurve. Auftritt beim Laden, Einblenden und Enthüllen beim Rollen. */

.auftritt {
  animation: einblenden var(--dauer-auftritt) var(--kurve) both;
  animation-delay: calc(var(--i, 0) * var(--stufe));
}

.rahmen-auftritt { animation: enthuellen var(--dauer-bild) var(--kurve) 150ms both; }

.rahmen-auftritt img { animation: zurueck calc(var(--dauer-bild) + 300ms) var(--kurve) 150ms both; }

/* vorab.js hält den Auftritt an, bis Schrift (höchstens 1,5 s) und Einstiegsfoto (höchstens 2,5 s) da sind. */
html.schrift-fehlt .auftritt,
html.schrift-fehlt .wort > span,
html.bild-fehlt .rahmen-auftritt,
html.bild-fehlt .rahmen-auftritt img { animation-play-state: paused; }

@keyframes einblenden {
  from {
    opacity: 0;
    transform: translateY(var(--weg));
  }
}

@keyframes hoch {
  from {
    transform: translateY(105%);
  }
}

@keyframes enthuellen {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes zurueck {
  from {
    transform: scale(1.06);
  }
}

@keyframes fahrt {
  to {
    transform: scale(1.06);
  }
}

@keyframes folie-wechsel {
  0% { opacity: 0; }
  4% { opacity: 1; }
  20% { opacity: 1; }
  24%, 100% { opacity: 0; }
}

@keyframes folie-erst {
  0%, 20% { opacity: 1; }
  24%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

.buehne-folie:not(:first-child) { opacity: 0; }

/* Der Wechsel startet erst, wenn seite.js alle nachgeladenen Fotos gemeldet hat; sonst blendet die Bühne in ein leeres Bild über. */
@media (prefers-reduced-motion: no-preference) {
  .folien-bereit .buehne-folie { animation: folie-wechsel 30s linear infinite both; animation-delay: calc(var(--k, 0) * 6s); animation-fill-mode: none; }

  .folien-bereit .buehne-folie:first-child { animation-name: folie-erst; }

  .buehne-folie:nth-child(2) { --k: 1; }

  .buehne-folie:nth-child(3) { --k: 2; }

  .buehne-folie:nth-child(4) { --k: 3; }

  .buehne-folie:nth-child(5) { --k: 4; }
}

@media (prefers-reduced-motion: reduce) {
  .buehne-folie:not(:first-child) { display: none; }
}

@keyframes parallax {
  to {
    translate: 0 5%;
  }
}

/* Die Einstiegsfotos leben weiter: sehr langsame Fahrt, dazu Versatz beim Rollen (nur transform). */

.buehne-bild.rahmen-auftritt img,
.seitenkopf-foto.rahmen-auftritt img {
  animation:
    zurueck calc(var(--dauer-bild) + 300ms) var(--kurve) 150ms both,
    fahrt 18s ease-in-out 1.35s infinite alternate forwards;
}

@supports (animation-timeline: scroll()) {
  .buehne-bild.rahmen-auftritt img,
  .seitenkopf-foto.rahmen-auftritt img {
    animation:
      zurueck calc(var(--dauer-bild) + 300ms) var(--kurve) 150ms both,
      fahrt 18s ease-in-out 1.35s infinite alternate forwards,
      parallax linear both;
    animation-timeline: auto, auto, scroll(root);
    animation-range: normal, normal, 0px 70vh;
  }
}

.js [data-zeige] {
  opacity: 0;
  transform: translateY(var(--weg));
  transition:
    opacity var(--dauer-auftritt) var(--kurve),
    transform var(--dauer-auftritt) var(--kurve);
  transition-delay: calc(var(--i, 0) * var(--stufe));
}

.js [data-zeige][data-sichtbar] { opacity: 1; transform: none; }

/* Beim Sprung zu einem Ziel erscheint Übersprungenes sofort, damit nicht alles gleichzeitig einläuft. */
.js[data-sprung] [data-zeige],
.js[data-sprung] .rahmen[data-zeige] img { transition: none; }

.js .rahmen[data-zeige] { opacity: 1; transform: none; }

.js .rahmen[data-zeige] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition:
    clip-path var(--dauer-bild) var(--kurve),
    transform calc(var(--dauer-bild) + 300ms) var(--kurve),
    scale var(--dauer-hover-bild) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stufe)), calc(var(--i, 0) * var(--stufe)), 0s;
}

.js .rahmen[data-zeige][data-sichtbar] img {
  clip-path: inset(0);
  transform: none;
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--kurve); }

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }

  .js [data-zeige] { opacity: 1; transform: none; }
  .js .rahmen[data-zeige] img { clip-path: none; transform: none; }
}

/* Blättern im Essenplan: vorherige Woche | Zeitraum | nächste Woche */
.plan-blaettern {
  display: grid;
  grid-template-areas: "mitte mitte" "zurueck vor";
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: center;
}

.plan-blaettern-mitte {
  grid-area: mitte;
  margin: 0;
  text-align: center;
  font-weight: 600;
  color: var(--bordeaux);
}

.plan-blaettern-zurueck { grid-area: zurueck; }
.plan-blaettern-vor { grid-area: vor; }

/* Kurzer Text auf schmalen Viewports (das aria-label trägt den vollen Namen) */
.plan-blaettern .lang { display: none; }

@media (min-width: 26rem) {
  .plan-blaettern .kurz { display: none; }
  .plan-blaettern .lang { display: inline; }
}

.plan-blaettern button {
  min-height: 2.9rem;
  padding: 0.55rem 1.15rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  font-family: var(--schrift);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dauer-druck) var(--kurve),
    border-color var(--dauer-ui) var(--ease-out),
    color var(--dauer-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .plan-blaettern button:hover:not(:disabled) { border-color: var(--bordeaux); color: var(--bordeaux); }
}

.plan-blaettern button:active:not(:disabled) { transform: scale(0.97); }
.plan-blaettern button:disabled {
  background: var(--grund-getoent);
  color: var(--text-leise);
  border-style: dashed;
  cursor: not-allowed;
}
.plan-blaettern button:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

.plan-folgt { margin: 0; color: var(--text-leise); }

@media (min-width: 40rem) {
  .plan-blaettern {
    grid-template-areas: "zurueck mitte vor";
    grid-template-columns: 1fr auto 1fr;
  }

  .plan-blaettern-zurueck { justify-self: start; }
  .plan-blaettern-vor { justify-self: end; }
}