/* Landgasthof Tannenhirsch — Beispiel-Website von Nahweb (Paket Premium)
   Schriften: Alegreya (Titel, Wortmarke, Menüpreise) und Alegreya Sans (Text, Knöpfe, Formulare)
   Farben nach Briefing A.5: Tannengrün, Leinen, Tinte, ein Weinrot nur für die Handlung. */

/* Schriften lokal (latin), keine Verbindung zu Google. Alegreya ist variabel: eine Datei fuer 500 und 700,
   wie zuvor bei Google Fonts eingebunden. */
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/alegreya-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/alegreya-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/alegreya-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ersatz, bis die Schriften geladen sind: lokale Arial bzw. Times New Roman, in Laufweite, Ober- und
   Unterlänge an Alegreya angeglichen (im Browser gemessen). So springt beim Wechsel nichts. */
@font-face {
  font-family: 'Alegreya Sans Ersatz';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 86.62%;
  ascent-override: 103.90%;
  descent-override: 34.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alegreya Sans Ersatz';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 87.73%;
  ascent-override: 102.59%;
  descent-override: 34.20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alegreya Sans Ersatz';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold');
  size-adjust: 83.46%;
  ascent-override: 107.84%;
  descent-override: 35.95%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alegreya Ersatz';
  font-style: normal;
  font-weight: 500;
  src: local('Times New Roman'), local('TimesNewRomanPSMT');
  size-adjust: 100.94%;
  ascent-override: 101.05%;
  descent-override: 34.67%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Alegreya Ersatz';
  font-style: normal;
  font-weight: 700;
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT');
  size-adjust: 95.99%;
  ascent-override: 106.26%;
  descent-override: 36.46%;
  line-gap-override: 0%;
}


:root {
  --tanne: #1F3B2F;
  --tanne-tief: #172D24;
  --tanne-hell: #2C4D3E;
  --leinen: #F5F0E6;
  --leinen-tief: #ECE4D4;
  --tinte: #2A2622;
  --tinte-weich: #574F46;
  --tinte-leise: #6B6258;
  --weinrot: #8E2F3A;
  --weinrot-tief: #74242E;
  --moos: #5E6B45;
  --messing: #C9A66B;
  --weiss: #FFFFFF;
  --linie: #D9CFBD;
  --feldrand: #8A8173;
  --fehler: #A1262F;
  --auf-tanne: #F5F0E6;
  --auf-tanne-weich: #CFD6CC;

  /* Nahweb (Streifen, Hinweise, Fuss) */
  --nw-tinte: #17181B;
  --nw-tinte-weich: #56524B;
  --nw-papier: #F6F2EA;
  --nw-papier-tief: #EDE6D8;
  --nw-linie: #D8CDB8;
  --nw-orange: #EC5A3A;
  --nw-knopf: #CB4221;
  --nw-orange-schrift: #9A2F14;

  --titel: 'Alegreya', 'Alegreya Ersatz', Georgia, 'Times New Roman', serif;
  --text: 'Alegreya Sans', 'Alegreya Sans Ersatz', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --nw-schrift: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --streifen-h: 0px; /* Nahweb-Streifen (../_rahmen/rahmen.css) steht im Fluss, nichts klebt darüber */
  --leiste-h: 72px;
  --rand: 16px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Feste Leiste unten (bis 899 px): fokussierte Elemente nicht darunter verstecken (WCAG 2.4.11) */
@media (max-width: 899px) { html { scroll-padding-bottom: calc(var(--leiste-h) + 12px + env(safe-area-inset-bottom, 0px)); } }
body {
  margin: 0;
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tanne); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .8em; }
h1, h2, h3 { font-family: var(--titel); color: var(--tanne); margin: 0; font-weight: 700; }
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.005em; }
h2 { font-size: 27px; line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.25; }
strong { font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; border-radius: 2px; }
.dunkel :focus-visible, .fuss :focus-visible, .band :focus-visible { outline-color: var(--messing); }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--tanne); color: var(--auf-tanne); padding: 10px 14px; border-radius: var(--radius);
}
.skip:focus { top: 8px; }
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: 760px; }

