/* =========================================================
   Domizil Brugger — Stylesheet
   Display: DM Sans (SemiBold/Bold, Google Fonts)   /   Body: Inter
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,600;0,700;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- brand palette (as supplied) ---- */
  --bg:        #f3f4f2;
  --bg-alt:    #e5e6de;
  --accent:    #7c7762;

  /* ---- derived support tones (same family, for contrast) ---- */
  --accent-dark:  #5f5a46;
  --accent-light: #a39d84;
  --ink-dark:  #2f2c22;   /* dunkle Flächen (Footer, dunkle Sections) — bleiben in beiden Textvarianten gleich */
  --ink:       #5f5a46;   /* Texte & Überschriften: Grau (Kundenwunsch 10/2026; vorher #2f2c22) */
  --ink-soft:  #5f5a46;   /* Fließtext (vorher #55503f) */
  --line:      rgba(124,119,98,.28);
  --white:     #fffdf9;

  /* ---- type ---- */
  --f-display: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- layout ---- */
  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 3px;
}

/* ---------------- reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  overflow-x:hidden; /* guards against the 100vw full-bleed banner adding a horizontal scrollbar */
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; }
input,textarea{ font:inherit; }

/* visible keyboard focus everywhere — never remove this without replacing it */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:1px;
}
.btn:focus-visible{ outline-offset:4px; }
.faq-q:focus-visible{ outline-offset:-2px; }

h1,h2,.font-display{
  font-family:var(--f-display);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
}
/* h3/h4 and smaller headlines stay on the body face (Inter) — only H1/H2 get the display face */
h3{
  font-family:var(--f-body);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.12;
}

.container{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-dark); /* accent (4.07:1) fails AA for text this small — accent-dark (6.27:1) passes */
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--accent);
  display:inline-block;
}

.h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); }
.h2{ font-size:clamp(2rem, 4.2vw, 3.1rem); }
.h3{ font-size:clamp(1.35rem, 2.4vw, 1.75rem); }
.lede{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--ink-soft); }

.italic-display{ font-style:italic; font-weight:600; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:.95em 1.9em;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  border-radius:2px;
  border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--accent); color:var(--white); }
.btn-primary:hover{ background:var(--accent-dark); }
.btn-ghost{ border-color:var(--accent); color:var(--accent-dark); }
.btn-ghost:hover{ background:var(--accent); color:var(--white); }
.btn-light{ border-color:rgba(255,253,249,.7); color:var(--white); }
.btn-light:hover{ background:var(--white); color:var(--ink); }
.btn svg{ width:15px; height:15px; flex:none; }
.btn-arrow svg{ transition:transform .25s ease; }
.btn-arrow:hover svg{ transform:translateX(3px); }

/* ---------------- header ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem var(--pad);
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-solid{
  background:rgba(243,244,242,.94);
  backdrop-filter:blur(6px);
  padding-top:.85rem; padding-bottom:.85rem;
  box-shadow:0 1px 0 var(--line);
}
.site-header .logo{
  font-family:var(--f-display); font-weight:600; font-size:1.35rem;
  letter-spacing:.02em; color:var(--white); transition:color .35s ease;
  display:flex; align-items:center; gap:.55rem;
}
.site-header.is-solid .logo,
.site-header.no-hero .logo{ color:var(--ink); }
.logo .mark{ width:26px; height:20px; flex:none; }
.logo .mark path{ stroke:currentColor; }

/* official brand logo (PNG, white source art) — recolored via filter instead of
   needing two separate image files: white while floating over a photo, dark once
   the header/page background turns light */
.logo-img{
  height:32px; width:auto; display:block;
  filter:brightness(0) invert(1);
  transition:filter .35s ease;
}
.site-header.is-solid .logo-img,
.site-header.no-hero .logo-img{ filter:brightness(0); }
.footer-logo-img{ height:38px; }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.main-nav a{
  font-size:.9rem; font-weight:600; letter-spacing:.02em;
  color:var(--white); position:relative; padding:.2rem 0;
  transition:color .35s ease;
}
.site-header.is-solid .main-nav a,
.site-header.no-hero .main-nav a{ color:var(--ink-soft); }
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:currentColor; transition:right .25s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{ right:0; }
.main-nav a.active{ color:var(--accent-dark) !important; }

.header-actions{ display:flex; align-items:center; gap:1.1rem; }
/* 44x44 tap target (WCAG/mobile guidance) wrapping a visually compact 32x22 icon */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  position:relative; z-index:120; flex:none;
}
.nav-toggle-icon{ position:relative; width:32px; height:22px; }
.nav-toggle-icon span{
  position:absolute; left:0; right:0; height:2px; background:var(--white);
  transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.site-header.is-solid .nav-toggle-icon span,
.site-header.no-hero .nav-toggle-icon span{ background:var(--ink-dark); }
.nav-toggle-icon span:nth-child(1){ top:0; }
.nav-toggle-icon span:nth-child(2){ top:10px; }
.nav-toggle-icon span:nth-child(3){ top:20px; }
.nav-open .nav-toggle-icon span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-open .nav-toggle-icon span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle-icon span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------------- hero ---------------- */
/* homepage hero: full-bleed image band, no overlaid text (text lives in .hero-intro below) */
.hero{
  position:relative; height:92vh; min-height:560px; max-height:980px;
  overflow:hidden; background:var(--ink-dark);
}
.hero-media{ position:absolute; inset:0; }
.hero .hero-media{ inset:-7% 0; } /* overscan buffer so the parallax drift never reveals an edge */
.hero-media .img-slot{ height:100%; width:100%; border-radius:0; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(30,28,20,.35) 0%, rgba(30,28,20,.15) 35%, rgba(30,28,20,.62) 100%);
}
/* only a light top vignette remains — just enough to keep the nav legible while it floats over the image */
.hero .hero-media::after{ background:linear-gradient(180deg, rgba(30,28,20,.4) 0%, rgba(30,28,20,0) 22%); }

