/* ============================================================
   FELLINI Mosbach — Gestaltung
   ------------------------------------------------------------
   Ein Haus, das seit Jahren Pizza aus dem Holzofen holt: warm,
   handfest, aber aufgeraeumt. Papierfarbener Grund, tiefes
   Waldgruen fuer die Flaechen, das Rot des Bestecks aus dem Logo
   als einziges Signal. Bewegung nur dort, wo sie etwas erklaert.

   Farben stammen aus dem Material des Betriebs, nicht aus einer
   Palette: Gruen #116D1A aus der Original-Wortmarke gemessen,
   Rot #B3321C aus dem Besteck im Volllogo, Limette #B8D96B von
   den Preisbalken der eigenen Speisekarte.
   ============================================================ */

/* ---------- Schriften: lokal, kein fremder Server ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Grundwerte ---------- */
:root {
  --gruen: #116D1A;
  --gruen-tief: #0E2B14;
  --gruen-dunkel: #143D1D;
  --limette: #B8D96B;
  --rot: #B3321C;
  --papier: #FAF6EE;
  --papier-warm: #F2EADB;
  --tinte: #17110D;
  --tinte-weich: #53483F;
  --linie: rgba(23, 17, 13, .12);
  --weiss: #FFFFFF;

  --rund: 14px;
  --rund-gross: 26px;
  --schatten: 0 1px 2px rgba(23, 17, 13, .06), 0 12px 30px rgba(23, 17, 13, .07);
  --schatten-tief: 0 2px 6px rgba(23, 17, 13, .10), 0 26px 60px rgba(23, 17, 13, .14);

  /* eine Kurve fuer alles, was sich bewegt: schnell los, weich aus */
  --kurve: cubic-bezier(.22, 1, .36, 1);

  --spalte: min(1180px, 100% - 2.5rem);
  --luft: clamp(4.5rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  /* clip statt hidden: hidden wuerde position:sticky im Kopf toeten */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papier);
  color: var(--tinte);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .97rem + .18vw, 1.1rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Typografie ----------
   Grosse Schrift laeuft enger, kleine Schrift etwas weiter: eine
   feste Laufweite waere bei einer der beiden Groessen falsch. */
h1, h2, h3 {
  font-family: Fraunces, Georgia, 'Times New Roman', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-weight: 700;
  margin: 0;
  color: var(--tinte);
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 120;
}
h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 72;
}
h3 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  font-variation-settings: 'opsz' 24;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.vorlauf {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gruen);
  margin: 0 0 1rem;
}
.fliess { font-size: 1.08rem; color: var(--tinte-weich); max-width: 62ch; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.zum-inhalt {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--gruen); color: var(--weiss);
  padding: .8rem 1.4rem; border-radius: 0 0 var(--rund) var(--rund); text-decoration: none;
}
.zum-inhalt:focus-visible { top: 0; }

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

mark.fehlt {
  background: #FFE8A3; color: #6B4B00; padding: .1em .45em;
  border-radius: 6px; font-weight: 600;
}