/* Nahweb-Streifen und -Abschluss: ../_rahmen/rahmen.css */
@media (max-width: 359px) {
  .marke__ort { letter-spacing: .02em; }
  .marke__zeichen { width: 24px; }
  .menue-knopf { padding: 0 11px; }
}

/* ------------------------------------------------ Kopf */
.kopf { background: var(--leinen); border-bottom: 1px solid var(--linie); position: relative; z-index: 40; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tanne); padding: 6px 0; }
.marke__zeichen { width: 30px; height: 34px; flex: none; }
.marke__name { display: block; font-family: var(--titel); font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: .005em; }
.marke__ort { display: block; font-size: 13px; line-height: 1.2; margin-top: 4px; color: var(--tinte-weich); letter-spacing: .06em; text-transform: uppercase; }
.menue-knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px;
  background: transparent; color: var(--tanne); border: 1.5px solid var(--tanne); border-radius: var(--radius);
  font-weight: 700; font-size: 16px; cursor: pointer; flex: none;
}
.menue-knopf__text { display: inline-block; }
.menue-knopf__striche { width: 18px; height: 12px; position: relative; display: inline-block; flex: none; }
.menue-knopf__striche::before, .menue-knopf__striche::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px;
}
.menue-knopf__striche::before { top: 1px; }
.menue-knopf__striche::after { bottom: 1px; }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 5px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { bottom: 5px; transform: rotate(-45deg); }

.nav { display: none; }
.nav.is-offen {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--leinen); border-bottom: 1px solid var(--linie);
  box-shadow: 0 14px 24px rgba(31, 59, 47, .12);
}
.nav__liste { list-style: none; margin: 0; padding: 6px var(--rand) 14px; }
.nav__liste a {
  display: flex; align-items: center; min-height: 52px; padding: 0 4px;
  font-family: var(--titel); font-size: 22px; font-weight: 500; text-decoration: none; color: var(--tanne);
  border-bottom: 1px solid var(--linie);
}
.nav__liste a[aria-current="page"] { font-weight: 700; }
.nav__liste a[aria-current="page"]::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tanne); margin-left: 10px; }
.nav__telefon { padding: 0 var(--rand) 16px; }
.kopf__telefon { display: none; }
/* Ohne JavaScript: kein Menü-Knopf, der nichts tut; die Navigation steht offen unter der Marke */
@media (max-width: 899px) {
  html:not(.js) .menue-knopf, html:not(.js) .nav__telefon { display: none; }
  html:not(.js) .kopf__innen { flex-wrap: wrap; }
  html:not(.js) .nav { display: block; flex: 1 0 100%; }
  html:not(.js) .nav__liste { padding-left: 0; padding-right: 0; }
}

/* Statuszeile */
.status { background: var(--leinen-tief); border-bottom: 1px solid var(--linie); font-size: 15.5px; }
.status__innen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.status__jetzt { margin: 0; display: flex; align-items: center; gap: 8px; }
.status__punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid rgba(42, 38, 34, .6); background: transparent; }
.status.is-offen .status__punkt { background: var(--moos); border-color: var(--moos); }
.status__heute { display: none; margin: 0; color: var(--tinte-weich); }

/* ------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: var(--radius);
  font-family: var(--text); font-size: 17px; font-weight: 700; line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopf--haupt { background: var(--weinrot); color: var(--weiss); }
.knopf--haupt:hover { background: var(--weinrot-tief); color: var(--weiss); }
.knopf--umriss { background: transparent; color: var(--tanne); border-color: var(--tanne); }
.knopf--umriss:hover { background: var(--tanne); color: var(--auf-tanne); }
.knopf--hell { background: transparent; color: var(--auf-tanne); border-color: var(--auf-tanne); }
.knopf--hell:hover { background: var(--auf-tanne); color: var(--tanne); }
.knopf--breit { width: 100%; }
.knopf__icon { width: 19px; height: 19px; flex: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.knopfreihe .knopf { flex: 1 1 150px; }
.pfeil-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-weight: 700; color: var(--tanne); text-decoration: underline; text-underline-offset: 4px;
}
.pfeil-link::after { content: '→'; font-weight: 400; transition: transform .15s ease; }
.pfeil-link:hover::after { transform: translateX(3px); }

/* ------------------------------------------------ Abschnitte */
.abschnitt { padding: 44px 0; }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.abschnitt--tief { background: var(--leinen-tief); }
.abschnitt__kopf { margin-bottom: 18px; }
.abschnitt__kopf p { margin-top: 8px; color: var(--tinte-weich); }
.kicker { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--moos); margin: 0 0 8px; }
.dunkel .kicker { color: var(--messing); }
.lead { font-size: 18.5px; line-height: 1.5; color: var(--tinte); }
.leise { color: var(--tinte-weich); }
.klein { font-size: 15.5px; }
.abstand-oben { margin-top: 14px; }

