/* =========================================================
   Gästehaus Ainser, Hagnau am Bodensee (Demo)
   Familiengeführte Frühstückspension, 300 m vom See, seit 1969.
   Anmutung: warm, natürlich, see-nah, ruhig, "Landhaus am See".
   Leitfarbe: Marken-Grün (Frosch/Reben/Garten). See-Blau als
   scharfer Sekundärakzent. Grundfläche warmes Cremeweiß, Sand/
   Greige als Landhaus-Wärme. Wellenlinien als dezentes Motiv,
   eigenes Frosch-/Seerosen-Emblem (neu gezeichnet, nicht kopiert).
   Fonts lokal (DSGVO): Spectral (Display), Instrument Sans (Body).
   Keine Fotos, nur Farbflächen, Verläufe, Grain, eigene SVG.
   ========================================================= */

/* ---------- Fonts (lokal gehostet, DSGVO) ---------- */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/spectral-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/spectral-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/spectral-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Palette + Tokens ---------- */
:root {
  /* Marken-Grün (Leitfarbe, Frosch/Reben) */
  --gruen:       #4e7734;   /* Primär, aus Logo gemessen */
  --gruen-tief:  #3d5e29;   /* dunkler Kontrast: Text/Header */
  --gruen-nacht: #2c451d;   /* tiefster Grund (Footer/Hero) */
  --gruen-frisch:#73ad45;   /* helles Frisch-Grün, Akzent sparsam */
  --gruen-blatt: #a8c98a;   /* helles Blattgrün auf dunklem Grund */
  --gruen-tint:  rgba(78, 119, 52, 0.09);
  --gruen-tint2: rgba(78, 119, 52, 0.15);

  /* See-Blau (scharfer Sekundärakzent / CTA) */
  --see:         #15779b;   /* Bodensee-Teal */
  --see-tief:    #11607d;   /* Hover/Tiefe */
  --see-hell:    #7fc1d6;   /* helles See-Blau auf dunklem Grund */
  --see-tint:    rgba(21, 119, 155, 0.10);

  /* Sand / Greige (Landhaus-Wärme, Reben) */
  --sand:        #cdbb9a;   /* Sand/Greige */
  --sand-tief:   #a9966f;
  --sand-tint:   rgba(205, 187, 154, 0.22);

  /* Grundflächen, warmes Cremeweiß */
  --creme:       #f8f7f2;   /* warmes Cremeweiß, Grundfläche */
  --creme-soft:  #efece1;   /* zweite warme Fläche */
  --surface:     #fffefb;   /* helle Karte */

  --text:        #2b2b2b;   /* dunkler Fließtext */
  --muted:       #5f5a50;   /* gedämpfter Text */
  --muted-warm:  #7a7164;
  --hairline:    rgba(43, 43, 43, 0.14);
  --hairline-2:  rgba(43, 43, 43, 0.07);
  --hairline-d:  rgba(248, 247, 242, 0.16);

  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-soft: 0 1px 2px rgba(44, 69, 29, 0.05),
                 0 8px 24px -12px rgba(44, 69, 29, 0.18);
  --shadow-card: 0 2px 6px rgba(44, 69, 29, 0.06),
                 0 24px 48px -28px rgba(44, 69, 29, 0.30);
  --shadow-lift: 0 4px 10px rgba(44, 69, 29, 0.08),
                 0 40px 70px -34px rgba(44, 69, 29, 0.40);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  background: var(--creme);
  line-height: 1.65;
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* dezenter Papier-/See-Grain über die Fläche, performant (fixed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(78, 119, 52, 0.05) 0.6px, transparent 0.6px);
  background-size: 4px 4px;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--see); text-decoration: none; }
a:hover { color: var(--see-tief); }

h1, h2, h3, h4 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gruen-tief);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding-inline: var(--pad); position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--see);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.7rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--see), var(--gruen-frisch));
}
.eyebrow.on-dark { color: var(--see-hell); }
.eyebrow.on-dark::before { background: linear-gradient(90deg, var(--see-hell), var(--gruen-blatt)); }