.hero-inner{
  position:relative; z-index:2; width:100%;
  padding:0 var(--pad) 5.5rem;
  color:var(--white);
}
.hero-badge{
  font-family:var(--f-body); font-weight:600;
  font-size:1.05rem; color:var(--white); opacity:.92; margin-bottom:1.1rem;
  display:block;
}
.hero-cta{ margin-top:2.1rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* hero-intro: the welcome text, set below the header image on the page's own background */
.hero-intro{
  background:var(--bg);
  padding:clamp(3.5rem,7vw,5.5rem) 0 clamp(4rem,8vw,6rem);
}
.hero-intro .hero-badge{ color:var(--accent-dark); }
/* the welcome copy reads as ONE flowing text block — no headline/body split, one size, one weight */
.hero-statement{
  margin-top:.6rem;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.4rem, 2.4vw, 2.05rem);
  line-height:1.6;
  color:var(--ink);
  max-width:46em;
  letter-spacing:normal;
}

.scroll-cue{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:var(--accent);
}
.scroll-cue .line{ width:1px; height:30px; background:rgba(124,119,98,.32); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--accent); animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* page hero (subpages, smaller) */
.page-hero{
  position:relative; min-height:80svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink-dark); margin-top:0;
}
.page-hero .hero-media::after{ background:linear-gradient(180deg, rgba(30,28,20,.32) 0%, rgba(30,28,20,.2) 40%, rgba(30,28,20,.68) 100%); }
.page-hero .hero-inner{ padding:0 var(--pad) 4rem; }
.page-hero h1{ color:var(--white); }

/* ---------------- sections ---------------- */
.section{ padding:clamp(5rem,10vw,9rem) 0; position:relative; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--ink-dark); color:rgba(255,253,249,.82); }
.section-dark h2, .section-dark h3{ color:var(--white); }

.ridge-divider{ display:block; width:100%; height:40px; color:var(--accent); opacity:.55; }
.ridge-divider path{ stroke:currentColor; }

/* ---------------- signature quote ---------------- */
.signature{
  text-align:center; max-width:760px; margin:0 auto;
}
.signature .ridge-mark{ width:52px; height:26px; margin:0 auto 1.8rem; color:var(--accent); opacity:.6; }
.signature .icecream-mark{ width:30px; height:38px; margin:0 auto 1.8rem; color:var(--accent); opacity:.6; }
.signature p{
  font-family:var(--f-display); font-style:italic; font-weight:600;
  font-size:clamp(1.8rem,4vw,2.9rem); color:var(--ink); line-height:1.4;
}
.signature cite{
  display:block; margin-top:1.8rem; font-style:normal; font-family:var(--f-body);
  font-weight:600; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark);
}
/* the quote as its own quiet moment — generous whitespace on every side, nothing crowding it */
.quote-standalone{
  margin-top:clamp(5.5rem,12vw,9rem);
  margin-bottom:clamp(5.5rem,12vw,9rem);
}

/* reveal-soft: a slower, blurred materialize — reserved for singular, quiet moments like the quote */
.reveal.reveal-soft{
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1.1s ease;
  transform:translateY(18px); filter:blur(10px);
}
.reveal.reveal-soft.in{ filter:blur(0); }
@media (prefers-reduced-motion: reduce){ .reveal.reveal-soft{ filter:none; } }

/* ---------------- image slot (placeholder system) ---------------- */
.img-slot{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,253,249,.6), transparent 55%),
    linear-gradient(150deg, var(--bg-alt) 0%, #d5d6c7 55%, #c6c7b6 100%);
  display:flex; align-items:flex-end;
}
.img-slot::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(135deg, rgba(47,44,34,.05) 0 1.5px, transparent 1.5px 16px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L90 230 L150 270 L230 160 L300 235 L365 190 L430 250 L500 175 L600 260 L600 400 L0 400 Z' fill='%237c7762' opacity='0.16'/%3E%3Cpath d='M0 330 L110 265 L190 305 L260 235 L330 285 L410 220 L470 275 L600 210 L600 400 L0 400 Z' fill='%232f2c22' opacity='0.1'/%3E%3C/svg%3E");
  background-size:auto, cover; background-position:center, center;
}
.img-slot::after{
  content:''; position:absolute; left:50%; top:50%; width:26%; max-width:96px; min-width:46px; aspect-ratio:3/2;
  transform:translate(-50%,-50%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none'%3E%3Cpath d='M2 32 L15 16 L22 24 L34 6 L47 27 L58 13' stroke='%232f2c22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.24; pointer-events:none;
}
.img-slot .ph-tag{
  position:relative; z-index:1; margin:14px;
  font-family:var(--f-body); font-weight:600; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark);
  background:rgba(255,253,249,.9); padding:.45em .8em; border-radius:2px;
  box-shadow:0 1px 2px rgba(47,44,34,.08);
}

/* real photo present: drop the placeholder pattern/watermark, let the photo fill the slot */
.img-slot.has-photo{ background:none; }
/* !important: guarantees the placeholder pattern/icon never out-specs this for a
   component-scoped variant (e.g. .cta-banner .img-slot::after) defined later in the file */
