/* =====================================================================
   Service-Wohnen Laatzen – Landingpage
   Seniorenresidenz Laatzen · Auvictum Gruppe · Google-Ads-Kampagne
   ===================================================================== */

/* ---------------------------------------------------------------------
   Schrift – Outfit, lokal gehostet (DSGVO: keine Verbindung zu Google-
   Servern). Outfit steht unter der SIL Open Font License 1.1, Lizenztext
   liegt in assets/fonts/OFL-Outfit.txt. Variable Schrift, Gewichte 300–700.
   --------------------------------------------------------------------- */
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit-latin-var.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------------------
   FARBEN – zwei Ebenen
   Die :root-Werte sind das Standard-Thema (Seniorenresidenz Laatzen,
   grün). Ein zweiter Standort bekommt kein eigenes Stylesheet, sondern
   nur einen Themen-Block weiter unten (z. B. body.theme-nenndorf), der
   dieselben Variablen überschreibt. Deshalb steht in den Regeln unten
   nirgends mehr ein fester Farbwert.

   Wichtig ist die Trennung von Fläche und Schrift:
     --brand       Signaturfarbe als FLÄCHE (Buttons, Badges, Haken)
     --on-brand    Schrift/Icon AUF dieser Fläche
     --brand-ink   dieselbe Marke als SCHRIFT auf Weiß (kontraststark)
   Bei Laatzen ist das Grün dunkel genug für beides, bei einem hellen
   Gelb/Orange nicht – darum die zwei Varianten.
   --------------------------------------------------------------------- */
