/* ============================================================
   HARRY'S APPARTEMENT – KOMPONENTEN & SEITEN
   Nutzt ausschließlich Variablen aus tokens.css.
   Aufbau: 1 Basis · 2 Bausteine · 3 Kopf/Fuß · 4 Startseite ·
           5 Unterseiten · 6 Overlays · 7 Rechtliches · 8 Motion/Print
   ============================================================ */

/* ───────────────────────── 1 BASIS ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .9em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: .015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.05; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-5) 0; }
:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-accent); }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(var(--narrow) + 2 * var(--gutter)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--c-ink); color: var(--c-cream); padding: 10px 16px; border-radius: var(--radius-s); transition: top var(--dur-1); }
.skip-link:focus { top: 12px; }

/* Eyebrow mit kleinem Stern (Familien-Klammer) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
  display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.eyebrow--light { color: var(--accent-dark); }
.accent { color: var(--accent); }
.accent-light { color: var(--accent-dark); }
.lead { font-size: var(--fs-lead); color: var(--fg-muted); max-width: 48ch; }
.hint { font-size: .9rem; color: var(--fg-muted); margin-top: var(--space-5); }
.center-row, .btnrow { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.center-row { justify-content: center; margin-top: var(--space-7); }
.btnrow--center { justify-content: center; }
.prose p { max-width: 68ch; }

section { position: relative; }
.section { padding: var(--section-pad) 0; }
.section--tight { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section-head {
  display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-5); margin-bottom: clamp(28px, 4vw, 52px);
}
.section-head__lead { max-width: 42ch; color: var(--fg-muted); margin: 0; }

/* ───────────────────────── 2 BAUSTEINE ───────────────────────── */
.icon { flex: none; }

.btn {
  --_bg: var(--accent); --_fg: var(--on-accent); --_bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .78em 1.25em;
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  color: var(--_fg); background: var(--_bg);
  border: 2px solid var(--_bd); border-radius: var(--radius-s);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.btn:hover { --_bg: var(--accent-hover); --_bd: var(--accent-hover); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-ink); }
.btn--lg { font-size: 1.3rem; padding: .82em 1.35em; }
.btn--sm { font-size: 1rem; padding: .58em .9em; box-shadow: 2px 2px 0 var(--c-ink); }
.btn--block { width: 100%; }
.btn--ghost { --_bg: transparent; --_fg: var(--fg); --_bd: var(--fg); box-shadow: none; }
.btn--ghost:hover { --_bg: var(--fg); --_fg: var(--bg); --_bd: var(--fg); }
.btn--ghost-light { --_bg: transparent; --_fg: var(--c-cream); --_bd: color-mix(in oklab, var(--c-cream) 65%, transparent); box-shadow: none; }
.btn--ghost-light:hover { --_bg: color-mix(in oklab, var(--c-cream) 12%, transparent); --_fg: var(--c-cream); --_bd: var(--c-cream); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.linklike:hover { color: var(--accent); }
.iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; background: transparent; cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.iconbtn:hover { background: var(--c-cream); color: var(--c-ink); }

.note {
  display: flex; gap: .8em; align-items: flex-start;
  padding: 1em 1.2em; margin: var(--space-6) 0 0;
  background: var(--bg-alt); border-left: 3px solid var(--accent); border-radius: var(--radius-s);
  font-size: .95rem;
}
.note .icon { color: var(--accent); margin-top: .2em; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.ticks li { display: flex; gap: .6em; align-items: flex-start; }
.ticks .icon { color: var(--accent); margin-top: .3em; }

.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em 1.1em; }
.facts li { display: inline-flex; align-items: center; gap: .45em; }
.facts .icon { color: var(--accent); }
.facts--compact { font-size: .9rem; color: var(--fg-muted); }

/* Foto-Platzhalter (bis die echten Bilder da sind) */
.ph {
  position: relative; display: grid; place-items: center; width: 100%; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--c-night) 92%, var(--c-ink)) 0%, var(--c-ink) 100%);
  color: var(--c-cream); border-radius: inherit;
}
.ph::before {
  content: ""; position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 22%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 38% 12%, var(--c-cream), transparent),
    radial-gradient(1.3px 1.3px at 64% 26%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 82% 14%, var(--c-cream), transparent);
}
.ph__ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%; fill: color-mix(in oklab, var(--c-gold) 70%, var(--c-ink)); opacity: .5; }
.ph__label {
  position: relative; max-width: 80%; text-align: center;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
  padding: .45em .9em; border: 1px dashed color-mix(in oklab, var(--c-cream) 45%, transparent); border-radius: var(--radius-s);
  background: color-mix(in oklab, var(--c-night) 60%, transparent);
}