.img-slot.has-photo::before,
.img-slot.has-photo::after{ content:none !important; }
.img-slot img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ar-hero{ aspect-ratio:16/10; }
.ar-wide{ aspect-ratio:16/9; }
.ar-landscape{ aspect-ratio:4/3; }
.ar-portrait{ aspect-ratio:3/4; }
.ar-square{ aspect-ratio:1/1; }
.ar-plakativ{ aspect-ratio:16/11; }
.ar-card{ aspect-ratio:5/6; }

.parallax-el{ will-change:transform; }

/* ---------------- section 2: staggered image collage + plakativ ---------------- */
/* media-frame: offset accent panel peeking out behind an image, for a layered / non-rigid feel */
.media-frame{ position:relative; }
.media-frame::before{
  content:''; position:absolute; z-index:0;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius);
}
.media-frame > .img-slot{ position:relative; z-index:1; }
.media-frame.offset-br::before{ top:18px; left:18px; right:-18px; bottom:-18px; }
.media-frame.offset-tl::before{ top:-18px; left:-18px; right:18px; bottom:18px; }
.media-frame.offset-bl::before{ top:18px; right:18px; left:-18px; bottom:-18px; }
.media-frame.offset-tr::before{ bottom:18px; left:18px; right:-18px; top:-18px; }

.collage{
  display:flex; align-items:flex-start; gap:1.8rem;
}
.collage-landscape{ flex:0 1 52%; margin-top:0; }
.collage-portrait{
  flex:0 1 38%; margin-top:4.5rem; margin-left:-2.2rem; z-index:2;
}
.collage-portrait .img-slot{ box-shadow:0 24px 48px -24px rgba(47,44,34,.45); }

.plakativ-wrap{ margin-top:3rem; }
@media (min-width:900px){
  .plakativ-wrap{ margin-left:9%; margin-right:0; }
}

/* ---------------- section 3 & 5: horizontal carousel ---------------- */
.carousel-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-bottom:2.2rem; flex-wrap:wrap;
}
.carousel-nav{ display:flex; gap:.6rem; }
.carousel-nav button{
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.carousel-nav button:hover{ background:var(--accent); border-color:var(--accent); color:var(--white); }
.carousel-nav svg{ width:16px; height:16px; }

.carousel-track{
  display:flex; align-items:flex-start; gap:1.4rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:.6rem; margin:0 calc(var(--pad) * -1); padding-left:var(--pad); padding-right:var(--pad);
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-card{ flex:0 0 auto; width:min(78vw, 300px); scroll-snap-align:start; }
.carousel-card .img-slot{
  margin-bottom:1rem;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.carousel-card:hover .img-slot{ transform:translateY(-6px); box-shadow:0 22px 40px -22px rgba(47,44,34,.45); }
.carousel-card h4{ font-family:var(--f-body); font-size:1.2rem; color:var(--ink); font-weight:600; }
.carousel-card p{ font-size:.88rem; margin-top:.3rem; color:var(--ink-soft); }

/* room carousel: cards in one straight row, arrows left and right of the track,
   vertically centred on the card images (ar-card = 5/6, so image centre = card width * 0.6) */
.carousel-stage{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:1rem;
}
.carousel-stage .carousel-track{ margin:0; padding-left:0; padding-right:0; }
.carousel-stage .carousel-nav{ margin-top:calc(min(78vw, 300px) * .6 - 21px); }
@media (max-width:600px){
  .carousel-stage{ gap:.5rem; }
  .carousel-stage .carousel-nav button{ width:34px; height:34px; }
  .carousel-stage .carousel-nav{ margin-top:calc(min(78vw, 300px) * .6 - 17px); }
}

.carousel-card.more{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:1px dashed var(--line); border-radius:var(--radius); aspect-ratio:5/6; gap:.8rem; color:var(--accent-dark);
}
.carousel-card.more svg{ width:26px; height:26px; }
.carousel-card.more span{ font-size:.82rem; font-weight:600; letter-spacing:.04em; }

.gallery-track .carousel-card{ width:min(64vw, 240px); }
.gallery-track.gallery-track-wide .carousel-card{ width:min(80vw, 380px); }

/* ---------------- teaser rows (family / eis / sport) ---------------- */
.teaser{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center;
}
.teaser.reverse .teaser-media{ order:-1; }
.teaser-copy .btn{ margin-top:1.6rem; }

/* ---------------- icon feature list ---------------- */
.icon-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 2rem; margin-top:3rem;
}
.icon-item{ display:flex; gap:1rem; align-items:flex-start; }
.icon-item .ic{
  width:44px; height:44px; flex:none; border-radius:50%; background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
}
.icon-item .ic svg{ width:21px; height:21px; }
.icon-item h4{ font-family:var(--f-body); font-weight:600; font-size:.98rem; color:var(--ink); }
.icon-item p{ font-size:.85rem; margin-top:.2rem; }

/* ---------------- FAQ accordion ---------------- */
.faq-list{ max-width:800px; margin:3rem auto 0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.5rem 0; text-align:left; font-family:var(--f-body); font-size:1.15rem; color:var(--ink); font-weight:600;
}
.faq-q .plus{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .plus::before,.faq-q .plus::after{
  content:''; position:absolute; background:var(--accent); border-radius:1px;
}
.faq-q .plus::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.faq-q .plus::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); transition:transform .3s ease; }
.faq-item.open .faq-q .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 0 1.6rem; font-size:.95rem; max-width:64ch; }
.faq-a-inner ul{ margin-top:.6rem; }
.faq-a-inner li{ padding-left:1.1em; position:relative; margin-top:.25rem; }
.faq-a-inner li::before{ content:'–'; position:absolute; left:0; color:var(--accent-dark); }

