/* ==========================================================================
   Landfleischerei Döring – style.css
   Ein einziges Stylesheet für die gesamte Website.

   INHALT
   01  Schriften (lokal, DSGVO-konform)
   02  Farb- und Maßtokens        <- Farben hier zentral ändern
   03  Reset und Grundlagen
   04  Typografie
   05  Layout-Bausteine
   06  Kopfbereich und Navigation  <- Hamburger, mobil
   07  Bühne (Hero)
   08  Inhaltsbausteine
   09  Öffnungszeiten
   10  Karte
   11  Fußbereich
   12  Hilfsklassen
   13  Druckausgabe
   ========================================================================== */


/* 01 — SCHRIFTEN ============================================================
   Lokal gehostet. Es wird keine Verbindung zu Google Fonts o. ä. aufgebaut.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-var.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}


/* 02 — TOKENS ===============================================================
   Zentrale Stellschrauben. Wer Farben ändern will, ändert sie hier.
   ========================================================================== */

:root {
  /* Farben */
  --c-weiss:      #ffffff;
  --c-grau-hell:  #f5f4f1;   /* Flächen für abgesetzte Abschnitte */
  --c-grau-linie: #e3e1da;   /* Haarlinien */
  --c-grau-mittel:#6a675e;   /* Bildunterschriften, Nebentext (5,9:1 auf Weiß) */
  --c-tinte-weich:#3d3b34;   /* Fließtext */
  --c-tinte:      #16150f;   /* Überschriften */
  --c-rot:        #b01b1b;   /* AUSSCHLIESSLICH Copyright-Zeile */

  /* Typografie */
  --f-display: "Archivo", system-ui, sans-serif;
  --f-text:    "Source Serif", Georgia, serif;

  /* Maße */
  --breite:     72rem;
  --breite-eng: 44rem;
  --rand:       clamp(1.15rem, 5vw, 3rem);
  --luft-s:     clamp(1.75rem, 4vw, 2.75rem);
  --luft-m:     clamp(3rem, 7vw, 5rem);
  --luft-l:     clamp(4rem, 10vw, 7.5rem);

  /* Kopfhöhe – wird für scroll-margin und die mobile Navi gebraucht */
  --kopf-h: 4.25rem;

  /* Bewegung */
  --kurve: cubic-bezier(0.22, 0.61, 0.13, 1);

  /* Ebenen – keine willkürlichen Werte wie 9999 */
  --z-inhalt:  1;
  --z-kopf:   50;
  --z-schleier: 60;
  --z-navi:   70;
}

@media (min-width: 75em) {
  :root { --kopf-h: 7.5rem; }
}


/* 03 — RESET UND GRUNDLAGEN ================================================= */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS vergrößert sonst im Querformat */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
}

body {
  background: var(--c-weiss);
  color: var(--c-tinte-weich);
  font-family: var(--f-text);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums;
  overflow-x: hidden;              /* verhindert seitliches Wegrutschen */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(22, 21, 15, 0.08);
  min-height: 100vh;
  min-height: 100dvh;              /* iOS-Safari-Adressleiste */
}

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

a { color: inherit; }

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

::selection { background: var(--c-tinte); color: var(--c-weiss); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 04 — TYPOGRAFIE ===========================================================
   Die Auszeichnungsschrift greift die schmale, fette Versalschrift des
   Firmenlogos auf: Archivo mit Breitenachse auf 79 %.
   ========================================================================== */

h1, h2, h3, .eyebrow, .knopf, .navi a, .marke-text {
  font-family: var(--f-display);
  font-variant-numeric: lining-nums;
}

h1, h2, h3 {
  color: var(--c-tinte);
  font-stretch: 79%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.006em;
  word-spacing: 0.09em;      /* schmale Versalien brauchen sichtbare Wortluecken */
  line-height: 0.98;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 4.15rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.12; }

h4, .titel-klein {
  font-family: var(--f-display);
  font-stretch: 92%;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-tinte);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

p { text-wrap: pretty; }
p + p { margin-top: 0.9em; }

.fliess > p,
.fliess > ul,
.fliess > ol { max-width: 40em; }   /* rund 68 Zeichen Zeilenlänge */

.eyebrow {
  display: block;
  font-stretch: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  word-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  margin-bottom: 0.9rem;
}

.lead {
  font-size: clamp(1.15rem, 1.1vw + 0.95rem, 1.4rem);
  line-height: 1.5;
  color: var(--c-tinte);
  max-width: 34em;
}

.klein { font-size: 0.9375rem; color: var(--c-grau-mittel); }

strong, b { font-weight: 650; color: var(--c-tinte); }

/* Textlinks: Unterstrich mit Abstand, dicker beim Überfahren */
.fliess a,
.text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--c-grau-mittel);
  transition: text-decoration-color 0.2s var(--kurve);
}
.fliess a:hover,
.text-link:hover { text-decoration-color: var(--c-tinte); }

