/* Gasthaus Hold — styles.css
   1 Schriften und Tokens · 2 Grund · 3 Kopf und Navigation · 4 Bausteine
   5 Startseite · 6 Unterseiten · 7 Fuß · 8 Druck
   Bewegung kommt ausschließlich aus motion.css / motion.js (Katalog). */

/* ── 1 Schriften und Tokens ─────────────────────────────────────────── */
@font-face {
  font-family: "Besley";
  src: url("assets/fonts/besley-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("assets/fonts/libre-franklin-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben, jede mit ihrer Herkunft im Haus */
  --nachtblau: #1F2955;       /* Logo: oberer Rand des Verlaufs */
  --nachtblau-tief: #171F45;  /* dasselbe Blau, abgedunkelt: Seitenfuß */
  --schildblau: #2B3079;      /* Logo: oberes Drittel des Verlaufs */
  --creme: #F5F0E6;           /* Tischtuch und Tellerweiß der Gästefotos */
  --holz-hell: #EBDDC3;       /* helle Täfelung, aufgehellt */
  --honig: #B8884E;           /* Tischplatten der Gaststube */
  --honig-hell: #D7AC72;      /* derselbe Ton für Schrift auf Nachtblau */
  --weinrot: #7A2236;         /* Schabracken der Vorhänge in der Gaststube */
  --weinrot-tief: #5E1829;
  --tinte: #26221E;           /* Fließtext */
  --holzbraun: #6A4936;       /* dunkle Täfelung der Gaststube: Nebentexte */
  --weiss: #FFFDF8;
  --linie: rgba(38, 34, 30, 0.16);
  --linie-hell: rgba(245, 240, 230, 0.24);

  --schrift-kopf: "Besley", Georgia, "Times New Roman", serif;
  --schrift-text: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* Schriftgrade */
  --t-klein: 0.875rem;
  --t-meta: 0.9375rem;
  --t-text: 1.0625rem;
  --t-lead: clamp(1.125rem, 0.95rem + 0.8vw, 1.3125rem);
  --t-h3: clamp(1.3125rem, 1.1rem + 1vw, 1.625rem);
  --t-h2: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --t-h1: clamp(2.125rem, 1.3rem + 4.2vw, 3.75rem);
  --t-held: clamp(2.0625rem, 10.4vw, 4.25rem);

  /* Abstände */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;
  --a7: 3rem;
  --a8: 4rem;
  --rand: clamp(1.25rem, 4.5vw, 3.5rem);
  --breite: 76rem;
  --abschnitt: clamp(3.75rem, 9vw, 7rem);

  /* A1 Aufbau: ein Takt für die ganze Website (Mechanik in motion.js) */
  --wm-auf-weg: 1.125rem;
  --wm-auf-dauer: 0.6s;
  --wm-auf-takt: 80;

  --kopf-hoehe: 4rem;
  --kachel: 22%;              /* Eckenrundung des Logos */
  --pille: 999px;
}

/* ── 2 Grund ────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--schrift-kopf);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--nachtblau);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.15; }

p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 0.09em; }

:focus-visible {
  outline: 3px solid var(--nachtblau);
  outline-offset: 3px;
  border-radius: 4px;
}
.auf-blau :focus-visible,
.kopf :focus-visible,
.held :focus-visible,
.seitenkopf :focus-visible,
.laufband-band :focus-visible,
.fuss :focus-visible { outline-color: var(--honig-hell); }

.innen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

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

.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.1rem;
  border-radius: var(--pille);
  background: var(--creme);
  color: var(--nachtblau);
  font-weight: 600;
}
.sprung:focus { top: 0.75rem; }

.lead { font-size: var(--t-lead); line-height: 1.5; }
.nw { white-space: nowrap; }
.klein { font-size: var(--t-klein); }

.textlink {
  color: var(--weinrot);
  font-weight: 600;
}
.textlink:hover { color: var(--weinrot-tief); }
.auf-blau .textlink { color: var(--creme); }
.auf-blau .textlink:hover { color: var(--honig-hell); }

/* ── 3 Kopf und Navigation ──────────────────────────────────────────── */
.kopf {
  position: relative;
  z-index: 20;
  background: var(--nachtblau);
  color: var(--creme);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4);
  min-height: var(--kopf-hoehe);
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--creme);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.marke img { width: 2.5rem; height: 2.5rem; }

