/* ============================================================
   Schriften – selbst gehostet (kein Google-Fonts-Abruf)
   Poppins & Allura, SIL Open Font License 1.1
   Bezogen von fonts.google.com am 2026-08-09.
   Grund: keine Uebertragung der Besucher-IP an Google,
   damit kein Einwilligungsbedarf und schnellerer Seitenaufbau.
   ============================================================ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300-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: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/poppins-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/allura-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: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/allura-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Hotel Kaiserhof Anif — Premium Relaunch 2026 · Vermala-Look
   Poppins (rund, kräftig) + Allura (Handschrift) + Gold/Braun
   Vollflächige Foto-Sektionen mit Text auf dem Bild
   ============================================================ */

:root {
  --brown:  #3A2A23;
  --gold:   #B8915C;
  --gold-deep: #A67E48;
  --cream:  #F5EFE5;
  --ivory:  #FBF8F2;
  --dark:   #1F1612;
  --muted:  #6E5F54;
  --line:   #E0D6C4;
  --white:  #FFFFFF;

  --font-script: "Allura", cursive;
  --font-body: "Poppins", -apple-system, system-ui, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1200px;
  --radius: 1.25rem;
  --shadow: 0 24px 60px -24px rgba(58, 42, 35, 0.35);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--ivory);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film-Grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 5.6vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 2.2vw, 1.35rem); }
h1 em, h2 em { font-style: normal; color: var(--gold); }

a { color: var(--gold-deep); text-decoration: none; }

/* Allura-Schreibschrift-Eyebrow */
.eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 400;
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 2px;
  display: block;
  line-height: 1.1;
}
.eyebrow-light { color: #E3C89A; }
/* Eyebrow als Teil der H1 (SEO, 28.09.2026): Die Zeile traegt das Keyword und
   steht deshalb im <h1>. Alles, was die H1 sonst vererbt (Poppins 700,
   Versalien, 0.02em), wird hier explizit auf die Eyebrow zurueckgesetzt. */
h1 .eyebrow {
  display: block;
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-bottom: 2px;
}
/* Startseite: der 6px-Abstand lag vorher als margin-top auf der H1 zwischen
   Eyebrow und Titel; jetzt steht die Eyebrow in der H1, also dorthin. */
.hero h1:has(> .eyebrow) { margin-top: 0; }
.hero h1 > .eyebrow { margin-bottom: 6px; }

.lede { font-size: clamp(1rem, 2vw, 1.1rem); max-width: 36em; }

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring), background 0.25s;
  cursor: pointer;
  border: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--gold);
  color: var(--white);
  box-shadow: 0 12px 30px -12px rgba(184, 145, 92, 0.75);
}
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(184, 145, 92, 0.9); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--brown);
  border: 1px solid var(--line);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }
.btn-light { background: var(--ivory); color: var(--dark); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.6); }
.btn-block { width: 100%; text-align: center; }

.textlink {
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: gap 0.4s var(--ease-expo), opacity 0.2s;
}
.textlink:hover { gap: 0.95rem; opacity: 0.8; }

/* ===== Header ===== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px var(--pad);
  transition: background 0.5s var(--ease-expo), box-shadow 0.5s, padding 0.5s;
}
.site-header.scrolled {
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(58, 42, 35, 0.3);
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.32em;
  color: var(--white);
  transition: color 0.5s;
}
.brand-sub {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.5s;
}
.site-header.scrolled .brand-name { color: var(--brown); }
.site-header.scrolled .brand-sub { color: var(--muted); }

.main-nav { display: flex; gap: 22px; margin-left: auto; }
.main-nav a {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.5s, opacity 0.2s;
}
.main-nav a:hover { opacity: 0.65; }
.site-header.scrolled .main-nav a { color: var(--brown); }

.btn-book {
  background: var(--gold);
  color: var(--white);
  padding: 12px 22px;
  font-size: 12px;
}
.btn-book:hover { background: var(--gold-deep); }

.nav-toggle { display: none; }

/* ===== Hero mit Video ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-media img {
  animation: kenburns 18s var(--ease-expo) both;
  transform-origin: 55% 45%;
}
.hero-media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-expo);
}
.hero-media video.playing { opacity: 1; }
/* Sobald das Video laeuft, verschwindet das Posterbild. Ohne das liegen zwei
   Fassaden uebereinander: das Poster zoomt 18 s lang weiter (kenburns), das
   Video zeigt dieselbe Fassade in anderer Groesse. Ergebnis waeren doppelte
   Schrift und durchscheinende Baeume — genau das Bild, das Johannes am
   29.08.2026 als Artefakt gemeldet hat. Die Blende des Videos dauert 1,4 s,
   das Poster geht in 0,6 s, also erst wenn das Video schon traegt. */
.hero-media.video-an img { opacity: 0; transition: opacity 0.6s ease 0.8s; }
@keyframes kenburns {
  from { transform: scale(1.12); }
  to   { transform: scale(1.0); }
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(31, 22, 18, 0.8) 0%, rgba(31, 22, 18, 0.34) 45%, rgba(31, 22, 18, 0.3) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px var(--pad) clamp(90px, 14vh, 150px);
  max-width: 960px;
  margin: 0 auto;
  color: var(--white);
  text-align: center;
}
.hero .eyebrow {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);
}
.hero h1 { margin-top: 6px; color: var(--white); }
.hero .lede {
  color: rgba(251, 248, 242, 0.92);
  margin: 22px auto 0;
  font-weight: 300;
}
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 38px;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 30px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.75);
}
.hero-meta b { color: #E3C89A; font-weight: 500; }

.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(1.5deg);
  animation: wordin 1.1s var(--ease-expo) forwards;
}
@keyframes wordin {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.hero .eyebrow,
.hero .lede,
.hero .hero-cta,
.hero .hero-meta {
  opacity: 0;
  animation: heroin 1.2s var(--ease-expo) forwards;
}
.hero .eyebrow { animation-delay: 0.15s; }
.hero .lede { animation-delay: 1.0s; }
.hero .hero-cta { animation-delay: 1.2s; }
.hero .hero-meta { animation-delay: 1.45s; }
@keyframes heroin {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px; height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  display: flex; justify-content: center;
  opacity: 0;
  animation: heroin 1.2s var(--ease-expo) 1.7s forwards;
}
.scroll-hint span {
  width: 3px; height: 9px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  animation: hintdrop 1.8s ease-in-out infinite;
}
@keyframes hintdrop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(14px); opacity: 0; }
  56% { transform: translateY(0); opacity: 0; }
}

