/* Jagdhof Breitenberg · Richtung 18 B · Stand 01.10.2026
   Überschriften: Serif (umschaltbar, Arbeitsstand EB Garamond), Text: Source Sans 3
   Schriftgrößen bewusst wenige: 70,4 (h1) · 33 (h2, Namen) · 23 (h3, Schild) · 20 (Navigation) · 18 (alles andere) · 12 (Etikett) */

:root {
  --inhalt: 1200px;          /* Breite des Inhalts (vorher 1312) */
  --inhalt-kopf: 1920px;     /* Kopfzeile: bis 2048 px Fensterbreite fester Abstand zum Rand (--rand), darüber begrenzt */
  --himmel: #E8EFF3;         /* Grund des Einstiegs auf der Startseite */
  --wand: #F1E4B1;           /* Hauswand, nach der Fassade */
  --ziegel: #A84B32;         /* Dach */
  --braun: #6A4A30;          /* Pfahl des Wegweisers auf der Startseite */
  --weich: cubic-bezier(0.45, 0, 0.25, 1);   /* gemeinsame Kurve für Überblendungen */
  --ueberblenden: 1100ms;
  --grund: #F3F3EF;
  --hell: #FAFAF7;             /* Eingabefelder */
  --gruen: #1F3A2E;
  --gruen-hover: #2C5242;
  --weinrot: #74222F;          /* nur Schild der Pizzeria, nach dem Hausschild „San Remo“ */
  --text-leise: #5C7266;
  --text-mittel: #4E6358;
  --linie: #C9D0CA;
  --linie-feld: #9DAAA2;
  --etikett: #B9C7BD;
  --bild-grund: #D9DDD6;

  --sans: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;

  /* Überschriftenschrift, Werte aus den Brilliant-Fassungen */
  --serif: "EB Garamond", Georgia, serif;
  --logo-groesse: 36.9px;      /* EB Garamond: Serifen bündig mit B und G */
  --logo-x: -1.25px;
  --h1-groesse: 70.4px;
  --h1-staerke: 500;
  --h2-groesse: 33px;
  --h2-staerke: 500;
  --h3-groesse: 23px;
  --h3-staerke: 500;

  /* Raster: Textspalte 580, Bildspalte 656, Abstand 76 bei 1440 */
  --rand: 64px;
  --spalten-abstand: 76px;
  --abschnitt: 168px;
  --dauer: 320ms;
}
/* Besley, Source Serif 4, Newsreader: Logo nur gleich breit wie „Breitenberg“, nicht optisch ausgerichtet */
body[data-schrift="besley"] {
  --serif: "Besley", Georgia, serif;
  --logo-groesse: 27.7px; --logo-x: 0px;
  --h1-groesse: 56px; --h1-staerke: 600;
  --h2-groesse: 28px; --h2-staerke: 600;
  --h3-groesse: 20px; --h3-staerke: 600;
}
body[data-schrift="sourceserif"] {
  --serif: "Source Serif 4", Georgia, serif;
  --logo-groesse: 31.3px; --logo-x: 0px;
  --h1-groesse: 58px; --h1-staerke: 600;
  --h2-groesse: 29px; --h2-staerke: 600;
  --h3-groesse: 21px; --h3-staerke: 600;
}
body[data-schrift="newsreader"] {
  --serif: "Newsreader", Georgia, serif;
  --logo-groesse: 32.8px; --logo-x: 0px;
  --h1-groesse: 62px; --h1-staerke: 500;
  --h2-groesse: 31px; --h2-staerke: 500;
  --h3-groesse: 21px; --h3-staerke: 500;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--grund);
  color: var(--gruen);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; }

.springen {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  padding: 10px 16px; background: var(--gruen); color: var(--grund); font-weight: 600;
}
.springen:focus { top: 16px; }

h1, h2, h3, .name {
  font-family: var(--serif);
  font-feature-settings: "kern", "liga";
}
h1 {
  font-weight: var(--h1-staerke);
  font-size: var(--h1-groesse);
  line-height: 1.05;
  letter-spacing: -0.5px;
}
h2, .name {
  font-weight: var(--h2-staerke);
  font-size: var(--h2-groesse);
  line-height: 1.2;
}
h3 {
  font-weight: var(--h3-staerke);
  font-size: var(--h3-groesse);
  line-height: 1.3;
}
p + p { margin-top: 1em; }
.leise { color: var(--text-leise); }
.mittel { color: var(--text-mittel); }
.zahl { font-variant-numeric: tabular-nums; }

/* Fließtext-Links im Text: unterstrichen, ruhig */
.text-link, .fliesstext a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--linie-feld);
  transition: text-decoration-color 200ms ease;
}
.text-link:hover, .fliesstext a:hover { text-decoration-color: currentColor; }

/* ---------- Seitenrahmen ---------- */
.seite {
  position: relative;
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand);
}
.raster {
  display: grid;
  grid-template-columns: minmax(0, 580fr) minmax(0, 656fr);
  column-gap: var(--spalten-abstand);
}

/* ---------- Kopfzeile (sticky; beim Scrollen niedriger, Logo und Navigation rücken gemeinsam 24 px hoch) ---------- */
.kopfbereich {
  position: sticky;
  top: 0;
  z-index: 38;
  background: var(--grund);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, margin-bottom 220ms ease, background-color 220ms ease;
}
.kopfbereich.gescrollt { border-bottom-color: var(--linie); margin-bottom: 48px; }  /* gleicht die niedrigere Kopfzeile aus, damit nichts springt */
.kopf {
  position: relative;
  height: 140px;
  transition: height 220ms ease;
}
/* top statt transform animieren: transform legt das Logo auf eine eigene Ebene,
   die den überhängenden J-Haken während der Bewegung abschneidet */
