@charset "utf-8";
/* ===========================================================================
   AGRI GRILL - Marokkanisches Grillhaus, Hannover
   Ein Stilblatt fuer die ganze Seite.

   Farbsystem (aus dem Markenbogen, jeder Wert nachgerechnet):
     --rot      #A4151B  Markenrot. Flaeche und grosse Typografie.
                         Weiss darauf 13,0:1. Auf Creme 11,0:1.
     --flamme   #E20613  helles Flammenrot. NUR Flaechen und Formen,
                         niemals kleiner Text auf hell (4,1:1, faellt durch).
     --creme    #FDE8D3  helles Papier.
     --sand     #DCD4CB  zweites Papier, Standardgrund der Seite.
     --kohle    #1D1D1D  Text und dunkle Bloecke. Auf Creme 14,3:1.
     --gedaempft #5C4A45 gedaempfter Text. Auf Sand 5,6:1, auf Creme 6,9:1.

   EIN Akzent (rot) auf der ganzen Seite. Papier hell, dazu bewusst gesetzte
   Farbbloecke in Rot und Kohle, so wie der Markenbogen es vorgibt.

   Radienregel: Karten und Bilder 18 px, Eingabefelder 12 px,
   Knoepfe und Chips vollrund. Keine Ausnahmen.
   =========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  --rot: #a4151b;
  --rot-tief: #7c0f14;
  --flamme: #e20613;
  --creme: #fde8d3;
  --sand: #dcd4cb;
  --sand-tief: #cec5ba;
  --kohle: #1d1d1d;
  --kohle-weich: #2b2422;
  --gedaempft: #5c4a45;
  --creme-gedaempft: #e8cdb2;

  --r-karte: 18px;
  --r-feld: 12px;
  --r-pille: 999px;

  --spur: 0.18em;
  --schatten: 0 18px 44px rgba(45, 20, 16, 0.14);
  --schatten-tief: 0 26px 70px rgba(45, 20, 16, 0.22);
  --kante: 1px solid rgba(29, 29, 29, 0.12);

  --bahn: 1280px;
  --luft: clamp(1.25rem, 4vw, 2.5rem);
  --block: clamp(4rem, 9vw, 7.5rem);
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);

  --herz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.7-8-10.2A4.8 4.8 0 0 1 12 7a4.8 4.8 0 0 1 8 3.8C20 16.3 12 21 12 21z'/%3E%3C/svg%3E");
  --blase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H8l-4 4z'/%3E%3C/svg%3E");
  --flieger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11 22 3l-8 18-2-7z'/%3E%3C/svg%3E");
  --merken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-6-5-6 5z'/%3E%3C/svg%3E");
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13.5l-5-5 1.4-1.4L21.3 12l-7.4 6.4-1.4-1.4 5-5H4z'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--kohle);
  font: 400 1.0625rem/1.7 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: 'Rowdies', 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  line-height: 0.98;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}
.dunkel :focus-visible, .rotgrund :focus-visible { outline-color: var(--creme); }

.bahn {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: var(--luft);
}
.abschnitt { padding-block: var(--block); position: relative; }
.nur-lesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: absolute; left: var(--luft); top: -100px; z-index: 90;
  background: var(--kohle); color: var(--creme);
  padding: 0.7rem 1.2rem; border-radius: var(--r-pille);
  font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--kurve);
}
.sprung:focus { top: 0.75rem; }

/* ------------------------------------------------------- Flaechen und Grund */
.creme { background: var(--creme); }
.sandgrund { background: var(--sand); }
.rotgrund { background: var(--rot); color: var(--creme); }
.dunkel { background: var(--kohle); color: var(--creme); }
/* .seitenkopf ist ebenfalls ein roter Block und muss in jeder Umkehrregel
   mitstehen, sonst steht der gedaempfte Dunkelton auf Rot (1,59:1). bug-161 */
.rotgrund p, .dunkel p, .seitenkopf p { color: var(--creme-gedaempft); }
/* :not(.knopf) ist Pflicht: ein reiner Typselektor plus Klasse (0,1,1) schlaegt
   .knopf--hell (0,1,0), damit stand cremefarbene Schrift auf cremefarbenem
   Knopf, also unsichtbar. Siehe buglog bug-157. */
.rotgrund a:not(.knopf), .dunkel a:not(.knopf) { color: var(--creme); }

