/* =========================================================
   Campingplatz Flecken Zechlin – Designsystem v2
   Inspiriert von der v0-Vorlage: Cream-Surface, Forest-Green,
   High-Contrast-Serif, ruhige Abstände, weiche Bildrundungen.
   ========================================================= */

:root{
  /* Farben */
  --cream:        #efe8d9;     /* Haupt-Surface (warm beige) */
  --cream-2:      #ece5d4;     /* sanfte Alternation (statt #e6dfce) */
  --paper:        #f7f3e9;     /* sehr helles Off-White */
  --white:        #ffffff;
  --forest:       #2d5a3a;     /* Footer + grüner Akzent */
  --forest-2:     #244a30;
  --forest-link:  #2f6b3f;     /* Inline-Links */
  --ink:          #363c38;     /* Headline – weiches Anthrazit (vorher #1a1f1c) */
  --body:         #4a5048;     /* Body-Grau (vorher #404641) */
  --muted:        #7a7e76;     /* Sekundärtext */
  --line:         rgba(26,31,28,.10);
  --line-strong:  rgba(26,31,28,.18);
  --sand:         #d8cfb8;     /* Icon-Chip / Filter-Default */
  --sand-2:       #c9bfa2;

  /* Typo */
  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Form */
  --radius-img:  10px;
  --radius-card: 12px;
  --radius-btn:  4px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-sm: 0 6px 20px rgba(20,30,22,.06);
  --shadow:    0 18px 50px rgba(20,30,22,.10);
  --shadow-lg: 0 30px 80px rgba(20,30,22,.16);
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--forest);color:#fff}

/* Globale Tastatur-Fokus-Indikatoren (WCAG 2.1) */
:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:3px;
  border-radius:2px;
}
.hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible{
  outline-color:#fff;
}

.container{width:min(1140px, calc(100% - 48px));margin:auto}
.narrow{width:min(760px, calc(100% - 48px));margin:auto}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 50;
  color:var(--ink);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.012em;
  margin:0 0 22px;
}
h1{
  font-size:clamp(2.6rem, 5.6vw, 5rem);     /* 42px → 80px max */
  font-weight:500;
  letter-spacing:-0.018em;
  line-height:1.06;
}
h2{
  font-size:clamp(2rem, 3.6vw, 3.2rem);     /* 32px → 51px max */
  font-weight:500;
  letter-spacing:-0.012em;
  line-height:1.1;
}
h3{font-size:1.3rem;font-weight:600;line-height:1.3}
h4{font-size:1.05rem;font-weight:600}

/* H1 auf Sub-Seiten ohne Hero-Bild – optisch wie ein Section-H2,
   semantisch aber das Haupt-Heading der Seite. */
.page-title{
  font-size:clamp(2rem, 3.6vw, 3.2rem);
  font-weight:500;
  letter-spacing:-0.012em;
  line-height:1.1;
}

