/* ==========================================================================
   Landgasthof Rössle – Stylesheet
   Basierend auf dem Rössle Design System (tokens.css) · Schriften lokal gehostet
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3.woff2") format("woff2-variations"), url("../assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Handschrift nur für die Unterschrift der Familie (SIL Open Font License) */
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat.woff2") format("woff2-variations"), url("../assets/fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --weinrot: #8C1D2A;
  --tannengruen: #2F4B3C;
  --honig: #C4913A;
  --ink: #2B201B;
  --creme: #F8F2E7;
  --sandstein: #EFE5D2;
  --silber: #B5B8BB;
  --warmgrau: #6B5F56;
  --honig-text: #8A6420;
  --weinrot-100: #EBD8D0;
  --weinrot-200: #DAB6B2;
  --weinrot-700: #6D1721;
  --weinrot-900: #4D1017;
  --tannengruen-100: #E0DED2;
  --tannengruen-200: #C0C3B7;
  --tannengruen-700: #253A2F;
  --tannengruen-900: #1A2921;
  --honig-100: #F2E6D2;
  --honig-200: #E9D7B7;
  --honig-300: #DEC290;
  --focus-ring: 0 0 0 2px #F8F2E7, 0 0 0 4px #8C1D2A;
  --focus-ring-dunkel: 0 0 0 2px #2F4B3C, 0 0 0 4px #C4913A;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --breite-inhalt: 1200px; --breite-text: 720px; --touch-min: 48px;
  --font-display: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 136px);
  --header-h: 84px;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --arch: 999px 999px var(--radius-lg) var(--radius-lg);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--creme);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--weinrot); color: var(--creme); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 2px; }
main:focus { outline: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);

  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.28rem + 1.7vw, 2.5rem); line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; }
.accent { color: var(--weinrot); }
.lead { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.3125rem); line-height: 1.6; }
.muted { color: var(--warmgrau); }
.small { font-size: 1rem; line-height: 1.5; }
.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; }
.nowrap { white-space: nowrap; }

.container { width: 100%; max-width: calc(var(--breite-inhalt) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--breite-text) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.section--sand { background: var(--sandstein); }
.section--dark { background: var(--tannengruen); color: var(--creme); }
.section--dark h2, .section--dark h3 { color: var(--creme); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--center .kicker::before { display: none; }
.section-head p { color: var(--warmgrau); }
.section--dark .section-head p { color: var(--tannengruen-100); }

.kicker {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warmgrau);
}
.kicker::before { content: ""; flex: none; width: 32px; height: 2px; background: var(--honig); }
.section--dark .kicker, .cta-band .kicker { color: var(--tannengruen-100); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--weinrot); color: var(--creme); padding: 12px 20px; border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-6);
  border-radius: var(--radius-md); border: 2px solid transparent;
  font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.btn .icon { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--weinrot); color: var(--creme); }
