/* Fonts served from this site (no request to Google): latin and latin-ext subsets,
   downloaded from Google Fonts, SIL Open Font License. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-600-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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-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;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-pro-italic-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-pro-italic-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: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-pro-normal-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/crimson-pro-normal-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: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/crimson-pro-normal-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/crimson-pro-normal-600-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;
}
/* ------------------------------
 | MODULAR TYPE SCALE
 | ------------------------------
 | Helps you create type scales that bring natural rhythm,
 | consistency, and balance to your designs.
 |
 | BASE VALUES:
 | - Font Size: 16px / 1rem
 | - Line Height: 24px / 1.5
 | - Letter Spacing: 15% / 0.15em
 |
 | SCALE:
 | - Ratio: 1.19 - Minor Third
 |
 | LINE GRID:
 | - Grid Unit: 4px / 0.25rem
 |
 |
 | Scale ratio is calculated using an equal temperament tuning system.
 | Created with Precise Type / https://precise-type.com
 | Tools & Models by Adonis Raul Raduca
 */

/* --- Font Sizes --- */

:root {
  /* below the base */
  --font-size-2b: 0.6875rem;
  --font-size-1b: 0.8125rem;

  /* the base */
  --font-size: 1rem;

  /* above the base */
  --font-size-1: 1.1875rem;
  --font-size-2: 1.4375rem;
  --font-size-3: 1.6875rem;
  --font-size-4: 2rem;
  --font-size-5: 2.375rem;
  --font-size-6: 2.8125rem;
  --font-size-7: 3.375rem;
}

/* --- Line Heights --- */

:root {
  /* below the base */
  --line-height-2b: 1.8182;
  --line-height-1b: 1.5385;

  /* the base */
  --line-height: 1.5;

  /* above the base */
  --line-height-1: 1.4737;
  --line-height-2: 1.3913;
  --line-height-3: 1.3333;
  --line-height-4: 1.25;
  --line-height-5: 1.2632;
  --line-height-6: 1.1556;
  --line-height-7: 1.1852;
}

/* --- Letter Spacings --- */

:root {
  /* below the base */
  --letter-space-2b: 0.2318em;
  --letter-space-1b: 0.1915em;

  /* the base */
  --letter-space: 0.15em;

  /* above the base */
  --letter-space-1: 0.1216em;
  --letter-space-2: 0.0952em;
  --letter-space-3: 0.0767em;
  --letter-space-4: 0.06em;
  --letter-space-5: 0.0458em;
  --letter-space-6: 0.034em;
  --letter-space-7: 0.0233em;
}

/* ------------------------------
 | Examples
 */

/* --- Default Text --- */

body {
  font-weight: 400;
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-space);
}

/* --- Headers --- */

:is(h1, h2, h3) {
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
  letter-spacing: var(--letter-space-3);
}
h2 {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-space-2);
}
h3 {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-space-1);
}

/* --- Alternative Text Sizes --- */