/* Externe Links (Tourismusverband, Ski Arlberg …) */
.xlinks__h { font-size: 1.4rem; margin-bottom: var(--space-3); }
.xlinks__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.xlink { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: .85em 1em; background: var(--surface); border: var(--border); border-radius: var(--radius-m); text-decoration: none; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.xlink:hover { border-color: var(--c-ink); transform: translateX(3px); }
.xlink__text { display: grid; gap: 2px; min-width: 0; }
.xlink__text b { font-weight: 700; }
.xlink__text small { color: var(--fg-muted); font-size: .85rem; }
.xlink__host { display: inline-flex; align-items: center; gap: .35em; flex: none; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--accent-text); }
@media (max-width: 520px) { .xlink { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* Scroll-Reveal (JS setzt .is-in) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ───────────────────────── 3 KOPF & FUSS ───────────────────────── */
.topbar { background: var(--c-night); color: var(--c-cream); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
.topbar__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 34px; }
.topbar__place { display: inline-flex; align-items: center; gap: .5em; opacity: .75; }
.topbar__place .icon { color: var(--c-gold); }
.topbar__link { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; opacity: .85; }
.topbar__mail { margin-left: auto; }
.topbar__link:hover { opacity: 1; color: var(--c-gold); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-2);
}
/* Blur liegt auf einem Pseudo-Element: backdrop-filter direkt am Header würde ihn zum
   Bezugsrahmen für das position:fixed Mobile-Menü machen (Menü wäre nur so hoch wie der Header). */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--c-paper) 94%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(0,0,0,.35); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }
.brand__logo { width: 74px; height: auto; transition: transform var(--dur-2) var(--ease-out); }
.brand:hover .brand__logo { transform: translateY(-2px); }

.nav { display: flex; align-items: center; gap: var(--space-5); }
.nav__list { display: flex; gap: clamp(12px, 1.6vw, 24px); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative; text-decoration: none;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 0;
}
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__extra { display: flex; align-items: center; gap: var(--space-3); }
.lang { display: inline-flex; border: 1.5px solid var(--c-ink); border-radius: var(--radius-pill); padding: 2px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; }
.lang__item { padding: 4px 9px; border-radius: var(--radius-pill); text-decoration: none; }
.lang__item.is-active { background: var(--c-ink); color: var(--c-cream); }
a.lang__item:hover { color: var(--accent); }

.nav-toggle { display: none; width: 46px; height: 46px; border: 2px solid var(--c-ink); border-radius: var(--radius-s); background: var(--c-paper); cursor: pointer; }
.nav-toggle__bars { display: grid; gap: 5px; width: 20px; margin: auto; }
.nav-toggle__bars span { height: 2px; background: var(--c-ink); border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
  :root { --header-h: 66px; }
  .brand__logo { width: 60px; }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; z-index: 59;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: var(--space-6);
    padding: var(--space-6) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
    background: var(--c-night); color: var(--c-cream);
    background-image: radial-gradient(circle at 85% 95%, color-mix(in oklab, var(--c-gold) 18%, transparent), transparent 45%);
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
    overflow-y: auto;
  }
  .nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path var(--dur-2) var(--ease-out); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list li { border-bottom: 1px solid color-mix(in oklab, var(--c-cream) 12%, transparent); }
  .nav__link { display: block; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.8rem); letter-spacing: .02em; padding: .32em 0; }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--c-gold); }
  .nav__extra { justify-content: space-between; }
  .lang { border-color: var(--c-cream); }
  .lang__item.is-active { background: var(--c-cream); color: var(--c-ink); }
  .nav__book { box-shadow: none; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  .topbar__mail { display: none; }
  .topbar__link:last-child { margin-left: auto; }
  .topbar__place { display: none; }
}