/* ---------- Bausteine ---------- */
.spalte { width: var(--spalte); margin-inline: auto; }
.abschnitt { padding-block: var(--luft); }
.abschnitt--eng { padding-block: calc(var(--luft) * .62); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem;
  background: var(--gruen); color: var(--weiss);
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--kurve), background-color .2s var(--kurve), box-shadow .2s var(--kurve);
  box-shadow: 0 1px 2px rgba(14, 43, 20, .2), 0 10px 24px rgba(14, 43, 20, .18);
}
.knopf:hover { background: #0D5714; }
/* Rueckmeldung kommt beim Druecken, nicht erst beim Loslassen */
.knopf:active { transform: scale(.97); }
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--klar {
  background: transparent; color: var(--tinte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
}
.knopf--klar:hover { background: rgba(23, 17, 13, .04); box-shadow: inset 0 0 0 1.5px rgba(23, 17, 13, .3); }
.knopf--klein { padding: .75rem 1.05rem; font-size: .92rem; }
.knopf--voll { width: 100%; }

/* ---------- Kopf ----------
   Liegt als milchige Ebene ueber dem Inhalt, der darunter
   durchlaeuft. Statt einer harten Trennlinie wird beim Scrollen
   nur die Flaeche dichter. */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 238, .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: background-color .3s var(--kurve), box-shadow .3s var(--kurve);
}
.kopf.ist-kompakt {
  background: rgba(250, 246, 238, .92);
  box-shadow: 0 1px 0 var(--linie), 0 10px 26px rgba(23, 17, 13, .06);
}
.kopf__innen {
  width: var(--spalte); margin-inline: auto;
  display: flex; align-items: center; gap: 1.4rem;
  padding-block: .9rem;
  transition: padding-block .3s var(--kurve);
}
.kopf.ist-kompakt .kopf__innen { padding-block: .6rem; }
/* min-height 44px: der Markenlink ist ein Tippziel, gemessen waren es 27px */
.kopf__marke {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  margin-right: auto; min-width: 0; min-height: 44px;
}
/* Die Wortmarke ist eine eigene Datei und traegt ihre Farbe selbst,
   deshalb hier nur die Groesse. */
.kopf__logo { width: clamp(108px, 12vw, 142px); height: auto; display: block; }
.kopf__zusatz {
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-weich); white-space: nowrap;
}
@media (max-width: 46rem) { .kopf__zusatz { display: none; } }

.nav { display: flex; gap: .3rem; }
.nav__punkt {
  position: relative; padding: .55rem .9rem; border-radius: 999px;
  text-decoration: none; font-weight: 550; font-size: .97rem; color: var(--tinte);
  transition: background-color .2s var(--kurve), color .2s var(--kurve);
}
.nav__punkt:hover { background: rgba(23, 17, 13, .05); }
.nav__punkt.ist-hier { color: var(--gruen); background: rgba(17, 109, 26, .09); }
@media (max-width: 60rem) { .nav, .kopf__tel { display: none; } }

.burger {
  display: none; width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center; gap: 5px; flex-direction: column;
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
}
.burger span {
  display: block; width: 22px; height: 2px; background: var(--tinte); border-radius: 2px;
  transition: transform .3s var(--kurve), opacity .2s var(--kurve);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 60rem) { .burger { display: flex; } }

.menue-mobil {
  position: fixed; inset: 0; z-index: 99;
  padding: 6.5rem 1.25rem 2rem;
  background: rgba(250, 246, 238, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex; flex-direction: column; gap: 1.5rem;
  overflow-y: auto;
}
.menue-mobil nav { display: flex; flex-direction: column; }
.menue-mobil a {
  padding: 1.05rem .4rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; font-family: Fraunces, Georgia, serif; font-size: 1.55rem; font-weight: 700;
  letter-spacing: -.015em;
}
.menue-mobil a small {
  display: block; font-family: Inter, sans-serif; font-size: .8rem; font-weight: 500;
  letter-spacing: 0; color: var(--tinte-weich); margin-top: .15rem;
}
html.menue-offen { overflow: hidden; }

/* ---------- Einblenden beim Scrollen ----------
   14 Pixel Weg, mehr nicht. Das Auge merkt die Ankunft, ohne dass
   die Seite wackelt. `ohne-weg` ist fuer alles, was beim Laden
   schon sichtbar ist: das soll nicht erst hereinfahren. */
[data-auf] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
  will-change: opacity, transform;
}
[data-auf].ist-da { opacity: 1; transform: none; will-change: auto; }
[data-auf].ohne-weg { transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-auf] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buehne ---------- */
.buehne { position: relative; padding-block: clamp(3rem, 7vw, 6rem) var(--luft); overflow: hidden; }
.buehne__raster {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) { .buehne__raster { grid-template-columns: 1.05fr .95fr; } }
.buehne__text { position: relative; z-index: 1; }
.buehne h1 .gruen { color: var(--gruen); display: block; }
.buehne__satz { margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--tinte-weich); max-width: 46ch; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.buehne__bild {
  position: relative; border-radius: var(--rund-gross); overflow: hidden;
  box-shadow: var(--schatten-tief);
  aspect-ratio: 4 / 5;
  /* Rueckfallhoehe, falls eine Engine aspect-ratio nicht kennt */
  min-height: 340px;
  background: var(--papier-warm);
}
.buehne__bild img { width: 100%; height: 100%; object-fit: cover; }