/* ===== USP-Leiste (auf Creme, kompakt) ===== */
.usp-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 3vw, 40px);
  background: var(--cream);
  padding: clamp(30px, 4vw, 46px) var(--pad);
  border-bottom: 1px solid var(--line);
}
.usp { text-align: center; }
.usp strong {
  display: block;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: var(--gold-deep);
  line-height: 1.15;
}
.usp span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ===== Intro (zentriert, Vermala-Stil) ===== */
.intro {
  padding: clamp(70px, 9vw, 110px) var(--pad);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.intro h2 { margin-bottom: 22px; }
.intro p { color: var(--muted); max-width: 44em; margin: 0 auto; }
.intro-links {
  display: flex;
  justify-content: center;
  gap: 12px 34px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ===== Foto-Panels (abgerundet, mit Raum) ===== */
.photo-section {
  position: relative;
  min-height: clamp(520px, 80vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: min(1440px, calc(100% - 2 * clamp(16px, 3.5vw, 56px)));
  margin: clamp(64px, 8vw, 120px) auto;
  border-radius: 2rem;
  box-shadow: 0 40px 90px -40px rgba(58, 42, 35, 0.5);
}
.photo-section > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.photo-veil {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(31, 22, 18, 0.42) 0%, rgba(31, 22, 18, 0.12) 55%, rgba(31, 22, 18, 0.3) 100%);
}
.photo-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(48px, 6vw, 84px) clamp(24px, 4.5vw, 72px);
  color: var(--white);
}

/* Glass-Card: lesbarer Text auf jedem Foto */
.glass-card {
  max-width: 520px;
  background: rgba(31, 22, 18, 0.52);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.5rem;
  padding: clamp(28px, 3.6vw, 48px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.photo-section.align-right .photo-content { display: flex; justify-content: flex-end; }
.photo-section.align-center .photo-content { display: flex; justify-content: center; }

.glass-card h2 { color: var(--white); font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.glass-card p { color: rgba(251, 248, 242, 0.9); margin-top: 14px; font-weight: 300; font-size: 15px; }
.glass-card .fine { color: rgba(251, 248, 242, 0.62); font-size: 12.5px; margin-top: 14px; }
.glass-card .btn-row { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.glass-card .textlink { color: #E3C89A; }
.glass-card .textlink:hover { opacity: 1; color: var(--white); }

/* Elegante Feature-Zeile statt Aufzählung */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
  margin-top: 24px;
}
.feat {
  border-left: 1px solid rgba(227, 200, 154, 0.55);
  padding-left: 14px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(251, 248, 242, 0.75);
}
.feat b {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 3px;
}

/* ===== Foto-Panel mit unten angedocktem Panel (Seminare) ===== */
.photo-section.dock-bottom { align-items: flex-end; }
.dock-panel {
  width: 100%;
  background: rgba(251, 248, 242, 0.97);
  color: var(--brown);
  border-radius: 1.25rem;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.dock-panel h2 { color: var(--brown); font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
.dock-panel p { color: var(--muted); margin-top: 8px; font-weight: 300; font-size: 14.5px; max-width: 46em; }
.dock-panel .btn-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ===== Dunkles Band (Kaiserbar) ===== */
.darkband {
  background: var(--dark);
  color: var(--ivory);
  padding: clamp(80px, 10vw, 130px) var(--pad);
}
.darkband-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.darkband h2 { color: var(--ivory); }
.darkband p { color: rgba(245, 239, 229, 0.72); margin: 18px 0 28px; font-weight: 300; }
.darkband-media {
  border: 1px solid rgba(184, 145, 92, 0.4);
  border-radius: 2rem;
  padding: 0.45rem;
  overflow: hidden;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.8);
}
.darkband-media img {
  border-radius: calc(2rem - 0.45rem);
  width: 100%;
  transition: transform 0.9s var(--ease-expo);
}
.darkband-media:hover img { transform: scale(1.035); }

/* ===== Stats-Split (E-Mobilität, hell) ===== */
.stats-split {
  max-width: calc(var(--maxw) + 2 * 64px);
  margin: 0 auto;
  padding: clamp(70px, 9vw, 110px) var(--pad);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}
.stats-split .split-media { margin: 0; }
/* Anker-Sprung auf #emobilitaet: die Sektion bringt 70–110 px eigenes Polster
   mit. Zusammen mit dem globalen scroll-padding-top von 84 px landet der Sprung
   so hoch, dass noch das dunkle Kaiserbar-Band im Bild steht. -84 px hebt das
   globale Polster auf — die Sektion beginnt exakt an der Oberkante, ihr eigenes
   Polster liegt unter der Kopfzeile, es ist nur noch dieser Container zu sehen.
   Johannes 2026-08-24 */
.stats-split[id] { scroll-margin-top: -84px; }
.big-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(22px, 4vw, 52px);
  margin: 28px 0 8px;
}
.big-stat strong {
  display: block;
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.big-stat span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 11em;
}

/* ===== Sections (helle Restflächen) ===== */
.section {
  padding: clamp(60px, 7vw, 90px) var(--pad);
  max-width: calc(var(--maxw) + 2 * 64px);
  margin: 0 auto;
}
.section-tint {
  max-width: none;
  background: var(--cream);
}
.section-tint > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 54px); }
.section-lede { color: var(--muted); margin-top: 16px; }

.note {
  margin-top: 40px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ===== Rooms (auf Creme-Band) ===== */
.rooms-band {
  background: var(--cream);
  padding: clamp(60px, 7vw, 90px) var(--pad);
}
.rooms-band-inner { max-width: calc(var(--maxw) + 2 * 32px); margin: 0 auto; }
.rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 4.5vw, 50px);
}
.rooms-head p.rooms-lede { color: var(--muted); margin-top: 10px; font-weight: 300; max-width: 38em; }
/* Zwei Karten pro Reihe statt auto-fit. Vier schmale Spalten auf grossen
   Schirmen liessen die Zimmer gedraengt wirken; zu zweit bekommt jedes Foto
   Luft und die Paarung ergibt sich von selbst: Superior + Comfort Plus,
   Piccolini DZ + Piccolini EZ, darunter die Ferienwohnung ueber die volle
   Breite. Reihenfolge steckt in der Dokumentreihenfolge, nicht in `order`
   — sonst laeuft die Tastaturbedienung an der Optik vorbei. */
.room-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 26px);
}
/* Nur die Zimmerseite paart zu zweit. Die Teaser auf Start- und
   Business-Seite bleiben schmal — dort ist die Reihe eine Vorschau,
   keine Auswahl. */
.room-list--paare { grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .room-list--paare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Die Ferienwohnung ist kein Zimmer — sie bekommt die volle Breite und
   Bild neben Text. Das Sonderformat sagt schneller als jedes Etikett,
   dass hier etwas anderes kommt. */
@media (min-width: 860px) {
  .room--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
  .room--wide .room-media { aspect-ratio: auto; height: 100%; }
  .room--wide .room-body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 40px); }
  .room--wide .room-body h3 { font-size: 1.15rem; }
}

/* ---- Filterleiste ---- */
.room-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: clamp(18px, 2.5vw, 26px);
}
.room-filter-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.room-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.room-chip {
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s var(--ease-expo), border-color 0.3s var(--ease-expo),
              background-color 0.3s var(--ease-expo);
}
.room-chip:hover { color: var(--gold-deep); border-color: var(--gold); }
.room-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.room-chip.is-active {
  color: var(--white);
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  font-weight: 400;
}
.room-chip-count { margin-left: 6px; opacity: 0.65; font-size: 11.5px; }

.room-filter-status {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--muted);
  min-height: 1em;
}

/* Ausgefiltert: aus dem Fluss UND aus dem Tab-Fokus. `display:none` allein
   wuerde reichen, `hidden` traegt die Aussage zusaetzlich in die
   Barrierefreiheit. */
.room[hidden] { display: none; }
/* ── Zimmerkarte „Gewoelbe" ───────────────────────────────────────────────
   Johannes 2026-08-24: die Karten sollen modern, informativ und eigen sein.
   Die Form kommt aus dem Haus selbst — die Rundboegen im Gewoelbe der Lobby.
   Das Foto sitzt als Bogen in einer hellen Wandflaeche, auf Hoehe des
   Bogenansatzes laeuft eine goldene Kaempferlinie durch die Karte.
   Beim Anfahren richtet sich der Bogen auf, als oeffnete sich das Gewoelbe.
   Bewusst KEIN weisser Kasten mit Bild oben — das haben alle Hotelseiten. */