.kopf .logo, .kopf .nav, .kopf .menue-knopf { transition: top 220ms ease; }
.kopfbereich.gescrollt .kopf { height: 92px; }
.kopfbereich.gescrollt .kopf .logo { top: 14px; }
.kopfbereich.gescrollt .kopf .nav { top: 32.5px; }
.kopfbereich.gescrollt .kopf .menue-knopf { top: 26px; }
html { scroll-padding-top: 112px; }
@media (prefers-reduced-motion: reduce) {
  .kopf, .kopf .logo, .kopf .nav, .kopf .menue-knopf { transition: none; }
}
.logo {
  position: absolute;
  left: 0;
  top: 38px;
  display: block;
  width: 120px;
  height: 70px;
}
.logo-jagdhof {
  position: absolute;
  left: var(--logo-x);        /* EB Garamond: obere J-Serife bündig mit der B-Kante */
  top: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--logo-groesse);
  line-height: 1;
  white-space: nowrap;
}
.logo-breitenberg {
  position: absolute;
  left: -1.29px;              /* B-Kante liegt genau auf der Satzkante */
  top: calc(var(--logo-groesse) + 6.83px);   /* 01.10.: 4 px enger als im Prototyp (10,83) */
  font-size: 14.4px;
  line-height: 1.4;
  letter-spacing: 3px;
  color: var(--text-leise);
  white-space: nowrap;
}
.nav {
  position: absolute;
  right: 0;
  top: 56.5px;
  display: flex;
  gap: 28px;
  font-size: 20px;            /* Navigation als einzige Ausnahme von 18 px */
  font-weight: 600;
  line-height: 1.4;
}
.nav a {
  position: relative;
  padding-bottom: 4px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav-telefon { font-variant-numeric: tabular-nums; }

.menue-knopf { display: none; }
.menue { display: none; }

/* ---------- Einstieg (oberster Bildschirm) ---------- */
.einstieg { position: relative; }
.einstieg .text { padding-top: 80px; }
.unterzeile {
  margin-top: 28px;
  color: var(--text-mittel);
}
.einstieg .unterzeile { max-width: 34em; }

/* Liste mit Trennlinien: das tragende Element der Seite */
.liste { margin-top: 40px; }
.liste > li {
  border-top: 1px solid var(--linie);
  transition: opacity var(--dauer) ease;
}
.liste--ende > li:last-child { border-bottom: 1px solid var(--linie); }
.zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
}
.zeile-bild { display: none; }
.status, .adresse { color: var(--text-leise); }
.status { margin-top: 2px; }
.name { line-height: 1.3; }

/* Knöpfe: Text 18 px halbfett, Innenabstand 13/24, gleich breit */
.knopf {
  display: inline-block;
  min-width: 172px;
  text-align: center;
  padding: 12px 23px;
  border: 1px solid var(--gruen);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--gruen);
  font-family: var(--sans);
  font-size: 18px;
  transition: background-color 300ms var(--weich), color 300ms var(--weich), border-color 300ms var(--weich);
}
.knopf:hover, .knopf:focus-visible { background: var(--gruen); color: var(--grund); }
.knopf.voll { background: var(--gruen); color: var(--grund); }
.knopf.voll:hover, .knopf.voll:focus-visible { background: var(--gruen-hover); border-color: var(--gruen-hover); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* Hover: die Zeile bekommt einen etwas dunkleren Grund, genau so breit wie die Trennlinien.
   Der Inhalt sitzt dafür 24 px eingerückt (nur ab Tablet, auf dem Handy bündig) */
:root { --grund-hover: #E8E9E2; }
@media (min-width: 881px) {
  .liste > li.angebot .zeile { padding-left: 24px; padding-right: 24px; }
}
/* Die Fläche ist ein eigenes Element hinter dem Inhalt, damit sie auf der Startseite eine Spitze bekommen kann */
.liste > li.angebot { position: relative; isolation: isolate; }
.liste > li.angebot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grund-hover);
  opacity: 0;
  transition: opacity 700ms var(--weich);
  pointer-events: none;
}
.liste > li.angebot.an::before { opacity: 1; }   /* auch beim Selbstlauf auf der Startseite */
@media (hover: hover) {
  .liste > li.angebot:hover::before, .liste > li.angebot:focus-within::before { opacity: 1; }
}
/* Startseite: Spitze nach rechts zum Bild, Spitzenwinkel 100°.
   --spitze = halbe Zeilenhöhe / tan 50°, von seite.js je Zeile gesetzt (Rückfall 47 px) */
.startseite .liste > li.angebot::before {
  right: calc(-1 * var(--spitze, 47px));
  clip-path: polygon(0 0, calc(100% - var(--spitze, 47px)) 0, 100% 50%, calc(100% - var(--spitze, 47px)) 100%, 0 100%);
}

/* Bild mit Schild */
.bild {
  position: relative;
  width: 100%;
  aspect-ratio: 656 / 880;
}
.bild--kurz { aspect-ratio: 656 / 780; }
.bild-rahmen {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* eigener Stapel: die Bild-Ebenen der Überblendung bleiben unter dem Schild */
  overflow: hidden;
  background: var(--bild-grund);
}
.bild-rahmen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Weiche Überblendung: das neue Bild blendet über dem alten ein, das alte bleibt bis zum Ende stehen */

.bild-rahmen.wechsel img { opacity: 0; z-index: 0; transition: opacity var(--ueberblenden) var(--weich); }
.bild-rahmen.wechsel img.vorher { opacity: 1; z-index: 1; transition: none; }
.bild-rahmen.wechsel img.sichtbar { opacity: 1; z-index: 2; }

