/* Birkle's Tröpfle – Gestaltung
   Idee: das Wirtshausschild über der Tür. Dunkles Holz mit goldener Schrift, Kalkwand als Grund,
   ein Wegweiser zu allen Angeboten und ein Türschild, das live zeigt, ob heute offen ist.
   Aufbau für schnellen Überblick: über jedem Abschnitt ein kleines Stichwort, eine Überschrift,
   höchstens ein Satz, danach Karten mit Foto.
   Schriften: Bitter (Überschriften, kräftig wie ein Holzschild) und Source Sans 3 (Text, ruhig und gut lesbar).
   Farben und Schriftgrößen nur hier oben ändern, alles andere greift darauf zu. */

/* Schriften: Bitter und Source Sans 3, SIL Open Font License 1.1 (siehe schriften/LIZENZEN.txt) */
@font-face {
  font-family: "Bitter";
  src: url("../schriften/bitter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  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: "Bitter";
  src: url("../schriften/bitter-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../schriften/source-sans-3-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  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: "Source Sans 3";
  src: url("../schriften/source-sans-3-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f1ede4;          /* Kalkwand */
  --surface: #e7dfcf;     /* Leinen: jeder zweite Abschnitt */
  --card: #fbf8f1;
  --line: #d8ccb7;
  --ink: #23170f;         /* Kesselbraun: Schrift */
  --muted: #574638;
  --wood: #2b1d14;        /* dunkles Holz: Schilder, Kopf- und Fußzeile */
  --wood-2: #3d2a1d;
  --wood-ink: #f3ead9;
  --wood-muted: #d2c2ab;
  --gold: #dcaa3e;        /* Schildgold */
  --gold-hover: #e9bd58;
  --copper: #9a4a24;      /* Stichworte und Links auf hellem Grund */
  --slate: #2d332e;       /* Kreidetafel */
  --chalk: #efebe2;

  --font-head: "Bitter", Georgia, serif;
  --font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1.04rem + 0.12vw, 1.125rem);
  --step-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --step-h3: clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem);
  --step-title: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --step-head: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);

  --max: 75rem;
  --margin: clamp(1rem, 4vw, 2rem);
  --gutter: clamp(1rem, 2.5vw, 1.75rem);
  --section: clamp(3rem, 6vw, 5rem);
  --header-h: 4.25rem;
  --radius: 14px;
  --radius-s: 8px;
  --tip: 0.9rem;          /* Spitze der Schilder */
  --shadow: 0 1px 2px rgb(43 29 20 / 0.06), 0 10px 26px -14px rgb(43 29 20 / 0.32);
  --shadow-hover: 0 2px 4px rgb(43 29 20 / 0.08), 0 18px 34px -16px rgb(43 29 20 / 0.42);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 160ms;
  --t-hover: 200ms;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; background: var(--surface); }
svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 0.08em; }
:target { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
::selection { background: var(--gold); color: var(--wood); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; hyphens: manual; }
h1 { font-size: var(--step-head); }
h2 { font-size: var(--step-title); }
h3 { font-size: var(--step-h3); line-height: 1.2; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.8em; }
strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 100; background: var(--gold); color: var(--wood); padding: 0.8rem 1.2rem; font-weight: 700; }
.skip:focus { top: 0.5rem; }