.room {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(184, 145, 92, 0.10), transparent 62%),
    linear-gradient(180deg, var(--ivory) 0%, #F7F2E8 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 34px -22px rgba(58, 42, 35, 0.35);
  transition: transform 0.7s var(--ease-expo), box-shadow 0.7s var(--ease-expo),
              border-color 0.7s var(--ease-expo);
}
.room:hover,
.room:focus-within {
  transform: translateY(-8px);
  border-color: rgba(184, 145, 92, 0.55);
  box-shadow: 0 34px 70px -34px rgba(58, 42, 35, 0.5);
}

/* Johannes 2026-08-24: Bogenform wieder entfernt — das Foto bleibt ein
   ruhiges Rechteck mit weicher Ecke. */
.room-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius) - 0.5rem);
  background: rgba(58, 42, 35, 0.06);
}

.room-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease-expo), filter 0.9s var(--ease-expo);
  filter: saturate(0.94);
}
.room:hover .room-media img,
.room:focus-within .room-media img { transform: scale(1.07); filter: saturate(1.04); }

/* Goldlinie zwischen Foto und Text: sie waechst beim Anfahren aus der Mitte
   ueber die ganze Kartenbreite. */
.room-body {
  position: relative;
  padding: 24px 8px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.room-body::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  transition: width 0.8s var(--ease-expo);
}
.room:hover .room-body::before,
.room:focus-within .room-body::before { width: 100%; }

.room-body h3 {
  margin-bottom: 9px;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.room-body p { font-size: 13.5px; color: var(--muted); font-weight: 300; }

/* Eckdaten statt Etiketten-Haufen: eine ruhige Zeile in Versalien, durch
   goldene Haarstriche getrennt. Sagt dasselbe, liest sich schneller und
   sieht nicht nach Blog-Schlagworten aus. */
.room-specs {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 6px 0;
  margin: 16px 0 0;
}
.room-specs li {
  display: inline-flex; align-items: center;
  padding: 0 11px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.room-specs li:first-child { padding-left: 0; }
.room-specs li + li { border-left: 1px solid rgba(184, 145, 92, 0.45); }

.room-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.room-foot .textlink { position: relative; }
.room-foot .textlink::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-expo);
}
.room:hover .room-foot .textlink::after { transform: scaleX(1); transform-origin: left; }

/* Preis: haengt am Bogen, nicht in der Textspalte — dadurch bricht er die
   Spaltenkante und die Karte bekommt eine zweite Blickachse. */
.price {
  position: relative;
  font-weight: 600; font-size: 1.08rem;
  color: var(--gold-deep);
  transition: color 0.5s var(--ease-expo);
}
.price small { font-size: 11px; font-weight: 400; color: var(--muted); }
.room:hover .price { color: var(--brown); }

/* Der Galerie-Knopf gehoert zum Bogen und erscheint erst beim Anfahren —
   auf Touch-Geraeten bleibt er sichtbar, dort gibt es kein Hover. */
@media (hover: hover) {
  .room-media .gallery-open { opacity: 0; transform: translateY(6px); }
  .room:hover .gallery-open,
  .room:focus-within .gallery-open { opacity: 1; transform: translateY(0); }
}

/* Die Ferienwohnung laeuft ueber die volle Breite. Diese Regeln muessen NACH
   dem Kartenblock stehen: `.room--wide` und `.room` sind gleich spezifisch,
   und eine Media-Query erhoeht die Spezifitaet nicht — vorher gewann schlicht
   die spaetere Zeile, das Bild fiel auf Hoehe 0 zusammen. */
@media (min-width: 860px) {
  .room--wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    padding: 14px;
  }
  .room--wide .room-media {
    aspect-ratio: auto;
    height: 100%;
  }
  .room--wide .room-body {
    justify-content: center;
    padding: clamp(24px, 3vw, 40px);
  }
  .room--wide .room-body::before { top: 0; }
  .room--wide .room-body h3 { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .room, .room-media img, .room-body::before, .price, .gallery-open { transition: none; }
  .room:hover { transform: none; }
  .room:hover .room-media img { transform: none; }
}

/* ===== Split (Gastgeber) ===== */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.split:last-child { margin-bottom: 0; }
.split-flip .split-media { order: 2; }
.split-media {
  background: rgba(58, 42, 35, 0.05);
  border: 1px solid var(--line);
  border-radius: 2rem;
  padding: 0.45rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Zwei Drittel Foto, ein Drittel Text — fuer den Hunde-Abschnitt auf der
   Zimmerseite. Ohne die Variante stuenden dort zwei fast gleich gebaute
   Bildbaender untereinander (Johannes 30.08.2026). */
.split--zweidrittel { grid-template-columns: 2fr 1fr; }
/* Im schmalen Drittel haben drei Fakten nebeneinander je rund 120 px — die
   Ueberschriften brechen dann mitten im Wort. Untereinander gestellt. */
.split--zweidrittel .feature-row { grid-template-columns: 1fr; gap: 12px; }
.split-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* `height: auto` ist tragend: Bilder mit width/height-Attributen bringen
     einen HTML-Praesentationshinweis mit, der eine feste Pixelhoehe setzt und
     das aspect-ratio aushebelt. Gemessen am 28.08.2026 — ein Foto stand
     1125 px hoch in einer 286 px breiten Spalte. */
  height: auto;
  object-fit: cover;
  border-radius: calc(2rem - 0.45rem);
  transition: transform 0.9s var(--ease-expo);
}
.split:hover .split-media img { transform: scale(1.035); }
/* Quadratisches Foto im Gastgeber-Abschnitt (Johannes 30.08.2026: ein Bild
   statt zweier nebeneinander). Der 3:2-Standardrahmen wuerde Richard auf
   Huefthoehe abschneiden; 1:1 endet an der Hand des haengenden Arms.
   `height: auto` ist tragend, nicht Kosmetik: das Bild traegt
   width/height-Attribute gegen Layoutspruenge, und dieser HTML-Hinweis setzt
   eine feste Pixelhoehe. Ohne das Zuruecksetzen rechnet der Browser das
   aspect-ratio gar nicht erst aus — im Test stand ein Foto 1125 px hoch in
   einer 286 px breiten Spalte. Im Browser nachgemessen, 28.08.2026. */
.split-media--quadrat img { aspect-ratio: 1 / 1; height: auto; }
.split-body h3 { margin-bottom: 14px; }
.split-body p { color: var(--muted); font-weight: 300; }
.fine { font-size: 13px; margin-top: 16px; color: var(--muted); opacity: 0.9; }

.checklist { list-style: none; margin: 6px 0 0; }
.checklist li {
  padding: 10px 0 10px 32px;
  position: relative;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
  content: "→";
  position: absolute; left: 2px;
  color: var(--gold);
  font-weight: 500;
}

/* ===== Zitat + Numbered rows ===== */
.quote {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.35;
  margin-bottom: 26px;
  color: var(--gold-deep) !important;
}
.numbered { list-style: none; }
.numbered li {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.numbered li:last-child { border-bottom: none; }
.numbered span {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--gold);
  min-width: 40px;
}
.numbered div { font-size: 14px; color: var(--muted); font-weight: 300; }
.numbered strong { color: var(--brown); font-size: 14.5px; font-weight: 600; }

/* ===== Booking ===== */
.booking {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
  padding: clamp(70px, 9vw, 120px) var(--pad);
}
.booking-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(34px, 6vw, 90px);
  align-items: start;
}
.booking-text p { color: var(--muted); margin-top: 18px; max-width: 30em; font-weight: 300; }
.booking-text .fine a { font-weight: 600; }