.muster {
  background-image: url('../img/marke-muster.png');
  background-size: 320px;
  background-color: var(--rot);
}
/* Muster mit Text darauf braucht einen Schleier, sonst kaempft die Schrift
   gegen das Motiv. Der Schleier liegt als erste Ebene im gleichen Hintergrund. */
.muster-band {
  background-image:
    linear-gradient(rgba(96, 11, 15, 0.82), rgba(96, 11, 15, 0.82)),
    url('../img/marke-muster.png');
  background-size: auto, 320px;
  background-color: var(--rot-tief);
  color: var(--creme);
}
.muster-band h2, .muster-band p { color: var(--creme); }

/* Flammenkante. Die Form liegt als Maske vor, die Farbe kommt aus der Klasse,
   damit jede Kante die Farbe ihres eigenen Abschnitts tragen kann. */
.flammen {
  --flammen-hoehe: clamp(46px, 6vw, 84px);
  position: relative;
  z-index: 2;
  height: var(--flammen-hoehe);
  margin-top: calc(var(--flammen-hoehe) * -1);
  background: currentColor;
  -webkit-mask: url('../img/flamme.svg') repeat-x left bottom / auto 100%;
  mask: url('../img/flamme.svg') repeat-x left bottom / auto 100%;
  pointer-events: none;
}
.flammen--creme { color: var(--creme); }
.flammen--sand { color: var(--sand); }
.flammen--rot { color: var(--rot); }
.flammen--flamme { color: var(--flamme); }
.flammen--kohle { color: var(--kohle); }
/* nach unten zeigende Zungen: sitzt am Fuss eines Abschnitts */
.flammen--ab {
  margin-top: 0;
  margin-bottom: calc(var(--flammen-hoehe) * -1);
  transform: scaleY(-1);
}

/* grosse Flammensilhouette als Wasserzeichen am Rand */
.wasserzeichen {
  position: absolute;
  inset-block: 0;
  width: clamp(120px, 15vw, 260px);
  background: var(--rot);
  opacity: 0.12;
  -webkit-mask: url('../img/flamme-gross.svg') no-repeat left center / contain;
  mask: url('../img/flamme-gross.svg') no-repeat left center / contain;
  pointer-events: none;
}
.wasserzeichen--links { left: 0; }
.wasserzeichen--rechts { right: 0; transform: scaleX(-1); }

/* ------------------------------------------------------------- Schriftbild */
.kicker {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 0.9rem;
  display: block;
}
.rotgrund .kicker, .dunkel .kicker, .seitenkopf .kicker {
  color: var(--creme);
  opacity: 0.8;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--gedaempft); }
.rotgrund .lede, .dunkel .lede, .seitenkopf .lede { color: var(--creme-gedaempft); }

/* Wortmarke. Der Punkt des I wird zur Flamme, so wie im Markenbogen. */
.wortmarke {
  font-family: 'Rowdies', sans-serif;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.01em;
  display: inline-block;
}
.wortmarke .zeile { display: block; }
.wortmarke .funke {
  position: relative;
  display: inline-block;
}
.wortmarke .funke::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 0.34em;
  height: 0.44em;
  transform: translate(-50%, 26%);
  background: var(--flamme);
  -webkit-mask: url('../img/flamme-gross.svg') no-repeat center / contain;
  mask: url('../img/flamme-gross.svg') no-repeat center / contain;
}

/* ---------------------------------------------------------------- Knoepfe */
.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 0;
  border-radius: var(--r-pille);
  background: var(--rot);
  color: var(--creme);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.28s var(--kurve), box-shadow 0.28s var(--kurve),
              color 0.28s var(--kurve);
}
.knopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kohle);
  transform: translateY(101%);
  transition: transform 0.36s var(--kurve);
}
.knopf .pfeil {
  width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--pfeil) no-repeat center / contain;
  mask: var(--pfeil) no-repeat center / contain;
  transition: transform 0.3s var(--kurve);
}
.knopf--rand {
  background: transparent;
  color: var(--kohle);
  box-shadow: inset 0 0 0 2px currentColor;
}
.knopf--rand::before { background: var(--kohle); }
.knopf--hell {
  background: var(--creme);
  color: var(--kohle);
}
.knopf--hell::before { background: var(--rot); }
.knopf--auf-dunkel {
  background: transparent;
  color: var(--creme);
  box-shadow: inset 0 0 0 2px rgba(253, 232, 211, 0.55);
}
.knopf--auf-dunkel::before { background: var(--creme); }
.knopf--klein { padding: 0.7rem 1.25rem; font-size: 0.8rem; }

