/* ==========================================================================
   Reinekes Bar, Kerzers
   Die Farben sind aus der Fotografie des Kellers gemessen: Ziegelgewölbe,
   Kalkputz, die grünen Bankierslampen, das rote Leder, die dunkle Theke.
   Bauform der Seite ist der Rundbogen der drei Gewölbe (.bogen).
   ========================================================================== */

/* ---------- Schriften, selbst gehostet (OFL) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Marken-Werte ---------- */
:root {
  --keller:      #100C0A;
  --keller-2:    #191310;
  --keller-3:    #231A15;
  --ziegel:      #A6572F;   /* Flächen, Linien, Ränder — als Text zu dunkel (3.7:1) */
  --ziegel-hell: #C97A4A;   /* dieselbe Ziegelfarbe aufgehellt für Text (5.9:1) */
  --ziegel-tief: #5E2C11;
  --kalk:        #EDE4D6;
  --kalk-still:  #B0A28F;
  --messing:     #C9A24B;
  --lampe:       #2DAB64;
  --ochsenblut:  #6E1A22;

  --anzeige: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --text:    'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --rand:   clamp(1.25rem, 5vw, 5.5rem);
  --breite: 74rem;
  --luft:   clamp(3.75rem, 7.5vh, 6.5rem);

  --kurve: cubic-bezier(.22, .61, .36, 1);

  /* Datums- und Zeitfelder sowie Scrollbalken sollen zum dunklen Keller passen. */
  color-scheme: dark;
}

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

/* clip statt hidden: hidden am body macht den body zum Scroll-Container
   und bringt damit Layout und IntersectionObserver aus dem Tritt. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--keller);
  color: var(--kalk);
  font-family: var(--text);
  font-size: clamp(1.02rem, .3vw + .95rem, 1.14rem);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Kalkputz-Korn über der ganzen Seite, sehr zurückhaltend */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
  border-radius: 2px;
}

.verborgen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; top: -100px; left: var(--rand);
  z-index: 100; padding: .7em 1.2em;
  background: var(--messing); color: var(--keller);
  font-weight: 500; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* ==========================================================================
   Der Rundbogen: Signatur der drei Gewölbe.
   --ar ist das Seitenverhältnis (Breite/Höhe). Der senkrechte Radius muss die
   halbe Breite sein, damit der Scheitel ein echter Halbkreis wird:
   (B/2) / H = ar/2 -> calc(var(--ar) * 50%).
   ========================================================================== */
.bogen {
  position: relative;
  aspect-ratio: var(--ar, .84);
  border-radius: 50% 50% 3px 3px / calc(var(--ar, .84) * 50%) calc(var(--ar, .84) * 50%) 3px 3px;
  overflow: hidden;
  background: var(--keller-2);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .3),
              0 2rem 4rem -1.5rem rgba(0, 0, 0, .75);
}
/* picture ist ein Zwischenelement ohne eigene Höhe: ohne height:100% hier
   löst height:100% am img nicht auf und der Bogen bleibt unten leer. */
/* Bogenformen als Klassen statt style-Attribut: der vhost fährt style-src 'self',
   inline style-Attribute im Markup wären damit blockiert. */
.bogen-tor      { --ar: .84; }                  /* hochformatiges Rundbogentor */
.bogen-nische   { --ar: 1.35; --pos: 50% 38%; } /* stehende Nische */
.bogen-luenette { --ar: 2; }                    /* liegende Lünette, halber Kreis */

.bogen picture { display: block; width: 100%; height: 100%; }
.bogen img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.bogen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16, 12, 10, .55), transparent 55%);
}