/* Inhalt mittig, Hintergrund trotzdem über die ganze Breite */
.wrap { padding-inline: max(var(--margin), (100% - var(--max)) / 2); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.lead { font-size: var(--step-lead); line-height: 1.5; }
.small { font-size: var(--step-small); line-height: 1.5; }
.muted { color: var(--muted); }
ul.plain { list-style: none; padding: 0; margin: 0; }

/* ---------- Knöpfe: kleine Wegweiser-Schilder mit Spitze ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 3rem; padding: 0 calc(1.2rem + var(--tip)) 0 1.2rem; background: var(--wood); color: var(--gold); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; border-radius: 6px 0 0 6px;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold); }
.button--gold, .button--paper { background: var(--gold); color: var(--wood); }
.button--gold:focus-visible, .button--paper:focus-visible { box-shadow: inset 0 0 0 3px var(--wood); }
.button--ink { background: var(--wood); color: var(--gold); }
.button--wide { display: flex; width: 100%; }
.link-plain { color: var(--copper); font-weight: 700; text-decoration: underline; text-decoration-color: rgb(154 74 36 / 0.35); transition: text-decoration-color var(--t-hover) ease; }
.section--dark .link-plain { color: var(--gold); text-decoration-color: rgb(220 170 62 / 0.45); }
.arrow { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--wood-2); }
  .button--gold:hover, .button--paper:hover { background: var(--gold-hover); }
  .link-plain:hover { text-decoration-color: currentColor; }
  a:hover .arrow, button:hover .arrow { transform: translateX(3px); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- Kopfzeile: dunkles Holz wie das Schild über der Tür ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--wood); color: var(--wood-ink); border-bottom: 3px solid var(--gold); }
.site-header__bar { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); min-height: var(--header-h); padding-inline: max(var(--margin), (100% - var(--max)) / 2); }
.site-header__logo { flex: none; display: block; width: 8rem; }
.site-header__logo img { width: 100%; background: none; }
.site-nav { display: flex; gap: 0.25rem; margin-inline: auto; }
.site-nav a { position: relative; padding: 0.55rem 0.8rem; text-decoration: none; font-size: 1.0625rem; font-weight: 600; color: var(--wood-ink); transition: color var(--t-hover) ease; }
.site-nav a::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem; height: 3px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease-out); }
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--gold); } .site-nav a:hover::after { transform: scaleX(1); } }
.site-header__tel { flex: none; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-header__tel span { font-weight: 400; color: var(--wood-muted); }
.site-header__gift { min-height: 2.6rem; }
.menu-toggle, .call-toggle { display: none; }
@media (max-width: 84em) { .site-header__tel { display: none; } .site-nav a { padding-inline: 0.65rem; } .site-nav a::after { left: 0.65rem; right: 0.65rem; } }
.mobile-nav { display: none; }

@media (max-width: 68.75em) {
  :root { --header-h: 3.75rem; }
  .site-nav, .site-header__tel, .site-header__gift { display: none; }
  .site-header__logo { width: 6.75rem; }
  .site-header__bar { justify-content: space-between; gap: 0.5rem; }
  .menu-toggle, .call-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; font-weight: 700; border-radius: 6px; transition: transform var(--t-press) var(--ease-out); }
  .menu-toggle:active, .call-toggle:active { transform: scale(0.97); }
  .call-toggle { margin-left: auto; color: var(--wood-ink); text-decoration: none; box-shadow: inset 0 0 0 2px rgb(243 234 217 / 0.35); }
  .menu-toggle { background: var(--gold); color: var(--wood); }
  /* Menü klappt von oben auf: schnell rein, noch schneller raus */
  .mobile-nav { display: block; position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100svh - var(--header-h)); overflow: auto; background: var(--wood); color: var(--wood-ink); padding: 0.5rem var(--margin) 1.75rem; border-bottom: 3px solid var(--gold);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top center;
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; }
  .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
  .mobile-nav a { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(243 234 217 / 0.14); }
  .mobile-nav a[aria-current="page"] { color: var(--gold); }
  .mobile-nav .button { margin-top: 1.25rem; border-bottom: 0; font-family: var(--font); font-size: var(--step-body); }
  .mobile-nav__tel { margin-top: 1.25rem; }
  .mobile-nav__tel a { display: inline; font-family: var(--font); font-size: inherit; border: 0; color: var(--gold); }
}

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--section); }
.section--field2, .section--field3 { background: var(--surface); }
.section--dark { background: var(--wood); color: var(--wood-ink); }
.section--dark .muted, .section--dark figcaption { color: var(--wood-muted); }
.section__head { max-width: 22ch; }
.section__intro { margin-top: 0.85rem; }
figcaption { margin-top: 0.55rem; font-size: var(--step-small); color: var(--muted); }
/* zwei helle Abschnitte hintereinander: kein doppelter Abstand */
.section:not([class*="section--"]) + .section:not([class*="section--"]) { padding-top: 0; }

/* Abschnittskopf: Stichwort, Überschrift, ein Satz */
address { font-style: normal; }
.head { display: grid; gap: 0.55rem; justify-items: start; max-width: 46rem; margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }
.head p:not(.eyebrow) { font-size: var(--step-lead); line-height: 1.5; }
.eyebrow { font-family: var(--font); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
.section--dark .eyebrow { color: var(--gold); }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

/* ---------- Startseite: Begrüßung ---------- */
/* Laptop: Titel oben über die ganze Breite, darunter Foto links und Wegweiser rechts.
   Das Foto richtet sich nach der Bildschirmhöhe, damit alles auf den ersten Blick passt. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "photo signs"; gap: 1.1rem clamp(1.5rem, 3.5vw, 3rem); padding-block: clamp(1.25rem, 2.5vw, 2rem) var(--section); }
.hero__head { grid-area: head; display: grid; gap: 0.4rem; }
.hero h1 { font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.625rem); }
.hero__lede { max-width: none; font-size: var(--step-lead); line-height: 1.45; }
.hero__photo { grid-area: photo; position: relative; height: clamp(17rem, 100svh - 13.75rem, 34rem); overflow: hidden; background: var(--surface); border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius); box-shadow: var(--shadow); }

/* Diashow: weiche Überblendung, goldener Balken zeigt die Zeit bis zum nächsten Bild */
.fader { position: absolute; inset: 0; }
.fader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(4px); transition: opacity 1.1s var(--ease-in-out), filter 1.1s var(--ease-in-out); }
.fader img.is-active { opacity: 1; filter: none; }
.fader figcaption { position: absolute; left: 16px; bottom: 18px; margin: 0; background: var(--wood); color: var(--wood-ink); padding: 0.3rem 0.8rem; border-radius: 6px; font-size: var(--step-small); font-weight: 600; }
.fader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.fader__bar.is-running { animation: progress 6s linear forwards; }
.fader.is-paused .fader__bar { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }

/* Türschild: hängt an zwei Schnüren und zeigt, ob heute offen ist */
.doorsign { position: absolute; top: 0; left: 50%; width: max-content; max-width: 78%; padding-top: 2.1rem; transform: translateX(-50%); transform-origin: 50% 0; }
.doorsign::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2.25rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36' preserveAspectRatio='none'%3E%3Cpath d='M4 36 50 3 96 36' fill='none' stroke='%23f3ead9' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.doorsign::after { content: ""; position: absolute; top: 1px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); }
.doorsign__board { display: grid; gap: 0.1rem; padding: 0.55rem 1.1rem 0.6rem; background: var(--card); color: var(--ink); border: 2px solid var(--wood); border-radius: 6px; text-align: center; font-size: var(--step-small); line-height: 1.35; box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.55); }
.doorsign__day { color: var(--muted); }
.doorsign__board strong { font-weight: 700; }
.today__dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; background: #b3402a; vertical-align: 0.04em; }
.today__dot.is-open { background: #2f7a3a; }

/* Wegweiser: ein Pfosten, sechs Schilder, auf jedem nur das Angebot */
.signpost { grid-area: signs; align-self: start; position: relative; display: grid; gap: 0.5rem; padding-left: 14px; }
.signpost::before { content: ""; position: absolute; left: 0; top: 2.6rem; bottom: -1.25rem; width: 10px; border-radius: 3px; background: var(--wood-2); }
.signpost__title { font-size: var(--step-h3); margin: 0.1rem 0 0.2rem -14px; }
.sign { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; min-height: 3.95rem; padding: 0.4rem calc(0.9rem + var(--tip) + 0.4rem) 0.4rem 0.45rem; background: var(--wood); color: var(--gold); text-decoration: none; border-radius: 8px 0 0 8px;
  clip-path: polygon(0 0, calc(100% - var(--tip) - 0.4rem) 0, 100% 50%, calc(100% - var(--tip) - 0.4rem) 100%, 0 100%);
  transform-origin: left center; transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease; }
.sign:nth-of-type(even) { margin-right: 5%; }
.sign__img { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gold); background: var(--wood-2); }
.sign__text { min-width: 0; }
.sign__text strong { display: block; font-family: var(--font-head); font-size: 1.25rem; font-weight: 650; line-height: 1.15; }
.sign__arrow { font-size: 1.125rem; font-weight: 700; transition: transform var(--t-hover) var(--ease-out); }
.sign:active { transform: translateX(4px) scale(0.985); }
.sign:focus-visible { outline: none; background: var(--wood-2); box-shadow: inset 0 0 0 3px var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .sign:hover { background: var(--wood-2); transform: translateX(6px); }
  .sign:hover .sign__arrow { transform: translateX(3px); }
}

@media (max-width: 60em) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "photo" "head" "signs"; gap: 1.25rem; padding-top: 1rem; }
  .hero__photo { height: auto; aspect-ratio: 16 / 11; }
  .signpost { margin-top: 0.25rem; }
}
@media (max-width: 30em) {
  .doorsign { padding-top: 1.7rem; }
  .doorsign::before { height: 1.85rem; }
  .doorsign__board { padding: 0.35rem 0.75rem; font-size: 0.875rem; }
  .doorsign__day { display: none; }
  .sign { min-height: 3.7rem; gap: 0.75rem; }
  .sign__img { width: 2.8rem; height: 2.8rem; }
  .sign__text strong { font-size: 1.1875rem; }
  .sign:nth-of-type(even) { margin-right: 0; }
}

/* ---------- Text neben Bild ---------- */
.split { align-items: center; row-gap: 2rem; }
.split__text { grid-column: 1 / 6; }
.split__text > * + * { margin-top: 1rem; }
.split__text h2 { max-width: 18ch; }
.split__text > .eyebrow + h2 { margin-top: 0.5rem; }
.split__media { grid-column: 7 / 13; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.split--flip .split__text { grid-column: 8 / 13; order: 2; }
.split--flip .split__media { grid-column: 1 / 7; order: 1; }
.split__duo { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: end; }
.split__duo img:last-child { aspect-ratio: 3 / 4; }
.split__duo img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.split__text > .button, .split__text > .actions { margin-top: 1.5rem; }
@media (max-width: 52em) {
  .split__text, .split__media, .split--flip .split__text, .split--flip .split__media { grid-column: 1 / -1; order: 0; }
}

/* Schlagworte */
.tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags li { padding: 0.35rem 0.85rem; background: var(--card); border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; }
.section--field2 .tags li { background: #f6f2ea; }

/* Liste mit Tropfen als Punkt */
.ticks { display: grid; gap: 0.45rem; }
.ticks li { padding-left: 1.4rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0.15rem; top: 0.5em; width: 0.6rem; height: 0.6rem; background: var(--copper); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.section--dark .ticks li::before { background: var(--gold); }

/* Liste mit Häkchen: was dabei ist */
.mit { display: grid; gap: 0.45rem; }
.mit li { position: relative; padding-left: 1.85rem; }
.mit li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--wood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.7' fill='none' stroke='%23dcaa3e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.section--dark .mit li::before { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6 9.4 3.7' fill='none' stroke='%232b1d14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mit--spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
.mit--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
@media (max-width: 52em) { .mit--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36em) { .mit--spalten, .mit--drei { grid-template-columns: 1fr; } }

/* ---------- Karten ---------- */
/* In Karten stehen Absätze dicht, den Abstand macht die Lücke der Karte */
.vcard__body > p + p, .place__body > p + p, .tile__body > p + p { margin-top: 0; }
/* Grundform: helle Karte, runde Ecken, weicher Schatten */
.box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 1.75rem); }
.box h3 { margin-bottom: 0.6rem; }

/* Die drei Varianten: Foto, Name, Dauer, alles auf einen Blick */
.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.vcard { position: relative; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) ease; }
.vcard > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vcard__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 1.1rem 1.3rem 1.35rem; }
.vcard__nr { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
.vcard h3 { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); }
.vcard__meta { font-weight: 600; color: var(--muted); }
.vcard .mit { margin-top: 0.35rem; }
.vcard__go { margin-top: auto; padding-top: 0.5rem; font-weight: 700; color: var(--copper); }
.vcard .button { margin-top: auto; }
.vcard .mit + .button, .vcard p + .button { margin-top: auto; }
.vcard__body > .button:last-child { margin-top: auto; }
.vcard__badge { position: absolute; top: 12px; left: 12px; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--gold); color: var(--wood); font-size: 0.875rem; font-weight: 700; box-shadow: 0 4px 10px -4px rgb(0 0 0 / 0.5); }
.vcard__ohne { font-size: var(--step-small); color: var(--muted); }
a.vcard:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { a.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); } }
.vcard--voll .vcard__body { padding-bottom: 1.5rem; }
.vcard--voll .vcard__body > .button { margin-top: auto; }
.vcard--voll .mit { margin-bottom: 1rem; }
@media (max-width: 56em) {
  .vcards { grid-template-columns: 1fr; }
  /* Auf der Startseite am Handy: Foto links, Text rechts, damit alle drei kurz bleiben */
  .vcards--kurz .vcard { flex-direction: row; }
  .vcards--kurz .vcard > img { width: 38%; aspect-ratio: auto; height: auto; min-height: 100%; }
  .vcards--kurz .vcard__body { padding: 0.9rem 1rem 1rem; gap: 0.25rem; }
  .vcards--kurz .vcard__badge { top: 8px; left: 8px; font-size: 0.8125rem; }
}