.accent { color: var(--see); }
.accent-green { color: var(--gruen); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--gruen);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-primary {
  background: var(--gruen);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(78, 119, 52, 0.7);
}
.btn-primary:hover {
  background: var(--gruen-tief);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(78, 119, 52, 0.75);
}
.btn-see {
  background: var(--see);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(21, 119, 155, 0.7);
}
.btn-see:hover {
  background: var(--see-tief);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(21, 119, 155, 0.75);
}
.btn-outline {
  background: transparent;
  color: var(--gruen-tief);
  border-color: var(--hairline);
}
.btn-outline:hover {
  border-color: var(--gruen);
  color: var(--gruen-tief);
  background: var(--gruen-tint);
  transform: translateY(-2px);
}
.btn-outline-light {
  background: rgba(248, 247, 242, 0.06);
  color: #fff;
  border-color: var(--hairline-d);
}
.btn-outline-light:hover {
  background: rgba(248, 247, 242, 0.14);
  color: #fff;
  border-color: rgba(248, 247, 242, 0.4);
  transform: translateY(-2px);
}

/* "Button-in-Button" Pin/Pfeil */
.btn .pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: -0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 0.4s var(--ease);
}
.btn:hover .pin { transform: translateX(2px) translateY(-1px); }

/* ---------- Demo-Leiste ---------- */
.demo-bar {
  position: relative;
  z-index: 30;
  background: var(--gruen-nacht);
  color: #e6ecdd;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
  padding: 0.55rem 1rem;
  letter-spacing: 0.01em;
}
.demo-bar strong { color: #fff; font-weight: 600; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(248, 247, 242, 0.82);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--hairline-2);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand .emblem { width: 42px; height: 42px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--gruen-tief);
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--see);
  font-weight: 600;
  margin-top: 1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  color: var(--gruen-tief);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nav-links a:hover { background: var(--gruen-tint); color: var(--gruen-tief); }
.nav-links a.active { color: var(--gruen); font-weight: 600; }
.nav-links a.active::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--gruen-frisch);
}
.nav-cta {
  background: var(--see) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--see-tief) !important; }
.nav-cta svg { width: 15px; height: 15px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 19px; height: 2px;
  background: var(--gruen-tief);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.2s ease;
}
.nav-toggle span::before { transform: translate(-50%, -7px); }
.nav-toggle span::after  { transform: translate(-50%, 5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 69, 29, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 18;
}
.nav-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(82vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 5.5rem 1.4rem 2rem;
    background: var(--creme);
    box-shadow: -20px 0 60px -30px rgba(44, 69, 29, 0.6);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 19;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 0.85rem 1rem; font-size: 1.05rem; border-radius: 12px; }
  .nav-links a.active::before { display: none; }
  .nav-cta { justify-content: center; margin-top: 0.6rem; }
}

/* ---------- Wellen-Trenner (dezentes Motiv) ---------- */
.wave-sep { display: block; width: 100%; height: auto; }
.wave-sep path { fill: currentColor; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #eef3e6;
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(21, 119, 155, 0.55), transparent 55%),
    radial-gradient(90% 90% at 12% 95%, rgba(115, 173, 69, 0.30), transparent 60%),
    linear-gradient(160deg, var(--gruen-tief) 0%, var(--gruen-nacht) 70%, #233a17 100%);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem);
  overflow: hidden;
}
.hero .wrap { z-index: 2; }
/* dezente Wellenlinien als Hintergrundmotiv */
.hero-waves {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.1rem);
  line-height: 1.04;
  margin-bottom: 0.6rem;
}
.hero h1 .accent { color: var(--see-hell); }
.hero-lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: #dbe4ce;
  max-width: 40ch;
  margin: 0 0 1.8rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }
.hero-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--gruen-blatt);
}
.hero-note svg { width: 18px; height: 18px; flex: none; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline-d);
}
.hero-meta .item .k {
  display: block;
  font-family: "Spectral", serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
}
.hero-meta .item .l {
  display: block;
  font-size: 0.82rem;
  color: #b9c7a6;
  margin-top: 2px;
}

