/* Weißes Röss'l: Gestaltungsentwurf
   Farben aus dem Haus: Rautenblau des Wappens, Kalkweiß, das Ocker der Fassade, das dunkle Holz der Schank. */

:root {
  --blau: #0f4fa8;
  --blau-dunkel: #0a3576;
  --tinte: #13254a;
  --tinte-2: #44506a;
  --raute: #e4edf8;
  --ocker: #e8a958;
  --ocker-tief: #b86f1c;
  --holz: #2e1c14;
  --holz-2: #3f2a1e;
  --kalk: #f4ecdf;
  --weiss: #fff;

  --skript: "Grand Hotel", "Brush Script MT", cursive;
  --kopf: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Sofia Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --rand: clamp(16px, 4.5vw, 64px);
  --breite: 1320px;
  --kopf-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 24px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--weiss); color: var(--tinte);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.55;
  font-feature-settings: "kern", "liga"; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 .8em; }
h1, h2, h3 { margin: 0; font-weight: 800; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--blau); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
.skript { font-family: var(--skript); font-weight: 400; }
.klein { font-size: .9rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 10px 22px; font: 700 1.05rem/1.2 var(--text); text-decoration: none; border-radius: 3px;
  border: 2px solid var(--blau); transition: background-color .15s, color .15s;
}
.knopf-voll { background: var(--blau); color: #fff; }
.knopf-voll:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf-linie { color: var(--blau); background: transparent; }
.knopf-linie:hover { background: var(--raute); }
.knopf-hell { background: #fff; color: var(--blau); border-color: #fff; }
.knopf-hell:hover { background: var(--raute); }

/* Kopfleiste mit Rautenband */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--weiss); }
.kopf-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  height: var(--kopf-h); display: flex; align-items: center; gap: 28px;
}
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blau); }
.marke-raute { width: 26px; height: 38px; }
.marke-name { font: 400 2rem/1 var(--skript); white-space: nowrap; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--blau); }
.kopf-tel {
  font: 800 1.35rem/1 var(--kopf); letter-spacing: .01em; color: #fff; background: var(--blau);
  padding: 10px 14px; text-decoration: none; border-radius: 3px; white-space: nowrap;
}
.kopf-tel:hover { background: var(--blau-dunkel); }
.rauten {
  height: 12px;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Cpath d='M11 0 22 6 11 12 0 6Z' fill='%230f4fa8'/%3E%3C/svg%3E") repeat-x 0 0 / 22px 12px;
}

/* Erster Bildschirm: Wand der Gaststube aus dunklem Holz, warmes Lampenlicht von oben */
.hero {
  position: relative; isolation: isolate; overflow-x: clip; color: #efe2cc;
  background: #24150d url("assets/img/holz.webp") 50% 0 / 1600px auto repeat;
}
.hero::before { /* Lampenlicht und dunkle Ecken */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 38% 0%, rgba(255, 196, 120, .30), rgba(255, 196, 120, 0) 70%),
    radial-gradient(40% 50% at 86% 30%, rgba(255, 196, 120, .14), rgba(255, 196, 120, 0) 70%),
    radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(10, 5, 2, .55) 100%),
    linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 18%);
}
.hero::after { /* Abschlussleiste der Vertäfelung */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1;
  background: linear-gradient(#5a3a22, #3b2516 40%, #1d110a 100%);
  box-shadow: 0 -1px 0 rgba(255, 220, 170, .25), 0 -10px 18px rgba(0, 0, 0, .35);
}
.hero-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 40px var(--rand) 64px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 22px; position: relative;
}