.btn--primary:hover { background: var(--weinrot-700); }
.btn--secondary { background: transparent; color: var(--weinrot); border-color: var(--weinrot); }
.btn--secondary:hover { background: var(--weinrot-100); }
.btn--light { background: var(--creme); color: var(--tannengruen); }
.btn--light:hover { background: var(--sandstein); }
.btn--light:focus-visible, .btn--ghost-light:focus-visible { box-shadow: var(--focus-ring-dunkel); }
.btn--ghost-light { background: transparent; color: var(--creme); border-color: rgba(248, 242, 231, .7); }
.btn--ghost-light:hover { background: rgba(248, 242, 231, .12); border-color: var(--creme); }
.btn--sm { padding: 0 var(--space-4); font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn .icon-arrow { transition: transform .25s var(--ease-out); }
.btn:hover .icon-arrow, .link-arrow:hover .icon-arrow { transform: translateX(4px); }

.rs-link, .text-link {
  color: var(--weinrot); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--honig);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.rs-link:hover, .text-link:hover { text-decoration-color: var(--weinrot); }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--weinrot); font-weight: 600; text-decoration: none;
}
.link-arrow span { text-decoration: underline; text-decoration-color: var(--honig); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link-arrow .icon { width: 20px; height: 20px; }
.section--dark .link-arrow { color: var(--creme); }

.icon { width: 24px; height: 24px; flex: none; }

/* Bildausschnitte */
.op-house { object-position: 57% 50%; }
.op-room { object-position: 62% 50%; }
.op-top { object-position: 50% 20%; }
.op-left { object-position: 25% 50%; }

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 120; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: var(--honig); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 242, 231, .94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: transform .45s var(--ease-out), border-color .3s, background-color .3s;
}
.site-header.is-scrolled { border-bottom-color: rgba(181, 184, 187, .55); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); transition: min-height .35s var(--ease-out); }
.site-header.is-scrolled .site-header__inner { min-height: 68px; }
.brand { flex: none; display: block; text-decoration: none; padding: 6px 0; border-radius: var(--radius-sm); }
.brand img { width: 210px; height: auto; transition: width .35s var(--ease-out); }
.site-header.is-scrolled .brand img { width: 180px; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; list-style: none; gap: clamp(14px, 1.6vw, 28px); }
.main-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--touch-min);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--ink);
  transition: color .2s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: var(--honig); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.main-nav a:hover { color: var(--weinrot); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.main-nav a[aria-current="page"] { color: var(--weinrot); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-phone {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min);
  font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.header-phone .icon { width: 20px; height: 20px; color: var(--weinrot); }
.header-phone:hover { color: var(--weinrot); }
.burger {
  display: none; align-items: center; gap: var(--space-2);
  min-height: var(--touch-min); min-width: var(--touch-min); padding: 0 var(--space-3);
  background: transparent; border: 2px solid var(--ink); border-radius: var(--radius-md);
  font-weight: 600; cursor: pointer;
}
.burger__lines { position: relative; width: 20px; height: 12px; }
.burger__lines span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.burger__lines span:first-child { top: 1px; }
.burger__lines span:last-child { top: 9px; }
.burger[aria-expanded="true"] .burger__lines span:first-child { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1239px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 899px) {
  :root { --header-h: 72px; }
  .header-phone span { display: none; }
  .header-phone { width: var(--touch-min); justify-content: center; border: 2px solid var(--weinrot-200); border-radius: var(--radius-md); }
  .brand img, .site-header.is-scrolled .brand img { width: 168px; }
}
@media (max-width: 559px) {
  .header-cta, .header-phone { display: none; }
  .burger__label { display: none; }
  .brand img, .site-header.is-scrolled .brand img { width: 150px; }
}

/* Mobiles Menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  padding: calc(var(--header-h) + 24px) var(--gutter) calc(100px + env(safe-area-inset-bottom));
  background: var(--creme);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease-out); }
.mobile-menu ul { list-style: none; display: grid; gap: 2px; }
.mobile-menu nav a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.2; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid rgba(181, 184, 187, .5);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), color .2s;
}
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu nav li:nth-child(1) a { transition-delay: .05s; }
.mobile-menu nav li:nth-child(2) a { transition-delay: .09s; }
.mobile-menu nav li:nth-child(3) a { transition-delay: .13s; }
.mobile-menu nav li:nth-child(4) a { transition-delay: .17s; }
.mobile-menu nav li:nth-child(5) a { transition-delay: .21s; }
.mobile-menu nav li:nth-child(6) a { transition-delay: .25s; }
.mobile-menu nav li:nth-child(7) a { transition-delay: .29s; }
.mobile-menu nav li:nth-child(8) a { transition-delay: .33s; }
.mobile-menu nav a[aria-current="page"] { color: var(--weinrot); }
.mobile-menu__contact { display: grid; gap: var(--space-3); color: var(--warmgrau); }
@media (min-width: 1240px) { .mobile-menu { display: none !important; } }

/* Mobile Schnellkontakt-Leiste */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: 1fr 1.2fr 1fr;
  background: var(--creme); border-top: 1px solid var(--silber);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .4s var(--ease-out);
}
.action-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--ink);
}
.action-bar a .icon { width: 22px; height: 22px; color: var(--weinrot); }
.action-bar .action-bar__main { background: var(--weinrot); color: var(--creme); }
.action-bar .action-bar__main .icon { color: var(--creme); }
.action-bar.is-hidden { transform: translateY(110%); }
@media (max-width: 899px) {
  .action-bar { display: grid; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}

/* Brotkrumen */
.breadcrumb { padding-top: var(--space-4); font-size: 1rem; color: var(--warmgrau); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--silber); }
.breadcrumb a { color: var(--warmgrau); text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--weinrot); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(24px, 4vw, 56px) 0 clamp(72px, 9vw, 128px); overflow: clip; }
.hero--page { padding-top: clamp(16px, 3vw, 40px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.hero__content { max-width: 640px; }
.hero__title { margin-bottom: var(--space-6); }
.hero__lead { margin-bottom: var(--space-8); max-width: 34em; }
.hero__actions { margin-bottom: var(--space-6); }
.hero__phone { margin: 0; color: var(--warmgrau); }
.hero__phone a { color: var(--ink); font-weight: 600; text-decoration-color: var(--honig); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(181, 184, 187, .6); }
.hero__facts li { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; color: var(--warmgrau); }
.hero__facts .icon { width: 22px; height: 22px; color: var(--honig-text); }
.hero__media { position: relative; }
.hero--page .hero__title { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.25rem); }

/* Bogen-Rahmen – Motiv des Willkommensschilds an der Einfahrt */
.arch { position: relative; margin: 0; }
.arch__outline {
  position: absolute; inset: -14px -14px 14px 14px; z-index: 0;
  border: 1.5px solid var(--honig); border-radius: var(--arch);
  pointer-events: none;
}
.arch__frame { position: relative; z-index: 1; border-radius: var(--arch); overflow: hidden; aspect-ratio: 4 / 4.7; background: var(--sandstein); isolation: isolate; }
.arch__frame .parallax { position: absolute; inset: -8% 0; will-change: transform; }
.arch__frame img { width: 100%; height: 100%; object-fit: cover; }
.arch--wide .arch__frame { aspect-ratio: 5 / 4.4; }


/* ---------- Hügellinie ---------- */
.hills { width: 100%; height: clamp(48px, 7vw, 110px); display: block; }
.hills path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hills__back { stroke: var(--tannengruen-200); }
.hills__front { stroke: var(--honig); }
.hero > .hills { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- Laufband ---------- */
.marquee { overflow: hidden; border-block: 1px solid rgba(181, 184, 187, .6); padding-block: clamp(14px, 2vw, 22px); background: var(--creme); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.2; white-space: nowrap; color: var(--ink);
}
.marquee__item::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--honig); }
.marquee__item:nth-child(even) { color: var(--weinrot); }