/* ---------------- final CTA banner ---------------- */
.cta-banner{
  position:relative; overflow:hidden; border-radius:4px; padding:clamp(3.5rem,8vw,6.5rem) 0;
  text-align:center; background:var(--ink-dark); color:var(--white);
}
/* full-bleed variant: break out of the centered container to full viewport width.
   Uses margins (not transform) on purpose — this element also carries .reveal's
   translateY animation, and transform is not additive across rules. */
.cta-banner-full{
  border-radius:0; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
/* the mood-image fills the box edge-to-edge at full strength — no fading/opacity,
   own dark sunset-toned placeholder (the default light card pattern would show
   through pale at the edges once dimmed, which read as a whitish border) */
.cta-banner .img-slot{
  position:absolute; inset:-6% 0; border-radius:0; aspect-ratio:auto;
  background:
    radial-gradient(60% 55% at 75% 28%, rgba(224,168,108,.35), transparent 62%),
    linear-gradient(165deg, #33301f 0%, #4a4530 45%, #2a2719 100%);
}
.cta-banner .img-slot::before{
  opacity:1;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,253,249,.035) 0 1.5px, transparent 1.5px 16px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Cpath d='M0 300 L90 230 L150 270 L230 160 L300 235 L365 190 L430 250 L500 175 L600 260 L600 400 L0 400 Z' fill='%23e8d6b4' opacity='0.16'/%3E%3Cpath d='M0 330 L110 265 L190 305 L260 235 L330 285 L410 220 L470 275 L600 210 L600 400 L0 400 Z' fill='%23161409' opacity='0.5'/%3E%3C/svg%3E");
}
.cta-banner .img-slot::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40' fill='none'%3E%3Cpath d='M2 32 L15 16 L22 24 L34 6 L47 27 L58 13' stroke='%23f3ead9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.3;
}
.cta-banner .img-slot .ph-tag{ background:rgba(20,18,12,.65); color:var(--white); box-shadow:none; }
/* dark scrim on top of the (now full-strength) image, for text legibility only */
.cta-banner::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,18,12,.25) 0%, rgba(20,18,12,.18) 45%, rgba(20,18,12,.62) 100%);
}
.cta-banner .cta-content{ position:relative; z-index:2; }
.cta-banner h2{ color:var(--white); }
.cta-banner .lede{ color:rgba(255,253,249,.85); max-width:44ch; margin:1.1rem auto 0; }
.cta-banner .btn{ margin-top:2rem; }

/* light variant: swaps the banner's dark scrim for a bright, semi-transparent one —
   image details still show through, text sits directly on the image (no boxed card),
   dark ink text for legibility on the light wash */
.cta-banner-light::after{
  background:linear-gradient(180deg, rgba(255,253,249,.3) 0%, rgba(255,253,249,.45) 45%, rgba(255,253,249,.8) 100%);
}
/* slightly more white wash than the base version */
.cta-banner-light-plus::after{
  background:linear-gradient(180deg, rgba(255,253,249,.38) 0%, rgba(255,253,249,.53) 45%, rgba(255,253,249,.85) 100%);
}
/* stronger version of the above — even more white wash, for busier/darker photos */
.cta-banner-light-strong::after{
  background:linear-gradient(180deg, rgba(255,253,249,.48) 0%, rgba(255,253,249,.62) 45%, rgba(255,253,249,.92) 100%);
}
.cta-banner-light h2{ color:var(--ink); }
.cta-banner-light .lede{ color:var(--ink-soft); }

/* ---------------- timeline (Über uns) ---------------- */
.timeline{ margin-top:3.5rem; position:relative; }
.timeline::before{ content:''; position:absolute; left:14px; top:6px; bottom:6px; width:1px; background:var(--line); }
.timeline-item{ position:relative; padding-left:3.6rem; margin-bottom:2.6rem; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-item::before{
  content:''; position:absolute; left:8px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent);
}
.timeline-year{ font-family:var(--f-body); font-weight:600; color:var(--accent-dark); font-size:1.05rem; margin-bottom:.3rem; display:block; }
.timeline-item h4{ font-family:var(--f-body); font-weight:600; color:var(--ink); font-size:1.02rem; margin-bottom:.35rem; }

/* ---------------- room / info cards ---------------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3rem; }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.7rem; }
.info-card h3{ font-size:1.3rem; }
.info-card .ic{
  width:40px; height:40px; color:var(--accent); margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.info-card .ic svg{ width:100%; height:100%; }
.info-card p{ margin-top:.6rem; font-size:.92rem; }

/* ---------------- room slider: one large room card at a time, paged with arrows ---------------- */
.room-slider{ margin-top:3.5rem; }
.room-slider-head{ display:flex; align-items:center; justify-content:flex-end; gap:1rem; margin-bottom:1.4rem; }
.room-slider-nav{ display:flex; gap:.6rem; }
.room-counter{
  font-family:var(--f-body); font-size:.8rem; font-weight:600; color:var(--accent-dark);
  letter-spacing:.03em; min-width:3.2em; text-align:center;
}

.room-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:4px;
}
.room-track::-webkit-scrollbar{ display:none; }
.room-track:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:4px; }
.room-slide{ flex:0 0 100%; scroll-snap-align:start; min-width:0; }

.room-card-lg{
  display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--white); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.room-media{ position:relative; }
.room-media .img-slot{ height:100%; min-height:340px; border-radius:0; }
.ar-fill{ aspect-ratio:auto; }
.room-badge-tag{
  position:absolute; top:22px; left:22px; z-index:3;
  background:var(--ink-dark); color:var(--white); font-family:var(--f-body);
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.65em 1em; border-radius:2px;
}