:root{
  /* Markenfarben – aus dem Logo der Seniorenresidenz Laatzen */
  --brand:        #2E7D46;   /* Logo-Dunkelgrün, Primärfarbe (Fläche) */
  --brand-dark:   #24663A;   /* dunklere Fläche, z. B. Button-Hover */
  --brand-deep:   #17452A;
  --brand-light:  #5FA36F;
  --brand-wash:   #EDF4EC;   /* sehr helle Tönung als Hintergrund */
  --brand-ink:      #2E7D46; /* Marke als Schrift/Rahmen auf Weiß */
  --brand-ink-dark: #24663A; /* dito, Hover */
  --on-brand:     #FFFFFF;   /* Schrift/Icon auf --brand */
  --on-accent2:   #14301C;   /* Schrift/Icon auf --accent2 */
  --accent:        #7AB648;  /* Logo-Mittelgrün, Fokusring */
  --accent2:        #A9C83A; /* Logo-Hellgrün, Akzentflächen */
  --accent2-dark:   #86A522;
  --navy:         #1F3347;   /* Auvictum-Blau, Überschriften */

  /* Haken-Icons der Listen – liegen als Daten-URL vor, damit das Thema
     die Farbe des Hakens mitdrehen kann (Kontrast auf der Fläche). */
  --tick-on-brand:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8Z'/%3E%3C/svg%3E");
  --tick-on-accent2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314301C' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8Z'/%3E%3C/svg%3E");

  /* Feinheiten, die zur Markenfarbe passen müssen */
  --ring:      rgba(46,125,70,.15);  /* Fokusring der Eingabefelder */
  --soft-line: #D3E3D2;              /* Rand auf --brand-wash */
  --veil:      rgba(23,69,42,.62);   /* Schleier über Galeriebildern */

  /* Hero: Verlauf über dem Foto, damit die weiße Schrift trägt */
  --hero-veil:    linear-gradient(100deg, rgba(20,52,34,.95) 0%, rgba(23,69,42,.90) 36%, rgba(23,69,42,.58) 58%, rgba(31,51,71,.30) 100%);
  --hero-veil-sm: linear-gradient(180deg, rgba(20,52,34,.94) 0%, rgba(23,69,42,.90) 60%, rgba(23,69,42,.93) 100%);

  /* Schrift auf dunklem Grund (Hero, Kontaktsektion) */
  --on-dark:            #E8F0E6;
  --on-dark-lead:       #E6F0E4;
  --on-dark-mute:       #D9E6D6;
  --on-dark-soft:       #C9DCC5;
  --on-dark-eyebrow:    #C9E3A3;
  --on-dark-link:       #C9E86A;
  --on-dark-link-hover: #E3F5A3;

  /* Kontaktsektion und Footer */
  --contact-bg: radial-gradient(120% 100% at 0% 0%, #2F7A48 0%, transparent 55%),
                linear-gradient(160deg, #24663A 0%, #1B3A2A 60%, #1F3347 100%);
  --ftr-bg:   #14231B;
  --ftr-fg:   #B9C9BB;
  --ftr-link: #C9E3A3;

  /* Vollflächige dunkle Ebenen (Lightbox, Cookie-Dialog) und die Schatten der
     schwebenden Elemente – tragen ebenfalls den Markenton. */
  --lb-bg:       rgba(12,24,16,.94);
  --dialog-veil: rgba(12,24,16,.45);
  --dialog-shadow: 0 20px 70px rgba(12,24,16,.45);
  --mbar-shadow:   0 -6px 24px rgba(23,69,42,.16);
  --sheet-shadow:  0 -10px 60px rgba(23,69,42,.28);

  --ink:          #1F3347;
  --body:         #2F3A35;
  --muted:        #66716B;
  --line:         #DDE4DC;
  --cream:        #F5F8F3;
  --white:        #FFFFFF;

  --err:          #B3261E;

  --ff-head: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --sh-sm: 0 2px 6px rgba(23,69,42,.07);
  --sh:    0 10px 30px rgba(23,69,42,.10);
  --sh-lg: 0 22px 60px rgba(23,69,42,.20);

  --wrap: 1200px;
  --gut: clamp(18px, 4vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Sprungziele (auch aus Google-Ads-Sitelinks) landen unter dem klebenden Header */
:target,
#wohnungen, #grundriss, #wohneinheiten, #leistungen, #ueber, #kosten, #ablauf, #faq, #anfrage, #anfrage-oben{ scroll-margin-top:90px; }
@media (max-width:640px){
  :target,
  #wohnungen, #grundriss, #wohneinheiten, #leistungen, #ueber, #kosten, #ablauf, #faq, #anfrage, #anfrage-oben{ scroll-margin-top:78px; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

body{
  margin:0;
  font-family:var(--ff-body);
  font-size:18px; line-height:1.6; font-weight:400;
  color:var(--body); background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{ font-family:var(--ff-head); color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em; overflow-wrap:break-word; }
h1{ font-size:clamp(1.8rem, 1.2rem + 2.6vw, 3.3rem); }
h2{ font-size:clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4{ font-size:1.1rem; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.1em; padding-left:1.2em; }

a{ color:var(--brand-ink); }
a:hover{ color:var(--brand-ink-dark); }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-ink); color:#fff; padding:14px 22px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

.eyebrow{
  font-family:var(--ff-body); font-weight:600; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-ink); margin:0 0 .7em;
}
.eyebrow--light{ color:var(--on-dark-eyebrow); }

/* ============================ BUTTONS ============================ */
.btn{
  --bg:var(--brand); --fg:var(--on-brand); --bd:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--ff-body); font-weight:600; font-size:1.05rem; line-height:1.25;
  text-decoration:none; text-align:center; cursor:pointer;
  padding:16px 26px; min-height:56px;
  border:2px solid var(--bd); border-radius:999px;
  background:var(--bg); color:var(--fg);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:var(--sh-sm);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); color:var(--fg); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

.btn--primary{ --bg:var(--brand); --bd:var(--brand); }
.btn--primary:hover{ --bg:var(--brand-dark); --bd:var(--brand-dark); }
.btn--phone{ --bg:#fff; --bd:var(--brand-ink); --fg:var(--brand-ink); }
.btn--phone:hover{ --bg:var(--brand-wash); --fg:var(--brand-ink-dark); }
.btn--ghost{ --bg:transparent; --bd:var(--line); --fg:var(--brand-ink); box-shadow:none; }
.btn--ghost:hover{ --bg:var(--brand-wash); --bd:var(--brand-light); }
.btn--sm{ padding:10px 18px; min-height:46px; font-size:.98rem; }
.btn--lg{ font-size:1.15rem; padding:19px 30px; min-height:62px; }
.btn--block{ display:flex; width:100%; }
.btn--text{ --bg:transparent; --bd:transparent; --fg:var(--brand-ink); box-shadow:none; text-decoration:underline; text-underline-offset:4px; }
.btn--text:hover{ --bg:var(--brand-wash); box-shadow:none; transform:none; }

/* ============================ TELEFON-SYMBOL ============================ */
.telico::before{
  content:""; display:inline-block; flex:none;
  width:1.05em; height:1.05em; margin-right:.45em; vertical-align:-.16em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================ HEADER ============================ */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:74px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand img{ height:44px; width:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt strong{ font-family:var(--ff-head); font-weight:600; font-size:1.12rem; color:var(--ink); }
.brand__txt span{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.hdr__actions{ display:flex; align-items:center; gap:12px; }
.hdr__note{ font-size:.92rem; color:var(--muted); font-weight:500; }
@media (max-width:1000px){ .hdr__note{ display:none; } }
@media (max-width:640px){
  .hdr__in{ min-height:64px; }
  .brand img{ height:36px; }
  .brand__txt strong{ font-size:1rem; }
  .brand__txt span{ display:none; }
  .hdr__actions .btn--phone{ font-size:.9rem; padding:8px 14px; min-height:42px; }
}

/* ============================ HERO ============================ */
.hero{ position:relative; isolation:isolate; background:var(--brand-deep); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:62% 55%; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    var(--hero-veil);
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,380px);
  gap:clamp(28px,4vw,60px); align-items:center;
  padding-block:clamp(44px,6vw,84px);
}
.hero__copy{ color:#fff; max-width:640px; min-width:0; }
.hero__copy .eyebrow{ color:var(--on-dark-eyebrow); }
.hero__copy h1{ color:#fff; margin-bottom:.45em; text-wrap:balance; }
.hero__copy h1 em{ font-style:normal; color:var(--on-dark-link); }
.hero__lead{ font-size:clamp(1.05rem,.98rem + .35vw,1.25rem); color:var(--on-dark-lead); margin-bottom:1.3em; }
.hero__usp{ list-style:none; padding:0; margin:0 0 1.4em; display:grid; gap:10px; }
@media (min-width:560px){ .hero__usp{ grid-template-columns:1fr 1fr; } }
.hero__usp li{ position:relative; padding-left:34px; color:#fff; font-weight:500; font-size:1.02rem; }
.hero__usp li::before{
  content:""; position:absolute; left:0; top:.18em; width:22px; height:22px; border-radius:50%;
  background:var(--accent2) var(--tick-on-accent2) center/16px no-repeat;
}
.hero__proof{ font-size:.95rem; color:var(--on-dark-soft); margin:0; }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__copy{ max-width:none; }
  .hero::before{ background:var(--hero-veil-sm); }
}

/* ============================ FORMULAR-KARTE ============================ */
.formcard{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:clamp(20px,2.4vw,28px); }
.formcard--slim{ align-self:center; }
.formcard--slim .formcard__title{ font-size:1.32rem; }
.formcard--slim input{ padding:11px 14px; min-height:50px; }
.formcard--big{ padding:clamp(24px,3vw,38px); }

.formcard__title{ margin:0 0 .25em; }
.formcard__sub{ font-size:.95rem; color:var(--muted); margin:0 0 18px; }
.formcard__legal{ font-size:.82rem; line-height:1.5; color:var(--muted); margin:12px 0 0; }
.formcard__legal a{ color:var(--brand-ink); }

.formcard__alt{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.92rem; color:var(--muted);
}
.formcard__alt a{ font-weight:600; text-decoration:none; border-bottom:2px solid currentColor; }
.link-tel{ color:var(--brand-ink); }

.f-row{ display:grid; gap:12px; }
.f-row--2{ grid-template-columns:1fr 1fr; }
@media (max-width:480px){ .f-row--2{ grid-template-columns:1fr; } }

.field{ margin-bottom:12px; display:flex; flex-direction:column; }
.field label{ font-weight:500; font-size:.94rem; color:var(--ink); margin-bottom:5px; }
.field input,.field select,.field textarea{
  font-family:var(--ff-body); font-size:1.02rem; color:var(--ink);
  padding:13px 15px; min-height:54px;
  border:2px solid var(--line); border-radius:var(--r-sm); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; width:100%;
}
.field textarea{ min-height:92px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-ink); box-shadow:0 0 0 4px var(--ring);
}
.field input::placeholder,.field textarea::placeholder{ color:#98A29C; }
.field.is-err input,.field.is-err select{ border-color:var(--err); }
.err{ display:none; color:var(--err); font-size:.85rem; margin-top:4px; font-weight:500; }
.field.is-err .err{ display:block; }

.form-error{
  background:#FDECEA; border:2px solid #F3C0BB; color:var(--err);
  border-radius:var(--r-sm); padding:12px 14px; font-size:.92rem; font-weight:500; margin-bottom:14px;
}
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
.btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }

.thanks{ text-align:center; padding:12px 4px; }
.thanks h2{ font-size:1.5rem; margin-bottom:.3em; }
.thanks p{ color:var(--body); }
.thanks .btn{ margin-top:10px; }
.thanks__ico{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background:var(--accent2); color:var(--on-accent2); font-size:34px; line-height:64px; font-weight:700;
}

/* ============================ TRUSTBAR ============================ */
.trustbar{ background:var(--brand-wash); border-bottom:1px solid var(--line); }
.trustbar__in{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding-block:22px; text-align:center; }
.trust{ display:flex; flex-direction:column; gap:2px; }
.trust strong{ font-family:var(--ff-head); font-weight:600; color:var(--brand-ink-dark); font-size:1.08rem; }
.trust span{ font-size:.88rem; color:var(--muted); }
@media (max-width:820px){ .trustbar__in{ grid-template-columns:repeat(2,1fr); text-align:left; } .trust:last-child{ grid-column:1/-1; } }

/* ============================ SECTIONS ============================ */
.sec{ padding-block:clamp(52px,6vw,96px); }
.sec--tint{ background:var(--cream); }
.sec__head{ max-width:760px; margin:0 auto clamp(30px,4vw,52px); text-align:center; }
.sec__head h2{ text-wrap:balance; }
.sec__lead{ font-size:1.1rem; color:var(--muted); margin:0; }

/* ============================ DIE WOHNUNGEN ============================ */
.shared{ list-style:none; padding:0; margin:-18px 0 clamp(30px,4vw,46px); display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.shared li{
  font-size:.88rem; font-weight:500; color:var(--brand-ink-dark);
  background:var(--brand-wash); border:1px solid var(--soft-line); border-radius:999px; padding:6px 15px;
}

/* Eine Wohnung, ein Angebot: links das Foto-Mosaik, rechts die Fakten. */
.offer{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:clamp(22px,3vw,44px); align-items:start; }
@media (max-width:940px){ .offer{ grid-template-columns:1fr; } }

/* Zwei feste Reihen, damit die Fotos nicht zu stark beschnitten werden;
   der Hinweis auf das Haus steht darunter und gleicht die Höhe zur Faktenkarte aus */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:240px 240px; gap:10px; }
.mosaic .gal__it{ aspect-ratio:auto; min-height:140px; }
/* Variante für Standorte, von denen erst zwei Fotos vorliegen: zwei gleich
   große Kacheln statt des vierspaltigen Mosaiks. Sobald weitere Bilder da
   sind, im HTML einfach die Klasse mosaic--duo entfernen. */
.mosaic--duo{ grid-template-columns:1fr 1fr; grid-template-rows:minmax(240px,auto); }
.mosaic--duo .mosaic__main{ grid-column:auto; grid-row:auto; }
@media (max-width:560px){ .mosaic--duo{ grid-template-columns:1fr; } }
.mosaic__main{ grid-column:1 / span 2; grid-row:1 / span 2; }
@media (max-width:1100px){ .mosaic{ grid-template-rows:200px 200px; } }
@media (max-width:940px){ .mosaic{ grid-template-rows:minmax(150px,auto) minmax(150px,auto); } }
@media (max-width:560px){ .mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto; grid-auto-rows:minmax(120px,auto); } .mosaic__main{ grid-column:1 / -1; grid-row:auto; aspect-ratio:16/10; } }

.gal__it{ padding:0; border:0; background:var(--brand-wash); cursor:pointer; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1; line-height:0; position:relative; }
.gal__more{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  background:var(--veil); color:#fff; font-family:var(--ff-head); font-weight:600; font-size:1.15rem; line-height:1;
}
.gal__it img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease, filter .3s ease; }
.mosaic .gal__it:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.mosaic__hint{ margin:12px 0 0; font-size:.9rem; color:var(--muted); }
.offer__gallery{ min-width:0; }
.gal__it:hover img{ transform:scale(1.06); filter:brightness(1.05); }

.offer__facts{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); box-shadow:var(--sh-sm); }
.offer__facts h3{ font-size:1.3rem; margin-bottom:.6em; }
.facts{ margin:0 0 18px; display:grid; gap:0; }
.facts > div{ display:grid; grid-template-columns:minmax(96px,.55fr) 1fr; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.96rem; }
.facts dt{ color:var(--muted); font-weight:500; }
.facts dd{ margin:0; color:var(--ink); }
.offer__note{ font-size:.95rem; color:var(--muted); margin:16px 0 0; padding:14px 16px; border-radius:var(--r-sm); background:var(--cream); border:1px solid var(--line); }
.place__cta{ display:flex; flex-wrap:wrap; gap:10px; }
.place__cta .btn{ flex:1 1 auto; }
.offer__phone{ margin:14px 0 0; font-size:.95rem; color:var(--muted); }
.offer__phone a{ font-weight:500; text-decoration:none; border-bottom:2px solid currentColor; }

/* ============================ GRUNDRISS ============================ */
.plan{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
@media (max-width:900px){ .plan{ grid-template-columns:1fr; } }
.plan__img{ text-align:center; }
.plan__btn{ display:block; width:100%; aspect-ratio:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(14px,2vw,26px); box-shadow:var(--sh-sm); }
.plan__btn img{ width:auto; max-width:100%; max-height:620px; height:auto; margin-inline:auto; object-fit:contain; transition:transform .3s ease; }
.plan__btn:hover img{ transform:scale(1.02); filter:none; }
.plan__hint{ margin:10px 0 0; font-size:.9rem; color:var(--muted); }
.plan__lead{ margin:0 0 18px; }
.rooms{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin:0 0 22px; }
.rooms td{ padding:9px 0; border-bottom:1px solid var(--line); }
.rooms td:last-child{ text-align:right; font-weight:600; color:var(--ink); }

/* ============================ LEISTUNGEN ============================ */
.cols2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.5vw,32px); align-items:start; }
@media (max-width:880px){ .cols2{ grid-template-columns:1fr; } }
.card{ border-radius:var(--r-lg); padding:clamp(22px,2.6vw,34px); border:1px solid var(--line); background:#fff; }
.card--inc{ background:var(--brand-wash); border-color:var(--soft-line); }
.card__note{ font-size:.9rem; color:var(--muted); margin:-.4em 0 1.2em; font-weight:500; }
.check{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.check li{ position:relative; padding-left:32px; }
.check li::before{
  content:""; position:absolute; left:0; top:.3em; width:20px; height:20px; border-radius:50%;
  background:var(--brand) var(--tick-on-brand) center/14px no-repeat;
}
.check--alt li::before{ background-color:var(--accent2); background-image:var(--tick-on-accent2); }
.card__box{ margin-top:26px; padding:20px 22px; border-radius:var(--r); background:var(--cream); border:1px solid var(--line); }
.card__box h4{ margin-bottom:.35em; }
.card__box p{ margin:0; font-size:.98rem; }

/* ============================ STORY ============================ */
.story{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:940px){ .story{ grid-template-columns:1fr; } }
.story__txt h3{ margin-top:1.6em; }
.story__img{ margin:0; position:sticky; top:100px; }
.story__img img{ border-radius:var(--r-lg); box-shadow:var(--sh); }
.story__img figcaption{ font-size:.9rem; color:var(--muted); margin-top:12px; font-style:italic; }
@media (max-width:940px){ .story__img{ position:static; } }

/* ============================ KOSTEN ============================ */
.costs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); margin-bottom:34px; }
@media (max-width:880px){ .costs{ grid-template-columns:1fr; } }
.cost{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-sm); }
.cost__n{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:var(--on-brand); font-family:var(--ff-head); font-weight:600; font-size:1.2rem; margin-bottom:14px;
}
.cost__val{ display:block; font-family:var(--ff-head); font-weight:600; font-size:1.9rem; color:var(--ink); margin-bottom:.15em; font-variant-numeric:tabular-nums; }
.cost h3{ font-size:1.2rem; }
.cost p{ margin:0; font-size:1rem; }

/* Preistabelle – erst 5 Zeilen, aufklappbar */
.prices-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; margin-bottom:26px; }
.prices-scroll{ overflow-x:auto; }
.prices{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:680px; }
.prices th,.prices td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.prices th{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--cream); font-weight:600; }
.prices .num{ text-align:right; }
.prices .warm{ font-weight:600; color:var(--ink); }
.prices tbody tr:nth-child(n+6){ display:none; }
.prices.is-open tbody tr:nth-child(n+6){ display:table-row; }
.prices tr.belegt td{ color:var(--muted); }
.pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:.8rem; font-weight:500; }
.pill--frei{ background:var(--brand-wash); color:var(--brand-ink-dark); }
.pill--belegt{ background:#EEF0EE; color:var(--muted); }
.prices-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; background:var(--cream); border-top:1px solid var(--line); font-size:.9rem; color:var(--muted); }