ul.liste {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.1rem;
  margin-top: 1.5rem;
}
ul.liste li {
  border-top: 1px solid var(--c-grau-linie);
  padding: 0.7rem 0;
  font-size: 1.0625rem;
}
ul.liste li:last-child { border-bottom: 1px solid var(--c-grau-linie); }

/* Zweispaltige Aufzählung ab Tablet */
ul.liste.zweispaltig {
  grid-template-columns: 1fr;
}
@media (min-width: 34em) {
  ul.liste.zweispaltig { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  ul.liste.zweispaltig li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--c-grau-linie); }
}


/* 05 — LAYOUT =============================================================== */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.huelle-eng { max-width: var(--breite-eng); }

.abschnitt { padding-block: var(--luft-l); }
.abschnitt-eng { padding-block: var(--luft-m); }

.flaeche {
  background: var(--c-grau-hell);
  border-block: 1px solid var(--c-grau-linie);
}

.trenner {
  border: 0;
  border-top: 1px solid var(--c-grau-linie);
  margin-block: var(--luft-m);
}

/* Bild-Text-Paar, wechselseitig */
.paar {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 48em) {
  .paar { grid-template-columns: 1fr 1fr; }
  .paar.gedreht > :first-child { order: 2; }
}

.paar + .paar { margin-top: var(--luft-m); }

/* Raster ohne Breakpoints */
.raster {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.bild-rahmen {
  overflow: hidden;
  background: var(--c-grau-hell);
}
.bild-rahmen img { width: 100%; }

figure figcaption {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  margin-top: 0.7rem;
}

/* Schaltflächen */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--c-tinte);
  color: var(--c-weiss);
  font-stretch: 92%;
  font-weight: 650;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-tinte);
  transition: background 0.25s var(--kurve), color 0.25s var(--kurve);
}
.knopf:hover { background: var(--c-weiss); color: var(--c-tinte); }
.knopf:active { transform: translateY(1px); }

.knopf.hell {
  background: transparent;
  color: var(--c-tinte);
}
.knopf.hell:hover { background: var(--c-tinte); color: var(--c-weiss); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}


/* 06 — KOPF UND NAVIGATION ==================================================
   Die Navigation funktioniert vollständig ohne JavaScript.
   Ein verstecktes Kontrollkästchen (#navi-schalter) steuert das Menü.
   Wichtig für iOS: das <label> braucht cursor:pointer, sonst reagiert
   Safari auf Touch nicht.
   ========================================================================== */

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

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: var(--c-weiss);
  border-bottom: 1px solid var(--c-grau-linie);
  padding-top: env(safe-area-inset-top);
}

.kopf-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--kopf-h);
  padding-inline: var(--rand);
  max-width: var(--breite);
  margin-inline: auto;
}

.marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.marke img {
  width: auto;
  height: 2.5rem;
}
@media (min-width: 75em) {
  .marke img { height: 3.75rem; }
}