/* ---------------- room photo gallery (click-through, per room card) ---------------- */
.room-gallery{ position:relative; height:100%; }
.room-gallery-track{ position:relative; height:100%; }
.room-gallery-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease;
}
/* stays absolutely positioned even when active — a portrait photo must not grow the
   card's height, it should crop (object-fit:cover) inside the fixed-size frame instead */
.room-gallery-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.room-gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(20,20,15,.42); color:var(--white); backdrop-filter:blur(2px);
  transition:background .2s ease, opacity .2s ease; opacity:0;
}
.room-gallery:hover .room-gallery-nav, .room-gallery-nav:focus-visible{ opacity:1; }
.room-gallery-nav:hover{ background:rgba(20,20,15,.7); }
.room-gallery-nav svg{ width:16px; height:16px; }
.room-gallery-nav.prev{ left:16px; }
.room-gallery-nav.next{ right:16px; }
.room-gallery-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:3;
  display:flex; justify-content:center; gap:.5rem;
}
.room-gallery-dots button{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55);
  border:1px solid rgba(20,20,15,.25); transition:background .2s ease, transform .2s ease;
}
.room-gallery-dots button.is-active{ background:var(--white); transform:scale(1.3); }
.room-gallery-count{
  position:absolute; top:22px; right:22px; z-index:3;
  background:rgba(20,20,15,.42); color:var(--white); font-family:var(--f-body);
  font-size:.72rem; font-weight:600; padding:.4em .8em; border-radius:20px;
}
@media(max-width:640px){
  .room-gallery-nav{ opacity:1; width:32px; height:32px; }
}

.room-content{ padding:clamp(2rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; }
.room-content h3{ font-size:clamp(1.55rem,2.6vw,2.05rem); }
.room-meta{
  margin-top:.7rem; font-family:var(--f-body); font-size:.85rem; font-weight:600;
  letter-spacing:.02em; color:var(--accent-dark);
}
.room-desc{ margin-top:1.3rem; font-size:.98rem; line-height:1.7; max-width:42ch; color:var(--ink-soft); }
.room-divider{ height:1px; background:var(--line); margin:1.8rem 0; }

.room-features{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem; }
.room-feature{ display:flex; align-items:flex-start; gap:.65rem; font-size:.87rem; line-height:1.4; }
.room-feature svg{ width:19px; height:19px; flex:none; margin-top:.1rem; color:var(--accent); }

.room-price{ margin-top:2.1rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.room-price strong{ font-family:var(--f-body); font-size:1.4rem; font-weight:700; color:var(--ink); }
.room-price span{ font-size:.83rem; color:var(--ink-soft); }

.room-cta{
  margin-top:1.5rem; display:inline-flex; align-items:center; gap:.5em; width:fit-content;
  font-family:var(--f-body); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-dark); position:relative; padding-bottom:.3em;
}
.room-cta::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; }
.room-cta svg{ width:15px; height:15px; transition:transform .25s ease; }
.room-cta:hover svg{ transform:translateX(3px); }

/* ---------------- contact page ---------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
.contact-info-item{ display:flex; gap:1rem; padding:1.3rem 0; border-bottom:1px solid var(--line); }
.contact-info-item:first-child{ padding-top:0; }
.contact-info-item .ic{ width:22px; height:22px; color:var(--accent); flex:none; margin-top:.15rem; }
.contact-info-item h4{ font-family:var(--f-body); font-weight:600; color:var(--ink); font-size:.95rem; }
.contact-info-item p, .contact-info-item a{ font-size:.92rem; margin-top:.15rem; }
.contact-info-item a:hover{ color:var(--accent-dark); }

.form-field{ margin-bottom:1.4rem; }
.form-field label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:.5rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; border:1px solid var(--line); background:var(--white); padding:.85em 1em;
  border-radius:2px; color:var(--ink); transition:border-color .2s ease; font-family:inherit; font-size:1rem;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--accent); }
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7762' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; background-size:16px; padding-right:2.6em;
}

.storno-table{ width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.92rem; }
.storno-table td{ padding:.7rem 0; border-bottom:1px solid var(--line); }
.storno-table td:last-child{ text-align:right; font-weight:600; color:var(--ink); }

/* ---------------- price tables (Preise & Service) ---------------- */
.price-group{ margin-top:3.4rem; }
.price-group:first-child{ margin-top:0; }
.price-group h3{ font-size:1.3rem; }
.price-table-wrap{ overflow-x:auto; margin-top:1.4rem; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:6px; box-shadow:0 2px 14px rgba(20,20,15,.05); }
.price-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.92rem; }
.price-table thead th{ text-align:right; font-weight:600; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--white); background:var(--ink-dark); padding:.85rem .9rem; white-space:nowrap; }
.price-table thead th:first-child{ text-align:left; border-top-left-radius:5px; }
.price-table thead th:last-child{ border-top-right-radius:5px; background:var(--accent-dark); }
.price-table tbody td{ padding:.75rem .9rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.price-table tbody td:first-child{ text-align:left; font-weight:600; color:var(--ink); white-space:normal; }
.price-table tbody td:last-child{ background:var(--bg-alt); font-weight:600; color:var(--accent-dark); }
.price-table tbody tr:nth-child(even){ background:var(--bg); }
.price-table tbody tr:nth-child(even) td:last-child{ background:#e9e6d8; }
.price-table tbody tr:hover td{ background:#efe4c8; }
.price-table tbody tr:hover td:first-child{ color:var(--ink); }
.price-table tbody tr:last-child td{ border-bottom:none; }
.price-table tbody tr:last-child td:first-child{ border-bottom-left-radius:5px; }
.price-table .price-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:.55em; vertical-align:middle; flex:none; }
.price-note-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.5rem; font-size:.88rem; color:var(--ink-soft); }
.price-note-list strong{ color:var(--ink); }
.service-list{ margin-top:1.4rem; display:grid; gap:1.1rem; }
.service-item{ display:flex; justify-content:space-between; gap:1.5rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.service-item:last-child{ border-bottom:none; padding-bottom:0; }
.service-item h4{ font-size:1.02rem; }
.service-item ul{ margin-top:.4rem; font-size:.88rem; color:var(--ink-soft); }

/* ---------------- partner / brand logos ---------------- */
.partner-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:2.4rem; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
@media(min-width:560px){ .partner-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:820px){ .partner-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1080px){ .partner-grid{ grid-template-columns:repeat(6,1fr); } }
.partner-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; height:132px; background:var(--white); padding:1rem; text-align:center; transition:background-color .3s ease; }
.partner-tile:hover{ background:var(--bg-alt); }
.partner-tile .partner-logo{ height:32px; max-width:78%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .35s ease, opacity .35s ease; }
.partner-tile:hover .partner-logo{ filter:grayscale(0); opacity:1; }
.partner-tile.is-invert .partner-logo{ filter:invert(1) grayscale(1); opacity:.55; }
.partner-tile.is-invert:hover .partner-logo{ filter:invert(1) grayscale(0); opacity:1; }
.partner-tile .partner-name{ font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); line-height:1.3; }
.partner-tile.text-only .partner-name{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.3rem; letter-spacing:0; text-transform:none; color:var(--ink); opacity:.55; transition:opacity .35s ease; }
.partner-tile.text-only:hover .partner-name{ opacity:1; }
.service-item ul li{ margin-top:.2rem; }
.service-item .price{ flex:none; font-weight:600; color:var(--ink); white-space:nowrap; }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--ink-dark); color:rgba(255,253,249,.75); padding:5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2.5rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,253,249,.14); }
.footer-brand .logo{ color:var(--white); margin-bottom:1rem; }
.footer-brand p{ font-size:.9rem; max-width:32ch; }
.footer-col h5{ font-family:var(--f-body); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:1.1rem; }
.footer-col ul li{ margin-bottom:.65rem; font-size:.9rem; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; font-size:.78rem; }
.footer-bottom a:hover{ color:var(--white); }