/* ---------- Rahmen / Bilder ---------- */
.frame { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--sandstein); isolation: isolate; }
.frame .parallax { position: absolute; inset: -9% 0; will-change: transform; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--square { aspect-ratio: 1 / 1; }
figcaption, .caption { margin-top: var(--space-3); font-size: 1rem; line-height: 1.5; color: var(--warmgrau); }
.frame-caption { margin: var(--space-3) 0 0; font-size: 1rem; line-height: 1.5; color: var(--warmgrau); }

/* ---------- Willkommen ---------- */
.welcome__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.welcome__media { position: relative; }
.welcome__media .frame { max-width: 460px; }
.welcome__badge {
  position: absolute; right: clamp(0px, 2vw, 32px); bottom: -28px;
  width: 132px; height: 132px; border-radius: 50%;
  background: var(--tannengruen); color: var(--creme);
  display: grid; place-content: center; text-align: center; padding: 16px;
  font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.2;
}
.welcome__badge strong { display: block; font-size: 1.75rem; font-weight: 600; }
.signature { margin-top: var(--space-8); font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 600; font-size: clamp(2.125rem, 1.7rem + 1.4vw, 2.75rem); color: var(--weinrot); line-height: 1.1; }
.signature small { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--warmgrau); }

/* ---------- Drei Säulen ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: start; }
.pillar { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pillar--offset { margin-top: clamp(0px, 6vw, 88px); }
.pillar .frame { aspect-ratio: 4 / 5; }
.pillar .frame img { transition: transform 1.2s var(--ease-out); }
.pillar:hover .frame img { transform: scale(1.04); }
.pillar__body { padding-top: var(--space-6); }
.pillar__body h3 { margin-bottom: var(--space-2); transition: color .2s; }
.pillar:hover h3 { color: var(--weinrot); }
.pillar__body p { color: var(--warmgrau); }
.pillar__num { font-family: var(--font-display); font-size: 1rem; color: var(--honig-text); font-weight: 600; letter-spacing: .06em; }

/* ---------- Horizontale Galerie ---------- */
.hgal { position: relative; background: var(--sandstein); }
.hgal__sticky { padding-block: var(--section-y); }
.hgal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: clamp(32px, 4vw, 56px); }
.hgal__head .section-head { margin-bottom: 0; }
.hgal__track {
  display: flex; gap: clamp(16px, 2vw, 28px);
  padding-inline: max(var(--gutter), calc((100vw - var(--breite-inhalt)) / 2));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 8px;
}
.hgal__track::-webkit-scrollbar { display: none; }
.hgal__item { flex: none; width: clamp(240px, 26vw, 380px); margin: 0; scroll-snap-align: start; }
.hgal__item .frame { aspect-ratio: 4 / 5; }
.hgal__item--wide { width: clamp(300px, 40vw, 600px); }
.hgal__item--wide .frame { aspect-ratio: auto; height: 100%; max-height: none; }
.hgal__item:nth-child(even) { margin-top: clamp(0px, 4vw, 56px); }
.hgal__item figcaption { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.hgal__end {
  flex: none; width: clamp(260px, 26vw, 360px); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: var(--space-8); border-radius: var(--radius-lg); background: var(--creme); align-self: center;
}
.hgal__end h3 { margin: 0; }
.hgal__progress { margin-top: clamp(28px, 4vw, 48px); height: 2px; background: rgba(181, 184, 187, .6); border-radius: 2px; overflow: hidden; }
.hgal__progress span { display: block; height: 100%; background: var(--honig); transform-origin: 0 50%; transform: scaleX(0); }
.hgal__hint { display: none; font-size: 1rem; color: var(--warmgrau); align-items: center; gap: var(--space-2); }
.hgal__hint .icon { width: 20px; height: 20px; }
@media (max-width: 1023px) { .hgal__hint { display: inline-flex; } }
/* Gepinnte Variante (Desktop, per JS aktiviert) */
.hgal.is-pinned .hgal__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; padding-block: clamp(80px, 13vh, 140px) 24px; }
.hgal.is-pinned .hgal__track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hgal.is-pinned .hgal__item { width: clamp(240px, 22vw, 340px); }
.hgal.is-pinned .hgal__item--wide { width: clamp(320px, 36vw, 540px); }
.hgal.is-pinned .hgal__item .frame { max-height: 44vh; }
.hgal.is-pinned .hgal__item:nth-child(even) { margin-top: clamp(0px, 2.5vh, 28px); }
.hgal.is-pinned .hgal__head { margin-bottom: clamp(24px, 3.5vh, 40px); }