/* Telefon und Zeiten im Kopf – erst ab Tablet sichtbar */
.kopf-kontakt {
  display: none;
  text-align: right;
  font-family: var(--f-display);
  font-stretch: 96%;
  line-height: 1.35;
}
.kopf-kontakt .tel {
  display: block;
  font-size: 1.35rem;
  font-weight: 750;
  color: var(--c-tinte);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.kopf-kontakt .zeit {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
}
@media (min-width: 48em) { .kopf-kontakt { display: block; } }

/* --- Hamburger --------------------------------------------------------- */

.burger {
  /* mindestens 44 x 44 px Trefferfläche */
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.34rem;
  width: 2.9rem;
  height: 2.9rem;
  margin-right: -0.5rem;      /* optische Kante bündig zum Rand */
  cursor: pointer;            /* ZWINGEND für iOS Safari */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  background: none;
  border: 0;
  z-index: calc(var(--z-navi) + 1);
  position: relative;
}
.burger span {
  display: block;
  width: 1.6rem;
  height: 2px;
  background: var(--c-tinte);
  transition: transform 0.32s var(--kurve), opacity 0.18s linear;
}

/* Hamburger wird zum X */
.navi-schalter:checked ~ .kopf .burger span:nth-child(1) {
  transform: translateY(0.54rem) rotate(45deg);
}
.navi-schalter:checked ~ .kopf .burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.navi-schalter:checked ~ .kopf .burger span:nth-child(3) {
  transform: translateY(-0.54rem) rotate(-45deg);
}

.navi-schalter:checked ~ .kopf .burger {
  background: var(--c-weiss);
  box-shadow: 0 0 0 0.55rem var(--c-weiss);
  border-radius: 2px;
}

.navi-schalter:focus-visible ~ .kopf .burger {
  outline: 3px solid var(--c-tinte);
  outline-offset: 2px;
}

/* --- Menütafel (mobil) --------------------------------------------------- */

.navi {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(23rem, 88vw);
  height: 100vh;
  height: 100dvh;                  /* iOS: echte sichtbare Höhe */
  z-index: var(--z-navi);
  background: var(--c-weiss);
  border-left: 1px solid var(--c-grau-linie);
  padding: calc(var(--kopf-h) + env(safe-area-inset-top) + 1.5rem)
           clamp(1.25rem, 6vw, 2.25rem)
           calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* geschlossen: unsichtbar UND nicht antippbar */
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.36s var(--kurve), visibility 0s linear 0.36s;
}

.navi-schalter:checked ~ .kopf .navi {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.36s var(--kurve), visibility 0s linear 0s;
}

.navi ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.navi a {
  display: block;
  padding: 0.85rem 0;
  min-height: 2.9rem;                 /* Trefferfläche */
  border-bottom: 1px solid var(--c-grau-linie);
  color: var(--c-tinte);
  text-decoration: none;
  font-stretch: 84%;
  font-weight: 700;
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  word-spacing: 0.14em;
  line-height: 1.15;
}
.navi a:hover { color: var(--c-grau-mittel); }

.navi a[aria-current="page"] {
  color: var(--c-tinte);
  position: relative;
  padding-left: 1.15rem;
}
.navi a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--c-tinte);
}

.navi-fuss {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--c-tinte);
}
.navi-fuss a {
  font-size: 0.95rem;
  font-stretch: 100%;
  font-weight: 600;
  letter-spacing: 0.09em;
  padding: 0.6rem 0;
  min-height: 2.75rem;
  border-bottom: 0;
  color: var(--c-grau-mittel);
}
.navi-fuss a:hover { color: var(--c-tinte); }
.navi-fuss .navi-tel {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--f-display);
  font-stretch: 92%;
  font-weight: 750;
  font-size: 1.5rem;
  color: var(--c-tinte);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Abdunkelung hinter der Tafel; gleichzeitig Schließfläche */
.schleier {
  position: fixed;
  inset: 0;
  z-index: var(--z-schleier);
  background: rgba(22, 21, 15, 0.42);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.36s var(--kurve), visibility 0s linear 0.36s;
}
.navi-schalter:checked ~ .kopf .schleier {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.36s var(--kurve), visibility 0s linear 0s;
}

/* Seite hinter dem offenen Menü nicht mitscrollen (moderne Browser) */
html:has(.navi-schalter:checked) { overflow: hidden; }

/* --- Navigation ab Desktop: normale Leiste, kein Hamburger --------------- */

@media (min-width: 75em) {
  /* display:none nimmt den Schalter auch aus der Tabulatorreihenfolge */
  .navi-schalter, .burger, .schleier { display: none; }

  .navi {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    border-top: 1px solid var(--c-grau-linie);
  }

  .navi-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  .navi ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: clamp(0.7rem, 1.5vw, 1.6rem);
  }

  .navi a {
    padding: 0.85rem 0;
    min-height: 0;
    border-bottom: 3px solid transparent;
    font-size: 0.795rem;
    font-stretch: 78%;
    letter-spacing: 0.05em;
    word-spacing: 0.16em;
    white-space: nowrap;
  }
  .navi a:hover { color: var(--c-tinte); border-bottom-color: var(--c-grau-linie); }
  .navi a[aria-current="page"] {
    padding-left: 0;
    border-bottom-color: var(--c-tinte);
  }
  .navi a[aria-current="page"]::before { display: none; }

  .navi-fuss { display: none; }

  /* Die Kopfleiste wird zweizeilig: Marke + Kontakt, darunter die Navigation */
  .kopf-leiste { min-height: 4.75rem; }
}


