/* =========================================================================
   ALMVITA — Design-System
   Premium, ruhig, edel, viel Weißraum.
   fonts.css ist separat eingebunden -> hier KEINE @font-face / @import.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variablen
   ------------------------------------------------------------------------- */
:root {
  /* Farben */
  --bg:#fbf9f5;
  --sand:#f1ece3;
  --ink:#211f1b;
  --muted:#6f6657;
  --line:#e4ddd1;
  --brass:#a9854f;
  --brass-2:#c2a572;
  --brass-soft:#e9c98e;
  --forest:#2b3a33;
  --forest-2:#1f2a25;
  --white:#ffffff;

  /* Schriften */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Maße */
  --wrap:1180px;
  --wrap-narrow:820px;
  --pad:24px;
  --radius:3px;
  --radius-pill:999px;

  /* Schatten */
  --shadow-sm:0 1px 2px rgba(33,31,27,.05);
  --shadow:0 10px 30px rgba(33,31,27,.08);
  --shadow-lg:0 22px 60px rgba(33,31,27,.16);

  /* Bewegung */
  --t:.28s cubic-bezier(.4,0,.2,1);
  --t-slow:.5s cubic-bezier(.4,0,.2,1);

  /* Header-Höhe */
  --header-h:76px;
}

/* -------------------------------------------------------------------------
   2. Reset / Basis
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing:border-box; }

* { margin:0; }

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body {
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,
picture,
svg,
video {
  display:block;
  max-width:100%;
  height:auto;
}

a { color:inherit; text-decoration:none; }

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:none;
}

input,
textarea,
select { font:inherit; color:inherit; }

ul,
ol { list-style:none; padding:0; }

/* Sichtbare Fokus-Outlines */
:focus-visible {
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

/* -------------------------------------------------------------------------
   3. Typografie
   ------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  color:var(--ink);
  letter-spacing:.005em;
}

h1 { font-size:clamp(2.5rem,6vw,4.4rem); }
h2 { font-size:clamp(1.9rem,3.5vw,2.9rem); }
h3 { font-size:1.3rem; line-height:1.25; }
h4 { font-size:1.05rem; }

p { color:inherit; }
p + p { margin-top:1em; }

strong,b { font-weight:600; }

.eyebrow {
  display:inline-block;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--brass);
  margin-bottom:.9rem;
}

.lead {
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.6;
  color:var(--muted);
}

.muted { color:var(--muted); }
.center { text-align:center; }

/* Trennstrich */
.rule {
  width:48px;
  height:1px;
  background:var(--brass);
  border:0;
  margin:1.4rem 0;
}
.center .rule,
.rule.center { margin-left:auto; margin-right:auto; }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.wrap {
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.wrap-narrow {
  width:100%;
  max-width:var(--wrap-narrow);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section { padding-block:clamp(64px,9vw,120px); }
.section--sand { background:var(--sand); }
.section--forest { background:var(--forest); color:#eee; }

/* Helle Typo auf dunklen Flächen */
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 { color:#f4f1ea; }
.section--forest .lead,
.section--forest .muted { color:#cfcabf; }
.section--forest .eyebrow { color:var(--brass-soft); }
.section--forest .rule { background:var(--brass-soft); }
.section--forest a:not(.btn) { color:var(--brass-soft); }

/* Raster */
.grid-2,
.grid-3,
.grid-4 {
  display:grid;
  gap:28px;
}
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

@media (max-width:980px) {
  .grid-3,
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------
   5. Header / Navigation
   ------------------------------------------------------------------------- */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,249,245,.82);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:background var(--t), box-shadow var(--t), height var(--t);
}
.site-header.scrolled {
  background:rgba(251,249,245,.96);
  box-shadow:var(--shadow-sm);
}

.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  transition:height var(--t);
}
.site-header.scrolled .nav { height:66px; }

.nav-logo { display:inline-flex; align-items:center; }
.nav-logo img {
  height:46px;
  width:auto;
  transition:height var(--t);
}
.site-header.scrolled .nav-logo img { height:40px; }

.nav-menu {
  display:flex;
  align-items:center;
  gap:30px;
}
.nav-menu a {
  position:relative;
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
  transition:color var(--t);
}
.nav-menu a:not(.btn)::after {
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--brass);
  transition:width var(--t);
}
.nav-menu a:not(.btn):hover { color:var(--brass); }
.nav-menu a:not(.btn):hover::after { width:100%; }
.nav-menu a.is-active,
.nav-menu a[aria-current="page"] { color:var(--brass); }
.nav-menu a.is-active::after,
.nav-menu a[aria-current="page"]::after { width:100%; }

.nav-cta { margin-left:6px; }
.nav-cta::after { display:none !important; }

/* Hamburger */
.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  margin-right:-8px;
  z-index:120;
}
.nav-toggle span {
  display:block;
  width:24px; height:2px;
  margin-inline:auto;
  background:var(--ink);
  border-radius:2px;
  transition:transform var(--t), opacity var(--t);
}
body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Drawer */
@media (max-width:920px) {
  .nav-toggle { display:flex; }

  /* backdrop-filter macht den Header zum Bezugsrahmen fuer position:fixed -
     der Drawer wuerde sonst auf Header-Hoehe abgeschnitten (iPhone/Safari). */
  .site-header,
  .site-header.scrolled {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(251,249,245,.98);
  }

  .nav-menu {
    position:fixed;
    inset:0 0 0 auto;
    width:min(86vw,360px);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    padding:calc(var(--header-h) + 24px) 32px 40px;
    background:var(--bg);
    border-left:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);
    transition:transform var(--t-slow);
    overflow-y:auto;
  }
  body.nav-open .nav-menu { transform:translateX(0); }

  .nav-menu a {
    width:100%;
    padding:14px 0;
    font-size:1.15rem;
    border-bottom:1px solid var(--line);
  }
  .nav-menu a::after { display:none; }
  .nav-cta {
    margin-top:20px;
    margin-left:0;
    width:100%;
    justify-content:center;
    border-bottom:0 !important;
  }

  /* Overlay hinter dem Drawer */
  body.nav-open::after {
    content:"";
    position:fixed;
    inset:0;
    background:rgba(33,31,27,.4);
    z-index:90;
  }
}

/* -------------------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 26px;
  border-radius:2px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t),
             transform var(--t), box-shadow var(--t);
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn--primary {
  background:var(--brass);
  color:#fff;
  border-color:var(--brass);
}
.btn--primary:hover {
  background:#946f3d;
  border-color:#946f3d;
  box-shadow:var(--shadow);
}

.btn--ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn--ghost:hover {
  background:var(--ink);
  color:#fff;
}

.btn--light {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.7);
}
.btn--light:hover {
  background:#fff;
  color:var(--ink);
  border-color:#fff;
}

.btn--block { width:100%; }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero {
  position:relative;
  display:flex;
  align-items:center;
  min-height:88vh;
  color:#fff;
  overflow:hidden;
}
.hero-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}
.hero-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(31,42,37,.35) 0%,
    rgba(31,42,37,.45) 45%,
    rgba(31,42,37,.78) 100%);
}
.hero-inner {
  position:relative;
  z-index:1;
  max-width:760px;
  padding-block:80px;
}
.hero h1 { color:#fff; }
.hero .eyebrow { color:var(--brass-soft); }
.hero .lead { color:rgba(255,255,255,.9); }
.hero .rule { background:var(--brass-soft); }
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:2rem;
}

/* Innenseiten-Hero */
.page-hero {
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:46vh;
  color:#fff;
  overflow:hidden;
}
.page-hero .hero-bg::after {
  background:linear-gradient(180deg,
    rgba(31,42,37,.3) 0%,
    rgba(31,42,37,.6) 100%);
}
.page-hero .hero-inner { padding-block:48px; }
.page-hero h1 { color:#fff; }
.page-hero p { color:rgba(255,255,255,.9); max-width:640px; }

/* Breadcrumb */
.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4em;
  font-size:.85rem;
  margin-bottom:1rem;
  color:rgba(255,255,255,.8);
}
.breadcrumb a:hover { color:#fff; text-decoration:underline; }
.breadcrumb span[aria-current],
.breadcrumb .current { color:#fff; }
.breadcrumb li:not(:last-child)::after,
.breadcrumb a:not(:last-child)::after { content:" / "; margin-left:.4em; opacity:.6; }
/* Breadcrumb außerhalb Hero (muted) */
:not(.page-hero) > .breadcrumb,
.breadcrumb--muted { color:var(--muted); }
:not(.page-hero) > .breadcrumb a:hover,
.breadcrumb--muted a:hover { color:var(--brass); }

/* -------------------------------------------------------------------------
   8. Karten
   ------------------------------------------------------------------------- */
.card {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

/* Apartment-Karte */
.apt-card {
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t);
}
.apt-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}
.apt-card-img {
  position:relative;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.apt-card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--t-slow);
}
.apt-card:hover .apt-card-img,
.apt-card:hover .apt-card-img img { transform:scale(1.04); }

.apt-card-body {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:24px;
  flex:1;
}
.apt-card-body h3 { font-family:var(--serif); }
.apt-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.4em;
  font-size:.9rem;
  color:var(--muted);
}
.apt-meta > *:not(:last-child)::after { content:" · "; margin-left:.4em; }
.apt-card-footer {
  margin-top:auto;
  padding-top:1rem;
}