/* ---------- Kopf ---------- */
.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem var(--rand);
  background: linear-gradient(rgba(16, 12, 10, .82), rgba(16, 12, 10, 0));
  transition: background .4s var(--kurve), border-color .4s var(--kurve);
  border-bottom: 1px solid transparent;
}
.kopf-fest {
  background: rgba(16, 12, 10, .94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(201, 162, 75, .22);
}

.marke {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; flex: none;
}
.marke-fuchs { width: auto; height: 2.1rem; color: var(--kalk); flex: none; }
.marke-text {
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 40, 'wght' 500, 'SOFT' 30, 'WONK' 0;
  font-size: 1.06rem;
  letter-spacing: .015em;
  line-height: 1;
}

.nav { display: flex; gap: 1.6rem; margin-inline-start: auto; }
.nav a {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
  text-decoration: none;
  color: var(--kalk-still);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav a:hover { color: var(--kalk); border-bottom-color: var(--messing); }

/* ---------- Die Lampe: brennt, wenn die Bar offen ist ---------- */
.status {
  display: flex; align-items: center; gap: .55rem;
  margin: 0; flex: none;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kalk-still);
}
.lampe {
  width: .58rem; height: .58rem; border-radius: 50%;
  background: #4A423A;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
  flex: none;
}
.status-offen .lampe,
.gross-status.status-offen .lampe {
  background: var(--lampe);
  box-shadow: 0 0 .5rem var(--lampe), 0 0 1.4rem rgba(45, 171, 100, .55);
  animation: atmen 4.5s ease-in-out infinite;
}
.status-offen .status-text { color: var(--kalk); }
.status-zu .lampe { background: var(--ochsenblut); }
@keyframes atmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

.kopf-knopf {
  display: none;
  margin-inline-start: auto;
  background: none; border: 1px solid rgba(201, 162, 75, .4);
  color: var(--kalk); font-family: var(--text);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .85rem; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(94svh, 60rem);
  display: flex; align-items: flex-end;
  padding: 9rem var(--rand) clamp(3rem, 7vh, 5.5rem);
  overflow: hidden;
}
.hero-bild { position: absolute; inset: 0; z-index: 0; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(166, 87, 47, .22), transparent 60%),
    linear-gradient(to top, var(--keller) 3%, rgba(16, 12, 10, .88) 32%, rgba(16, 12, 10, .45) 62%, rgba(16, 12, 10, .28) 80%, rgba(16, 12, 10, .5));
}
.hero-inhalt {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--breite);
  /* Auf schmalen Fenstern steht die Schrift auf der beleuchteten Flaschenwand. */
  text-shadow: 0 1px 22px rgba(16, 12, 10, .8), 0 1px 4px rgba(16, 12, 10, .55);
}
.hero-inhalt .knopf { text-shadow: none; }