/* Footer: Nachthimmel + Berggrat – Brücke zu Harry's Burger */
.site-footer { position: relative; background: var(--c-night); color: var(--c-cream); padding: var(--space-8) 0 var(--space-6); margin-top: 90px; }
.site-footer__ridge { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: 90px; fill: var(--c-night); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--space-6); }
.site-footer__brand img { width: 150px; }
.site-footer__brand p { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-top: var(--space-4); }
.site-footer__h { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 400; opacity: .55; margin: 0 0 var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-size: .92rem; }
.site-footer address { font-size: .92rem; line-height: 1.8; }
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer .linklike:hover { color: var(--c-gold); }
.site-footer .linklike { font-size: .92rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid color-mix(in oklab, var(--c-cream) 12%, transparent); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__bottom > span { opacity: .6; }
.site-footer__family { display: inline-flex; align-items: center; gap: .6em; color: var(--c-cream); }
.star { display: inline-block; width: 14px; height: 14px; background: var(--c-red); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-5); }
  .site-footer__brand img { width: 110px; }
  .site-footer__brand p { margin: 0; }
}
@media (max-width: 1080px) { .site-footer { padding-bottom: 110px; } }

/* Mobile: fixe Buchungsleiste */
.bookbar { display: none; }
@media (max-width: 1080px) {
  .bookbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; gap: var(--space-3); align-items: center;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--c-paper) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .bookbar.is-hidden { transform: translateY(110%); }
  .bookbar__call { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--c-ink); color: var(--c-ink); }
  .bookbar__btn { flex: 1; }
  .page-booking .bookbar { display: none; }
}

/* ───────────────────────── 4 STARTSEITE ───────────────────────── */
/* HERO (Nachthimmel – wie das Hausfoto) */
.hero {
  color: var(--c-cream);
  background: linear-gradient(180deg, var(--c-night) 0%, var(--c-ink-deep) 100%);
  padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.hero__sky, .burger__sky {
  position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 16%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 22% 38%, var(--c-cream), transparent),
    radial-gradient(1.5px 1.5px at 36% 10%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 48% 30%, var(--c-cream), transparent),
    radial-gradient(1.2px 1.2px at 58% 8%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 72% 22%, var(--c-cream), transparent),
    radial-gradient(1.3px 1.3px at 88% 12%, var(--c-cream), transparent),
    radial-gradient(1px 1px at 94% 40%, var(--c-cream), transparent),
    radial-gradient(1.1px 1.1px at 14% 70%, var(--c-cream), transparent);
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 50% { opacity: .45; } }
.hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__title { font-size: var(--fs-hero); line-height: .9; margin: 0 0 var(--space-5); }
.hero__line { display: block; }
.js .hero__line { opacity: 0; transform: translateY(.3em); animation: rise .9s var(--ease-out) forwards; }
.js .hero__line:nth-child(2) { animation-delay: .12s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__lead { font-size: var(--fs-lead); max-width: 44ch; color: color-mix(in oklab, var(--c-cream) 84%, transparent); margin-bottom: var(--space-6); }
.hero .btn { box-shadow: 3px 3px 0 #000; }
.hero__art { margin: 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-cream) 18%, transparent), 0 40px 80px -30px #000; }
.hero__art img, .hero__art .ph { width: 100%; aspect-ratio: 1080 / 768; object-fit: cover; }
.quick { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(36px, 5vw, 64px) 0 0; border-top: 1px solid color-mix(in oklab, var(--c-cream) 16%, transparent); }
.quick > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: var(--space-5) var(--space-4) 0 0; }
.quick > div + div { padding-left: var(--space-5); border-left: 1px solid color-mix(in oklab, var(--c-cream) 16%, transparent); }
.quick dd { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: .9; color: var(--c-gold); font-variant-numeric: tabular-nums; }
.quick dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero .btnrow .btn { flex: 1 1 auto; }
  .quick { grid-template-columns: 1fr 1fr; }
  .quick > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .quick > div:nth-child(n+3) { border-top: 1px solid color-mix(in oklab, var(--c-cream) 16%, transparent); margin-top: var(--space-5); }
}

/* WILLKOMMEN */
.intro { padding: var(--section-pad) 0; }
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: end; }
.intro__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.1; text-transform: uppercase; margin-top: var(--space-5); }
.intro__sign { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-top: var(--space-4); }
@media (max-width: 760px) { .intro__grid { grid-template-columns: 1fr; } }