/* ---------------- reveal-on-scroll ---------------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }

/* ---------------- misc ---------------- */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-lg{ margin-top:2.6rem; }
.max-measure{ max-width:56ch; }
.small-note{ font-size:.82rem; color:var(--accent-dark); }
.dev-note{
  max-width:var(--maxw); margin:0 auto var(--pad); padding:.8rem var(--pad);
}
.dev-note p{
  font-size:.78rem; color:var(--accent-dark); background:var(--bg-alt);
  border:1px dashed var(--line); padding:.7rem 1rem; border-radius:2px;
}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  /* backdrop-filter würde den Header zum Bezugsrahmen des fixen Menüs machen -> Menü klebt am Header statt am Viewport */
  .site-header.is-solid{ backdrop-filter:none; background:rgba(243,244,242,.98); }
  body.nav-open{ overflow:hidden; }
  .main-nav{
    position:fixed; inset:0; z-index:110; background:var(--bg);
    flex-direction:column; justify-content:center; align-items:center; gap:2.4rem;
    transform:translateY(-100%); transition:transform .4s ease; opacity:0;
  }
  .nav-open .main-nav{ transform:translateY(0); opacity:1; }
  .main-nav a{ color:var(--ink) !important; font-size:1.3rem; font-family:var(--f-body); font-weight:600; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary{ padding:.75em 1.3em; font-size:.82rem; }

  .collage{ flex-direction:column; }
  .collage-landscape,.collage-portrait{ flex-basis:auto; width:100%; margin:0 0 1.4rem; }
  .media-frame.offset-br::before,.media-frame.offset-tl::before,
  .media-frame.offset-bl::before,.media-frame.offset-tr::before{ top:10px; left:10px; right:-10px; bottom:-10px; }
  .plakativ-wrap{ margin-left:0 !important; }
  .teaser{ grid-template-columns:1fr; }
  .teaser.reverse .teaser-media{ order:0; }
  .icon-grid{ grid-template-columns:repeat(2,1fr); }
  .card-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  .room-card-lg{ grid-template-columns:1fr; }
  .room-media .img-slot{ height:260px; min-height:0; }
  .room-features{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .icon-grid{ grid-template-columns:1fr 1fr; }
  .card-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .footer-bottom{ flex-direction:column; gap:.6rem; }
}

/* ---------------- Galerie ---------------- */
.gallery-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:3rem; }
.gallery-chip{
  font:600 .85rem/1 var(--f-body); letter-spacing:.02em; color:var(--accent-dark);
  padding:.75rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:transparent;
  cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-chip:hover{ border-color:var(--accent); }
.gallery-chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--white); }

.gallery-group[hidden]{ display:none; }
.gallery-group + .gallery-group{ margin-top:4rem; }
.gallery-title{
  font-family:var(--f-display); font-size:clamp(1.4rem, 2.4vw, 1.9rem); color:var(--ink); font-weight:600;
  margin-bottom:1.4rem; display:flex; align-items:baseline; gap:.6rem;
}
.gallery-title span{ font:500 .85rem var(--f-body); color:var(--accent-light); }