.nav-breit { display: none; }

.nav-schmal summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1.5px solid rgba(245, 240, 230, 0.5);
  border-radius: var(--pille);
  font-size: var(--t-meta);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.nav-schmal summary::-webkit-details-marker { display: none; }
.nav-schmal[open] summary { background: var(--creme); border-color: var(--creme); color: var(--nachtblau); }
.nav-schmal-liste {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  padding: var(--a2) var(--rand) var(--a6);
  background: var(--schildblau);
  box-shadow: 0 1.5rem 2.5rem rgba(13, 18, 43, 0.35);
}
.nav-schmal-liste a:not(.knopf) {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie-hell);
  color: var(--creme);
  font-family: var(--schrift-kopf);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-schmal-liste a[aria-current="page"]:not(.knopf) { color: var(--honig-hell); }
.nav-schmal-liste .knopf { margin-top: var(--a5); justify-self: start; }

@media (min-width: 60rem) {
  :root { --kopf-hoehe: 5.25rem; }
  .nav-schmal { display: none; }
  .nav-breit {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
  }
  .nav-breit a:not(.knopf) {
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    color: var(--creme);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
  }
  .nav-breit a:not(.knopf):hover { border-bottom-color: rgba(245, 240, 230, 0.55); }
  .nav-breit a[aria-current="page"]:not(.knopf) { border-bottom-color: var(--honig-hell); }
  .marke { font-size: 1.1875rem; }
  .marke img { width: 2.75rem; height: 2.75rem; }
}

/* ── 4 Bausteine ────────────────────────────────────────────────────── */
/* Knöpfe: die Pille; Weinrot auf hellen Flächen, Creme auf Nachtblau */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.65rem;
  border: 1.5px solid transparent;
  border-radius: var(--pille);
  font-family: var(--schrift-text);
  font-size: var(--t-text);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.knopf--wein { background: var(--weinrot); color: var(--creme); }
.knopf--wein:hover { background: var(--weinrot-tief); }
.knopf--hell { background: var(--creme); color: var(--nachtblau); }
.knopf--hell:hover { background: var(--weiss); }
.knopf--rand { border-color: currentColor; background: transparent; color: inherit; }
.knopf--rand:hover { background: rgba(245, 240, 230, 0.12); }
.knopf--klein { min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }
.knopf[aria-current="page"] { background: var(--honig-hell); border-color: var(--honig-hell); color: var(--nachtblau); }

.wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a4) var(--a5);
}
.wege .textlink { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Flächen */
.abschnitt { padding-block: var(--abschnitt); }
.auf-holz { background: var(--holz-hell); }
.auf-blau { background: var(--nachtblau); color: var(--creme); }
.auf-blau h1, .auf-blau h2, .auf-blau h3 { color: var(--creme); }

/* Der Teller: jedes freigestellte Foto ist ein Kreis (Maske B2 aus motion.css) */
.teller { flex: none; }
.bild-zeile {
  margin-top: var(--a3);
  color: var(--holzbraun);
  font-size: var(--t-klein);
}

/* Zitate von Gästen */
.stimme p { text-wrap: pretty; }
.stimme footer,
.quelle {
  margin-top: var(--a3);
  color: var(--holzbraun);
  font-size: var(--t-klein);
  font-weight: 500;
}
.auf-blau .stimme footer,
.auf-blau .quelle { color: var(--honig-hell); }
.stimme--gross p {
  font-family: var(--schrift-kopf);
  font-size: clamp(1.375rem, 1rem + 1.9vw, 2.125rem);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--nachtblau);
}

/* Die Karte: was Gäste beim Namen nennen */
.karte { border-top: 1px solid var(--linie); }
.gericht {
  display: grid;
  gap: var(--a2);
  padding-block: var(--a5);
  border-bottom: 1px solid var(--linie);
}
.gericht-name { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); }
.gericht .stimme p { color: var(--tinte); }
@media (min-width: 46rem) {
  .gericht { grid-template-columns: minmax(15rem, 0.42fr) 1fr; gap: var(--a6); align-items: baseline; }
}