/* APPARTEMENT-KARTEN */
.apts { padding: 0 0 var(--section-pad); }
.apts--page { padding-top: var(--space-7); }
.acards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.acards--two { grid-template-columns: repeat(2, 1fr); }
.acard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
.acard__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--c-ink); }
.acard__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-alt); }
.acard__img img, .acard__img .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.acard__link:hover .acard__img img { transform: scale(1.04); }
.acard__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.acard__eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.acard__title { font-size: 2.3rem; line-height: .95; }
.acard__tagline { color: var(--fg-muted); font-size: .95rem; margin: 0 0 var(--space-2); }
.acard__price { font-size: .9rem; margin: var(--space-2) 0 0; }
.acard__price b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--accent); }
.acard__more { margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.acard__link:hover .acard__more .icon, .season--link:hover .acard__more .icon { transform: translateX(4px); }
.acard__more .icon { transition: transform var(--dur-2) var(--ease-out); }
@media (max-width: 1100px) { .acards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .acards, .acards--two { grid-template-columns: 1fr; } }

/* ANGEBOTE (Teaser) */
.offers-teaser { padding: 0 0 var(--section-pad); }
.ocards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.ocard a { display: block; height: 100%; padding: var(--space-5); text-decoration: none; background: var(--bg-alt); border-radius: var(--radius-m); border-top: 4px solid var(--accent); transition: background var(--dur-2); }
.ocard a:hover { background: color-mix(in oklab, var(--c-gold) 16%, var(--bg-alt)); }
.ocard h3 { margin: var(--space-3) 0 var(--space-2); }
.ocard__season { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.ocard__period { font-size: .9rem; color: var(--fg-muted); margin: 0; }
.ocard__price { font-weight: 700; margin-top: var(--space-2); }

/* WINTER & SOMMER */
.seasons { padding: var(--section-pad) 0; background: var(--bg-alt); }
.seasons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.season { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); text-decoration: none; }
.season__img { aspect-ratio: 16 / 9; overflow: hidden; }
.season__img img, .season__img .ph { width: 100%; height: 100%; object-fit: cover; }
.season__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); flex: 1; }
.season__body h3, .season__body h2 { display: flex; align-items: center; gap: .4em; font-size: 2.3rem; }
.season__body h3 .icon, .season__body h2 .icon { color: var(--accent); }
.season__body .btn { align-self: flex-start; margin-top: auto; }
.season--link { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.season--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
@media (max-width: 880px) { .seasons__grid { grid-template-columns: 1fr; } }

/* DIREKT BUCHEN */
.steps-band { padding: var(--section-pad) 0; background: var(--c-ink); color: var(--c-cream); }
.steps-band .section-head__lead { color: color-mix(in oklab, var(--c-cream) 80%, transparent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step__n { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--c-gold); color: var(--c-gold); font-family: var(--font-display); font-size: 1.6rem; }
.step b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; display: block; line-height: 1.1; margin-bottom: 4px; }
.step p { margin: 0; font-size: .95rem; opacity: .85; }
.steps-band__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid color-mix(in oklab, var(--c-cream) 14%, transparent); }
.steps-band__foot p { margin: 0; font-size: .9rem; opacity: .8; max-width: 60ch; }
.steps-band__foot a:not(.btn) { color: var(--c-gold); }
.steps-band .btn { box-shadow: 3px 3px 0 #000; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* GÄSTESTIMMEN */
.reviews { padding: var(--section-pad) 0; }
.quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.quote { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.quote > .icon { color: var(--c-gold); margin-bottom: var(--space-3); }
.quote blockquote { margin: 0; font-size: 1.05rem; }
.quote__by { margin-top: var(--space-4); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.quote__by span { color: var(--fg-muted); }

/* HARRY'S BURGER (Querverweis) */
.burger { padding: var(--section-pad) 0; color: var(--c-cream); background: linear-gradient(180deg, var(--c-ink-deep) 0%, var(--c-night) 100%); overflow: hidden; }
.burger .lead { color: color-mix(in oklab, var(--c-cream) 84%, transparent); margin: var(--space-5) 0 var(--space-6); }
.burger__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.burger__art { position: relative; margin: 0; }
.burger__art > img:not(.burger__logo), .burger__art > .ph { width: 100%; aspect-ratio: 1080 / 627; object-fit: cover; border-radius: var(--radius-m); box-shadow: 0 40px 80px -30px #000; }
.burger__logo { position: absolute; right: -14px; bottom: -22px; width: clamp(84px, 10vw, 120px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.burger .btn { box-shadow: 3px 3px 0 #000; }
@media (max-width: 880px) { .burger__grid { grid-template-columns: 1fr; } .burger__logo { right: 8px; } }


/* ANREISE / KARTE */
.find { padding: var(--section-pad) 0; background: var(--bg-alt); }
.page-home .find { padding-bottom: calc(var(--section-pad) + 30px); }
.find__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.find__info { display: grid; gap: var(--space-6); }
.find__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: 0; }
.find__facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-1); }
.find__facts dd { margin: 0; font-size: .95rem; }
.find__facts a { font-weight: 600; }
@media (max-width: 880px) { .find__grid { grid-template-columns: 1fr; } }

.map { position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--c-ink); min-height: 360px; box-shadow: var(--shadow-1); }
.map iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
.valley { margin: 0; color: var(--c-cream); }
.valley__svg { width: 100%; height: auto; }
.valley__stars circle { fill: var(--c-cream); animation: twinkle 3s ease-in-out infinite; }
.valley__stars circle:nth-child(3n) { animation-delay: 1s; }
.valley__stars circle:nth-child(3n+1) { animation-delay: 2s; }
.valley__far { fill: color-mix(in oklab, var(--c-cream) 14%, var(--c-ink)); }
.valley__snow { fill: var(--c-cream); opacity: .8; }
.valley__near { fill: var(--c-ink-deep); }
.valley__road { stroke: var(--c-gold); stroke-width: 3; stroke-dasharray: 8 7; animation: dash 30s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -600; } }
.valley__places circle { fill: var(--c-cream); }
.valley__places text, .valley__edge { fill: var(--c-cream); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
.valley__edge { opacity: .55; font-size: 11px; }
.valley__harry polygon { fill: var(--c-red); stroke: var(--c-cream); stroke-width: 2; }
.valley__harry text { fill: var(--c-gold); font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; }
.valley__pulse { fill: var(--c-red); opacity: .5; transform-box: fill-box; transform-origin: center; animation: vpulse 2.4s ease-out infinite; }
@keyframes vpulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(2.4); opacity: 0; } }
.map__consent { padding: var(--space-4) var(--space-5) var(--space-5); background: var(--c-ink); font-size: .85rem; }
.map__consent p { opacity: .85; }
.map__consent a { color: var(--c-gold); }
.map__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.map__actions .btn { box-shadow: none; }

/* ───────────────────────── 5 UNTERSEITEN ───────────────────────── */
.pagehead { background: var(--bg-alt); padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5.5vw, 72px); border-bottom: 1px solid var(--line); }
.pagehead__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.pagehead--art .pagehead__grid { grid-template-columns: 1.1fr .9fr; }
.pagehead h1 { max-width: 20ch; }
.pagehead .lead { margin: var(--space-5) 0 0; }
.pagehead .btnrow { margin-top: var(--space-6); }
.pagehead__art { margin: 0; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-2); }
.pagehead__art img, .pagehead__art .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crumbs { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-5); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
@media (max-width: 880px) { .pagehead--art .pagehead__grid { grid-template-columns: 1fr; } }