/* Start: Held */
.held__raster { display: flex; flex-direction: column; }
.held__bild { position: relative; height: 300px; background: var(--tanne-tief); overflow: hidden; margin: 0 calc(-1 * var(--rand)); }
.held__bild picture { display: contents; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.held__text { padding-top: 26px; padding-bottom: 8px; }
.held__text h1 { max-width: 16ch; }
.held__text .lead { margin-top: 12px; max-width: 34em; }

.heute {
  background: var(--tanne); color: var(--auf-tanne); border-radius: var(--radius);
  padding: 20px 20px 18px; margin-top: 26px; position: relative;
}
.heute::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: var(--messing); }
.heute h2 { color: var(--auf-tanne); font-size: 16px; font-family: var(--text); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.heute__haupt { font-family: var(--titel); font-size: 22px; line-height: 1.3; margin: 0 0 6px; font-weight: 700; }
.heute__neben { margin: 0; color: var(--auf-tanne-weich); }
.heute a { color: var(--auf-tanne); }

.mittag { display: grid; gap: 20px; }
.mittag__preise { display: grid; gap: 10px; margin: 16px 0 14px; }
.preis-schild {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
}
.preis-schild__was { font-weight: 500; }
.preis-schild__preis { font-family: var(--titel); font-size: 24px; font-weight: 700; color: var(--tanne); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.preis-schild__preis small { font-family: var(--text); font-size: 14px; font-weight: 500; color: var(--tinte-weich); margin-right: 3px; }

/* Gerichte */
.gerichte { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.gericht { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; }
.gericht__bild { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radius); background: var(--leinen-tief); }
.gericht__name { font-family: var(--titel); font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--tanne); margin: 2px 0 4px; }
.gericht__was { margin: 0 0 4px; color: var(--tinte-weich); font-size: 16px; }
.gericht__preis { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Bild und Text */
.bild-text { display: grid; gap: 20px; align-items: center; }
.bild-text__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--leinen-tief); }
.bild-text__text h2 { margin-bottom: 10px; }
.band {
  background: var(--tanne); color: var(--auf-tanne);
}
.band .wrap { padding-top: 34px; padding-bottom: 34px; }
.band h2 { color: var(--auf-tanne); margin-bottom: 8px; }
.band p { color: var(--auf-tanne-weich); max-width: 40em; }
.band a { color: var(--auf-tanne); }
.band .pfeil-link { color: var(--auf-tanne); }
.fakten { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fakten li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.fakten svg { width: 22px; height: 22px; margin-top: 2px; color: var(--moos); }

/* Seitenkopf (Unterseiten) */
.seitenkopf { padding: 30px 0 8px; }
.seitenkopf .lead { margin-top: 12px; max-width: 36em; }
.seitenbild { margin-top: 22px; }
.seitenbild img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); background: var(--leinen-tief); }

/* ------------------------------------------------ Karte */
.sprung {
  position: sticky; top: var(--streifen-h); z-index: 30;
  background: var(--leinen); border-bottom: 1px solid var(--linie);
}
.sprung__liste {
  list-style: none; margin: 0; padding: 8px var(--rand); display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 1160px; margin: 0 auto;
}
.sprung__liste::-webkit-scrollbar { display: none; }
.sprung__liste a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; white-space: nowrap;
  border: 1.5px solid var(--linie); border-radius: 999px; background: var(--weiss);
  text-decoration: none; color: var(--tanne); font-weight: 500; font-size: 16px;
}
.sprung__liste a:hover { border-color: var(--tanne); }
.kartenteil { padding: 34px 0 6px; scroll-margin-top: calc(var(--streifen-h) + 70px); }
/* Seite mit klebender Sprungleiste: Platz oben für Sprungziele und für den Fokus beim Zurück-Tabben (WCAG 2.4.11).
   Der Abstand wandert von .kartenteil auf html, damit die Sprünge gleich weit bleiben (Browser ohne :has wie bisher). */