/* Öffnungszeiten: Status (M3) und die Woche als Kacheln in der Form des Logos */
.wm-status {
  min-height: calc(2 * 1.12em + 1.75rem);
  font-family: var(--schrift-kopf);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--nachtblau);
}
.wm-status-zusatz {
  display: block;
  margin: 0.45rem 0 0;
  font-family: var(--schrift-text);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--holzbraun);
  opacity: 1;
}
.woche {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4);
  margin-top: var(--a5);
}
.woche-teil { display: grid; gap: var(--a2); }
.woche-tage { display: flex; gap: 0.375rem; }
.woche-tage span {
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 10.2vw, 3rem);
  aspect-ratio: 1;
  border-radius: var(--kachel);
  background: var(--nachtblau);
  color: #FFFFFF;
  font-size: var(--t-klein);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.woche-teil--zu .woche-tage span {
  border: 1.5px solid rgba(31, 41, 85, 0.5);
  background: transparent;
  color: var(--nachtblau);
}
.woche-zeit {
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nachtblau);
}
.woche-teil--zu .woche-zeit { color: var(--weinrot); }

.besuch-raster { display: grid; gap: var(--a7); }
.besuch h2 { margin-bottom: var(--a5); font-size: var(--t-h3); }
.anschrift { font-size: var(--t-lead); line-height: 1.45; }
.anschrift strong { font-family: var(--schrift-kopf); font-weight: 600; color: var(--nachtblau); }
.besuch-ort > * + * { margin-top: var(--a5); }
.besuch-post { overflow-wrap: anywhere; }
.merkzettel { display: grid; gap: var(--a5); padding-top: var(--a5); border-top: 1px solid var(--linie); }
@media (min-width: 56rem) {
  .besuch-raster { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 7vw, 6rem); }
}