.gallery-grid{ columns:3 280px; column-gap:1rem; }
.gallery-item{
  display:block; margin-bottom:1rem; break-inside:avoid; overflow:hidden; border-radius:var(--radius);
  background:var(--bg-alt); cursor:zoom-in;
}
.gallery-item img{ display:block; width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
.gallery-item:hover img{ transform:scale(1.035); }
.gallery-item:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(22,20,14,.94);
  display:flex; align-items:center; justify-content:center; padding:4rem 5rem;
}
.lightbox[hidden]{ display:none; }
.lightbox-figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox-figure img{ max-width:100%; max-height:calc(100vh - 9rem); object-fit:contain; display:block; }
.lightbox-figure figcaption{
  display:flex; gap:1.2rem; justify-content:space-between; width:100%; margin-top:.9rem;
  color:rgba(255,253,249,.8); font-size:.88rem;
}
.lightbox-count{ color:rgba(255,253,249,.5); white-space:nowrap; }
.lightbox-close, .lightbox-nav{
  position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,253,249,.3);
  background:transparent; color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background:var(--accent); border-color:var(--accent); }
.lightbox-close svg, .lightbox-nav svg{ width:18px; height:18px; }
.lightbox-close{ top:1.2rem; right:1.2rem; }
.lightbox-prev{ left:1.2rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.2rem; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .lightbox{ padding:4.5rem .75rem 5.5rem; }
  .lightbox-prev, .lightbox-next{ top:auto; bottom:1.2rem; transform:none; }
  .lightbox-prev{ left:calc(50% - 56px); }
  .lightbox-next{ right:calc(50% - 56px); }
}