/* Einkehren: Café und Alm als zwei gleich gebaute, flache Karten */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.place { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.place__photo { width: 100%; height: 100%; object-fit: cover; }
.place__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 1rem 1.25rem 1.15rem; }
.place h3, .place__titel { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); }
.place__body > p:not([class]) { max-width: 34ch; }
/* kleine Kreidetafel mit den Zeiten */
.place__board { align-self: stretch; padding: 0.6rem 0.9rem 0.7rem; background: var(--slate); color: var(--chalk); border: 4px solid #6e4b2f; border-radius: var(--radius-s); box-shadow: inset 0 0 26px rgb(0 0 0 / 0.35); font-size: var(--step-small); }
.place__board-title { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 650; color: #fff; margin-bottom: 0.15rem; }
.place__board a { color: var(--gold); font-weight: 700; }
.place .button { margin-top: auto; }
.place__board + .button { margin-top: 0.5rem; }
.hours--chalk div { padding-block: 0.15rem; border-color: rgb(239 235 226 / 0.18); }
.hours--chalk .is-today, .hours--chalk .is-today dt, .hours--chalk .is-today dd { color: var(--gold); }
.badge { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--gold); color: var(--wood); font-size: 0.875rem; font-weight: 700; }
@media (max-width: 64em) { .places { grid-template-columns: 1fr; } }
@media (max-width: 30em) {
  .place { grid-template-columns: 1fr; }
  .place__photo { height: auto; aspect-ratio: 16 / 9; }
}

/* Schritte: nummerierte Karten */
.steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gutter); counter-reset: schritt; }
.step { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.35rem 1.35rem; }
.step::before { counter-increment: schritt; content: counter(schritt); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.8rem; border-radius: 50%; background: var(--wood); color: var(--gold); font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.step h3 { margin-bottom: 0.3rem; }
.step__zeit { display: block; margin-bottom: 0.2rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); }
.section--dark .step { background: var(--wood-2); box-shadow: none; }
.section--dark .step::before { background: var(--gold); color: var(--wood); }
@media (max-width: 56em) {
  .steps { grid-template-columns: 1fr; gap: 0.75rem; }
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .step::before { grid-row: span 3; margin: 0; }
}

/* Kacheln mit Foto */
.tiles { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gutter); }
.tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tile__body { padding: 1rem 1.2rem 1.2rem; }
.tile h3 { margin-bottom: 0.25rem; }
.tile figcaption { margin: 0; padding: 0.7rem 1rem 0.8rem; font-size: var(--step-body); font-weight: 600; color: var(--ink); }
@media (max-width: 56em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .tiles:not(.tiles--klein) { grid-template-columns: 1fr; } }

/* Hinweis auf den ersten Kessel */
.kettle { padding: 0.85rem 1.1rem; border-radius: var(--radius-s); background: rgb(243 234 217 / 0.08); }
.kettle strong { color: var(--gold); }

/* ---------- Schau-Brennwagen ---------- */
.wagon { row-gap: 12px; align-items: center; }
.wagon__text { grid-column: 1 / 7; }
.wagon__text > * + * { margin-top: 1rem; }
.wagon__text > .eyebrow + h2 { margin-top: 0.5rem; }
.wagon__text .ticks, .wagon__text .mit { margin-top: 1.25rem; }
.wagon__text .button { margin-top: 1.6rem; }
.wagon__photo { grid-column: 8 / 13; }
.wagon__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 52em) {
  .wagon__text, .wagon__photo { grid-column: 1 / -1; }
  .wagon__photo { margin-top: 1.5rem; }
}

/* ---------- Über uns: Zitat ---------- */
.quote { padding: 0.9rem 1.2rem; border-left: 4px solid var(--gold); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--card); font-family: var(--font-head); font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem); font-weight: 500; line-height: 1.35; }
.quote p { max-width: none; }
.signature { font-weight: 700; }
.signature span { display: block; font-weight: 400; color: var(--muted); font-size: var(--step-small); }
.duo { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
.duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.duo figure:last-child img { aspect-ratio: 3 / 4; }

/* Gutschein: goldene Karte mit Abrisslinie */
.banner { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--gold); color: var(--wood); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius); outline: 2px dashed rgb(43 29 20 / 0.4); outline-offset: -12px; }
.banner > div > * + * { margin-top: 0.75rem; }
.banner .eyebrow { color: var(--wood); }
.banner .button { margin-top: 1.25rem; }
.banner__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.banner__photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 4px solid var(--card); border-radius: 10px; }
@media (max-width: 52em) { .banner { grid-template-columns: 1fr; } }