/* Unter 400 px passt eine Beschriftung wie ANFRAGE VORBEREITEN nicht mehr in
   eine Zeile. Statt die Seite 6 px breiter zu machen, darf der Text dort
   umbrechen. Am Schreibtisch bleibt die Einzeilenregel. Siehe bug-162. */
@media (max-width: 400px) {
  .knopf {
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding-inline: 1.1rem;
  }
  .formular__fuss .knopf { width: 100%; }
}

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124, 15, 20, 0.28); }
  .knopf:hover::before { transform: translateY(0); }
  .knopf:hover, .knopf--rand:hover, .knopf--hell:hover { color: var(--creme); }
  .knopf--auf-dunkel:hover { color: var(--kohle); }
  .knopf:hover .pfeil { transform: translateX(4px); }
}
.knopf:active { transform: translateY(0) scale(0.985); }

/* Textlink mit wachsender Unterlinie */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--rot);
  position: relative;
}
.rotgrund .textlink, .dunkel .textlink { color: var(--creme); }
.textlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--kurve);
}
.textlink .pfeil {
  width: 0.95em; height: 0.95em;
  background: currentColor;
  -webkit-mask: var(--pfeil) no-repeat center / contain;
  mask: var(--pfeil) no-repeat center / contain;
  transition: transform 0.3s var(--kurve);
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover::after { transform: scaleX(1); }
  .textlink:hover .pfeil { transform: translateX(5px); }
}

/* ------------------------------------------------------------------- Kopf */
.dienstleiste {
  background: var(--kohle);
  color: var(--creme);
  font-size: 0.8rem;
}
.dienstleiste__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  justify-content: center;
  padding-block: 0.55rem;
}
.dienstleiste b { font-weight: 700; }
.dienstleiste .trenner { opacity: 0.4; }
.dienstleiste a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .dienstleiste a:hover { text-decoration: underline; }
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--creme);
  border-bottom: var(--kante);
  transition: box-shadow 0.3s var(--kurve);
}
.kopf.geklebt { box-shadow: 0 10px 30px rgba(45, 20, 16, 0.12); }
.kopf__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}
.kopf__marke {
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1;
  color: var(--rot);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex: none;
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding-block: 0.4rem;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--kurve);
}
.nav a[aria-current="page"] { color: var(--rot); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}
.kopf__tat { display: flex; align-items: center; gap: 0.6rem; }
.kopf__tat .knopf { display: none; }

.burger {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  gap: 5px;
  border: 0;
  border-radius: var(--r-pille);
  background: var(--rot);
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--creme);
  transition: transform 0.3s var(--kurve), opacity 0.2s linear;
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--rot);
  color: var(--creme);
  padding: 1.25rem var(--luft) 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}
.mobilmenue[hidden] { display: none; }
.mobilmenue__kopf { display: flex; align-items: center; justify-content: space-between; }
.mobilmenue__schliessen {
  width: 46px; height: 46px;
  border: 0; border-radius: var(--r-pille);
  background: rgba(253, 232, 211, 0.16);
  color: var(--creme);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  transition: transform 0.3s var(--kurve);
}
@media (hover: hover) and (pointer: fine) {
  .mobilmenue__schliessen:hover { transform: rotate(90deg); }
}
.mobilmenue nav ul { display: grid; gap: 0.25rem; }
.mobilmenue nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(253, 232, 211, 0.22);
  font-family: 'Rowdies', sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
}
.mobilmenue__fuss { display: grid; gap: 0.75rem; margin-top: auto; }
.mobilmenue__fuss .knopf { justify-content: center; }

@media (min-width: 1000px) {
  .nav { display: block; }
  .burger { display: none; }
  .kopf__tat .knopf { display: inline-flex; }
}