/* Badges / Pills */
.badge,
.pill {
  display:inline-flex;
  align-items:center;
  gap:.4em;
  padding:.35em .8em;
  border-radius:var(--radius-pill);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1;
  background:var(--sand);
  color:var(--muted);
}
.badge--live {
  background:rgba(43,58,51,.1);
  color:var(--forest);
}
.badge--live::before {
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:#3f8a5e;
}
.badge--soon {
  background:var(--sand);
  color:var(--muted);
}
.badge--viz {
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  background:rgba(33,31,27,.6);
  color:#fff;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* -------------------------------------------------------------------------
   9. Galerie + Lightbox
   ------------------------------------------------------------------------- */
.gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gallery-item {
  position:relative;
  aspect-ratio:1;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  cursor:zoom-in;
  overflow:hidden;
  transition:filter var(--t), transform var(--t);
}
.gallery-item:hover { filter:brightness(1.06); transform:scale(1.01); }
.gallery-item.tall { grid-row:span 2; aspect-ratio:auto; }

@media (max-width:640px) {
  .gallery { grid-template-columns:repeat(2,1fr); }
}

/* Lightbox (per JS erzeugt) */
.lightbox {
  position:fixed;
  inset:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 6vw;
  background:rgba(20,18,15,.94);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t), visibility var(--t);
}
.lightbox.is-open { opacity:1; visibility:visible; }
.lightbox img {
  max-width:100%;
  max-height:90vh;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:1.6rem;
  line-height:1;
  transition:background var(--t);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background:rgba(255,255,255,.22); }
