/* ==========================================================================
   Baukasten „Elegant“ – Bausteine
   Setzt tokens.css voraus. Mobile first, keine Inline-Styles nötig.
   ========================================================================== */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--gr-text);
  font-weight: 400;
  line-height: var(--zeile-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--akzent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 var(--abstand-4); }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--abstand-4); top: -4rem; z-index: 100;
  background: var(--espresso); color: var(--papier);
  padding: var(--abstand-3) var(--abstand-4);
  transition: top var(--dauer) var(--kurve);
}
.skip-link:focus { top: var(--abstand-4); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand-seite));
  margin-inline: auto;
  padding-inline: var(--rand-seite);
}
.sektion { padding-block: var(--abstand-8); }
.sektion--flaeche { background: var(--flaeche); border-block: var(--hairline); }
.sektion__kopf { text-align: center; max-width: var(--breite-text); margin: 0 auto var(--abstand-6); }

/* ---------- Typografie ---------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: var(--zeile-eng);
  letter-spacing: -0.01em;
  margin: 0 0 var(--abstand-4);
  text-wrap: balance;
}
h1, .display { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); }
h1 em, h2 em, .display em { font-style: italic; color: var(--akzent); }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--sperrung);
  text-transform: uppercase;
  color: var(--zier-text);
  margin-bottom: var(--abstand-3);
}
.lead { font-size: var(--gr-lead); color: var(--text-leise); max-width: var(--breite-text); }
.leise { color: var(--text-leise); }
.text { max-width: var(--breite-text); }

/* Hairline mit Zierzeichen, z. B. „&“ zwischen zwei Gängen */
.trenner {
  display: flex; align-items: center; gap: var(--abstand-4);
  color: var(--zier); margin: var(--abstand-5) 0;
}
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.trenner__zeichen { font-family: var(--serif); font-style: italic; font-size: 1.375rem; line-height: 1; }
.trenner--schlicht::after { display: none; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  min-height: var(--ziel);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--grund);
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.btn:hover { background: var(--akzent); border-color: var(--akzent); color: var(--papier); text-decoration: none; }
.ton-abend .btn:hover { color: var(--espresso); }
.btn--linie { background: transparent; color: var(--text); }
.btn--akzent { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.ton-abend .btn--akzent { color: var(--espresso); }
.btn--akzent:hover { background: var(--text); border-color: var(--text); color: var(--grund); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

.textlink {
  display: inline-flex; align-items: center; min-height: var(--ziel);
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--zier);
}
.textlink:hover { color: var(--akzent); border-color: var(--akzent); }

/* ---------- Hinweis-Banner (saisonal, z. B. Betriebsferien) ---------- */
.hinweis {
  background: var(--espresso); color: var(--papier);
  font-size: var(--gr-klein); letter-spacing: 0.04em; text-align: center;
  padding: var(--abstand-2) var(--rand-seite);
}
.hinweis p { margin: 0; }
.hinweis strong { font-weight: 500; color: var(--messing-hell); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dauer) var(--kurve);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4);
  min-height: 4.25rem;
}
.wortmarke {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  min-height: var(--ziel); padding-block: var(--abstand-2);
  color: var(--logo); text-decoration: none;
  font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1;
}
.wortmarke__jahr { font-style: normal; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; }
.wortmarke img { height: 2.5rem; width: auto; }