.booking-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: clamp(24px, 3.5vw, 42px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.booking-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.booking-form label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.booking-form input,
.booking-form select,
.booking-form textarea {
  font: 400 15px/1.4 var(--font-body);
  color: var(--brown);
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--ivory);
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 145, 92, 0.18);
}
.booking-form textarea { resize: vertical; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.form-note.success { color: #3E7A4E; font-weight: 600; }

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  /* auto-fit: 3 Spalten auf der Startseite, 4 auf der Kontaktseite */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 4vw, 50px);
}
.contact-grid h3 { font-size: 0.95rem; margin-bottom: 10px; }
.contact-grid p { font-size: 14px; color: var(--muted); font-weight: 300; }

/* ===== Footer ===== */
.site-footer {
  background: var(--brown);
  color: rgba(245, 239, 229, 0.8);
  padding: clamp(50px, 7vw, 80px) var(--pad) 40px;
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.footer-brand .brand-name { color: var(--ivory); font-size: 24px; }
.footer-brand .brand-sub { color: rgba(245, 239, 229, 0.55); display: block; margin-top: 6px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 30px 0;
}
.footer-nav a { color: rgba(245, 239, 229, 0.8); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; transition: opacity 0.2s; }
.footer-nav a:hover { opacity: 0.6; }
.footer-fine { font-size: 12px; color: rgba(245, 239, 229, 0.45); }
.footer-fine a { color: inherit; text-decoration: underline; }

/* ===== Sticky mobile booking bar ===== */
.sticky-book {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  background: rgba(251, 248, 242, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 14px 44px -14px rgba(58, 42, 35, 0.55);
  padding: 12px 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(130%);
  transition: transform 0.55s var(--ease-expo);
}
.sticky-book.visible { transform: translateY(0); }
.sticky-book strong { display: block; font-size: 12.5px; }
.sticky-book span { font-size: 11px; color: var(--muted); }
.sticky-book .btn { padding: 12px 20px; font-size: 11.5px; white-space: nowrap; }

/* ===== Reveal animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.85s var(--ease-expo), transform 0.85s var(--ease-expo);
}
.reveal.in { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.09s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.27s; }

.reveal-img {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s var(--ease-expo), transform 1.3s var(--ease-expo);
}
.reveal-img.in { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-img { opacity: 1; transform: none; transition: none; }
  .hero-media img { animation: none; }
  .hero h1 .word { opacity: 1; transform: none; animation: none; }
  .hero .eyebrow, .hero .lede, .hero .hero-cta, .hero .hero-meta, .scroll-hint { opacity: 1; animation: none; }
  .hero-media video { display: none; }
  html { scroll-behavior: auto; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .main-nav {
    position: fixed;
    inset: 0;
    background: rgba(31, 22, 18, 0.97);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
  }
  .main-nav.open { opacity: 1; pointer-events: auto; }
  .main-nav a { color: var(--ivory) !important; font-size: 17px; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 70;
  }
  .nav-toggle span {
    width: 24px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.4s var(--ease-spring), opacity 0.3s, background 0.4s;
  }
  .site-header.scrolled .nav-toggle span { background: var(--brown); }
  .nav-toggle[aria-expanded="true"] span { background: var(--ivory); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .btn-book { display: none; }

  .usp-bar { grid-template-columns: repeat(2, 1fr); }

  .photo-section {
    min-height: 70vh;
    margin: clamp(36px, 6vw, 64px) auto;
    border-radius: 1.25rem;
  }
  .photo-section.align-right .photo-content { justify-content: flex-start; }
  .feature-row { grid-template-columns: 1fr; gap: 12px; }

  .split, .split-flip { grid-template-columns: 1fr; }
  .split-flip .split-media { order: 0; }
  .darkband-inner { grid-template-columns: 1fr; }
  .stats-split { grid-template-columns: 1fr; }
  .big-stats { grid-template-columns: repeat(3, 1fr); }
  .dock-panel { grid-template-columns: 1fr; }
  .booking-inner { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }

  .sticky-book { display: flex; }
}

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { text-align: center; }
}

/* ============================================================
   Subpage-Bausteine (Zimmer / Kulinarik / Business / Kontakt)
   Gleicher Marken-Look — nur ergänzende Komponenten
   ============================================================ */

/* Kompakter Page-Hero (Foto + Text unten links) */
.page-hero {
  position: relative;
  min-height: clamp(360px, 56vh, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 16s var(--ease-expo) both;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--maxw) + 2 * 32px);
  margin: 0 auto;
  padding: 130px var(--pad) clamp(40px, 6vw, 68px);
  color: var(--white);
}
.page-hero .eyebrow { color: var(--white); }
.page-hero h1 { color: var(--white); max-width: 15em; }
.page-hero p {
  color: rgba(251, 248, 242, 0.92);
  max-width: 40em;
  margin-top: 14px;
  font-weight: 300;
}
.breadcrumb {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.75);
  margin-bottom: 14px;
}
.breadcrumb a { color: rgba(251, 248, 242, 0.75); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span { opacity: 0.6; margin: 0 6px; }

/* Prosa-Textblock */
.prose { max-width: 44em; }
.prose p { color: var(--muted); font-weight: 300; margin-top: 14px; }
.prose p:first-child { margin-top: 0; }

/* Öffnungszeiten / Fakten-Liste */
.hours { list-style: none; margin-top: 10px; max-width: 34em; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px; color: var(--muted); font-weight: 300;
}
.hours li:last-child { border-bottom: none; }
/* Die ganzjaehrige Fruehstueckszeile gehoert zu beiden Spalten. Sie stand
   frueher als eigene Liste unter dem Raster mit max-width:none und lief
   dadurch ueber die volle Sektionsbreite hinaus — die Uhrzeit klebte am
   rechten Seitenrand, weit ausserhalb der Spalten. Als Rasterkind ueber
   beide Spalten sitzt sie jetzt buendig unter Sommer und Winter.
   Johannes 2026-08-25 */
.hours--full {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.hours li b { color: var(--brown); font-weight: 600; }

/* Ausstattungs-Chips */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(184, 145, 92, 0.12);
  border: 1px solid rgba(184, 145, 92, 0.28);
  padding: 5px 11px; border-radius: 999px;
}

/* Icon-Feature-Karten */
/* Info-Karten — bewusst als Drucksache gedacht, nicht als App-Kachel:
   fast rechter Winkel statt weicher Ecken, Haarlinie statt Schlagschatten,
   gezeichnetes Messing-Icon statt buntem Emoji. */
/* Flexbox statt Grid — Absicht: Grid mit gedeckelter Spaltenbreite zentriert
   zwar, zwingt aber eine feste Spaltenzahl. Vier Karten sind dadurch in 3 + 1
   umgebrochen. Flex laesst die Karten die Zeile fuellen, wenn sie zu viert
   sind, und zentriert die Gruppe, wenn sie zu dritt ist. */
.icon-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px; margin-top: 8px;
}
.icon-card {
  flex: 1 1 230px;
  max-width: 320px;
  position: relative;
  isolation: isolate;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 30px 26px 28px;
  transition: border-color 0.45s var(--ease-expo),
              transform 0.45s var(--ease-expo),
              box-shadow 0.45s var(--ease-expo);
}
.icon-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px -30px rgba(58, 42, 35, 0.45);
}

/* ── Zentrierter Kopf ueber einer Kartenreihe ────────────────────────────
   Frueher lagen die Karten hier aufgefaechert uebereinander; das ist am
   2026-08-24 zurueckgebaut worden (siehe Block weiter unten). Der zentrierte
   Kopf bleibt — er gehoert zur mittig stehenden Kartenreihe. */