/* ------------------------------------------------------------------- Hero */
.hero {
  position: relative;
  min-height: clamp(520px, 82svh, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) var(--luft) clamp(5rem, 10vw, 8rem);
  overflow: hidden;
  background: var(--kohle);
  color: var(--creme);
}
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(20, 8, 6, 0.3) 0%, rgba(20, 8, 6, 0.64) 70%),
    linear-gradient(180deg, rgba(20, 8, 6, 0.45) 0%, rgba(20, 8, 6, 0.12) 45%, rgba(20, 8, 6, 0.6) 100%);
}
.hero__inhalt { position: relative; z-index: 1; max-width: 44rem; }
.hero .wortmarke {
  font-size: clamp(3.1rem, 12vw, 8.4rem);
  color: var(--creme);
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.hero__claim {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 1.2rem auto 2rem;
  color: var(--creme);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  max-width: 32ch;
}
.hero__tat { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* kleiner Freisteller, der ueber die Flammenkante ragt */
.hero__spiess {
  position: absolute;
  right: clamp(0.5rem, 3vw, 3rem);
  bottom: clamp(3.5rem, 8vw, 6rem);
  width: clamp(150px, 20vw, 300px);
  z-index: 3;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Kopf der Unterseiten */
/* Der Fuss braucht mehr Luft als die Flammenkante hoch ist (max 84 px),
   sonst liegt die Kante auf der letzten Textzeile. */
.seitenkopf {
  position: relative;
  padding: clamp(2.75rem, 7vw, 5rem) 0 clamp(5.5rem, 11vw, 8.5rem);
  background: var(--rot);
  color: var(--creme);
  overflow: hidden;
}
.seitenkopf__inhalt { position: relative; z-index: 1; max-width: 46rem; }
.seitenkopf h1 { color: var(--creme); }
.seitenkopf .lede { margin-top: 1rem; }
.seitenkopf__frei {
  position: absolute;
  right: clamp(0.5rem, 4vw, 4rem);
  bottom: clamp(3.5rem, 8vw, 6rem);
  width: clamp(130px, 18vw, 280px);
  z-index: 0;
  pointer-events: none;
}
.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  color: rgba(253, 232, 211, 0.82);
}
.brotkrumen a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .brotkrumen a:hover { text-decoration: underline; } }

/* --------------------------------------------------------- Abschnittskopf */
.kopfzeile { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.kopfzeile--mitte { margin-inline: auto; text-align: center; }
.kopfzeile p { margin-top: 1rem; }
.kopfzeile--mitte p { margin-inline: auto; }

/* -------------------------------------------------------- Markenbogen-Bento */
.bento {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  grid-template-columns: 1fr;
}
.bento > * { border-radius: var(--r-karte); overflow: hidden; }
.bento__muster { min-height: 220px; }
.bento__mal {
  background: var(--creme);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  text-align: center;
  min-height: 220px;
}
.bento__mal .wortmarke { font-size: clamp(1.6rem, 4vw, 2.5rem); color: var(--rot); }
.bento__mal .rund {
  font-size: 0.72rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--kohle);
  margin-top: 0.9rem;
  font-weight: 700;
}
.bento__bild { position: relative; min-height: 240px; }
.bento__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1vw, 0.9rem);
  border-radius: 0;
  overflow: visible;
}
.chip-farbe {
  border-radius: var(--r-karte);
  padding: 0.9rem 0.7rem;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.chip-farbe span:first-child {
  font-family: 'Rowdies', sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.chip-farbe--rot { background: var(--rot); color: var(--creme); }
.chip-farbe--creme { background: var(--creme); color: var(--rot); }
.chip-farbe--kohle { background: var(--kohle); color: var(--creme); }
.bento__claim {
  background: var(--rot);
  color: var(--creme);
  display: grid;
  align-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  min-height: 160px;
}
.bento__claim p {
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--creme);
  margin: 0;
}
.bento__frei {
  background: var(--sand-tief);
  display: grid;
  place-items: center;
  padding: 1rem;
  min-height: 200px;
}
.bento__frei img { max-height: 230px; width: auto; }

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__muster { grid-column: span 2; grid-row: span 2; min-height: 380px; }
  .bento__bild { grid-row: span 2; }
  .bento__claim { grid-column: span 2; }
  .bento__frei { grid-column: span 2; }
}

/* --------------------------------------------------------- Gerichtsraster */
.gerichte {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
.gericht {
  position: relative;
  display: block;
  border-radius: var(--r-karte);
  overflow: hidden;
  background: var(--kohle);
  color: var(--creme);
  text-decoration: none;
  isolation: isolate;
}
.gericht img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  transition: transform 0.7s var(--kurve);
}
.gericht::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 8, 6, 0) 38%, rgba(20, 8, 6, 0.84) 100%);
}
.gericht__text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(0.9rem, 2vw, 1.5rem);
  display: grid;
  gap: 0.25rem;
}
.gericht__name { font-family: 'Rowdies', sans-serif; font-size: clamp(1rem, 1.8vw, 1.35rem); }
.gericht__preis { font-weight: 700; font-size: 0.95rem; color: var(--creme); }
.gericht__preis::before {
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--flamme);
  vertical-align: middle;
  margin-right: 0.55rem;
  transition: width 0.35s var(--kurve);
}
.gericht--gross { grid-column: span 2; }
.gericht--gross img { aspect-ratio: 16 / 11; }
@media (hover: hover) and (pointer: fine) {
  .gericht:hover img { transform: scale(1.06); }
  .gericht:hover .gericht__preis::before { width: 42px; }
}
/* Drei Spalten, damit die 2x2-Kachel plus fuenf einfache Kacheln das Raster
   genau fuellen: 4 + 5 = 9 Zellen. Bei vier Spalten bliebe die dritte Reihe
   halb leer, und eine leere Zelle liest sich wie ein fehlendes Bild. */