.marken-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem;
  margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--linie);
}
.marken-zeile div { display: flex; align-items: baseline; gap: .5rem; }
.marken-zeile b {
  font-family: Fraunces, Georgia, serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--gruen);
}
.marken-zeile span { font-size: .9rem; color: var(--tinte-weich); }

/* ---------- Karten ---------- */
.karten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.karte {
  background: var(--weiss); border-radius: var(--rund-gross); padding: 2rem 1.8rem;
  box-shadow: var(--schatten);
  transition: transform .35s var(--kurve), box-shadow .35s var(--kurve);
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-tief); }
.karte__zeichen {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(17, 109, 26, .1); color: var(--gruen); margin-bottom: 1.2rem;
}
.karte__zeichen svg { width: 24px; height: 24px; }
.karte h3 { margin-bottom: .5rem; }
.karte p { color: var(--tinte-weich); font-size: .98rem; }

/* ---------- Dunkler Abschnitt ---------- */
.dunkel {
  background: linear-gradient(180deg, var(--gruen-tief), #0A1F0F);
  color: var(--papier);
}
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--papier); }
.dunkel .vorlauf { color: var(--limette); }
.dunkel .fliess, .dunkel p { color: rgba(250, 246, 238, .76); }
.dunkel .knopf--klar { color: var(--papier); box-shadow: inset 0 0 0 1.5px rgba(250, 246, 238, .3); }
.dunkel .knopf--klar:hover { background: rgba(250, 246, 238, .08); }