/* Das Deck sitzt mittig — dann muss der Kopf darueber es auch tun, sonst
   steht eine linksbuendige Ueberschrift ueber einer zentrierten Grafik. */
/* Opt-in statt automatisch: nicht jede Ueberschrift ueber einem Deck gehoert
   zentriert. „Drei Raeume, die mitdenken" fuehrt auch die Zimmerkarten
   darueber an — dort waere ein zentrierter Kopf falsch. Deshalb setzt die
   Klasse, wer sie braucht.
   margin-inline zusaetzlich zu text-align: der Kopf hat eine Maximalbreite und
   stuende sonst links — der Text waere nur in diesem linken Kasten zentriert,
   nicht auf der Seite. */
.section.head-center .section-head {
  text-align: center;
  margin-inline: auto;
}
.section.head-center .section-head .section-lede { margin-inline: auto; }

/* ── Karten-Reihe (frueher: aufgefaechertes Deck) ────────────────────────
   Johannes 2026-08-24: die Karten stehen nebeneinander statt gestapelt.
   Der Faecher hat die hinteren Karten verdeckt und ihren Text auf 248 px
   abgeschnitten — bei drei gleichwertigen Angeboten ist das ein Fehler.
   Die Klasse bleibt im Markup (8 Seiten) und steuert jetzt nur noch die
   Hover-Geste; ein Rueckbau bliebe damit eine reine CSS-Aenderung. */
.icon-cards.deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.icon-cards.deck .icon-card {
  flex: 1 1 260px;
  max-width: 340px;
  overflow: hidden;
  transition: transform 0.5s var(--ease-expo),
              border-color 0.5s var(--ease-expo),
              box-shadow 0.5s var(--ease-expo);
}
/* Sechs Karten (Kontakt/FAQ) brechen sonst in 4 + 2 um — eine angebrochene
   Zeile mit zwei Karten liest sich wie ein Fehler. Darunter greift der
   normale Umbruch ueber flex-basis. */
@media (min-width: 861px) {
  .icon-cards.deck:has(.icon-card:nth-child(6)) .icon-card {
    flex: 1 1 calc((100% - 2 * 18px) / 3);
    max-width: none;
  }
}
/* Messinglinie faehrt beim Anfahren von links ein — dieselbe Geste wie die
   kurze Linie unter dem Icon, nur in Bewegung. */
.icon-cards.deck .icon-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-expo);
  pointer-events: none;
}
.icon-cards.deck .icon-card .ic {
  transition: transform 0.5s var(--ease-expo);
}
.icon-cards.deck .icon-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 28px 55px -35px rgba(58, 42, 35, 0.5);
}
.icon-cards.deck .icon-card:hover::after { transform: scaleX(1); }
.icon-cards.deck .icon-card:hover .ic { transform: translateY(-3px) scale(1.08); }

/* Wer Bewegung reduziert haben will, bekommt die Karten ohne Hub. */
@media (prefers-reduced-motion: reduce) {
  .icon-cards.deck .icon-card,
  .icon-cards.deck .icon-card::after,
  .icon-cards.deck .icon-card .ic { transition: none; }
  .icon-cards.deck .icon-card:hover { transform: none; }
  .icon-cards.deck .icon-card:hover .ic { transform: none; }
  .icon-cards.deck .icon-card:hover::after { transform: scaleX(1); }
}
/* Das Icon sitzt ueber einer kurzen Messinglinie — dieselbe Geste wie die
   Kopfzeilen der Seite, damit die Karten nicht wie Fremdkoerper wirken. */
.icon-card .ic {
  position: relative;
  width: 30px; height: 30px;
  color: var(--gold);
  margin-bottom: 18px;
  padding-bottom: 18px;
}
.icon-card .ic svg { display: block; width: 30px; height: 30px; }
.icon-card .ic::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 1px;
  background: var(--gold); opacity: 0.5;
}
.icon-card h4 {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 10px; color: var(--brown);
}
.icon-card p {
  font-size: 13.5px; line-height: 1.7;
  color: var(--muted); font-weight: 300;
}
/* Kleines Inline-Icon im Fliesstext (z. B. Hinweis „Urlaub mit Hund") */
.note-ic {
  width: 17px; height: 17px; color: var(--gold);
  vertical-align: -3px; margin-right: 8px;
}

/* Speisekarte als Download — die vollstaendige Preisliste stand frueher hier
   auf der Seite. Sie hat viel Platz gekostet und wenig verkauft; der Gast will
   an dieser Stelle Appetit, nicht 19 Zeilen Zahlen. Jetzt: ein Griff zum PDF. */
.menu-download {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(26px, 4vw, 40px) clamp(24px, 4vw, 44px);
  transition: border-color 0.45s var(--ease-expo);
}
.menu-download:hover { border-color: var(--gold); }
.menu-download .md-icon {
  width: 34px; height: 34px; color: var(--gold);
  flex-shrink: 0;
}
.menu-download .md-text h2 { margin-bottom: 8px; }
/* :not(.eyebrow) ist Absicht — ohne das schlaegt diese Regel die groessere,
   goldene .eyebrow-Definition und die Schreibschrift landet in 14px Braun. */
.menu-download .md-text p:not(.eyebrow) {
  font-size: 14px; font-weight: 300; line-height: 1.7;
  color: var(--muted); max-width: 52ch; margin: 0;
}
.menu-download .btn { white-space: nowrap; }

@media (max-width: 780px) {
  .menu-download {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 18px;
  }
}

/* Speisekarten-Preisliste (2-spaltig) — nur noch fuer die PDF-Druckvorlage */
.menu-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
}
.menu-group { margin-bottom: 30px; break-inside: avoid; }
.menu-group:last-child { margin-bottom: 0; }
.menu-group h3 {
  color: var(--gold-deep);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.menu-item {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; font-size: 14px;
  align-items: baseline;
}
.menu-item .m-name { color: var(--brown); font-weight: 400; }
.menu-item .m-name small {
  display: block; color: var(--muted); font-weight: 300;
  font-size: 12px; letter-spacing: 0;
}
.menu-item .m-price { color: var(--gold-deep); font-weight: 600; white-space: nowrap; }
.menu-note { margin-top: 24px; font-size: 12.5px; color: var(--muted); font-weight: 300; }

/* Foto-Galerie */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 12px 32px -20px rgba(58, 42, 35, 0.45);
  transition: transform 0.7s var(--ease-expo);
}
.gallery img:hover { transform: scale(1.03); }