/* Drei Spalten, damit die 2x2-Kachel plus fuenf einfache Kacheln das Raster
   genau fuellen: 4 + 5 = 9 Zellen. Bei vier Spalten bliebe die dritte Reihe
   halb leer, und eine leere Zelle liest sich wie ein fehlendes Bild.
   Das Bild der grossen Kachel liegt absolut, weil aspect-ratio und eine vom
   Raster gestreckte Zelle sich gegenseitig aufheben (Overflow ohne Ursache). */
@media (min-width: 860px) {
  .gerichte { grid-template-columns: repeat(3, 1fr); }
  .gericht--gross { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .gericht--gross img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------- gekippte Sozialkacheln */
.sozial {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
  justify-items: center;
}
.post {
  background: #fff;
  border-radius: var(--r-karte);
  box-shadow: var(--schatten-tief);
  overflow: hidden;
  width: min(100%, 340px);
  transition: transform 0.45s var(--kurve);
}
.post__kopf, .post__fuss {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  color: var(--kohle);
}
.post__kopf { justify-content: space-between; }
.post__marke { font-family: 'Rowdies', sans-serif; font-size: 0.95rem; color: var(--kohle); }
.post__punkt {
  width: 22px; height: 22px;
  border-radius: var(--r-pille);
  box-shadow: inset 0 0 0 2px var(--kohle);
  flex: none;
}
.post img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.post__fuss i {
  width: 18px; height: 18px;
  background: var(--kohle);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.post__fuss .herz { background: var(--flamme); -webkit-mask-image: var(--herz); mask-image: var(--herz); }
.post__fuss .blase { -webkit-mask-image: var(--blase); mask-image: var(--blase); }
.post__fuss .flieger { -webkit-mask-image: var(--flieger); mask-image: var(--flieger); }
.post__fuss .merken { margin-left: auto; -webkit-mask-image: var(--merken); mask-image: var(--merken); }

@media (min-width: 820px) {
  .sozial { grid-template-columns: repeat(3, 1fr); align-items: center; }
  .post--links { transform: rotate(-3deg); }
  .post--mitte { transform: rotate(2.5deg) translateY(-22px); }
  .post--rechts { transform: rotate(-1.5deg); }
}
@media (min-width: 820px) and (hover: hover) and (pointer: fine) {
  .post:hover { transform: rotate(0deg) translateY(-10px); }
}

/* ------------------------------------------------------- Doppelpanel breit */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: var(--rot);
}
.duo figure { margin: 0; position: relative; min-height: clamp(280px, 42vw, 520px); }
.duo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- Split mit Bild */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--bild-links > :first-child { order: 2; }
  .split--schmal { grid-template-columns: 0.85fr 1.15fr; }
}
.split figure { margin: 0; }
.rahmenbild {
  position: relative;
  border-radius: var(--r-karte);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.rahmenbild img { width: 100%; transition: transform 0.8s var(--kurve); }
@media (hover: hover) and (pointer: fine) {
  .rahmenbild:hover img { transform: scale(1.04); }
}

/* ----------------------------------------------------------------- Zitat */
.zitat blockquote {
  margin: 0;
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  line-height: 1.16;
  color: var(--creme);
}
.zitat figcaption {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--creme-gedaempft);
}
.zitat figcaption b { display: block; font-size: 1rem; color: var(--creme); }

/* -------------------------------------------------------- Zeiten und Fakten */
.zeiten { display: grid; gap: 0; max-width: 30rem; }
.zeiten li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}
.zeiten li + li { border-top: 1px dashed rgba(29, 29, 29, 0.18); }
.dunkel .zeiten li + li, .rotgrund .zeiten li + li { border-top-color: rgba(253, 232, 211, 0.24); }
.zeiten .tag { font-weight: 600; }
.zeiten .heute { color: var(--rot); font-weight: 700; }
/* Auf dunklem Grund faellt Markenrot durch (2,17:1). .fuss muss mit in die
   Liste, die Fusszeile traegt nicht die Klasse .dunkel. Siehe bug-159. */
