/* ============================================================================
   Central Apartments Friedrichroda – Design-System
   Liegt in /assets/css/. url() bezieht sich auf diesen Ordner:
     Muster:   ../muster.svg
     Fonts:    ../fonts/...
   ============================================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Forma DJR Micro";
  src:url("../fonts/FormaDJRMicro-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Forma DJR Micro";
  src:url("../fonts/FormaDJRMicro-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
/* WOFF2 statt TTF: gleicher Zeichensatz (358 Glyphen), rund halbe Dateigroesse.
   font-display:swap statt block – mit block blieben Ueberschriften bis zum
   Laden unsichtbar, und die H1 ist hier in aller Regel das LCP-Element. */
@font-face{
  font-family:"Gravesend Sans";
  src:url("../fonts/gravesend-sans-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gravesend Sans";
  src:url("../fonts/gravesend-sans-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --evening-sea:#015948;
  --evening-deep:#013a2f;
  --chardonnay:#FAC582;
  --amulet:#71A771;
  --musket-brown:#3E301F;
  --paper:#FBF7EF;
  --sand:#FAEFD9;

  --ink:#231c12;
  --ink-soft:#4b4234;
  --ink-mute:#8a8170;
  --line:rgba(62,48,31,.14);

  --f:"Forma DJR Micro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ff-display:"Gravesend Sans","Forma DJR Micro",-apple-system,sans-serif;

  --t-d1:clamp(2.6rem,6.4vw,5rem);
  --t-d2:clamp(1.9rem,3.8vw,3rem);
  --t-d3:clamp(1.4rem,2.4vw,1.95rem);
  --t-base:1.0625rem;

  --wrap:1240px;
  --gut:clamp(20px,5vw,72px);
  --r:18px;
  --shadow:0 24px 60px -34px rgba(1,57,46,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(96px + var(--ca-banner-h,0px))}
body{
  font-family:var(--f);font-size:var(--t-base);line-height:1.62;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

h1,h2,h3{
  font-family:var(--ff-display);font-weight:700;line-height:1.04;
  letter-spacing:.01em;text-transform:uppercase;color:var(--evening-sea);
}
h1{font-size:var(--t-d1);letter-spacing:.02em}
h2{font-size:var(--t-d2)}
h3{font-size:1.15rem;letter-spacing:.03em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;font-weight:700;
  font-size:.95rem;letter-spacing:.01em;padding:.92em 1.55em;border-radius:999px;
  border:1.5px solid transparent;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s;white-space:nowrap;
  font-family:var(--f);
}
.btn i,.btn svg{width:1.05em;height:1.05em}
.btn .ar{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.btn:hover .ar{transform:translateX(4px)}
.btn--p{background:var(--evening-sea);color:#fff}
.btn--p:hover{background:var(--evening-deep)}
.btn--g{background:var(--chardonnay);color:var(--musket-brown)}
.btn--g:hover{background:var(--musket-brown);color:#fff}
.btn--w{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--w:hover{background:#fff;color:var(--evening-sea)}
.btn--solidw{background:#fff;color:var(--evening-sea)}
.btn--solidw:hover{background:var(--musket-brown);color:#fff}
.btn--lg{padding:1.05em 1.9em;font-size:1rem}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:16px var(--gut);
  transition:padding .45s cubic-bezier(.2,.7,.3,1);
}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,247,239,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);opacity:0;transform:translateY(-101%);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .4s ease}
.nav.scrolled::after{opacity:1;transform:none}
.nav__logo{height:84px;width:auto;transition:opacity .4s ease,height .45s cubic-bezier(.2,.7,.3,1)}
.nav__logo--g{position:absolute;left:0;top:0;opacity:0}
.nav__brand{position:relative;display:flex;align-items:center;line-height:0;height:84px}
.nav:not(.nav--solid)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(1,40,33,.5),rgba(1,40,33,0));transition:opacity .3s}
.nav.scrolled::before{opacity:0}
.nav:not(.nav--solid):not(.scrolled) .nav__links{
  background:rgba(1,40,33,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:11px 30px;border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
}
.nav__links{display:flex;align-items:center;gap:40px;list-style:none;margin:0}
.nav__links a{font-size:1.08rem;color:#fff;letter-spacing:.01em;position:relative;padding:6px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--chardonnay);transition:width .28s}
.nav__links a:hover::after,.nav__links a.active::after,.nav__links li.current-menu-item>a::after{width:100%}
.nav__links a.active,.nav__links li.current-menu-item>a{font-weight:700}
.nav__cta{display:flex;align-items:center;gap:14px}
.nav__burger{display:none;background:none;border:0;color:#fff;cursor:pointer}
.nav.scrolled{padding-top:9px;padding-bottom:9px}
.nav.scrolled .nav__logo{height:56px}
.nav.scrolled .nav__brand{height:56px}
.nav.scrolled .nav__logo--w{opacity:0}
.nav.scrolled .nav__logo--g{opacity:1}
.nav.scrolled .nav__links a{color:var(--ink)}
.nav.scrolled .nav__burger{color:var(--evening-sea)}
.nav--solid .nav__burger{color:var(--evening-sea)}
.nav.scrolled .btn--w{color:var(--evening-sea);border-color:var(--evening-sea)}
.nav.scrolled .btn--w:hover{background:var(--evening-sea);color:#fff}
.nav--solid{position:sticky;top:0;background:rgba(251,247,239,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav--solid .nav__logo--w{opacity:0}
.nav--solid .nav__logo--g{opacity:1}
.nav--solid .nav__links a{color:var(--ink)}
.nav--solid .btn--w{color:var(--evening-sea);border-color:var(--evening-sea)}

/* ---------- Konditionen (Preise & Kurbeitrag) ---------- */
.kond{padding:clamp(44px,6vw,80px) 0}
.kond--paper{background:var(--paper)}
.kond--sand{background:var(--sand)}
.kond__title{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.04;font-size:var(--t-d2);color:var(--evening-sea);margin-bottom:14px}
.kond__lede{max-width:56ch;color:var(--ink-soft);margin-bottom:26px}
.kond__list{display:flex;flex-direction:column;max-width:720px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.kond__row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 20px;border-top:1px solid var(--line)}
.kond__row:first-child{border-top:0}
.kond__row--hi{background:var(--sand)}
.kond__row dt{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--ink)}
.kond__row dt small{font-size:.78rem;color:var(--ink-mute)}
.kond__row dd{margin:0;flex:none;font-family:var(--ff-display);font-weight:700;
  font-size:1.12rem;letter-spacing:.01em;color:var(--evening-sea);white-space:nowrap}
.kond__row--hi dd{font-size:1.3rem}
.kond__foot{display:flex;align-items:flex-start;gap:8px;max-width:720px;margin-top:14px;
  font-size:.85rem;line-height:1.45;color:var(--ink-mute)}
.kond__foot svg{width:16px;height:16px;color:var(--amulet);flex:none;margin-top:3px}
@media(max-width:520px){
  .kond__row{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- Apartment-Karte: Zusatzzeile ---------- */
.apt__sub{font-size:.8rem;letter-spacing:.03em;color:var(--ink-mute);margin:-6px 0 10px}
.cform__apt-body em{font-style:normal;font-size:.68rem;letter-spacing:.03em;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Aktionsbanner ----------
   Liegt fix ueber der ebenfalls fixen Navigation. Die tatsaechliche Hoehe
   traegt --ca-banner-h; site.js misst sie und schreibt sie auf den Body,
   weil der Text je nach Laenge und Breite umbrechen kann. Der Wert in der
   CSS-Regel ist der Rueckfall, falls das Skript nicht laeuft. */
:root{--ca-banner-h:0px}
body.has-ca-banner{--ca-banner-h:46px;padding-top:var(--ca-banner-h)}
.ca-banner{position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--evening-deep);color:#fff;font-size:.86rem;line-height:1.35;
  /* Exakt so hoch wie der Platz, den der Body reserviert (JS rundet auf volle
     Pixel auf). Ohne das bleibt bei krummen Bildschirm-Skalierungen eine
     Haarlinie zwischen Bannerunterkante und Inhalt sichtbar. */
  min-height:var(--ca-banner-h)}
.ca-banner__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 16px;padding:11px var(--gut);text-align:center}
.ca-banner__text{font-weight:500}
.ca-banner__link{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-weight:700;color:var(--chardonnay);text-decoration:underline;
  text-underline-offset:3px;transition:color .2s}
.ca-banner__link:hover{color:#fff}
.ca-banner__link svg{width:1em;height:1em}
/* Navigation und Hero um die Bannerhoehe versetzen. */
.has-ca-banner .nav{top:var(--ca-banner-h)}
.has-ca-banner .hero{min-height:calc(100svh - var(--ca-banner-h))}
.has-ca-banner .mnav{top:var(--ca-banner-h)}
@media(max-width:600px){
  .ca-banner{font-size:.8rem}
  .ca-banner__inner{padding:9px 16px}
}

/* ---------- Media + placeholder ---------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--r);
  background-color:var(--sand);
  background-image:linear-gradient(135deg,rgba(1,89,72,.12),rgba(113,167,113,.20));
  background-size:cover;background-position:center;
}
.media::after{
  content:attr(data-ph);position:absolute;left:16px;bottom:14px;right:16px;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--evening-sea);opacity:.55;font-weight:700;pointer-events:none;
}
.media[style*="url"]::after{display:none}
.media:has(img)::after{display:none}

/* Bilder fuellen ihre Flaeche.
   Die Klasse ist bewusst doppelt notiert (.media.media statt .media): Elementor
   liefert einen Reset `.elementor img{height:auto}` mit, der exakt dieselbe
   Spezifitaet hat wie `.media>img` – und weil Elementors CSS nach dem Theme
   laedt, gewann es. Die Bilder fielen dann auf ihre natuerliche Hoehe zurueck
   und die Media-Flaeche schaute darunter als farbiger Block hervor.
   Gleiches gilt fuer die Hero-Flaechen und das Vorher/Nachher-Bild. */
.media.media>img,
.hero__bg.hero__bg>img,
.phero__bg.phero__bg>img,
.ba__before.ba__before>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;padding-top:120px}
.hero__bg{position:absolute;inset:0;z-index:-2;background-color:#0a3e33;background-image:linear-gradient(135deg,#0a3e33,#10322a);background-size:cover;background-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,40,33,.18) 0%,rgba(1,40,33,.05) 30%,rgba(1,40,33,.78) 100%)}
.hero__pattern{position:absolute;inset:0;z-index:-1;background:url("../muster.svg") center/130% no-repeat;opacity:.05;mix-blend-mode:screen;pointer-events:none}
.hero__inner{padding-bottom:32px;max-width:780px}
.hero h1{color:#fff;margin-bottom:20px}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;color:rgba(255,255,255,.92);max-width:48ch}

/* ---------- Booking bar ---------- */
.booking{
  position:relative;background:#fff;border-radius:20px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:stretch;
  padding:12px;gap:6px;max-width:1040px;
}
.bk-field{display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:14px;cursor:pointer;transition:background .2s ease}
.bk-field:not(:nth-of-type(3))::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:46px;background:var(--line)}
.bk-field{position:relative}
.bk-field:hover,.bk-field:focus-within{background:var(--paper)}
.bk-field:hover::after,.bk-field:focus-within::after{opacity:0}
.bk-ico{flex:none;width:46px;height:46px;border-radius:12px;background:var(--sand);color:var(--evening-sea);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.bk-ico i,.bk-ico svg{width:23px;height:23px;color:var(--evening-sea);stroke:var(--evening-sea)}
.bk-field:hover .bk-ico,.bk-field:focus-within .bk-ico{background:#fff}
.bk-field__txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.bk-field__lbl{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.bk-field input,.bk-field select,.bk-field__val{border:0;background:transparent;font-family:var(--ff-display);font-weight:500;font-size:1.1rem;color:var(--evening-sea);width:100%;cursor:pointer;padding:0;line-height:1.25;letter-spacing:.01em}
.bk-field input:focus,.bk-field select:focus{outline:none}
.bk-field input::placeholder{color:var(--ink-mute);opacity:1}
.bk-field input::-webkit-calendar-picker-indicator{opacity:0;width:0;margin:0;padding:0}
.bk-field select{appearance:none;-webkit-appearance:none}
.bk-field__val{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-chev,.bk-chev svg{width:18px;height:18px;color:var(--ink-mute);stroke:var(--ink-mute);flex:none;transition:transform .25s ease}
.bk-field.is-open .bk-chev{transform:rotate(180deg)}
.booking>.btn{align-self:stretch;margin-left:8px}

/* ---- Eigene Popover statt nativer Datums-/Select-UI (zum Theme passend) ---- */
.bk-pop{position:absolute;bottom:calc(100% + 12px);left:0;z-index:40;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 -30px 80px -40px rgba(1,57,46,.5),0 30px 80px -50px rgba(1,57,46,.4);padding:16px;width:312px;
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:bottom left;
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.bk-pop.open{opacity:1;visibility:visible;transform:none}
.bk-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-cal__title{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;color:var(--evening-sea);text-transform:uppercase;letter-spacing:.02em}
.bk-cal__nav{display:flex;gap:6px}
.bk-cal__nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--evening-sea);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.bk-cal__nav button:hover:not(:disabled){background:var(--sand);border-color:var(--sand)}
.bk-cal__nav button:disabled{opacity:.35;cursor:not-allowed}
.bk-cal__nav i,.bk-cal__nav svg{width:16px;height:16px}
.bk-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.bk-cal__dow span{text-align:center;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);padding:4px 0}
.bk-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk-cal__grid button{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:10px;font-family:var(--f);font-size:.92rem;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.bk-cal__grid button:hover:not(:disabled){background:var(--sand)}
.bk-cal__grid button.is-sel{background:var(--evening-sea);color:#fff;font-weight:700}
.bk-cal__grid button.is-out{visibility:hidden;pointer-events:none}
.bk-cal__grid button:disabled{color:var(--line);cursor:not-allowed;background:transparent}
.bk-pop--menu{width:auto;min-width:100%;padding:8px}
.bk-menu{display:flex;flex-direction:column;gap:2px}
.bk-menu button{display:flex;align-items:center;justify-content:space-between;gap:18px;border:0;background:transparent;border-radius:11px;padding:11px 14px;font-family:var(--ff-display);font-weight:500;font-size:1.02rem;color:var(--evening-sea);cursor:pointer;text-align:left;transition:background .15s}
.bk-menu button:hover{background:var(--paper)}
.bk-menu button.is-sel{background:var(--sand)}
.bk-menu button i,.bk-menu button svg{width:16px;height:16px;color:var(--evening-sea);opacity:0;flex:none}
.bk-menu button.is-sel i,.bk-menu button.is-sel svg{opacity:1}
@media(max-width:560px){.bk-pop{left:0;right:0;width:auto}}
.hero__note{font-size:1.02rem;color:rgba(255,255,255,.88);margin:20px 6px clamp(30px,5vh,54px);display:inline-flex;align-items:center;gap:10px}
.hero__note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chardonnay);flex:none}

/* ---------- Section rhythm ---------- */
section{padding-block:clamp(72px,10vw,128px)}
.head{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start;margin-bottom:clamp(40px,6vw,72px)}
.head__lede{font-size:1.12rem;color:var(--ink-soft);max-width:48ch}
.head__lede p+p{margin-top:16px}
.head__aside{display:flex;flex-direction:column;gap:20px}

/* ---------- Intro ---------- */
.intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.intro__media{aspect-ratio:4/5}
.intro__text h2{margin-bottom:24px}
.intro__text p{color:var(--ink-soft);margin-bottom:18px;max-width:50ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;border-top:1px solid var(--line);padding-top:30px}
.fact i,.fact svg{width:25px;height:25px;color:var(--amulet);display:block;margin-bottom:12px}
.fact b{display:block;font-family:var(--ff-display);font-size:1.9rem;color:var(--evening-sea);letter-spacing:.01em}
.fact span{font-size:.86rem;color:var(--ink-mute);letter-spacing:.02em}

/* ---------- Apartments ---------- */
.apts{background:var(--sand)}
.apt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.apt{position:relative;display:block;background:var(--paper);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.apt:hover{transform:translateY(-5px);box-shadow:0 20px 44px -28px rgba(1,57,46,.5)}
.apt__mediawrap{position:relative}
.apt__media{aspect-ratio:3/2;border-radius:0}
.apt__body{padding:22px 24px 24px}
.apt h3{color:var(--evening-sea);margin-bottom:12px}
.apt__meta{display:flex;gap:18px;font-size:.92rem;color:var(--ink-soft)}
.apt__meta span{display:inline-flex;align-items:center;gap:6px}
.apt__meta i,.apt__meta svg{width:1em;height:1em;color:var(--amulet)}
.apt__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.apt__price{display:flex;flex-direction:column;line-height:1.05}
.apt__price b{font-family:var(--ff-display);font-weight:700;font-size:1.55rem;color:var(--evening-sea);letter-spacing:.01em}
.apt__price b span{font-family:var(--f);font-weight:400;font-size:.82rem;color:var(--ink-mute);letter-spacing:0}
.apt__price small{font-size:.7rem;color:var(--ink-mute);letter-spacing:.05em;text-transform:uppercase;margin-top:4px}
.apt__btn{padding:.72em 1.25em;font-size:.88rem;flex:none}
.apt__btn::after{content:"";position:absolute;inset:0;z-index:1}
.apt:hover .apt__btn{background:var(--evening-sea);color:#fff}
.apt__tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--musket-brown);background:var(--chardonnay);padding:.4em .75em;border-radius:999px}

/* ---------- Ausstattung ---------- */
.feat{background:var(--evening-sea);color:#fff;position:relative;overflow:hidden}
.feat__pattern{position:absolute;inset:0;background:url("../muster.svg") center/130% no-repeat;opacity:.06;mix-blend-mode:screen;pointer-events:none}
.feat .wrap{position:relative}
.feat h2{color:#fff}
.feat .head__lede{color:rgba(255,255,255,.82)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:var(--r);overflow:hidden;box-shadow:0 24px 60px -40px rgba(0,0,0,.6)}
.feat-cell{background:var(--evening-sea);padding:36px 32px}
.feat-cell i{width:30px;height:30px;color:var(--chardonnay);margin-bottom:18px}
.feat-cell h3{color:#fff;margin-bottom:10px}
.feat-cell p{color:rgba(255,255,255,.74);font-size:.97rem}

/* ---------- Lage / Umgebung ---------- */
.umwelt{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.umwelt__media{aspect-ratio:4/5}
.umwelt__text h2{margin-bottom:22px}
.umwelt__text p{color:var(--ink-soft);margin-bottom:28px;max-width:46ch}
.umwelt__list{list-style:none;margin-bottom:32px;border-top:1px solid var(--line)}
.umwelt__list li{display:flex;align-items:center;gap:20px;padding:15px 2px;border-bottom:1px solid var(--line);font-size:1.05rem;color:var(--ink)}
.umwelt__list li b{flex:0 0 138px;font-family:var(--ff-display);font-weight:700;font-size:.82rem;color:var(--amulet);letter-spacing:.05em;text-transform:uppercase}

/* ---------- CTA ---------- */
.cta{position:relative;background:var(--chardonnay);color:var(--musket-brown);overflow:hidden;text-align:center}
/* Das Muster wird ueber eine SVG-Maske eingefaerbt. Firefox rastert diese
   Maske beim Scrollen immer wieder neu, was auf der Startseite messbar
   ruckelte: 34 verzoegerte Frames und 49,8 fps gegenueber 14 und 55,8 mit
   eigener Ebene. translateZ(0) zwingt Firefox, das Ergebnis einmal zu
   rastern und danach nur noch zu verschieben. Chrome war ohnehin bei 60 fps.
   Die Optik bleibt unveraendert. */
.cta__pattern{position:absolute;inset:0;background:var(--evening-sea);opacity:.12;pointer-events:none;
  transform:translateZ(0);
  -webkit-mask:url("../muster.svg") center / cover no-repeat;
  mask:url("../muster.svg") center / cover no-repeat}
.cta .wrap{position:relative;max-width:760px}
.cta h2{color:var(--musket-brown);margin-bottom:22px}
.cta p{color:rgba(62,48,31,.82);font-size:1.12rem;max-width:50ch;margin:0 auto 36px}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Footer ---------- */
.foot{background:var(--evening-deep);color:rgba(255,255,255,.74);padding-block:64px 34px}
.foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot__logo{height:54px;width:auto;margin-bottom:20px}
.foot__top p{font-size:.95rem;max-width:36ch;line-height:1.6}
.foot h4{font-family:var(--ff-display);font-size:.8rem;letter-spacing:.1em;color:#fff;margin-bottom:18px;text-transform:uppercase}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot li{font-size:.95rem}
.foot a:hover{color:var(--chardonnay)}
.foot__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:.84rem;color:rgba(255,255,255,.55)}
.foot__bot a{text-decoration:underline;text-underline-offset:3px}
.foot__bot a:hover{color:var(--chardonnay)}

/* ============================================================================
   Wohnungs-Unterseiten
   ============================================================================ */
.dhero{position:relative;padding-top:52px;padding-bottom:48px;background:var(--paper)}
.crumb{font-size:.85rem;color:var(--ink-mute);margin-bottom:22px;display:inline-flex;align-items:center;gap:7px}
.crumb a{color:var(--evening-sea);font-weight:700}
.crumb a:hover{text-decoration:underline}
.dhero__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:end}
.dhero__head h1{margin-bottom:14px}
.dhero__tag{font-size:1.15rem;color:var(--ink-soft);max-width:40ch;margin-bottom:26px}
.dhero__cta{display:flex;flex-wrap:wrap;gap:12px}
.dspecs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.dspec{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.dspec i,.dspec svg{width:23px;height:23px;color:var(--amulet);flex:none}
.dspec b{display:block;font-family:var(--ff-display);font-size:1.5rem;color:var(--evening-sea);line-height:1}
.dspec span{font-size:.8rem;color:var(--ink-mute);letter-spacing:.02em}

.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:min(70vh,640px)}
.gallery .media{height:100%}
.gallery .media:first-child{grid-row:1 / span 2}

.dsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.dsplit h2{margin-bottom:22px}
.dsplit p{color:var(--ink-soft);margin-bottom:16px;max-width:52ch}
.amen{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:8px}
.amen li{display:flex;align-items:flex-start;gap:10px;font-size:.98rem;color:var(--ink-soft)}
.amen i{width:1.15em;height:1.15em;color:var(--amulet);flex:none;margin-top:.18em}
.dsection{padding-block:clamp(60px,8vw,104px)}
.dsection--sand{background:var(--sand)}
/* Mehr Luft zwischen Überschrift und Inhalt (Detailseiten-Sektionen) */
.dsection h2{margin-bottom:clamp(22px,2.8vw,34px)}
.dsection h3{margin-bottom:14px}
.dsection .head h2{margin-bottom:0}
.gallery-sec{padding-top:0;padding-bottom:clamp(22px,3vw,40px)}
.book-cta{position:relative;background:var(--evening-sea);color:#fff;overflow:hidden;text-align:center;padding-block:clamp(72px,10vw,124px)}
.book-cta .feat__pattern{background:url("../muster.svg") center/130% no-repeat;opacity:.06;mix-blend-mode:screen}
.book-cta .wrap{position:relative}
.book-cta h2{color:#fff;margin-bottom:16px}
.book-cta p{color:rgba(255,255,255,.82);font-size:1.1rem;max-width:52ch;margin:0 auto}
.book-cta .booking{margin:30px auto 0;max-width:1120px;text-align:left}

/* ---------- Reveal ---------- */
/* Reveal beim Scrollen. Ausgeblendet wird NUR, wenn JavaScript laeuft (.js wird
   in header.php gesetzt) – sonst bliebe die Seite ohne site.js komplett leer. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
/* Im Elementor-Editor gar nicht erst ausblenden. Rein ueber CSS, damit die
   Inhalte auch dann stehen, wenn site.js im Editor nicht durchlaeuft –
   genau das war der Grund fuer die zeitweise unsichtbaren Elemente. */
body.elementor-editor-active .rv{opacity:1;transform:none;transition:none}

/* ---------- Mobile menu (Overlay) ---------- */
.mnav{position:fixed;inset:0;z-index:60;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,var(--evening-sea) 0%,var(--evening-deep) 100%);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:84px var(--gut) calc(var(--gut) + 6px);
  opacity:0;visibility:hidden;clip-path:circle(0% at calc(100% - 42px) 40px);
  transition:clip-path .55s cubic-bezier(.2,.7,.3,1),opacity .3s ease,visibility 0s linear .55s}
.mnav.open{opacity:1;visibility:visible;clip-path:circle(150% at calc(100% - 42px) 40px);
  transition:clip-path .6s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.mnav::before{content:"";position:absolute;inset:0;z-index:-1;background:url("../muster.svg") center/cover no-repeat;opacity:.08;mix-blend-mode:screen;pointer-events:none}
.mnav__logo{height:52px;width:auto;margin-bottom:auto;
  opacity:0;transform:translateY(18px);transition:opacity .5s ease .08s,transform .55s cubic-bezier(.2,.7,.3,1) .08s}
.mnav.open .mnav__logo{opacity:1;transform:none}
.mnav__links{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;list-style:none}
.mnav__links a{font-family:var(--ff-display);font-size:clamp(1.8rem,8.5vw,2.4rem);line-height:1.12;text-transform:uppercase;padding:12px 0;
  opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1),color .25s}
.mnav__links a:hover,.mnav__links a.active,.mnav__links li.current-menu-item>a{color:var(--chardonnay)}
.mnav.open .mnav__links a{opacity:1;transform:none}
.mnav.open .mnav__links a:nth-of-type(1){transition-delay:.16s}
.mnav.open .mnav__links a:nth-of-type(2){transition-delay:.22s}
.mnav.open .mnav__links a:nth-of-type(3){transition-delay:.28s}
.mnav.open .mnav__links a:nth-of-type(4){transition-delay:.34s}
.mnav__cta{margin-top:24px;
  opacity:0;transform:translateY(18px);transition:opacity .5s ease .4s,transform .55s cubic-bezier(.2,.7,.3,1) .4s}
.mnav.open .mnav__cta{opacity:1;transform:none}
.mnav__close{position:absolute;top:26px;right:var(--gut);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s,transform .35s ease;z-index:2}
.mnav__close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.mnav__close i,.mnav__close svg{width:22px;height:22px}
.mnav__foot{margin-top:auto;padding-top:28px;font-size:.95rem;color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transform:translateY(18px);transition:opacity .5s ease .46s,transform .55s cubic-bezier(.2,.7,.3,1) .46s}
.mnav__foot a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.mnav__foot a:hover{color:var(--chardonnay)}
.mnav__foot span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.6)}
.mnav__foot i,.mnav__foot svg{width:1.05em;height:1.05em;color:var(--chardonnay)}
.mnav.open .mnav__foot{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .head{grid-template-columns:1fr;gap:24px;align-items:start}
  .intro__grid{grid-template-columns:1fr}
  .intro__media{aspect-ratio:16/10;order:-1}
  .apt-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .umwelt{grid-template-columns:1fr;gap:32px}
  .umwelt__media{aspect-ratio:16/10;order:-1}
  .foot__top{grid-template-columns:1fr 1fr}
  .dhero__grid{grid-template-columns:1fr;gap:30px}
  .dsplit{grid-template-columns:1fr;gap:30px}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:auto}
  .gallery .media{aspect-ratio:3/2}
  .gallery .media:first-child{grid-row:auto;grid-column:1 / span 2;aspect-ratio:16/9}
}
@media(max-width:760px){
  .booking{grid-template-columns:1fr 1fr;gap:6px}
  .bk-field{min-width:0;padding:12px 14px;gap:11px}
  .bk-ico{width:40px;height:40px}
  .bk-field input,.bk-field select{min-width:0;font-size:1rem}
  .bk-field::after{display:none}
  .booking>.btn{grid-column:1 / -1;margin:6px 0 0;justify-content:center;align-self:auto}
}
@media(max-width:680px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:inline-flex}
  .nav,.nav.scrolled{padding-top:12px;padding-bottom:12px}
  .nav__logo,.nav.scrolled .nav__logo{height:52px}
  .nav__brand,.nav.scrolled .nav__brand{height:52px}
  .apt-grid,.feat-grid{grid-template-columns:1fr}
  .umwelt__list li b{flex-basis:120px}
  .facts{grid-template-columns:1fr 1fr;gap:22px}
  .foot__top{grid-template-columns:1fr}
  .amen{grid-template-columns:1fr}
  .hero{padding-top:96px}
  .hero__note{font-size:.95rem}
  .foot__bot{flex-direction:column;gap:8px}
}
@media(max-width:420px){
  .booking{grid-template-columns:1fr}
  .bk-field:not(:nth-of-type(3))::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  /* .js .rv muss mitgenannt werden – sonst gewinnt die hoehere Spezifitaet
     der Reveal-Regel und der Inhalt bliebe trotz Reduced Motion unsichtbar. */
  .rv,.js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================================
   Detailseiten: Räume, 3D-Viewer, Belegungsplan, Bewertungen, Lage
   ============================================================================ */
.phero{position:relative;min-height:60vh;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;padding:130px 0 0}
.phero__bg{position:absolute;inset:0;z-index:-2;background-color:#0a3e33;background-size:cover;background-position:center}
.phero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,40,33,.5) 0%,rgba(1,40,33,.42) 40%,rgba(1,40,33,.85) 100%)}
.phero__inner{width:100%;padding-bottom:clamp(34px,6vh,64px);text-align:left}
.phero h1{color:#fff;margin-bottom:18px;max-width:16ch}
.phero__sub{font-size:clamp(1.05rem,1.5vw,1.28rem);color:rgba(255,255,255,.92);max-width:54ch}
.phero__credit{position:absolute;right:var(--gut);bottom:16px;font-size:.72rem;color:rgba(255,255,255,.55);letter-spacing:.03em}
/* Höhe des Seiten-Heros (Widget-Einstellung) */
.phero--sm{min-height:38vh}
.phero--md{min-height:58vh}
.phero--lg{min-height:74vh}
.phero--xl{min-height:88vh}
.phero--full{min-height:100vh;min-height:100svh}

.rooms{display:flex;flex-direction:column;gap:clamp(44px,6vw,84px)}
.room{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.room:nth-child(even) .room__media{order:2}
.room__media{aspect-ratio:4/3;box-shadow:0 26px 60px -40px rgba(1,57,46,.55)}
.room__text h3{font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--evening-sea);margin-bottom:14px;padding-bottom:14px;border-bottom:2px solid var(--chardonnay);display:inline-block}
.room__text p{color:var(--ink-soft);margin-bottom:20px;max-width:46ch}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55em 1em;font-size:.92rem;color:var(--ink-soft)}
.chips i,.chips svg{width:1.05em;height:1.05em;color:var(--amulet)}

.viewer{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow)}
.viewer__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:var(--evening-sea);color:#fff;flex-wrap:wrap}
.viewer__bar h3{color:#fff}
.viewer__hint{font-size:.85rem;color:rgba(255,255,255,.72);display:inline-flex;align-items:center;gap:8px}
.viewer__hint i,.viewer__hint svg{width:1.1em;height:1.1em;color:var(--chardonnay)}
.viewer model-viewer{width:100%;height:min(60vh,540px);background:radial-gradient(circle at 50% 30%,#ffffff,var(--sand) 70%,#f1e6cf);display:block}
.viewer__note{font-size:.86rem;color:var(--ink-mute);margin-top:14px}

.cal-wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,34px);box-shadow:0 24px 60px -44px rgba(1,57,46,.5)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cal__title{font-family:var(--ff-display);font-weight:700;font-size:1.25rem;color:var(--evening-sea);text-transform:uppercase;letter-spacing:.02em}
.cal__nav{display:flex;gap:10px}
.cal__nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--evening-sea);transition:background .2s,border-color .2s}
.cal__nav button:hover{background:var(--sand);border-color:var(--chardonnay)}
.cal__nav i,.cal__nav svg{width:18px;height:18px}
.cal__dows,.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal__dows{margin-bottom:9px}
.cal__dows span{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.cal__day{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:.95rem;background:rgba(113,167,113,.14);color:var(--evening-sea);font-weight:700}
.cal__day.is-out{background:transparent}
.cal__day.is-past{background:transparent;color:var(--ink-mute);opacity:.35;font-weight:400}
.cal__day.is-booked{background:var(--sand);color:var(--ink-mute);font-weight:400;position:relative}
.cal__day.is-booked::after{content:"";position:absolute;left:22%;right:22%;top:50%;height:1.5px;background:var(--ink-mute);opacity:.5;transform:rotate(-12deg)}
.cal__legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:.86rem;color:var(--ink-soft)}
.cal__legend span{display:inline-flex;align-items:center;gap:9px}
.cal__dot{width:15px;height:15px;border-radius:5px}
.cal__dot--free{background:rgba(113,167,113,.5)}
.cal__dot--booked{background:var(--sand);border:1px solid var(--line)}
.cal__side{background:var(--evening-sea);color:#fff;border-radius:var(--r);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
.cal__side h3{color:#fff;margin-bottom:6px}
.cal__side .lead{color:rgba(255,255,255,.78);font-size:.95rem;margin-bottom:22px}
.price-row{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:.98rem;color:rgba(255,255,255,.9)}
.price-row b{font-family:var(--ff-display);font-weight:700;color:#fff;white-space:nowrap}
.price-row--big{border-bottom:0;padding-top:18px;font-size:1.15rem}
.price-row--big b{font-size:1.5rem;color:var(--chardonnay)}
.cal__side .btn{width:100%;justify-content:center;margin-top:22px}
.cal__side small{display:block;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.6);text-align:center}

.rev-rating{display:inline-flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 22px;box-shadow:0 18px 44px -36px rgba(1,57,46,.55)}
.rev-rating__num{font-family:var(--ff-display);font-weight:700;font-size:2.4rem;color:var(--evening-sea);line-height:1}
.rev-rating__col{display:flex;flex-direction:column;gap:5px}
.rev-rating__meta{font-size:.84rem;color:var(--ink-mute);letter-spacing:.01em}
.rev-stars{display:flex;gap:3px}
.rev-stars svg,.rev-stars i{width:18px;height:18px;color:var(--chardonnay);fill:var(--chardonnay);stroke:var(--chardonnay)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 30px 28px;display:flex;flex-direction:column;gap:15px;transition:transform .3s,box-shadow .3s;overflow:hidden}
.review:hover{transform:translateY(-4px);box-shadow:0 22px 50px -34px rgba(1,57,46,.45)}
.review__quote{position:absolute;top:14px;right:22px;font-family:var(--ff-display);font-weight:700;font-size:5rem;line-height:1;color:var(--chardonnay);opacity:.4;pointer-events:none}
.review .rev-stars{margin-bottom:2px;position:relative}
.review__text{color:var(--ink-soft);font-size:1.02rem;flex:1;line-height:1.62;position:relative}
.review__who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
.review__av{width:44px;height:44px;border-radius:50%;background:var(--amulet);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:700;flex:none}
.review__name{font-weight:700;color:var(--ink);font-size:.98rem}
.review__meta{font-size:.82rem;color:var(--ink-mute)}

.poi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.poi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.poi__media{aspect-ratio:3/2;border-radius:0}
.poi__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;text-align:left}
.poi__dist{font-family:var(--ff-display);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--amulet);margin-bottom:4px}
.poi h3{color:var(--evening-sea);margin-bottom:8px}
.poi p{color:var(--ink-soft);font-size:.96rem;flex:1}
.trails{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.trail{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px 2px;border-bottom:1px solid var(--line)}
.trail__len{font-family:var(--ff-display);font-weight:700;font-size:1.5rem;color:var(--evening-sea);min-width:96px}
.trail__len span{display:block;font-family:var(--f);font-weight:400;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
.trail__main h3{color:var(--ink);margin-bottom:5px;text-transform:none;font-size:1.15rem}
.trail__main p{color:var(--ink-soft);font-size:.95rem;max-width:60ch}
.trail__tag{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--musket-brown);background:var(--sand);padding:.45em .85em;border-radius:999px;white-space:nowrap}

@media(max-width:980px){
  .room{grid-template-columns:1fr;gap:24px}
  .room:nth-child(even) .room__media{order:-1}
  .cal-wrap{grid-template-columns:1fr;gap:28px}
  .reviews{grid-template-columns:1fr 1fr}
  .poi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .reviews,.poi-grid{grid-template-columns:1fr}
  .trail{grid-template-columns:1fr;gap:8px}
  .trail__len{min-width:0}
}

/* ============================================================================
   WordPress- & Elementor-Integration
   ============================================================================ */
/* Logo-Fallback (Wortmarke), falls kein Bild im Customizer hinterlegt ist */
.ca-wordmark{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.05rem,2.4vw,1.45rem);line-height:1;color:#fff;white-space:nowrap}
.nav.scrolled .ca-wordmark,.nav--solid .ca-wordmark{color:var(--evening-sea)}
.foot .ca-wordmark,.ca-wordmark--foot{color:#fff;font-size:1.15rem;display:inline-block;margin-bottom:20px}
.mnav .ca-wordmark{color:#fff;height:auto}

/* Admin-Bar berücksichtigen (fixe Nav nicht verdecken) */
.admin-bar .nav{top:32px}
.admin-bar .nav--solid{top:32px}
.admin-bar .mnav{top:32px}
/* Eingeloggt + Aktionsbanner: Das Banner sitzt fix bei top:0 und läge sonst
   unsichtbar HINTER der Adminbar – die vom Body reservierte Bannerhöhe bliebe
   als heller Leerstreifen über der Navigation stehen. Also: Banner unter die
   Adminbar, Nav und Mobilmenü unter beides. */
.admin-bar .ca-banner{top:32px}
.admin-bar.has-ca-banner .nav,
.admin-bar.has-ca-banner .nav--solid{top:calc(32px + var(--ca-banner-h))}
.admin-bar.has-ca-banner .mnav{top:calc(32px + var(--ca-banner-h))}
@media(max-width:782px){
  .admin-bar .nav,.admin-bar .nav--solid{top:46px}
  .admin-bar .mnav{top:46px}
  .admin-bar .ca-banner{top:46px}
  .admin-bar.has-ca-banner .nav,
  .admin-bar.has-ca-banner .nav--solid{top:calc(46px + var(--ca-banner-h))}
  .admin-bar.has-ca-banner .mnav{top:calc(46px + var(--ca-banner-h))}
}

/* Elementor: Sektionen/Container des Themes sollen randlos sitzen.
   Eigene Widgets bringen ihre Section-Wrapper schon mit. */
.elementor-widget-ca_section .elementor-widget-container{margin:0}
.ca-elementor-fullwidth section{width:100%}

/* WordPress-Ausrichtungen / Editor-Inhalte innerhalb .wrap */
.entry-content{max-width:760px;margin-inline:auto}
.entry-content>*{margin-bottom:1.2em}
.entry-content h2,.entry-content h3{margin-top:1.6em}
.entry-content h2{font-size:1.5rem}
.entry-content h3{font-size:1.15rem}
.entry-content a{color:var(--evening-sea);text-decoration:underline;text-underline-offset:2px}
.entry-content a:hover{color:var(--evening-deep)}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin-bottom:.4em}
.entry-content strong,.entry-content b{font-weight:700}

/* ---------- Text-Widget (Impressum / Datenschutz / AGB …) ---------- */
.ca-text--white{background:#fff}
.ca-text__title{margin-bottom:clamp(20px,3vw,34px)}
.ca-text--center .ca-text__title{text-align:center}
.ca-text__body--wide{max-width:980px}
.ca-text__body--full{max-width:none}
.alignwide{max-width:1100px;margin-inline:auto}
.alignfull{max-width:none}
.aligncenter{margin-inline:auto;display:block}

/* Barrierefreiheit */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal!important}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--evening-sea);color:#fff;padding:12px 20px;border-radius:0 0 10px 0}
.skip-link:focus{left:0;clip:auto;clip-path:none;width:auto;height:auto}

/* Paginierung */
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border-radius:999px;border:1px solid var(--line);color:var(--evening-sea);font-weight:700}
.page-numbers.current{background:var(--evening-sea);color:#fff;border-color:var(--evening-sea)}
.page-numbers:hover{background:var(--sand)}

/* ---------- Kontakt: Info + Formular ---------- */
.kontakt{background:var(--paper)}
/* Einspaltig ueber die volle Breite. Ein zweispaltiges Raster liess rechts
   eine leere Haelfte stehen, sobald die Kontaktdaten kurz sind. */
.kontakt__inner{display:flex;flex-direction:column;gap:clamp(26px,3.4vw,40px)}
.kontakt__head h2{margin-bottom:16px}
.kontakt__lede{font-size:1.12rem;color:var(--ink-soft);max-width:60ch}

/* Kontaktdaten als Zeile, nicht als Spalte daneben. */
.kontakt__list{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 34px}
.kontakt__list li{display:flex;gap:15px;align-items:flex-start;min-width:0}
.kontakt__ico{flex:none;width:44px;height:44px;border-radius:13px;background:var(--sand);
  color:var(--evening-sea);display:flex;align-items:center;justify-content:center}
.kontakt__ico i,.kontakt__ico svg{width:21px;height:21px}
.kontakt__rows{display:flex;flex-direction:column;gap:2px;min-width:0}
.kontakt__rows b{font-family:var(--ff-display);font-weight:700;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--evening-sea)}
.kontakt__rows a,.kontakt__rows>span{color:var(--ink);font-size:1.02rem;line-height:1.5}
.kontakt__rows a{transition:color .2s}
.kontakt__rows a:hover{color:var(--evening-sea)}

/* Hinweis: zwei Haarlinien und eine Marginalie statt Kasten mit Farbleiste.
   Der abgesetzte Balken links an einer abgerundeten Box ist genau das
   Muster, das nach Baukasten aussieht. */
.kontakt__hinweis{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr);
  gap:10px 44px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kontakt__hinweis h3{font-family:var(--ff-display);font-weight:700;font-size:.86rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--evening-sea);line-height:1.35;margin:0}
.kontakt__hinweis-txt{max-width:66ch}
.kontakt__hinweis-txt p{font-size:1rem;line-height:1.65;color:var(--ink-soft)}
.kontakt__hinweis-txt p + p{margin-top:10px}

.kontakt__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.2vw,46px);box-shadow:var(--shadow)}
.kontakt__card-title{font-size:1.25rem;margin-bottom:24px}

/* Preishinweis – erscheint unter den Karten, unter der Wohnungsauswahl und
   in der Preisuebersicht. Bewusst zurueckhaltend: Er erklaert, er wirbt nicht. */
.preis-hinweis{margin:18px 0 0;max-width:62ch}
.preis-hinweis p{font-size:.85rem;line-height:1.55;color:var(--ink-mute)}
.preis-hinweis p + p{margin-top:7px}
/* Die ausfuehrliche Fassung traegt Betraege und darf etwas mehr Gewicht haben. */
.preis-hinweis--lang{max-width:70ch;padding-top:14px;border-top:1px solid var(--line)}
.preis-hinweis--lang p{font-size:.9rem;color:var(--ink-soft)}
.cform .preis-hinweis{margin-top:14px}
.cal__side .preis-hinweis{margin-top:10px}
.cal__side .preis-hinweis p{font-size:.8rem}

/* ---------- Anfrageformular ---------- */
.cform{display:flex;flex-direction:column}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform__row--3{grid-template-columns:1fr 1fr .68fr}
.cform__field{display:flex;flex-direction:column;gap:7px}
.cform__field>span{font-family:var(--ff-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--evening-sea)}
.cform input,.cform textarea,.cform select{font-family:var(--f);font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.cform textarea{resize:vertical;min-height:120px}
.cform input::placeholder,.cform textarea::placeholder{color:var(--ink-mute)}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--evening-sea);background:#fff;box-shadow:0 0 0 4px rgba(1,89,72,.1)}

/* Kopfzeile: Titel links, Umschalter rechts – beides ist Rahmen, kein Inhalt. */
.cform__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 24px;margin-bottom:22px}
.cform__kopf .kontakt__card-title{margin:0}

/* Schrittleiste: sagt Position UND Inhalt. Ersetzt Zaehler, Balken und
   Schrittueberschrift, die sich vorher uebereinander stapelten. */
.cform__leiste{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin:0 0 28px;padding:0;counter-reset:schritt}
.cform__leiste[hidden]{display:none}
.cform__leiste li{display:flex;align-items:center;gap:10px;counter-increment:schritt;
  font-size:.9rem;color:var(--ink-mute);padding-right:16px}
.cform__leiste li[hidden]{display:none}
.cform__leiste li::before{content:counter(schritt);flex:none;
  width:27px;height:27px;border-radius:50%;display:grid;place-content:center;
  font-family:var(--f);font-size:.78rem;font-weight:700;
  background:var(--sand);color:var(--ink-mute);
  transition:background .25s ease,color .25s ease}
.cform__leiste li + li{padding-left:16px;border-left:1px solid var(--line)}
.cform__leiste li.ist-aktiv{color:var(--evening-sea);font-weight:700}
.cform__leiste li.ist-aktiv::before{background:var(--evening-sea);color:#fff}
.cform__leiste li.ist-fertig{color:var(--ink-soft);cursor:pointer}
.cform__leiste li.ist-fertig::before{background:var(--amulet);color:#fff}
.cform__leiste li.ist-fertig:hover{color:var(--evening-sea)}

.cform__step{display:flex;flex-direction:column;gap:18px}
.cform__step[hidden]{display:none}
.cform__step + .cform__step{margin-top:28px}
.cform__step-titel{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--evening-sea);margin:0}
.cform__weich{font-size:.86rem;color:var(--ink-mute);margin:-6px 0 0}

.cform__nav{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:28px}
.cform__nav [hidden]{display:none}
/* Nicht btn--w verwenden: das ist fuer dunkle Flaechen gedacht und waere
   auf der weissen Karte weiss auf weiss. */
.cform__zurueck{order:-1;background:transparent;color:var(--ink-soft);
  border-color:var(--line);font-weight:600}
.cform__zurueck:hover{background:var(--sand);color:var(--evening-sea);border-color:var(--line)}
.cform__zurueck svg{width:1.05em;height:1.05em}
.cform__weiter,.cform__submit{min-width:250px;justify-content:center}

/* Buchungsfelder im Anfrageformular. Gleiche .bk-field wie im Hero, aber
   auf heller Karte: dort ist die Leiste weiss, hier braucht sie Kontrast. */
.bk-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:18px}
.bk-row .bk-field{padding:12px 14px}
.bk-row .bk-field:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:1px;height:40px;background:var(--line)}
.bk-row .bk-field:last-child::after{display:none}
/* Die allgemeine Feldgestaltung des Formulars steht spaeter im Stylesheet und
   gewinnt sonst bei gleicher Spezifitaet – die Buchungsfelder saehen dann aus
   wie Textfelder statt wie im Hero. */
.cform .bk-field input,.cform .bk-field select,.cform .bk-field__val{
  border:0;background:transparent;padding:0;width:100%;cursor:pointer;
  font-family:var(--ff-display);font-weight:500;font-size:1.1rem;
  color:var(--evening-sea);line-height:1.25;letter-spacing:.01em}
.cform .bk-field input:focus,.cform .bk-field select:focus{
  outline:none;box-shadow:none;background:transparent;border:0}
@media(max-width:760px){
  .bk-row{grid-template-columns:1fr}
  .bk-row .bk-field::after{display:none!important}
}

/* Anliegen-Umschalter */
.cform__modes{display:flex;gap:3px;border:0;padding:3px;margin:0;background:var(--sand);
  border-radius:999px;flex:0 1 auto}
.cform__mode{flex:1;min-width:0;cursor:pointer}
.cform__mode input{position:absolute;opacity:0;width:0;height:0}
.cform__mode-box{display:flex;align-items:center;justify-content:center;height:100%;
  padding:9px 18px;border-radius:999px;font-weight:700;font-size:.88rem;
  color:var(--ink-soft);text-align:center;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s}
.cform__mode input:checked+.cform__mode-box{background:#fff;color:var(--evening-sea);
  box-shadow:0 1px 3px rgba(1,57,46,.16)}
.cform__mode input:focus-visible+.cform__mode-box{box-shadow:0 0 0 3px var(--chardonnay)}

.cform__hint{margin:0;font-size:.86rem;line-height:1.4;color:var(--ink-soft)}
.cform__hint:empty{display:none}

/* Wunschwohnung */
.cform__apts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cform__apt{cursor:pointer;min-width:0}
.cform__apt[hidden]{display:none}
.cform__apt input{position:absolute;opacity:0;width:0;height:0}
.cform__apt-box{display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.cform__apt:hover .cform__apt-box{transform:translateY(-2px)}
.cform__apt input:checked+.cform__apt-box{border-color:var(--evening-sea);box-shadow:0 0 0 3px rgba(1,89,72,.14)}
.cform__apt input:focus-visible+.cform__apt-box{box-shadow:0 0 0 3px var(--chardonnay)}
.cform__apt-media{aspect-ratio:3/2;border-radius:0;flex:none}
.cform__apt-media::after{font-size:.6rem;left:8px;right:8px;bottom:7px}
.cform__apt-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 11px;min-width:0}
.cform__apt-body b{font-family:var(--ff-display);font-weight:700;font-size:.8rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--evening-sea);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cform__apt-body em{font-style:normal;font-size:.7rem;letter-spacing:.03em;color:var(--ink-mute);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cform__apt-body small{font-size:.74rem;line-height:1.3;color:var(--ink-soft);margin-top:2px}
.cform__apt--any .cform__apt-box{background:var(--paper);border-style:dashed;justify-content:center}
.cform__apt-any{display:flex;flex-direction:column;gap:4px;justify-content:center;
  height:100%;min-height:96px;padding:16px 14px}
.cform__apt-any b{font-family:var(--ff-display);font-weight:700;font-size:.8rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--evening-sea);line-height:1.2}
.cform__apt-any small{font-size:.74rem;line-height:1.3;color:var(--ink-soft)}

/* Datenschutz-Kaestchen */
.cform__check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.86rem;line-height:1.45;color:var(--ink-soft)}
.cform__check input{appearance:none;-webkit-appearance:none;flex:none;width:17px;height:17px;margin:2px 0 0;border:1.5px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;display:grid;place-content:center;transition:background .2s,border-color .2s,box-shadow .2s;padding:0}
.cform__check input::before{content:"";width:9px;height:9px;transform:scale(0);transition:transform .15s ease;background:#fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.cform__check input:checked{background:var(--evening-sea);border-color:var(--evening-sea)}
.cform__check input:checked::before{transform:scale(1)}
.cform__check input:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(1,89,72,.15)}
.cform__check input:user-invalid{border-color:#cf2e2e}
.cform__check a{color:var(--evening-sea);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cform__check a:hover{color:var(--evening-deep)}

/* Pflichtfeld-Kennzeichnung. Das Sternchen soll auffallen, aber die
   Beschriftung nicht dominieren – daher der Akzentton, nicht Rot: Es ist
   ein Hinweis, keine Fehlermeldung. */
.cform__pflicht{border:0;text-decoration:none;color:var(--amulet);
  font-weight:700;font-size:1em;line-height:1;cursor:help}
.cform__pflicht-legende{display:flex;align-items:center;gap:6px;margin:2px 0 0;
  font-size:.8rem;color:var(--ink-mute)}
.cform__pflicht-legende span{color:var(--amulet);font-weight:700}

.cform__note{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-mute);margin:0}
.cform__note i,.cform__note svg{width:16px;height:16px;color:var(--amulet);flex:none}

@media(min-width:981px){
  .cform__basis{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .cform__basis .cform__field--voll{grid-column:1 / -1}
}
@media(max-width:980px){
  .cform__basis{display:flex;flex-direction:column;gap:18px}
}
@media(max-width:880px){
  .cform__row,.cform__row--3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .kontakt__hinweis{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .cform__weiter,.cform__submit{min-width:0;width:100%}
  .cform__nav{flex-direction:column-reverse;align-items:stretch}
  .cform__zurueck{order:0}
}

/* ---------- Schnellkontakt-Kacheln ---------- */
.ktiles--paper{background:var(--paper)}
.ktiles--sand{background:var(--sand)}
.ktiles--dark{background:var(--evening-sea)}
.ktiles__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ktile{position:relative;display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;transition:transform .3s,box-shadow .3s,border-color .3s}
a.ktile:hover{transform:translateY(-4px);box-shadow:0 26px 60px -40px rgba(1,57,46,.5);border-color:transparent}
.ktile__ico{width:50px;height:50px;border-radius:14px;background:var(--sand);color:var(--evening-sea);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ktile__ico i,.ktile__ico svg{width:24px;height:24px}
.ktile__label{font-family:var(--ff-display);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--evening-sea)}
.ktile__value{font-family:var(--ff-display);font-weight:700;font-size:1.16rem;color:var(--evening-sea);line-height:1.2}
.ktile__sub{font-size:.9rem;color:var(--ink-mute)}
.ktile__arrow{position:absolute;top:20px;right:20px;color:var(--ink-mute);transition:transform .25s,color .25s}
.ktile__arrow i,.ktile__arrow svg{width:18px;height:18px}
a.ktile:hover .ktile__arrow{color:var(--evening-sea);transform:translate(2px,-2px)}
.ktiles--dark .ktile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.ktiles--dark .ktile__ico{background:rgba(255,255,255,.1);color:#fff}
.ktiles--dark .ktile__label{color:rgba(255,255,255,.6)}
.ktiles--dark .ktile__value{color:#fff}
.ktiles--dark .ktile__sub{color:rgba(255,255,255,.7)}
.ktiles--dark .ktile__arrow{color:rgba(255,255,255,.6)}
.ktiles--dark a.ktile:hover{box-shadow:0 26px 60px -40px rgba(0,0,0,.7)}
@media(max-width:980px){.ktiles__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ktiles__grid{grid-template-columns:1fr}}

/* ---------- Karte / Anfahrt ---------- */
.kmap{padding-block:0}
.kmap__frame{position:relative;height:var(--kmap-h,520px);width:100%}
.kmap__frame iframe{width:100%;height:100%;border:0;display:block}
.kmap__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--sand);color:var(--ink-mute);text-align:center;padding:24px}
.kmap__placeholder i,.kmap__placeholder svg{width:42px;height:42px;color:var(--amulet)}
.kmap__card{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(16px,4vw,40px);z-index:2;max-width:320px;display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;box-shadow:0 30px 70px -38px rgba(1,57,46,.6)}
.kmap__pin{width:46px;height:46px;border-radius:12px;background:var(--sand);color:var(--evening-sea);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.kmap__pin i,.kmap__pin svg{width:22px;height:22px}
.kmap__card b{font-family:var(--ff-display);font-weight:700;font-size:1.16rem;color:var(--evening-sea);text-transform:uppercase;letter-spacing:.01em}
.kmap__addr{color:var(--ink-soft);font-size:1rem;line-height:1.5}
.kmap__card .btn{margin-top:8px;align-self:flex-start}
@media(max-width:560px){.kmap__card{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- Frontend: Theme-Schriften erzwingen ----------
   Diese Datei wird im FRONTEND (und in der Elementor-VORSCHAU) geladen, aber
   NICHT in die Elementor-Editor-Oberfläche (siehe inc/elementor/init.php) –
   so bleibt die Theme-Typografie auf der Seite verbindlich, ohne die Editor-UI
   umzustylen. Kit-Typografie (`body.elementor-kit-XXX h1..h6`) hat höhere
   Spezifität als `h1,h2,h3{}`; deshalb hier verbindlich überschreiben. */
body,
body[class*="elementor-kit-"]{
  font-family:var(--f);
}
h1,h2,h3,h4,h5,h6,
body[class*="elementor-kit-"] h1,
body[class*="elementor-kit-"] h2,
body[class*="elementor-kit-"] h3,
body[class*="elementor-kit-"] h4,
body[class*="elementor-kit-"] h5,
body[class*="elementor-kit-"] h6,
.elementor-heading-title{
  font-family:var(--ff-display)!important;
}

/* ---------- Vorher/Nachher-Bildvergleich (CA – Vorher/Nachher-Widget) ---------- */
.ba{--ba-pos:50%;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{pointer-events:none}
.ba__before{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
/* Fuellregel fuer .ba__before>img steht weiter oben bei den Media-Flaechen. */
.ba__handle{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;margin-left:-1px;z-index:2;background:rgba(251,247,239,.9);box-shadow:0 0 14px rgba(0,0,0,.3)}
.ba__handle:focus-visible{outline:none}
.ba__handle:focus-visible .ba__grip{box-shadow:0 0 0 3px var(--chardonnay),0 6px 18px rgba(0,0,0,.28)}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--evening-sea);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.ba__grip svg,.ba__grip i{width:22px;height:22px}
.ba__tag{position:absolute;top:14px;z-index:2;pointer-events:none;background:rgba(35,28,18,.55);color:#fff;padding:5px 14px;border-radius:99px;font-family:var(--ff-display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.ba__tag--before{left:14px}
.ba__tag--after{right:14px}
/* Redaktionshinweis: liegt ueber dem Bild, wird nie an Gaeste ausgeliefert
   (die Bedingung dafuer steht im Widget, nicht hier). */
.ba__warn{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;margin:0;
  background:#8a2b15;color:#fff;padding:10px 14px;border-radius:12px;
  font-size:.8rem;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.ba__warn strong{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}

/* ---------- POI: optionaler Link ---------- */
.poi h3 a{color:inherit;text-decoration:none}
.poi h3 a:hover{text-decoration:underline}
.poi__more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--evening-sea);font-family:var(--ff-display);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none}
.poi__more svg,.poi__more i{width:16px;height:16px;transition:transform .2s ease}
.poi__more:hover svg{transform:translateX(4px)}

/* ---------- Intro: optionale Buttons ---------- */
.intro__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- Apartment-Karte: Ausstattungs-Icons ---------- */
.apt__amen{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;color:var(--evening-sea)}
.apt__amen span{display:inline-flex;cursor:help}
.apt__amen svg,.apt__amen i{width:19px;height:19px}

/* ---------- Anfrageformular: Versand-Feedback + Honeypot ---------- */
.cform__msg{margin:14px 0 0;padding:12px 16px;border-radius:10px;font-size:.95rem;line-height:1.5;display:none}
.cform__msg--ok{display:block;background:rgba(113,167,113,.16);color:var(--evening-sea);border:1px solid rgba(113,167,113,.45)}
.cform__msg--err{display:block;background:rgba(179,45,46,.08);color:#8f2425;border:1px solid rgba(179,45,46,.35)}
.cform__hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}