html:has(.sprung) { scroll-padding-top: calc(var(--streifen-h) + 70px); }
html:has(.sprung) .kartenteil { scroll-margin-top: 0; }
.kartenteil h2 { margin-bottom: 4px; }
.kartenteil__hinweis { color: var(--tinte-weich); margin: 0 0 10px; }
.kartenteil__bild { margin: 14px 0 6px; }
.kartenteil__bild img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); background: var(--leinen-tief); }
.kartenteil__bild--wein img { object-position: 50% 64%; }
.gut-zu-wissen__titel { font-size: 22px; margin-bottom: 10px; }
.speisen { list-style: none; margin: 0; padding: 0; }
.speise {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--linie);
}
.speise:last-child { border-bottom: 0; }
.speise__name { font-weight: 500; }
.speise__name small { display: block; color: var(--tinte-weich); font-size: 15.5px; font-weight: 400; margin-top: 2px; }
.speise__preis { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; }
.speise__preis--gross { font-family: var(--titel); font-size: 22px; font-weight: 700; color: var(--tanne); }
.gut-zu-wissen { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 18px 8px; margin-top: 16px; }
.gut-zu-wissen p { margin-bottom: 10px; }

/* ------------------------------------------------ Formulare */
.formular { margin-top: 8px; }
.schritte { display: flex; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.schritte li { flex: 1; height: 4px; border-radius: 2px; background: var(--linie); }
.schritte li.is-fertig, .schritte li.is-jetzt { background: var(--tanne); }
.schritt-text { font-size: 15px; color: var(--tinte-weich); margin: 0 0 14px; font-weight: 500; }
.schritt[hidden] { display: none; }
.schritt h2 { margin-bottom: 18px; }
.feld { margin: 0 0 20px; }
.feld__titel, .feld > label, .gruppe legend {
  display: block; font-weight: 700; font-size: 17px; margin: 0 0 8px; padding: 0; color: var(--tinte);
}
.feld__titel .optional, .gruppe legend .optional, .feld > label .optional { font-weight: 400; color: var(--tinte-weich); font-size: 15.5px; }
.gruppe { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.eingabe {
  width: 100%; min-height: 50px; padding: 11px 13px; font: inherit; font-size: 16px; color: var(--tinte);
  background: var(--weiss); border: 1.5px solid var(--feldrand); border-radius: var(--radius);
}
textarea.eingabe { min-height: 96px; resize: vertical; }
.eingabe--kurz { max-width: 260px; }
.bestaetigung__titel { font-size: 27px; margin-bottom: 12px; }
.eingabe:focus { outline: 3px solid var(--tanne); outline-offset: 1px; border-color: var(--tanne); }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.hilfe { font-size: 15px; color: var(--tinte-weich); margin: 6px 0 0; }
.fehler { font-size: 15.5px; color: var(--fehler); font-weight: 700; margin: 8px 0 0; }
.fehler:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--wisch {
  flex-wrap: nowrap; overflow-x: auto; padding: 2px var(--rand) 8px; margin: 0 calc(-1 * var(--rand));
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); scrollbar-width: none;
}
.chips--wisch::-webkit-scrollbar { display: none; }
.chips--wisch .chip { scroll-snap-align: start; flex: none; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip label, .chip-knopf {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 46px; min-width: 46px; padding: 6px 15px; border-radius: var(--radius);
  background: var(--weiss); border: 1.5px solid var(--feldrand); color: var(--tinte);
  font-size: 16.5px; font-weight: 500; line-height: 1.15; cursor: pointer; user-select: none; text-align: center;
}
.chip label small { font-size: 13.5px; font-weight: 400; color: var(--tinte-weich); margin-top: 3px; }
.chip input:checked + label, .chip-knopf[aria-pressed="true"] { background: var(--weinrot); border-color: var(--weinrot); color: var(--weiss); }
.chip input:checked + label small { color: #F3DDE0; }
.chip input:focus-visible + label { outline: 3px solid var(--tanne); outline-offset: 2px; }
.chip input:disabled + label { border-style: dashed; color: var(--tinte-leise); background: transparent; cursor: not-allowed; }
.chip input:disabled + label small { color: var(--tinte-leise); }
.chip--tag label { min-width: 74px; min-height: 58px; }
.chip--tag label span { font-weight: 700; }
.zeitgruppe { margin: 0 0 12px; }
.zeitgruppe .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px 6px; }
.zeitgruppe .chip label { width: 100%; padding: 6px 2px; min-height: 46px; font-variant-numeric: tabular-nums; }
.zeitgruppe__titel { font-size: 15px; color: var(--tinte-weich); margin: 0 0 6px; font-weight: 500; }
.chip-knopf { flex-direction: row; font-family: var(--text); }

.zaehler { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--feldrand); border-radius: var(--radius); background: var(--weiss); }
.zaehler button {
  width: 52px; height: 50px; border: 0; background: transparent; color: var(--tanne); font-size: 26px; line-height: 1; cursor: pointer; font-weight: 500;
}
.zaehler button:disabled { color: #B5AC9E; cursor: not-allowed; }
.zaehler output, .zaehler__wert { min-width: 56px; text-align: center; font-family: var(--titel); font-size: 24px; font-weight: 700; color: var(--tanne); }
input.zaehler__wert {
  width: 64px; height: 50px; border: 0; background: transparent; padding: 0; -moz-appearance: textfield; appearance: textfield;
  border-left: 1px solid var(--linie); border-right: 1px solid var(--linie); border-radius: 0;
}
input.zaehler__wert::-webkit-outer-spin-button, input.zaehler__wert::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.zaehler__wert:focus { outline: 3px solid var(--tanne); outline-offset: 0; }
.zaehler__einheit { margin-left: 10px; color: var(--tinte-weich); }
.chips--bemerkung { margin-bottom: 10px; }
.chips--bemerkung .chip-knopf { min-height: 44px; font-size: 16px; }
.chip-knopf[aria-pressed="true"]::before { content: '✓'; margin-right: 6px; font-weight: 700; }
.hinweis-klein { background: var(--leinen-tief); border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; font-size: 16px; }
.hinweis-klein[hidden] { display: none; }
.datumfeld { margin-top: 12px; max-width: 280px; }
.datumfeld[hidden] { display: none; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.formular__fuss .knopf { flex: 1 1 220px; }
.zurueck { background: none; border: 0; color: var(--tanne); text-decoration: underline; font-weight: 700; min-height: 44px; padding: 0 4px; cursor: pointer; }
.uebersicht { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.uebersicht__haupt { font-family: var(--titel); font-size: 22px; line-height: 1.3; color: var(--tanne); font-weight: 700; margin: 0 0 8px; }
.uebersicht__wer { font-family: var(--titel); font-size: 19px; font-weight: 700; color: var(--tanne); margin: -4px 0 10px; }
.uebersicht p:last-child { margin-bottom: 0; }

.bestaetigung { padding: 4px 0 8px; }
.bestaetigung[hidden] { display: none; }
.bestaetigung__haken { width: 46px; height: 46px; border-radius: 50%; background: var(--moos); color: var(--weiss); display: grid; place-items: center; margin-bottom: 14px; }
.bestaetigung__haken svg { width: 24px; height: 24px; }
.bestaetigung h2 { margin-bottom: 12px; }
.bestaetigung__eckdaten { font-family: var(--titel); font-size: 21px; font-weight: 700; color: var(--tanne); }

/* Nahweb-Kasten nach dem Absenden */
.nw-kasten {
  font-family: var(--nw-schrift); background: var(--nw-papier); color: var(--nw-tinte);
  border: 1px solid var(--nw-linie); border-left: 4px solid var(--nw-orange); border-radius: 4px;
  padding: 16px 18px; margin-top: 22px; font-size: 16px; line-height: 1.5;
}
.nw-kasten__titel { font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.nw-kasten .nw-knopf { margin-top: 8px; }
.nw-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
  background: var(--nw-knopf); color: #FFFFFF; border-radius: 6px; font-family: var(--nw-schrift);
  font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
}
.nw-knopf:hover { background: #B23A1C; color: #FFFFFF; }

/* Seitenleiste neben Formular */
.neben { display: grid; gap: 16px; margin-top: 34px; }
.neben__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--leinen-tief); }
@media (min-width: 900px) { .neben__bild img { aspect-ratio: 4 / 5; object-position: 60% 50%; } }
.neben__block { border-top: 2px solid var(--tanne); padding-top: 14px; }
.neben__block h2 { font-size: 21px; margin-bottom: 8px; }
.liste-punkte { margin: 0; padding-left: 20px; }
.liste-punkte li { margin-bottom: 6px; }

/* Anlässe */
.raeume { display: grid; gap: 18px; margin-top: 8px; }
.raum { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.raum img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--leinen-tief); }
.raum__text { padding: 16px 16px 6px; }
.raum__text h3 { margin-bottom: 4px; }
.raum__platz { font-weight: 700; color: var(--moos); margin: 0 0 6px; }
.raum { border-top: 3px solid var(--tanne); }

/* Eckdaten (Start: Säli) und Faktenkarte (Start: Anfahrt) */
.eckdaten {
  margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--tanne);
  border-radius: var(--radius); padding: 4px 18px;
}
.eckdaten div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.eckdaten div:last-child { border-bottom: 0; }
.eckdaten dt { color: var(--tinte-weich); }
.eckdaten dd { margin: 0; font-weight: 700; }
.fakten--karte { margin: 0; background: var(--weiss); border: 1px solid var(--linie); border-top: 3px solid var(--tanne); border-radius: var(--radius); padding: 16px 18px; gap: 14px; }
.ferien { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--weinrot); border-radius: var(--radius); padding: 12px 16px; max-width: 40em; }