.rotgrund .zeiten .heute,
.dunkel .zeiten .heute,
.fuss .zeiten .heute { color: #ffd7b0; }
.jetzt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pille);
  background: rgba(164, 21, 27, 0.1);
  color: var(--rot);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Nur die Pille faerbt um. Ohne .jetzt davor traf die Regel auch die
   Statusanzeige in der dunklen Dienstleiste: dunkelbraun auf Schwarz,
   2,02:1. Siehe bug-160. */
.jetzt.jetzt--zu { background: rgba(29, 29, 29, 0.08); color: var(--gedaempft); }

.fakten {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fakt { padding-top: 1rem; border-top: 2px solid var(--rot); }
.fakt b {
  display: block;
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--rot);
}
.fakt span { font-size: 0.9rem; color: var(--gedaempft); }
.rotgrund .fakt { border-top-color: rgba(253, 232, 211, 0.5); }
.rotgrund .fakt b { color: var(--creme); }
.rotgrund .fakt span { color: var(--creme-gedaempft); }

/* ------------------------------------------------------------- Speisekarte */
.kartenreiter {
  position: sticky;
  top: 72px;
  z-index: 30;
  background: var(--creme);
  border-bottom: var(--kante);
  padding-block: 0.75rem;
}
.kartenreiter ul {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.kartenreiter a {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-pille);
  background: rgba(29, 29, 29, 0.06);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s var(--kurve), color 0.25s var(--kurve);
}
.kartenreiter a.aktiv { background: var(--rot); color: var(--creme); }
@media (hover: hover) and (pointer: fine) {
  .kartenreiter a:hover { background: var(--kohle); color: var(--creme); }
}

.kartenblock + .kartenblock { margin-top: clamp(3rem, 7vw, 5.5rem); }
.kartenblock__kopf {
  position: relative;
  border-radius: var(--r-karte);
  overflow: hidden;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--kohle);
  color: var(--creme);
}
.kartenblock__kopf img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  opacity: 0.75;
}
.kartenblock__kopf figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(20, 8, 6, 0) 0%, rgba(20, 8, 6, 0.8) 70%);
}
.kartenblock__kopf h2 { color: var(--creme); }
.kartenblock__kopf p { color: var(--creme-gedaempft); margin: 0.5rem 0 0; max-width: 46ch; }

.positionen { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .positionen { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
}
.position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(29, 29, 29, 0.18);
}
.position__name { font-family: 'Rowdies', sans-serif; font-size: 1.05rem; line-height: 1.2; }
.position__preis {
  font-family: 'Rowdies', sans-serif;
  font-size: 1.05rem;
  color: var(--rot);
  white-space: nowrap;
}
.position__text {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--gedaempft);
  margin: 0.15rem 0 0;
  max-width: 52ch;
}
.marker {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pille);
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.marker--scharf { background: var(--rot); color: var(--creme); }
.marker--veggie { background: #2c5636; color: #fff; }
.marker--neu { background: var(--kohle); color: var(--creme); }

/* ------------------------------------------------------------------ Galerie */
.galerie {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(2, 1fr);
}
.galerie button {
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--r-karte);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
  height: 100%;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.7s var(--kurve); }
.galerie .hoch img { aspect-ratio: 4 / 5; }
.galerie button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(164, 21, 27, 0) 45%, rgba(164, 21, 27, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s var(--kurve);
}
@media (hover: hover) and (pointer: fine) {
  .galerie button:hover img { transform: scale(1.05); }
  .galerie button:hover::after { opacity: 1; }
}
/* Vier Spalten, drei Reihen, genau 12 Zellen: zwei hohe Kacheln (je 2 Reihen),
   zwei breite (je 2 Spalten) und vier einfache ergeben 4 + 4 + 4 = 12. Die
   Reihenfolge im Markup ist Teil der Rechnung, weil die Automatik von CSS-Grid
   nie zurueckgeht. Bilder gespannter Zellen liegen absolut, weil aspect-ratio
   in einer gestreckten Zelle die Breite berechnet und die Spalte sprengt. */
@media (min-width: 800px) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .galerie .hoch { grid-row: span 2; }
  .galerie .breit { grid-column: span 2; }
  .galerie .hoch img, .galerie .breit img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