.nav-schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ziel); height: var(--ziel);
  background: none; border: 0; color: var(--text); cursor: pointer;
}
.nav-schalter__balken, .nav-schalter__balken::before, .nav-schalter__balken::after {
  display: block; width: 1.375rem; height: 1px; background: currentColor; position: relative;
  transition: transform var(--dauer) var(--kurve), background var(--dauer);
}
.nav-schalter__balken::before, .nav-schalter__balken::after { content: ""; position: absolute; left: 0; }
.nav-schalter__balken::before { top: -7px; }
.nav-schalter__balken::after { top: 7px; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken { background: transparent; }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::before { transform: translateY(7px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] .nav-schalter__balken::after { transform: translateY(-7px) rotate(-45deg); }

.nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: var(--hairline);
  padding: var(--abstand-3) var(--rand-seite) var(--abstand-5);
  display: none;
}
.nav.ist-offen { display: block; }
.nav__liste { list-style: none; }
.nav__link {
  display: flex; align-items: center; min-height: 3.25rem;
  border-bottom: var(--hairline);
  font-family: var(--serif); font-size: 1.5rem; color: var(--text); text-decoration: none;
}
.nav__link[aria-current="page"], .nav__link:hover { color: var(--akzent); }
.nav .btn { margin-top: var(--abstand-5); width: 100%; }

@media (min-width: 64em) {
  .nav-schalter { display: none; }
  .nav {
    position: static; display: flex !important; align-items: center; gap: var(--abstand-6);
    background: none; border: 0; padding: 0;
  }
  .nav__liste { display: flex; gap: var(--abstand-5); }
  .nav__link {
    min-height: var(--ziel); border: 0;
    font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
    letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--text-leise);
    background: linear-gradient(currentColor, currentColor) left calc(50% + .85rem) / 0 1px no-repeat;
    transition: background-size var(--dauer) var(--kurve), color var(--dauer);
  }
  .nav__link:hover, .nav__link[aria-current="page"] { background-size: 100% 1px; }
  .nav .btn { margin: 0; width: auto; }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--abstand-6) var(--abstand-8); border-top: var(--hairline); }
.hero__raster { display: grid; gap: var(--abstand-6); align-items: center; }
.hero__text .lead { margin-bottom: var(--abstand-5); }
.hero__fakten {
  display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5);
  list-style: none; margin-top: var(--abstand-6); padding-top: var(--abstand-4);
  border-top: var(--hairline); font-size: var(--gr-klein); color: var(--text-leise);
}
.hero__fakten strong { display: block; font-family: var(--serif); font-size: 1.375rem; font-weight: 500; color: var(--text); }
@media (min-width: 56em) {
  .hero__raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--abstand-7); }
}