.schild {
  position: absolute;
  z-index: 1;
  left: 50%;                  /* mittig unter dem Bild, ragt unten über die Kante */
  transform: translateX(-50%);
  bottom: -44px;
  padding: 18px 22px 20px;
  background: var(--gruen);
  color: var(--grund);
  min-width: 196px;
  max-width: calc(100% - 24px);
}
.schild--weinrot { background: var(--weinrot); }
.schild--weinrot .schild-etikett { color: #E2B9BF; }
.etikett, .schild-etikett {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.4;
}
.schild-etikett { color: var(--etikett); }
.schild-zeile {
  margin-top: 6px;
  font-family: var(--serif);
  font-weight: var(--h3-staerke);
  font-size: var(--h3-groesse);
  line-height: 1.3;
}
.schild-zeile, .schild-etikett { white-space: nowrap; }
/* Startseite: Varianten übereinander, Breite = längster Text, Wechsel als Überblendung */
.schild-stapel { display: grid; }
.schild-stapel .schild-inhalt { grid-area: 1 / 1; opacity: 0; transition: opacity 500ms var(--weich); }
.schild-stapel .schild-inhalt.sichtbar { opacity: 1; transition: opacity 700ms var(--weich) 250ms; }

/* ---------- Abschnitte ---------- */
.abschnitt { margin-top: var(--abschnitt); }
.einstieg + .abschnitt { margin-top: calc(var(--abschnitt) + 24px); }
.abschnitt-kopf h2 + p, .abschnitt-kopf h2 + .unterzeile { margin-top: 20px; }
.abschnitt-kopf .unterzeile { margin-top: 20px; max-width: 30em; }
.abschnitt-kopf .knoepfe { margin-top: 32px; }
.klebt { position: sticky; top: 132px; align-self: start; }

/* Fließtext rechts */
.fliesstext { max-width: 36em; color: var(--text-mittel); }
.fliesstext h3 { color: var(--gruen); margin: 48px 0 12px; }
.fliesstext h3:first-child { margin-top: 0; }

/* Einträge mit Name, Beschreibung und Wert rechts (Ausflüge, Ausstattung, Preise) */
.eintraege > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--linie);
}
.eintraege > li:last-child { border-bottom: 1px solid var(--linie); }
.eintraege .eintrag-text { color: var(--text-leise); margin-top: 4px; max-width: 32em; }
.eintraege .wert {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eintraege .wert .leise { display: block; }
.eintraege--knapp > li { padding: 16px 0; }

/* Öffnungszeiten */
.zeiten-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 56px;
}
.zeiten-block h3 { margin-bottom: 14px; }
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0;
  border-top: 1px solid var(--linie);
  font-weight: 400;
}
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 1px solid var(--linie); }
.zeiten th { padding-right: 16px; }
.zeiten td { text-align: right; color: var(--text-mittel); white-space: nowrap; }
.zeiten-block h3 a { text-decoration-color: transparent; }
.zeiten-block h3 a:hover { text-decoration-color: currentColor; }
.zeiten .zu td { color: var(--text-leise); }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; color: var(--gruen); }
.zeiten tr.heute th::after { content: " · heute"; font-weight: 400; color: var(--text-leise); }
.zeiten tr.heute.feiertag th::after { content: " · heute, Feiertag"; }
.zeiten-hinweis { margin-top: 16px; color: var(--text-leise); }

/* Speisekarte */
.karte-gruppe + .karte-gruppe { margin-top: 64px; }
.karte-gruppe h3 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}
.karte-gruppe .gruppe-text { color: var(--text-leise); margin-top: 14px; }
.gerichte { margin-top: 6px; }
.gericht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  padding: 16px 0 0;
}
.gericht-name { font-weight: 600; }
.gericht-text { color: var(--text-leise); grid-column: 1; }
.gericht .preis {
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.karte-fuss { margin-top: 48px; color: var(--text-leise); max-width: 34em; }

/* Bildpaar: großes und kleines Foto, versetzt */
.bildpaar {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: var(--spalten-abstand);
  align-items: start;
}
.bildpaar figure:nth-child(2) { margin-top: 200px; }
.foto { position: relative; overflow: hidden; background: var(--bild-grund); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--quer { aspect-ratio: 4 / 3; }
.foto--hoch { aspect-ratio: 4 / 5; }
.foto--breit { aspect-ratio: 21 / 9; }
.bildunterschrift { margin-top: 14px; color: var(--text-leise); }

/* Wegweiser (Umgebung): dunkles Schild mit Entfernungen */
.wegweiser {
  background: var(--gruen);
  color: var(--grund);
  padding: 44px 48px 40px;
  align-self: start;
  margin-top: 80px;
}
.wegweiser .schild-etikett { margin-bottom: 18px; }
.wegweiser li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(243, 243, 239, 0.22);
}
.wegweiser li:last-child { border-bottom: 1px solid rgba(243, 243, 239, 0.22); }
.wegweiser .ziel {
  font-family: var(--serif);
  font-weight: var(--h2-staerke);
  font-size: var(--h2-groesse);
  line-height: 1.2;
}
.wegweiser .ziel-land { display: block; font-family: var(--sans); font-size: 18px; color: var(--etikett); margin-top: 2px; font-weight: 400; }
.wegweiser .km { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.wegweiser-fuss { margin-top: 20px; color: var(--etikett); }

/* Formular */
.formular { display: grid; gap: 28px; }
.feldgruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld label, .feld legend { color: var(--text-mittel); }
.feld .pflicht { color: var(--text-leise); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="date"], .feld input[type="number"], .feld select, .feld textarea {
  width: 100%;
  font: inherit;
  color: var(--gruen);
  background: var(--hell);
  border: 1px solid var(--linie-feld);
  border-radius: 0;
  padding: 12px 14px;
  line-height: 1.4;
  min-height: 52px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 160ms ease;
}
.feld input[type="date"] { min-height: 52px; }
.feld textarea { min-height: 148px; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--text-leise); }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 0; border-color: var(--gruen);
}
fieldset.feld { border: 0; min-width: 0; }
fieldset.feld legend { margin-bottom: 8px; padding: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 12px; }
.wahl label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid var(--linie-feld);
  background: var(--hell);
  color: var(--gruen);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.wahl label:hover { border-color: var(--text-leise); }