/* Vergleichstabelle */
.cmp__title { margin: var(--space-8) 0 var(--space-4); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.cmp th, .cmp td { padding: .8em 1em; text-align: left; border-bottom: 1px solid var(--line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: .03em; background: var(--bg-alt); }
.cmp thead a { text-decoration: none; color: var(--accent); }
.cmp tbody th { font-family: var(--font-mono); font-weight: 400; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.cmp td .icon { color: var(--c-ok); }
.cmp--rows { min-width: 0; }
.cmp--rows tbody th { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .03em; color: var(--fg); }
.cmp--rows tbody th a { text-decoration: none; color: var(--accent); }

/* Appartement-Detail */
.aptpage { padding: var(--space-7) 0 var(--section-pad); }
.facts--bar { gap: 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); margin-bottom: var(--space-6); }
.facts--bar li { flex: 1 1 150px; gap: .7em; padding: var(--space-4) var(--space-5); border-right: 1px solid var(--line); }
.facts--bar li:last-child { border-right: 0; }
.facts--bar span { display: grid; font-weight: 600; line-height: 1.3; }
.facts--bar small { font-family: var(--font-mono); font-weight: 400; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
@media (max-width: 700px) { .facts--bar li { flex-basis: 45%; border-bottom: 1px solid var(--line); } }

.agallery { list-style: none; margin: 0 0 var(--space-7); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 13vw, 190px); gap: var(--space-2); }
.agallery__item { overflow: hidden; border-radius: var(--radius-s); background: var(--bg-alt); }
.agallery__item--main { grid-column: span 2; grid-row: span 2; }
.agallery__item--d2 { grid-column: span 2; }
.agallery__item--d4 { grid-column: span 4; }
.agallery__item a { display: block; height: 100%; cursor: zoom-in; }
.agallery__item img, .agallery__item .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; transition: transform 1.2s var(--ease-out); }
.agallery__item a:hover img { transform: scale(1.04); }
.agallery__item .ph__label { font-size: .62rem; }
@media (max-width: 760px) {
  .agallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 32vw; }
  .agallery__item--main { grid-column: 1 / -1; grid-row: span 2; }
  .agallery__item--d2, .agallery__item--d4 { grid-column: auto; }
  .agallery__item--m2 { grid-column: 1 / -1; }
}