.lightbox-close { top:24px; right:24px; }
.lightbox-prev { left:18px; top:50%; transform:translateY(-50%); }
.lightbox-next { right:18px; top:50%; transform:translateY(-50%); }

@media (max-width:640px) {
  .lightbox-prev { left:10px; }
  .lightbox-next { right:10px; }
  .lightbox-close { top:14px; right:14px; }
}

/* -------------------------------------------------------------------------
   10. Ausstattung / Fakten / Stats
   ------------------------------------------------------------------------- */
.amen-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px 28px;
}
.amen-list li {
  position:relative;
  padding-left:1.6em;
  color:var(--ink);
}
.amen-list li::before {
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--brass);
}
@media (max-width:780px) { .amen-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .amen-list { grid-template-columns:1fr; } }

.facts-row {
  display:flex;
  flex-wrap:wrap;
  gap:28px 40px;
  align-items:center;
}
.facts-row > * {
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:.95rem;
  color:var(--muted);
}
.facts-row strong { color:var(--ink); font-weight:600; }

.stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:28px;
}
.stat { text-align:center; }
.stat-num,
.stat .num {
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1;
  color:var(--brass);
}
.stat-label,
.stat .label {
  display:block;
  margin-top:.5rem;
  font-size:.9rem;
  color:var(--muted);
}