/* ---------- Öffnungszeiten-Band ---------- */
.hours-band { background: var(--tannengruen); color: var(--creme); }
.hours-band__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.hours-band h2 { color: var(--creme); }
.hours-band h2::after { content: ""; display: block; width: var(--space-12); height: 2px; margin-top: var(--space-4); background: var(--honig); }
.hours-band__intro > p { color: var(--tannengruen-100); }
.hours-band .hinweis { margin-top: var(--space-6); }
.hours-band__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.hours { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.hours caption { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; padding-bottom: var(--space-3); }
.hours th, .hours td { text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--silber); vertical-align: top; }
.hours th { font-weight: 600; padding-right: var(--space-4); white-space: nowrap; }
.hours td { font-variant-numeric: tabular-nums; }
.hours--light th, .hours--light td { border-bottom-color: rgba(248, 242, 231, .22); }
.hours--light caption { color: var(--creme); }
.hours-band__note { margin-top: var(--space-6); font-size: 1rem; color: var(--honig-200); }

/* ---------- Hinweis (Design System) ---------- */
.hinweis { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); color: var(--ink); }
.hinweis__titel { margin: 0; font-weight: 600; font-size: 1.125rem; }
.hinweis__text { margin: 0; }
.hinweis--info { background: var(--honig-100); }
.hinweis--wichtig { background: var(--weinrot-100); }
.hinweis--wichtig .hinweis__titel { color: var(--weinrot); }
.hinweis--natur { background: var(--tannengruen-100); }
.hinweis--natur .hinweis__titel { color: var(--tannengruen); }

/* ---------- Split-Layouts ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split__content > h2 { margin-bottom: var(--space-6); }
.split__content > p { color: var(--ink); }
.price-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-8) 0; padding: var(--space-6) 0; border-block: 1px solid rgba(181, 184, 187, .7); }
.price-hl__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--weinrot); }
.price-hl__text { flex: 1 1 220px; font-size: 1rem; line-height: 1.5; color: var(--warmgrau); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-8); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--sandstein); font-size: 1rem; }
.section--sand .chip { background: var(--creme); }
.chip .icon { width: 20px; height: 20px; color: var(--honig-text); }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.stat { padding: var(--space-6) 0 0; border-top: 2px solid var(--honig); }
.stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem); line-height: 1; color: var(--weinrot); font-variant-numeric: tabular-nums; }
.stat__num small { font-size: .45em; font-weight: 500; margin-left: 4px; color: var(--ink); }
.stat__label { display: block; margin-top: var(--space-2); font-size: 1rem; line-height: 1.45; color: var(--warmgrau); }

/* ---------- Video (2-Klick-Lösung) ---------- */
.video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--tannengruen-900); }
.video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4); padding: var(--space-6); text-align: center; background: rgba(26, 41, 33, .72); color: var(--creme); }
.video__play { display: inline-grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--creme); color: var(--weinrot); border: 0; cursor: pointer; transition: transform .35s var(--ease-out), background-color .2s; }
.video__play .icon { width: 34px; height: 34px; fill: currentColor; margin-left: 5px; }
.video__play:hover { transform: scale(1.06); background: var(--sandstein); }
.video__play:focus-visible { box-shadow: var(--focus-ring-dunkel); }
.video__title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 600; margin: 0; }
.video__note { max-width: 520px; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tannengruen-100); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__intro p { color: var(--warmgrau); }
.faq__item { border-bottom: 1px solid var(--silber); }
.faq__item:first-child { border-top: 1px solid var(--silber); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-6);
  min-height: 64px; padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.4;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--weinrot); }
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--honig); transition: background-color .3s, transform .4s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--honig); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__answer { padding: 0 var(--space-12) var(--space-6) 0; color: var(--warmgrau); }
.faq__item[open] .faq__answer { animation: faqIn .5s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__answer a { color: var(--weinrot); font-weight: 600; text-decoration-color: var(--honig); text-underline-offset: 3px; }

/* ---------- CTA-Band ---------- */
.cta-band { background: var(--weinrot); color: var(--creme); padding-block: clamp(56px, 8vw, 104px); position: relative; overflow: hidden; }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: var(--space-8) clamp(32px, 6vw, 96px); align-items: center; }
.cta-band h2 { color: var(--creme); margin-bottom: var(--space-3); }
.cta-band p { color: var(--weinrot-100); max-width: 36em; }
.cta-band__actions { display: grid; gap: var(--space-4); justify-items: start; }
.cta-band .btn--light { color: var(--weinrot); }
.cta-band .btn--light:hover { background: var(--weinrot-100); }
.cta-band__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); color: var(--creme); font-weight: 600; font-size: 1.25rem; text-decoration: none; }
.cta-band__phone .icon { width: 22px; height: 22px; }
.cta-band__phone:hover { text-decoration: underline; text-decoration-color: var(--honig); text-underline-offset: 5px; }
.cta-band a:focus-visible { box-shadow: 0 0 0 2px var(--weinrot), 0 0 0 4px var(--creme); }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--tannengruen); color: var(--creme); padding: clamp(56px, 8vw, 96px) 0 var(--space-8); margin-top: clamp(48px, 7vw, 110px); }
.footer-hills { position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(48px, 7vw, 110px); }
.footer-hills path { stroke: none; }
.footer-hills .hills__back { fill: var(--tannengruen-700); opacity: .55; }
.footer-hills .hills__front { fill: var(--tannengruen); }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr .9fr 1fr; gap: var(--space-12) clamp(24px, 4vw, 56px); }
.footer-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; margin-bottom: var(--space-4); color: var(--creme); }
.footer-title::after { content: ""; display: block; width: 32px; height: 2px; margin-top: var(--space-3); background: var(--honig); }
.site-footer address, .site-footer p { color: var(--tannengruen-100); }
.footer-contact, .footer-nav { list-style: none; display: grid; gap: 2px; margin-top: var(--space-4); }
.footer-contact a, .footer-nav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; color: var(--creme); text-decoration: none; word-break: break-word; }
.footer-contact a:hover, .footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--honig); text-underline-offset: 4px; }
.footer-contact .icon { width: 20px; height: 20px; color: var(--honig); }
.footer-hours { display: grid; gap: 4px; margin: 0; font-size: 1rem; }
.footer-hours div { display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3); }
.footer-hours dt { font-weight: 600; }
.footer-hours dd { margin: 0; color: var(--tannengruen-100); font-variant-numeric: tabular-nums; }
.footer-hours strong { color: var(--creme); }
.footer-note { margin-top: var(--space-3); font-size: .9375rem; color: var(--honig-200) !important; }
.footer-col .btn { margin-top: var(--space-4); }
.site-footer a:focus-visible { box-shadow: var(--focus-ring-dunkel); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: clamp(40px, 6vw, 72px); padding-top: var(--space-6); border-top: 1px solid rgba(248, 242, 231, .2); font-size: .9375rem; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: var(--space-3); color: var(--tannengruen-100); }