/* Seitenkopf der Unterseiten */
.seitenkopf {
  position: relative;
  overflow: hidden;
  background: var(--nachtblau);
  color: var(--creme);
}
.seitenkopf .innen {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(2.5rem, 7vw, 4.5rem);
}
.seitenkopf h1 { color: var(--creme); max-width: 14em; }
.seitenkopf .lead { margin-top: var(--a5); max-width: 34em; color: #E7E0D2; }
.seitenkopf--teller { --teller: clamp(13rem, 58vw, 21rem); }
.seitenkopf--teller .innen { padding-bottom: calc(var(--teller) * 0.62 + 1.5rem); }
.seitenkopf-teller {
  position: absolute;
  right: calc(var(--teller) * -0.2);
  bottom: calc(var(--teller) * -0.38);
  width: var(--teller);
}
@media (min-width: 56rem) {
  .seitenkopf--teller { --teller: clamp(20rem, 30vw, 27rem); }
  .seitenkopf--teller .innen { padding-bottom: clamp(2.5rem, 7vw, 4.5rem); }
  .seitenkopf--teller h1,
  .seitenkopf--teller .lead { max-width: min(34em, 62%); }
  .seitenkopf-teller {
    right: max(calc(var(--teller) * -0.12), calc((100vw - 96rem) / 2));
    bottom: calc(var(--teller) * -0.3);
  }
}

/* Abschluss: der Weg zum Tisch */
.held .textlink,
.seitenkopf .textlink { color: var(--creme); }
.held .textlink:hover,
.seitenkopf .textlink:hover { color: var(--honig-hell); }

.schluss .innen { display: grid; gap: var(--a6); }
.schluss h2 { max-width: 16em; }
.schluss-post { margin-top: var(--a4); font-size: var(--t-lead); overflow-wrap: anywhere; }
.schluss-post a { color: var(--creme); }
@media (min-width: 56rem) {
  .schluss .innen { grid-template-columns: 1.2fr 0.8fr; align-items: end; gap: var(--a8); }
  .schluss .wege { justify-content: flex-end; }
}

/* S2 Rundgang: Aussehen der Stationen (Mechanik in motion.css) */
.wm-stationen { background: var(--nachtblau); color: var(--creme); }
.wm-buehne { --wm-stapel: 0px; }
.wm-station { background: var(--nachtblau); }
.wm-station > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wm-station:nth-child(1) > img { object-position: 24% 42%; }
.wm-station:nth-child(2) > img { object-position: 18% 60%; }
.wm-station:nth-child(3) > img { object-position: 46% 50%; }
.wm-station-text {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--a3) var(--a4);
  padding: var(--a5) var(--rand) var(--a6);
}
.wm-station-marke {
  display: grid;
  place-items: center;
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: var(--kachel);
  background: var(--honig-hell);
  color: var(--nachtblau);
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wm-station-text h3 { color: var(--creme); font-size: clamp(1.4375rem, 1.1rem + 1.6vw, 2.125rem); }
.station-satz,
.station-quelle { grid-column: 1 / -1; }
.station-satz { font-size: 1.125rem; line-height: 1.48; color: var(--creme); }
.station-quelle { color: var(--honig-hell); font-size: var(--t-klein); font-weight: 500; }
@media (min-width: 60rem) {
  .wm-station-text {
    grid-template-columns: auto minmax(15rem, 0.9fr) minmax(0, 1.6fr);
    align-items: start;
    column-gap: var(--a5);
    padding: var(--a6) max(var(--rand), calc((100% - var(--breite)) / 2)) 2.5rem;
  }
  .wm-station-marke { margin-top: 0.2rem; }
  .station-satz { grid-column: 3; grid-row: 1; font-size: 1.3125rem; }
  .station-quelle { grid-column: 3; grid-row: 2; }
}

/* Ohne Bewegung (Aufnahme, kein JavaScript, reduzierte Bewegung) stehen die drei
   Stationen untereinander; am breiten Bildschirm dann Foto und Text nebeneinander. */
@media (min-width: 60rem) {
  html:not(.wm-on) .wm-station,
  .wm-ruhe .wm-station {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
  }
  html:not(.wm-on) .wm-station > img,
  .wm-ruhe .wm-station > img { aspect-ratio: 3 / 2; }
  html:not(.wm-on) .wm-station-text,
  .wm-ruhe .wm-station-text {
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: var(--a6) var(--rand) var(--a6) clamp(2rem, 5vw, 4.5rem);
  }
  html:not(.wm-on) .wm-station-marke,
  .wm-ruhe .wm-station-marke { margin-top: 0; }
  html:not(.wm-on) .station-satz,
  html:not(.wm-on) .station-quelle,
  .wm-ruhe .station-satz,
  .wm-ruhe .station-quelle { grid-column: 1 / -1; grid-row: auto; }
}

/* M2 Laufband */
.laufband-band { padding-block: var(--a5) var(--a6); background: var(--schildblau); color: var(--creme); }
.laufband-titel {
  margin-bottom: var(--a2);
  color: var(--honig-hell);
  font-size: var(--t-klein);
  font-weight: 600;
}
.wm-laufband {
  --wm-abstand: clamp(1.25rem, 4vw, 2.25rem);
  --wm-tempo: 46;
  --wm-trenner: "●";
  padding-inline-start: var(--rand);
  font-family: var(--schrift-kopf);
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
}
.wm-laufband-reihe > li { align-items: center; }
.wm-laufband-reihe > li::after { color: var(--honig-hell); font-size: 0.36em; opacity: 1; }

/* M5 Fotoreihe */
.wm-fotoreihe { --wm-breite: 72%; --wm-abstand: 0.75rem; padding-inline: var(--rand); scroll-padding-inline: var(--rand); }
.wm-fotoreihe img { aspect-ratio: 1; }
@media (min-width: 47.5rem) {
  .wm-fotoreihe { --wm-breite: 27%; --wm-abstand: 1rem; }
}

/* T3 Zitat */
.wm-zitat { --wm-matt: 0.3; }
.wm-zitat.spalte { max-width: 52rem; }
.wm-zitat p {
  font-family: var(--schrift-kopf);
  font-size: clamp(1.625rem, 1.05rem + 2.9vw, 2.875rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--nachtblau);
}
.wm-zitat footer { margin-top: var(--a5); color: var(--holzbraun); font-size: var(--t-meta); font-weight: 500; }

/* Stop-Knopf des Katalogs im Seitenfuß */
.wm-halt { color: var(--creme); }

/* ── 5 Startseite ───────────────────────────────────────────────────── */
.held {
  --teller: clamp(22rem, 118vw, 34rem);
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--kopf-hoehe));
  min-height: calc(100svh - var(--kopf-hoehe));
  background: var(--nachtblau);
  color: var(--creme);
}
.held .innen {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.5rem, 4.5vh, 3.25rem) calc(var(--teller) * 0.6 + 1.75rem);
}
.held h1 {
  max-width: 11.5em;
  color: var(--creme);
  font-size: var(--t-held);
  line-height: 1.04;
}
.held-text {
  max-width: 23em;
  margin-top: var(--a5);
  color: #E7E0D2;
  font-size: var(--t-lead);
  line-height: 1.45;
}
.held .wege { margin-top: var(--a6); }
.held-teller {
  position: absolute;
  right: calc(var(--teller) * -0.29);
  bottom: calc(var(--teller) * -0.4);
  width: var(--teller);
}
@media (min-width: 60rem) {
  .held { --teller: clamp(34rem, 56vw, 54rem); min-height: min(calc(100svh - var(--kopf-hoehe)), 52rem); }
  .held .innen { padding-block: clamp(2rem, 6vh, 4rem) 5rem; }
  .held h1 { max-width: min(9.6em, 54vw); }
  .held-teller {
    right: max(calc(var(--teller) * -0.125), calc((100vw - 100rem) / 2 - var(--teller) * 0.125));
    bottom: calc(var(--teller) * -0.21);
  }
}