.aptpage__grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.aptpage__main > .h3 { margin: var(--space-7) 0 var(--space-4); }
.aptpage__side { position: sticky; top: calc(var(--header-h) + 20px); }
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: 0; }
.rooms > div { padding: var(--space-4) var(--space-5); background: var(--bg-alt); border-radius: var(--radius-m); }
.rooms dt { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; }
.rooms dd { margin: 4px 0 0; font-size: .95rem; color: var(--fg-muted); }
.amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7em var(--space-5); }
.amenities li { display: flex; align-items: center; gap: .6em; }
.amenities .icon { color: var(--accent); }
@media (max-width: 960px) { .aptpage__grid { grid-template-columns: 1fr; } .aptpage__side { position: static; } }

.bookbox { padding: var(--space-6); background: var(--surface); border: var(--border-bold); border-radius: var(--radius-m); box-shadow: 6px 6px 0 var(--c-ink); display: grid; gap: var(--space-3); }
.bookbox__eyebrow { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin: 0; }
.bookbox__title { font-size: 2rem; }
.bookbox p { font-size: .92rem; color: var(--fg-muted); margin: 0; }
.bookbox__facts { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: .45em; font-size: .88rem; }
.bookbox__facts li { display: flex; align-items: center; gap: .55em; }
.bookbox__facts .icon { color: var(--accent); }

.more-apts { padding: 0 0 var(--section-pad); }
.more-apts .h3 { margin-bottom: var(--space-5); }

/* Preise & Konditionen */
/* Preisliste (aus easybooking, serverseitig) */
.pricelists { display: grid; gap: var(--space-6); }
.pricelist { scroll-margin-top: 110px; }
.pricelist__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.pricelist__head h3 { font-size: 1.6rem; }
.pricelist__head h3 a { text-decoration: none; color: var(--accent); }
.pricelist__head span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.pricelist__table { min-width: 0; }
.pricelist__table thead th { font-size: 1.1rem; }
.pricelist__table td, .pricelist__table thead th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricelist__table tbody th { font-family: var(--font-body, inherit); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--fg); }
.pricelist__table tr.is-now { background: var(--bg-alt); }
.pricelist__table tr.is-now th { font-weight: 600; }
.pricelist__now { display: inline-block; margin-left: .4em; padding: .1em .5em; border-radius: 99px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
.pricelist__cta { margin-top: var(--space-3); }
@media (max-width: 520px) {
  .hide-sm { display: none; }
  .cmp--rows th, .cmp--rows td { padding: .7em .55em; }
  .cmp--rows td { font-size: .85rem; }
  .pricelist__table th, .pricelist__table td { padding: .65em .55em; }
  .pricelist__table tbody th { font-size: .8rem; }
  .pricelist__now { display: none; }
}
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-7); }
.terms__card { padding: var(--space-6); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); }
.terms__card--wide { grid-column: 1 / -1; order: -1; }
.terms__card > .h3 { display: flex; align-items: center; gap: .45em; margin-bottom: var(--space-4); }
.terms__card > .h3 .icon { color: var(--accent); }
.terms__seasons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.terms__season { display: flex; align-items: center; gap: .45em; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; margin-bottom: var(--space-3); }
.terms__season .icon { color: var(--accent); }
@media (max-width: 760px) { .terms, .terms__seasons { grid-template-columns: 1fr; } }