/* ---------- Foto-Platzhalter ---------- */
.foto {
  position: relative; margin: 0;
  aspect-ratio: var(--verhaeltnis, 4 / 5);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(43, 29, 22, .035) 11px 22px),
    var(--papier-dunkel);
  border: 1px solid var(--linie);
  display: grid; place-items: center; text-align: center;
  padding: var(--abstand-5);
  color: var(--rinde);
}
.foto::before {           /* feiner Innenrahmen wie ein Passepartout */
  content: ""; position: absolute; inset: 0.75rem; border: 1px solid rgba(168, 131, 74, .45); pointer-events: none;
}
.foto--quer { --verhaeltnis: 3 / 2; }
.foto--breit { --verhaeltnis: 16 / 9; }
.foto--quadrat { --verhaeltnis: 1 / 1; }
.foto__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--messing-text); }
.foto__motiv { display: block; font-family: var(--serif); font-style: italic; font-size: 1.375rem; line-height: 1.25; color: var(--espresso); margin-top: var(--abstand-2); }
.foto__hinweis { display: block; font-size: var(--gr-klein); margin-top: var(--abstand-2); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Etiketten ---------- */
.etikett {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--zier-text); border: 1px solid currentColor; padding: 0.2em 0.6em; line-height: 1.4;
}
.etikett--veg { color: #3F5A2A; }
.ton-abend .etikett--veg { color: #B9D19A; }
.etikett--akzent { color: var(--akzent); }

/* ---------- Wochenleiste (Sprungnavigation, auf dem Handy wischbar) ---------- */
.wochenleiste {
  position: relative;
  display: flex; gap: var(--abstand-2);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 calc(var(--rand-seite) * -1) var(--abstand-6);
  padding: 2px var(--rand-seite);
  list-style: none;
}
.wochenleiste::-webkit-scrollbar { display: none; }
.wochenleiste li { flex: none; scroll-snap-align: start; }
.wochenleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 4.75rem; min-height: 3.5rem; padding: var(--abstand-2) var(--abstand-4);
  border: var(--hairline); background: var(--flaeche);
  color: var(--text); text-decoration: none; line-height: 1.2;
  transition: background var(--dauer), color var(--dauer), border-color var(--dauer);
}
.wochenleiste__tag { font-size: 0.75rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase; }
.wochenleiste__datum { font-family: var(--serif); font-size: 1.25rem; font-variant-numeric: lining-nums; }
.wochenleiste__zusatz { font-size: 0.6875rem; color: var(--text-leise); }
.wochenleiste a:hover { border-color: var(--akzent); }
.wochenleiste a.ist-heute { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.wochenleiste a.ist-heute .wochenleiste__zusatz { color: inherit; }
@media (min-width: 48em) { .wochenleiste { justify-content: center; margin-inline: 0; padding-inline: 2px; } }

/* ---------- Tageskarte (Mittagsmenü) ---------- */
.tageskarten { display: grid; gap: var(--abstand-5); }
@media (min-width: 64em) { .tageskarten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tageskarte {
  position: relative;
  background: var(--flaeche);
  border: var(--hairline);
  padding: var(--abstand-6) var(--abstand-5);
  max-width: 34rem; margin-inline: auto; width: 100%;
  text-align: center;
}
.tageskarte::before { content: ""; position: absolute; inset: 0.5rem; border: 1px solid var(--rand); pointer-events: none; }
.tageskarte.ist-heute { border-color: var(--akzent); }
.tageskarte__kopf { margin-bottom: var(--abstand-5); }
.tageskarte__tag { font-family: var(--serif); font-size: var(--gr-h3); margin: 0; }
.tageskarte__heute {
  display: inline-block; margin-top: var(--abstand-2);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase;
  color: var(--papier); background: var(--akzent); padding: 0.15em 0.7em;
}
.tageskarte:not(.ist-heute) .tageskarte__heute { display: none; }

.gang { margin: 0; }
.gang__label { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--zier-text); }
.gang__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.2; margin: var(--abstand-1) 0; }
.gang__name i { color: var(--text-leise); }
.gang__beschreibung { font-style: italic; color: var(--text-leise); margin: 0; }
.gang__herkunft { font-size: var(--gr-klein); color: var(--text-leise); margin: var(--abstand-1) 0 0; }

.tageskarte__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-4);
  margin-top: var(--abstand-5); padding-top: var(--abstand-4); border-top: var(--hairline);
  text-align: left;
}
.preis { font-family: var(--serif); font-size: var(--gr-preis); font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.preis--offen { font-family: var(--sans); font-size: var(--gr-klein); font-weight: 500; font-style: italic; color: var(--text-leise); }

/* Allergene: ausklappbar statt kryptischer Kürzel */
.allergene summary {
  display: inline-flex; align-items: center; gap: var(--abstand-2);
  min-height: var(--ziel); cursor: pointer; list-style: none;
  font-size: var(--gr-klein); color: var(--text-leise);
}
.allergene summary::-webkit-details-marker { display: none; }
.allergene summary::before {
  content: "i"; display: inline-grid; place-items: center;
  width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: 50%;
  font-family: var(--serif); font-style: italic; font-size: 0.875rem; line-height: 1;
}
.allergene summary:hover { color: var(--akzent); }
.allergene[open] summary { color: var(--text); }
.allergene__liste { font-size: var(--gr-klein); color: var(--text-leise); margin: 0 0 var(--abstand-2); max-width: 22rem; }

/* ---------- Speisekarte à la carte (Liste) ---------- */
.karte { max-width: 46rem; margin-inline: auto; }
.karte__gruppe + .karte__gruppe { margin-top: var(--abstand-7); }
.karte__gruppe > h3 { text-align: center; }
.karte__liste { list-style: none; }
.gericht { padding-block: var(--abstand-4); border-bottom: var(--hairline); }
.gericht:first-child { border-top: var(--hairline); }
.gericht__zeile { display: flex; align-items: baseline; gap: var(--abstand-3); }
.gericht__name { font-family: var(--serif); font-size: 1.375rem; font-weight: 500; line-height: 1.25; margin: 0; }
.gericht__punkte { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--zier); transform: translateY(-0.3em); }
.gericht .preis { font-size: 1.25rem; }
.gericht__beschreibung { font-style: italic; color: var(--text-leise); margin: var(--abstand-1) 0 0; }
.gericht__etiketten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }

/* ---------- Öffnungszeiten ---------- */
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten caption { text-align: left; }
.zeiten th, .zeiten td { text-align: left; vertical-align: top; padding: var(--abstand-3) 0; border-bottom: var(--hairline); }
.zeiten th { font-weight: 500; padding-right: var(--abstand-4); width: 40%; }
.zeiten td small { display: block; color: var(--text-leise); font-size: var(--gr-klein); }
.zeiten .ist-zu td { color: var(--text-leise); font-style: italic; }
.zeiten tr.ist-heute th { color: var(--akzent); }

.schichten { list-style: none; display: grid; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.schichten li { display: flex; justify-content: space-between; gap: var(--abstand-3); font-size: var(--gr-klein); }

/* ---------- Geschichte / Zitat ---------- */
.zitat { text-align: center; max-width: 44rem; margin: 0 auto; }
.zitat blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--gr-h2); line-height: 1.2; }
.zitat figcaption { margin-top: var(--abstand-5); }
.jahreszahl { font-family: var(--serif); font-size: clamp(5rem, 3rem + 10vw, 11rem); line-height: .85; color: var(--zier); opacity: .35; }

.zweispalter { display: grid; gap: var(--abstand-6); align-items: center; }
@media (min-width: 56em) { .zweispalter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-7); } }

/* ---------- Kontakt ---------- */
.kontaktblock { display: grid; gap: var(--abstand-5); }
.kontaktblock dt { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--zier-text); }
.kontaktblock dd { font-variant-numeric: lining-nums; margin: var(--abstand-1) 0 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; }
.kontaktblock dd a { display: inline-flex; align-items: center; min-height: var(--ziel); color: var(--text); text-decoration-color: var(--zier); }

/* Karte per Klick (Zwei-Klick-Lösung, keine Requests vor dem Klick) */
.kartenbox {
  position: relative; aspect-ratio: 4 / 3; border: var(--hairline);
  background: var(--papier-dunkel); display: grid; place-items: center; text-align: center;
  padding: var(--abstand-5);
}
.kartenbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kartenbox p { font-size: var(--gr-klein); color: var(--rinde); max-width: 26rem; margin-inline: auto; }

/* ---------- Fußzeile ---------- */
.fuss { padding-block: var(--abstand-7) calc(var(--abstand-7) + 4rem); font-size: var(--gr-klein); }
.fuss__raster { display: grid; gap: var(--abstand-6); }
.fuss .wortmarke { color: var(--papier); }
.fuss h2 { font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--sperrung); text-transform: uppercase; color: var(--zier-text); margin-bottom: var(--abstand-3); }
.fuss ul { list-style: none; }
.fuss a { color: var(--text); display: inline-flex; min-height: var(--ziel); align-items: center; }
.fuss__unten { margin-top: var(--abstand-6); padding-top: var(--abstand-4); border-top: var(--hairline); color: var(--text-leise); }
@media (min-width: 48em) { .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64em) { .fuss { padding-bottom: var(--abstand-7); } }