/* ---------- Karten (Design System) ---------- */
.karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; background: var(--sandstein); border-radius: var(--radius-lg); overflow: hidden; }
.section--sand .karte { background: var(--creme); }
.karte__bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1s var(--ease-out); }
.karte__media { overflow: hidden; }
.karte:hover .karte__bild { transform: scale(1.04); }
.karte__inhalt { display: grid; gap: var(--space-2); padding: var(--space-6); align-content: start; flex: 1; }
.karte__kicker { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warmgrau); }
.karte__kicker::before { content: ""; display: block; width: var(--space-8); height: 2px; margin-bottom: var(--space-2); background: var(--honig); }
.karte__titel { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.karte__text { margin: 0; color: var(--ink); }
.karte__aktion { margin-top: var(--space-2); }

/* ---------- Ausstattung / Features ---------- */
.features { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-4); align-items: start; }
.feature__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--sandstein); color: var(--honig-text); }
.section--sand .feature__icon { background: var(--creme); }
.section--dark .feature__icon { background: rgba(248, 242, 231, .1); color: var(--honig); }
.feature__icon .icon { width: 26px; height: 26px; }
.feature h3 { font-size: 1.25rem; margin: 10px 0 var(--space-1); }
.feature p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--warmgrau); }
.section--dark .feature p { color: var(--tannengruen-100); }

/* ---------- Preistabelle (Design System) ---------- */
.preise { width: 100%; border-collapse: collapse; font-size: 1.125rem; }
.preise caption { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.3; padding-bottom: var(--space-3); }
.preise th, .preise td { padding: var(--space-4) 0; border-bottom: 1px solid var(--silber); text-align: left; vertical-align: top; }
.preise thead th { font-size: 1rem; font-weight: 600; color: var(--warmgrau); border-bottom: 2px solid var(--honig); padding-block: var(--space-3); }
.preise tbody th { font-weight: 600; }
.preise .preise__preis { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: var(--space-6); }
.preise tbody .preise__preis { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; color: var(--weinrot); }
.preise__zusatz { display: block; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--warmgrau); }
.preise__fuss { margin: var(--space-4) 0 0; font-size: 1rem; line-height: 1.5; color: var(--warmgrau); }

/* ---------- Fotoalbum (kleine Bestandsfotos) ---------- */
.album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.album__item { margin: 0; }
.album__frame { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--creme); padding: 8px; border: 1px solid rgba(181, 184, 187, .6); transition: transform .5s var(--ease-out); }
.album__frame:hover { transform: translateY(-4px) rotate(-.6deg); }
.album__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
.album__item figcaption { font-size: .9375rem; }

/* ---------- Infobox / Fakten ---------- */
.facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-3) var(--space-8); margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--ink); }
.facts > div { display: contents; }
.infobox { background: var(--sandstein); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); }
.section--sand .infobox { background: var(--creme); }
.infobox h2, .infobox h3 { margin-bottom: var(--space-4); }

.prose { max-width: var(--breite-text); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.list-check { list-style: none; display: grid; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.list-check li { position: relative; padding-left: 36px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--tannengruen-100); }
.list-check li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 5px; border-left: 2px solid var(--tannengruen); border-bottom: 2px solid var(--tannengruen); transform: rotate(-45deg); }
.section--dark .list-check li::before { background: rgba(248, 242, 231, .14); }
.section--dark .list-check li::after { border-color: var(--honig); }