/* WordPress-freundliche Hilfsklassen: ersetzen alte inline-styles. */
.main-offset{padding-top:128px}
.section--no-top{padding-top:0}
.tagline-meta{color:var(--muted);margin-top:28px;font-size:.92rem}
.tagline-meta strong{color:var(--ink);font-weight:600}
.note-link{color:var(--forest-link)}
.brand-name-light{color:#fff;font-weight:500}

p{margin:0 0 16px}

.eyebrow,.kicker{
  display:inline-block;
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 16px;
}
.hero .kicker{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(14,20,14,.85),0 2px 16px rgba(14,20,14,.6)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(32px, calc((100vw - 1360px)/2));
  /* KEINE Höhen-Transition – Logo-Größe & Position bleiben konstant */
  transition:background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled{
  height:128px;
  background:#f7f3e9;
  box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(20,30,22,.07);
}

.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{
  width:300px;
  height:auto;
  object-fit:contain;
  display:block;
  /* Logo bleibt in Größe & Position absolut identisch */
}
.site-header.scrolled .brand-logo{width:300px}
.brand-logo-light{
  /* Hero-State: identisches Logo, nur weiß eingefärbt */
  filter:brightness(0) invert(1);
}
.brand-logo-dark{display:none}
.site-header.scrolled .brand-logo-light{display:none}
.site-header.scrolled .brand-logo-dark{display:block}

.site-nav{display:flex;gap:30px;align-items:center;color:#fff}
.site-header.scrolled .site-nav{color:var(--ink)}
.nav-link{
  text-decoration:none;
  font-size:.92rem;
  font-weight:400;
  opacity:.72;
  position:relative;
  letter-spacing:.02em;
  transition:opacity .25s ease, color .25s ease;
}
.nav-link:hover,
.nav-link.active{
  opacity:1;
}

.nav-cta{
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius-btn);
  text-decoration:none;
  padding:11px 20px;
  font-weight:500;
  font-size:.88rem;
  background:transparent;
  color:#fff;
  transition:.25s;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-cta:hover{background:rgba(255,255,255,.12)}
.site-header.scrolled .nav-cta{
  border-color:var(--ink);
  color:var(--ink);
  background:transparent;
}
.site-header.scrolled .nav-cta:hover{background:var(--forest);border-color:var(--forest);color:#fff}

.menu-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
  /* Touch: kein Tap-Highlight auf iOS */
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle span{
  display:block;
  width:26px;
  height:2px;
  background:#fff;
  margin:5px 0;
  border-radius:2px;
  transform-origin:center;
  transition:transform .32s cubic-bezier(.4,0,.2,1),
             opacity  .22s ease,
             background .25s ease;
}
.site-header.scrolled .menu-toggle span{background:var(--ink)}

/* Hamburger → X */
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  color:#fff;
  width:100%;
  margin:0;
}
.home-hero{min-height:100vh;height:100vh}
.subhero{min-height:68vh}

/* Subhero – kleinere Typo, ruhigeres Bild, stärkerer Overlay */
.subhero h1{
  font-size:clamp(1.8rem, 3.8vw, 3.2rem);    /* 29px → 51px max, deutlich kleiner als Home */
  letter-spacing:-0.015em;
  line-height:1.12;
  margin-bottom:28px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.subhero .kicker{
  font-size:.7rem;
  letter-spacing:.32em;
  margin-bottom:22px;
}
.subhero .hero-content{
  width:min(720px, calc(100% - 40px));
  padding-top:0;
}
.subhero .hero-bg{
  transform:scale(1);                         /* kein Reingezoomt */
  animation:none;
  background-position:center 30%;             /* mehr Himmel, weniger Boden */
}
.subhero .hero-overlay{
  background:linear-gradient(180deg, rgba(20,28,22,.52) 0%, rgba(20,28,22,.18) 22%, rgba(20,28,22,.10) 55%, rgba(20,28,22,.45) 100%);
}

.hero-bg,.hero-overlay{position:absolute;inset:0}
.hero-bg{
  background-size:cover;
  background-position:center 38%;
  transform:scale(1.05);
  animation:slowZoom 28s ease-out forwards;
  will-change:transform;
}
video.hero-video{
  object-fit:cover;
  object-position:center;
  width:100%;
  height:100%;
  animation:none;
  transform:none;
}
/* Dreistufiges Overlay: oben dunkler für Nav-Lesbarkeit, Mitte transparent fürs Bild, unten leicht für CTA */
.hero-overlay{
  background:
    linear-gradient(180deg, rgba(20,28,22,.52) 0%, rgba(20,28,22,.18) 22%, rgba(20,28,22,.10) 55%, rgba(20,28,22,.45) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  width:min(900px, calc(100% - 40px));
  padding-top:40px;
}
.hero h1{
  color:#fff;
  font-weight:400;
  font-size:clamp(2.4rem, 5.2vw, 4.6rem);     /* 38px → 73px */
  letter-spacing:-0.02em;
  line-height:1.08;
  text-shadow:0 2px 24px rgba(0,0,0,.22);
  margin-bottom:36px;
}
.hero p.lead{
  color:rgba(255,255,255,.92);
  font-size:1.15rem;
  margin:0 auto 32px;
  font-weight:400;
  max-width:600px;
}

.scroll-hint{
  position:absolute;
  z-index:2;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  text-decoration:none;
  font-size:1.4rem;
  opacity:.7;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  animation:bounce 2.6s ease-in-out infinite;
  font-weight:300;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--forest);
  color:#fff;
  text-decoration:none;
  border:1px solid var(--forest);
  border-radius:var(--radius-btn);
  padding:13px 28px;
  font-family:var(--sans);
  font-weight:500;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.25s ease;
}
.btn:hover{background:var(--forest-2);border-color:var(--forest-2);transform:translateY(-1px)}

.btn-light{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
}
.btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-1px)}

.btn-white{
  background:#fff;
  color:var(--ink);
  border:1px solid #fff;
}
.btn-white:hover{background:rgba(255,255,255,.92);transform:translateY(-1px)}

.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:var(--forest);color:#fff;border-color:var(--forest)}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section.muted{background:var(--cream-2)}
.section.paper{background:var(--paper)}
.section-narrow{padding:72px 0}
.section-large{padding:128px 0}

.section-head{
  text-align:center;
  margin-bottom:56px;
}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{margin-bottom:12px}
.section-head p.lead{
  color:var(--muted);
  font-size:1.05rem;
  max-width:580px;
  margin:0 auto;
  line-height:1.6;
}
.section-head.row{
  display:flex;
  justify-content:space-between;
  align-items:end;
  text-align:left;
  gap:24px;
  flex-wrap:wrap;
}
.section-head.row > div{flex:1;min-width:260px}
.section-head.row a{color:var(--forest-link);text-decoration:none;font-weight:500}
.section-head.row a:hover{text-decoration:underline}

/* ---------- Split Layout ---------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.split.tight{gap:48px}
.split.wide{gap:96px}
.split.align-stretch{align-items:stretch}
.split.align-stretch > img.feature-img{
  height:100%;
  min-height:100%;
  aspect-ratio:auto;
  align-self:stretch;
}

/* ---------- Stats ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.stats > div{
  background:transparent;
  border:none;
  border-left:1px solid var(--line-strong);
  padding:8px 0 8px 24px;
  box-shadow:none;
}
.stats > div:first-child{border-left:none;padding-left:0}
.stats strong{
  display:block;
  font-family:var(--serif);
  font-size:3rem;
  font-weight:400;
  color:var(--ink);
  line-height:1;
  margin-bottom:8px;
  letter-spacing:-0.02em;
}
.stats span{
  color:var(--muted);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
}

/* ---------- Cards (Übernachten / Image cards) ---------- */
.cards{display:grid;gap:32px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr);margin-top:20px}

.image-card{
  background:transparent;
  border-radius:var(--radius-img);
  text-decoration:none;
  color:inherit;
  display:block;
  transition:.35s ease;
  overflow:hidden;
}
.image-card .img-wrap{
  border-radius:var(--radius-img);
  overflow:hidden;
  margin-bottom:22px;
  position:relative;
  aspect-ratio: 5 / 4;
  background:var(--cream-2);
}
.image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}
.image-card:hover img{transform:scale(1.04)}
.image-card .img-wrap > img{position:absolute;inset:0}
.image-card > div{padding:0 4px}
.image-card h3{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:500;
  margin-bottom:8px;
  color:var(--ink);
}
.image-card p{color:var(--muted);margin:0}

/* Fallback wenn img-wrap nicht im HTML ist – stylet das nackte img */
.image-card > img{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius:var(--radius-img);
  margin-bottom:24px;
  transition:transform .8s ease;
}
.image-card:hover > img{transform:scale(1.02)}

/* Premium Card / Weather Card */
.premium-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:40px;
  box-shadow:var(--shadow-sm);
}
.weather-card{display:grid;gap:24px}

/* ---------- Feature image (split sections) ---------- */
.feature-img{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:var(--radius-img);
  overflow:hidden;
}
.feature-img > img,
img.feature-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
img.feature-img{
  /* Wenn feature-img direkt auf img steht, aspect-ratio dort anwenden */
  aspect-ratio: 4 / 3;
  height:auto;
}

/* ---------- Bungalow-Slider ---------- */
.bungalow-slider{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-img);
  overflow:hidden;
  background:var(--paper);
  contain:layout style paint; /* isoliert Repaints vom Rest der Seite */
}
.bs-slide{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity 2.0s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  transform:translateZ(0); /* eigener Compositing-Layer ohne Speicherverschwendung */
}
.bs-slide.active{
  opacity:1;
  pointer-events:auto;
  will-change:opacity,transform; /* nur aktiver Slide beansprucht GPU-Hint */
  animation:bsKenBurns 11s ease-in-out forwards;
}
@keyframes bsKenBurns{
  from{transform:scale(1.05) translateZ(0)}
  to  {transform:scale(1.00) translateZ(0)}
}
.bs-dots{
  position:absolute;
  bottom:14px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:8px;
  z-index:2;
}
.bs-dot{
  width:8px;height:8px;
  border-radius:50%;
  border:none;padding:0;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.bs-dot.active{
  background:#fff;
  transform:scale(1.25);
}
@media(max-width:720px){
  .bungalow-slider{aspect-ratio:3/2}
}

/* ---------- Mini list (Icon-Chip-Items) ---------- */
.mini-list{
  display:grid;
  gap:22px;
  margin:30px 0;
  list-style:none;
  padding:0;
}
.mini-list span,
.mini-list li{
  position:relative;
  padding-left:62px;
  min-height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.mini-list span:before,
.mini-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:44px;
  height:44px;
  border-radius:50%;
  background-color:var(--sand);
  background-position:center;
  background-repeat:no-repeat;
  background-size:22px 22px;
}
.mini-list li.ic-water:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12c2 0 2-2 5-2s3 2 5 2 2-2 5-2 3 2 5 2'/><path d='M2 18c2 0 2-2 5-2s3 2 5 2 2-2 5-2 3 2 5 2'/></svg>");
}
.mini-list li.ic-tree:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 5 11h3l-4 6h5v5h6v-5h5l-4-6h3z'/></svg>");
}
.mini-list li.ic-car:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14M3 17l2-7c.3-1 1-2 2-2h10c1 0 1.7 1 2 2l2 7'/><circle cx='7' cy='17' r='2'/><circle cx='17' cy='17' r='2'/></svg>");
}
.mini-list li.ic-pin:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.mini-list li.ic-phone:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.mini-list li.ic-mail:before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.mini-list span strong,
.mini-list li strong{
  color:var(--ink);
  font-weight:600;
  font-size:1.02rem;
  display:block;
  margin-bottom:2px;
  font-family:var(--sans);
}
.mini-list span small,
.mini-list li small{
  color:var(--muted);
  font-size:.92rem;
  display:block;
}