/* -------------------------------------------------------------------------
   11. Showcase
   ------------------------------------------------------------------------- */
.showcase {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.showcase.flip .sc-img { order:2; }
.showcase.flip .sc-text { order:1; }
.sc-img {
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  overflow:hidden;
}
.sc-img img { width:100%; height:100%; object-fit:cover; }
.sc-text {}

@media (max-width:820px) {
  .showcase { grid-template-columns:1fr; }
  .showcase.flip .sc-img,
  .showcase.flip .sc-text { order:initial; }
}

/* -------------------------------------------------------------------------
   12. Steps / Vorteile
   ------------------------------------------------------------------------- */
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
.step {}
.step-num,
.step .num {
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:2.6rem;
  line-height:1;
  color:var(--brass);
  margin-bottom:.6rem;
}
.section--forest .step-num,
.section--forest .step .num { color:var(--brass-soft); }
.step h3 { margin-bottom:.5rem; }

@media (max-width:900px) { .steps { grid-template-columns:1fr; gap:28px; } }

/* 4-spaltige Variante (responsiv) */
.steps--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:980px) { .steps--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .steps--4 { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   13. Events
   ------------------------------------------------------------------------- */
.events {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.event-card {
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t), box-shadow var(--t);
}
.event-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.event-date,
.event-card .date {
  align-self:flex-start;
  display:inline-flex;
  padding:.35em .8em;
  border-radius:var(--radius-pill);
  background:var(--sand);
  color:var(--brass);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.event-card h3 { font-family:var(--serif); }
.event-dist {
  margin-top:auto;
  padding-top:.6rem;
  font-size:.88rem;
  color:var(--muted);
}
.event-card--highlight {
  border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass), var(--shadow);
}

@media (max-width:980px) { .events { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .events { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   14. Zitate / Reviews
   ------------------------------------------------------------------------- */
.quote {
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.4;
  color:var(--ink);
}
.section--forest .quote { color:#f4f1ea; }
.quote cite,
.quote-author {
  display:block;
  margin-top:1.2rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
}
.section--forest .quote-author,
.section--forest .quote cite { color:#cfcabf; }
.stars {
  color:var(--brass);
  letter-spacing:.15em;
  font-size:1.05rem;
}
.review-cta {
  margin-top:1.5rem;
  font-size:.95rem;
  color:var(--muted);
}

/* -------------------------------------------------------------------------
   15. Lage
   ------------------------------------------------------------------------- */
.loc-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
.loc-list li {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1em;
  padding:.85em 0;
  border-bottom:1px solid var(--line);
}
.loc-list li:last-child { border-bottom:0; }
.loc-list .place,
.loc-list strong { font-weight:600; color:var(--ink); }
.loc-list .dist {
  font-size:.9rem;
  color:var(--muted);
  white-space:nowrap;
}
.loc-img {
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  overflow:hidden;
}
.loc-img img { width:100%; height:100%; object-fit:cover; }

@media (max-width:820px) { .loc-grid { grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   16. Click-to-Load (Karte / Smoobu)
   ------------------------------------------------------------------------- */
.cl {
  position:relative;
  min-height:420px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--sand);
  border:1px solid var(--line);
}
.cl-placeholder {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:40px;
  text-align:center;
  /* dezentes Muster */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(169,133,79,.12) 1px, transparent 0);
  background-size:22px 22px;
}
.cl-placeholder .cl-icon {
  font-size:2rem;
  color:var(--brass);
  opacity:.85;
}
.cl-placeholder p {
  max-width:420px;
  font-size:.95rem;
  color:var(--muted);
}
.cl-target {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.cl-target iframe {
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  display:block;
}
.cl.is-loaded .cl-placeholder { display:none; }
.cl.is-loaded { background:var(--white); }

/* Smoobu-Buchungswidget darf nach dem Laden frei in der Höhe wachsen
   (sonst würde der Buchungskalender bei fixer Höhe abgeschnitten). */
.cl[data-cl="smoobu"].is-loaded {
  min-height:0;
  height:auto;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
}
.cl[data-cl="smoobu"].is-loaded .cl-target {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
}
.cl[data-cl="smoobu"].is-loaded .cl-target iframe { height:auto; min-height:600px; }

/* Lade-Hinweis + Fallback (falls externe Inhalte nicht laden, z.B. Smoobu-Ausfall) */
.cl-loading {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  color:var(--muted);
  font-size:.95rem;
}
.cl-fallback {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  text-align:center;
  padding:48px 24px;
}
.cl-fallback p { max-width:480px; color:var(--muted); }
.cl-fallback strong { color:var(--ink); font-size:1.05rem; }
.cl-fallback a:not(.btn) { color:var(--brass); text-decoration:underline; }
.cl-fallback-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:.4rem;
}
/* Fehlgeschlagener Smoobu-Block bekommt wieder einen sichtbaren Rahmen */
.cl[data-cl="smoobu"].cl-failed {
  min-height:0;
  height:auto;
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* -------------------------------------------------------------------------
   17. Formular
   ------------------------------------------------------------------------- */
.form { display:flex; flex-direction:column; gap:20px; }
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:640px) { .form-row { grid-template-columns:1fr; } }

.form-field { display:flex; flex-direction:column; gap:.4rem; }
.form-field label {
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
}
.form-field input,
.form-field textarea,
.form-field select {
  width:100%;
  padding:13px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink);
  transition:border-color var(--t), box-shadow var(--t);
}
.form-field textarea { resize:vertical; min-height:140px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color:#a9a193; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline:none;
  border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(169,133,79,.18);
}

/* Honeypot ausblenden */
.form .hp,
.form input[name="website"] {
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

.form-check {
  display:flex;
  align-items:flex-start;
  gap:.6em;
  font-size:.9rem;
  color:var(--muted);
}
.form-check input[type="checkbox"] {
  margin-top:.25em;
  width:18px; height:18px;
  accent-color:var(--brass);
  flex:0 0 auto;
}
.form-check a { color:var(--brass); text-decoration:underline; }

.form-note { font-size:.82rem; color:var(--muted); }

.form-success,
.form-error {
  padding:16px 18px;
  border-radius:var(--radius);
  font-size:.95rem;
}
.form-success {
  background:rgba(43,58,51,.08);
  border:1px solid rgba(43,58,51,.25);
  color:var(--forest);
}
.form-error {
  background:rgba(160,60,40,.07);
  border:1px solid rgba(160,60,40,.3);
  color:#9a3a28;
}
[hidden] { display:none !important; }

/* -------------------------------------------------------------------------
   18. FAQ
   ------------------------------------------------------------------------- */
.faq { max-width:var(--wrap-narrow); margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  width:100%;
  padding:22px 0;
  text-align:left;
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:500;
  color:var(--ink);
  transition:color var(--t);
}
.faq-q:hover { color:var(--brass); }
.faq-q .faq-ind,
.faq-q::after {
  content:"+";
  flex:0 0 auto;
  font-family:var(--sans);
  font-size:1.5rem;
  font-weight:300;
  color:var(--brass);
  transition:transform var(--t);
}
.faq-q[aria-expanded="true"]::after { transform:rotate(45deg); }
.faq-a {
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height var(--t-slow), opacity var(--t), padding var(--t);
}
.faq-a > * { color:var(--muted); }
.faq-a.is-open,
.faq-q[aria-expanded="true"] + .faq-a {
  max-height:1000px;
  opacity:1;
  padding-bottom:22px;
}

/* -------------------------------------------------------------------------
   19. CTA-Band
   ------------------------------------------------------------------------- */
.cta-band {
  text-align:center;
}
.cta-band--brass {
  background:linear-gradient(135deg,var(--brass) 0%,var(--brass-2) 100%);
  color:#fff;
}
.cta-band--brass h2,
.cta-band--brass .lead { color:#fff; }
.cta-band--brass .lead { color:rgba(255,255,255,.92); }
.cta-band .btn { margin-top:1.6rem; }
.cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:1.6rem;
}

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  background:var(--forest-2);
  color:#d9d4ca;
  padding-block:64px 28px;
}
.foot-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:40px;
}
.foot-brand p { margin-top:1rem; color:#b9b3a8; font-size:.92rem; max-width:32ch; }
.foot-logo { height:42px; width:auto; }
.foot-col h4 {
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--brass-soft);
  margin-bottom:1rem;
}
.foot-col a { display:block; padding:.3em 0; color:#b9b3a8; transition:color var(--t); }
.foot-col a:hover { color:#fff; }
.foot-col p { color:#b9b3a8; font-size:.92rem; }
.foot-col p a { display:inline; padding:0; }

.foot-bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem;
  color:#9a9489;
}
.foot-legal {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
}
.foot-legal a,
.linklike {
  color:#9a9489;
  font-size:.85rem;
  transition:color var(--t);
}
.foot-legal a:hover,
.linklike:hover { color:#fff; }
.linklike {
  padding:0;
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:860px) {
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:520px) {
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; align-items:flex-start; }
}

/* -------------------------------------------------------------------------
   21. Consent-Banner
   ------------------------------------------------------------------------- */
.consent {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:200;
  background:var(--white);
  box-shadow:0 -8px 40px rgba(33,31,27,.18);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  animation:consent-in var(--t-slow) forwards;
}
.consent[hidden] { display:none !important; }
@keyframes consent-in { to { transform:translateY(0); } }
.consent-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding-block:20px;
}
.consent-text strong { display:block; margin-bottom:.3rem; font-size:1rem; }
.consent-text p { font-size:.9rem; color:var(--muted); max-width:70ch; }
.consent-text a { color:var(--brass); text-decoration:underline; }
.consent-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  flex:0 0 auto;
}
@media (max-width:760px) {
  .consent-inner { flex-direction:column; align-items:stretch; }
  .consent-actions .btn { flex:1; }
}

/* -------------------------------------------------------------------------
   22. Utilities / Allgemein
   ------------------------------------------------------------------------- */
/* Scroll-Reveal */
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity var(--t-slow), transform var(--t-slow);
}
.reveal.is-visible {
  opacity:1;
  transform:none;
}

/* Skip-Link */
.skip-link {
  position:absolute;
  left:50%;
  top:-60px;
  transform:translateX(-50%);
  z-index:400;
  padding:10px 20px;
  background:var(--ink);
  color:#fff;
  border-radius:0 0 var(--radius) var(--radius);
  transition:top var(--t);
}
.skip-link:focus { top:0; }

/* Sichtbar-versteckt (a11y) */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Abstands-Helfer */
.mt-0 { margin-top:0; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.mb-0 { margin-bottom:0; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }

/* -------------------------------------------------------------------------
   23. Reduced Motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal { opacity:1; transform:none; }
  .consent { transform:none; animation:none; }
}