/* 7 Menüpunkte: auf mittleren Desktop-Breiten etwas enger */
@media (min-width:981px) and (max-width:1240px){ .main-nav{ gap:1.4rem; } }
.gallery-sub + .gallery-sub{ margin-top:2.4rem; }
.gallery-subtitle{
  font:600 1.05rem var(--f-body); color:var(--ink); margin-bottom:1rem;
  display:flex; align-items:baseline; gap:.5rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.gallery-subtitle span{ font-weight:500; font-size:.8rem; color:var(--accent-light); }
.gallery-empty{ color:var(--ink-soft); font-style:italic; }

/* Über uns — Blick in die Geschichte: gleiche Höhe, jedes Foto im eigenen Format (kein Beschnitt) */
.gallery-track-natural .carousel-card{ width:auto; }
.gallery-track-natural .img-slot{ height:clamp(240px, 34vw, 340px); aspect-ratio:auto; }
.gallery-track-natural .img-slot img{ width:auto; height:100%; object-fit:contain; }

/* Startseite: Abstand zwischen Willkommenstext und Bild-Collage verringert */
.hero-intro + .section{ padding-top:clamp(2.5rem,5vw,4.5rem); }


/* ================= Mobile-Optimierung ================= */
/* Grid-Spalten dürfen schrumpfen (sonst drücken lange Wörter / Formularfelder die Seite breiter als das Display) */
.icon-grid > *, .card-grid > *, .contact-grid > *, .footer-grid > *, .teaser > *, .timeline > *{ min-width:0; }
.icon-item h4, .icon-item p, .room-content h3, .h1, .h2, .hero-statement{ overflow-wrap:break-word; }
/* Ausstattungs-/Vorteils-Icons: auf schmalen Handys einspaltig statt gequetscht */
@media (max-width:520px){
  .icon-grid{ grid-template-columns:1fr; gap:1.5rem; }
}
html, body{ overflow-x:hidden; }
/* Zimmerkarten mobil: Fotorahmen braucht eine eigene Höhe (Slides sind absolut positioniert),
   sonst überdeckt das Foto Überschrift und Text */
@media (max-width:980px){
  .room-media{ aspect-ratio:4/3; }
  .room-media .img-slot{ height:100%; min-height:0; }
}
/* Touch-Geräte: Foto-Pfeile immer sichtbar (kein Hover) */
@media (hover:none){ .room-gallery-nav{ opacity:1; } }
/* größere Tippflächen */
.room-gallery-dots button{ position:relative; }
.room-gallery-dots button::before{ content:""; position:absolute; inset:-9px; }
@media (max-width:600px){
  .site-footer li a, .footer-bottom a{ display:inline-block; padding:.35rem 0; }
  .room-cta{ padding-top:.5rem; padding-bottom:.5rem; }
}
/* Formularfelder dürfen in zweispaltigen Zeilen schrumpfen (Datumsfelder liefen mobil über den Rand) */
.form-field{ min-width:0; }
.form-field input, .form-field textarea, .form-field select{ min-width:0; max-width:100%; }
/* Preistabellen mobil: erste Spalte bleibt stehen, Hinweis zum Wischen */
@media (max-width:640px){
  .price-table{ min-width:520px; font-size:.86rem; }
  .price-table thead th, .price-table tbody td{ padding:.7rem .6rem; }
  .price-table thead th:first-child, .price-table tbody td:first-child{ position:sticky; left:0; z-index:1; }
  .price-table thead th:first-child{ background:var(--ink-dark); }
  .price-table tbody td:first-child{ background:var(--white); box-shadow:6px 0 8px -6px rgba(20,20,15,.25); }
  .price-table tbody tr:nth-child(even) td:first-child{ background:var(--bg); }
  .price-table-wrap::after{ display:block; padding:.55rem .8rem; font-size:.75rem; color:var(--accent-dark); border-top:1px solid var(--line); position:sticky; left:0; }
  :lang(de) .price-table-wrap::after{ content:"← Tabelle seitlich wischen →"; }
  :lang(en) .price-table-wrap::after{ content:"← Swipe table sideways →"; }
}
.signature .ridge-mark, .signature .icecream-mark{ display:block; }

/* Sprachumschalter DE/EN im Header */
.lang-switch{
  font:600 .8rem/1 var(--f-body); letter-spacing:.08em; color:var(--white);
  padding:.55rem .6rem; border:1px solid rgba(255,253,249,.45); border-radius:3px; margin-right:.6rem;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-switch:hover{ background:rgba(255,253,249,.15); }
.site-header.is-solid .lang-switch, .site-header.no-hero .lang-switch{ color:var(--accent-dark); border-color:var(--line); }
.site-header.is-solid .lang-switch:hover, .site-header.no-hero .lang-switch:hover{ background:var(--bg-alt); }
@media (max-width:600px){ .lang-switch{ padding:.5rem .45rem; margin-right:.35rem; font-size:.75rem; } }

/* Formulare: Spam-Falle unsichtbar, Status- & Datenschutz-Hinweis */
.hp-field{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-privacy{ font-size:.78rem; line-height:1.6; color:var(--ink-soft); margin-top:1rem; }
.form-privacy a{ text-decoration:underline; }
.form-status{ margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:3px; font-size:.95rem; line-height:1.55; }
.form-status.is-ok{ background:#e6eadf; color:#3d4a2c; border:1px solid #c5cfb4; }
.form-status.is-error{ background:#f3e3df; color:#6e2f22; border:1px solid #e0beb5; }
form[data-mailform] button[disabled]{ opacity:.6; cursor:wait; }

/* ================= Grounding-Seite (Fakten & Infos) ================= */
.facts-section{ padding:clamp(3rem,6vw,5rem) 0; }
.facts-container{ max-width:920px; }
.facts-h2{ margin-bottom:1.6rem; }
.facts-h3{ font:600 1.1rem var(--f-body); color:var(--ink); margin:2.2rem 0 .9rem; }
.facts-lede{ margin-bottom:1.8rem; }
.facts-dl{ display:grid; grid-template-columns:minmax(120px, 190px) minmax(0,1fr); margin:0; border-top:1px solid var(--line); }
.facts-dl dt, .facts-dl dd{ padding:.85rem 0; border-bottom:1px solid var(--line); margin:0; line-height:1.6; }
.facts-dl dt{ font-weight:600; color:var(--ink); padding-right:1.2rem; }
.facts-dl dd{ color:var(--ink-soft); }
.facts-dl a, .facts-list a, .facts-more a{ color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px; }
.facts-updated{ font-size:.8rem; color:var(--accent); margin-top:1rem; }
.facts-list{ margin:0; padding-left:1.1rem; color:var(--ink-soft); line-height:1.7; }
.facts-list li + li{ margin-top:.45rem; }
.facts-list strong{ color:var(--ink); font-weight:600; }
.facts-cols{ columns:2 260px; column-gap:2.4rem; }
.facts-cols li{ break-inside:avoid; }
.facts-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.facts-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.facts-table th, .facts-table td{ text-align:left; padding:.8rem .9rem .8rem 0; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55; }
.facts-table thead th{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark); }
.facts-table tbody th{ color:var(--ink); font-weight:600; white-space:nowrap; }
.facts-table td{ color:var(--ink-soft); }
.facts-table td:last-child{ text-align:right; font-weight:600; color:var(--ink); }
.facts-rooms td:last-child{ text-align:left; font-weight:400; color:var(--ink-soft); }
.facts-more{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); }
.facts-faqs{ margin:0; }
.facts-faq{ padding:1.1rem 0; border-bottom:1px solid var(--line); }
.facts-faq:first-child{ border-top:1px solid var(--line); }
.facts-q{ font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.facts-a{ margin:0; color:var(--ink-soft); line-height:1.65; }
@media (max-width:600px){
  .facts-dl{ grid-template-columns:1fr; }
  .facts-dl dt{ border-bottom:0; padding-bottom:0; }
  .facts-dl dd{ padding-top:.2rem; }
  .facts-rooms, .facts-rooms tbody, .facts-rooms tr, .facts-rooms th, .facts-rooms td{ display:block; }
  .facts-rooms thead{ display:none; }
  .facts-rooms tr{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .facts-rooms th, .facts-rooms td{ border:0; padding:.1rem 0; white-space:normal; }
}
.facts-list{ list-style:disc; } .facts-list li::marker{ color:var(--accent); }

/* Bildreihen mit Pfeilen links/rechts (Bergabenteuer, Geschichte): Pfeile mittig zur Bildhöhe */
.carousel-stage > *{ min-width:0; }
.carousel-stage.carousel-stage-mid{ align-items:center; }
.carousel-stage.carousel-stage-mid .carousel-nav{ margin-top:0; }

/* Über uns — Blick in die Geschichte: alle Fotos sichtbar, Zeilen im Blocksatz
   (jedes Foto in seinem eigenen Seitenverhältnis --r, kein Wischen, kein Beschnitt) */
.gallery-track-natural .carousel-track{
  flex-wrap:wrap; overflow:visible; scroll-snap-type:none; margin:0; padding:0; gap:1rem;
}
.gallery-track-natural .carousel-card{ flex:var(--r,1) 1 calc(var(--r,1) * 220px); width:auto; }
.gallery-track-natural .img-slot{ height:auto; aspect-ratio:var(--r,1); margin-bottom:0; }
.gallery-track-natural .img-slot img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:600px){
  .gallery-track-natural .carousel-track{ gap:.6rem; }
  .gallery-track-natural .carousel-card{ flex-basis:calc(var(--r,1) * 120px); }
}