/* Hero-Karte mit Emblem (Doppelrand) */
.hero-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 0.6rem;
  background: rgba(248, 247, 242, 0.07);
  border: 1px solid var(--hairline-d);
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.55);
}
.hero-card-inner {
  border-radius: calc(var(--radius-xl) - 0.6rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(21, 119, 155, 0.35), transparent 60%),
    linear-gradient(165deg, #355425, #25401a);
  border: 1px solid rgba(168, 201, 138, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}
.hero-card .crest { width: clamp(150px, 28vw, 220px); margin: 0 auto 1rem; }
.hero-card .card-wordmark {
  display: block;
  font-family: "Spectral", serif;
  color: #fff;
  line-height: 1.04;
  margin-bottom: 0.5rem;
}
.hero-card .cw1 { font-size: 1.05rem; font-weight: 400; color: var(--gruen-blatt); letter-spacing: 0.04em; }
.hero-card .cw2 { font-size: 1.7rem; font-weight: 700; display: block; }
.hero-card .cap {
  font-size: 0.88rem;
  color: #cdd8bd;
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
}
.hero-card .cap b { color: #fff; font-weight: 600; }

/* ---------- Sektionen ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }
.section.tint { background: var(--creme-soft); }
.section.green-deep {
  background:
    radial-gradient(100% 100% at 80% 10%, rgba(21, 119, 155, 0.4), transparent 55%),
    linear-gradient(160deg, var(--gruen-tief), var(--gruen-nacht));
  color: #eef3e6;
}
.section.green-deep h2, .section.green-deep h3 { color: #fff; }

.section-head { max-width: 640px; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.7rem);
}
.section-head p {
  color: var(--muted);
  font-size: 1.06rem;
  margin: 0.4rem 0 0;
}
.section.green-deep .section-head p { color: #cdd8bd; }

.lead-para {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.4;
  color: var(--gruen-tief);
  max-width: 28ch;
}

/* ---------- Karten-Grid (Vorteile / Inklusivleistungen) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.feature {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.feature .ic {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--gruen-tint2);
  color: var(--gruen);
  margin-bottom: 1rem;
}
.feature .ic.see { background: var(--see-tint); color: var(--see); }
.feature .ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.18rem; margin-bottom: 0.35rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- Split (Bild-Ersatz + Text) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split.reverse .split-visual { order: 2; }
.split-text h2 { margin-bottom: 0.8rem; }
.split-text p { color: var(--muted); }
.split-text .btn { margin-top: 1.2rem; }

/* dekoratives "Bild" aus Farbe + Wellen + Emblem (kein Foto) */
.visual-card {
  position: relative;
  border-radius: var(--radius-xl);
  min-height: 340px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.visual-card.lake {
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(165deg, #2f7c9b 0%, var(--see-tief) 55%, #0e4d66 100%);
  color: #eaf6fa;
}
.visual-card.garden {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(160deg, var(--gruen-frisch) 0%, var(--gruen) 55%, var(--gruen-tief) 100%);
  color: #f2f7ea;
}
.visual-card.sand-bg {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(160deg, #ddccac 0%, var(--sand) 55%, var(--sand-tief) 100%);
  color: #4a3f2a;
}
.visual-card .vc-waves {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  opacity: 0.45;
  pointer-events: none;
}
.visual-card .vc-emblem { width: clamp(110px, 22vw, 160px); margin: 0 auto 1rem; position: relative; }
.visual-card .vc-label {
  position: relative;
  font-family: "Spectral", serif;
  font-weight: 600;
  font-size: 1.3rem;
}
.visual-card .vc-sub { position: relative; font-size: 0.9rem; opacity: 0.92; margin-top: 0.2rem; }

/* Foto-Platzhalter-Hinweis */
.photo-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  background: var(--see-tint);
  border: 1px dashed rgba(21, 119, 155, 0.4);
  border-radius: 14px;
  font-size: 0.9rem;
  color: var(--see-tief);
}
.photo-hint svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--see); }

/* ---------- Zimmer-Karten ---------- */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
}
.room {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
.room:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.room-top {
  position: relative;
  height: 150px;
  display: flex;
  align-items: flex-end;
  padding: 1.1rem 1.3rem;
  color: #fff;
  overflow: hidden;
}
.room-top.t1 { background: linear-gradient(150deg, #2f7c9b, #11607d); }
.room-top.t2 { background: linear-gradient(150deg, var(--gruen-frisch), var(--gruen)); }
.room-top.t3 { background: linear-gradient(150deg, #b9a87f, var(--sand-tief)); color: #fff; }
.room-top.t4 { background: linear-gradient(150deg, #3f6b8a, #0e4d66); }
.room-top .room-waves { position: absolute; left: 0; right: 0; bottom: -1px; opacity: 0.5; }
.room-top .room-cat {
  position: relative;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.room-body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.room-body h3 { font-size: 1.3rem; margin-bottom: 0.15rem; }
.room-loc { font-size: 0.85rem; color: var(--see); font-weight: 600; margin-bottom: 0.9rem; }
.room-feat { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.room-feat li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.92rem; color: var(--muted);
}
.room-feat li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--gruen); }
.room-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-2);
}
.room-price { font-weight: 600; color: var(--gruen-tief); font-size: 0.95rem; }
.room-price span { display: block; font-size: 0.76rem; color: var(--muted-warm); font-weight: 400; }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.84rem; font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--gruen-tint);
  color: var(--gruen-tief);
}
.badge svg { width: 15px; height: 15px; color: var(--gruen); }
.badge.see { background: var(--see-tint); color: var(--see-tief); }
.badge.see svg { color: var(--see); }

/* ---------- Inklusiv-Liste ---------- */
.incl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}
.incl {
  display: flex; align-items: flex-start; gap: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
}
.incl svg { width: 22px; height: 22px; flex: none; color: var(--gruen); margin-top: 2px; }
.incl b { display: block; color: var(--gruen-tief); font-size: 1rem; }
.incl span { font-size: 0.88rem; color: var(--muted); }

/* ---------- Timeline (Geschichte) ---------- */
.timeline { position: relative; margin-top: 1rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 11px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--gruen-frisch), var(--see));
  opacity: 0.5;
}
.tl-item { position: relative; padding: 0 0 1.7rem 2.4rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: 4px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--creme);
  border: 3px solid var(--gruen);
}
.tl-year {
  font-family: "Spectral", serif;
  font-weight: 700;
  color: var(--see);
  font-size: 1.05rem;
}
.tl-item p { margin: 0.1rem 0 0; color: var(--muted); }