.wahl input { accent-color: var(--gruen); width: 18px; height: 18px; margin: 0; }
.wahl label:has(input:checked) { border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.haken { display: flex; gap: 12px; align-items: flex-start; color: var(--text-mittel); cursor: pointer; }
.haken input { accent-color: var(--gruen); width: 20px; height: 20px; margin-top: 3px; flex: none; }
.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.formular-fuss .leise { max-width: 26em; }

/* Rechtstexte */
.rechtstext { max-width: 40em; color: var(--text-mittel); }
.rechtstext h2 {
  font-size: var(--h3-groesse);
  font-weight: var(--h3-staerke);
  color: var(--gruen);
  margin: 56px 0 14px;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--gruen);
  margin: 28px 0 6px;
}
.rechtstext ul { margin: 12px 0; }
.rechtstext li { position: relative; padding-left: 22px; }
.rechtstext li + li { margin-top: 6px; }
.rechtstext li::before { content: "–"; position: absolute; left: 0; color: var(--text-leise); }
.rechtstext address { font-style: normal; }
.rechtstext a { word-break: break-word; }
.stand { margin-top: 56px; color: var(--text-leise); }


/* ---------- Ergänzungen Unterseiten ---------- */
.status--einstieg { margin-top: 28px; }
.einstieg-zeiten { margin-top: 12px; }
.einstieg-preise { margin-top: 32px; }
.eintraege--knapp .wert .leise { display: inline; }
.einstieg-zeiten + .knoepfe, .einstieg-preise + .knoepfe { margin-top: 36px; }
.liste--kreuz { margin-top: 0; }
.abschnitt-kopf--unten { align-self: center; }
.abschnitt-kopf .fliesstext { margin-top: 20px; }
.breitbild .foto { width: 100%; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; font-weight: 600; }
.sprungmarken a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--linie-feld); transition: text-decoration-color 200ms ease;
}
.sprungmarken a:hover { text-decoration-color: currentColor; }
.wahl-einzeln { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.raster--recht .text { padding-top: 80px; }
.raster--recht .rechtstext { padding-top: 96px; }
.raster--recht .text h1 { position: sticky; top: 132px; }

body.platzhalter-zeigen [data-ph="block"] { background: none; box-shadow: none; outline: 3px dashed #E3C34E; outline-offset: 12px; }
body.platzhalter-zeigen .zeiten-paar[data-ph], body.platzhalter-zeigen .einstieg-zeiten[data-ph], body.platzhalter-zeigen .wegweiser[data-ph] { background: none; box-shadow: none; outline: 3px dashed #E3C34E; outline-offset: 8px; }

/* ---------- Fuß ---------- */
.fuss {
  margin-top: var(--abschnitt);
  background: var(--gruen);
  color: var(--grund);
}
.fuss .seite { padding-top: 88px; padding-bottom: 40px; }
.fuss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 48px;
}
.fuss .logo { position: relative; top: 0; }
.fuss .logo-breitenberg { color: var(--etikett); }
.fuss h2 {
  font-size: var(--h3-groesse);
  font-weight: var(--h3-staerke);
  margin-bottom: 14px;
}
.fuss p, .fuss li { color: rgba(243, 243, 239, 0.86); }
.fuss .fuss-leise { color: var(--etikett); }
.fuss address { font-style: normal; margin-top: 28px; color: rgba(243, 243, 239, 0.86); }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fuss-zeiten { font-variant-numeric: tabular-nums; }
.fuss-zeiten li + li { margin-top: 6px; }
.fuss-zeiten span { display: block; color: var(--etikett); }
.fuss-unten {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid rgba(243, 243, 239, 0.2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  color: var(--etikett);
}
.fuss-unten nav { display: flex; gap: 28px; }

/* Leiste unten (nur Handy) */
.leiste { display: none; }

/* ---------- Prototyp-Werkzeug (nur Entwurf) ---------- */
.werkzeug {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--linie);
  box-shadow: 0 4px 16px rgba(31, 58, 46, 0.08);
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-leise);
}
.werkzeug select { font: inherit; color: var(--gruen); padding: 4px 6px; border: 1px solid var(--linie); background: #fff; }
.werkzeug label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.werkzeug input { accent-color: var(--gruen); }
body.platzhalter-zeigen [data-ph] {
  background: rgba(240, 214, 110, 0.45);
  box-shadow: 0 0 0 2px rgba(240, 214, 110, 0.45);
}
body.platzhalter-zeigen img[data-ph], body.platzhalter-zeigen .bild[data-ph] { outline: 4px dashed #E3C34E; outline-offset: -4px; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1280px) {
  :root { --rand: 48px; --spalten-abstand: 56px; --abschnitt: 144px; }
  h1 { font-size: min(var(--h1-groesse), 5.4vw); }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .menue-knopf {
    display: inline-flex;
    position: absolute;
    right: 0;
    top: 50px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    background: none;
    border: 0;
    color: var(--gruen);
    font: 600 20px/1.4 var(--sans);
    cursor: pointer;
  }
  .menue-knopf .striche { display: inline-block; width: 22px; height: 12px; position: relative; }
  .menue-knopf .striche::before, .menue-knopf .striche::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform 240ms ease, top 240ms ease;
  }
  .menue-knopf .striche::before { top: 1px; }
  .menue-knopf .striche::after { top: 9px; }
  .menue-knopf[aria-expanded="true"] .striche::before { top: 5px; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .striche::after { top: 5px; transform: rotate(-45deg); }

  .menue {
    position: fixed;
    inset: 0;
    z-index: 37;
    display: block;
    background: var(--grund);
    padding: 140px var(--rand) 120px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }
  .menue.offen { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
  .menue li { border-top: 1px solid var(--linie); }
  .menue li:last-child { border-bottom: 1px solid var(--linie); }
  .menue a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    font-family: var(--serif);
    font-weight: var(--h2-staerke);
    font-size: var(--h2-groesse);
    line-height: 1.2;
  }
  .menue a[aria-current="page"]::after { content: "hier"; font-family: var(--sans); font-size: 18px; color: var(--text-leise); font-weight: 400; }
  .menue-kontakt { margin-top: 32px; color: var(--text-mittel); }
  .menue-kontakt a { display: inline; font: 600 18px/1.55 var(--sans); padding: 0; }
  body.menue-auf { overflow: hidden; }


  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  :root { --rand: 32px; --abschnitt: 112px; }
  .raster { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  h1 { font-size: clamp(42px, 8.6vw, 64px); }
  .einstieg .text { padding-top: 24px; }
  .einstieg .bild { margin-top: 16px; }
  .schild { bottom: -32px; }
  .einstieg + .abschnitt { margin-top: calc(var(--abschnitt) + 8px); }
  .klebt, .raster--recht .text h1 { position: static; }
  .raster--recht .text { padding-top: 24px; }
  .raster--recht .rechtstext { padding-top: 0; }
  .bildpaar { grid-template-columns: 1fr; row-gap: 40px; }
  .bildpaar figure:nth-child(2) { margin-top: 0; width: 72%; margin-left: auto; }
  .wegweiser { margin-top: 8px; }

  /* Startseite: Bilder je Angebot statt Hover */
  .startseite .einstieg .bild { display: none; }
  .startseite .zeile-bild {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bild-grund);
    margin-top: 24px;
  }
  .startseite .zeile-bild img { width: 100%; height: 100%; object-fit: cover; }
  .startseite .liste > li.angebot { border-top: 0; }
  .startseite .liste--ende > li:last-child { border-bottom: 0; }
  .liste > li.angebot::before { display: none; }
  .startseite .liste > li.angebot .zeile { border-bottom: 1px solid var(--linie); }
  .startseite .liste > li:first-child .zeile-bild { margin-top: 0; }
}

@media (max-width: 600px) {
  :root { --rand: 20px; --abschnitt: 96px; --spalten-abstand: 0px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .kopf { height: 112px; }
  .kopfbereich.gescrollt .kopf { height: 76px; }
  .kopfbereich.gescrollt { margin-bottom: 36px; }
  .kopfbereich.gescrollt .kopf .logo { top: 10px; }
  .kopfbereich.gescrollt .kopf .menue-knopf { top: 20px; }
  html { scroll-padding-top: 88px; }
  .logo { top: 28px; }
  .menue-knopf { top: 38px; }
  .menue { padding-top: 112px; }
  h1 { font-size: clamp(38px, 10.6vw, 48px); line-height: 1.08; }
  h2, .name { font-size: min(var(--h2-groesse), 28px); }
  .einstieg .text { padding-top: 16px; }
  .unterzeile { margin-top: 20px; }
  .liste { margin-top: 32px; }
  .zeile { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 0 24px; }
  .knoepfe { gap: 12px; }
  .knoepfe .knopf { flex: 1 1 172px; }
  .schild { bottom: -28px; padding: 14px 18px 16px; min-width: 0; }
  .zeiten-paar { row-gap: 40px; }
  .feldgruppe { grid-template-columns: 1fr; gap: 24px; }
  .feldgruppe.zwei-klein { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .eintraege > li { flex-direction: column; gap: 6px; }
  .unterzeile br, h1 br.nur-breit { display: none; }
  .raster--recht .text, .raster--recht .rechtstext { padding-top: 0; }
  .eintraege .wert { text-align: left; }
  .eintraege .wert .leise { display: inline; }
  .eintraege .wert .leise::before { content: " · "; }
  .eintraege--knapp > li { flex-direction: row; align-items: baseline; }
  .eintraege--knapp .wert { text-align: right; white-space: normal; }
  .eintraege--knapp .wert .leise::before { content: none; }
  .zeiten tr.heute th::after { content: "heute"; display: block; }
  .zeiten tr.heute.feiertag th::after { content: "heute, Feiertag"; }
  .wegweiser { padding: 28px 22px 24px; margin-left: 0; }
  .gericht { column-gap: 20px; }
  .fuss .seite { padding-top: 64px; }
  .fuss-raster { grid-template-columns: 1fr; row-gap: 40px; }
  .fuss-unten { margin-top: 56px; }
  .bildpaar figure:nth-child(2) { width: 82%; }

  .leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    background: var(--grund);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .leiste a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-weight: 600;
  }
  .leiste a + a { border-left: 1px solid var(--linie); }
  .leiste a.voll { background: var(--gruen); color: var(--grund); border-left-color: var(--gruen); }

  .werkzeug { bottom: calc(72px + env(safe-area-inset-bottom)); right: 8px; padding: 6px 8px; gap: 8px; font-size: 13px; }
  .werkzeug .werkzeug-titel { display: none; }
}

@media print {
  .kopf .nav, .menue-knopf, .leiste, .werkzeug, .fuss { display: none; }
  body { background: #fff; }
}

/* Nur für Screenreader */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Zwischenbreite: Knöpfe unter die Namen, damit lange Namen nicht umbrechen */
@media (min-width: 881px) and (max-width: 1080px) {
  .zeile { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Einstiegsbild am Desktop nach Fensterhöhe: Das Schild bleibt ungescrollt samt Abstand unten sichtbar.
   Fensterhöhe − Kopfzeile 140 − Schildüberstand 44 − Luft 40; höchstens wie bisher, mindestens 520 */
@media (min-width: 881px) {
  .einstieg .bild {
    aspect-ratio: auto;
    height: clamp(520px, calc(100vh - 224px), 880px);
    height: clamp(520px, calc(100svh - 224px), 880px);
  }
  .einstieg .bild--kurz {
    height: clamp(520px, calc(100vh - 224px), 780px);
    height: clamp(520px, calc(100svh - 224px), 780px);
  }
}



/* Startseite: Wenn man selbst über die Angebote fährt, schaltet alles schneller und gleichzeitig um.
   Fläche und Knopf 300 ms, Bild 450 ms, Schild 300 ms; der Selbstlauf bleibt langsam und weich */
body.manuell .liste > li.angebot::before { transition-duration: 300ms; }
body.manuell .bild-rahmen.wechsel img { transition-duration: 450ms; }
body.manuell .schild-stapel .schild-inhalt { transition: opacity 250ms var(--weich); }
body.manuell .schild-stapel .schild-inhalt.sichtbar { transition: opacity 300ms var(--weich) 60ms; }

/* Ganze Angebotszeile führt zur Unterseite (Namenslink über die Fläche gezogen),
   nur der Knopf behält sein eigenes Ziel (Speisekarte bzw. Anfrage) */
.liste > li.angebot .name a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.liste > li.angebot .knopf { position: relative; z-index: 2; }
.liste > li.angebot .name a:focus-visible { outline: none; }
.liste > li.angebot:has(.name a:focus-visible) { outline: 2px solid var(--gruen); outline-offset: -2px; }

/* ---------- Startseite: Wegweiser-Pfahl und grüne „Erde“ ----------
   Ein brauner Pfahl (12 px) läuft an der linken Kante der Liste von der obersten Trennlinie
   nach unten und steht auf der dunkelgrünen Fläche. Die Angebotszeilen hängen als Schilder daran.
   --pfahl-oben setzt seite.js (Abstand der Liste zur Oberkante des Einstiegs). */
:root {
  /* Einstieg Startseite, skaliert mit der Fensterhöhe (Werte bei 1080 hoch ≈ Brilliant-Stand) */
  --abstand-erde: clamp(56px, 8vh, 140px);   /* Pfahl unter der Liste bis zur grünen Fläche */
  --haus-oben: clamp(24px, 5.6vh, 61px);      /* Kopfzeile bis Giebelspitze */
  --sicht-erde: 40px;                         /* so viel Grün ist im ersten Bildschirm zu sehen */
}
html { overflow-x: clip; }
.erde {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--gruen);
  color: var(--grund);
}
.erde-innen {
  max-width: calc(var(--inhalt) + 2 * var(--rand));
  margin: 0 auto;
  padding: 112px var(--rand) 120px;
}
.erde h2 { color: var(--grund); }
.erde .unterzeile { color: rgba(243, 243, 239, 0.86); max-width: 30em; }
.erde-zahlen li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(243, 243, 239, 0.22);
  color: rgba(243, 243, 239, 0.86);
}
.erde-zahlen li:last-child { border-bottom: 1px solid rgba(243, 243, 239, 0.22); }
.erde-zahl {
  flex: none;
  width: 56px;
  font-family: var(--serif);
  font-weight: var(--h2-staerke);
  font-size: var(--h2-groesse);
  line-height: 1.2;
  color: var(--grund);
  font-variant-numeric: lining-nums tabular-nums;
}
.erde + .abschnitt { margin-top: var(--abschnitt); }

@media (min-width: 881px) {
  .startseite .einstieg + .erde { margin-top: var(--abstand-erde); }
  .startseite .einstieg::after {
    content: "";
    position: absolute;
    left: 0;
    width: 12px;
    top: var(--pfahl-oben, 50%);
    bottom: calc(-1 * var(--abstand-erde));
    background: var(--braun);
    z-index: 3;
    pointer-events: none;
  }
}
@media (max-width: 880px) {
  .startseite .einstieg + .erde { margin-top: var(--abschnitt); }
  .erde-innen { padding: 80px var(--rand) 88px; }
}

/* Startseite: Jede Angebotszeile hat eine Haarlinie in Pfeilform (oben, Spitze, unten).
   ::after = volle Form in Linienfarbe, ::before = 1 px kleinere Form in Grundfarbe darüber,
   die beim Markieren den dunkleren Ton annimmt. Bei 100° Spitzenwinkel verschiebt eine
   1-px-Linie die Schrägkante waagerecht um 1/sin 50° ≈ 1,31 px. Weil schräge Haarlinien durch die
   Kantenglättung heller wirken, sind sie mit 1,7 px (≈ 1,3 px senkrecht) etwas kräftiger gesetzt;
   die Ecke oben liegt dann 0,86 px vor dem Spitzenansatz. Zwischen zwei Zeilen zeichnet nur die obere Linie der
   nächsten Zeile, damit nichts doppelt wird; die letzte Zeile zeichnet ihre Unterkante selbst. */
@media (min-width: 881px) {
  .startseite .liste > li.angebot { border-top: 0; --unten: 0px; --unten-x: 1.7px; }
  .startseite .liste--ende > li:last-child { border-bottom: 0; --unten: 1px; --unten-x: 0.86px; }
  .startseite .liste > li.angebot::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(-1 * var(--spitze, 47px));
    z-index: -2;
    background: var(--linie);
    clip-path: polygon(0 0, calc(100% - var(--spitze, 47px)) 0, 100% 50%, calc(100% - var(--spitze, 47px)) 100%, 0 100%);
    pointer-events: none;
  }
  .startseite .liste > li.angebot::before {
    opacity: 1;
    background: var(--grund);
    transition: background-color 700ms var(--weich);
    clip-path: polygon(
      0 1px,
      calc(100% - var(--spitze, 47px) - 0.86px) 1px,
      calc(100% - 1.7px) 50%,
      calc(100% - var(--spitze, 47px) - var(--unten-x)) calc(100% - var(--unten)),
      0 calc(100% - var(--unten))
    );
  }
  .startseite .liste > li.angebot.an::before { background: var(--grund-hover); }
}
@media (min-width: 881px) and (hover: hover) {
  .startseite .liste > li.angebot:hover::before,
  .startseite .liste > li.angebot:focus-within::before { background: var(--grund-hover); }
}

/* Startseite: Text links 24 px vom Pfahl (12 px) entfernt */
@media (min-width: 881px) {
  .startseite .liste > li.angebot .zeile { padding-left: 36px; }
}

/* ---------- Startseite: hellblauer Einstieg mit dem Haus (Stand Brilliant „Hero hellblau“, 01.10.) ----------
   Der Einstieg liegt vom Kopf bis zur grünen Fläche auf Hellblau. Rechts steht das Haus: Wand mit Giebel
   und Ziegeldach (12 px wie der Pfahl), darin das Hausschild und das Foto im weißen Passepartout,
   unten das wechselnde Etikett. Alle Maße in Prozent der Wandbreite (616 px bei 1440). */
.startseite .einstieg { isolation: isolate; }
.startseite .einstieg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: calc(-1 * var(--abschnitt));
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--himmel);
  pointer-events: none;
}
.haus { display: none; }

@media (min-width: 881px) {
  .startseite .einstieg { align-items: start; }
  .startseite .einstieg .text { padding-top: clamp(20px, 4.2vh, 46px); }
  .startseite .einstieg h1 { font-size: min(var(--h1-groesse), 6.2vh); }
  .startseite .einstieg .unterzeile { margin-top: clamp(16px, 2.6vh, 28px); }
  .startseite .einstieg .liste { margin-top: clamp(24px, 3.7vh, 40px); }
  .startseite .einstieg .zeile { padding-top: clamp(12px, 1.6vh, 20px); padding-bottom: clamp(12px, 1.6vh, 20px); }
  .startseite .einstieg::before { bottom: calc(-1 * var(--abstand-erde)); }

  .haus {
    display: block;
    position: relative;
    /* so breit wie in Brilliant (616 von 656), aber nie so hoch, dass die grüne Fläche unter den Bildschirmrand rutscht */
    width: min(calc(616 / 656 * 100%), calc((100vh - 141px - var(--haus-oben) - var(--sicht-erde)) * 616 / 855));
    margin-left: auto;
    aspect-ratio: 616 / 855;
    align-self: end;                                 /* steht immer unten, auch wenn die Liste höher ist */
    margin-top: var(--haus-oben);
    margin-bottom: calc(-1 * var(--abstand-erde));   /* steht wie der Pfahl auf der grünen Fläche */
  }
  .haus-form { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .haus-wand { fill: var(--wand); }
  .haus-dach { fill: var(--ziegel); }

  .hausschild {
    position: absolute;
    left: 50%;
    top: 14.737%;
    transform: translateX(-50%) scale(var(--haus-skala, 1));   /* wächst mit dem Haus, --haus-skala setzt seite.js */
    transform-origin: 50% 0;
    width: 174.8px;
    height: 104px;
    background: var(--gruen);
    box-shadow: 0 0 0 4.3px #fff;              /* weißer Rand mit spitzen Ecken */
  }
  .hausschild-jagdhof {
    position: absolute;
    left: calc(26.75px + var(--logo-x) + 1.25px);
    top: 22px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: var(--logo-groesse);
    line-height: 1;
    color: var(--grund);
    white-space: nowrap;
  }
  .hausschild-breitenberg {
    position: absolute;
    left: 26.71px;
    top: calc(22px + var(--logo-groesse) + 6.83px);
    font-size: 14.4px;
    line-height: 1.4;
    letter-spacing: 3px;
    color: var(--etikett);
    white-space: nowrap;
  }

  .passepartout {
    position: absolute;
    left: 10.369%;
    top: 32.281%;
    width: 79.265%;
    height: 59.698%;
    background: #fff;
  }
  .passepartout .bild-rahmen { inset: 4.702% 4.915%; }   /* 24 px weißer Rand */
  .passepartout .ausschnitt-stube { object-position: 30% 0; transform: scale(1.4); transform-origin: 30% 0; }

  /* Etikett: Mitte auf der Unterkante des Fotos */
  .haus .schild { top: 89.168%; bottom: auto; transform: translate(-50%, -50%) scale(var(--schild-skala, 1)); }
}

/* Kopfzeile: Logo und Navigation stehen weiter außen als der Inhalt */
.kopfbereich .seite { max-width: calc(var(--inhalt-kopf) + 2 * var(--rand)); }

/* Startseite: Kopfzeile ungescrollt im Hellblau des Einstiegs, beim Einklappen (mit Trennlinie) im Grundton */
.startseite .kopfbereich { background: var(--himmel); }
.startseite .kopfbereich.gescrollt { background: var(--grund); }


/* Startseite: Wegweiser so schmal wie die längste Zeile (Pizzeria San Remo) es zulässt,
   alle drei gleich lang; Schilder und Pfahl 40 px nach rechts eingerückt */
@media (min-width: 881px) {
  /* Einzug von Pfahl und Schildern: 40 px ab 1440 Fensterbreite, schmaler werdend, ab 1100 bündig mit dem Text */
  .startseite .einstieg { --pfahl-einzug: clamp(0px, (100vw - 1100px) * 40 / 340, 40px); }
  .startseite .einstieg .liste { width: max-content; margin-left: var(--pfahl-einzug); }   /* darf etwas in den Spaltenabstand ragen */
  .startseite .einstieg::after { left: var(--pfahl-einzug); }
  /* Mindestabstand Name → Knopf = Abstand Pfahl → Name (36 px Innenabstand − 12 px Pfahl) */
  .startseite .einstieg .zeile { gap: 24px; }
}

/* Angebotszeilen: Statuszeile 6 px näher am Namen (vorher 2 px Abstand) */
.liste > li.angebot .status { margin-top: -4px; }

/* Entwurfswerkzeug: Unterzeile im Einstieg ausblendbar */
body.ohne-unterzeile.startseite .einstieg .unterzeile { visibility: hidden; }   /* Platz bleibt, Wegweiser rutschen nicht hoch */

/* ---------- Entwurf: Farbfilter über dem Foto im Haus ---------- */
.bild-filter {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: hsl(var(--filter-h, 40) var(--filter-s, 60%) var(--filter-l, 50%));
  opacity: 0;
  mix-blend-mode: var(--filter-mischung, normal);
  transition: opacity 200ms ease;
}
body.filter-an .bild-filter { opacity: var(--filter-deckkraft, 0.25); }

.werkzeug button.werkzeug-knopf {
  font: inherit; color: var(--gruen); background: #fff; border: 1px solid var(--linie);
  padding: 4px 8px; cursor: pointer;
}
.werkzeug button.werkzeug-knopf[aria-expanded="true"] { border-color: var(--gruen); }
.filter-feld {
  position: fixed;
  left: 16px;                /* links unten, damit das Foto rechts beim Einstellen frei bleibt */
  bottom: 16px;
  z-index: 41;
  width: 300px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid var(--linie);
  box-shadow: 0 8px 28px rgba(31, 58, 46, 0.14);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-mittel);
}
.filter-feld[hidden] { display: none; }
.filter-feld .filter-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.filter-feld .filter-kopf strong { color: var(--gruen); font-size: 14px; }
.filter-feld label { display: block; }
.filter-feld .filter-zeile { margin-top: 10px; }
.filter-feld .filter-wert { float: right; font-variant-numeric: tabular-nums; color: var(--gruen); }
.filter-feld .filter-farbe { display: flex; align-items: center; gap: 10px; }
.filter-feld input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--linie); background: none; cursor: pointer; }
.filter-feld .filter-code { font-variant-numeric: tabular-nums; color: var(--gruen); }
.filter-feld select { font: inherit; color: var(--gruen); padding: 4px 6px; border: 1px solid var(--linie); background: #fff; width: 100%; margin-top: 4px; }
.filter-feld .filter-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.filter-feld .filter-fuss button { font: inherit; color: var(--gruen); background: none; border: 1px solid var(--linie); padding: 4px 10px; cursor: pointer; }

.regler {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  margin-top: 6px;
  border-radius: 6px;
  background: var(--spur);
  outline-offset: 4px;
  cursor: pointer;
}
.regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gruen);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.regler::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--gruen);
}
.regler--deckkraft {
  background:
    var(--spur),
    repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px;
}