/* ---------- Ausflugsziele ---------- */
.ziele-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.chip-btn {
  min-height: 44px; padding: 0 var(--space-4); border-radius: 999px;
  border: 1.5px solid var(--warmgrau); background: transparent; color: var(--ink);
  font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.chip-btn:hover { border-color: var(--weinrot); color: var(--weinrot); }
.chip-btn[aria-pressed="true"] { background: var(--weinrot); border-color: var(--weinrot); color: var(--creme); }
.ziele { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ziel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--creme); border-radius: var(--radius-lg); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.ziel[hidden] { display: none; }
.ziel.is-entering { opacity: 0; transform: translateY(12px); }
.ziel h3 { font-size: 1.3125rem; margin: 0; }
.ziel__region { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--honig-text); }
.ziel p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--warmgrau); flex: 1; }
.ziel__meta { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ziel__meta span:last-child { color: var(--weinrot); }
.ziel__bar { height: 4px; border-radius: 4px; background: var(--sandstein); overflow: hidden; }
.ziel__bar span { display: block; height: 100%; width: var(--w, 0%); background: var(--honig); border-radius: 4px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease-out) .15s; }
.ziel.is-in .ziel__bar span, .no-js .ziel__bar span { transform: scaleX(1); }
.ziele-note { margin-top: var(--space-6); font-size: 1rem; color: var(--warmgrau); }

/* ---------- Anfahrtsskizze ---------- */
.route-map { width: 100%; height: auto; background: var(--sandstein); border-radius: var(--radius-lg); }
.route-map .road { fill: none; stroke: var(--warmgrau); stroke-width: 3; stroke-linecap: round; }
.route-map .road--a { stroke: var(--tannengruen); stroke-width: 5; }
.route-map .road--last { stroke: var(--weinrot); stroke-width: 3.5; stroke-dasharray: 2 7; }
.route-map .river { fill: none; stroke: #9DB4C0; stroke-width: 2; opacity: .8; }
.route-map .town { fill: var(--creme); stroke: var(--ink); stroke-width: 2; }
.route-map .label { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--ink); }
.route-map .label--small { font-size: 13px; font-weight: 400; fill: var(--warmgrau); }
.route-map .badge { fill: var(--tannengruen); }
.route-map .badge-text { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--creme); }
.route-map .target { fill: var(--weinrot); }
.route-map .target-label { font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: var(--weinrot); }
.js .route-map [data-draw] { transition: stroke-dashoffset 2s var(--ease-in-out); }

/* ---------- Formular ---------- */
.anfrage__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.anfrage__aside { display: grid; gap: var(--space-6); }
.form { display: grid; gap: var(--space-8); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; }
.form__section[hidden] { display: none; }
.form__section.is-entering { animation: formIn .5s var(--ease-out); }
@keyframes formIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.anliegen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.anliegen__opt { position: relative; min-width: 0; }
.anliegen__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.anliegen__opt label {
  display: grid; justify-items: start; gap: var(--space-2); height: 100%;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--sandstein); border: 2px solid transparent;
  font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .2s, background-color .2s;
  min-width: 0; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual;
}
.anliegen__opt label .icon { width: 26px; height: 26px; color: var(--honig-text); }
.anliegen__opt input:hover + label { border-color: var(--warmgrau); }
.anliegen__opt input:checked + label { border-color: var(--weinrot); background: var(--weinrot-100); }
.anliegen__opt input:checked + label .icon { color: var(--weinrot); }
.anliegen__opt input:focus-visible + label { box-shadow: var(--focus-ring); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.feld { display: grid; gap: var(--space-2); align-content: start; }
.feld__label { font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.feld__pflicht { font-weight: 400; color: var(--weinrot); font-size: 1rem; }
.feld__optional { font-weight: 400; color: var(--warmgrau); font-size: 1rem; }
.feld__eingabe {
  width: 100%; min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  font-size: 1.125rem; color: var(--ink); background: var(--sandstein);
  border: 1px solid var(--warmgrau); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
select.feld__eingabe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B201B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 44px; }
textarea.feld__eingabe { min-height: 140px; resize: vertical; line-height: 1.6; padding-block: var(--space-3); }
.feld__eingabe:hover { border-color: var(--ink); }
.feld__eingabe:focus { outline: 2px solid transparent; box-shadow: var(--focus-ring); background: var(--creme); }
.feld__hinweis { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--warmgrau); }
.feld__fehler { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--weinrot); }
.feld__fehler:empty { display: none; }
.feld.is-error .feld__eingabe { border: 2px solid var(--weinrot); background: var(--weinrot-100); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--touch-min); padding-top: 10px; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--weinrot); cursor: pointer; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: grid; gap: var(--space-4); }
.form__actions .btn { justify-self: start; min-width: 240px; }
.form__actions .btn[disabled] { opacity: .65; cursor: progress; }
.form__note { font-size: 1rem; line-height: 1.5; color: var(--warmgrau); margin: 0; }
.form-errors { padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); background: var(--weinrot-100); border: 2px solid var(--weinrot); }
.form-errors h2 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; color: var(--weinrot); margin: 0 0 var(--space-2); }
.form-errors ul { padding-left: 1.2em; }
.form-errors a { color: var(--ink); font-weight: 600; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(248, 242, 231, .4); border-top-color: var(--creme); animation: spin .8s linear infinite; display: none; }
.is-sending .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Erfolgsmeldung */
.form-success {
  display: grid; justify-items: center; text-align: center; gap: var(--space-4);
  padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px);
  background: var(--sandstein); border-radius: var(--radius-lg);
  border-top: 4px solid var(--tannengruen);
}
.form-success[hidden] { display: none; }
.form-success:focus { outline: none; }
.form-success__icon { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--tannengruen); color: var(--creme); }
.form-success__icon svg { width: 44px; height: 44px; }
.form-success__icon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: checkDraw .7s var(--ease-out) .25s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.form-success h2 { margin: var(--space-2) 0 0; }
.form-success p { max-width: 34em; margin: 0; }
.form-success__summary { margin: var(--space-2) 0; padding: var(--space-4) var(--space-6); background: var(--creme); border-radius: var(--radius-md); text-align: left; font-size: 1rem; width: 100%; max-width: 480px; }
.form-success__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.form-success__summary dt { font-weight: 600; }
.form-success__summary dd { margin: 0; overflow-wrap: anywhere; }
.form-success .btn-row { justify-content: center; margin-top: var(--space-2); }
.is-success-pop { animation: successPop .7s var(--ease-out); }
@keyframes successPop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Lightbox ---------- */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(26, 41, 33, .88); }
.lightbox img { max-width: min(1200px, 94vw); max-height: 82vh; width: auto; height: auto; border-radius: var(--radius-md); }
.lightbox p { margin: var(--space-3) 0 0; color: var(--creme); text-align: center; font-size: 1rem; }
.lightbox__close { position: absolute; top: -56px; right: 0; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--creme); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.lightbox[open] { animation: lbIn .4s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Scroll-Animationen (nur mit JS und ohne "reduzierte Bewegung")
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .img-reveal { clip-path: inset(14% 6% 14% 6% round var(--radius-lg)); transition: clip-path 1.4s var(--ease-out) var(--d, 0s); }
.js .img-reveal img { transform: scale(1.18); transition: transform 1.8s var(--ease-out) var(--d, 0s); }
.js .img-reveal.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.js .img-reveal.is-in img { transform: scale(1); }
.js .arch.img-reveal { clip-path: none; }
.js .arch.img-reveal .arch__frame { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-out) .15s; }
.js .arch.img-reveal.is-in .arch__frame { clip-path: inset(0 0 0 0); }
.js .arch.img-reveal .arch__outline { opacity: 0; transform: translate(-10px, 10px); transition: opacity 1s var(--ease-out) .9s, transform 1.2s var(--ease-out) .9s; }
.js .arch.img-reveal.is-in .arch__outline { opacity: 1; transform: none; }