/* Das Schild über der Tür: blau, weiße Schreibschrift, weiße Zierlinie */
.schild {
  grid-column: 1 / 9; grid-row: 1; position: relative; text-align: center; color: #fff;
  padding: 14px clamp(20px, 3vw, 44px) 13px; border-radius: 6px;
  background:
    linear-gradient(175deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%),
    linear-gradient(rgba(15, 79, 168, .86), rgba(12, 66, 146, .9)),
    url("assets/img/holz.webp") 0 0 / 900px auto,
    #0f4fa8;
  background-blend-mode: normal, normal, luminosity, normal;
  box-shadow:
    inset 0 0 0 7px #0f4fa8, inset 0 0 0 9px rgba(255, 255, 255, .9),
    inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .25),
    0 3px 0 #082d63, 0 22px 34px -8px rgba(0, 0, 0, .65);
}
.schild-pferd { width: .82em; height: .87em; margin: 0 .16em -.04em -.3em; vertical-align: -.02em; --raute-fill: transparent; --pferd-fill: #fff; filter: drop-shadow(0 2px 0 rgba(4, 30, 74, .55)); }
.schild-oben, .schild-unten {
  margin: 0; font: 700 clamp(.82rem, 1.2vw, 1.05rem)/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; opacity: .92;
}
.schild-name {
  font: 400 clamp(3.4rem, 7.4vw, 6.8rem)/1.16 var(--skript); margin: 0; padding: 0 0 .12em;
  text-shadow: 0 2px 0 rgba(4, 30, 74, .55), 0 0 1px rgba(255, 255, 255, .6); letter-spacing: .005em;
}

/* Ausleger: schmiedeeisern, mit dem Rössl, hängt vom Balken. 3D aus ausleger.js, sonst SVG */
.ausleger { --a-balken: 70px; --a-schild: 250px; grid-column: 9 / 13; grid-row: 1 / 3; position: relative; z-index: 4; margin-top: -40px; height: 360px; pointer-events: none; }
.ausleger canvas { position: absolute; left: -60px; top: 0; width: calc(100% + 120px); height: 560px; display: block; }
.ausleger-ersatz { display: block; height: 100%; width: auto; margin: 0 auto; filter: drop-shadow(10px 18px 10px rgba(0, 0, 0, .5)); }
.ausleger[data-3d] .ausleger-ersatz { display: none; }

/* Aushang: Emailleschild mit der Nummer */
.aushang { grid-column: 1 / 9; grid-row: 2; display: flex; align-items: center; gap: 28px; }
.aushang-text { margin: 0; max-width: 27em; font-size: 1.08rem; line-height: 1.5; color: #ead8bc; }
.emaille {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; padding: 11px 30px 13px; border-radius: 14px;
  text-decoration: none; color: var(--blau); position: relative;
  background:
    radial-gradient(circle at 12px 50%, #8d8a83 0 2.5px, #d9d6cd 3px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 50%, #8d8a83 0 2.5px, #d9d6cd 3px 4px, transparent 4.5px),
    radial-gradient(130% 160% at 28% 12%, #ffffff 0%, #f4f2ec 50%, #dcd8cc 100%);
  box-shadow: inset 0 0 0 4px #f6f4ee, inset 0 0 0 7px var(--blau), inset 0 -2px 3px 7px rgba(0, 0, 0, .06),
    0 2px 0 #b9b4a6, 0 14px 22px -6px rgba(0, 0, 0, .6);
  transition: transform .15s;
}
.emaille:hover { transform: translateY(-2px); }
.emaille:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.emaille-klein { font: 700 .8rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.emaille-nr { font: 800 2.35rem/1 var(--kopf); letter-spacing: .01em; white-space: nowrap; }

/* Das echte Haus, gerahmt wie ein Bild in der Gaststube, in Originalgröße (nicht hochskaliert) */
.hero-bild { grid-column: 1 / 10; grid-row: 3; max-width: 1154px; position: relative; z-index: 1; }
.rahmen {
  padding: 12px; border-radius: 2px;
  background: linear-gradient(135deg, #6e4b2c, #3b2415 45%, #26170d 70%, #4a301b);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 170, .25), inset 0 0 0 10px rgba(0, 0, 0, .15), 0 28px 44px -10px rgba(0, 0, 0, .75), 0 4px 10px rgba(0, 0, 0, .4);
}
.rahmen img { width: 100%; height: auto; aspect-ratio: 1130 / 445; object-fit: cover; box-shadow: 0 0 0 2px #c9a24b, 0 0 0 3px #3b2415; }
.messing {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); white-space: nowrap; margin: 0; padding: 6px 26px 6px; border-radius: 2px;
  font: 700 .82rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #3a2a10;
  background:
    radial-gradient(circle at 9px 50%, #6b5222 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 9px) 50%, #6b5222 0 2px, transparent 2.5px),
    linear-gradient(#ecd28f, #c79a48 52%, #dcbb70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 6px rgba(0, 0, 0, .5);
}

/* Kreidetafel mit blauem Rahmen, wie die Tafeln neben der Eingangstür */
.tafel {
  grid-column: 9 / 13; grid-row: 2 / 4; align-self: start; margin-top: 214px; position: relative; z-index: 3;
  padding: 0 11px 11px; border-radius: 5px; background: linear-gradient(#1458b4, #0d4597);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 26px 40px -8px rgba(0, 0, 0, .7), 0 3px 8px rgba(0, 0, 0, .4);
  transform: rotate(.8deg);
}
.tafel p { margin: 0; }
.tafel-kopf { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 4px 9px; color: #fff; }
.tafel-raute { width: 20px; height: 29px; flex: none; --raute-fill: #fff; --pferd-fill: #0f4fa8; }
.tafel-tag { font: 400 2.1rem/1.2 var(--skript); padding-bottom: .08em; }
.tafel-flaeche {
  padding: 20px 22px 18px; border-radius: 2px; color: #f3f0e6;
  background:
    url("assets/img/staub.png") 0 0 / 300px 300px,
    radial-gradient(60% 40% at 30% 30%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 35% at 75% 75%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%),
    #1e2622;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
}
.tafel-flaeche > * {
  -webkit-mask: url("assets/img/kreide.png") 0 0 / 240px 240px; mask: url("assets/img/kreide.png") 0 0 / 240px 240px;
}
.tafel-zeit { font: 800 clamp(1.9rem, 2.6vw, 2.35rem)/1.05 var(--kopf); letter-spacing: .01em; }
.tafel-kueche { font-size: 1.08rem; margin-top: 4px !important; }
.tafel-status { display: flex; align-items: center; gap: 9px; margin-top: 12px !important; font-weight: 700; }
.tafel-status::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #9fd18a; }
.tafel-status[data-zu]::before { background: #e8a9a0; }
.tafel-angebot { margin-top: 14px !important; padding-top: 12px; border-top: 2px dashed rgba(243, 240, 230, .35); font-size: 1.1rem; }
.tafel-angebot a { color: #f6d77e; font-weight: 700; text-decoration-thickness: 2px; }
.tafel :focus-visible { outline-color: #f6d77e; }

/* Bierdeckel: Weg zur Karte */
.bierdeckel {
  grid-column: 8 / 10; grid-row: 3; justify-self: end; align-self: start; margin: -92px -14px 0 0; position: relative; z-index: 2;
  width: 146px; height: 146px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--blau);
  background:
    radial-gradient(circle, #f8f4ea 0 60%, rgba(0, 0, 0, 0) 60.5% 66%, #f8f4ea 66.5%),
    repeating-conic-gradient(var(--blau) 0 7.5deg, #f8f4ea 0 15deg);
  box-shadow: inset 0 0 0 4px #f8f4ea, inset 0 0 0 5px rgba(15, 79, 168, .5), 0 12px 18px -4px rgba(0, 0, 0, .6), 0 2px 3px rgba(0, 0, 0, .35);
  transform: rotate(-10deg); transition: transform .2s;
}
.bierdeckel:hover { transform: rotate(-2deg) scale(1.04); }
.bierdeckel:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 50%; }
.bierdeckel-gross { font: 400 1.85rem/1.3 var(--skript); padding-bottom: .12em; }
.bierdeckel-klein { font: 700 .56rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); }

/* Saison: Ockerfläche wie die Fassade */
.saison { background: var(--ocker); color: var(--tinte); }
.saison-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: min-content 1fr; grid-template-areas: "kopf karte" "bild karte"; gap: 32px clamp(28px, 5vw, 80px); align-items: start;
}
.saison-kopf { grid-area: kopf; }
.saison-bild { grid-area: bild; }
.saison-karte { grid-area: karte; align-self: start; background: var(--weiss); padding: clamp(20px, 3vw, 36px); border-radius: 3px; }
.saison h2 { font-size: clamp(4.4rem, 9vw, 8rem); line-height: 1.3; padding-bottom: .04em; margin-top: -.18em; color: var(--blau-dunkel); }
.saison-ab { font: 800 1.6rem/1.1 var(--kopf); margin: .2em 0 .7em; }
.saison-kopf p { font-size: 1.15rem; max-width: 32em; }
.saison-kopf .saison-ab { font-size: 1.6rem; }
.saison-hinweis { font-weight: 600; }
.saison-hinweis a { color: var(--tinte); font-weight: 800; white-space: nowrap; }
.saison-bild img { border-radius: 3px; width: 100%; }
.saison-zwischen { font: 400 2rem/1.36 var(--skript); color: var(--blau); margin: 26px 0 10px; }

/* Gerichtzeilen (Saison, Karte, Woche) */
.gerichte { list-style: none; margin: 0; padding: 0; }
.g { padding: 9px 0 10px; }
.g + .g { border-top: 1px solid rgba(19, 37, 74, .12); }
.g-zeile { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.g-name { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.g-fuell { flex: 1 1 24px; min-width: 16px; border-bottom: 2px dotted rgba(15, 79, 168, .35); transform: translateY(-4px); }
.g-preis { font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.g-mehr { display: inline-flex; gap: 14px; }
.g-mehr small { font-weight: 500; color: var(--tinte-2); font-size: .82em; }
.g-text { margin: 2px 0 0; color: var(--tinte-2); font-size: .97rem; max-width: 38em; }
.zs { font-size: .65em; color: var(--tinte-2); margin-left: 2px; cursor: help; }

/* Mundart-Übersetzung */
.ue { display: none; }
.uebersetzt .ue { display: inline; font-style: italic; font-weight: 500; color: var(--ocker-tief); }
.uebersetzt .w { text-decoration: underline dotted rgba(184, 111, 28, .7); text-underline-offset: .2em; }

/* Speisekarte */
.karte { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand) clamp(48px, 6vw, 80px); }
.karte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 28px; }
.karte h2 { font: 800 clamp(4.5rem, 11vw, 10rem)/.82 var(--kopf); color: var(--blau); letter-spacing: -.01em; }
.karte-lead { font-size: 1.15rem; margin: 0; max-width: 34em; }
.karte-steuer {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding-top: 22px; margin-top: 10px; border-top: 3px solid var(--blau);
}
.reiter { display: flex; gap: 6px; }
.reiter button {
  font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--kopf); color: var(--tinte-2); background: none; border: 0;
  padding: 6px 14px 10px; cursor: pointer; border-bottom: 5px solid transparent; border-radius: 0;
}
.reiter button[aria-selected="true"] { color: var(--blau); border-bottom-color: var(--blau); }
.reiter button:hover { color: var(--blau); }
.schalter { display: flex; align-items: center; gap: 12px; cursor: pointer; max-width: 440px; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { flex: none; width: 52px; height: 30px; border-radius: 15px; background: #c9d3e3; position: relative; transition: background-color .15s; }
.schalter-bahn::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.schalter input:checked + .schalter-bahn { background: var(--ocker-tief); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(22px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--blau); outline-offset: 3px; }
.schalter-text { font-size: .95rem; line-height: 1.35; }
.schalter-text strong { display: block; font-size: 1.05rem; }

.sprung {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 34px;
}
.sprung a {
  text-decoration: none; color: var(--blau); background: var(--raute); padding: 7px 12px; border-radius: 3px;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
}
.sprung a:hover { background: var(--blau); color: #fff; }

.spalten { columns: 2 440px; column-gap: clamp(36px, 6vw, 96px); }
.kat { break-inside: avoid; margin: 0 0 40px; }
.kat-titel { font: 400 2.7rem/1.38 var(--skript); color: var(--blau); margin-bottom: 0; }
.kat-hinweis { font-size: .92rem; color: var(--tinte-2); margin: 0 0 4px; }
.js .karte-teil[hidden] { display: none; }

.tropfen { margin-top: 24px; background: var(--holz); color: var(--kalk); padding: clamp(28px, 4vw, 56px); border-radius: 3px; }
.tropfen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; margin-bottom: 28px; }
.tropfen h3 { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.3; color: var(--ocker); }
.tropfen-kopf p { margin: 0; max-width: 32em; }
.tropfen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 26px 40px; }
.tropfen-liste li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding-top: 14px; border-top: 1px solid rgba(244, 236, 223, .22); }
.t-name { font: 800 1.55rem/1.05 var(--kopf); margin: 0; color: #fff; }
.t-preis { font-weight: 700; margin: 0; grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; }
.t-her { grid-column: 1 / -1; margin: 2px 0 6px; color: var(--ocker); font-weight: 600; font-size: .95rem; }
.t-text { grid-column: 1 / -1; margin: 0; font-size: .95rem; color: #e3d8c6; }

.zusatz { margin-top: 28px; font-size: .95rem; }
.zusatz summary { cursor: pointer; font-weight: 700; color: var(--blau); }
.zusatz ul { columns: 2 260px; padding: 0; list-style: none; margin: 10px 0 0; }
.zusatz b { display: inline-block; min-width: 1.8em; }

/* Mit JavaScript: immer eine Rubrik aufgeschlagen, die Leiste wählt */
.karte-einzeln:not(.karte-alle) .spalten { columns: auto; }
.karte-einzeln:not(.karte-alle) .kat { margin: 0; }
.karte-einzeln:not(.karte-alle) .kat .gerichte { columns: 2 400px; column-gap: clamp(36px, 6vw, 96px); }
.karte-einzeln:not(.karte-alle) .g { break-inside: avoid; border-bottom: 1px solid rgba(19, 37, 74, .12); }
.karte-einzeln:not(.karte-alle) .g + .g { border-top: 0; }
.karte-einzeln:not(.karte-alle) .kat-titel { font-size: clamp(2.7rem, 4.4vw, 3.5rem); margin-bottom: 4px; }
.karte-einzeln:not(.karte-alle) .tropfen { margin-top: 0; }
.sprung a[aria-current] { background: var(--blau); color: #fff; }
.sprung-alle {
  font: 600 .95rem/1.2 var(--text); color: var(--tinte-2); background: none; border: 1.5px dashed rgba(19, 37, 74, .35); border-radius: 3px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.sprung-alle:hover { color: var(--blau); border-color: var(--blau); }
.sprung-alle[aria-pressed="true"] { background: var(--tinte); color: #fff; border-style: solid; border-color: var(--tinte); }
.weiter { margin: 30px 0 0; }
.weiter[hidden] { display: none; }

/* Woche und Jahr */
.rhythmus { background: var(--raute); }
.rhythmus-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--rand); }
.woche-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 30px; }
.rhythmus h2 { font: 800 clamp(3.4rem, 7.5vw, 6.6rem)/.88 var(--kopf); color: var(--blau); }
.woche-kopf p { margin: 0; font-size: 1.12rem; max-width: 34em; }
.woche-kopf p[data-pause] { font-weight: 700; }
.woche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tag { background: var(--weiss); padding: 18px 20px 14px; border-radius: 3px; border-top: 6px solid var(--blau); position: relative; }
.tag img { width: 100%; max-width: 240px; aspect-ratio: 3 / 2; object-fit: contain; margin: -4px auto 8px; }
.tag-name { font: 800 1.7rem/1 var(--kopf); color: var(--blau); margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tag-name span { font: 600 .95rem/1.2 var(--text); color: var(--tinte-2); }
.tag-titel { font-size: 1.2rem; line-height: 1.2; margin-bottom: 4px; }
.tag .g-name { font-weight: 500; font-size: .95rem; }
.tag .g-zeile { align-items: flex-end; }
.tag[data-heute] { border-top-color: var(--ocker-tief); box-shadow: inset 0 0 0 3px var(--ocker-tief); }
.tag[data-heute]::after {
  content: "heute"; position: absolute; top: -6px; right: 16px; background: var(--ocker-tief); color: #fff;
  font: 700 .85rem/1 var(--text); padding: 6px 10px 7px; border-radius: 0 0 3px 3px;
}
.woche[data-pause] .tag { border-top-color: #9fb3d3; }

.jahr { margin-top: clamp(56px, 7vw, 88px); }
.jahr-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 22px; }
.jahr h3 { font: 800 clamp(2.4rem, 5vw, 3.8rem)/.95 var(--kopf); color: var(--blau); }
.jahr-kopf p { margin: 0; max-width: 34em; }
/* Kalender: oben die Monate, darunter was es gibt. Am Telefon gedreht: Monate untereinander */
.kalender {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; position: relative;
  background: var(--weiss); border-radius: 3px; padding: 0 10px 12px;
}
.kal-monat {
  grid-row: 1; grid-column: var(--m); position: relative; z-index: 1; text-align: center; padding: 14px 2px 10px;
  font: 700 1.05rem/1.1 var(--kopf); color: var(--tinte-2); border-bottom: 2px solid var(--blau);
}
.kal-monat + .kal-monat { border-left: 1px solid rgba(19, 37, 74, .1); }
.kal-saisons { display: contents; }
.kal-saisons li {
  list-style: none; grid-row: 2; grid-column: var(--von) / calc(var(--bis) + 1); position: relative; z-index: 1;
  margin: 12px 4px 0; padding: 10px 12px 11px; border-radius: 3px; background: var(--blau); color: #fff; line-height: 1.25;
}
.kal-saisons strong { display: block; font: 800 1.45rem/1.05 var(--kopf); }
.kal-saisons span { font-size: .92rem; opacity: .92; }
.kal-saisons a { color: #fff; font-weight: 700; font-size: .92rem; display: block; margin-top: 2px; }
.kal-saisons li[data-jetzt] { background: var(--ocker-tief); }
.kal-jetzt { grid-row: 1 / 3; grid-column: var(--m, 1); z-index: 0; background: rgba(232, 169, 88, .22); border-top: 4px solid var(--ocker-tief); margin-bottom: -12px; }
.kal-monat[data-jetzt] { color: var(--ocker-tief); }
.kal-monat[data-jetzt]::after { content: "jetzt"; display: block; font: 700 .78rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.jahr-fuss { margin: 14px 0 0; font-size: .95rem; color: var(--tinte-2); max-width: 52em; }

/* Das Haus */
.wirtshaus { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand); }
.wirtshaus-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(28px, 5vw, 80px); align-items: end; margin-bottom: 30px; }
.wirtshaus h2 { font: 800 clamp(3.4rem, 7.5vw, 6.6rem)/.88 var(--kopf); color: var(--blau); }
.wirtshaus-kopf p { margin: 0; font-size: 1.12rem; }
.bilder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.bilder img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.bilder figure { position: relative; }
.bilder figcaption {
  position: absolute; left: 10px; bottom: 10px; background: var(--weiss); color: var(--tinte); padding: 4px 9px; font-size: .9rem; font-weight: 600; border-radius: 2px; max-width: calc(100% - 20px);
}
.b-schank { grid-column: 1 / 9; aspect-ratio: 1130 / 445; }
.b-eingang { grid-column: 9 / 13; }
.b-eingang img { object-position: 40% 50%; }
.b-wiesn { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.b-nockerl { grid-column: 5 / 9; aspect-ratio: 4 / 3; }
.b-kupfer { grid-column: 9 / 13; grid-row: 2; }
.b-kupfer img { object-position: 70% 50%; }
.feiern { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: 12px 40px; align-items: center; background: var(--raute); padding: 28px clamp(20px, 3vw, 40px); border-radius: 3px; }
.feiern h3 { font: 800 2.2rem/1 var(--kopf); color: var(--blau); }
.feiern p { margin: 0; }

/* Geschichte: dunkles Holz der Schank, die alten Ausschnitte wie an die Wand gesteckt */
.geschichte {
  color: var(--kalk);
  background: linear-gradient(rgba(34, 21, 13, .88), rgba(34, 21, 13, .92)), #2e1c14 url("assets/img/holz.webp") 50% 0 / 1600px auto;
}
.geschichte-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--rand);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center;
}
.geschichte-zahl { font: 800 clamp(4.6rem, 10vw, 8.6rem)/.86 var(--kopf); color: var(--ocker); margin: 0 0 10px; letter-spacing: -.01em; }
.geschichte h2 { font: 800 clamp(1.7rem, 2.6vw, 2.3rem)/1.05 var(--kopf); color: #fff; margin-bottom: 18px; }
.geschichte h2 .geschichte-zahl { display: block; }
.geschichte-kopf > p:not(.geschichte-zahl) { font-size: 1.1rem; }
.geschichte a { color: var(--ocker); }
.geschichte :focus-visible { outline-color: var(--ocker); }
.eckdaten { list-style: none; margin: 22px 0 0; padding: 0; }
.eckdaten li { display: grid; grid-template-columns: 4.4rem 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(244, 236, 223, .2); }
.eckdaten b { font: 800 1.75rem/1 var(--kopf); color: var(--ocker); }

.archiv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.archiv figure {
  background: #f1e8d6; color: #3a2c1c; padding: 10px 10px 12px; position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 30px -10px rgba(0, 0, 0, .7);
}
.archiv figure::before { /* Reißzwecke */
  content: ""; position: absolute; top: 7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 35%, #f3dca0, #b8892f 60%, #6d4f19); box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.archiv img { width: 100%; height: auto; }
.archiv figcaption { font-size: .84rem; line-height: 1.35; margin-top: 8px; }
.archiv figcaption a { color: #7a4a0c; font-weight: 700; }
.archiv :focus-visible { outline-color: #7a4a0c; }
.a-zeitung { grid-column: 1 / 9; grid-row: 1; transform: rotate(-1.4deg); z-index: 1; }
.a-1950 { grid-column: 9 / 13; grid-row: 1 / 3; margin: 36px 0 0 6px; transform: rotate(2.2deg); z-index: 2; }
.a-fassade { grid-column: 3 / 9; grid-row: 2; margin-top: 16px; transform: rotate(1deg); z-index: 3; }

/* Besuch */
.besuch { background: var(--blau); color: #fff; }
.besuch a { color: #fff; }
.besuch .knopf-hell { color: var(--blau); }
.besuch :focus-visible { outline-color: #fff; }
.besuch-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand); }
.besuch h2 { font: 800 clamp(3.4rem, 7.5vw, 6.6rem)/.88 var(--kopf); margin-bottom: 36px; }
.besuch-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.besuch h3 { font: 400 2.1rem/1.36 var(--skript); margin-bottom: 4px; color: #fff; }
.gross { font: 800 1.9rem/1.08 var(--kopf); }
.gross a { text-decoration: none; }
.zeiten { border-collapse: collapse; width: 100%; font-size: 1rem; }
.zeiten th, .zeiten td { text-align: left; padding: 8px 8px 8px 0; vertical-align: top; border-bottom: 1px solid rgba(255,255,255,.28); }
.zeiten td { white-space: nowrap; }
.zeiten thead th { font-weight: 600; font-size: .85rem; opacity: .8; }
.zeiten tbody th { font-weight: 700; }
.zeiten tr[data-heute] th, .zeiten tr[data-heute] td { color: var(--ocker); }
.oepnv { margin: 0; padding: 0; list-style: none; }
.oepnv li { margin-bottom: 10px; }

.anfrage { margin-top: 56px; background: var(--weiss); color: var(--tinte); padding: clamp(22px, 3.5vw, 44px); border-radius: 3px; }
.anfrage a { color: var(--blau); }
.anfrage :focus-visible { outline-color: var(--blau); }
.anfrage-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; align-items: baseline; margin-bottom: 18px; }
.anfrage h3 { color: var(--blau); font: 800 2.2rem/1 var(--kopf); margin: 0; }
.demo-hinweis { background: #fdf1df; border-left: 4px solid var(--ocker-tief); padding: 8px 12px; margin: 0; font-size: .95rem; max-width: 36em; }
.felder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 18px; }
.felder label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .95rem; }
.felder .breit { grid-column: 1 / -1; }
.felder input, .felder textarea {
  font: inherit; font-weight: 400; color: var(--tinte); padding: 10px 12px; min-height: 46px; border: 2px solid #b9c4d6; border-radius: 3px; background: #fff; width: 100%;
}
.felder input:focus, .felder textarea:focus { border-color: var(--blau); outline: none; box-shadow: 0 0 0 3px rgba(15, 79, 168, .25); }
.felder [aria-invalid="true"] { border-color: #b3261e; }
.anfrage-meldung { margin: 12px 0 0; font-weight: 600; }

/* Fuß */
.fuss { background: var(--blau-dunkel); color: #dce5f3; font-size: .95rem; }
.fuss-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 40px var(--rand) 48px; display: flex; gap: 24px; align-items: flex-start; }
.fuss-raute { width: 34px; height: 50px; flex: none; --raute-fill: #fff; --pferd-fill: var(--blau-dunkel); }
.fuss a { color: #fff; }
.fuss :focus-visible { outline-color: #fff; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 18px; }
.entwurf { margin-top: 14px; opacity: .85; font-size: .88rem; }

.daumen { display: none; }

/* Mittlere Breiten */
@media (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav a { font-size: .95rem; }
  .woche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .besuch-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feiern { grid-template-columns: 1fr; }
}
@media (max-width: 999px) {
  .nav { display: none; }
  .kopf-tel { margin-left: auto; }
  .hero-innen { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; padding-top: 24px; padding-bottom: 48px; }
  .schild { grid-column: 1 / -1; z-index: 5; }
  .hero-bild { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(-1 * var(--rand)); max-width: none; }
  .rahmen { padding: 8px 0; border-radius: 0; }
  .rahmen img { aspect-ratio: 2 / 1; object-position: 64% 50%; box-shadow: 0 2px 0 #c9a24b, 0 -2px 0 #c9a24b; }
  .messing { display: none; }
  .ausleger { --a-balken: 24px; --a-schild: clamp(118px, 29vw, 210px); grid-column: 4 / -1; grid-row: 2; align-self: start; margin-top: -18px; height: calc(var(--a-schild) * 1.45); }
  .ausleger canvas { left: -40px; width: calc(100% + 80px); height: calc(var(--a-schild) * 2.4); }
  .tafel { grid-column: 1 / -1; grid-row: 3; margin-top: -54px; max-width: 520px; width: calc(100% - 18px); justify-self: start; transform: rotate(-.6deg); }
  .aushang { grid-column: 1 / -1; grid-row: 4; flex-wrap: wrap; gap: 18px; padding-right: 128px; min-height: 120px; }
  .bierdeckel { grid-column: 1 / -1; grid-row: 4; justify-self: end; align-self: start; margin: 0; width: 116px; height: 116px; }
  .bierdeckel-gross { font-size: 1.5rem; }
  .saison-innen { grid-template-columns: 1fr; grid-template-areas: "kopf" "bild" "karte"; }
  .karte-kopf, .woche-kopf, .wirtshaus-kopf, .tropfen-kopf { grid-template-columns: 1fr; }
  .geschichte-innen { grid-template-columns: 1fr; }
  .jahr-kopf { grid-template-columns: 1fr; }
}

/* Telefon */
@media (max-width: 759px) {
  :root { --kopf-h: 56px; }
  body { font-size: 1rem; padding-bottom: 64px; }
  .marke-name { font-size: 1.75rem; }
  .kopf-tel { font-size: 1.15rem; padding: 9px 10px; }
  .kopf-innen { gap: 12px; }
  .g-zeile { flex-wrap: wrap; }
  .g-name { flex: 1 1 60%; }
  .g-fuell { display: none; }
  .g-preis { margin-left: auto; }
  .g-mehr { gap: 10px; }
  .reiter button { padding: 6px 10px 10px; }
  html { scroll-padding-top: calc(var(--kopf-h) + 76px); }
  .sprung { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding: 8px var(--rand); scrollbar-width: none;
    position: sticky; top: calc(var(--kopf-h) + 12px); z-index: 10; background: var(--weiss); box-shadow: 0 6px 8px -6px rgba(19, 37, 74, .25); }
  .sprung::-webkit-scrollbar { display: none; }
  .spalten { columns: 1; }
  .kat-titel { font-size: 2.4rem; }
  .woche { grid-template-columns: 1fr; }
  .tag { display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; }
  .tag img { grid-row: 1 / 4; width: 112px; margin: 0; align-self: start; }
  .tag .gerichte { grid-column: 1 / -1; }
  .kalender { grid-template-columns: 6.2rem minmax(0, 1fr); grid-template-rows: repeat(12, auto); padding: 6px 12px 6px 0; }
  .kal-monat { grid-row: var(--m); grid-column: 1; text-align: left; padding: 9px 8px 9px 14px; border-bottom: 0; border-right: 2px solid var(--blau); font-size: 1.02rem; }
  .kal-monat + .kal-monat { border-left: 0; border-top: 1px solid rgba(19, 37, 74, .1); }
  .kal-saisons li { grid-column: 2; grid-row: var(--von) / calc(var(--bis) + 1); margin: 3px 0 3px 10px; padding: 7px 12px 8px; display: flex; flex-direction: column; justify-content: center; }
  .kal-saisons strong { font-size: 1.3rem; }
  .kal-jetzt { grid-column: 1 / -1; grid-row: var(--m, 1); border-top: 0; border-left: 4px solid var(--ocker-tief); margin: 0 -12px 0 0; }
  .kal-monat[data-jetzt]::after { display: none; }
  .bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ausleger { grid-column: 5 / -1; }
  .archiv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .a-zeitung { grid-column: 1 / -1; }
  .a-1950, .a-fassade { grid-row: 2; margin: 0; }
  .a-1950 { grid-column: 1; }
  .a-fassade { grid-column: 2; }
  .archiv figure { padding: 7px 7px 9px; }
  .archiv figcaption { font-size: .8rem; }
  .geschichte-kopf > p:not(.geschichte-zahl) { font-size: 1.02rem; }
  .b-schank { grid-column: 1 / -1; }
  .b-eingang, .b-kupfer { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .b-wiesn, .b-nockerl { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .besuch-raster { grid-template-columns: 1fr; gap: 26px; }
  .felder { grid-template-columns: 1fr 1fr; }
  .felder label:nth-child(1), .felder label:nth-child(2) { grid-column: 1 / -1; }
  .anfrage .knopf { width: 100%; }
  .fuss-innen { flex-direction: column; }
  .daumen {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--weiss); border-top: 3px solid var(--blau); padding-bottom: env(safe-area-inset-bottom);
  }
  .daumen a { display: flex; align-items: center; justify-content: center; min-height: 56px; font-weight: 700; text-decoration: none; color: var(--blau); }
  .daumen a:first-child { background: var(--blau); color: #fff; }
  .daumen a + a { border-left: 1px solid var(--raute); }
}
@media (max-width: 520px) {
  .rahmen img { aspect-ratio: 5 / 4; } /* 520 px Breite bei 445 px Originalhöhe: nicht hochskaliert */
}
@media (max-width: 380px) {
  .marke-name { font-size: 1.5rem; }
  .marke-raute { width: 22px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kat[hidden], .tropfen[hidden] { display: block !important; }
  .weiter, .sprung-alle { display: none !important; }
  .kopf, .daumen, .anfrage, .ausleger, .bierdeckel, .sprung, .schalter { display: none !important; }
  .karte-teil[hidden] { display: block !important; }
}