/* Angebote */
.offers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.offer { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); overflow: hidden; }
.offer__img img, .offer__img .ph { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.offer__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.offer__body .btn { align-self: flex-start; margin-top: auto; }
.offer__period { display: inline-flex; align-items: center; gap: .5em; font-size: .92rem; color: var(--fg-muted); margin: 0; }
.offer__price { font-family: var(--font-display); font-size: 1.7rem; color: var(--accent); margin: 0; }
@media (max-width: 880px) { .offer { grid-template-columns: 1fr; } .offer__img img, .offer__img .ph { min-height: 0; aspect-ratio: 16 / 9; } }

.empty-state { text-align: center; padding: var(--space-7) var(--space-5); background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); display: grid; justify-items: center; gap: var(--space-3); }
.empty-state > .icon { color: var(--accent); }
.empty-state p { max-width: 58ch; color: var(--fg-muted); }
.empty-state .btnrow { margin-top: var(--space-3); }
.region-offers { margin-top: var(--space-8); max-width: 760px; }
.region-offers > .h3 { margin-bottom: var(--space-2); }
.region-offers > p { color: var(--fg-muted); margin-bottom: var(--space-4); }

/* Winter / Sommer */
.blocks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.block { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.block__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-night); color: var(--c-gold); }
.block__title { font-size: 1.8rem; }
.block p { color: var(--fg-muted); font-size: .96rem; }
.block__link { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--accent-text); text-decoration: none; }
.block__link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .blocks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blocks { grid-template-columns: 1fr; } }
.season-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }

.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-8); padding: var(--space-6); background: var(--c-night); color: var(--c-cream); border-radius: var(--radius-m); }
.cta-strip p { opacity: .8; margin-top: var(--space-2); }
.cta-strip .btn { box-shadow: 3px 3px 0 #000; }
.cta-strip .btn--ghost { --_fg: var(--c-cream); --_bd: color-mix(in oklab, var(--c-cream) 65%, transparent); }
.cta-strip .btn--ghost:hover { --_bg: var(--c-cream); --_fg: var(--c-ink); --_bd: var(--c-cream); }

/* Buchen / Kontakt */
.booking__grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.booking__side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--space-4); }
@media (max-width: 1000px) { .booking__grid { grid-template-columns: 1fr; } .booking__side { position: static; } }
.sidecard { padding: var(--space-5); background: var(--bg-alt); border-radius: var(--radius-m); font-size: .93rem; }
.sidecard .h3 { margin-bottom: var(--space-4); }
.sidecard .ticks { font-size: .9rem; }
.sidecard .btn { margin-top: var(--space-3); }
.sidecard__contact { margin-top: var(--space-4); line-height: 2; }
.sidecard__contact .icon { display: inline; vertical-align: -2px; color: var(--accent); }
.sideapts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sideapts a { display: flex; justify-content: space-between; gap: var(--space-3); padding: .7em 1em; border: 1px solid var(--line-strong); border-radius: var(--radius-s); text-decoration: none; font-size: .88rem; }
.sideapts a:hover { border-color: var(--c-ink); }
.sideapts b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }
.sideapts span { color: var(--fg-muted); align-self: center; }

.embed { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); overflow: hidden; container-type: inline-size; }
.embed iframe { display: block; width: 100%; height: var(--h, 1100px); border: 0; transition: height .25s var(--ease-out); }
.embed__note { display: flex; align-items: flex-start; gap: .5em; font-size: .8rem; color: var(--fg-muted); margin-top: var(--space-3); }
.embed__note > svg { flex: none; margin-top: .2em; }
/* Schmale Formulare stapeln ihre Felder → höher (gemessen am easybooking-Anfrageformular) */
@container (max-width: 880px) { .embed iframe { height: calc(var(--h, 1100px) * 1.3); } }

.contacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.contact { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-m); }
.contact > .icon { color: var(--accent); }
.contact span { display: grid; font-weight: 600; overflow-wrap: anywhere; }
.contact small { font-family: var(--font-mono); font-weight: 400; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.contact a { text-decoration: none; }
.contact a:hover { color: var(--accent); }
@media (max-width: 880px) { .contacts { grid-template-columns: 1fr; } }
.enquiry { background: var(--bg-alt); }

/* ───────────────────────── 6 OVERLAYS ───────────────────────── */
.popup { --_bg: var(--c-ink); --_fg: var(--c-cream); --_ac: var(--c-gold); border: 0; padding: 0; background: var(--_bg); color: var(--_fg); border-radius: var(--radius-l); max-width: min(520px, calc(100vw - 28px)); width: 100%; box-shadow: var(--shadow-3); overflow: hidden; }
.popup[data-theme="red"] { --_bg: var(--c-red); --_fg: var(--c-white); --_ac: var(--c-gold); }
.popup[data-theme="cream"] { --_bg: var(--c-cream); --_fg: var(--c-ink); --_ac: var(--c-red-text); border: var(--border-bold); }
.popup::backdrop { background: rgba(22,27,29,.6); backdrop-filter: blur(3px); }
.popup[open] { animation: pop .45s var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.popup__img { width: 100%; max-height: 46vh; object-fit: cover; }
.popup__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.popup__eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--_ac); margin: 0 0 var(--space-2); }
.popup__title { font-size: clamp(2rem, 6vw, 2.8rem); line-height: .95; margin-bottom: var(--space-3); }
.popup__text { font-size: 1rem; opacity: .92; }
.popup__cta { margin-top: var(--space-5); }
.popup[data-theme="red"] .btn { --_bg: var(--c-cream); --_fg: var(--c-ink); --_bd: var(--c-cream); }
.popup[data-theme="ink"] .btn, .popup[data-theme="red"] .btn { box-shadow: 3px 3px 0 var(--c-night); }
.popup__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in oklab, var(--c-night) 55%, transparent); color: var(--c-white); display: grid; place-items: center; cursor: pointer; }
.popup__close:hover { background: var(--c-night); }
.popup--banner { position: fixed; inset: auto auto calc(16px + env(safe-area-inset-bottom)) 16px; margin: 0; max-width: min(400px, calc(100vw - 32px)); z-index: 70; border-radius: var(--radius-m); }
.popup--banner .popup__img { max-height: 160px; }
.popup--banner .popup__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.popup--banner .popup__title { font-size: 1.7rem; }
.popup--banner .popup__text { font-size: .9rem; }
.popup--banner[open] { animation: slidein .5s var(--ease-out); }
@keyframes slidein { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 1080px) { .popup--banner { bottom: calc(84px + env(safe-area-inset-bottom)); } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(22,27,29,.94); }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 60px 70px; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: var(--radius-s); box-shadow: var(--shadow-3); animation: pop .35s var(--ease-out); }
.lightbox .iconbtn { position: absolute; color: var(--c-cream); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--c-cream); font-family: var(--font-mono); font-size: .75rem; opacity: .8; padding-inline: 70px; }
@media (max-width: 600px) { .lightbox__inner { padding: 60px 10px 70px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 10px; transform: none; } }

/* ───────────────────────── 7 RECHTLICHES & 404 ───────────────────────── */
.legal { padding: clamp(40px, 6vw, 80px) 0 var(--section-pad); }
.legal__inner { max-width: 820px; }
.legal h1 { margin-bottom: var(--space-5); hyphens: manual; }
.legal h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: var(--space-7) 0 var(--space-3); }
.legal p, .legal li { font-size: .98rem; }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--accent-text); }
.legal__card { background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: var(--radius-m); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; }
.legal__dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: var(--space-4) 0 0; font-size: .95rem; }
.legal__dl dt { font-weight: 600; }
.legal__dl dd { margin: 0; }
.legal__todo { font-family: var(--font-mono); font-size: .8em; padding: .1em .4em; background: color-mix(in oklab, var(--c-gold) 40%, transparent); border-radius: 3px; }
.legal__stand { margin-top: var(--space-7); font-family: var(--font-mono); font-size: .75rem; color: var(--fg-muted); }
@media (max-width: 560px) { .legal__dl { grid-template-columns: 1fr; } .legal__dl dd { margin-bottom: 8px; } }

.notfound { padding: var(--section-pad) 0; text-align: center; }
.notfound__code { font-family: var(--font-display); font-size: clamp(8rem, 24vw, 15rem); line-height: .8; display: flex; justify-content: center; align-items: center; gap: .08em; color: var(--c-ink); margin: 0 0 var(--space-5); }
.notfound__code img { width: .9em; }
.notfound .lead { margin: var(--space-4) auto 0; }

/* ───────────────────────── 8 MOTION & PRINT ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .hero__line { opacity: 1; transform: none; }
}

@media print {
  .topbar, .site-header, .site-footer, .bookbar, .popup, .embed, .map, .btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .hero { background: none; color: #000; }
  .pagehead { background: none; padding: 0; }
  .js .reveal { opacity: 1; transform: none; }
}