.oberzeile {
  margin: 0 0 1.1rem;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--messing);
}
.hero-titel {
  margin: 0;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 144, 'wght' 420, 'SOFT' 45, 'WONK' 1;
  font-size: clamp(3.4rem, 12.5vw, 9.5rem);
  line-height: .88;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.hero-lead {
  max-width: 34ch;
  margin: 1.6rem 0 0;
  color: var(--kalk-still);
  font-size: clamp(1.06rem, .5vw + .95rem, 1.3rem);
  line-height: 1.6;
}
.hero-aktion { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.2rem; }

.knopf {
  display: inline-block;
  padding: .95em 1.9em;
  border: 1px solid rgba(237, 228, 214, .34);
  color: var(--kalk);
  font-family: var(--text);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  background: rgba(16, 12, 10, .35);
  cursor: pointer;
  transition: background .3s var(--kurve), border-color .3s var(--kurve), color .3s;
}
.knopf:hover { background: rgba(237, 228, 214, .1); border-color: var(--kalk); }
.knopf-voll {
  background: var(--messing);
  border-color: var(--messing);
  color: #17110C;
}
.knopf-voll:hover { background: #DCB55E; border-color: #DCB55E; color: #17110C; }

.hero-fakten {
  display: flex; flex-wrap: wrap; gap: 1.4rem 3.5rem;
  margin: 3.2rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid rgba(201, 162, 75, .28);
}
.hero-fakten dt {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--messing); margin-bottom: .3rem;
}
.hero-fakten dd { margin: 0; font-size: .98rem; color: var(--kalk); }

/* ---------- Abschnitte ---------- */
.abschnitt {
  max-width: var(--breite);
  margin-inline: auto;
  padding: var(--luft) var(--rand);
}
.abschnitt-kopf { max-width: 46rem; margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }

.titel {
  margin: 0 0 1.6rem;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 110, 'wght' 400, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.klein-titel {
  margin: 0 0 1rem;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 30, 'wght' 500, 'SOFT' 30, 'WONK' 0;
  font-size: 1.32rem;
  letter-spacing: -.005em;
}
.klein-titel.abstand { margin-top: 2.6rem; }

.fliess { margin: 0 0 1.15rem; color: var(--kalk-still); max-width: 40ch; }
.fliess.breit { max-width: 52ch; }

.losung {
  margin: 2.4rem 0 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--ziegel);
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 60, 'wght' 380, 'SOFT' 60, 'WONK' 1;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.32;
  color: var(--kalk);
  max-width: 26ch;
}

.raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
/* Bild links, Text rechts — der Text behält dabei die breitere Spalte. */
.raster-kehr { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.raster-kehr .spalte-text { order: 2; }
.raster-kehr .bogen-figur { order: 1; }

.bogen-figur { margin: 0; }
.bogen-figur figcaption {
  margin-top: 1rem;
  font-size: .78rem; letter-spacing: .04em;
  color: var(--kalk-still);
  text-align: center;
}

/* ---------- Der Name / der Fuchs ---------- */
.fuchs-notiz {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(201, 162, 75, .2);
}
.fuchs-bild { margin: 0; }
.fuchs-bild img {
  width: 100%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 75, .25);
  filter: saturate(1.05);
}
.fuchs-worte .fliess { max-width: 46ch; margin-bottom: 0; }
.fuchs-worte .oberzeile { margin-bottom: .7rem; }

/* ---------- Motto-Band ---------- */
.motto {
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(94, 44, 17, .5), transparent 70%),
    var(--keller-2);
  border-block: 1px solid rgba(201, 162, 75, .18);
  padding: clamp(3rem, 7vw, 5rem) var(--rand);
  text-align: center;
}
.motto-bild { margin: 0 auto; max-width: 34rem; }
.motto-bild img { width: 100%; border-radius: 2px; }
.motto-text {
  margin: 1.8rem auto 0;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--messing);
}

/* ---------- Karte ---------- */
.eigenes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
}
.drink {
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  background: linear-gradient(rgba(35, 26, 21, .85), rgba(25, 19, 16, .85));
  border: 1px solid rgba(201, 162, 75, .22);
  border-top: 2px solid var(--ziegel);
}
.drink-rolle {
  margin: 0 0 .8rem;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--messing);
}
.drink-name {
  margin: 0 0 .6rem;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 48, 'wght' 450, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.1;
}
.drink-teile {
  margin: 0 0 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(201, 162, 75, .2);
  color: var(--ziegel-hell);
  font-size: .94rem;
  letter-spacing: .06em;
}
.drink-text { margin: 0; color: var(--kalk-still); font-size: 1rem; }

.karte-unten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(201, 162, 75, .2);
}
.klassiker-titel {
  margin: 0 0 1.5rem;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--messing); font-weight: 500;
}
.klassiker-liste { list-style: none; margin: 0; padding: 0; }
.klassiker-liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(237, 228, 214, .1);
}
.k-name {
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 30, 'wght' 480, 'SOFT' 30, 'WONK' 0;
  font-size: 1.16rem;
}
.k-teile { color: var(--kalk-still); font-size: .9rem; }
.k-preis { margin-inline-start: auto; color: var(--messing); font-size: .95rem; }
.klassiker-fuss {
  margin: 1.8rem 0 0;
  color: var(--kalk-still);
  font-size: .95rem;
  max-width: 42ch;
}