/* Vorschau «So kommt die Anfrage bei Ihnen an» im Nahweb-Kasten */
.nw-mail { background: #FFFFFF; border: 1px solid var(--nw-linie); border-radius: 4px; padding: 10px 14px; margin: 4px 0 10px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.nw-mail__kopf { margin: 0; padding: 3px 0; border-bottom: 1px solid var(--nw-papier-tief); }
.nw-mail__kopf span { display: inline-block; min-width: 4.4em; color: var(--nw-tinte-weich); }
.nw-mail__text { margin: 8px 0 2px; white-space: pre-line; }
.menues { display: grid; gap: 14px; margin-top: 8px; }
.menue { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; }
.menue__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.menue__kopf h3 { font-size: 20px; }
.menue__kopf p { margin: 0; }
.knopfreihe--links .knopf { flex: 0 1 auto; padding: 0 28px; }
.menue__preis { font-family: var(--titel); font-weight: 700; font-size: 21px; color: var(--tanne); white-space: nowrap; }
.menue__preis small { font-family: var(--text); font-size: 14px; font-weight: 400; color: var(--tinte-weich); }
.menue__gaenge { list-style: none; margin: 0; padding: 0; }
.menue__gaenge li { padding: 5px 0; border-top: 1px dotted var(--linie); }
.menue__gaenge li:first-child { border-top: 0; }

/* Stellen */
.stellen { display: grid; gap: 16px; margin-top: 8px; }
.stelle { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 18px 8px; }
.stelle__art { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--moos); margin-bottom: 6px; }
.stelle h3 { margin-bottom: 8px; }