.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--wi) * 55ms + 120ms); }
.js [data-split].is-in .w > span { transform: none; }

.js .hills [data-draw], .js .route-map [data-draw] { stroke-dasharray: var(--len, 3000); stroke-dashoffset: var(--len, 3000); }
.js .hills [data-draw] { transition: stroke-dashoffset 2.6s var(--ease-in-out) .3s; }
.js .is-drawn [data-draw], .js [data-draw].is-drawn { stroke-dashoffset: 0; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js .img-reveal, .js .img-reveal img, .js .arch.img-reveal .arch__frame, .js .arch.img-reveal .arch__outline, .js [data-split] .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .hills [data-draw], .js .route-map [data-draw] { stroke-dashoffset: 0 !important; }
  .parallax { transform: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .hero__grid, .welcome__grid, .split, .hours-band__grid, .faq__grid, .anfrage__grid { grid-template-columns: minmax(0, 1fr); }
  .split--reverse > :first-child { order: 0; }
  .hero__media { max-width: 560px; width: 100%; margin-inline: auto; }
  .hero__content { max-width: none; }
  .arch__frame { aspect-ratio: 4 / 3.6; }
  .hero { padding-bottom: clamp(88px, 12vw, 128px); }
  .welcome__media { order: 2; }
  .welcome__media .frame { max-width: none; aspect-ratio: 4 / 3.4; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .pillar--offset { margin-top: 0; }
  .pillar { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
  .pillar .frame { aspect-ratio: 4 / 4.4; }
  .pillar__body { padding-top: 0; }
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__intro, .anfrage__aside { position: static; }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  body { font-size: 1.125rem; }
  .pillar { grid-template-columns: minmax(0, 1fr); }
  .pillar .frame { aspect-ratio: 4 / 3.3; }
  .karten, .karten--2, .features, .features--4, .ziele, .album { grid-template-columns: minmax(0, 1fr); }
  .album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .hours-band__tables { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: var(--space-4); }
  .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2 { grid-column: auto; }
  .anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__actions .btn { justify-self: stretch; min-width: 0; }
  .faq__answer { padding-right: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; }
  .welcome__badge { width: 112px; height: 112px; font-size: .9375rem; bottom: -20px; }
  .welcome__badge strong { font-size: 1.5rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: var(--space-3); }
  .hero__facts { gap: var(--space-2) var(--space-4); }
  .btn-row .btn { flex: 1 1 auto; }
  .preise .preise__preis { padding-left: var(--space-3); }
  .hgal__item:nth-child(even) { margin-top: 0; }
}
@media (max-width: 380px) {
  .anliegen { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .site-header, .action-bar, .mobile-menu, .scroll-progress, .video, .cta-band, .footer-hills { display: none !important; }
  body { background: #fff; padding: 0; }
  .js [data-reveal], .js .img-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- Galerie (hochauflösende Fotos, mit Lightbox) ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.gallery__item { margin: 0; }
.gallery__item .frame { display: block; aspect-ratio: 4 / 5; cursor: zoom-in; }
.gallery__item:nth-child(3n+2) { transform: translateY(clamp(0px, 3vw, 40px)); }
.gallery__item .frame img { transition: transform 1s var(--ease-out); }
.gallery__item .frame:hover img { transform: scale(1.05); }
.gallery__item figcaption { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.js .gallery__item[data-reveal].is-in:nth-child(3n+2) { transform: translateY(clamp(0px, 3vw, 40px)); }
@media (max-width: 639px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item:nth-child(3n+2), .js .gallery__item[data-reveal].is-in:nth-child(3n+2) { transform: none; }
  .gallery__item figcaption { font-size: .9375rem; }
}

/* Kleine Bestandsfotos in Karten: in Originalgröße statt hochskaliert */
.karte__thumb { width: 216px; max-width: 100%; padding: 8px; margin-bottom: var(--space-3); background: var(--creme); border: 1px solid rgba(181, 184, 187, .7); border-radius: var(--radius-md); }
.section--sand .karte__thumb { background: var(--sandstein); }
.karte__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }

/* ---------- Schritte ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); position: relative; }
.step { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--sandstein); border-radius: var(--radius-lg); }
.step__num { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--space-6); border-radius: 50%; background: var(--weinrot); color: var(--creme); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.step h3 { margin-bottom: var(--space-2); }
.step p { margin: 0; color: var(--warmgrau); }
.step:not(:last-child)::after { content: ""; position: absolute; top: calc(clamp(24px, 3vw, 40px) + 27px); left: calc(clamp(24px, 3vw, 40px) + 72px); right: calc(-1 * clamp(20px, 3vw, 40px) - 8px); height: 2px; background: repeating-linear-gradient(90deg, var(--honig) 0 6px, transparent 6px 12px); z-index: 1; }
@media (max-width: 799px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step:not(:last-child)::after { display: none; }
}

/* ---------- Regionsseite: Hero mit zwei Bildern ---------- */
.hero-duo { padding: 0 0 clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px); }
.hero-duo__small { position: absolute; left: 0; bottom: 0; z-index: 3; width: 44%; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid var(--creme); background: var(--sandstein); }
.hero-duo__small img { width: 100%; height: 100%; object-fit: cover; }
.js .hero-duo__small.img-reveal { clip-path: none; opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s); }
.js .hero-duo__small.img-reveal.is-in { opacity: 1; transform: none; }
.frame--fit { width: 100%; max-width: 440px; justify-self: center; }
.op-museum { object-position: 50% 62%; }
.section--dark .split__content > p { color: var(--creme); }

/* Öffnungszeiten im Kontakt-Kasten (Anfrage-Seite) */
.aside-hours { display: grid; margin: 0 0 var(--space-4); }
.aside-hours div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--silber); }
.aside-hours div:first-child { border-top: 1px solid var(--silber); }
.aside-hours dt { font-weight: 600; }
.aside-hours dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.45; }
.aside-hours strong { color: var(--weinrot); }

/* ---------- Responsive-Feinschliff (QA) ---------- */
.features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) { .features--2 { grid-template-columns: minmax(0, 1fr); } }