/* 07 — BÜHNE ================================================================ */

.buehne {
  position: relative;
  background: var(--c-weiss);
}

.buehne-bild {
  width: 100%;
  height: clamp(19rem, 52vw, 34rem);
  object-fit: cover;
  opacity: 0.92;
}

.buehne-text {
  position: relative;
  background: var(--c-weiss);
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.buehne-tafel {
  background: var(--c-weiss);
  padding: clamp(1.75rem, 4.5vw, 3rem) 0 0;
  margin-top: clamp(-3.5rem, -6vw, -6rem);
  max-width: 46rem;
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
.buehne-tafel h1 { margin-bottom: 1.1rem; }

@media (min-width: 48em) {
  .buehne-tafel { padding-top: clamp(2rem, 4vw, 3.25rem); }
}

/* Schmalere Kopfzeile für Unterseiten */
.seitenkopf {
  padding-block: var(--luft-m) var(--luft-s);
  border-bottom: 1px solid var(--c-grau-linie);
}
.seitenkopf h1 { margin-bottom: 0.9rem; }
.seitenkopf .lead { margin-top: 1rem; }


/* 08 — INHALTSBAUSTEINE ===================================================== */

/* Brotkrume */
.krume {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  padding-top: 1.5rem;
}
.krume ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.krume li + li::before { content: "/"; margin-right: 0.5rem; color: var(--c-grau-linie); }
.krume a { text-decoration: none; }
.krume a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Teaser-Kachel: Bild oben, Text darunter, ganze Fläche klickbar */
.teaser { display: grid; gap: 1.1rem; text-decoration: none; }
.teaser .bild-rahmen img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  transition: transform 0.5s var(--kurve);
}
.teaser:hover .bild-rahmen img { transform: scale(1.035); }
.teaser h3 { margin-bottom: 0.4rem; }
.teaser p { font-size: 1rem; color: var(--c-tinte-weich); }
.teaser .mehr {
  font-family: var(--f-display);
  font-stretch: 96%;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-tinte);
  margin-top: 0.6rem;
  display: inline-block;
}
.teaser:hover .mehr { text-decoration: underline; text-underline-offset: 0.25em; }

/* Aushang – die Wochenblätter für Angebot und Mittagstisch */
.aushang {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 48em) {
  .aushang { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}
.aushang-blatt {
  background: var(--c-weiss);
  border: 1px solid var(--c-grau-linie);
  padding: clamp(0.6rem, 1.5vw, 1rem);
  box-shadow: 0 1px 2px rgba(22,21,15,.04), 0 12px 28px -14px rgba(22,21,15,.22);
}
.aushang-blatt img { width: 100%; }

/* Meldungsblock auf der Aktuelles-Seite */
.meldung { padding-block: var(--luft-m); border-top: 1px solid var(--c-grau-linie); }
.meldung:first-of-type { border-top: 0; padding-top: 0; }
.meldung h2 { margin-bottom: 1.1rem; }
.meldung .bild-rahmen { margin-bottom: 1.75rem; }
.meldung .datum {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  display: block;
  margin-bottom: 0.75rem;
}

/* Kontaktdaten-Block */
.daten { font-style: normal; }
.daten dt {
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  margin-top: 1.5rem;
}
.daten dt:first-child { margin-top: 0; }
.daten dd { margin: 0.3rem 0 0; font-size: 1.0625rem; }
.daten dd a { text-decoration: none; border-bottom: 1px solid var(--c-grau-linie); }
.daten dd a:hover { border-bottom-color: var(--c-tinte); }
.daten .gross {
  font-family: var(--f-display);
  font-stretch: 92%;
  font-weight: 750;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--c-tinte);
  letter-spacing: -0.015em;
  text-decoration: none;
  border: 0;
}

/* Hinweiskasten (z. B. Waldladen auf Nebenseiten) */
.hinweis {
  border-left: 3px solid var(--c-tinte);
  padding: 0.35rem 0 0.35rem 1.25rem;
  font-size: 1rem;
}
.hinweis h4, .hinweis .titel-klein { margin-bottom: 0.35rem; }