.note{
  background:var(--brand-wash); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px);
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:center;
}
@media (max-width:820px){ .note{ grid-template-columns:1fr; } }
.note p{ margin:0; }
.note__cta{ display:flex; flex-direction:column; gap:12px; }

/* ============================ ABLAUF ============================ */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.step{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--sh-sm); }
.step__n{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--accent2); color:var(--on-accent2); font-family:var(--ff-head); font-weight:600; font-size:1.25rem; margin-bottom:14px;
}
.step h3{ font-size:1.18rem; }
.step p{ margin:0; font-size:1rem; }

/* ============================ FAQ ============================ */
.faq{ display:grid; gap:12px; }
.faq__it{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.faq__it[open]{ border-color:var(--brand-light); box-shadow:var(--sh-sm); }
.faq__it summary{
  cursor:pointer; list-style:none; padding:20px 58px 20px 24px; position:relative;
  font-family:var(--ff-head); font-weight:500; font-size:1.1rem; color:var(--ink);
}
.faq__it summary::-webkit-details-marker{ display:none; }
.faq__it summary::after{
  content:""; position:absolute; right:22px; top:50%; width:14px; height:14px; margin-top:-9px;
  border-right:3px solid var(--brand-ink); border-bottom:3px solid var(--brand-ink);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq__it[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq__it summary:hover{ background:var(--brand-wash); }
.faq__a{ padding:0 24px 20px; border-top:1px solid var(--line); padding-top:16px; }
.faq__a p:last-child{ margin-bottom:0; }

/* ============================ KONTAKT ============================ */
.contact{
  background:
    var(--contact-bg);
  color:var(--on-dark); padding-block:clamp(56px,6vw,100px);
}
.contact__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,520px); gap:clamp(30px,4vw,64px); align-items:start; }
@media (max-width:960px){ .contact__in{ grid-template-columns:1fr; } }
.contact h2{ color:#fff; text-wrap:balance; }
.contact .formcard h2{ color:var(--ink); }
.contact__lead{ font-size:1.1rem; color:var(--on-dark-mute); }

.contact__alts{ display:grid; gap:12px; margin:28px 0 30px; }
.altcard{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r); padding:16px 18px; color:#fff; min-height:78px;
  transition:background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.altcard:hover{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); transform:translateY(-2px); color:#fff; }
.altcard__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; flex:none; background:var(--accent2); }
.altcard__ico svg{ width:26px; height:26px; fill:var(--on-accent2); }
.altcard--mail .altcard__ico{ background:rgba(255,255,255,.9); }
.altcard__txt{ display:flex; flex-direction:column; min-width:0; }
.altcard__txt strong{ font-family:var(--ff-head); font-weight:600; font-size:1.15rem; overflow-wrap:anywhere; }
.altcard__txt span{ font-size:.9rem; color:var(--on-dark-soft); }

.contact__adr{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2); }
@media (max-width:520px){ .contact__adr{ grid-template-columns:1fr; } }
.contact__adr h3{ color:#fff; font-size:1.08rem; margin-bottom:.3em; }
.contact__adr p{ margin:0; font-size:.98rem; color:var(--on-dark-mute); }
.contact__adr a{ color:var(--on-dark-link); font-weight:500; text-decoration:none; border-bottom:2px solid currentColor; }
.contact__adr a:hover{ color:var(--on-dark-link-hover); }

/* ============================ FOOTER ============================ */
.ftr{ background:var(--ftr-bg); color:var(--ftr-fg); padding-block:46px 30px; font-size:.95rem; }
.ftr__in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:32px; }
@media (max-width:860px){ .ftr__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr__in{ grid-template-columns:1fr; } }
.ftr h3{ color:#fff; font-size:1rem; margin-bottom:.6em; }
.ftr p{ margin:0 0 .8em; }
.ftr a{ color:var(--ftr-link); }
.ftr a:hover{ color:#fff; }
.ftr__brand .brand{ color:#fff; margin-bottom:14px; }
.ftr__brand .brand__txt strong{ color:#fff; }
.ftr__brand .brand__txt span{ color:var(--ftr-fg); }

/* ============================ MOBILE STICKY BAR ============================ */
.mbar{ display:none; }
@media (max-width:860px){
  .mbar{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:var(--mbar-shadow);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar__it{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 8px; min-height:62px; border:0; background:none; cursor:pointer;
    font-family:var(--ff-body); font-weight:600; font-size:1rem; text-decoration:none; color:var(--ink);
  }
  .mbar__it svg{ width:22px; height:22px; fill:currentColor; }
  .mbar__it--primary{ background:var(--brand); color:var(--on-brand); }
  .mbar__it--tel{ color:var(--brand-ink); }
  body{ padding-bottom:70px; }
}

/* ============================ LIGHTBOX ============================ */
.lb{
  position:fixed; inset:0; z-index:120; background:var(--lb-bg);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,50px);
}
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; gap:12px; }
.lb__fig img{ max-height:78vh; width:auto; margin-inline:auto; border-radius:var(--r); object-fit:contain; background:#fff; }
.lb__fig figcaption{ color:var(--on-dark-mute); text-align:center; font-size:.95rem; }
.lb__close,.lb__nav{
  position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer;
  width:52px; height:52px; border-radius:50%; font-size:30px; line-height:1; display:grid; place-items:center;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.3); }
.lb__close{ top:18px; right:18px; }
.lb__nav--prev{ left:14px; top:50%; margin-top:-26px; }
.lb__nav--next{ right:14px; top:50%; margin-top:-26px; }

/* ============================ COOKIE-BANNER ============================ */
.btn--outline{ --bg:#fff; --bd:var(--brand-ink); --fg:var(--brand-ink); }
.btn--outline:hover{ --bg:var(--brand-wash); --fg:var(--brand-ink-dark); }

.cc{
  position:fixed; inset:0; z-index:140; padding:clamp(12px,2vw,28px);
  display:flex; align-items:flex-end; justify-content:center;
  background:var(--dialog-veil); pointer-events:auto;
}
@media (min-width:900px){ .cc{ align-items:center; } }
.cc__box{
  width:100%; max-width:620px; background:#fff; color:var(--body);
  border-radius:var(--r-lg); box-shadow:var(--dialog-shadow);
  padding:clamp(20px,2.6vw,30px); max-height:min(88vh,860px); overflow:auto; overscroll-behavior:contain;
  transition:max-width .2s ease;
}
.cc__box--wide{ max-width:760px; }
.cc__title{ font-size:1.35rem; margin-bottom:.35em; }
.cc__lead{ font-size:.98rem; margin-bottom:18px; }
.cc__details{ margin:0 0 20px; display:grid; gap:12px; }
.cc__row{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.cc__row--fix{ background:var(--brand-wash); border-color:var(--soft-line); }
.cc__rowhead{ display:flex; gap:12px; align-items:flex-start; }
.cc__rowhead input{ width:22px; height:22px; margin:3px 0 0; accent-color:var(--brand-ink); flex:none; }
.cc__rowhead input:not(:disabled){ cursor:pointer; }
.cc__rowtxt{ display:flex; flex-direction:column; gap:3px; }
label.cc__rowtxt{ cursor:pointer; }
.cc__rowtxt strong{ font-family:var(--ff-head); font-weight:600; color:var(--ink); font-size:1.02rem; }
.cc__rowtxt strong em{
  font-style:normal; font-family:var(--ff-body); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand-ink);
  background:#fff; border:1px solid var(--soft-line); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:2px;
}
.cc__rowtxt span{ font-size:.9rem; color:var(--muted); line-height:1.5; }
.cc__dienste{ margin-top:12px; padding-left:34px; display:grid; gap:6px; }
@media (max-width:520px){ .cc__dienste{ padding-left:0; } }
.ccd{ border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; }
.ccd[open]{ border-color:var(--brand-light); }
.ccd summary{ cursor:pointer; list-style:none; position:relative; padding:9px 34px 9px 13px; font-size:.88rem; font-weight:600; color:var(--ink); }
.ccd summary::-webkit-details-marker{ display:none; }
.ccd summary::after{
  content:""; position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:2px solid var(--brand-ink); border-bottom:2px solid var(--brand-ink); transform:rotate(45deg); transition:transform .2s ease;
}
.ccd[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.ccd summary:hover{ background:var(--brand-wash); border-radius:var(--r-sm); }
.ccd__in{ padding:4px 13px 13px; border-top:1px solid var(--line); }
.ccd__dl{ margin:10px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.83rem; }
@media (max-width:560px){ .ccd__dl{ grid-template-columns:1fr; gap:2px; } }
.ccd__dl dt{ font-weight:700; color:var(--ink); white-space:nowrap; }
.ccd__dl dd{ margin:0; color:var(--muted); line-height:1.5; }
@media (max-width:560px){ .ccd__dl dd{ margin-bottom:8px; } }
.ccd__dl a{ word-break:break-all; }
.ccd__tab{ width:100%; margin-top:14px; border-collapse:collapse; font-size:.82rem; }
.ccd__tab caption{ text-align:left; font-weight:700; color:var(--ink); font-size:.83rem; padding-bottom:5px; }
.ccd__tab th,.ccd__tab td{ text-align:left; padding:6px 10px; border:1px solid var(--line); color:var(--muted); font-weight:400; }
.ccd__tab th{ font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.ccd__tab td{ white-space:nowrap; }
@media (max-width:620px){ .ccd__tab td{ white-space:normal; } .ccd__tab th,.ccd__tab td{ padding:6px 8px; } }
.cc__hint{ font-size:.8rem; color:var(--muted); margin:4px 0 0; line-height:1.5; }
.cc__btns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cc__btns .cc__save{ grid-column:1/-1; }
@media (max-width:520px){ .cc__btns{ grid-template-columns:1fr; } }
.cc__foot{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:.9rem; }
.cc__foot a,.cc__toggle{ color:var(--brand-ink); font-family:var(--ff-body); font-weight:500; font-size:.9rem; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
.cc__foot a:hover,.cc__toggle:hover{ color:var(--brand-ink-dark); }
body.cc-open{ overflow:hidden; }
body.cc-open .mbar{ display:none; }
.cc--sheet{ inset:auto 0 0 0; background:none; padding-bottom:clamp(12px,2vw,28px); }
.cc--sheet .cc__box{ box-shadow:var(--sheet-shadow); border:1px solid var(--line); }
body.cc-open--sheet{ overflow:auto; }

/* ============================ EINWILLIGUNGS-CHECKBOX (optional) ============================ */
.field-check{ display:flex; gap:12px; align-items:flex-start; margin:4px 0 12px; }
.field-check input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--brand); flex:none; }
.field-check label{ font-size:.88rem; line-height:1.5; color:var(--muted); }
.field-check.is-err label{ color:var(--err); }
.field-check.is-err input{ outline:2px solid var(--err); outline-offset:2px; }
.field-check .err{ flex-basis:100%; }

/* ============================ PRINT ============================ */
@media print{
  .hdr,.mbar,.lb,.formcard,.cc{ display:none!important; }
  body{ font-size:11pt; }
  .prices tbody tr:nth-child(n+6){ display:table-row; }
}

/* ---------------------------------------------------------------------
   Rechtsseiten (impressum.html, datenschutz.html)
   --------------------------------------------------------------------- */
.legal{ padding-block:clamp(32px,6vw,64px) clamp(48px,8vw,96px); }
.legal h1{ margin-bottom:.4em; }
.legal h2{ font-size:clamp(1.25rem,1.1rem+.7vw,1.6rem); margin-top:1.8em; }
.legal h3{ font-size:1.1rem; margin-top:1.3em; }
.legal p,.legal li{ font-size:1rem; color:var(--body); }
.legal ul{ padding-left:1.25em; }
.legal li{ margin-bottom:.4em; }
.legal a{ color:var(--brand-ink-dark); }
.legal code{ font-size:.92em; background:var(--cream); padding:.05em .35em; border-radius:4px; }
.legal__lead{ font-size:1.1rem; color:var(--muted); }
.legal__stand{ margin-top:2.5em; color:var(--muted); font-size:.92rem; }
.ftr--slim .ftr__in{ display:block; text-align:center; }
.ftr--slim p{ margin:0; }
.legal-page .mbar{ display:none; }

.ftr__betreiber{ font-size:.85rem; color:var(--muted); }

/* ============================ LOGO ALS BILD ============================ */
/* Für Häuser, deren Logo als fertiges Bild (Marke + Schriftzug) vorliegt –
   dann entfällt der Text neben der Marke. */
.brand--lockup img{ height:48px; width:auto; }
@media (max-width:640px){
  .brand--lockup img{ height:34px; }
  .hdr .brand--lockup ~ .hdr__actions .btn--phone{ white-space:nowrap; }
}
@media (max-width:360px){ .brand--lockup img{ height:28px; } }
.ftr__brand .brand--lockup img{ height:46px; }
/* Abzeichen über der Hero-Überschrift, z. B. „Neu: Haus C · 23 Wohnungen frei" */
.hero__badge{
  display:inline-block; margin:0 0 1.1em;
  padding:7px 16px 7px 12px; border-radius:999px; line-height:1.3;
  background:var(--brand); color:var(--on-brand); font-size:.98rem; font-weight:500;
  box-shadow:var(--sh-sm);
}
.hero__badge::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:.55em; vertical-align:.12em; border-radius:50%; background:currentColor; }
.hero__badge strong{ font-weight:700; }
.hero__proof a{ color:var(--on-dark-link); font-weight:500; }
.hero__proof a:hover{ color:var(--on-dark-link-hover); }

/* ============================ 3D-RUNDGANG ============================ */
/* Reiter links, Bühne rechts (Bild + Steckbrief). Umschalten: main.js,
   Block „REITER". Alle Bilder der Bühne sind eine Lightbox-Galerie. */
.tour{ display:grid; grid-template-columns:minmax(230px,290px) minmax(0,1fr); gap:clamp(16px,2.2vw,28px); align-items:start; }
.tour__tabs{ display:flex; flex-direction:column; gap:8px; }
.tour__tab{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  font:inherit; color:var(--body); background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:13px 18px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.tour__tab:hover{ border-color:var(--brand-light); }
.tour__tab.is-active{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); box-shadow:var(--sh-sm); }
.tour__tabtitle{ font-family:var(--ff-head); font-weight:600; font-size:1.02rem; line-height:1.25; }
.tour__tabmeta{ font-size:.85rem; opacity:.82; font-variant-numeric:tabular-nums; }

.tour__stage{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.tour__panel{ display:none; grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr); }
.tour__panel.is-active{ display:grid; }
.tour__img{ aspect-ratio:auto; border-radius:0; background:#fff; height:clamp(380px,48vw,620px); padding:clamp(12px,2vw,26px); }
.tour__img img{ object-fit:contain; }
.tour__img:hover img{ transform:scale(1.02); filter:none; }
.tour__zoom{
  position:absolute; right:14px; bottom:14px; line-height:1.2; pointer-events:none;
  background:var(--veil); color:#fff; font-size:.82rem; font-weight:500; padding:7px 13px; border-radius:999px;
}
.tour__info{ display:flex; flex-direction:column; padding:clamp(20px,2.4vw,30px); border-left:1px solid var(--line); }
.tour__kicker{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-ink); margin:0 0 .5em; }
.tour__info h3{ margin-bottom:.15em; }
.tour__size{ font-family:var(--ff-head); font-weight:600; font-size:1.75rem; color:var(--ink); margin:0 0 .7em; font-variant-numeric:tabular-nums; }
.tour__rooms{ list-style:none; padding:0; margin:0 0 1em; display:flex; flex-wrap:wrap; gap:7px; }
.tour__rooms li{ font-size:.86rem; font-weight:500; color:var(--brand-ink-dark); background:var(--brand-wash); border:1px solid var(--soft-line); border-radius:999px; padding:4px 12px; }
.tour__cta{ margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.tour__pdf{ text-align:center; font-size:.95rem; font-weight:500; }
.tour__note{ font-size:.9rem; color:var(--muted); text-align:center; margin:18px 0 0; }

@media (max-width:1000px){
  .tour{ grid-template-columns:1fr; }
  .tour__tabs{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1); padding:2px var(--gut) 6px; scrollbar-width:thin; }
  .tour__tab{ flex:0 0 auto; scroll-snap-align:start; padding:10px 15px; }
}
@media (max-width:760px){
  .tour__panel.is-active{ grid-template-columns:1fr; }
  .tour__img{ height:auto; aspect-ratio:1 / 1.02; }
  .tour__info{ border-left:0; border-top:1px solid var(--line); }
}

/* ============================ ALLE WOHNEINHEITEN ============================ */
/* Filter: main.js, Block „FILTER". Ausgefilterte Karten tragen hidden. */
.ufilter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-14px 0 10px; }
.ufilter__btn{
  font:inherit; font-size:.95rem; font-weight:500; cursor:pointer; min-height:44px;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--body);
  transition:border-color .15s ease, background-color .15s ease;
}
.ufilter__btn span{ font-size:.82rem; color:var(--muted); margin-left:3px; font-variant-numeric:tabular-nums; }
.ufilter__btn:hover{ border-color:var(--brand-light); }
.ufilter__btn.is-active{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.ufilter__btn.is-active span{ color:inherit; opacity:.75; }
.ufilter__count{ text-align:center; font-size:.9rem; color:var(--muted); margin:0 0 22px; }

.units{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(225px, 1fr)); gap:clamp(12px,1.8vw,22px); }
.unit{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); }
.unit__img{ aspect-ratio:1; border-radius:0; background:#fff; padding:14px; border-bottom:1px solid var(--line); }
.unit__img img{ object-fit:contain; }
.unit__img:hover img{ transform:scale(1.04); filter:none; }
.unit__body{ flex:1; display:flex; flex-direction:column; gap:3px; padding:13px 16px 16px; }
.unit__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0; }
.unit__we{ font-family:var(--ff-head); font-weight:600; font-size:1.15rem; color:var(--ink); }
.unit__size{ font-weight:600; color:var(--brand-ink-dark); font-variant-numeric:tabular-nums; white-space:nowrap; }
.unit__meta{ font-size:.88rem; line-height:1.4; color:var(--muted); margin:0 0 12px; }
/* Wischleiste: eine Reihe Karten statt eines langen Rasters. Pfeile:
   main.js, Block „LEISTE". */
.strip{ position:relative; }
.units--strip{
  display:grid; grid-auto-flow:column; grid-template-columns:none;
  grid-auto-columns:calc((100% - 3 * 16px) / 4.15); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px;
  padding:4px 2px 14px; scrollbar-width:thin;
}
.units--strip .unit{ scroll-snap-align:start; }
.unit__ask{
  align-self:flex-start; margin-top:auto; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.95rem; font-weight:600; color:var(--brand-ink);
  text-decoration:underline; text-underline-offset:3px; min-height:32px;
}
.unit__ask:hover{ color:var(--brand-ink-dark); }
.strip__nav{
  position:absolute; top:calc(50% - 40px); z-index:2; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:1.7rem; line-height:1;
  background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--sh);
  transition:opacity .15s ease;
}
.strip__nav--prev{ left:-14px; }
.strip__nav--next{ right:-14px; }
.strip__nav:disabled{ opacity:0; pointer-events:none; }
@media (max-width:1000px){ .units--strip{ grid-auto-columns:calc((100% - 2 * 16px) / 3.2); } }
@media (max-width:640px){
  .units--strip{ grid-auto-columns:58%; gap:12px; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); scroll-padding-inline:var(--gut); }
  .strip__nav{ display:none; }
  .unit__img{ padding:8px; }
  .unit__body{ padding:10px 12px 12px; }
  .unit__head{ flex-direction:column; gap:0; }
}
.units__foot{ font-size:.86rem; color:var(--muted); text-align:center; max-width:760px; margin:24px auto 0; }
.units__foot a{ font-weight:500; white-space:nowrap; }