.leuchtkasten {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 6, 5, 0.94);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.leuchtkasten[hidden] { display: none; }
.leuchtkasten figure { margin: 0; max-width: 100%; }
.leuchtkasten img { max-height: 78svh; width: auto; border-radius: var(--r-karte); }
.leuchtkasten figcaption { color: var(--creme); text-align: center; margin-top: 1rem; font-size: 0.9rem; }
.leuchtkasten__zu {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 46px; height: 46px;
  border: 0; border-radius: var(--r-pille);
  background: rgba(253, 232, 211, 0.16);
  color: var(--creme);
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.3s var(--kurve);
}
@media (hover: hover) and (pointer: fine) {
  .leuchtkasten__zu:hover { transform: rotate(90deg); }
}

/* --------------------------------------------------------------- Formulare */
.formular {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: 1fr;
  background: var(--creme);
  border-radius: var(--r-karte);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: var(--schatten);
}
@media (min-width: 700px) {
  .formular { grid-template-columns: 1fr 1fr; }
  .formular .voll { grid-column: 1 / -1; }
}
/* min-width:0 ist Pflicht: eine 1fr-Spur schrumpft nicht unter min-content, und
   textarea und input bringen eine eigene Mindestbreite mit. Bei 320 px lief das
   Formular sonst 6 px aus der Seite. Siehe bug-162. */
.feld { display: grid; gap: 0.4rem; min-width: 0; }
.feld input, .feld select, .feld textarea { min-width: 0; }
.feld label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.feld input, .feld select, .feld textarea {
  font: inherit;
  color: var(--kohle);
  background: #fff;
  border: 1px solid rgba(29, 29, 29, 0.32);
  border-radius: var(--r-feld);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #665551; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--rot);
  box-shadow: 0 0 0 3px rgba(164, 21, 27, 0.18);
  outline: none;
}
.feld .hinweis { font-size: 0.8rem; color: var(--gedaempft); }
.feld .fehler { font-size: 0.82rem; font-weight: 700; color: var(--rot); }
.feld .fehler[hidden] { display: none; }
.feld [aria-invalid="true"] { border-color: var(--rot); background: #fff6f4; }
.pflichtstern { color: var(--rot); }

.formular__fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}
.formular__fuss .hinweis { font-size: 0.82rem; color: var(--gedaempft); max-width: 42ch; }

/* Kanalwahl nach dem Absenden */
.kanal {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 6, 5, 0.72);
  display: grid;
  place-items: center;
  padding: var(--luft);
}
.kanal[hidden] { display: none; }
.kanal__karte {
  background: var(--creme);
  border-radius: var(--r-karte);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  width: min(100%, 32rem);
  box-shadow: var(--schatten-tief);
  position: relative;
}
.kanal__karte h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.kanal__karte p { margin: 0.75rem 0 1.5rem; color: var(--gedaempft); }
.kanal__wege { display: grid; gap: 0.7rem; }
.kanal__wege .knopf { justify-content: center; }
.kanal__zu {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pille);
  background: rgba(29, 29, 29, 0.08);
  font-size: 1.25rem;
  cursor: pointer;
  transition: transform 0.3s var(--kurve);
}
@media (hover: hover) and (pointer: fine) { .kanal__zu:hover { transform: rotate(90deg); } }
.kanal__vorschau {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-feld);
  background: rgba(29, 29, 29, 0.06);
  font-size: 0.85rem;
  white-space: pre-line;
  max-height: 170px;
  overflow: auto;
  color: var(--gedaempft);
}

/* ---------------------------------------------------------------- Akkordeon */
.akkordeon { display: grid; gap: 0.75rem; max-width: 52rem; }
.akkordeon__stueck { background: var(--creme); border-radius: var(--r-karte); overflow: hidden; }
.akkordeon__knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
  border: 0;
  background: none;
  text-align: left;
  font-family: 'Rowdies', sans-serif;
  font-size: 1.02rem;
  cursor: pointer;
}
.akkordeon__knopf .zeichen {
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--r-pille);
  background: var(--rot);
  position: relative;
  transition: transform 0.35s var(--kurve);
}
.akkordeon__knopf .zeichen::before,
.akkordeon__knopf .zeichen::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 2px;
  background: var(--creme);
  transform: translateY(-1px);
}
.akkordeon__knopf .zeichen::after { transform: translateY(-1px) rotate(90deg); transition: opacity 0.25s linear; }
.akkordeon__knopf[aria-expanded="true"] .zeichen { transform: rotate(180deg); }
.akkordeon__knopf[aria-expanded="true"] .zeichen::after { opacity: 0; }
.akkordeon__text { padding: 0 clamp(1rem, 2.5vw, 1.5rem) 1.3rem; }
.akkordeon__text[hidden] { display: none; }
.akkordeon__text p { color: var(--gedaempft); }