/* ---------- Öffnungszeiten ---------- */
.gross-status {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 2rem;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 40, 'wght' 450, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  color: var(--kalk);
}
.lampe-gross { width: .82rem; height: .82rem; }

.zeiten-tabelle {
  width: 100%; max-width: 26rem;
  border-collapse: collapse;
  font-size: 1rem;
}
.zeiten-tabelle th,
.zeiten-tabelle td {
  padding: .78rem .2rem;
  border-bottom: 1px solid rgba(237, 228, 214, .1);
  text-align: left;
  font-weight: 400;
}
.zeiten-tabelle th { color: var(--kalk-still); }
.zeiten-tabelle td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten-tabelle .heute th,
.zeiten-tabelle .heute td { color: var(--kalk); }
.zeiten-tabelle .heute th { position: relative; padding-left: 1rem; font-weight: 500; }
.zeiten-tabelle .heute th::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 1.1em;
  transform: translateY(-50%);
  background: var(--messing);
}
.zeiten-fuss {
  margin: 1.8rem 0 0;
  color: var(--kalk-still);
  font-size: .95rem;
  max-width: 38ch;
}

/* ---------- Finden ---------- */
.finden-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.link-zeile { margin: 1.6rem 0 0; }

.kontakt-liste { list-style: none; margin: 0; padding: 0; }
.kontakt-liste li {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(237, 228, 214, .1);
}
.k-label {
  min-width: 6rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--messing);
  padding-top: .35rem;
}
.kontakt-liste a { text-decoration-color: rgba(201, 162, 75, .5); text-underline-offset: .25em; }
.kontakt-liste a:hover { color: var(--messing); }

.feine-notiz { margin: 1.2rem 0 0; font-size: .88rem; color: var(--kalk-still); max-width: 40ch; }

/* ---------- Reservationsformular ---------- */
.reservation {
  padding: clamp(1.8rem, 3.5vw, 2.4rem);
  background: var(--keller-2);
  border: 1px solid rgba(201, 162, 75, .22);
}
.reservation .feine-notiz { margin-top: 0; margin-bottom: 1.6rem; }
.feld-paar { display: flex; flex-wrap: wrap; gap: 1rem; }
.feld { flex: 1 1 8rem; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
.feld label {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kalk-still);
}
.feld-opt { letter-spacing: .04em; text-transform: none; opacity: .7; }
.feld input,
.feld textarea {
  width: 100%;
  padding: .7em .8em;
  background: rgba(16, 12, 10, .8);
  border: 1px solid rgba(237, 228, 214, .2);
  border-radius: 2px;
  color: var(--kalk);
  font-family: var(--text);
  font-size: 1rem;
  transition: border-color .25s;
}
.feld input:hover,
.feld textarea:hover { border-color: rgba(237, 228, 214, .38); }
.feld textarea { resize: vertical; min-height: 3.4rem; }
.reservation .knopf-voll { width: 100%; margin-top: .5rem; text-align: center; border: 1px solid var(--messing); }
.form-hinweis { margin: 1rem 0 0; font-size: .88rem; min-height: 1.2em; color: var(--lampe); }
.form-hinweis.fehler { color: #E7906A; }

/* ---------- Stimmen ---------- */
.stimmen {
  max-width: 40rem;
  margin: clamp(3.5rem, 8vw, 5.5rem) auto 0;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(201, 162, 75, .2);
  text-align: center;
}
.stimmen blockquote {
  margin: 0;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 72, 'wght' 380, 'SOFT' 50, 'WONK' 1;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.34;
  text-wrap: balance;
}
.stimmen blockquote::before { content: '«'; color: var(--ziegel); margin-inline-end: .1em; }
.stimmen blockquote::after  { content: '»'; color: var(--ziegel); margin-inline-start: .1em; }
.stimmen figcaption {
  margin-top: 1.2rem;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--kalk-still);
}