/* Preise auf Karten und im 3D-Steckbrief */
.unit__price{ margin:0 0 10px; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.unit__price strong{ font-family:var(--ff-head); font-size:1.08rem; font-weight:600; color:var(--ink); }
.unit__meta{ margin-bottom:4px; }
.tour__price{ margin:-.35em 0 1em; color:var(--muted); font-size:.95rem; font-variant-numeric:tabular-nums; }
.tour__price strong{ font-family:var(--ff-head); font-weight:600; font-size:1.15rem; color:var(--brand-ink-dark); }

/* ============================ MIETE & KOSTEN ============================ */
.pgrid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:start; }
@media (max-width:900px){ .pgrid{ grid-template-columns:1fr; } }
.pbox{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); box-shadow:var(--sh-sm); }
.pbox h3{ font-size:1.2rem; margin-bottom:.8em; }
.pbox--extras h3{ margin-bottom:.15em; }
.pbox__sub{ font-size:.9rem; color:var(--muted); margin:0 0 .9em; }
.pbox__note{ font-size:.88rem; color:var(--muted); margin:16px 0 0; line-height:1.5; }
.ptypes{ list-style:none; padding:0; margin:0; }
.ptype{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.ptype:first-child{ border-top:0; padding-top:0; }
.ptype__name{ display:flex; flex-direction:column; min-width:0; }
.ptype__name > strong + span{ margin-top:1px; }
.ptype__name strong{ font-weight:600; color:var(--ink); }
.ptype__name span{ font-size:.85rem; color:var(--muted); }
.ptype__price{ font-family:var(--ff-head); font-weight:600; font-size:1.1rem; color:var(--brand-ink-dark); white-space:nowrap; font-variant-numeric:tabular-nums; }
.extras{ list-style:none; padding:0; margin:0; }
.extras li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:.95rem; }
.extras li:first-child{ border-top:0; }
.extras li strong{ font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pcta{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(22px,3vw,32px); text-align:center; }
.pcta p{ margin:0; font-size:1.15rem; font-weight:500; color:var(--ink); }
.pcta p a{ font-weight:600; text-decoration:none; border-bottom:2px solid currentColor; white-space:nowrap; }

/* =====================================================================
   THEMA „Seniorenresidenz Bad Nenndorf“ (/badnenndorf/)
   ---------------------------------------------------------------------
   Nur Farben – Layout, Abstände und Bausteine bleiben identisch.
   Die Werte stammen aus dem Auvictum-Flyer und dem Logo der Residenz:
   Bernstein #EDA21B als Signaturfläche, Sonnengelb #EFE42E als Akzent,
   dazu warmes Schwarzbraun als Schriftfarbe. Das Gelb ist zu hell für
   weiße Schrift – deshalb ist --on-brand hier dunkel und --brand-ink
   ein abgedunkeltes Bernstein (5,9:1 auf Weiß).
   Aktiviert über <body class="theme-nenndorf">.
   ===================================================================== */
body.theme-nenndorf{
  --brand:        #EDA21B;   /* Auvictum-Bernstein, Signaturfläche */
  --brand-dark:   #D98F0C;   /* Hover der Flächen */
  --brand-deep:   #3B2A08;   /* dunkler Grund hinter dem Hero-Foto */
  --brand-light:  #F3C468;
  --brand-wash:   #FDF4E3;
  --brand-ink:      #8A5A05; /* Marke als Schrift auf Weiß */
  --brand-ink-dark: #6E4703;
  --on-brand:     #241A05;   /* Schrift auf Bernstein */
  --on-accent2:   #241A05;   /* Schrift auf Sonnengelb */
  --accent:        #EDA21B;
  --accent2:        #EFE42E; /* Sonnengelb aus dem Flyer */
  --accent2-dark:   #D6CB14;
  --navy:         #1C1608;

  --ink:   #241A05;
  --body:  #3A3327;
  --muted: #776C58;
  --line:  #E6DECD;
  --cream: #FBF7EF;

  --tick-on-brand:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23241A05' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8Z'/%3E%3C/svg%3E");
  --tick-on-accent2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23241A05' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6L20.4 8.2 19 6.8Z'/%3E%3C/svg%3E");

  --ring:      rgba(237,162,27,.28);
  --soft-line: #F0DEB4;
  --veil:      rgba(59,42,8,.62);

  --sh-sm: 0 2px 6px rgba(59,42,8,.08);
  --sh:    0 10px 30px rgba(59,42,8,.12);
  --sh-lg: 0 22px 60px rgba(59,42,8,.22);

  --hero-veil:    linear-gradient(100deg, rgba(38,27,5,.94) 0%, rgba(59,42,8,.88) 36%, rgba(59,42,8,.55) 58%, rgba(93,63,6,.28) 100%);
  --hero-veil-sm: linear-gradient(180deg, rgba(38,27,5,.93) 0%, rgba(59,42,8,.89) 60%, rgba(59,42,8,.93) 100%);

  --on-dark:            #F4EDDF;
  --on-dark-lead:       #F3EBDC;
  --on-dark-mute:       #E7DCC6;
  --on-dark-soft:       #DCCFB4;
  --on-dark-eyebrow:    #F5C969;
  --on-dark-link:       #F7D24F;
  --on-dark-link-hover: #FCE68E;

  --contact-bg: radial-gradient(120% 100% at 0% 0%, #7A5207 0%, transparent 55%),
                linear-gradient(160deg, #4A3409 0%, #33240A 60%, #1C1608 100%);
  --ftr-bg:   #1C1608;
  --ftr-fg:   #C8BCA4;
  --ftr-link: #F5C969;

  --lb-bg:       rgba(20,15,4,.94);
  --dialog-veil: rgba(20,15,4,.45);
  --dialog-shadow: 0 20px 70px rgba(20,15,4,.45);
  --mbar-shadow:   0 -6px 24px rgba(59,42,8,.18);
  --sheet-shadow:  0 -10px 60px rgba(59,42,8,.30);
}