/* ------------------------------------------------------------------- Karten */
.karten { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .karten--zwei { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .karten--drei { grid-template-columns: repeat(3, 1fr); } }
.karte {
  background: var(--creme);
  border-radius: var(--r-karte);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
  transition: transform 0.35s var(--kurve), box-shadow 0.35s var(--kurve);
}
.karte h3 { color: var(--rot); }
.karte p { color: var(--gedaempft); }
.dunkel .karte, .rotgrund .karte { background: rgba(253, 232, 211, 0.12); }
.dunkel .karte h3, .rotgrund .karte h3 { color: var(--creme); }
.dunkel .karte p, .rotgrund .karte p { color: var(--creme-gedaempft); }
@media (hover: hover) and (pointer: fine) {
  .karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
}
.karte__nummer {
  font-family: 'Rowdies', sans-serif;
  font-size: 1.6rem;
  color: var(--flamme);
  line-height: 1;
}
.rotgrund .karte__nummer, .dunkel .karte__nummer { color: #ffb199; }

/* Laufband, genau einmal auf der Seite */
.laufband {
  overflow: hidden;
  background: var(--rot);
  color: var(--creme);
  padding-block: 0.9rem;
  border-block: 3px solid var(--rot-tief);
}
.laufband__spur {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: laufen 38s linear infinite;
}
.laufband span {
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}
.laufband span::after {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--creme);
  flex: none;
}
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- Fusszeile */
.fuss { background: var(--kohle); color: var(--creme); position: relative; }
.fuss__oben {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}
@media (min-width: 820px) {
  .fuss__oben { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
}
.fuss .wortmarke { font-size: clamp(2rem, 5vw, 3rem); color: var(--creme); }
.fuss h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  letter-spacing: var(--spur);
  text-transform: uppercase;
  color: var(--creme);
  opacity: 0.66;
  margin-bottom: 1rem;
}
.fuss ul { display: grid; gap: 0.55rem; }
.fuss a { text-decoration: none; position: relative; }
.fuss a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--kurve);
}
@media (hover: hover) and (pointer: fine) { .fuss a:hover::after { transform: scaleX(1); } }
.fuss p { color: rgba(253, 232, 211, 0.78); }
.fuss__unten {
  border-top: 1px solid rgba(253, 232, 211, 0.18);
  padding-block: 1.25rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(253, 232, 211, 0.74);
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.demo-hinweis {
  background: var(--rot-tief);
  color: var(--creme);
  font-size: 0.84rem;
  padding-block: 0.8rem;
}
.demo-hinweis p { max-width: none; margin: 0; color: var(--creme); }

/* -------------------------------------------------------------- Rechtstexte */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-top: 2.5rem; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.rechtstext p, .rechtstext li { color: var(--gedaempft); }
.rechtstext ul { list-style: disc; padding-left: 1.2rem; display: grid; gap: 0.4rem; margin-bottom: 1.1em; }
.rechtstext a { color: var(--rot); }
.rechtstext dl { display: grid; gap: 0.3rem; margin: 0 0 1.2em; }
.rechtstext dt { font-weight: 700; color: var(--kohle); }
.rechtstext dd { margin: 0 0 0.6rem; color: var(--gedaempft); }

/* --------------------------------------------------------------------- 404 */
.vierhundert { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .vierhundert { grid-template-columns: 1fr 1fr; } }
.vierhundert__zahl {
  font-family: 'Rowdies', sans-serif;
  font-size: clamp(4.5rem, 16vw, 11rem);
  line-height: 0.82;
  color: var(--rot);
}

/* --------------------------------------------------------------- Einblenden */
.auf { opacity: 0; translate: 0 22px; transition: opacity 0.7s var(--kurve), translate 0.7s var(--kurve); }
.auf-da { opacity: 1; translate: none; }
.auf--1 { transition-delay: 0.06s; }
.auf--2 { transition-delay: 0.12s; }
.auf--3 { transition-delay: 0.18s; }
.auf--4 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .auf { opacity: 1; translate: none; }
  .laufband__spur { animation: none; }
  .post--links, .post--mitte, .post--rechts { transform: none; }
}