/* ---------- Bildband ---------- */
.band { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.band figure { margin: 0; border-radius: var(--rund-gross); overflow: hidden; background: var(--papier-warm); }
.band img { width: 100%; aspect-ratio: 1; object-fit: cover; min-height: 200px; }
.band figure:first-child { grid-column: span 2; }
.band figure:first-child img { aspect-ratio: 16 / 10; }
@media (max-width: 40rem) { .band figure:first-child { grid-column: auto; } }

/* ---------- Speisekarte ---------- */
.werkzeug {
  position: sticky; top: 4.6rem; z-index: 20;
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  padding: .9rem; margin-bottom: 2.4rem;
  background: rgba(250, 246, 238, .86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px; box-shadow: var(--schatten);
}
.suchfeld { position: relative; flex: 1 1 230px; min-width: 0; }
.suchfeld input {
  width: 100%; padding: .7rem 1rem .7rem 2.6rem;
  border: 1.5px solid var(--linie); border-radius: 999px;
  background: var(--weiss); font: inherit; font-size: .95rem; color: var(--tinte);
}
.suchfeld input::placeholder { color: #9A9086; }
.suchfeld svg {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--tinte-weich); pointer-events: none;
}
.filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter button {
  padding: .55rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(23, 17, 13, .06); color: var(--tinte);
  font: inherit; font-size: .9rem; font-weight: 550;
  transition: background-color .2s var(--kurve), color .2s var(--kurve), transform .16s var(--kurve);
}
.filter button:hover { background: rgba(23, 17, 13, .1); }
.filter button:active { transform: scale(.97); }
.filter button.ist-an { background: var(--gruen); color: var(--weiss); }
.treffer { margin-left: auto; padding-right: .6rem; font-size: .88rem; color: var(--tinte-weich); white-space: nowrap; }

.gruppe { margin-bottom: 3.4rem; }
.gruppe__kopf { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .4rem; }
.gruppe__kopf h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.gruppe__zahl { font-size: .85rem; color: var(--tinte-weich); }
.gruppe__note { color: var(--tinte-weich); font-size: .95rem; margin-bottom: 1.6rem; }

.gerichte { display: grid; gap: .2rem; }
.gericht {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.4rem;
  padding: 1.05rem .4rem; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.gericht__name { font-weight: 600; font-size: 1.06rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gericht__preis { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; }
.gericht__text { grid-column: 1 / -1; color: var(--tinte-weich); font-size: .95rem; }
.gericht__gross { display: block; font-size: .82rem; color: var(--tinte-weich); font-family: Inter, sans-serif; font-weight: 500; }
.zeichen {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 6px;
  font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
}
.zeichen--stern { background: rgba(179, 50, 28, .12); color: var(--rot); }
.zeichen--scharf { background: rgba(179, 50, 28, .12); color: var(--rot); }
.zeichen--gruen { background: rgba(17, 109, 26, .12); color: var(--gruen); }

.leer { padding: 3rem 1rem; text-align: center; color: var(--tinte-weich); }

.hinweis {
  padding: 1.3rem 1.5rem; border-radius: var(--rund);
  background: var(--papier-warm); color: var(--tinte-weich); font-size: .95rem;
}
.hinweis strong { color: var(--tinte); }

/* ---------- Kopfbild der Speisekarte ---------- */
.karte-bild { margin: 2.6rem 0 0; border-radius: var(--rund-gross); overflow: hidden; box-shadow: var(--schatten); }
.karte-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; min-height: 200px; }

/* ---------- Zeiten und Kontakt ---------- */
.zeiten { display: grid; gap: .1rem; }
.zeit-zeile {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem .2rem; border-bottom: 1px solid var(--linie);
}
.zeit-zeile.ist-heute { font-weight: 650; color: var(--gruen); }
.zeit-zeile.ist-zu span:last-child { color: var(--tinte-weich); }

.kontakt-raster { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kontakt-karte {
  background: var(--weiss); border-radius: var(--rund-gross); padding: 1.8rem;
  box-shadow: var(--schatten); display: flex; flex-direction: column; gap: .6rem;
}
.kontakt-karte h3 { font-size: 1.1rem; }
/* :not(.knopf) ist Pflicht, nicht Kosmetik. Ohne das faerbt diese Regel
   auch den Knopf um: sie ist spezifischer als .knopf und machte dort
   gruene Schrift auf gruenem Grund, Kontrast 1,0. Gemessen, nicht geraten. */
.kontakt-karte a:not(.knopf) {
  font-weight: 600; color: var(--gruen); text-decoration: none; word-break: break-word;
  display: inline-block; padding-block: .8rem;   /* gemessen: ergibt rund 45 px Tippflaeche */
}
.kontakt-karte a:not(.knopf):hover { text-decoration: underline; }

/* ---------- Formular ---------- */
.kontakt-karte label {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .9rem; font-weight: 600; color: var(--tinte);
}
.kontakt-karte input[type="text"],
.kontakt-karte input[type="email"],
.kontakt-karte textarea {
  padding: .8rem 1rem; border: 1.5px solid var(--linie); border-radius: var(--rund);
  background: var(--papier); font: inherit; font-weight: 400; color: var(--tinte);
  resize: vertical;
}
.kontakt-karte .haken {
  flex-direction: row; align-items: flex-start; gap: .7rem;
  font-weight: 400; font-size: .88rem; color: var(--tinte-weich);
}
.kontakt-karte .haken input {
  /* Pflicht, sonst schluckt ein globales appearance:none die Kästchen */
  appearance: auto; -webkit-appearance: auto;
  width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex: none; accent-color: var(--gruen);
}
.kontakt-karte .haken a { color: var(--gruen); }
.kontakt-karte button { margin-top: .4rem; align-self: flex-start; }

/* ---------- Kartenplatz ---------- */
.karten-platz {
  display: grid; place-items: center;
  min-height: 320px; border-radius: var(--rund-gross);
  background: var(--papier-warm) url('/img/karte-platzhalter.svg') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
}
.karten-platz.ist-geladen { background: none; min-height: 0; }
.karten-platz iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Zwei Kaesten nebeneinander, jeder nur so hoch wie sein Inhalt.
   Ohne align-items:start zieht das Grid den kuerzeren Kasten auf die
   Hoehe des Bildes daneben und hinterlaesst eine grosse leere Flaeche. */
.paar-raster {
  display: grid; gap: 2rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.paar-raster figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 220px; }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 74ch; }
.recht h2 { margin-top: 2.6rem; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); }
.recht h3 { margin-top: 1.8rem; }
.recht p, .recht li { color: var(--tinte-weich); }
.recht ul { padding-left: 1.2rem; }
.recht li { margin-bottom: .5rem; }
.recht a { color: var(--gruen); }

/* ---------- Fuss ---------- */
.fuss { background: var(--gruen-tief); color: rgba(250, 246, 238, .78); padding-top: var(--luft); }
.fuss__innen {
  width: var(--spalte); margin-inline: auto;
  display: grid; gap: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-bottom: 3rem;
}
.fuss h2 { font-size: 1.05rem; color: var(--papier); margin-bottom: 1rem; font-family: Inter, sans-serif; font-weight: 650; letter-spacing: .02em; }
.fuss__logo { width: 150px; height: auto; }
.fuss__zusatz { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 246, 238, .6); margin: .7rem 0 1rem; }
.fuss__text { font-size: .95rem; line-height: 1.7; }
.fuss__text a { color: var(--papier); text-decoration: none; display: inline-block; padding-block: .55rem; }
.fuss__text a:hover { text-decoration: underline; }
.fuss__weg { color: rgba(250, 246, 238, .55); font-size: .88rem; }
.fuss__zeiten { display: grid; gap: .35rem; font-size: .95rem; }
.fuss__zeit { display: flex; justify-content: space-between; gap: 1rem; }
.fuss__zeit.ist-zu span:last-child { color: rgba(250, 246, 238, .66); }
.fuss__unten {
  border-top: 1px solid rgba(250, 246, 238, .14);
}
.fuss__unten {
  width: var(--spalte); margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between;
  padding-block: 1.5rem; font-size: .85rem;
}
.fuss__recht { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; }
.fuss__recht a { color: rgba(250, 246, 238, .78); text-decoration: none; }
.fuss__recht a:hover { color: var(--papier); text-decoration: underline; }
.fuss__credit { margin: 0; color: rgba(250, 246, 238, .55); }
.fuss__credit a { color: rgba(250, 246, 238, .75); text-decoration: none; }

/* ---------- 404 und Passwort ---------- */
.mitte {
  min-height: 72vh; display: grid; place-items: center; text-align: center;
  padding-block: var(--luft);
}
.mitte__innen { max-width: 34rem; }
.mitte .knopf { margin-top: 1.8rem; }

.tor {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: 2rem 1.25rem;
  background: linear-gradient(180deg, var(--gruen-tief), #0A1F0F); color: var(--papier);
}
.tor__karte {
  width: min(30rem, 100%); background: rgba(250, 246, 238, .06);
  border: 1px solid rgba(250, 246, 238, .16); border-radius: var(--rund-gross);
  padding: 2.6rem 2rem; text-align: center;
}
.tor__karte h1 { font-size: 2rem; color: var(--papier); }
.tor__logo { width: 160px; height: auto; margin: 0 auto 1.6rem; }
.tor input {
  width: 100%; margin: 1.4rem 0 1rem; padding: .9rem 1.1rem;
  border: 1px solid rgba(250, 246, 238, .25); border-radius: 999px;
  background: rgba(250, 246, 238, .08); color: var(--papier); font: inherit; text-align: center;
}
.tor p { color: rgba(250, 246, 238, .7); font-size: .95rem; }
.tor p a { display: inline-block; padding: .6rem .4rem; }

/* ---------- Rücksicht auf Systemeinstellungen ---------- */
@media (prefers-reduced-transparency: reduce) {
  .kopf, .menue-mobil, .werkzeug { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); }
}
@media (prefers-contrast: more) {
  :root { --linie: rgba(23, 17, 13, .45); --tinte-weich: #34291F; }
  .kopf { background: var(--papier); }
  .karte, .kontakt-karte { box-shadow: none; outline: 1.5px solid var(--linie); }
}

@media print {
  .kopf, .menue-mobil, .werkzeug, .fuss__unten, .buehne__knoepfe { display: none !important; }
  body { background: #fff; }
  .gericht { break-inside: avoid; }
}