/* FAQ-Akkordeon */
/* Kapazitaetstabelle Seminarraeume (seminare.html) — auf dem Handy horizontal scrollbar statt Seite zu sprengen */
.cap-table-wrap { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cap-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.cap-table caption { text-align: left; color: var(--muted); font-weight: 300; font-size: 13px; padding-bottom: 10px; }
.cap-table th, .cap-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.cap-table thead th { color: var(--gold-deep); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; }
.cap-table tbody th { text-align: left; color: var(--brown); font-weight: 400; }
.cap-table td { color: var(--muted); font-weight: 300; }
.more-link { display: inline-block; margin-top: 14px; color: var(--gold-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 0; font-weight: 600; color: var(--brown);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 15px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--gold); font-size: 1.5rem; font-weight: 400;
  transition: transform 0.3s var(--ease-expo); line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-weight: 300; padding: 0 0 20px; font-size: 14.5px; max-width: 60em; }

/* CTA-Banner (dunkel, zentriert) */
.banner {
  background: var(--brown);
  color: var(--ivory);
  border-radius: 2rem;
  padding: clamp(36px, 5vw, 60px);
  text-align: center;
  max-width: var(--maxw);
  margin: clamp(52px, 7vw, 96px) auto;
}
.banner .eyebrow { color: #E3C89A; }
.banner h2 { color: var(--ivory); }
.banner p { color: rgba(245, 239, 229, 0.78); font-weight: 300; margin: 12px auto 26px; max-width: 42em; }
.banner .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .menu-wrap { grid-template-columns: 1fr; }
}

/* ============================================================
   Bewertungen (Google & TripAdvisor)
   ============================================================ */
.reviews { max-width: var(--maxw); margin: 0 auto; padding: clamp(52px, 7vw, 96px) var(--pad); }
.reviews-head { text-align: center; max-width: 44em; margin: 0 auto clamp(30px, 4vw, 48px); }
.reviews-head p:not(.eyebrow) { color: var(--muted); font-weight: 300; margin-top: 14px; }

.review-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo), border-color 0.3s;
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: var(--shadow);
}
.review-card .rc-logo {
  height: 26px;
  display: flex;
  align-items: center;
  color: var(--brown);
}
.review-card .rc-logo svg { height: 100%; width: auto; display: block; }
.review-card h3 { text-transform: none; letter-spacing: 0; font-weight: 600; }
.review-card p {
  color: var(--muted);
  font-weight: 300;
  font-size: 14.5px;
  margin: 0;
  flex: 1;
}
.review-card .rc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.review-card .btn { padding: 13px 24px; font-size: 11.5px; }

.reviews-note {
  text-align: center;
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 300;
}

/* Sterne-Ornament */
.rc-stars { display: flex; gap: 3px; color: var(--gold); }
.rc-stars svg { width: 16px; height: 16px; }

/* ============================================================
   Social-Media-Icons
   ============================================================ */
.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
}
.social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 229, 0.25);
  display: grid;
  place-items: center;
  color: rgba(245, 239, 229, 0.8);
  transition: background 0.3s var(--ease-expo), color 0.3s, border-color 0.3s, transform 0.4s var(--ease-expo);
}
.social-links a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown);
  transform: translateY(-3px);
}
.social-links svg { width: 19px; height: 19px; display: block; }

/* Helle Variante (auf Creme-Flächen) */
.social-links.on-light a { border-color: var(--line); color: var(--brown); }
.social-links.on-light a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* ============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================ */
.legal {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--pad);
}
.legal h2 {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  margin: clamp(36px, 4vw, 52px) 0 14px;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
}
.legal > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  margin: 24px 0 8px;
}
.legal p, .legal li {
  color: var(--muted);
  font-weight: 300;
  font-size: 15px;
  margin-top: 12px;
}
.legal strong, .legal b { color: var(--brown); font-weight: 600; }
.legal ul, .legal ol { margin: 12px 0 0 20px; }
.legal li { margin-top: 8px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

.legal-facts {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.legal-facts li {
  display: grid;
  grid-template-columns: minmax(150px, 30%) 1fr;
  gap: 6px 20px;
  padding: 12px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.legal-facts li span:first-child {
  color: var(--brown);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .legal-facts li { grid-template-columns: 1fr; gap: 2px; }
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13.5px;
}
.legal-table th, .legal-table td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--muted);
  font-weight: 300;
}
.legal-table th {
  color: var(--brown);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.legal-table-wrap { overflow-x: auto; }

.legal-updated { margin-top: 40px; font-size: 12.5px; color: var(--muted); font-weight: 300; }

/* ============================================================
   Cookie-Banner
   ============================================================ */
#kh-hinweis {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
}
.khh-veil {
  position: absolute;
  inset: 0;
  background: rgba(31, 22, 18, 0.55);
  backdrop-filter: blur(3px);
}
.khh-box {
  position: relative;
  width: min(620px, 100%);
  max-height: min(84vh, 760px);
  overflow-y: auto;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(31, 22, 18, 0.6);
  padding: clamp(22px, 3.4vw, 34px);
  animation: cookieIn 0.6s var(--ease-expo) both;
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.khh-box .eyebrow { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 0; }
.khh-box h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); margin-bottom: 10px; }
.khh-box > p { color: var(--muted); font-weight: 300; font-size: 14px; }
.khh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.khh-actions .btn { flex: 1 1 auto; padding: 14px 20px; font-size: 11.5px; text-align: center; }
.khh-actions .khh-wide { flex-basis: 100%; }

.khh-panel { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 8px; }
.khh-row { border-bottom: 1px solid var(--line); padding: 14px 0; }
.khh-row:last-of-type { border-bottom: none; }
.khh-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}
.khh-row-head span:first-child { font-weight: 600; font-size: 14px; color: var(--brown); }
.khh-row p { color: var(--muted); font-weight: 300; font-size: 13px; margin-top: 8px; }