/* Lange deutsche Wörter in schmalen Spalten sauber umbrechen */
figcaption, .karte__titel, .ziel h3, .feature h3, .step h3, .faq__item summary span { overflow-wrap: break-word; }
@media (max-width: 479px) {
  figcaption, .karte__titel, .ziel h3, .feature h3, .faq__item summary span { -webkit-hyphens: auto; hyphens: auto; }
}

/* Brotkrumen: ausreichend große Klickfläche (WCAG 2.2) */
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb a, .breadcrumb span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; }

/* Video-Hinweis passt auch auf schmale Bildschirme */
@media (max-width: 767px) { .video__frame { aspect-ratio: 4 / 3; } }
@media (max-width: 479px) {
  .video__frame { aspect-ratio: 4 / 5; }
  .video__play { width: 72px; height: 72px; }
  .video__note { font-size: .9375rem; }
}

/* Fotos mit geringer Auflösung nicht über ihre Originalgröße aufblasen */
.frame--lowres .parallax { inset: -3% 0; }
.frame--fit { aspect-ratio: 19 / 20; max-width: 400px; }
@media (max-width: 959px) {
  .frame--lowres { width: 100%; max-width: 600px; justify-self: center; margin-inline: auto; }
  .frame--fit { max-width: 400px; }
  .welcome__media .frame { max-width: 560px; margin-inline: auto; }
}
/* Karten ab 560 px zweispaltig – nutzt die Breite besser und hält kleine Fotos scharf */
@media (min-width: 560px) and (max-width: 639px) {
  .karten, .karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hochformat-Bilder in einspaltigen Splits (Tablet) nicht riesig werden lassen */
@media (max-width: 959px) { .split > .frame--portrait { width: 100%; max-width: 560px; justify-self: center; margin-inline: auto; } }

/* Formular auf schmalen Handys kompakter: Zahlen-/Datumsfelder und Anliegen paarweise */
@media (max-width: 639px) { .form-grid--keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); } }
@media (max-width: 339px) { .form-grid--keep2 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 340px) and (max-width: 380px) { .anliegen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anliegen__opt label { padding: var(--space-3); font-size: 1.0625rem; } }