/* Rechtstexte */
.rechtstext h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-top: var(--luft-s); }
.rechtstext h3 {
  font-size: 1.05rem;
  font-stretch: 92%;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1.9rem;
  margin-bottom: 0.5rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext ul { max-width: 40em; font-size: 1.0313rem; }
.rechtstext ul { margin: 0.75rem 0 0 1.15rem; padding: 0; }
.rechtstext li { margin-bottom: 0.35rem; }
.rechtstext a { text-decoration: underline; text-underline-offset: 0.18em; word-break: break-word; }


/* 09 — ÖFFNUNGSZEITEN =======================================================
   Die Wochentabelle. Ist JavaScript aktiv, wird der heutige Tag markiert.
   Ohne JavaScript bleibt es eine vollständig lesbare Liste.
   ========================================================================== */

.zeiten {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 26rem;
}
.zeiten li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--c-grau-linie);
  font-size: 1.0313rem;
}
.zeiten li:first-child { border-top: 1px solid var(--c-grau-linie); }
.zeiten .tag {
  font-family: var(--f-display);
  font-stretch: 96%;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.zeiten li[data-heute] {
  background: var(--c-grau-hell);
  margin-inline: -0.85rem;
  padding-inline: 0.85rem;
  border-color: var(--c-grau-linie);
}
.zeiten li[data-heute] .tag::after {
  content: " heute";
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-grau-mittel);
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
}


/* 10 — KARTE ================================================================
   Die Karte lädt erst nach einem Klick. Vorher wird keine Verbindung zu
   OpenStreetMap aufgebaut, es werden also keine Daten übertragen.
   ========================================================================== */

.karte {
  position: relative;
  border: 1px solid var(--c-grau-linie);
  background: var(--c-grau-hell);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: var(--rand);
  text-align: center;
}
@media (min-width: 48em) { .karte { aspect-ratio: 16 / 8; } }

.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
.karte.geladen { display: block; padding: 0; }

.karte-hinweis { max-width: 30rem; }
.karte-hinweis .titel-klein {
  font-stretch: 79%;
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.006em;
  word-spacing: 0.09em;
  margin-bottom: 0.6rem;
}
.karte-hinweis p { font-size: 0.95rem; color: var(--c-grau-mittel); }
.karte-hinweis .knopf-reihe { justify-content: center; margin-top: 1.25rem; }


/* 11 — FUSSBEREICH ========================================================== */

.fuss {
  background: var(--c-grau-hell);
  border-top: 1px solid var(--c-grau-linie);
  padding-top: var(--luft-m);
  margin-top: var(--luft-l);
}

.fuss-raster {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  padding-bottom: var(--luft-m);
}

.fuss h4, .fuss .titel-klein {
  font-stretch: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-grau-mittel);
  margin-bottom: 1rem;
}

.fuss p, .fuss li { font-size: 1rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.15rem; }
.fuss li a {
  display: inline-block;
  padding: 0.45rem 0;
  min-height: 2.75rem;
  line-height: 1.85;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fuss li a:hover { border-bottom-color: var(--c-tinte); }

.fuss .zeiten { max-width: none; }
.fuss .zeiten li { font-size: 0.92rem; gap: 0.75rem; }
.fuss .zeiten .tag { flex: 1 1 auto; }
.fuss .zeiten li > span:last-child { white-space: nowrap; }
.fuss .zeiten li[data-heute] { margin-inline: -0.6rem; padding-inline: 0.6rem; }

.fuss-tel {
  font-family: var(--f-display);
  font-stretch: 92%;
  font-weight: 750;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--c-tinte);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.35rem;
}

.fuss-marke img { height: 3.25rem; width: auto; margin-bottom: 1.25rem; }

/* Zeile ganz unten – die einzige rote Stelle der Website */
.copyright {
  border-top: 1px solid var(--c-grau-linie);
  background: var(--c-weiss);
  padding-block: 1.35rem;
  padding-bottom: calc(1.35rem + env(safe-area-inset-bottom));
}
.copyright p {
  color: var(--c-rot);
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.6;
}
.copyright a { color: var(--c-rot); text-decoration: none; }
.copyright a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.copyright .teiler { opacity: 0.45; margin-inline: 0.4rem; }


/* 12 — HILFSKLASSEN ========================================================= */

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

/* Sprunglink für Tastatur- und Screenreader-Bedienung */
.sprunglink {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  background: var(--c-tinte);
  color: var(--c-weiss);
  padding: 0.7rem 1.1rem;
  font-family: var(--f-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.sprunglink:focus { transform: translateY(0); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.zentriert { text-align: center; }


/* 13 — DRUCK ================================================================ */

@media print {
  .kopf, .fuss-raster, .burger, .schleier, .navi, .karte, .knopf { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .abschnitt { padding-block: 1rem; }
}