/* ---------- Fuss ---------- */
.fuss {
  background: var(--keller-2);
  border-top: 1px solid rgba(201, 162, 75, .22);
  padding: clamp(3.5rem, 7vw, 5rem) var(--rand) 2rem;
}
.fuss-raster {
  max-width: var(--breite);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
}
.fuss-marke { display: flex; flex-direction: column; gap: 1rem; }
.fuss-fuchs { width: auto; height: 4.6rem; color: var(--ziegel); }
.fuss-losung {
  margin: 0;
  font-family: var(--anzeige);
  font-variation-settings: 'opsz' 30, 'wght' 450, 'SOFT' 40, 'WONK' 1;
  font-size: 1.1rem;
  color: var(--kalk);
}
.fuss-titel {
  margin: 0 0 .9rem;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--messing);
}
.fuss-block p,
.fuss-block address {
  margin: 0;
  font-style: normal;
  font-size: .92rem;
  line-height: 1.85;
  color: var(--kalk-still);
}
.fuss-block a { text-decoration-color: rgba(201, 162, 75, .5); text-underline-offset: .25em; }
.fuss-block a:hover { color: var(--messing); }
.fuss-zeile {
  max-width: var(--breite);
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 228, 214, .1);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--kalk-still);
}

/* ---------- Auftauchen beim Scrollen ----------
   Versteckt wird nur, wenn JavaScript läuft (html.js). Ohne JS steht der
   ganze Inhalt sofort da, statt unsichtbar zu bleiben. */
.js .auf {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .85s var(--kurve), transform .85s var(--kurve);
  transition-delay: calc((var(--i, 0) - 1) * 110ms);
}
.js .auf.sichtbar { opacity: 1; transform: none; }

/* ==========================================================================
   Schmalere Fenster
   ========================================================================== */
@media (max-width: 60rem) {
  .raster,
  .karte-unten { grid-template-columns: minmax(0, 1fr); }
  .raster-kehr .spalte-text,
  .raster-kehr .bogen-figur { order: 0; }
  .bogen-figur { max-width: 26rem; margin-inline: auto; }
  .karte-unten .bogen-figur { max-width: 32rem; }
}

@media (max-width: 48rem) {
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 4.6rem var(--rand) 1.6rem;
    background: rgba(16, 12, 10, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(201, 162, 75, .25);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .45s var(--kurve), visibility .45s;
  }
  .nav a {
    padding: .9rem 0;
    font-size: .9rem;
    border-bottom: 1px solid rgba(237, 228, 214, .1);
  }
  .nav a:hover { border-bottom-color: rgba(237, 228, 214, .1); }
  .nav-offen .nav { transform: none; visibility: visible; }
  .kopf-knopf { display: block; }
  .kopf { flex-wrap: wrap; gap: .8rem; }
  .status { order: 3; width: 100%; margin-top: .1rem; font-size: .68rem; }
  .marke-fuchs { height: 1.8rem; }
  .hero { padding-top: 8rem; }
  .fuchs-notiz { grid-template-columns: minmax(0, 1fr); }
  .fuchs-bild { max-width: 13rem; }
}

@media (max-width: 30rem) {
  .hero-fakten { gap: 1.2rem; }
  .hero-aktion .knopf { flex: 1 1 100%; text-align: center; }
}

/* ---------- Bewegung sparen ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .auf { opacity: 1; transform: none; transition: none; }
  .status-offen .lampe { animation: none; }
  .kopf, .nav, .knopf, .nav a { transition: none; }
}

/* ---------- Druck ---------- */
@media print {
  .kopf, .hero-bild, .reservation, .motto, body::after { display: none; }
  body { background: #fff; color: #000; }
  .bogen, .fuss { box-shadow: none; }
}