.auftakt .innen { display: grid; gap: var(--a4); padding-block: clamp(3rem, 8vw, 5.5rem); }
.auftakt p { max-width: 32em; }
@media (min-width: 56rem) {
  .auftakt .innen { grid-template-columns: 0.9fr 1.1fr; align-items: end; gap: var(--a8); }
}

.kostprobe { overflow: hidden; }
.kostprobe-raster { display: grid; gap: var(--a6); }
.kostprobe-kopf > * + * { margin-top: var(--a4); }
.kostprobe-kopf p { max-width: 30em; }
.kostprobe-bild { width: clamp(14rem, 66vw, 20rem); margin-left: auto; margin-right: calc(var(--rand) * -1.6); }
.kostprobe .wege { margin-top: var(--a6); }
.kostprobe-hinweis { margin-top: var(--a5); color: var(--holzbraun); font-size: var(--t-meta); max-width: 36em; }
@media (min-width: 56rem) {
  .kostprobe-raster { grid-template-columns: 1.25fr 0.75fr; align-items: start; gap: clamp(3rem, 7vw, 6rem); }
  .kostprobe-bild { width: 100%; max-width: 26rem; margin: 0 0 0 auto; }
  .kostprobe-kopf { grid-column: 1; }
  .kostprobe-seite { grid-column: 2; grid-row: 1 / span 2; }
  .kostprobe-liste { grid-column: 1; }
}

.einkehr-raster { display: grid; gap: var(--a6); align-items: center; }
.einkehr-bild { width: clamp(11rem, 52vw, 17rem); }
.einkehr h2 { margin-bottom: var(--a5); }
@media (min-width: 46rem) {
  .einkehr-raster { grid-template-columns: auto 1fr; gap: clamp(2.5rem, 7vw, 6rem); }
  .einkehr-bild { width: clamp(15rem, 26vw, 21rem); }
}

.stimmen-kopf { display: grid; gap: var(--a3); margin-bottom: var(--a7); }
.stimmen-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3) var(--a4); }
.sterne { width: 8.75rem; height: auto; color: var(--nachtblau); }
.stimmen-stand { color: var(--holzbraun); font-size: var(--t-meta); }
.stimmen-raster { display: grid; gap: var(--a7); }
.stimmen-neben { display: grid; gap: var(--a6); align-content: start; }
.stimmen-neben .stimme { padding-top: var(--a5); border-top: 1px solid var(--linie); }
.stimmen-mehr { margin-top: var(--a7); }
@media (min-width: 56rem) {
  .stimmen-raster { grid-template-columns: 1.15fr 0.85fr; gap: clamp(3rem, 7vw, 6rem); }
}

/* ── 6 Unterseiten ──────────────────────────────────────────────────── */
.spalte { max-width: 40rem; }
.spalte > * + * { margin-top: var(--a5); }
.spalte > h2 { margin-top: var(--a7); }
.spalte > h2:first-child { margin-top: 0; }

.gruppe + .gruppe { margin-top: var(--a8); }
.gruppe > h2 { margin-bottom: var(--a5); }
.gruppe > h3 { margin: var(--a6) 0 var(--a3); color: var(--holzbraun); font-family: var(--schrift-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; }

.hinweis {
  padding: var(--a5);
  border-left: 4px solid var(--weinrot);
  background: var(--weiss);
}
.hinweis strong { color: var(--weinrot); }

.fotoreihe-kopf { display: grid; gap: var(--a3); margin-bottom: var(--a6); }

.allergene {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--a3) var(--a6);
  margin-top: var(--a6);
}
.allergene li { display: flex; align-items: center; gap: var(--a3); }
.allergene b {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  aspect-ratio: 1;
  border-radius: var(--kachel);
  background: var(--nachtblau);
  color: #FFFFFF;
  font-size: var(--t-meta);
  font-weight: 700;
}