/* Check list (allgemein) */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.check-list li{padding-left:32px;position:relative}
.check-list li:before{
  content:"";
  width:8px;height:8px;
  background:var(--forest);
  border-radius:50%;
  position:absolute;left:8px;top:.7em;
}

/* Inline-Link mit Pin (z.B. "Zur Anfahrt") */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--forest-link);
  text-decoration:none;
  font-weight:500;
  margin-top:8px;
}
.link-arrow:hover{text-decoration:underline}
.link-arrow svg{width:18px;height:18px;flex:none}

/* ---------- Galerie-Strip (Index) ---------- */
.gallery-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.gallery-strip img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:var(--radius-img);
}

/* ---------- Galerie (eigene Seite) ---------- */
.gallery-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:0 0 48px;
}
.gallery-filters button,
.filter-pill{
  background:var(--sand);
  color:var(--ink);
  border:none;
  padding:10px 22px;
  border-radius:var(--radius-btn);
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  transition:.2s;
}
.gallery-filters button.active,
.filter-pill.active{background:var(--forest);color:#fff}
.gallery-filters button:hover{background:var(--sand-2)}
.gallery-filters button.active:hover{background:var(--forest-2)}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  contain:layout;
}
.gallery-grid img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:var(--radius-img);
  cursor:pointer;
  /* Reveal-Transition (langer, weicher Bogen) – Hover-Duration wird unten überschrieben */
  transition: opacity .6s cubic-bezier(.25,.46,.45,.94),
              transform .6s cubic-bezier(.25,.46,.45,.94),
              box-shadow .35s ease;
  will-change:auto;
}
/* Hover: kurze, knackige Reaktion – nur duration überschreiben */
.gallery-grid img:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  transition-duration: .2s, .2s, .25s;
}

/* ---- Smooth Image Reveal ---- */
/* Skeleton-Hintergrund: wird sichtbar sobald das Bild noch lädt (durch Eltern-bg) */
main img:not(.brand-logo) { background:var(--cream-2); }

/* Initial: unsichtbar, leicht nach unten verschoben */
.img-reveal {
  opacity: 0;
  transform: translateY(10px);
  /* Transition für Bilder außerhalb der Gallery (Index, Lage etc.) */
  transition: opacity .6s cubic-bezier(.25,.46,.45,.94),
              transform .6s cubic-bezier(.25,.46,.45,.94);
}
/* Vollständig eingeblendet */
.img-reveal.img-visible {
  opacity: 1;
  transform: none;
}
/* Gallery-Grid: transition-delay entfernen nach reveal (kein delay beim Hover) */
.gallery-grid .img-reveal.img-visible { transition-delay: 0s !important; }

/* Gallery: Welleneffekt – Spalte 2 und 3 minimal verzögert beim Einblenden */
.gallery-grid .img-reveal:not(.img-visible):nth-child(3n+2) { transition-delay:.08s }
.gallery-grid .img-reveal:not(.img-visible):nth-child(3n+3) { transition-delay:.16s }

/* ---------- Wetter ---------- */
.weather-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.weather-item{
  border-top:1px solid var(--line-strong);
  padding-top:18px;
}
.weather-item span{color:var(--muted);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}
.weather-item strong{
  display:block;
  font-family:var(--serif);
  font-size:1.9rem;
  font-weight:500;
  color:var(--ink);
  margin-top:4px;
}

/* ---------- CTA-Band (Der See wartet) ---------- */
.cta-band{
  position:relative;
  color:#fff;
  text-align:center;
  padding:120px 0;
  background:#1a1f1c;
  overflow:hidden;
}
.cta-band:before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/fotos/campingplatz-flecken-zechlin-langer-holzsteg-abend-41.jpg') center/cover no-repeat;
  opacity:.78;
}
.cta-band:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(20,28,22,.35) 0%, rgba(20,28,22,.55) 100%);
}
.cta-band > .container{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:14px;font-size:clamp(1.8rem, 3.4vw, 3rem)}
.cta-band p{color:rgba(255,255,255,.9);font-size:1.05rem;margin-bottom:32px}

/* ---------- Tabellen / Preise ---------- */
.table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{
  text-align:left;
  padding:18px 22px;
  border-bottom:1px solid var(--line);
  font-size:.98rem;
}
th{background:var(--cream-2);color:var(--ink);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
tr:last-child td{border-bottom:none}
.note{color:var(--muted);font-size:.92rem}

/* Verfügbarkeits-Board (Legacy) */
.availability-board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:32px;
}
.availability-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  padding:24px;
}
.status-free{color:#2d6b3a;font-weight:600}
.status-booked{color:#a13a2e;font-weight:600}

/* ---------- Buchungskalender ---------- */
.booking-calendar{
  padding:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
}
.calendar-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.calendar-hint{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  font-style:italic;
}
.calendar-years{
  display:inline-flex;
  gap:4px;
  background:var(--cream-2);
  border-radius:var(--radius-pill);
  padding:4px;
}
.year-tab{
  background:transparent;
  border:0;
  font:inherit;
  font-weight:500;
  font-size:.92rem;
  color:var(--muted);
  padding:8px 18px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  letter-spacing:.04em;
  transition:.2s ease;
}
.year-tab:hover{color:var(--ink)}
.year-tab.active{
  background:var(--forest);
  color:#fff;
  box-shadow:0 4px 12px rgba(45,90,58,.22);
}

.calendar-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 -8px;
  padding:0 8px;
}
.calendar-table{
  width:100%;
  min-width:720px;
  border-collapse:separate;
  border-spacing:6px;
}
.calendar-table th,
.calendar-table td{
  padding:0;
  border:0;
  background:transparent;
  text-align:center;
}
.calendar-table thead th{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  padding:0 0 8px;
}
.calendar-table th.th-bungalow{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink);
  text-transform:none;
  letter-spacing:0;
  text-align:left;
  padding-right:12px;
  width:64px;
  min-width:64px;
  white-space:nowrap;
}
.calendar-table tbody th.th-bungalow{
  padding:0 12px 0 0;
}
.cal-cell{
  display:block;
  padding:14px 4px;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  text-decoration:none;
  border-radius:8px;
  text-align:center;
  letter-spacing:.04em;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  cursor:pointer;
}
.cal-cell:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(20,30,22,.12);
  filter:brightness(1.04);
}
.cal-cell:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
}