/* Startseite Desktop: Die grüne Fläche ist im ersten Bildschirm immer als Horizont zu sehen (--sicht-erde),
   auch wenn Haus und Wegweiser kleiner sind; das Haus steht dabei auf der grünen Fläche. */
@media (min-width: 881px) {
  .startseite .einstieg { min-height: calc(100vh - var(--sicht-erde) - 141px - var(--abstand-erde)); }
}

/* Startseite Desktop: Hauptzeile und Unterzeile rücken ein Drittel so weit nach außen wie das Logo
   (--kopf-ueberstand setzt seite.js); die Wegweiser bleiben stehen */
@media (min-width: 881px) {
  .startseite .einstieg h1,
  .startseite .einstieg .unterzeile { margin-left: calc(-1 / 3 * var(--kopf-ueberstand, 0px)); }
}

/* ---------- Startseite: Landschaft hinter dem Einstieg (Stand Brilliant „Sommer 3 · Wanderweg“, 01.10.) ----------
   Bergkämme des Dreisessel-Massivs, Kuppe und Wiese mit Wanderweg. Die Datei ist 3200 × 960 groß;
   die Entwurfsbreite 1728 liegt in der Mitte, die Mitte der Datei liegt auf der Mitte des Inhalts.
   Bei vollem Inhalt (1200 px) gilt Maßstab 1, darunter schrumpft sie mit dem Inhalt.
   Unterkante = Oberkante der grünen Fläche (wie Pfahl und Haus). Kein Himmel in der Datei: den liefert ::before. */
.landschaft { display: none; }
@media (min-width: 881px) {
  .startseite .landschaft {
    display: block;
    position: absolute;
    z-index: -1;                                   /* über dem Himmel (::before), unter Text, Wegweisern und Haus */
    left: calc(50% - 50vw);
    width: 100vw;
    bottom: calc(-1 * var(--abstand-erde));
    height: calc(min(var(--inhalt), 100vw - 2 * var(--rand)) * 960 / 1200);
    overflow: hidden;                              /* die breite Datei erzeugt keinen waagrechten Rollbalken */
    pointer-events: none;
  }
  .startseite .landschaft img {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(min(var(--inhalt), 100vw - 2 * var(--rand)) * 3200 / 1200);
    max-width: none;
    height: auto;
    transform: translateX(-50%);
  }
}

/* Etikett unter dem Foto im Haus vorerst ausgeblendet (Christoph, 01.10.: „eins zu viel“).
   Zum Wiederherstellen diese Regel löschen; Inhalt, Wechsel und Skalierung laufen unverändert weiter. */
.startseite .haus .schild { display: none; }