/* ---------- Sticky-Leiste (nur Handy) ---------- */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--papier); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.aktionsleiste a {
  display: flex; align-items: center; justify-content: center; gap: var(--abstand-2);
  min-height: 3.5rem;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--espresso); text-decoration: none;
}
.aktionsleiste a:first-child { background: var(--espresso); color: var(--papier); }
.aktionsleiste svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 64em) { .aktionsleiste { display: none; } }

/* ---------- Einblenden (dezent, respektiert reduced motion) ---------- */
.js .einblenden { opacity: 0; transform: translateY(14px); transition: opacity var(--dauer-lang) var(--kurve), transform var(--dauer-lang) var(--kurve); }
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .einblenden { opacity: 1; transform: none; } }

/* ---------- Konzept-Marker (nur für uns, ?konzept=1 oder Schalter) ---------- */
.konzept-marker { display: none; }
.konzept .konzept-marker {
  display: inline-flex; align-items: center; gap: 0.35em;
  margin: var(--abstand-1) 0; padding: 0.2em 0.6em;
  font-family: system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; font-style: normal;
  letter-spacing: 0; text-transform: none; line-height: 1.4;
  border: 1.5px solid; border-radius: 4px;
}
.konzept .konzept-marker::before { font-weight: 800; }
.konzept .konzept-marker--neu { background: #EEF3FF; color: #1D4ED8; border-color: #2563EB; }
.konzept .konzept-marker--neu::before { content: "NEU"; }
.konzept .konzept-marker--klaeren { background: #FFF4E6; color: #9A3412; border-color: #EA580C; }
.konzept .konzept-marker--klaeren::before { content: "KLÄREN"; }

.konzept-schalter {
  position: fixed; left: var(--abstand-3); bottom: calc(3.5rem + var(--abstand-3) + env(safe-area-inset-bottom)); z-index: 70;
  min-height: var(--ziel); padding: 0 var(--abstand-4);
  font: 600 0.75rem/1 system-ui, sans-serif;
  background: #fff; color: #1D4ED8; border: 1.5px solid #2563EB; border-radius: 999px; cursor: pointer;
  opacity: .55; transition: opacity var(--dauer);
}
.konzept-schalter:hover, .konzept-schalter:focus-visible, .konzept .konzept-schalter { opacity: 1; }
@media (min-width: 64em) { .konzept-schalter { bottom: var(--abstand-3); } }

/* ---------- Druck ---------- */
@media print {
  .kopf, .aktionsleiste, .konzept-schalter, .hinweis, .wochenleiste, .kartenbox { display: none !important; }
  body { background: #fff; }
  .tageskarte { break-inside: avoid; }
}

/* ---------- Tageskarte mit Auswahl (z. B. Samstag: drei Gänge nach Wahl) ---------- */
.tageskarte--auswahl { max-width: 46rem; text-align: left; }
.tageskarte--auswahl .tageskarte__kopf { text-align: center; }
.tageskarte--auswahl .karte__gruppe + .karte__gruppe { margin-top: var(--abstand-6); }
.tageskarte--auswahl .gang__label { display: block; text-align: center; margin-bottom: var(--abstand-3); }
.tageskarte__intro { text-align: center; font-style: italic; color: var(--text-leise); margin-top: var(--abstand-2); }
@media (min-width: 64em) { .tageskarten--zwei .tageskarte--auswahl { grid-column: 1 / -1; } }

/* ---------- Rechtstexte und Hinweis-Box ---------- */
.rechtstext h1 { font-size: var(--gr-h2); }
.rechtstext h2 { font-size: var(--gr-h3); margin: var(--abstand-6) 0 var(--abstand-2); }
.rechtstext address { margin-bottom: var(--abstand-4); }
.hinweis-box { border: 1px solid var(--akzent); background: var(--flaeche); padding: var(--abstand-4) var(--abstand-5); margin: var(--abstand-4) 0 var(--abstand-5); }
.hinweis-box > :last-child { margin-bottom: 0; }
.rechtstext ul { padding-left: 1.25rem; margin-bottom: var(--abstand-4); }