/* Status-Farben – ruhig, zur Cream/Forest-Palette passend */
.st-booked{
  background:#b85547;
  color:#fff;
}
.st-free{
  background:#3f8a52;
  color:#fff;
}
.st-request{
  background:#e9d4a8;
  color:#5a4520;
}
.st-closed{
  background:#e3ddcb;
  color:#8a8576;
  cursor:default;
  pointer-events:none;
}

.calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
  align-items:center;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:var(--body);
  font-weight:500;
}
.legend-dot{
  width:14px;
  height:14px;
  border-radius:4px;
  display:inline-block;
}
.dot-booked{background:#b85547}
.dot-free{background:#3f8a52}
.dot-request{background:#e9d4a8;border:1px solid #d3b97f}
.dot-closed{background:#e3ddcb;border:1px solid #cfc8b6}

.calendar-foot{
  margin:18px 0 0;
  font-size:.85rem;
  color:var(--muted);
}
.foot-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--forest);
  position:relative;
  flex:none;
}
.pulse::after{
  content:'';
  position:absolute;inset:-4px;
  border-radius:50%;
  background:var(--forest);
  opacity:.35;
  animation:pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing{
  0%{transform:scale(.6);opacity:.55}
  80%,100%{transform:scale(1.6);opacity:0}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  .booking-calendar{padding:22px}
  .calendar-toolbar{align-items:flex-start;flex-direction:column;gap:14px}
  .calendar-hint{font-size:.86rem}
  .cal-cell{padding:12px 4px;font-size:.74rem}
}

/* ---------- Form ---------- */
.inquiry-form,
.contact-form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ---------- Anfrage-Sektion: kompakter, ausgewogener Grid ---------- */
/* Anfrage-Steps: horizontale 3er-Leiste */
.anfrage-steps{
  list-style:none;
  padding:0;
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:760px;
  text-align:center;
}
.anfrage-steps li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.anfrage-step-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  background-color:var(--sand);
  background-position:center;
  background-repeat:no-repeat;
  background-size:22px 22px;
  border:1px solid var(--line);
  margin-bottom:4px;
  flex-shrink:0;
}
.anfrage-step-icon.ic-mail{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.anfrage-step-icon.ic-phone{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.anfrage-step-icon.ic-pin{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}
.anfrage-steps strong{
  color:var(--ink);
  font-weight:600;
  font-size:.95rem;
  display:block;
}
.anfrage-steps small{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.5;
  display:block;
}
/* Zentriertes Formular */
.anfrage-form-centered{
  max-width:640px;
  margin:0 auto;
  padding:36px;
  overflow:hidden; /* verhindert Überlauf von Inputs (v.a. type=date auf iOS) */
}
/* Legacy grid – nicht mehr verwendet, Fallback leer lassen */
.anfrage-grid{display:block}
.anfrage-grid > *{min-width:0}
@media (max-width: 900px){
  .anfrage-grid{display:block}
  .anfrage-steps{grid-template-columns:1fr;max-width:400px;text-align:left}
  .anfrage-steps li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
  .anfrage-step-icon{flex-shrink:0}
  .anfrage-form-centered{padding:26px}
}
label{
  display:grid;
  gap:8px;
  font-weight:500;
  font-size:.92rem;
  color:var(--ink);
  min-width:0;
  overflow:hidden;
}
input, textarea, select{
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-btn);
  background:#fff;
  padding:14px 16px;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
/* Verhindert iOS-Safari-Overflow bei type=date (eigene Mindestbreite des nativen Pickers) */
input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  box-sizing:border-box;
}
input::placeholder,textarea::placeholder{color:#a8a8a0}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(45,90,58,.12);
}

/* ---------- Kontakt-Karten (links Adress-Liste) ---------- */
.contact-info{display:grid;gap:28px}
.contact-info > div{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:18px;
  align-items:start;
}
.contact-info .ic{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--sand);
  display:grid;place-items:center;
  flex:none;
}
.contact-info .ic svg{width:20px;height:20px;color:var(--forest)}
.contact-info h4{font-size:1.05rem;margin:0 0 6px;font-family:var(--sans);font-weight:600;color:var(--ink)}
.contact-info p, .contact-info a{color:var(--muted);font-size:.98rem;margin:0;text-decoration:none;line-height:1.55}
.contact-info a:hover{color:var(--forest)}

/* ---------- Quick-Action-Button-Reihe (Kontakt) ---------- */
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.quick-actions .btn{padding:12px 22px;font-size:.82rem}

/* ---------- Karte / Map ---------- */
.map-card{
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  background:var(--paper);
}
.map-card iframe{
  width:100%;
  height:460px;
  border:0;
  display:block;
}

/* ---------- Kontakt-Sektion: ausgewogenes 2-Spalten-Layout ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:start;
}
.contact-grid > *{min-width:0}
.contact-h3{
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-0.01em;
  margin:0 0 28px;
  line-height:1.2;
}
.contact-aside{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.contact-aside .map-card iframe{height:420px}
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .contact-aside .map-card iframe{height:340px}
}

/* ---------- Link-Liste (Aktivitäten) ---------- */
.link-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.link-list a{
  background:#fff;
  padding:22px 26px;
  border-radius:var(--radius-card);
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--line);
  font-size:1rem;
  font-weight:500;
  transition:.2s;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.link-list a:after{content:"→";color:var(--forest);opacity:.7;transition:transform .2s}
.link-list a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
.link-list a:hover:after{transform:translateX(4px);opacity:1}

/* ---------- Legal Pages ---------- */
.legal{padding-top:140px;padding-bottom:96px;background:var(--paper)}
.legal h1{font-size:clamp(2rem, 3.4vw, 3rem);margin-bottom:28px}
.legal h2{font-size:1.4rem;margin-top:36px;margin-bottom:12px}
.legal p, .legal li{color:var(--body);line-height:1.7}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--forest);
  color:rgba(255,255,255,.86);
  padding:72px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.4fr 1fr;
  gap:48px;
}
.footer-logo{width:160px;margin-bottom:20px;filter:brightness(0) invert(1)}
.site-footer h3,.site-footer h4{
  color:#fff;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 22px;
}
.site-footer h3.brand-title{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  margin-bottom:14px;
}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.site-footer a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.96rem;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer p{color:rgba(255,255,255,.78);font-size:.96rem;line-height:1.7}
.footer-bottom{
  text-align:center;
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:64px;
  padding:24px 20px;
  font-size:.88rem;
  color:rgba(255,255,255,.6);
}
.btn-google{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
  color:rgba(255,255,255,.9);
  background:transparent;
  font-size:.88rem;
  font-weight:500;
  letter-spacing:.04em;
  text-decoration:none;
  transition:background .2s,border-color .2s,color .2s;
}
.btn-google:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff}
.btn-google svg{flex-shrink:0}