.vollbild img { width: 100%; height: clamp(26rem, 62svh, 40rem); object-fit: cover; }
@media (min-width: 56rem) {
  .vollbild img { height: min(36rem, 72svh); }
}
.vollbild--stube img { object-position: 30% 45%; }

.themen { display: grid; gap: var(--a7); }
.thema { display: grid; gap: var(--a4); padding-top: var(--a5); border-top: 1px solid var(--linie); }
.thema .stimme + .stimme { margin-top: var(--a5); }
@media (min-width: 46rem) {
  .thema { grid-template-columns: minmax(10rem, 0.34fr) 1fr; gap: var(--a6); }
}

.allergene-bitte { margin-top: var(--a6); overflow-wrap: anywhere; }

.eckdaten { display: grid; gap: 0; margin-top: var(--a5); border-top: 1px solid var(--linie); }
.eckdaten div { display: grid; gap: var(--a1); padding-block: var(--a4); border-bottom: 1px solid var(--linie); }
.eckdaten dt { color: var(--holzbraun); font-size: var(--t-meta); font-weight: 600; }
.eckdaten dd { overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .eckdaten div { grid-template-columns: 11rem 1fr; gap: var(--a5); }
}

.zwei-spalten { display: grid; gap: var(--a7); }
@media (min-width: 56rem) {
  .zwei-spalten { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: start; }
}

.angaben { display: grid; gap: var(--a3); margin-top: var(--a5); }
.angaben li { display: flex; align-items: baseline; gap: var(--a3); }
.angaben li::before {
  content: "";
  flex: none;
  width: 0.6rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--weinrot);
  transform: translateY(-0.05em);
}

/* Formular */
.formular { display: grid; gap: var(--a5); max-width: 36rem; }
.feld { display: grid; gap: var(--a2); }
.feld label { font-size: var(--t-meta); font-weight: 600; color: var(--nachtblau); }
.feld input,
.feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(38, 34, 30, 0.38);
  border-radius: 0.75rem;
  background: var(--weiss);
  color: var(--tinte);
  font: inherit;
}
.feld textarea { min-height: 9rem; resize: vertical; }
.feld input:focus-visible,
.feld textarea:focus-visible { outline: 3px solid var(--nachtblau); outline-offset: 1px; border-color: var(--nachtblau); }
.haken { display: flex; align-items: flex-start; gap: var(--a3); font-size: var(--t-meta); line-height: 1.5; }
.haken input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--weinrot); }
.formular-hinweis { color: var(--holzbraun); font-size: var(--t-meta); }

/* Rechtstexte */
.recht { max-width: 40rem; }
.recht h2 { margin: var(--a7) 0 var(--a4); font-size: var(--t-h3); }
.recht h2:first-child { margin-top: 0; }
.recht p + p { margin-top: var(--a4); }
.recht a { color: var(--weinrot); overflow-wrap: anywhere; }

/* ── 7 Fuß ──────────────────────────────────────────────────────────── */
.fuss {
  background: var(--nachtblau-tief);
  color: #D9D3C6;
  font-size: var(--t-meta);
  line-height: 1.55;
}
.fuss .innen { display: grid; gap: var(--a6); padding-block: var(--a7) var(--a6); }
.fuss a { color: var(--creme); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .marke { margin-bottom: var(--a4); }
.fuss-post { overflow-wrap: anywhere; }
.fuss-liste { display: grid; gap: 0.15rem; }
.fuss-liste a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss-titel { margin-bottom: var(--a2); color: var(--honig-hell); font-weight: 600; }
.fuss-ende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a2) var(--a5);
  padding-top: var(--a5);
  border-top: 1px solid var(--linie-hell);
  font-size: var(--t-klein);
}
@media (min-width: 56rem) {
  .fuss .innen { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--a8); }
  .fuss-ende { grid-column: 1 / -1; }
}

/* ── 8 Druck ────────────────────────────────────────────────────────── */
@media print {
  .kopf nav, .nav-schmal, .sprung, .wege, .wm-halt { display: none !important; }
  body { background: #fff; }
}