/* Schalter */
.khh-toggle-ui { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.khh-toggle-ui input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.khh-toggle-ui i {
  position: absolute; inset: 0;
  background: #D9CDBB;
  border-radius: 999px;
  transition: background 0.3s var(--ease-expo);
  pointer-events: none;
}
.khh-toggle-ui i::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(31, 22, 18, 0.3);
  transition: transform 0.3s var(--ease-expo);
}
.khh-toggle-ui input:checked + i { background: var(--gold); }
.khh-toggle-ui input:checked + i::after { transform: translateX(20px); }
.khh-toggle-ui input:disabled + i { background: var(--gold-deep); opacity: 0.5; }
.khh-toggle-ui input:disabled { cursor: not-allowed; }
.khh-toggle-ui input:focus-visible + i { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.khh-fine { margin-top: 18px; font-size: 12px; color: var(--muted); font-weight: 300; }
.khh-fine a { text-decoration: underline; }

/* Fussbereich-Link "Cookie-Einstellungen" */
.khh-settings { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

@media (max-width: 520px) {
  .khh-actions .btn { flex-basis: 100%; }
}

/* Sticky-Buchungsleiste (mobil) darf die Rechtslinks im Footer nicht verdecken */
@media (max-width: 960px) {
  .site-footer { padding-bottom: 110px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Logo im Kopf und Fuss (neu seit Anfang 2026, Variante mit Ortsangaben)
   Zwei Dateien statt einer: der Kopf steht ueber dem Hero transparent mit
   heller Schrift und wird beim Scrollen elfenbein mit brauner Schrift. Ein
   einzelnes braunes Logo waere ueber dem Foto unsichtbar. Die Ivory-Variante
   ist dieselbe Datei, nur eingefaerbt — Form und Proportion sind identisch.
   ───────────────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brand-logo {
  display: block;
  height: 46px;
  width: auto;
  /* .brand ist ein Flex-Container in Spaltenrichtung. Ohne align-self wuerde
     das Bild per stretch auf die Breite der Sternzeile gezogen und dabei
     horizontal verzerrt — die Hoehe bleibt, die Breite wird zu gross. */
  align-self: flex-start;
  flex: 0 0 auto;
  transition: opacity 0.5s var(--ease-expo);
}
/* Beide Bilder liegen uebereinander, damit beim Farbwechsel nichts springt. */
.brand-logo--dunkel { position: absolute; top: 0; left: 0; opacity: 0; }
.brand { position: relative; }
.site-header.scrolled .brand-logo--hell   { opacity: 0; }
.site-header.scrolled .brand-logo--dunkel { opacity: 1; }

.brand-sub { margin-top: 4px; }

.footer-logo {
  display: block;
  height: 86px;
  width: auto;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .brand-logo { height: 38px; }
  .footer-logo { height: 68px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Ausblick-Panel (Superior Zimmer → Untersberg)
   Das Motiv — Fenster mit Bergblick — liegt im linken Bilddrittel; rechts
   stehen nur Vorhang, Lampe und Sessel. `.photo-section > img` schneidet mit
   `object-fit: cover` mittig zu, auf schmalen Bildschirmen bliebe also genau
   der Vorhang stehen und der Berg verschwände. Deshalb ankert dieses eine
   Bild links. Auf Mobil zusaetzlich weiter nach links, weil dort am meisten
   weggeschnitten wird.
   ───────────────────────────────────────────────────────────────────────── */

#ausblick > img { object-position: 30% center; }

@media (max-width: 860px) {
  #ausblick > img { object-position: 18% center; }
}

/* ============================================================
   Foto-Galerie (Lightbox)
   Johannes 2026-08-24: jede Zimmerkategorie zeigt beim Klick
   mehrere Fotos zum Durchblaettern. Bewusst ohne Fremdbibliothek —
   die Seite hat keinen Build-Schritt, und ein Lightbox-Paket waere
   mehr Code als die Seite selbst.
   ============================================================ */

/* Ausloeser: das sichtbare Foto bekommt einen Knopf unten rechts. */
.has-gallery { position: relative; }
.gallery-open {
  position: absolute;
  right: 18px; bottom: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(31, 22, 18, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  font-family: inherit;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s var(--ease-expo), border-color 0.35s, transform 0.35s var(--ease-expo);
}
.gallery-open svg { width: 15px; height: 15px; }
.gallery-open:hover { background: var(--gold); border-color: var(--gold); color: var(--brown); transform: translateY(-2px); }
.gallery-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Karten-Foto als Ausloeser: der ganze Bildbereich ist klickbar. */
.room-media.has-gallery { cursor: zoom-in; }
.room-media .gallery-open { right: 12px; bottom: 12px; padding: 8px 13px; font-size: 10.5px; }

/* Die Buehne selbst. Sie wird per JS in den Body gehaengt. */
.lightbox {
  position: fixed; inset: 0;
  z-index: 9000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(23, 16, 13, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-expo);
}
.lightbox.is-open { opacity: 1; }
/* display:grid schlaegt das eingebaute [hidden]{display:none} — ohne diese
   Zeile bliebe die geschlossene Buehne unsichtbar ueber der Seite liegen und
   wuerde jeden Klick schlucken. */
.lightbox[hidden] { display: none; }
.lightbox-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px);
  color: rgba(245, 239, 229, 0.72);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
}
.lightbox-stage {
  position: relative;
  min-height: 0;
}
.lightbox-stage img {
  /* Absolut aufgespannt statt max-height:100%: in der Grid-Zelle loest die
     Prozenthoehe nicht auf, das Bild lief 143 px unter den Bildschirmrand
     hinaus (gemessen 906 px Bild in 632 px Buehne). top/bottom allein reicht
     nicht: ein ersetztes Element (img) mit height:auto dehnt sich daran nicht,
     es nimmt seine Eigenhoehe. Deshalb 100 % gegen die absolut positionierte
     Buehne, object-fit legt das Foto hinein. */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 0 clamp(12px, 5vw, 76px);
  box-sizing: border-box;
  object-fit: contain;
}
.lightbox-caption {
  padding: 16px clamp(16px, 4vw, 40px) 26px;
  text-align: center;
  color: rgba(245, 239, 229, 0.66);
  font-size: 13.5px; font-weight: 300;
}
/* Bedienknoepfe: gleiche Geste wie der Ausloeser, damit es zusammengehoert. */
.lightbox button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245, 239, 229, 0.28);
  border-radius: 50%;
  background: rgba(245, 239, 229, 0.06);
  color: rgba(245, 239, 229, 0.9);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-expo);
}
.lightbox button:hover { background: var(--gold); border-color: var(--gold); color: var(--brown); }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox-close { width: 42px; height: 42px; }
.lightbox-close svg, .lightbox-nav svg { width: 18px; height: 18px; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  /* Das Foto ist absolut positioniert und deckt die ganze Buehne ab. Es steht
     im Markup NACH dem Zurueck- und VOR dem Weiter-Knopf — ohne z-index lag es
     also ueber „zurueck" und darunter „weiter": der Zurueck-Knopf war nicht
     klickbar, der Weiter-Knopf schon. (Johannes 2026-08-25) */
  z-index: 2;
}
.lightbox-nav.prev { left: clamp(6px, 1.5vw, 20px); }
.lightbox-nav.next { right: clamp(6px, 1.5vw, 20px); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }

/* Miniaturen: Orientierung, wo man in der Serie steht. */
.lightbox-thumbs {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 0 clamp(16px, 4vw, 40px) 22px;
}
.lightbox-thumbs img {
  width: 64px; height: 43px;
  object-fit: cover;
  border-radius: 3px;
  opacity: 0.4;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.3s, border-color 0.3s;
}
.lightbox-thumbs img:hover { opacity: 0.75; }
.lightbox-thumbs img[aria-current="true"] { opacity: 1; border-color: var(--gold); }

@media (max-width: 640px) {
  .lightbox-thumbs { display: none; }
  .lightbox-nav { width: 40px; height: 40px; }
  .gallery-open { right: 12px; bottom: 12px; padding: 8px 13px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox button, .gallery-open { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobil: Formularfelder auf 16 px  (10.09.2026)
   Safari auf dem iPhone zoomt die ganze Seite hinein, sobald ein Feld mit
   weniger als 16 px den Fokus bekommt — und zoomt danach NICHT von selbst
   zurueck. Der Gast steht dann mitten in der Anfrage in einer vergroesserten,
   seitlich verschobenen Seite. Gemessen am 10.09.: alle Felder auf index und
   kontakt lagen bei 15 px. Der optische Unterschied ist minimal, der Zoom
   verschwindet. Nur bis 860 px, damit das Desktop-Layout unberuehrt bleibt.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px), (pointer: coarse) {
  /* Spezifitaet muss .booking-form matchen (0,1,1), ein blankes `input` (0,0,1)
     verliert gegen `.booking-form input { font: 400 15px/1.4 … }` in Zeile 1043
     und die Regel bliebe wirkungslos. Im DOM nachgemessen, nicht angenommen. */
  .booking-form input,
  .booking-form select,
  .booking-form textarea { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobil: Trefferflaechen der Textlinks auf mindestens 24 px  (10.09.2026)
   WCAG 2.2 AA, Kriterium 2.5.8 verlangt 24 x 24 CSS-Pixel. Gemessen am
   10.09. am Handy: `.textlink` 22 px, Fusszeilen-Links 16 bis 22 px — das
   ist ein schmaler Streifen fuer eine rund 10 mm breite Fingerkuppe, und die
   Textlinks stehen teils direkt uebereinander.
   `padding-block` legt oben und unten je 6 px unsichtbare Trefferflaeche
   dazu; aus 22 werden 34 px. Schrift, Farbe und Position bleiben unveraendert,
   nur gestapelte Links bekommen etwas mehr Abstand zueinander.
   `(pointer: coarse)` steht neben der Breite, weil ein iPad im Querformat
   1024 px breit ist und trotzdem mit dem Finger bedient wird. Am Rechner mit
   Maus greift nichts davon, dort bleibt das abgenommene Layout unangetastet.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px), (pointer: coarse) {
  .textlink { padding-block: 6px; }
  .footer-nav a { padding-block: 6px; }
  .footer-fine a { display: inline-block; padding-block: 5px; }
  /* Telefon und E-Mail sind auf dem Handy die wichtigsten Links ueberhaupt und
     lagen bei 19 bis 20 px. `display: inline-block` ist noetig, damit das
     senkrechte Polster bei einem Inline-Element ueberhaupt die Trefferflaeche
     vergroessert. */
  a[href^="tel:"],
  a[href^="mailto:"] { display: inline-block; padding-block: 5px; }
  .breadcrumb a { display: inline-block; padding-block: 5px; }
  .khh-settings { padding-block: 5px; }
  /* Der Telefon-Knopf auf /zimmer traegt eine eigene `padding`-Kurzform aus
     `.btn` und landete bei 23 px — ein Pixel unter der Norm. `min-height`
     greift, ohne die Polsterung der uebrigen Knoepfe anzufassen. */
  .btn[href^="tel:"] { min-height: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hotel-Spider Buchungsmaske und ihr Platzhalter  (10.09.2026)
   Der Kasten steht ueber dem Anfrageformular. Solange die Einwilligung fuer
   externe Inhalte fehlt, ist #spiderBooking leer und nur der Hinweis sichtbar;
   deshalb hat der Kasten keine feste Hoehe, sonst klafft dort ein Loch.
   ───────────────────────────────────────────────────────────────────────── */
/* Buchungsmaske und Anfrageformular teilen sich die rechte Rasterspalte.
   Ohne diesen Wrapper haette `.booking-inner` drei Kinder in einem
   Zweispalten-Raster — das Formular rutscht dann unter den Text nach links
   und die Maske steht allein rechts. */
.booking-spalte { display: grid; gap: 18px; align-content: start; }

.spider-slot {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 18px;
  margin-bottom: 18px;
}
.spider-hinweis {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.spider-hinweis .khh-settings { color: var(--gold-deep); font-weight: 500; }
.spider-slot.spider-an { padding: 14px; }


/* ─────────────────────────────────────────────────────────────────────────
   Teller-Buehne auf der Kulinarik-Seite  (10.09.2026)
   Ein grosses Bild, das langsam durchwechselt. Alle Bilder liegen
   uebereinander; sichtbar ist das mit `.ist-sichtbar`. Seitenverhaeltnis 3:2
   ist das Originalformat der Fotos — beim Kaiserschmarrn faellt der
   Staubzucker von oben ins Bild, ein Beschnitt oben wuerde genau den Moment
   wegnehmen, um den es geht.
   `height: auto` ist Pflicht: die height-Angabe im Markup wirkt als
   Praesentations-Hinweis und wuerde `aspect-ratio` sonst aushebeln.
   ───────────────────────────────────────────────────────────────────────── */
.teller-buehne {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: rgba(58, 42, 35, 0.05);
}
.teller-buehne img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease-expo);
}
.teller-buehne img.ist-sichtbar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .teller-buehne img { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hochzeitsabschnitt: heller Schleier  (10.09.2026)
   Johannes: „das Bild wirkt dunkler als das Original". Es ist dasselbe Bild —
   gemessen liegt die webp-Fassung 1,3 von 255 unter dem JPG, das sieht
   niemand. Dunkel macht es `.photo-veil`, der Standardschleier mit 42 % am
   linken Rand.
   Hier darf er weg: die gesamte Schrift steckt in der Glaskarte, die ihren
   eigenen dunklen Grund mitbringt. Der Rest bleibt nur, damit die runden Ecken
   nicht hart gegen das helle Seitenlayout stossen.
   ───────────────────────────────────────────────────────────────────────── */
#hochzeiten .photo-veil {
  background: linear-gradient(105deg, rgba(31, 22, 18, 0.16) 0%, rgba(31, 22, 18, 0.02) 55%, rgba(31, 22, 18, 0.12) 100%);
}

/* ─────────────────────────────────────────────────────────────────────────
   Daumennaegel unter der Teller-Buehne  (10.09.2026)
   Sechs kleine Bilder in einer Reihe, auf dem Handy drei. Der aktive traegt
   einen goldenen Rahmen und volle Deckkraft, die uebrigen sind leicht
   zurueckgenommen — so sieht man auf einen Blick, welches Bild gerade oben
   haengt, ohne dass die Reihe unruhig wird.
   `height: auto` wieder aus demselben Grund wie bei der Buehne: die
   height-Angabe im Markup wuerde `aspect-ratio` sonst aushebeln.
   ───────────────────────────────────────────────────────────────────────── */
.teller-daumen-reihe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  max-width: 900px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
}
.teller-daumen {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.7rem;
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.3s, border-color 0.3s, transform 0.3s var(--ease-expo);
}
.teller-daumen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.teller-daumen.ist-aktiv { opacity: 1; border-color: var(--gold); }
.teller-daumen:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
@media (hover: hover) {
  .teller-daumen:hover { opacity: 1; transform: translateY(-2px); }
}
@media (max-width: 640px) {
  .teller-daumen-reihe { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Fussnote direkt unter den Oeffnungszeiten (statt nur im Footer) ===== */
.hours-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

/* ===== E-Mail-Adresse kopieren =====
   Der mailto-Link bleibt, damit niemand etwas verliert. Daneben ein kleiner
   Knopf, der die Adresse in die Zwischenablage legt — fuer alle, die aus ihrem
   eigenen Programm schreiben wollen statt aus dem, das mailto oeffnet. */
.mailcopy { display: inline-flex; align-items: center; gap: 6px; }
.mailcopy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: none;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  transition: opacity .18s ease, border-color .18s ease;
}
.mailcopy-btn svg { width: 15px; height: 15px; display: block; }
.mailcopy-btn:hover, .mailcopy-btn:focus-visible { opacity: 1; }
.mailcopy-btn .ikon-ok { display: none; }
.mailcopy-btn.ist-kopiert { opacity: 1; color: #2E7D53; border-color: #2E7D53; }
.mailcopy-btn.ist-kopiert .ikon-kopieren { display: none; }
.mailcopy-btn.ist-kopiert .ikon-ok { display: block; }

/* Mehrteilige Kennzahl (z. B. "ab 24 ct"): nicht umbrechen und etwas kleiner,
   damit sie neben den kurzen Zahlen im Dreier-Gespann nicht aus dem Raster faellt. */
.big-stat .big-stat-kurz { white-space: nowrap; font-size: clamp(1.4rem, 3vw, 2.2rem); }
/* In einer Knopfreihe sitzt der kleine Kopier-Knopf sonst oben buendig an den
   hohen Knoepfen und wirkt verrutscht. */
.btn-row .mailcopy-btn { align-self: center; }


/* Reiter Buchen / Anfragen (01.10.2026) */
.booking-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; }
.booking-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 48px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent;
  font: 500 12.5px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  cursor: pointer; transition: background 0.3s, color 0.3s;
}
.booking-tab small { font-size: 10px; letter-spacing: 0.04em; text-transform: none; font-weight: 400; opacity: 0.85; }
.booking-tab.is-active { background: var(--gold); color: var(--white); }
.booking-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.spider-slot[hidden], .booking-form[hidden] { display: none; }

/* Sprachumschalter DE | EN (01.10.2026) */
.main-nav .lang-switch { display: inline-flex; align-items: center; gap: 0; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.main-nav .lang-switch > * { padding: 4px 8px; }
.main-nav .lang-switch > * + * { border-left: 1px solid currentColor; }
.main-nav .lang-switch span { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.main-nav .lang-switch a { opacity: 0.7; }
.site-header.scrolled .main-nav .lang-switch span { color: var(--brown); }
@media (max-width: 960px) {
  .main-nav .lang-switch span { color: var(--ivory) !important; }
  .main-nav .lang-switch { font-size: 15px; }
}