/* =========================================================
   PREMIUM-MODULE (inspiriert von Forsthofgut / Seezeitlodge)
   ========================================================= */

/* ---------- Refined Hero (langsamer Ken-Burns + edlere Typo) ---------- */
.hero h1{
  font-weight:400;
  letter-spacing:-0.02em;
}
.hero .kicker{
  font-size:.72rem;
  letter-spacing:.36em;
  margin-bottom:32px;
  opacity:.92;
}
/* ---------- Section-Index (01 — Camping) ---------- */
.section-index{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.section-index strong{
  font-family:var(--serif);
  font-size:1rem;
  font-weight:500;
  letter-spacing:0;
  color:var(--forest);
  font-feature-settings:"lnum";
  font-style:italic;
}
.section-index .rule{
  flex:1;
  height:1px;
  background:var(--line-strong);
  max-width:60px;
}

/* ---------- Universal Image-Frame (bulletproof aspect-ratio) ---------- */
.img-frame{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:var(--radius-img);
  overflow:hidden;
  background:transparent;
}
.img-frame > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 1.4s ease;
}
.img-frame:hover > img{transform:scale(1.04)}
.img-frame.portrait{aspect-ratio: 3 / 4}
.img-frame.square{aspect-ratio: 1 / 1}
.img-frame.wide{aspect-ratio: 16 / 9}
.img-frame.tall{aspect-ratio: 5 / 6}

/* ---------- Editorial Split (versetzt, mit Bildunterschrift) ---------- */
.editorial{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:72px;
  align-items:center;
}
.editorial.flip{ direction:rtl; }
.editorial.flip > *{ direction:ltr; }
.editorial figure{
  margin:0;
  width:100%;
}
.editorial figure .img-frame,
.editorial figure > img{
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:var(--radius-img);
}
.editorial figure > img{
  display:block;
  height:auto;
  object-fit:cover;
  object-position:center;
  transition:transform 1.4s ease;
}
.editorial figure:hover > img,
.editorial figure:hover .img-frame > img{transform:scale(1.025)}
.editorial figcaption{
  margin-top:12px;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
}
.editorial .copy{padding:0 8px}
.editorial .copy h2{margin-bottom:16px}
.editorial .copy p{font-size:1rem;line-height:1.75;max-width:460px;color:var(--body)}

/* ---------- Image Pair (Portrait + Landscape nebeneinander, leicht versetzt) ---------- */
.image-pair{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:24px;
  align-items:center;
}
.image-pair img{
  width:100%;
  object-fit:cover;
  border-radius:var(--radius-img);
}
.image-pair img:first-child{
  aspect-ratio: 3 / 4;
  margin-top:48px;
}
.image-pair img:last-child{
  aspect-ratio: 4 / 3;
  margin-bottom:48px;
}

/* ---------- Testimonial / Zitat ---------- */
.testimonial{
  background:var(--paper);
  text-align:center;
  padding:112px 0;
  position:relative;
}
.testimonial blockquote{
  margin:0 auto;
  max-width:780px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2.2rem);
  line-height:1.45;
  color:var(--ink);
  position:relative;
  letter-spacing:-0.005em;
}
.testimonial blockquote:before{
  content:"\201C";
  display:block;
  font-family:var(--serif);
  font-size:4.5rem;
  line-height:1;
  color:var(--forest);
  opacity:.22;
  margin-bottom:0;
}
.testimonial cite{
  display:block;
  margin-top:28px;
  font-style:normal;
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Quick-Booking-Bar (sticky bottom) ---------- */
.booking-bar{
  position:sticky;
  bottom:0;
  z-index:40;
  background:rgba(247,243,233,.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(20,30,22,.06);
  padding:14px 0;
}
.booking-bar .container{
  display:grid;
  grid-template-columns:auto 1fr 1fr 1fr auto;
  gap:18px;
  align-items:center;
}
.booking-bar .bb-label{
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.booking-bar label{
  display:grid;
  gap:4px;
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.booking-bar input,
.booking-bar select{
  padding:10px 12px;
  font-size:.95rem;
  border-radius:var(--radius-btn);
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink);
}
.booking-bar .btn{padding:13px 26px;white-space:nowrap}

/* ---------- Newsletter im Footer ---------- */
.footer-newsletter{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-card);
  padding:24px;
  margin-top:24px;
}
.footer-newsletter h4{
  margin-bottom:10px;
  letter-spacing:.16em;
}
.footer-newsletter p{
  color:rgba(255,255,255,.78);
  font-size:.92rem;
  margin-bottom:14px;
}
.footer-newsletter form{
  display:flex;
  gap:8px;
}
.footer-newsletter input{
  flex:1;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  padding:11px 14px;
  border-radius:var(--radius-btn);
  font-size:.92rem;
}
.footer-newsletter input::placeholder{color:rgba(255,255,255,.55)}
.footer-newsletter input:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.footer-newsletter button{
  background:#fff;
  color:var(--forest);
  border:none;
  padding:0 18px;
  border-radius:var(--radius-btn);
  font-weight:500;
  font-size:.92rem;
  cursor:pointer;
  transition:background .2s;
}
.footer-newsletter button:hover{background:rgba(255,255,255,.86)}
.footer-newsletter .nl-field-error{
  font-size:.82rem;color:#e07a7a;margin-top:6px;display:none;
}
.footer-newsletter .nl-field-error.visible{display:block}

/* ---------- Newsletter-Modal ---------- */
.nl-backdrop{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,24,17,.74);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  padding:20px;
}
.nl-backdrop[hidden]{display:none}
.nl-backdrop.is-open{animation:nlBdIn .2s ease both}
.nl-backdrop.is-open .nl-modal{animation:nlMdIn .26s ease both}
@keyframes nlBdIn{from{opacity:0}to{opacity:1}}
@keyframes nlMdIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.nl-modal{
  background:#fff;
  border-radius:var(--radius-card);
  box-shadow:0 28px 72px rgba(0,0,0,.24);
  padding:40px 36px 36px;
  width:100%;max-width:460px;
  position:relative;
}
.nl-modal-x{
  position:absolute;top:14px;right:16px;
  background:none;border:none;
  font-size:1.15rem;line-height:1;
  color:#888;cursor:pointer;
  padding:5px 7px;border-radius:4px;
  transition:color .15s;
}
.nl-modal-x:hover{color:var(--ink)}
.nl-modal h3{
  font-family:var(--serif);
  font-size:1.35rem;font-weight:400;
  color:var(--forest);
  margin-bottom:22px;
}
.nl-modal-label{
  font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:#888;
  margin-bottom:4px;
}
.nl-modal-addr{
  font-weight:500;color:var(--ink);
  margin-bottom:24px;word-break:break-all;
  font-size:.97rem;
}
.nl-modal-check{
  display:flex;gap:12px;align-items:flex-start;
  margin-bottom:26px;cursor:pointer;
}
.nl-modal-check input[type=checkbox]{
  margin-top:3px;flex-shrink:0;
  width:17px;height:17px;
  accent-color:var(--forest);cursor:pointer;
}
.nl-modal-check span{
  font-size:.88rem;color:#555;line-height:1.55;
}
.nl-modal-check a{
  color:var(--forest-link);text-decoration:underline;
}
.nl-modal-check a:hover{color:var(--forest)}
.nl-modal-btn{
  width:100%;justify-content:center;padding:14px;
  font-size:.88rem;
}
.nl-modal-btn:disabled{
  opacity:.38;cursor:not-allowed;pointer-events:none;
}
.nl-modal-ok{
  text-align:center;color:var(--forest);
  font-weight:500;font-size:.95rem;
  margin-top:0;padding:6px 0;
}
@media(max-width:480px){
  .nl-modal{padding:32px 20px 28px}
  .nl-modal h3{font-size:1.18rem}
}

/* ---------- Feature-Strip (drei Werte: Wald · See · Stille) ---------- */
.feature-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  border:0;
  margin-top:8px;
  position:relative;
}
.feature-strip::before{
  /* Eine einzelne, ruhige Hairline oben – kein geschlossener Rahmen */
  content:'';
  position:absolute;
  left:50%;
  top:-2px;
  width:48px;
  height:1px;
  background:var(--forest);
  opacity:.55;
  transform:translateX(-50%);
}
.feature-strip > div{
  padding:36px 12px 8px;
  text-align:center;
  border:0;
  position:relative;
}
.feature-strip > div + div::before{
  /* dezente vertikale Trennung nur zwischen den Spalten */
  content:'';
  position:absolute;
  left:0;
  top:24%;
  bottom:24%;
  width:1px;
  background:var(--line);
}
.feature-strip h3{
  font-family:var(--serif);
  font-size:1.7rem;
  font-weight:500;
  margin:0 0 10px;
  letter-spacing:-0.005em;
  color:var(--ink);
  line-height:1.1;
}
.feature-strip p{
  color:var(--muted);
  margin:0;
  font-size:.86rem;
  letter-spacing:.02em;
  line-height:1.55;
}