/* Presse-Links als Liste */
.press-links { display: grid; gap: 0.45rem; align-self: start; }
.press-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1.1rem; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); text-decoration: none; font-weight: 600; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.press-links a:active { transform: scale(0.985); }
.press-links .arrow { color: var(--copper); }
.press-links span { display: block; padding: 0.75rem 1.1rem; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .press-links a:hover { background: #fff; } }

/* ---------- Besuch: Adresse und Zeiten ---------- */
.visit { align-items: stretch; row-gap: 1.5rem; }
.visit__card { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 1rem; }
.visit__card address { font-style: normal; }
.visit__card .button { margin-top: auto; }
.visit__photo { grid-column: 6 / 13; }
.visit__photo img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; border-radius: var(--radius); }
.visit__tel { font-weight: 700; text-decoration: none; color: var(--copper); }
@media (max-width: 52em) {
  .visit__card, .visit__photo { grid-column: 1 / -1; }
  .visit__photo img { min-height: 0; aspect-ratio: 4 / 3; }
}
.hours { font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4rem; border-bottom: 1px solid var(--line); }
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 600; }
.hours dd { text-align: right; }
.hours .is-today { font-weight: 700; color: var(--copper); }
.hours--big { max-width: 30rem; margin-top: 1.25rem; }

/* ---------- Unterseiten: Kopf mit gewölbtem Foto ---------- */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem) max(var(--margin), (100% - var(--max)) / 2) clamp(0.5rem, 1.5vw, 1rem); }
.page-hero__body { display: grid; gap: 1rem; justify-items: start; }
.page-hero h1 { max-width: 16ch; }
.page-hero__body > p:not(.eyebrow) { font-size: var(--step-lead); line-height: 1.5; max-width: 40ch; }
.page-hero__body > .eyebrow + h1 { margin-top: -0.4rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 0.25rem; }
.page-hero__photo { aspect-ratio: 16 / 11; max-height: calc(100svh - var(--header-h) - 4rem); overflow: hidden; border-radius: 50% 50% var(--radius) var(--radius) / 24% 24% var(--radius) var(--radius); box-shadow: var(--shadow); }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 52em) {
  .page-hero { grid-template-columns: 1fr; padding-top: 1rem; }
  .page-hero__photo { order: -1; aspect-ratio: 16 / 10; }
}
/* Seitenkopf ohne Foto: Titel und ein Satz, darunter gleich der Inhalt */
.page-top { padding-block: clamp(1rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.5rem); }
.page-top .head { margin-bottom: 0; max-width: none; }

/* intro: Titel links, kurzer Text rechts */
.intro__top { align-items: end; row-gap: 0.85rem; }
.intro__top h2 { grid-column: 1 / 7; }
.intro__top p { grid-column: 8 / 13; }
@media (max-width: 52em) { .intro__top h2, .intro__top p { grid-column: 1 / -1; } }

/* Fotozeile */
.photo-row { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.photo-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-s); }
@media (max-width: 52em) { .photo-row { grid-template-columns: 1fr 1fr; } }

/* Galerie: ein großes Bild, vier kleine */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.gallery figure:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); }
.gallery figure:first-child img { aspect-ratio: auto; }
@media (max-width: 52em) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .gallery figure:first-child img { aspect-ratio: 4 / 3; }
}

/* Termine */
.tickets { display: grid; gap: 0.6rem; }
.ticket { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.85rem 1.1rem; }
.ticket .ticket__date { min-width: 6rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-s); background: var(--wood); color: var(--gold); text-align: center; font-family: var(--font-head); font-size: var(--step-h3); font-weight: 700; line-height: 1.15; }
.ticket__date span { display: block; font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--wood-muted); }
.ticket h3 { font-size: var(--step-h3); }
.ticket p { color: var(--muted); font-size: var(--step-small); }
.ticket .button { min-height: 2.6rem; }
.tickets__empty { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.35rem; }
@media (max-width: 40em) {
  .ticket { grid-template-columns: auto 1fr; }
  .ticket .button { grid-column: 1 / -1; }
}