/* ---------- Frühstück-Liste ---------- */
.menu-list { display: grid; gap: 0.4rem; margin-top: 1rem; }
.menu-row {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.menu-row:last-child { border-bottom: 0; }
.menu-row .mr-name { font-family: "Spectral", serif; font-weight: 600; color: var(--gruen-tief); font-size: 1.1rem; }
.menu-row .mr-dots { flex: 1; border-bottom: 1px dotted var(--hairline); transform: translateY(-3px); }
.menu-row .mr-note { color: var(--muted); font-size: 0.92rem; text-align: right; max-width: 50%; }

/* ---------- Aufzählung mit Häkchen ---------- */
.check-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--muted); }
.check-list li svg { width: 20px; height: 20px; flex: none; color: var(--gruen); margin-top: 3px; }
.check-list.on-dark li { color: #d4ddc6; }
.check-list.on-dark li svg { color: var(--gruen-blatt); }

/* ---------- Umgebung / Ausflug-Pills ---------- */
.place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.place {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  padding: 1.3rem 1.3rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-soft);
}
.place:hover { transform: translateY(-3px); }
.place .ic { color: var(--see); margin-bottom: 0.7rem; }
.place .ic svg { width: 26px; height: 26px; }
.place h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.place p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ---------- CTA-Streifen ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: clamp(2.2rem, 5vw, 3.4rem);
  text-align: center;
  color: #eef3e6;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(21, 119, 155, 0.55), transparent 55%),
    linear-gradient(160deg, var(--gruen-tief), var(--gruen-nacht));
  box-shadow: var(--shadow-lift);
}
.cta-band h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-band p { color: #cdd8bd; max-width: 44ch; margin: 0 auto 1.6rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta-band .cb-waves { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0.4; pointer-events: none; }

/* ---------- Kontaktformular ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.contact-info .ci-item {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline-2);
}
.contact-info .ci-item:last-child { border-bottom: 0; }
.contact-info .ci-ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--gruen-tint2);
  color: var(--gruen);
}
.contact-info .ci-ic svg { width: 21px; height: 21px; }
.contact-info .ci-k { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-warm); font-weight: 600; }
.contact-info .ci-v { font-family: "Spectral", serif; font-weight: 600; color: var(--gruen-tief); font-size: 1.1rem; }
.contact-info .ci-v a { color: var(--gruen-tief); }
.contact-info .ci-v a:hover { color: var(--see); }

.form-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--see-tint), transparent 55%),
    var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: var(--shadow-card);
}
.form-card h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.form-card > p { color: var(--muted); margin: 0 0 1.4rem; font-size: 0.95rem; }
.form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--gruen-tief); }
.field label .req { color: var(--see); }
.field input, .field textarea {
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--creme);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-warm); opacity: 0.8; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--see);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--see-tint);
}
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.4rem; }
.form-note { font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.form-note svg { width: 16px; height: 16px; color: var(--gruen); flex: none; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--gruen-nacht);
  color: #c9d4ba;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-waves { position: absolute; left: 0; right: 0; top: -1px; color: var(--gruen-nacht); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand .brand-word { color: #fff; }
.footer-brand .emblem { width: 44px; height: 44px; }
.footer-brand p { font-size: 0.92rem; color: #aebb9d; max-width: 32ch; margin: 0.9rem 0 0; }
.footer-col h4 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gruen-blatt);
  margin-bottom: 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: #c9d4ba; font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-d);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: 0.82rem;
  color: #9aa88a;
}
.footer-bottom a { color: #c9d4ba; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .fb-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* ---------- Prose (Rechtsseiten) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin: 2.2rem 0 0.6rem; }
.prose h3 { font-size: 1.15rem; margin: 1.6rem 0 0.4rem; color: var(--gruen); }
.prose p, .prose li { color: var(--muted); }
.prose a { color: var(--see); word-break: break-word; }
.prose ul { padding-left: 1.2rem; }
.prose .lead { font-size: 1.1rem; color: var(--text); }

.notice {
  display: flex; gap: 0.9rem;
  background: var(--see-tint);
  border: 1px solid rgba(21, 119, 155, 0.3);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0 2rem;
}
.notice svg { width: 24px; height: 24px; flex: none; color: var(--see); margin-top: 2px; }
.notice b { color: var(--see-tief); }
.notice p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; }

.page-hero {
  position: relative;
  color: #eef3e6;
  background:
    radial-gradient(110% 120% at 90% 0%, rgba(21, 119, 155, 0.5), transparent 55%),
    linear-gradient(160deg, var(--gruen-tief), var(--gruen-nacht));
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(3.4rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero .wrap { z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); }
.page-hero p { color: #cdd8bd; max-width: 50ch; font-size: 1.08rem; margin: 0.5rem 0 0; }
.page-hero .crumb { font-size: 0.82rem; color: var(--gruen-blatt); margin-bottom: 0.8rem; letter-spacing: 0.04em; }
.page-hero .crumb a { color: var(--see-hell); }
.page-hero .ph-waves { position: absolute; left: 0; right: 0; bottom: -2px; opacity: 0.5; pointer-events: none; z-index: 1; }

/* ---------- Reveal-Animation ---------- */
.reveal {
  animation: reveal-in linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* In dunklen Heros nicht über Scroll steuern (sind sofort sichtbar) */
.hero .reveal, .page-hero .reveal {
  animation-timeline: auto;
  animation: hero-in 0.8s var(--ease-soft) both;
  animation-delay: var(--d, 0s);
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Fallback ohne scroll-driven animations */
.no-vt .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); animation: none; }
.no-vt .reveal.is-in { opacity: 1; transform: none; }
.no-vt .hero .reveal, .no-vt .page-hero .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero .reveal, .page-hero .reveal { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 460px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-visual { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .hero-meta { grid-template-columns: 1fr; gap: 0.7rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .menu-row { flex-wrap: wrap; }
  .menu-row .mr-note { max-width: 100%; text-align: left; }
  .room-foot { flex-direction: column; align-items: flex-start; }
}