/* ---------- Icon-Grid (Aktivitäten / Ausstattung) ---------- */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:40px 16px;
  list-style:none;
  padding:0;
  margin:0;
}
.icon-grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.icon-grid.cols-4{grid-template-columns:repeat(4, 1fr)}
.icon-grid.cols-6{grid-template-columns:repeat(6, 1fr)}

.icon-grid li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.icon-grid .ico{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--sand);
  display:grid;
  place-items:center;
  transition:background .25s ease, transform .25s ease;
  flex:none;
}
.icon-grid li:hover .ico{
  background:var(--sand-2);
  transform:translateY(-2px);
}
.icon-grid .ico svg{
  width:24px;
  height:24px;
  color:var(--forest);
  stroke-width:1.7;
}
.icon-grid .ico .ico-text{
  color:var(--forest);
  font-family:var(--sans);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
}
.icon-grid .label{
  font-size:.92rem;
  color:var(--ink);
  font-weight:500;
  line-height:1.3;
}

@media (max-width: 980px){
  .icon-grid,
  .icon-grid.cols-3,
  .icon-grid.cols-4,
  .icon-grid.cols-5,
  .icon-grid.cols-6{
    grid-template-columns:repeat(3, 1fr);
    gap:32px 12px;
  }
}
@media (max-width: 560px){
  .icon-grid,
  .icon-grid.cols-3,
  .icon-grid.cols-4,
  .icon-grid.cols-5,
  .icon-grid.cols-6{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ---------- Sternenhimmel / Astrotourismus ---------- */
.starry-section{
  position:relative;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(60,90,130,.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(45,90,58,.22), transparent 70%),
    linear-gradient(180deg, #0a0f1a 0%, #0d1422 45%, #1a2230 100%);
  color:#fff;
  padding:128px 0;
  overflow:hidden;
}
.starry-section::before{
  /* Sternenfeld – Layer 1: helle Hauptsterne, statisch */
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 18% 32%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(2px 2px at 24% 9%, rgba(255,255,255,.98), transparent 60%),
    radial-gradient(1px 1px at 33% 46%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 51% 12%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(2px 2px at 60% 38%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 67% 18%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 28%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 85% 8%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(2px 2px at 92% 24%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 12% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 26% 78%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 48% 70%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 58% 92%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 64%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 81% 82%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 94% 72%, rgba(255,255,255,.9), transparent 60%),
    /* zusätzliche Hauptsterne, gleichmäßig verteilt */
    radial-gradient(1.5px 1.5px at 4% 38%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(1px 1px at 14% 86%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(2px 2px at 30% 30%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 36% 6%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 54%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(1px 1px at 54% 26%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 64% 4%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 72% 50%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 56%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1px 1px at 96% 40%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 6% 94%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.7), transparent 60%);
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:.92;
}
.starry-section::after{
  /* Layer 2: feine Hintergrund-Sterne (kleiner, dezenter) + sanfte Milchstraßen-Andeutung */
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(ellipse 55% 28% at 62% 42%, rgba(180,200,230,.07), transparent 72%),
    radial-gradient(.6px .6px at 3% 8%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(.6px .6px at 11% 22%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.8px .8px at 16% 50%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(.6px .6px at 21% 68%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 28% 58%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.8px .8px at 34% 24%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(.6px .6px at 39% 72%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 44% 14%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.8px .8px at 49% 40%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(.6px .6px at 53% 82%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 57% 56%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.8px .8px at 63% 26%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(.6px .6px at 68% 78%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 73% 12%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.8px .8px at 78% 48%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(.6px .6px at 83% 36%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 88% 88%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.8px .8px at 93% 60%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(.6px .6px at 97% 16%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 7% 76%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(.6px .6px at 19% 4%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.8px .8px at 41% 96%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(.6px .6px at 56% 8%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(.6px .6px at 75% 90%, rgba(255,255,255,.45), transparent 60%);
  background-repeat:no-repeat;
  pointer-events:none;
  opacity:.85;
}
.starry-section > .container{position:relative;z-index:1}

.starry-intro{text-align:center;max-width:720px;margin:0 auto}
.starry-intro .eyebrow{
  color:rgba(255,255,255,.65);
  margin-bottom:18px;
}
.starry-intro h2{
  color:#fff;
  font-weight:400;
  font-style:italic;
  letter-spacing:-0.015em;
  margin-bottom:24px;
}
.starry-intro p{
  color:rgba(255,255,255,.78);
  font-size:1.08rem;
  line-height:1.8;
  margin:0 0 14px;
}

.starry-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:48px;
  list-style:none;
  padding:0;
  margin:88px 0 0;
}
.starry-grid li{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:24px;
}
.starry-grid h3{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:500;
  font-style:italic;
  color:#fff;
  margin:0 0 10px;
  letter-spacing:-0.005em;
}
.starry-grid p{
  color:rgba(255,255,255,.72);
  font-size:.95rem;
  margin:0;
  line-height:1.65;
}

@media (max-width: 880px){
  .starry-section{padding:88px 0}
  .starry-grid{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:56px;
  }
}

/* ---------- Headline-Frame (kleine Wellen unter Headlines, optional) ---------- */
.title-rule{
  width:48px;
  height:1px;
  background:var(--forest);
  margin:0 auto 22px;
}

/* ---------- Anker-Offset (fixed Header kompensieren) ---------- */
/* Alle Anker-Ziele bekommen genug Abstand nach oben,
   damit der fixe Header die Sektion nicht verdeckt.      */
#kalender,
#anfrage,
#intro,
#weather,
[id]{
  scroll-margin-top: 148px;   /* Desktop: 128px Header + 20px Luft */
}
@media (max-width: 980px){
  #kalender,
  #anfrage,
  #intro,
  #weather,
  [id]{
    scroll-margin-top: 94px;  /* Mobil: 74px Header + 20px Luft */
  }
}

/* ---------- Reveal Animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease, transform .85s ease}
.reveal.visible{opacity:1;transform:none}

@keyframes slowZoom{to{transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- Responsive ---------- */

/* Hover-Effekte nur auf Geräten mit echter Hover-Fähigkeit –
   sonst kleben sie auf Touch-Geräten nach dem Antippen fest. */
@media (hover: none){
  .cal-cell:hover,
  .nav-link:hover,
  .link-arrow:hover,
  .gallery-filters button:hover,
  .premium-card:hover{
    transform:none;
    box-shadow:none;
    filter:none;
  }
}

/* Bilder, iframes, Videos nie über Viewport hinaus */
iframe, video{max-width:100%}

/* Tablets & kleinere Desktops */
@media (max-width: 980px){
  body{font-size:16px}
  .site-header{padding:0 20px;height:74px}
  .brand-logo{width:200px}
  .site-header.scrolled .brand-logo{width:200px}
  .menu-toggle{display:block;min-width:44px;min-height:44px}
  .site-nav{
    position:fixed;
    inset:74px 12px auto;
    display:flex;          /* immer flex – Animation über opacity/visibility */
    flex-direction:column;
    gap:18px;
    background:#fff;
    color:var(--ink);
    padding:28px;
    border-radius:var(--radius-card);
    box-shadow:var(--shadow);
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    /* Geschlossener Zustand */
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.98);
    transform-origin:top center;
    transition:opacity .28s cubic-bezier(.4,0,.2,1),
               transform .28s cubic-bezier(.4,0,.2,1),
               visibility .28s;
    /* Touch-Scroll auf iOS geschmeidig */
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* Kein Tap-Highlight */
    -webkit-tap-highlight-color:transparent;
  }
  .site-nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .site-nav .nav-link{color:var(--ink);font-size:1.05rem;padding:6px 0}
  .site-nav .nav-cta{
    border-color:var(--ink);
    color:var(--ink);
    margin-top:8px;
    text-align:center;
    padding:14px 20px;
  }

  /* Wenn der Header auf Sub-Seiten initial 74px hoch ist,
     muss der Inhalt auch nur 74px Abstand bekommen, nicht 128px. */
  .main-offset{padding-top:74px}

  .section{padding:64px 0}
  .section-narrow{padding:48px 0}
  .section-large{padding:80px 0}
  .section-head{margin-bottom:40px}

  .split,.split.tight{
    grid-template-columns:1fr;
    gap:40px;
  }
  .cards.two,.cards.three,
  .footer-grid,
  .availability-board,
  .link-list,
  .gallery-grid,
  .gallery-strip,
  .form-row{
    grid-template-columns:1fr;
  }
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  /* Stats: 3 Kennzahlen bleiben nebeneinander – sieht besser aus als gestapelt */
  .stats{grid-template-columns:repeat(3,1fr)}
  /* Wetter: 2 Spalten auf Tablet statt 1 */
  .weather-grid{grid-template-columns:repeat(2,1fr)}

  .hero{min-height:88vh}
  .home-hero{min-height:92vh;height:auto}
  .hero-content{padding-top:80px}
  h1{font-size:clamp(2.4rem, 10vw, 4.2rem)}
  h2{font-size:clamp(1.9rem, 6.6vw, 2.8rem)}
  .subhero h1{font-size:clamp(1.8rem, 7.5vw, 2.6rem)}

  .cta-band{padding:80px 0}
  .premium-card{padding:24px}

  .footer-grid{gap:36px}

  /* Premium-Module mobil */
  .editorial,
  .editorial.flip,
  .image-pair,
  .feature-strip,
  .booking-bar .container{
    grid-template-columns:1fr;
    gap:32px;
  }
  .editorial.flip{direction:ltr}
  .image-pair img:first-child,
  .image-pair img:last-child{margin:0;aspect-ratio: 4 / 3}
  .feature-strip{gap:24px}
  .feature-strip > div{
    border:none;
    padding:24px 16px;
  }
  .feature-strip > div + div::before{display:none}
  .testimonial{padding:80px 0}
  .booking-bar{display:none}    /* auf Mobile ausblenden, da zu eng */
  .footer-newsletter form{flex-direction:column}
  .footer-newsletter button{padding:14px 18px}

  /* Buttons: Touch-Target mindestens 44px */
  .btn,.nav-cta,.cta-band .btn{min-height:44px;padding-top:14px;padding-bottom:14px}

  /* Tabellen-Scroll-Hinweis: dezenter Verlauf am rechten Rand,
     damit der User merkt, dass horizontal gescrollt werden kann. */
  .calendar-scroll{
    background:
      linear-gradient(90deg, var(--cream) 0%, transparent 16px) left center / 32px 100% no-repeat,
      linear-gradient(-90deg, var(--cream) 0%, transparent 16px) right center / 32px 100% no-repeat;
  }

  /* Karte voller Breite */
  .map-card iframe{width:100%}
}

/* Smartphones */
@media (max-width: 560px){
  .gallery-grid{grid-template-columns:1fr}
  .container{width:calc(100% - 32px)}
  .narrow{width:calc(100% - 32px)}
  .nav-link{font-size:1rem}

  .brand-logo{width:170px}
  .site-header.scrolled .brand-logo{width:170px}
  .site-header{padding:0 16px}

  .section{padding:56px 0}
  .section-large{padding:64px 0}
  .section-head{margin-bottom:32px}

  /* Hero etwas kompakter, damit auf kleinen Phones nicht zu viel Leerraum entsteht */
  .home-hero{min-height:85vh}
  .subhero{min-height:56vh}
  .hero-content{padding-top:60px;width:calc(100% - 32px)}

  /* Premium-Cards mit weniger Innenpolster auf engen Screens */
  .premium-card{padding:20px}
  .anfrage-grid .contact-form.premium-card{padding:20px}
  .anfrage-form-centered{padding:20px}

  /* Kontakt-Aside Karte etwas kleiner */
  .contact-aside .map-card iframe{height:280px}

  /* Galerie-Filter-Pills mobile-tauglich */
  .gallery-filters{gap:8px;margin-bottom:32px}
  .gallery-filters button{padding:10px 16px;font-size:.9rem}

  /* Kalender-Zellen größer für saubere Touch-Targets */
  .cal-cell{padding:14px 4px;font-size:.78rem;min-height:44px}

  /* Footer-Newsletter-Input nicht zu klein wirken lassen */
  .footer-newsletter input{padding:14px 16px}

  /* Quick-Actions im Kontakt vertikal stapeln auf engen Screens */
  .quick-actions{flex-direction:column;align-items:stretch}
  .quick-actions .btn,.quick-actions .btn-ghost{text-align:center}

  /* Inline-CTA in section-head row stapeln */
  .section-head.row{flex-direction:column;align-items:flex-start;gap:16px}

  /* Testimonial kompakter auf kleinen Phones */
  .testimonial{padding:60px 0}

  /* Wetter: 1 Spalte auf kleinen Phones (2 Spalten reichen nicht mehr) */
  .weather-grid{grid-template-columns:1fr}
}

/* ================================================================
   MOBILE: Tabellen & Kalender – kein horizontales Scrollen
   ================================================================ */
@media (max-width: 700px){

  /* ---- 1. Preistabellen (2 Spalten): Flex-Zeilen ---- */
  .table-wrap table:not(.calendar-table):not(.bungalow-table){
    display:block;
    min-width:0;
  }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) thead{ display:none }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) tbody{ display:block }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) tr{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    padding:13px 16px;
    border-bottom:1px solid var(--line);
  }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) tr:last-child{ border-bottom:none }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) td{
    display:block;
    padding:0;
    border:none;
    font-size:.92rem;
    line-height:1.45;
  }
  .table-wrap table:not(.calendar-table):not(.bungalow-table) td:last-child{
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    text-align:right;
    flex-shrink:0;
  }

  /* ---- 2. Bungalow-Tabelle (6 Spalten): Card pro Bungalow ---- */
  .table-wrap table.bungalow-table{
    display:block;
    min-width:0;
  }
  .table-wrap table.bungalow-table thead{ display:none }
  .table-wrap table.bungalow-table tbody{ display:block; padding:8px }
  .table-wrap table.bungalow-table tr{
    display:block;
    padding:16px;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    margin-bottom:10px;
    background:#fff;
    position:relative;
  }
  .table-wrap table.bungalow-table tr:last-child{ margin-bottom:0 }
  .table-wrap table.bungalow-table td{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:8px;
    padding:5px 0;
    border:none;
    font-size:.9rem;
    line-height:1.4;
    white-space:normal;
  }
  /* Haus-Nummer: Serif-Heading + Preis inline */
  .table-wrap table.bungalow-table td:nth-child(1){
    font-family:var(--serif);
    font-size:1.35rem;
    font-weight:500;
    color:var(--ink);
    display:inline-block;
    padding-bottom:0;
    border:none;
  }
  /* Preis: absolut oben rechts im Card-Rahmen (position:relative liegt am tr) */
  .table-wrap table.bungalow-table td:nth-child(6){
    position:absolute;
    top:16px;
    right:16px;
    display:block;
    font-weight:700;
    font-size:1.15rem;
    color:var(--forest);
    padding:0;
    border:none;
  }
  /* Haus-Nummer bekommt Rechts-Abstand, damit Preis nicht überlappt */
  .table-wrap table.bungalow-table td:nth-child(1){
    padding-right:80px;
  }
  /* Ausstattung: volle Breite, kleine Schrift, nach Haus/Preis */
  .table-wrap table.bungalow-table td:nth-child(2){
    display:block;
    color:var(--muted);
    font-size:.87rem;
    margin:8px 0 6px;
    padding:8px 0 0;
    border-top:1px solid var(--line);
    clear:both;
  }
  .table-wrap table.bungalow-table td:nth-child(2)::before{
    content:attr(data-label) ": ";
    font-weight:600;
    color:var(--ink);
    font-size:.75rem;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  /* Betten, Haustier, Personen: Chips inline */
  .table-wrap table.bungalow-table td:nth-child(3),
  .table-wrap table.bungalow-table td:nth-child(4),
  .table-wrap table.bungalow-table td:nth-child(5){
    display:inline-flex;
    flex-direction:column;
    gap:2px;
    font-size:.8rem;
    background:var(--sand);
    padding:5px 10px;
    border-radius:4px;
    margin:4px 4px 0 0;
    vertical-align:top;
    white-space:nowrap;
  }
  .table-wrap table.bungalow-table td:nth-child(3)::before,
  .table-wrap table.bungalow-table td:nth-child(4)::before,
  .table-wrap table.bungalow-table td:nth-child(5)::before{
    content:attr(data-label);
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---- 3. Buchungskalender: Grid pro Bungalow-Zeile ---- */
  .booking-calendar{ padding:14px 12px }
  .calendar-scroll{ overflow:visible; background:none }

  .calendar-table{
    display:block;
    min-width:0;
    border-spacing:0;
  }
  .calendar-table thead{ display:none }
  .calendar-table tbody{ display:flex; flex-direction:column; gap:8px }

  /* Jede Zeile = ein Bungalow-Block mit 4er-Grid für Monate */
  .calendar-table tr{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    padding:12px;
    background:rgba(0,0,0,.03);
    border-radius:8px;
    border-spacing:0;
  }

  /* Bungalow-Name: komplette Breite */
  .calendar-table th.th-bungalow{
    grid-column:1 / -1;
    display:block;
    font-family:var(--sans);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
    padding:0 0 8px;
    width:auto;
    min-width:0;
    white-space:normal;
    border:none;
    text-align:left;
    background:none;
  }

  /* Monats-Zellen */
  .calendar-table td{
    display:block;
    padding:0;
    border:none;
    background:none;
  }
  .cal-cell{
    display:block;
    padding:9px 2px;
    font-size:.68rem;
    border-radius:6px;
    text-align:center;
    min-height:auto;
    letter-spacing:.02em;
  }

  /* Legende & Toolbar kompakter */
  .calendar-legend{ gap:10px; padding-top:12px; margin-top:14px }
  .legend-item{ font-size:.78rem; gap:7px }
  .calendar-toolbar{ gap:10px }
  .calendar-hint{ font-size:.78rem }
}

/* Sehr kleine Geräte (z.B. iPhone SE, ältere Android-Phones) */
@media (max-width: 380px){
  body{font-size:15px}
  h1{font-size:clamp(2.1rem, 9vw, 3.4rem)}
  h2{font-size:clamp(1.6rem, 7vw, 2rem)}
  .home-hero h1{font-size:clamp(2.4rem, 10.5vw, 3.8rem)}
  .subhero h1{font-size:clamp(1.7rem, 7vw, 2.4rem)}
  .stats strong{font-size:2.4rem}
  .premium-card{padding:18px}
  .anfrage-form-centered{padding:16px}
  .section{padding:48px 0}
  .testimonial{padding:48px 0}
}