/* Kontaktblöcke */
.contact-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(1.25rem, 3vw, 2rem); }
.contact-cols > div { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.contact-cols h3 { margin-bottom: 0.55rem; }
.contact-cols a { font-weight: 700; color: var(--copper); }
@media (max-width: 60em) { .contact-cols { grid-template-columns: 1fr; } }
.social { margin-top: 1.5rem; }

/* Formulare */
.form { background: var(--card); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 4vw, 2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; max-width: 56rem; margin-inline: auto; }
.form h2, .form h3, .form .full, .form .eyebrow { grid-column: 1 / -1; }
.form .eyebrow + h2 { margin-top: -0.6rem; }
.form label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.form .hint { display: inline; font-weight: 400; color: var(--muted); font-size: var(--step-small); }
.field { width: 100%; min-height: 3.1rem; padding: 0.65rem 0.9rem; background: #fffdf8; border: 2px solid #bfb19b; border-radius: var(--radius-s); font-size: max(1rem, var(--step-body)); transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.field:hover { border-color: #9d8c74; }
.field:focus { outline: none; border-color: var(--wood); box-shadow: 0 0 0 3px rgb(220 170 62 / 0.6); }
textarea.field { min-height: 7rem; resize: vertical; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.25rem; }
.form__note { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }
/* Anfrage: links der erste Kessel, rechts das Formular */
.anfrage { row-gap: 2.5rem; align-items: start; }
.anfrage__kessel { grid-column: 1 / 6; }
.anfrage__kessel > * + * { margin-top: 1rem; }
.anfrage__kessel > .eyebrow + h2 { margin-top: 0.5rem; }
.anfrage__bild { margin-top: 1.4rem; }
.anfrage__bild img { width: 100%; max-height: 34rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.anfrage__bild figcaption { margin-top: 0.5rem; font-size: var(--step-small); }
.anfrage__form { grid-column: 6 / 13; max-width: none; margin-inline: 0; }
.section--dark .form .eyebrow { color: var(--copper); }
.section--dark .form .link-plain { color: var(--copper); text-decoration-color: rgb(154 74 36 / 0.35); }
@media (max-width: 62em) { .anfrage__kessel, .anfrage__form { grid-column: 1 / -1; } }
.form__done { grid-column: 1 / -1; background: rgb(220 170 62 / 0.25); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 0.85rem 1.1rem; }
@media (max-width: 40em) { .form { grid-template-columns: 1fr; } }

/* Karte mit Zustimmung */
.map { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; min-height: 20rem; display: grid; place-items: center; text-align: center; padding: 2rem; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map p { margin: 0.6rem auto 1.1rem; }
.map--gap { margin-top: clamp(1.25rem, 3vw, 2rem); }

/* Rechtstexte */
.legal { max-width: 46rem; margin-inline: auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(1.25rem, 5vw, 3rem); }
.legal h2 { font-size: var(--step-h3); margin-top: 1.75rem; }
.legal p, .legal ul { margin-top: 0.7rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.legal mark { background: rgb(220 170 62 / 0.35); color: inherit; padding: 0 0.2em; border-radius: 3px; }
.notice { background: rgb(220 170 62 / 0.25); border-left: 4px solid var(--gold); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 0.85rem 1.1rem; margin-top: 1.25rem; }

/* ---------- Brennerei ---------- */
.signpost--page { grid-area: auto; justify-self: stretch; max-width: 30rem; margin-top: 0.5rem; }
.signpost--page::before { top: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.facts li { padding: 0.35rem 0.9rem; border-radius: 999px; background: var(--wood); color: var(--gold); font-weight: 700; }

/* Virtuelles Regal: dunkle Rückwand, Lichterkette, Bretter mit Messingschild */
.regal__tipp { color: var(--gold); font-weight: 700; }
.regal { --fw: clamp(4.4rem, 2.4rem + 3.6vw, 5.4rem); padding: 0 clamp(0.4rem, 2vw, 1.25rem) 0.25rem; background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.07) 0 2px, transparent 2px 46px), linear-gradient(#1a110b, #24180f); border: 10px solid #4a3221; border-top-width: 14px; border-radius: 10px; box-shadow: inset 0 14px 30px rgb(0 0 0 / 0.55); }
.regal__fach { position: relative; min-width: 0; padding-top: 1.1rem; }
.regal__fach::before { content: ""; position: absolute; left: 0; right: 0; top: 0.35rem; height: 10px; background: radial-gradient(circle, #ffd88a 0 2px, rgb(255 200 110 / 0.35) 3px, transparent 6px) 0 50% / 34px 10px repeat-x; }
.regal__reihe { display: flex; justify-content: space-evenly; align-items: flex-end; gap: 0.75rem; padding: 1.4rem 0.5rem 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; border-bottom: 14px solid #6b4a30; box-shadow: 0 6px 0 #3b281a, 0 14px 18px -6px rgb(0 0 0 / 0.6); }
.regal__reihe::-webkit-scrollbar { display: none; }
.regal__reihe.mehr-rechts { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.regal__reihe li { flex: none; scroll-snap-align: center; }
.flasche { position: relative; display: block; width: var(--fw); aspect-ratio: 60 / 200; transition: transform 240ms var(--ease-out); }
.flasche__glas { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 6px rgb(0 0 0 / 0.45)); }
.flasche__etikett { position: absolute; left: 11%; right: 11%; top: 53%; bottom: 8%; display: flex; flex-direction: column; align-items: center; background: #f6f1e6; border: 1px solid #c9a24a; box-shadow: 0 0 0 1.5px #171009; text-align: center; overflow: hidden; }
.flasche__marke { display: block; width: 100%; height: 33%; padding: 2px 3px; background: #171009; border-bottom: 1px solid #c9a24a; }
.flasche__marke img { width: 100%; height: 100%; object-fit: contain; background: none; filter: sepia(1) saturate(2.6) brightness(0.92); }
.flasche__etikett strong { margin-top: auto; padding: 0 2px; font-family: var(--font); font-size: calc(var(--fw) * 0.155); font-weight: 700; line-height: 1.02; color: #23170f; overflow-wrap: break-word; }
.flasche__etikett small { margin: 0.2em 0 auto; font-size: calc(var(--fw) * 0.12); color: #574638; }
.flasche[aria-pressed="true"] { transform: translateY(-14px); }
.flasche[aria-pressed="true"] .flasche__glas { filter: drop-shadow(0 0 10px rgb(255 205 110 / 0.6)) drop-shadow(0 6px 6px rgb(0 0 0 / 0.45)); }
.flasche:active { transform: translateY(-4px) scale(0.97); }
.flasche:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .flasche:hover { transform: translateY(-7px); } .flasche[aria-pressed="true"]:hover { transform: translateY(-14px); } }
.regal__schild { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; width: fit-content; max-width: calc(100% - 1rem); margin: 0.6rem 0 1.1rem 0.5rem; padding: 0.25rem 0.8rem 0.3rem; background: linear-gradient(#e7c060, #c8973a); color: var(--wood); font-size: var(--step-small); font-weight: 600; line-height: 1.4; border-radius: 4px; box-shadow: 0 3px 6px rgb(0 0 0 / 0.5); }
.regal__schild strong { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; }
/* Schild der angetippten Flasche, erscheint unter ihrem Brett */
.regal__info { margin: 0 0.5rem 1.25rem; padding: 0.9rem 1.2rem 1rem; background: var(--card); color: var(--ink); border-radius: var(--radius-s); border-top: 5px solid var(--gold); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.7); }
.regal__info > * + * { margin-top: 0.3rem; }
.regal__info h3 { font-size: var(--step-title); }
.regal__info-art { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper); }
.regal__info-wo { font-size: var(--step-small); color: var(--muted); }
.regal__fuss { margin-top: 1.25rem; color: var(--wood-muted); }
.regal__fuss strong { color: var(--wood-ink); }
/* Laptop: vier Fächer als zwei Reihen nebeneinander, damit das ganze Regal auf einen Blick passt.
   dense: das Flaschen-Schild rutscht unter die Reihe, das Fach daneben bleibt an seinem Platz. */
@media (min-width: 64em) {
  .regal { --fw: clamp(3.5rem, 1.4rem + 2.6vw, 4.6rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: clamp(0.75rem, 2vw, 1.5rem); }
  .regal__info { grid-column: 1 / -1; }
  .regal__reihe { gap: 0.4rem; padding-inline: 0.25rem; }
}
@media (max-width: 40em) {
  .regal { --fw: 3.75rem; border-width: 6px; border-top-width: 10px; }
  .regal__reihe { justify-content: flex-start; gap: 1rem; padding-inline: 0.75rem; }
  .regal__tipp::after { content: " Seitlich wischen zeigt weitere."; font-weight: 400; color: var(--wood-muted); }
}

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--wood); color: var(--wood-ink); border-top: 3px solid var(--gold); padding: clamp(2.5rem, 6vw, 4rem) max(var(--margin), (100% - var(--max)) / 2) 1.5rem; }
.postcard { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.25rem clamp(2rem, 5vw, 4rem); }
.postcard__msg h2 { font-size: var(--step-h3); color: var(--gold); }
.postcard__msg p { margin-top: 0.55rem; color: var(--wood-muted); max-width: 34ch; }
.postcard__logo { width: 10rem; margin-bottom: 1.1rem; background: none; }
.postcard__stamp { width: 8.5rem; margin-top: 1.4rem; padding: 5px; background: var(--wood-ink); border-radius: 4px; transform: rotate(-2deg); }
.postcard__stamp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.postcard h3 { font-family: var(--font); font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.85rem; }
.postcard__addr ul, .postcard__nav ul { display: grid; gap: 0.5rem; }
.postcard a { text-decoration: none; }
.postcard__addr a:hover, .postcard__nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.postcard__imprint { grid-column: 1 / -1; max-width: none; padding-top: 1.15rem; border-top: 1px solid rgb(243 234 217 / 0.14); font-size: var(--step-small); color: var(--wood-muted); }
.postcard__imprint a { color: inherit; text-decoration: underline; }
.postcard__alter { display: block; margin-top: 0.35rem; }
@media (max-width: 52em) { .postcard { grid-template-columns: 1fr 1fr; } .postcard__msg { grid-column: 1 / -1; } }
@media (max-width: 30em) { .postcard { grid-template-columns: 1fr; } }

/* ---------- Trickfilm: Wie alles begann (js/film.js) ---------- */
.film { margin: 0; }
.split__media.film { grid-column: 6 / 13; }
@media (max-width: 52em) { .split__media.film { grid-column: 1 / -1; } }
.film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #1c130d; box-shadow: var(--shadow); }
.film__frame canvas, .film__ersatz { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.split__media .film__ersatz { aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.js .film__ersatz { display: none; }
.js .film__frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 75% at center, rgba(28, 18, 12, 0) 55%, rgba(28, 18, 12, 0.3) 100%); pointer-events: none; }
html:not(.js) .film__frame canvas, html:not(.js) .film__text, html:not(.js) .film__steuerung { display: none; }
.film__text { min-height: 2.7em; margin-top: 0.85rem; max-width: none; font-family: var(--font-head); font-size: var(--step-lead); font-weight: 600; line-height: 1.35; }
.film__steuerung { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.35rem; }
.film__knopf { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: var(--wood); color: var(--gold); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.film__knopf:hover { background: var(--wood-2); }
.film__knopf:active { transform: scale(0.95); }
.film__icon { display: none; width: 1rem; height: 1rem; fill: currentColor; }
.film__icon--nochmal { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.film__knopf[data-zustand="play"] .film__icon--play,
.film__knopf[data-zustand="weiter"] .film__icon--play,
.film__knopf[data-zustand="pause"] .film__icon--pause,
.film__knopf[data-zustand="nochmal"] .film__icon--nochmal { display: block; }
.film__kapitel { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.film__kapitel button { display: block; width: 100%; min-height: 2.75rem; padding: 0.55rem 0 0; border: 0; background: none; font: inherit; font-size: 0.8125rem; line-height: 1.2; color: var(--muted); text-align: left; cursor: pointer; }
.film__balken { display: block; height: 4px; margin-bottom: 0.4rem; overflow: hidden; border-radius: 2px; background: var(--line); transition: background-color 160ms ease; }
.film__balken::after { content: ""; display: block; height: 100%; background: var(--copper); transform: scaleX(var(--p, 0)); transform-origin: left; }
.film__kapitel button:hover .film__balken { background: #c9b99f; }
.film__kapitel button[aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 34em) {
  .film__kapitel button { display: flex; align-items: center; padding: 0; }
  .film__balken { flex: 1; margin: 0; }
  .film__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Abschnitte erscheinen einmal beim Scrollen: kurz, kleiner Weg, leicht versetzt */
  .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-rise] { opacity: 0; transform: translateY(10px); animation: rise 500ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms + 40ms); }
  /* Die Schilder werden nacheinander an den Pfosten gehängt */
  /* backwards: nach dem Aufhängen gelten wieder die normalen Hover-Bewegungen */
  .js .sign { animation: hang 560ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 220ms); }
  /* Das Türschild pendelt einmal aus */
  .js .doorsign { animation: swing 1.8s var(--ease-in-out) 500ms both; }
  .regal__info.is-neu { animation: info-in 260ms var(--ease-out); }
  .film__text.is-neu { animation: info-in 260ms var(--ease-out); }
}
@keyframes info-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes hang { from { opacity: 0; transform: translateX(-14px) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes swing {
  0% { transform: translateX(-50%) rotate(-8deg); }
  28% { transform: translateX(-50%) rotate(5deg); }
  52% { transform: translateX(-50%) rotate(-2.5deg); }
  74% { transform: translateX(-50%) rotate(1deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
/* Wer weniger Bewegung möchte, bekommt nur sanftes Einblenden */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 0; transition: opacity 300ms ease; }
  .js [data-reveal].is-in { opacity: 1; }
  .fader img { transition: none; filter: none; }
  .fader__bar { display: none; }
}

/* Obstbilder beim Brennen lassen */
.obst-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(2rem, 5vw, 3rem); }
.obst-duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.obst-duo figcaption { margin-top: 0.4rem; font-size: 0.875rem; }
@media (max-width: 40em) { .obst-duo { grid-template-columns: 1fr; } }

/* Flaschen aus Blender gerendert */
.flasche__bild { width: 100%; height: 100%; background: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(0 0 0 / 0.5)); transition: filter 240ms ease; }
.flasche[aria-pressed="true"] .flasche__bild { filter: drop-shadow(0 0 12px rgb(255 205 110 / 0.55)) drop-shadow(0 8px 8px rgb(0 0 0 / 0.5)); }

.regal__foto { max-width: 46rem; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; }
.regal__foto img { width: 100%; border-radius: var(--radius); }
.regal__foto figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--wood-muted); }

/* Musikvideo beim Schau-Brennen */
.musik-video { max-width: 34rem; margin: clamp(2rem, 5vw, 3rem) auto 0; }
.musik-video video { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); background: #1b130c; }
.musik-video figcaption { margin-top: 0.5rem; font-size: 0.875rem; text-align: center; }

/* REWE-Hinweis, wenn geschlossen */
.today__rewe { display: block; margin-top: 0.35rem; font-size: 0.875em; opacity: 0.9; }

/* digitales Regal klein, echtes Regal daneben */
.regal-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "regal foto" "info foto"; gap: 0 clamp(1rem, 3vw, 2rem); align-items: start; }
.regal-paar .regal { grid-area: regal; --fw: clamp(3rem, 1.6rem + 2vw, 3.8rem); }
.regal-paar .regal__info { grid-area: info; margin-top: 1rem; }
.regal-paar .regal__foto { grid-area: foto; max-width: none; margin: 0; }
@media (max-width: 56em) { .regal-paar { grid-template-columns: 1fr; grid-template-areas: "regal" "info" "foto"; } .regal-paar .regal__foto { margin-top: 1.5rem; } }

/* echtes Regal mit Sortenliste statt gerenderter Flaschen */
.regal-paar { grid-template-areas: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.regal-paar .regal__foto { grid-area: auto; }
.sorten { display: grid; gap: 1.1rem; }
.sorten h3 { font-size: var(--step-title); color: var(--gold); }
.sorte__namen { margin-top: 0.25rem; font-size: 0.9375rem; opacity: 0.85; }
@media (max-width: 56em) { .regal-paar { grid-template-columns: 1fr; grid-template-areas: none; } }

/* Rewe-Foto und Hopfentropfen-Logo */
.kaufen__bild { width: 100%; margin-top: 0.75rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-s); }
.tile { position: relative; }
.tile__logo { position: absolute; top: 0.6rem; left: 0.6rem; width: 34% !important; aspect-ratio: 1; height: auto !important; object-fit: cover; object-position: 60% 15%; border-radius: 50%; border: 3px solid var(--card, #fff); box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); }

/* Hopfentropfen */
.hopfen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.hopfen__text > * + * { margin-top: 0.9rem; }
.hopfen__logo { width: 3.2rem; height: 3.2rem; border-radius: 50%; vertical-align: middle; margin-right: 0.4rem; object-fit: cover; }
.hopfen__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hopfen__bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.hopfen__bilder .hopfen__gross { grid-row: span 3; }
.hopfen__gross img { height: 100%; aspect-ratio: auto; object-position: 50% 15%; }
.hopfen__bilder figcaption { margin-top: 0.3rem; font-size: 0.8125rem; }
@media (max-width: 52em) { .hopfen { grid-template-columns: 1fr; } }

/* Rewe-Regal ganz zeigen, Georgs Kopf nicht abschneiden */
.kaufen__bild { aspect-ratio: auto; height: auto; object-fit: contain; }
.hopfen__gross img { object-position: 50% 0; min-height: 26rem; }