/* Anfahrt */
.adresse { font-family: var(--titel); font-size: 22px; line-height: 1.35; color: var(--tanne); margin: 14px 0 6px; }
.zeiten { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten thead th { font-size: 14.5px; color: var(--tinte-weich); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zeiten tbody th { font-weight: 700; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten tr.is-heute { background: #EEF0E6; }
.zeiten tr.is-heute th::after { content: 'heute'; display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--weiss); background: var(--moos); padding: 1px 7px; border-radius: 999px; vertical-align: 2px; }
.zeiten td { white-space: nowrap; }
.zeiten td.zeiten__kueche { color: var(--tinte-weich); font-size: 15.5px; white-space: normal; }
@media (max-width: 599px) { .zeiten th, .zeiten td { padding: 11px 9px; } }
.knopfreihe--stapel .knopf { flex-basis: 100%; }
@media (min-width: 600px) { .knopfreihe--stapel .knopf { flex: 0 1 auto; } }
.infos { display: grid; gap: 22px; }
.info h2 { font-size: 23px; margin-bottom: 6px; }

/* ------------------------------------------------ Fuss des Betriebs */
.fuss { background: var(--tanne); color: var(--auf-tanne); margin-top: 20px; }
.fuss__innen { padding-top: 36px; padding-bottom: 30px; display: grid; gap: 22px; }
.fuss__name { font-family: var(--titel); font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--auf-tanne); }
.fuss p { margin: 0 0 6px; color: var(--auf-tanne-weich); }
.fuss a { color: var(--auf-tanne); }
.fuss__linie { height: 1px; background: var(--messing); opacity: .7; border: 0; margin: 0; }
.fuss__nummer {
  background: none; border: 0; padding: 0; color: var(--auf-tanne); font: inherit; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; min-height: 32px;
}
.fuss__nummer--hell { color: var(--tanne); font-weight: 700; min-height: 0; }
.fuss__klein { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss__klein a, .fuss__klein button { display: inline-flex; align-items: center; min-height: 44px; }
.fuss__zeiten { list-style: none; margin: 0; padding: 0; color: var(--auf-tanne-weich); }
.fuss__zeiten li { padding: 2px 0; }
.muster { font-size: 13.5px; color: var(--auf-tanne-weich); font-weight: 400; }


/* ------------------------------------------------ Feste Leiste am Handy */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(245, 240, 230, .97); border-top: 1px solid var(--linie);
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px;
  box-shadow: 0 -8px 20px rgba(31, 59, 47, .08);
}
.leiste .knopf { min-height: 50px; padding: 0 12px; }
.leiste { transition: transform .2s ease, visibility .2s; }
.leiste--wartet { transform: translateY(110%); visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }
.hat-leiste { padding-bottom: calc(var(--leiste-h) + env(safe-area-inset-bottom)); }

/* ------------------------------------------------ Hinweisfenster (Anrufen, WhatsApp, Route) */
.hinweis {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%;
  background: var(--nw-papier); color: var(--nw-tinte); font-family: var(--nw-schrift);
  border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
.hinweis::backdrop { background: rgba(23, 24, 27, .5); }
.hinweis__innen { padding: 22px var(--rand) calc(20px + env(safe-area-inset-bottom)); }
.hinweis__titel { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--nw-orange-schrift); font-weight: 700; margin: 0 0 6px; font-family: var(--nw-schrift); }
.hinweis__text { font-size: 17px; line-height: 1.45; margin: 0 0 10px; }
.hinweis__blase {
  background: #DCF8C6; color: #111B21; border-radius: 10px 10px 10px 2px; padding: 10px 12px; margin: 8px 0 14px;
  font-size: 16px; line-height: 1.4; max-width: 30em; box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.hinweis__blase[hidden] { display: none; }
.hinweis__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; }
.hinweis__zu {
  min-height: 48px; padding: 0 22px; border-radius: 6px; border: 1.5px solid var(--nw-tinte); background: transparent;
  color: var(--nw-tinte); font-weight: 700; font-family: var(--nw-schrift); cursor: pointer; font-size: 16px;
}
.hinweis a { color: var(--nw-orange-schrift); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* Einfache Textseiten */
.textseite { padding: 30px 0 30px; }
.textseite h2 { margin: 28px 0 8px; font-size: 23px; }
.quellen { list-style: none; margin: 10px 0 0; padding: 0; }
.quellen li { padding: 12px 0; border-bottom: 1px solid var(--linie); }

/* ------------------------------------------------ ab 600 px */
@media (min-width: 600px) {
  :root { --rand: 24px; }
  .held__bild { height: 380px; }
  .gerichte { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gericht { grid-template-columns: 1fr; }
  .gericht__bild { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .raeume { grid-template-columns: repeat(3, 1fr); }
  .menues { grid-template-columns: 1fr 1fr; }
  .mittag__preise { grid-template-columns: 1fr 1fr; }
  .seitenbild img { height: 300px; }
  .stellen { grid-template-columns: 1fr 1fr; }
  .stellen .stelle:last-child { grid-column: 1 / -1; }
  .hinweis { max-width: 460px; margin: auto; border-radius: 12px; }
}

/* ------------------------------------------------ ab 900 px (Desktop) */
@media (min-width: 900px) {
  body { font-size: 18px; }
  h1 { font-size: 54px; line-height: 1.06; letter-spacing: -.01em; }
  h2 { font-size: 34px; }
  h3 { font-size: 23px; }
  .kopf__innen { min-height: 86px; }
  .marke__name { font-size: 30px; }
  .marke__zeichen { width: 34px; height: 40px; }
  .menue-knopf { display: none; }
  .nav, .nav.is-offen { display: block; position: static; box-shadow: none; border: 0; background: none; }
  .nav__liste { display: flex; align-items: center; gap: 4px; padding: 0; }
  .nav__liste a {
    min-height: 44px; padding: 0 12px; border: 0; font-family: var(--text); font-size: 17.5px; font-weight: 500;
    border-radius: var(--radius);
  }
  .nav__liste a:hover { background: var(--leinen-tief); }
  .nav__liste a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--tanne); border-radius: 0; }
  .nav__liste a[aria-current="page"]::after { display: none; }
  .nav__punkt--cta { order: 9; }
  .nav__liste a.nav__cta { background: var(--weinrot); color: var(--weiss); margin-left: 10px; padding: 0 18px; border-radius: var(--radius); font-weight: 700; }
  .nav__liste a.nav__cta:hover { background: var(--weinrot-tief); }
  .nav__liste a.nav__cta[aria-current="page"] { box-shadow: none; }
  .nav__telefon { display: none; }
  .status__heute { display: block; }
  .leiste { display: none; }
  .hat-leiste { padding-bottom: 0; }

  .held { padding: 36px 0 20px; }
  .held__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 52px; align-items: stretch; }
  .held__text { padding: 18px 0 0; order: 1; display: flex; flex-direction: column; justify-content: center; }
  .held__bild { order: 2; height: auto; min-height: 560px; border-radius: var(--radius); margin: 0; }
  .held__text .lead { font-size: 20px; }
  .held__text .knopfreihe .knopf { flex: 0 1 auto; padding: 0 28px; }
  .heute { margin-top: 30px; padding: 22px 24px 20px; }
  .heute::before { left: 24px; right: 24px; }

  .abschnitt { padding: 72px 0; }
  .mittag { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .bild-text { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .bild-text--umgekehrt .bild-text__bild { order: 2; }
  .band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 44px; padding-bottom: 44px; }
  .seitenkopf { padding: 56px 0 10px; }
  .seitenkopf--bild { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .seitenkopf--bild .seitenbild { margin-top: 0; }
  .seitenbild img { height: 380px; }

  .kartenraster { display: grid; grid-template-columns: minmax(0, 660px) 340px; gap: 64px; justify-content: space-between; align-items: start; }
  .kartenteil { padding-top: 46px; }
  .kartenraster > aside { position: sticky; top: calc(var(--streifen-h) + 70px); }
  .kartenteil__bild img { aspect-ratio: 5 / 2; }

  .formular-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
  .formular-raster .neben { margin-top: 0; position: sticky; top: calc(var(--streifen-h) + 24px); }
  .formular-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 32px 36px 30px; }
  .chips--wisch { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }
  .infos { grid-template-columns: 1fr 1fr; gap: 34px 56px; }
  .fuss__innen { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-top: 52px; padding-bottom: 40px; }
  .fuss__linie, .fuss__klein { grid-column: 1 / -1; }
}

@media (min-width: 1200px) {
  h1 { font-size: 60px; }
  .held__bild { min-height: 600px; }
}

@media print {
  .leiste, .menue-knopf { position: static; }
  .leiste { display: none; }
}