:is(p, span, a, ul, ol, dl, li, dt, dd, label, blockquote, code) {
  &.small-text {
    font-size: var(--font-size-1b);
    line-height: var(--line-height-1b);
    letter-spacing: var(--letter-space-1b);
  }
  &.large-text {
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    letter-spacing: var(--letter-space-1);
  }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100svh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Everything below applies only to pages in the Hütte design: their navigation
   carries .d-huette. The Winterwald and Waldgasthaus designs are scoped the same
   way in their own stylesheets, so the three never touch each other. */
:root:has(.d-huette) {

/* =====================================================
 | Ruhlaer Skihütte – Site theme (rustic / vintage)
 | Dark walnut planks, aged parchment, brass and fir green.
 | Imagery is raster only: photographs and generated textures
 | (see files/img). Sections are Article templates, targeted
 | by their anchor ids.
 */

& {
  --walnut: #20130b;
  --plank: #3a2415;
  --plank-2: #55361f;
  --brass: #c4a062;
  --brass-d: #8f6f36;
  --parchment: #efe3c8;
  --burgundy: #7a2a22;
  --fir: #2f4a3a;
  --ink: #2a1d12;
  --muted: #6b5a45;
  --line: #bca880;
  --snow: #f2efe8;
  --ff-display: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --ff-body: "Crimson Pro", Georgia, "Times New Roman", serif;
  --ff-black: "Cormorant Garamond", "Palatino Linotype", Georgia, serif;
  --tex-wood: url("../img/holz-dunkel.webp");
  --tex-paper: url("../img/pergament.webp");
}

& { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  background: var(--walnut) var(--tex-wood) center top / 1200px auto;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: normal;
}

/* Neutralise the Article card chrome: every section is full-bleed */
#top, #hero, #fakten, #huette, #speisekarte, #erleben, #besuch, #reservieren, #footer, #kartenkopf, #chronik, #rechtliches {
  width: 100%; max-width: none; margin: 0; padding: 0;
  border-radius: 0; box-shadow: none; overflow: visible; background: none;
  /* Article's theme tokens default to the template's navy/sans look */
  --article-text: currentColor;
  --article-heading: var(--ink);
  --article-font-body: var(--ff-body);
  --article-font-display: var(--ff-display);
  --article-body-heading-spacing: 0;
}
:is(#top, #hero, #fakten, #huette, #speisekarte, #erleben, #besuch, #reservieren, #footer, #kartenkopf, #chronik, #rechtliches) .article__body {
  max-width: none; font-size: inherit; line-height: inherit; color: inherit;
}
:is(#top, #hero, #fakten, #huette, #speisekarte, #erleben, #besuch, #reservieren, #footer, #kartenkopf, #chronik, #rechtliches) .article__body > * + * { margin-top: 0; }
:is(#top, #hero, #fakten, #huette, #speisekarte, #erleben, #besuch, #reservieren, #footer, #kartenkopf, #chronik, #rechtliches) .article__grid { display: block; }
:is(#top, #hero, #fakten, #huette, #speisekarte, #erleben, #besuch, #reservieren, #footer, #kartenkopf, #chronik, #rechtliches) .article__body > * { margin: 0 auto; }
#hero :is(.article, .article__grid, .article__content) { position: static; }

/* Article link chrome (sand underline) does not belong on buttons and nav */
.article .article__body a { background: none; border-bottom: 0; color: inherit; }
/* All buttons on dark ground are outlined only (brass frame, no fill) */
.article .article__body :is(a.btn--primary, a.btn--small, a.btn--ghost) { color: #f6ecd6; background: rgba(20,12,6,.35); border: 2px solid var(--brass); }
.article .article__body :is(a.btn--primary, a.btn--small, a.btn--ghost):hover { background: rgba(196,160,98,.25); }
.article .article__body a.btn--dark { color: #f6ecd6; background: var(--plank); border: 2px solid var(--plank); }
.article .article__body a.btn--dark:hover { background: var(--burgundy); border-color: var(--burgundy); }
.article .article__body a.link { color: var(--burgundy); border-bottom: 1px solid currentColor; }
.article .article__body a.topbar__brand { color: #f3e4c4; }

h1, h2, h3, h4 { font-family: var(--ff-display); letter-spacing: normal; margin: 0; color: inherit; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: inherit; }

.wrap { width: min(100% - 2.5rem, 70rem); margin-inline: auto; }
.eyebrow { font-family: var(--ff-display); font-size: .95rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brass-d); margin-bottom: .5rem; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; margin-bottom: 1rem; color: var(--ink); }
.lead { font-size: 1.3rem; color: var(--muted); max-width: 40rem; font-style: italic; }
.note { font-style: italic; font-size: 1.25rem; color: var(--burgundy); border-left: 3px solid var(--brass); padding-left: 1rem; }
.small { font-size: .95rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: .75rem 1.7rem; border: 2px solid var(--brass);
  font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary, .btn--ghost { color: #f6ecd6; background: rgba(20,12,6,.35); }
.btn--primary:hover, .btn--ghost:hover { background: rgba(196,160,98,.25); }
.btn--dark { background: var(--plank); color: #f6ecd6; border-color: var(--plank); }
.btn--dark:hover { background: var(--burgundy); border-color: var(--burgundy); }
.btn--small { padding: .35rem 1rem; font-size: .9rem; background: transparent; color: #f6ecd6; }

/* ---------- Navigation ---------- */
#top { position: sticky; top: 0; z-index: 50; }
.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem max(1.25rem, calc((100% - 70rem) / 2));
  background: linear-gradient(rgba(32,19,11,.94), rgba(32,19,11,.94)), var(--tex-wood) center top / 900px auto;
  color: #f3e4c4; border-bottom: 3px double var(--brass-d);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.topbar__brand { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; white-space: nowrap; }
.topbar__links a { white-space: nowrap; }
.topbar__name { font-family: var(--ff-black); font-weight: 700; font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: #f3e4c4; }
.topbar__since { font-family: var(--ff-display); font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--brass); }
.topbar__links { display: flex; align-items: center; gap: 1.7rem; }
.topbar__links a:not(.btn) { text-decoration: none; font-family: var(--ff-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.topbar__links a:not(.btn):hover { color: var(--brass); }
.topbar__toggle, .topbar__burger { display: none; }

/* Design switcher (files/js/design.js): three short buttons in the bar,
   a full-width row in the phone menu. Each design restyles it. */
.design-switch { display: inline-flex; align-items: center; border: 1px solid rgba(196,160,98,.55); }
.design-switch__label { display: none; }
.topbar .design-switch a { display: inline-flex; align-items: center; justify-content: center; margin: 0; border: 0; background: none; padding: .3rem .6rem; text-decoration: none; font-family: var(--ff-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #e6d4ad; cursor: pointer; transition: background .15s, color .15s; }
.topbar .design-switch a + a { border-left: 1px solid rgba(196,160,98,.35); }
.topbar .design-switch a:hover { color: var(--brass); }
.topbar .design-switch a[aria-current="page"] { background: var(--brass); color: var(--walnut); }
.topbar .design-switch a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (max-width: 82rem) and (min-width: 68.01rem) {
  .topbar__links { gap: 1.1rem; }
  .topbar__links a:not(.btn) { font-size: .95rem; letter-spacing: .06em; }
  .topbar__since { display: none; }
}

/* ---------- Hero ---------- */
#hero { position: relative; min-height: min(88svh, 52rem); display: grid; align-items: center; color: #f6ecd6; overflow: hidden; background: #15100b; }
#hero .article, #hero .article__grid, #hero .article__content, #hero .article__body { display: contents; }
.hero-photo { position: absolute; inset: 0; background: url("../img/huette-nacht.webp") center / cover no-repeat; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at center, rgba(14,8,4,.72) 0%, rgba(14,8,4,.55) 60%, rgba(14,8,4,.85) 100%), linear-gradient(rgba(14,8,4,.45), rgba(14,8,4,.25) 40%, rgba(14,8,4,.8)); }
.hero-copy { position: relative; z-index: 2; text-align: center; width: min(100% - 2.5rem, 52rem); padding: clamp(2rem, 6vh, 4rem) 1rem; }
.hero-copy .eyebrow { color: var(--brass); }
/* Old wooden skis leaning at the left and right edge, soft and dimmed, behind the text
   (photo cut-outs files/img/ski-a.png / ski-b.png) */
.hero-skis { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* One crossed pair per side, deliberately not mirrored: different height, angles,
   crossing point and edge distance, both standing in the snow at the bottom */
.hero-skis__group { position: absolute; bottom: -3%; width: clamp(9rem, 16vw, 15rem); }
.hero-skis img { position: absolute; left: 50%; top: 0; height: 100%; width: auto; opacity: .85; filter: blur(.4px) sepia(.2) brightness(.95) contrast(1.05) drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.hero-skis__group--left { left: clamp(-1rem, 5vw, 7rem); height: 72%; }
.hero-skis__group--left img { transform-origin: 50% 62%; }
.hero-skis__group--left img:nth-child(1) { transform: translateX(-50%) rotate(-9deg); }
.hero-skis__group--left img:nth-child(2) { transform: translateX(-50%) rotate(17deg); height: 94%; top: 6%; }
.hero-skis__group--right { right: clamp(-1rem, 3vw, 4rem); height: 58%; bottom: -2%; }
.hero-skis__group--right img { transform-origin: 50% 40%; }
.hero-skis__group--right img:nth-child(1) { transform: translateX(-50%) rotate(-20deg); height: 92%; top: 8%; opacity: .75; filter: blur(.8px) sepia(.25) brightness(.85) drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.hero-skis__group--right img:nth-child(2) { transform: translateX(-50%) rotate(7deg); }
/* Narrow phones: no room beside the text, so no skis */
@media (max-width: 40rem) { .hero-skis { display: none; } }
.hero-copy h1 { font-family: var(--ff-black); font-weight: 700; font-size: clamp(2.5rem, 7.2vw, 5.4rem); letter-spacing: .07em; text-transform: uppercase; line-height: 1.05; color: #f8edd6; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 30px rgba(0,0,0,.8); margin-bottom: .6rem; }
.hero-rule { display: flex; align-items: center; gap: 1rem; justify-content: center; font-family: var(--ff-display); font-style: italic; font-size: 1.25rem; color: var(--brass); margin: 0 0 1.2rem; }
.hero-rule::before, .hero-rule::after { content: ""; flex: 0 1 7rem; border-top: 1px solid var(--brass-d); border-bottom: 1px solid var(--brass-d); height: 4px; }
.hero-rule span { white-space: nowrap; }
.hero-lead { font-size: clamp(1.2rem, 2.2vw, 1.5rem); max-width: 36rem; margin: 0 auto; color: #f6ecd6; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.85); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; justify-content: center; }
.open-badge { display: inline-block; margin: 1.8rem 0 0; padding: .3rem 1rem; font-family: var(--ff-display); font-weight: 700; font-size: 1rem; letter-spacing: .06em; background: rgba(20,12,6,.6); border: 1px solid var(--brass-d); }
.open-badge::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .55rem; background: #aaa; }
.open-badge.is-open::before { background: #7fd09a; box-shadow: 0 0 8px #7fd09a; }
.open-badge.is-closed::before { background: #d9806f; }

/* ---------- Facts ---------- */
#fakten { background: linear-gradient(rgba(20,12,6,.55), rgba(20,12,6,.55)), var(--tex-wood) center top / 1100px auto; color: #f3e4c4; border-block: 3px double var(--brass-d); }
.facts { list-style: none; margin: 0 auto; padding: 1.7rem 0; width: min(100% - 2.5rem, 70rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.facts strong { display: block; font-family: var(--ff-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--brass); line-height: 1.1; }
.facts li > span { font-size: 1rem; letter-spacing: .06em; opacity: .85; }

/* ---------- Parchment sections ---------- */
#huette, #speisekarte, #besuch { background: var(--parchment) var(--tex-paper) center / cover; position: relative; }
#huette { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.split { width: min(100% - 2.5rem, 70rem); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split__photos { position: relative; padding-top: 3.5rem; }
.print { margin: 0; background: #f4efe3; padding: .7rem .7rem 0; box-shadow: 0 10px 28px rgba(30,16,6,.5); }
.print img { width: 100%; height: auto; display: block; }
.print figcaption { font-style: italic; font-size: .98rem; color: var(--muted); padding: .55rem .2rem .7rem; text-align: center; }
.print--big { width: 86%; transform: rotate(-1.4deg); }
.print--small { position: absolute; width: 42%; right: -2%; top: 0; transform: rotate(2.6deg); z-index: 1; }
.print--small img { filter: sepia(.55); }

#speisekarte { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 3px double var(--brass-d); }

/* ---------- Impressum and Datenschutz: the text on a parchment card ---------- */
#rechtliches { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem); }
.legal { position: relative; width: min(100% - 1.5rem, 52rem); margin: 0 auto; padding: clamp(1.8rem, 5vw, 3.6rem); background: var(--parchment) url("../img/pergament-tile.webp") top center / 100% auto repeat-y; box-shadow: inset 0 0 90px rgba(110, 70, 22, .55), inset 0 0 18px rgba(90, 55, 15, .35), 0 18px 50px rgba(0,0,0,.65); outline: 1px solid #5b4326; color: var(--ink); font-size: 1.12rem; line-height: 1.65; overflow-wrap: anywhere; }
.legal::before { content: ""; position: absolute; inset: .7rem; border: 3px double var(--brass-d); pointer-events: none; }
.legal section + section { margin-top: 2rem; padding-top: 1.7rem; border-top: 1px dotted #a58d5c; }
.legal h2 { margin: 0 0 .7rem; font-family: var(--ff-display); font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: var(--burgundy); }
.legal p { margin: 0 0 .8rem; }
.legal p:last-child { margin-bottom: 0; }
.legal a { color: var(--burgundy); text-decoration-color: color-mix(in srgb, var(--brass-d) 70%, transparent); text-underline-offset: .2em; }
.legal a:hover { text-decoration-color: currentColor; }
.legal__lead { margin-bottom: 2.2rem !important; font-size: 1.22rem; font-style: italic; }
.legal__table { width: 100%; margin: .4rem 0 1rem; border-collapse: collapse; font-size: 1.02rem; }
.legal__table :is(th, td) { padding: .5rem .7rem .5rem 0; border-bottom: 1px dotted #a58d5c; text-align: left; vertical-align: top; }
.legal__table th { font-family: var(--ff-display); font-weight: 700; color: var(--burgundy); }
.legal code { font-size: .92em; padding: .05em .3em; background: rgba(90, 60, 25, .1); border-radius: 2px; }
.legal__credits { columns: 2 17rem; column-gap: 2.4rem; margin: .8rem 0 1rem; padding: 0; list-style: none; font-size: .98rem; line-height: 1.45; }
.legal__credits li { break-inside: avoid; margin-bottom: .45rem; }
.legal__credits span { font-weight: 600; }
.legal__note { font-size: .95rem; color: var(--muted); }
/* Placeholders the owner still has to fill in – impossible to overlook */
.legal mark.todo { padding: .05em .35em; border-radius: 2px; background: #ffe58a; color: #5a3b00; box-shadow: 0 0 0 1px #d8a400; font-style: normal; }
@media (max-width: 40rem) {
  .legal { width: calc(100% - 1rem); font-size: 1.04rem; }
  .legal::before { inset: .35rem; }
  .legal h2 { font-size: 1.32rem; }
  .legal__table { font-size: .95rem; }
}
/* The menu teaser: pinned dish photos, and a small printed menu card */
.split--menu { grid-template-columns: 1fr 1.05fr; }
.split--menu .print--big { transform: rotate(1.2deg); }
.split--menu .print--small { width: 44%; transform: rotate(-2.6deg); }
.split--menu .print--small img { filter: none; }
.menucard { position: relative; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.2rem); background: #f6eedb; text-align: center; box-shadow: 0 14px 40px -12px rgba(40,22,8,.45); outline: 1px solid color-mix(in srgb, var(--brass-d) 50%, transparent); outline-offset: -.6rem; }
.menucard::before { content: ""; position: absolute; inset: .95rem; border: 1px solid color-mix(in srgb, var(--brass-d) 35%, transparent); pointer-events: none; }
.menucard .eyebrow { margin-bottom: .5rem; }
.menucard h2 { margin-bottom: .6rem; }
.menucard__lead { margin: 0 auto 1.4rem; max-width: 26rem; font-style: italic; color: var(--muted); }
.menucard__lead::after { content: ""; display: block; width: 5rem; height: 5px; margin: 1.2rem auto 0; border-block: 1px solid var(--brass-d); }
.menucard__list { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.menucard__list li + li::before { content: "❦"; display: block; margin: .55rem 0; color: var(--brass-d); font-size: .95rem; line-height: 1; }
.menucard__list h3 { font-size: 1.45rem; color: var(--burgundy); margin: 0 0 .1rem; }
.menucard__list p { margin: 0; font-style: italic; color: var(--muted); font-size: 1.02rem; }
.menucard__more { margin: 0; }

/* ---------- Cards (photos) ---------- */
#erleben { padding: clamp(3.5rem, 8vw, 6.5rem) 0; background: linear-gradient(rgba(20,12,6,.5), rgba(20,12,6,.5)), var(--tex-wood) center top / 1200px auto; color: #eadfc6; }
#erleben h2 { color: #f6ecd6; }
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; margin-top: 2.2rem; }
.card { background: #f4efe3 var(--tex-paper) center / cover; color: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.55); display: grid; grid-template-rows: auto 1fr; border: 1px solid #a98f5c; }
.card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-bottom: 4px solid var(--plank); }
.card__body { padding: 1.2rem 1.5rem 1.5rem; }
.card h3 { font-size: 1.8rem; color: var(--burgundy); margin-bottom: .3rem; }
.card p { margin: 0; color: var(--muted); }

/* ---------- Visit ---------- */
#besuch { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-block: 3px double var(--brass-d); }
.visit { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.plaque { padding: 1.6rem 1.8rem; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -8px; background: rgba(255,250,238,.45); }
address { font-style: normal; font-size: 1.3rem; line-height: 1.55; margin-bottom: 1rem; }
.hours h3 { font-size: 1.8rem; margin-bottom: .6rem; color: var(--burgundy); }
.hours table { width: 100%; }
.hours th { text-align: left; font-weight: 400; padding: .4rem 0; }
.hours td { text-align: right; font-weight: 700; }
.hours td.closed { color: var(--burgundy); font-weight: 400; font-style: italic; }
.hours tr + tr { border-top: 1px dotted var(--line); }
.hours tr.today { color: var(--fir); }
.hours tr.today th { font-weight: 700; }
.hours tr.today th::after { content: " · heute"; font-style: italic; }

/* ---------- Reserve ---------- */
#reservieren { padding: clamp(3.5rem, 8vw, 6rem) 0; text-align: center; color: #f6ecd6; background: linear-gradient(rgba(14,8,4,.86), rgba(14,8,4,.9)), url("../img/huette-nacht.webp") center / cover; border-top: 3px double var(--brass-d); }
.reserve { width: min(100% - 2.5rem, 46rem); margin: 0 auto; }
.reserve h2 { color: #f8edd6; }
.reserve .eyebrow { color: var(--brass); }
.reserve .lead { color: #f1e6cf; margin-inline: auto; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.reserve .hero-actions { justify-content: center; }

/* ---------- Footer ---------- */
#footer { background: #140c06; color: #cbbb9b; font-size: 1rem; border-top: 3px double var(--brass-d); }
.foot { width: min(100% - 2.5rem, 70rem); margin: 0 auto; padding: 1.8rem 0 1.4rem; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot__credits { margin: 1.3rem 0 0; font-size: .82rem; line-height: 1.5; opacity: .6; }
/* The design switch: the season picks the design, a visitor may choose another. */
.foot-designs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(196,160,98,.25); }
.foot-designs > span { margin-right: .4rem; font-family: var(--ff-display); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.foot .foot-designs a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .3rem .8rem; border: 1px solid rgba(196,160,98,.55); font-family: var(--ff-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #e6d4ad; transition: background .15s, color .15s; }
.foot .foot-designs a:hover { color: var(--brass); }
.foot .foot-designs a[aria-current="page"] { background: var(--brass); color: var(--walnut); }
.foot .foot-designs a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.foot .foot-designs .foot-designs__auto { border-style: dashed; font-weight: 500; letter-spacing: .04em; text-transform: none; }

/* ---------- Menu page ---------- */
.pagehead { text-align: center; width: min(100% - 2.5rem, 52rem); padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); color: #f3e4c4; }
.pagehead h1 { font-family: var(--ff-black); font-weight: 700; font-size: clamp(2.6rem, 7.5vw, 5rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.7); }
.pagehead .eyebrow { color: var(--brass); }
#kartenkopf .article__body > .pagehead { margin: 0 auto; }

/* RestaurantMenu plugin, re-skinned as a printed inn menu on parchment */
.rmm {
  --rmm-ink: var(--ink); --rmm-muted: var(--muted); --rmm-line: var(--line);
  --rmm-accent: var(--burgundy); --rmm-accent-ink: #f6ecd6;
  --rmm-tag-bg: transparent; --rmm-tag-ink: var(--fir);
  --rmm-font-display: var(--ff-display); --rmm-font-hand: var(--ff-body);
  --rmm-bar-bg: transparent; --rmm-sticky-top: var(--topbar-h, 3.6rem);
  --rmm-active-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-family: var(--ff-body); font-size: 1.15rem;
  padding: 0 0 clamp(3rem, 7vw, 5rem);
}
/* The paper repeats downward at a fixed width, so switching to a longer or shorter menu
   never rescales or shifts it; the burnt edge is a shadow, the same at any height. */
.rmm__wrap { position: relative; width: min(100% - 1.5rem, 66rem); background: var(--parchment) url("../img/pergament-tile.webp") top center / 100% auto repeat-y; padding: clamp(1.6rem, 4vw, 3.2rem); box-shadow: inset 0 0 90px rgba(110, 70, 22, .55), inset 0 0 18px rgba(90, 55, 15, .35), 0 18px 50px rgba(0,0,0,.65); outline: 1px solid #5b4326; }
.rmm__wrap::before { content: ""; position: absolute; inset: .7rem; border: 3px double var(--brass-d); pointer-events: none; }
.rmm__head { text-align: center; margin-bottom: 1rem; }
.rmm__eyebrow { color: var(--brass-d); font-family: var(--ff-display); letter-spacing: .28em; }
.rmm__title { font-weight: 700; }
.rmm__intro { margin-inline: auto; font-style: italic; }
/* Menus as engraved headings: no boxes, a burgundy rule under the one being read */
.rmm__tabs { justify-content: center; gap: clamp(1rem, 3.5vw, 2.8rem); margin: 1.6rem calc(.7rem + 3px - clamp(1.6rem, 4vw, 3.2rem)) 0; padding: .7rem 1rem 0; background: linear-gradient(#d9c9a8, #d4c3a0); border-bottom: 1px solid color-mix(in srgb, var(--brass-d) 55%, transparent); box-shadow: 0 3px 0 -2px color-mix(in srgb, var(--brass-d) 35%, transparent); --rmm-active-bg: transparent; --rmm-active-ink: var(--burgundy); --rmm-active-border: var(--burgundy); --rmm-active-shadow: none; }
.rmm__tab { min-height: 0; padding: .2rem .15rem .75rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; background: transparent; color: color-mix(in srgb, var(--plank) 70%, var(--parchment)); font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.rmm__tab:hover { color: var(--plank); border-bottom-color: color-mix(in srgb, var(--brass-d) 60%, transparent); }
.rmm__tab-hours { margin-top: .15rem; font-family: var(--ff-body); text-transform: none; letter-spacing: .02em; font-size: .9rem; font-weight: 400; font-style: italic; opacity: .85; }
.rmm__now { position: static; order: -1; margin-bottom: .2rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--burgundy); font-family: var(--ff-body); font-size: .72rem; font-style: italic; font-weight: 600; letter-spacing: .08em; text-transform: none; }
.rmm__now::before, .rmm__now::after { content: " — "; color: var(--brass-d); }

/* One quiet line: filter · allergens · PDF */
.rmm__tools { justify-content: center; align-items: center; gap: .4rem 1.6rem; margin-top: 1.2rem; font-family: var(--ff-display); --rmm-active-bg: transparent; --rmm-active-ink: var(--burgundy); --rmm-active-border: var(--burgundy); --rmm-active-shadow: none; }
.rmm__filters { gap: 1rem; }
.rmm__chip { min-height: 2rem; padding: 0 .1rem; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: var(--muted); font-family: var(--ff-display); font-size: .95rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rmm__chip:hover { color: var(--plank); }
.rmm__tools > * + * { padding-left: 1.6rem; border-left: 1px solid color-mix(in srgb, var(--brass-d) 45%, transparent); }
.rmm__pdf { min-height: 2rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--plank); font-family: var(--ff-display); font-size: 1rem; font-weight: 700; letter-spacing: .04em; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brass-d) 60%, transparent); text-underline-offset: .25em; }
.rmm__pdf::before { display: none; }
.rmm__pdf:hover { color: var(--burgundy); text-decoration-color: currentColor; }

/* Categories to jump to: a line of small capitals, set apart by dots */
.rmm__jump { justify-content: center; flex-wrap: wrap; gap: .1rem 1.4rem; margin: 1rem auto 0; max-width: 54rem; }
.rmm__jump a { min-height: 2rem; padding: 0 .55rem; border: 0; border-radius: 0; background: none; color: var(--burgundy); font-family: var(--ff-display); font-size: 1rem; font-weight: 600; font-variant: small-caps; letter-spacing: .05em; }
.rmm__jump a:hover { text-decoration: underline; text-decoration-color: var(--brass-d); text-underline-offset: .3em; }
.rmm__hours { text-align: center; font-family: var(--ff-display); color: var(--burgundy); }
.rmm__soldout { border-radius: 0; background: var(--burgundy); color: #f6ecd6; font-family: var(--ff-display); }
.rmm__notes--menu { border-top: 1px solid var(--line); }
.rmm__updated { text-align: center; font-style: italic; }
.rmm__menu-desc { text-align: center; font-style: italic; font-size: 1.25rem; margin-top: 1.8rem; }
/* Categories flow like a printed menu: down the first column, then the second, no holes */
.rmm__cats { display: block; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.rmm__cats > .rmm__cat { break-inside: avoid; margin-bottom: 2.4rem; }
.rmm[data-columns="1"] .rmm__cats, .rmm__cats:has(> .rmm__cat:only-child) { columns: 1; }
@media (max-width: 52rem) { .rmm__cats { columns: 1; } }
.rmm__cat h3 { font-size: 1.7rem; color: var(--burgundy); border-bottom: 0; text-align: center; padding: 0; margin-bottom: .6rem; }
.rmm__cat h3::after { content: ""; display: block; height: 5px; margin: .45rem auto 0; width: 60%; border-top: 1px solid var(--brass-d); border-bottom: 1px solid var(--brass-d); }
.rmm__cat-desc { text-align: center; font-style: italic; font-size: 1.1rem; }
.rmm__item { border-bottom: 1px dotted var(--line); }
.rmm__line h4 { font-family: var(--ff-display); font-size: 1.28rem; font-weight: 700; }
.rmm__dots { border-bottom: 2px dotted #a58d5c; }
.rmm__price { font-family: var(--ff-display); font-size: 1.3rem; color: var(--burgundy); }
.rmm__desc, .rmm__variants, .rmm__allergens { font-size: 1.02rem; font-style: italic; }
.rmm__variants b { font-style: normal; color: var(--burgundy); }
.rmm__tag { margin-left: .45rem; padding: 0; border: 0; border-radius: 0; background: none; color: var(--fir); font-family: var(--ff-body); font-size: .9rem; font-style: italic; font-weight: 600; letter-spacing: .02em; text-transform: none; vertical-align: baseline; }
.rmm__tag::before { content: "❧ "; font-style: normal; color: color-mix(in srgb, var(--fir) 70%, transparent); }
.rmm__notes { background: transparent; border: 0; border-top: 3px double var(--brass-d); border-radius: 0; text-align: center; font-style: italic; margin-top: 2.2rem; padding: 1.2rem .5rem 0; }
.rmm__allergen-toggle { min-height: 2rem; font-family: var(--ff-display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--muted); }
.rmm__allergen-toggle:hover { color: var(--plank); }
.rmm__allergen-toggle::before { width: .95rem; height: .95rem; border-radius: 50%; border: 1px solid var(--brass-d); background-color: transparent; }
.rmm__allergen-switch:checked ~ .rmm__tools .rmm__allergen-toggle { color: var(--burgundy); }
.rmm__allergen-switch:checked ~ .rmm__tools .rmm__allergen-toggle::before { background-color: var(--burgundy); border-color: var(--burgundy); box-shadow: inset 0 0 0 2.5px #f4ecd8; }
.rmm__al { border-radius: 0; color: var(--fir); }
.rmm__al[title]:focus::after { background: var(--plank); color: #f6ecd6; font-family: var(--ff-body); }
/* The site's global "p { margin }" is unlayered and would win over the plugin's spacing */
.rmm :is(.rmm__desc, .rmm__variants, .rmm__allergens) { margin: .2rem 0 0; }
.rmm .rmm__cat-desc { margin: 0 0 .3rem; }
.rmm__allergens { font-style: normal; font-size: .9rem; letter-spacing: .04em; color: var(--fir); }
.rmm__legend { border-top: 3px double var(--brass-d); font-size: .98rem; }
.rmm__legend h3 { font-family: var(--ff-display); font-size: 1.4rem; color: var(--burgundy); text-align: center; }
.rmm__legend dt { color: var(--burgundy); font-family: var(--ff-display); }

/* ---------- Responsive ---------- */
@media (max-width: 52rem) {
  body { font-size: 1.12rem; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .split, .visit { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .split--menu .split__photos { margin-bottom: 2.5rem; }
  .split__photos { padding-top: 2.5rem; }
}
/* The navigation folds into the burger before it runs out of room (it carries the design switcher) */
@media (max-width: 68rem) {
  .topbar__burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: .5rem; }
  .topbar__burger span { width: 26px; height: 2px; background: #f3e4c4; }
  .topbar__links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; background: rgba(32,19,11,.98); border-bottom: 3px double var(--brass-d); }
  .topbar__links a { padding: .8rem 0; border-bottom: 1px solid rgba(196,160,98,.2); }
  .topbar__links .btn { margin-top: .8rem; text-align: center; }
  .topbar__toggle:checked ~ .topbar__links { display: flex; }
  .topbar__since { display: none; }
  .design-switch { margin-top: .9rem; border: 0; gap: .5rem; flex-wrap: wrap; }
  .design-switch__label { display: block; flex-basis: 100%; font-family: var(--ff-display); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
  .topbar .design-switch a { flex: 1; min-height: 2.75rem; border: 1px solid rgba(196,160,98,.55); font-size: .9rem; }
  .topbar .design-switch a + a { border-left: 1px solid rgba(196,160,98,.55); }
}
/* Phones: keep the menu page header compact so the dishes start on the first screen */
@media (max-width: 40rem) {
  .topbar__name { font-size: 1rem; letter-spacing: .1em; white-space: nowrap; }
  .pagehead { padding: 1.6rem 0 1.2rem; }
  .pagehead .eyebrow { font-size: .72rem; letter-spacing: .16em; }
  .pagehead h1 { font-size: clamp(1.9rem, 10vw, 2.8rem); letter-spacing: .04em; overflow-wrap: normal; word-break: keep-all; }
  .pagehead .hero-rule { font-size: 1rem; margin-bottom: 0; }
  .pagehead .hero-rule::before, .pagehead .hero-rule::after { flex-basis: 2.5rem; }
  .rmm { font-size: 1.05rem; padding-bottom: 2.5rem; }
  .rmm__wrap { width: calc(100% - 1rem); padding: 1.4rem .95rem 1.6rem; }
  .rmm__wrap::before { inset: .35rem; }
  .rmm__tabs { gap: 1.3rem; margin-top: .2rem; justify-content: flex-start; margin-inline: -.6rem; padding: .55rem .9rem 0; }
  .rmm__tab { font-size: .86rem; letter-spacing: .1em; padding-bottom: .55rem; }
  .rmm__tab-hours { font-size: .78rem; }
  .rmm__tools { gap: .2rem 1rem; margin-top: .8rem; }
  .rmm__tools { flex-direction: column; }
  .rmm__tools > * + * { padding-left: 0; border-left: 0; }
  .rmm__filters { gap: .7rem; }
  .rmm__chip { font-size: .82rem; }
  .rmm__jump { justify-content: flex-start; flex-wrap: nowrap; margin-inline: -.6rem; padding-inline: .3rem; mask-image: linear-gradient(90deg, transparent, #000 .6rem, #000 calc(100% - 1.6rem), transparent); }
  .rmm__jump a { font-size: .95rem; }
  .rmm__jump { gap: 0; }
  .rmm__jump a + a::before { content: "·"; margin-right: .8rem; color: var(--brass-d); font-weight: 700; }
  .rmm__allergen-toggle { font-size: .86rem; letter-spacing: .02em; line-height: 1.3; }
  .rmm__menu-desc { font-size: 1.05rem; margin-top: 1rem; }
  .rmm__cats { margin-top: 1.2rem; gap: 1.6rem; }
  .rmm__cat h3 { font-size: 1.4rem; }
  .rmm__line h4 { font-size: 1.12rem; }
  .rmm__price { font-size: 1.12rem; }
  .rmm__legend dl { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { & { scroll-behavior: auto; } }


/* ---------- Like an old film: grain, lantern light, snow ---------- */
& body::after { content: ""; position: fixed; inset: -50%; z-index: 200; pointer-events: none; background: url("../img/grain.png"); opacity: .1; animation: hu-grain 1.2s steps(6) infinite; }
.hero-photo { transform: translateY(calc(var(--p, 0) * 22%)) scale(calc(1.06 + var(--p, 0) * .12)); animation: hu-develop 3.2s ease-out both; }
.hero-lantern { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 48% 42% at 50% 56%, rgba(255,176,84,.26), transparent 72%); mix-blend-mode: screen; animation: hu-flicker 5.5s infinite; }
.hero-snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-copy { z-index: 3; }
#kartenkopf { position: relative; overflow: hidden; }
#kartenkopf .pagehead { position: relative; z-index: 3; }

/* The name, written letter by letter, and the rest of the hero after it */
:is(.hero-copy h1, .pagehead h1)[data-split-done] .ch { display: inline-block; opacity: 0; transform: translateY(.3em) rotate(5deg); filter: blur(8px); animation: hu-letter 1s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(.35s + var(--i) * 60ms); }
:is(.hero-copy h1, .pagehead h1)[data-split-done] .ch.sp { display: inline; }
:is(.hero-copy h1, .pagehead h1)[data-split-done] .w { display: inline-block; white-space: nowrap; }
.hero-copy > :not(h1) { animation: hu-up 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > .eyebrow { animation-delay: .1s; }
.hero-copy > .hero-rule { animation-delay: 1.3s; }
.hero-copy > .hero-lead { animation-delay: 1.5s; }
.hero-copy > .hero-actions { animation-delay: 1.7s; }
.hero-copy > .open-badge { animation-delay: 1.9s; }

&.js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
&.js [data-reveal].is-in { opacity: 1; transform: none; }
.facts strong { font-variant-numeric: tabular-nums; }

/* ---------- Chronik: the photo album ---------- */
#chronik { padding: clamp(4rem, 9vw, 7rem) 0; background: linear-gradient(rgba(20,12,6,.62), rgba(20,12,6,.62)), var(--tex-wood) center top / 1100px auto; color: #f3e4c4; border-top: 3px double var(--brass-d); }
.chronik { width: min(100% - 2.5rem, 72rem); margin: 0 auto; }
.chronik__head { text-align: center; margin: 0 auto 3.6rem; }
.chronik__head h2 { color: #f8edd6; }
.chronik .eyebrow { color: var(--brass); }
.chronik__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; }
.chronik__item:nth-child(2) { transition-delay: .12s; }
.chronik__item:nth-child(3) { transition-delay: .24s; }
.chronik__item:nth-child(4) { transition-delay: .36s; }
.album { position: relative; margin: 0; padding: .8rem .8rem 2.6rem; background: #f1e8d3 var(--tex-paper) center / cover; box-shadow: 0 16px 34px rgba(0,0,0,.6); transform: rotate(var(--r, -2deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.chronik__item:nth-child(2) .album { --r: 1.6deg; }
.chronik__item:nth-child(3) .album { --r: -1deg; }
.chronik__item:nth-child(4) .album { --r: 2.2deg; }
.chronik__item:hover .album { transform: rotate(0deg) translateY(-6px) scale(1.03); }
.album__img { position: relative; aspect-ratio: 4 / 5; background-size: cover; background-position: center; filter: sepia(.4) contrast(1.05) brightness(.95); }
/* Black photo corners, as in a real album */
.album__img::before, .album__img::after, .album::before, .album::after { content: ""; position: absolute; z-index: 1; width: 1.4rem; height: 1.4rem; background: #2a1d12; }
.album__img::before { top: -4px; left: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.album__img::after { right: -4px; bottom: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.album::before { top: calc(.8rem - 4px); right: calc(.8rem - 4px); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.album::after { bottom: calc(2.6rem - 4px); left: calc(.8rem - 4px); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.album figcaption { position: absolute; left: .8rem; right: .8rem; bottom: .7rem; text-align: center; font-family: var(--ff-body); font-style: italic; font-size: .95rem; color: var(--muted); }
.album__img--raureif { background-image: url("../img/chronik-spatenstich.webp"); filter: sepia(.3) contrast(1.05); }
.album__img--waldarbeit { background-image: url("../img/chronik-1932.webp"); filter: sepia(.3) contrast(1.05); }
.album__img--schlitten { background-image: url("../img/archiv-1958.webp"); filter: sepia(.3) contrast(1.05); }
.album__img--heute { background-image: url("../img/huette-abendrot.webp"); filter: sepia(.15) contrast(1.05); }
.chronik__year { position: relative; margin: 1.8rem -2.4rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--brass-d); font-family: var(--ff-display); font-weight: 700; font-size: 2.2rem; line-height: 1.1; color: var(--brass); }
.chronik__item:last-child .chronik__year { margin-right: 0; }
.chronik__year::before { content: ""; position: absolute; left: 0; top: -.4rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(20,12,6,.9), 0 0 14px rgba(196,160,98,.8); }
.chronik__item p:last-child { margin: .5rem 0 0; font-size: 1.08rem; line-height: 1.55; color: #e6d4ad; }

@media (max-width: 52rem) {
  .chronik__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.6rem; }
  .chronik__year { margin-right: 0; font-size: 1.8rem; }
}
@media (max-width: 40rem) {
  .chronik__list { grid-template-columns: 1fr; gap: 3rem; }
  .album { max-width: 18rem; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  & body::after { animation: none; }
  .hero-photo, .hero-lantern, .hero-copy > :not(h1) { animation: none; }
  :is(.hero-copy h1, .pagehead h1)[data-split-done] .ch { animation: none; opacity: 1; transform: none; filter: none; }
  &.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

}

@keyframes hu-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); } 60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); } }
@keyframes hu-flicker { 0%, 100% { opacity: 1; } 12% { opacity: .82; } 14% { opacity: .95; } 47% { opacity: .9; } 49% { opacity: .7; } 52% { opacity: .96; } 80% { opacity: .88; } }
@keyframes hu-develop { from { opacity: 0; filter: sepia(1) brightness(1.6) contrast(.6); } to { opacity: 1; filter: none; } }
@keyframes hu-letter { to { opacity: 1; transform: none; filter: none; } }
@keyframes hu-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* ---------- The inn's logo instead of the typed name ---------- */
:root:has(.d-huette) {
  & .topbar__logo { display: block; height: 2.2rem; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
  & .hero-copy h1.hero-logo { margin: 0 auto .4rem; font-size: 1rem; text-shadow: none; }
  & .hero-logo img { display: block; width: min(100%, 34rem); height: auto; margin-inline: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 6px 30px rgba(0,0,0,.7)); }
  @media (max-width: 40rem) {
    & .topbar__logo { height: 1.8rem; }
    & .hero-logo img { width: min(100%, 22rem); }
  }
}

/* ---------- Closures (OpeningHours plugin): a notice under the hours ---------- */
:root:has(.d-huette) {
  & .hours-notice { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--burgundy); background: rgba(122,42,34,.08); font-size: 1.05rem; line-height: 1.45; color: var(--ink); }
  & .hours-notice[hidden] { display: none; }
}

/* ---------- Hüttenkalender (EventCalendar plugin): posters on the wooden board ---------- */
:root:has(.d-huette) {
  & #veranstaltungen {
    --evc-ink: var(--ink); --evc-muted: var(--muted); --evc-line: var(--line);
    --evc-accent: var(--burgundy); --evc-accent-ink: #f6ecd6; --evc-font-display: var(--ff-display);
    --evc-card: #f4efe3; --evc-seal-bg: #fbf7ec; --evc-seal-ink: var(--ink); --evc-radius: 2px;
    padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 3px double var(--brass-d);
    background: linear-gradient(rgba(20,12,6,.62), rgba(20,12,6,.62)), var(--tex-wood) center top / 1200px auto;
    color: #eadfc6; font-family: var(--ff-body);
  }
  & .evc__wrap { width: min(100% - 2.5rem, 70rem); }
  & .evc__head { text-align: center; max-width: 44rem; margin: 0 auto; }
  & .evc__eyebrow { font-family: var(--ff-display); font-size: .95rem; letter-spacing: .28em; color: var(--brass); }
  & .evc__title { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; color: #f6ecd6; }
  & .evc__intro { margin-inline: auto; font-size: 1.2rem; color: #e6d4ad; }
  & :is(.evc-feature, .evc-card) { color: var(--ink); background: #f4efe3 var(--tex-paper) center / cover; border: 1px solid #a98f5c; box-shadow: 0 16px 34px rgba(0,0,0,.55); }
  & .evc-feature { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
  & :is(.evc-feature__media, .evc-card__media) { background: var(--plank); }
  & :is(.evc-feature__media, .evc-card__media) img { filter: sepia(.28) contrast(1.04) brightness(.95); }
  & .evc-feature__media { border-right: 4px solid var(--plank); }
  & .evc-card__media { border-bottom: 4px solid var(--plank); }
  /* the seal: a tear-off leaf, a burgundy band over the day */
  & .evc-seal { padding: 0 0 .4rem; overflow: hidden; border: 1px solid var(--burgundy); border-radius: 0; box-shadow: 0 4px 10px rgba(0,0,0,.45); }
  & .evc-seal__wd { width: 100%; padding: .25rem 0; background: var(--burgundy); color: #f6ecd6; opacity: 1; font-family: var(--ff-display); letter-spacing: .2em; }
  & .evc-seal__day { font-family: var(--ff-display); color: var(--ink); }
  & .evc-seal__month { font-family: var(--ff-display); letter-spacing: .1em; text-transform: uppercase; color: var(--burgundy); }
  & .is-highlight .evc-seal { background: var(--burgundy); }
  & .is-highlight .evc-seal__wd { background: var(--brass); color: var(--walnut); }
  & .is-highlight :is(.evc-seal__day, .evc-seal__month) { color: #f6ecd6; }
  & .evc-feature__kicker { font-family: var(--ff-display); font-size: .85rem; letter-spacing: .22em; }
  & .evc-feature__title { font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ink); }
  & .evc-when { font-style: italic; font-weight: 400; font-size: 1.05rem; }
  & .evc-feature__text { font-size: 1.12rem; line-height: 1.55; }
  & .evc-card__cat { font-family: var(--ff-display); font-size: .8rem; letter-spacing: .2em; }
  & .evc-card__title { font-size: 1.55rem; color: var(--ink); }
  & .evc-card__more summary { font-family: var(--ff-display); font-size: .95rem; letter-spacing: .05em; color: var(--burgundy); }
  & .evc-card__text { font-size: 1.02rem; line-height: 1.5; }
  & .evc-actions { border-top: 1px dotted var(--line); padding-top: .8rem; font-size: 1rem; }
  & .evc-price { font-family: var(--ff-display); font-size: 1.12rem; }
  & .evc-book { border-radius: 0; background: var(--burgundy); color: #f6ecd6; font-family: var(--ff-display); letter-spacing: .08em; }
  & .evc-ics { font-style: italic; color: var(--muted); }
  & .evc__subscribe { text-align: center; margin-top: 2.4rem; font-style: italic; color: #e6d4ad; }
  & .evc__subscribe a:hover { color: var(--brass); }
  & .evc__empty { text-align: center; color: #e6d4ad; }
  @media (max-width: 52rem) {
    & .evc-feature__media { border-right: 0; border-bottom: 4px solid var(--plank); }
  }
}

/* ---------- Partners: enamel signs on the wooden wall ---------- */
:root:has(.d-huette) {
  & #partner { width: 100%; max-width: none; margin: 0; padding: clamp(3rem, 7vw, 5rem) 0; border-radius: 0; box-shadow: none; overflow: visible; border-top: 3px double var(--brass-d); background: linear-gradient(rgba(20,12,6,.55), rgba(20,12,6,.55)), var(--tex-wood) center top / 1200px auto; color: #eadfc6; --article-text: currentColor; --article-font-body: var(--ff-body); --article-font-display: var(--ff-display); }
  & #partner .article__body { max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
  & #partner .article__body > * + * { margin-top: 0; }
  & #partner .article__grid { display: block; }
  & .partners__inner { width: min(100% - 2.5rem, 66rem); margin: 0 auto; text-align: center; }
  & .partners__kicker { font-family: var(--ff-display); font-size: .95rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brass); margin-bottom: .5rem; }
  & .partners__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: #f6ecd6; margin-bottom: 2rem; }
  & .partners__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.6rem; }
  & .partners__list li { display: grid; gap: .8rem; justify-items: center; }
  & .partners__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 9rem; padding: 1.4rem 1.8rem; background: #fbf7ec; border: 1px solid #a98f5c; outline: 1px solid #a98f5c; outline-offset: -7px; box-shadow: 0 12px 26px rgba(0,0,0,.5); box-sizing: border-box; }
  & .partners__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  & .partners__what { font-style: italic; color: #e6d4ad; }
}

/* ---------- PDF menus (RestaurantMenuManager): the tabs wrap instead of running off the paper ---------- */
:root:has(.d-huette) {
  & .rmm--pdf .rmm__tabs { position: static; flex-wrap: wrap; justify-content: center; overflow: visible; row-gap: .4rem; }
  & .rmm--pdf .rmm__tab { white-space: normal; text-align: center; }
}

/* ---------- Gästestimmen (GoogleReviews plugin): notes in the guest book ---------- */
:root:has(.d-huette) {
  & #bewertungen {
    --grv-ink: var(--ink); --grv-muted: var(--muted); --grv-accent: var(--burgundy); --grv-star: var(--brass-d); --grv-font-display: var(--ff-display);
    --grv-card: transparent; --grv-radius: 0;
    padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--parchment) var(--tex-paper) center / cover; border-top: 3px double var(--brass-d);
    font-family: var(--ff-body);
  }
  & .grv__wrap { width: min(100% - 2.5rem, 70rem); }
  & .grv__head { text-align: center; max-width: 44rem; margin: 0 auto; }
  & .grv__eyebrow { font-family: var(--ff-display); font-size: .95rem; letter-spacing: .28em; color: var(--brass-d); }
  & .grv__title { font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.1; color: var(--ink); }
  & .grv__intro { margin-inline: auto; font-style: italic; }
  & .grv__summary { justify-content: center; text-align: center; margin-top: 1.4rem; }
  & .grv__score b { font-size: 3.4rem; color: var(--burgundy); }
  & .grv__links { margin: 0; flex-basis: 100%; justify-content: center; }
  & .grv__links a { font-family: var(--ff-display); letter-spacing: .05em; color: var(--burgundy); }
  & .grv__list { gap: 1.6rem; }
  & .grv__card { position: relative; padding: 1.6rem 1.5rem 1.4rem; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -7px; background: rgba(255,250,238,.5); box-shadow: none; }
  & .grv__card::before { content: "“"; position: absolute; top: -.2rem; right: 1rem; font: 700 4.5rem/1 var(--ff-display); color: color-mix(in srgb, var(--burgundy) 25%, transparent); }
  & .grv__text { font-style: italic; font-size: 1.1rem; }
  & .grv__who b { font-family: var(--ff-display); font-size: 1.1rem; }
  & .grv__avatar { filter: sepia(.35); }
  & .grv__avatar.is-initial { background: var(--burgundy); color: #f6ecd6; font-family: var(--ff-display); }
  & .grv__more { color: var(--burgundy); font-style: italic; }
  & .grv__attribution { text-align: center; font-style: italic; }
}

/* ---------- Das sind wir: prints pinned beside the text ---------- */
:root:has(.d-huette) {
  & #team { width: 100%; max-width: none; margin: 0; padding: clamp(3.5rem, 8vw, 6rem) 0; border-radius: 0; box-shadow: none; overflow: visible; background: var(--parchment) var(--tex-paper) center / cover; border-top: 3px double var(--brass-d); --article-text: currentColor; --article-font-body: var(--ff-body); --article-font-display: var(--ff-display); }
  & #team .article__body { max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
  & #team .article__body > * + * { margin-top: 0; }
  & #team .article__grid { display: block; }
  & .team { width: min(100% - 2.5rem, 70rem); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  & .team__text p:last-child { font-size: 1.15rem; line-height: 1.65; color: var(--muted); }
  & .team__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  & .team__photos figure { margin: 0; background: #f4efe3; padding: .5rem .5rem 0; box-shadow: 0 10px 24px rgba(30,16,6,.45); }
  & #team .team__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  & .team__photos figcaption { padding: .4rem .2rem .55rem; text-align: center; font-style: italic; font-size: .95rem; color: var(--muted); }
  & .team__main { grid-column: 1 / -1; transform: rotate(-1deg); }
  & #team .team__main img { aspect-ratio: 16 / 9; object-position: center 30%; }
  & .team__pic:nth-child(2) { transform: rotate(1.4deg); }
  & .team__pic:nth-child(3) { transform: rotate(-1.2deg); }
  & .team__pic:nth-child(4) { transform: rotate(.8deg); }
  @media (max-width: 52rem) {
    & .team { grid-template-columns: 1fr; }
    & .team__photos { grid-template-columns: repeat(2, 1fr); }

  }
}
:root:has(.d-huette) {
  /* The circle photo is upright: shown whole, not cut to the 4:3 of the others. */
  & #team .team__pic:nth-child(4) img { aspect-ratio: 3 / 4; }
}
:root:has(.d-huette) {
  & .team__photos { align-items: start; }
  @media (max-width: 52rem) { & #team .team__pic:nth-child(4) { grid-column: 1 / -1; justify-self: center; width: min(100%, 20rem); } }
}

/* Consent banner (files/js/consent.js): a small card in the corner, never covering the page.
   Both answers look alike, so neither is pushed. Colours come from the active design. */
.consent {
  --c-bg: var(--walnut, #20130b); --c-fg: var(--parchment, #efe3c8); --c-accent: var(--brass, #c4a062);
  position: fixed; z-index: 90; left: 1rem; bottom: 1rem; width: min(22rem, calc(100vw - 2rem)); box-sizing: border-box;
  padding: .9rem 1rem; border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent); border-radius: .5rem;
  background: var(--c-bg); color: var(--c-fg); box-shadow: 0 .6rem 2rem rgb(0 0 0 / .35);
  font: 400 .9rem/1.45 var(--ff-body, var(--sans, system-ui, sans-serif)); letter-spacing: normal;
  & p { margin: 0 0 .7rem; }
  & a { color: var(--c-accent); }
  & .consent__actions { display: flex; gap: .5rem; }
  & button { flex: 1; padding: .45rem .6rem; border: 1px solid var(--c-accent); border-radius: .3rem; background: transparent; color: var(--c-fg); font: inherit; font-weight: 600; cursor: pointer; }
  & button:hover, & button:focus-visible { background: var(--c-accent); color: var(--c-bg); outline: none; }
  &[hidden] { display: none; }
}
:root:has(.d-winter) .consent { --c-bg: var(--navy); --c-fg: var(--ice); --c-accent: var(--amber); font-family: var(--sans); }
:root:has(.d-wald) .consent { --c-bg: var(--deep); --c-fg: var(--cream); --c-accent: var(--gold); font-family: var(--sans); }