/* Dwellii TR3M — Landing Page A. Design rationale lives in DESIGN-DECISIONS.md. */

@font-face { font-family:"Goia"; src:url("assets/fonts/goia-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Goia"; src:url("assets/fonts/goia-700.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"GoiaDisplay"; src:url("assets/fonts/goia-display-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }

:root {
  color-scheme: light dark;
  --paper:#faf8f4; --surface:#f2ede4; --surface-2:#e9e1d2; --line:#dcd3c3;
  --ink:#101820; --muted:#4f4a42; --faint:#8b8272;
  --blue:#10069f; --blue-tint:#e7e7f3; --blue-deep:#10069f;
  --orange:#de7c00; --orange-ink:#101820; --orange-hover:#c46d00;
  --orange-accessible:#a65d00;
  --error:#b02a1a;
  --font-body:"Goia", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head:"GoiaDisplay","Goia", system-ui, sans-serif;
  --maxw:1140px;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px;
  --radius:var(--r-lg);
  --shadow-sm:0 1px 2px rgba(16,24,32,.05), 0 6px 14px rgba(16,24,32,.05);
  --shadow-md:0 2px 4px rgba(16,24,32,.05), 0 10px 22px rgba(16,24,32,.07);
  --shadow-lg:0 4px 10px rgba(16,24,32,.07), 0 18px 36px rgba(16,24,32,.10);
  --t-fast:.15s; --t-base:.18s; --t-slow:.28s;
  --footer-bg:#10069f;
  --fs-caption:.8125rem;  /* 13 — micro-labels: eyebrow, legal, captions, date-stamp */
  --fs-small:1rem;        /* 16 — secondary UI: nav, field labels, footer, consent */
  --fs-body-sm:var(--fs-base); /* reading-path body = base (19); no separate small-body step */
  --fs-base:1.1875rem;    /* 19 — body reading path, inputs */
  --fs-lead:1.5rem;       /* 24 — lead paragraphs & prominent links */
  --fs-h4:1.875rem;       /* 30 — minor headings */
  --fs-h3-card:clamp(1.5rem,3.2vw,1.875rem);
  --fs-h3-lg:clamp(1.6rem,3.4vw,2rem);
  --icon-sm:18px; --icon-md:26px;
  --disabled-opacity:.5;
  --eyebrow-dark:rgba(255,255,255,.78);
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.5rem; --sp-8:3rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:5rem; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); font-size:var(--fs-base); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.1; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:break-word; margin:0; font-weight:500; }
h3,h4{ font-weight:600; line-height:1.22; letter-spacing:-.005em; }
p{ margin:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(var(--sp-4),4vw,var(--sp-7)); }
.eyebrow{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

/* skip link */
.skip{ position:absolute; left:var(--sp-3); top:-3rem; z-index:200; background:var(--blue); color:#fff; padding:var(--sp-2) var(--sp-4); border-radius:var(--r-sm); text-decoration:none; font-weight:600; transition:top var(--t-base); }
.skip:focus{ top:var(--sp-3); }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); font-family:var(--font-body); font-weight:600; font-size:var(--fs-base); line-height:1.2; padding:var(--sp-4) var(--sp-5); border-radius:var(--r-sm); border:2px solid transparent; cursor:pointer; text-decoration:none; transition:background var(--t-base),border-color var(--t-base),color var(--t-base),transform var(--t-fast),box-shadow var(--t-base); }
.btn svg{ width:var(--icon-sm); height:var(--icon-sm); }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--orange); color:var(--orange-ink); border-color:var(--orange); box-shadow:0 1px 2px rgba(222,124,0,.20), 0 8px 20px rgba(222,124,0,.22); }
.btn--primary:hover{ background:var(--orange-hover); border-color:var(--orange-hover); box-shadow:0 3px 8px rgba(222,124,0,.24), 0 14px 30px rgba(222,124,0,.32); }
.btn--outline{ background:transparent; color:var(--ink); border-color:var(--ink); border-width:1px; }
.btn--outline:hover{ background:var(--ink); color:var(--paper); }
/* Primary button on a dark section: subtle light border instead of a raw high-chroma edge. */
.on-dark .btn--primary{ border-color:rgba(255,255,255,.45); }
.btn--lg{ padding:var(--sp-4) var(--sp-6); font-size:var(--fs-base); border-radius:var(--r-sm); }
.btn:disabled,.btn[disabled]{ opacity:var(--disabled-opacity); box-shadow:none; cursor:not-allowed; }
.btn:disabled:hover,.btn[disabled]:hover{ transform:none; box-shadow:none; }
.btn--primary:disabled,.btn--primary[disabled],
.btn--primary:disabled:hover,.btn--primary[disabled]:hover{ background:var(--orange); border-color:var(--orange); }
.btn--outline:disabled:hover,.btn--outline[disabled]:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
/* loading state: spinner + suppressed label */
.btn[aria-busy="true"]{ cursor:progress; }
.btn[aria-busy="true"] .btn__label{ opacity:.65; }
.btn__spin{ display:none; width:var(--icon-sm); height:var(--icon-sm); border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
.btn[aria-busy="true"] .btn__spin{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .btn__spin{ animation-duration:1.4s; } }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.lead .callbar :focus-visible{ outline-color:#fff; }
.hero :focus-visible{ outline-color:#fff; }
.ft :focus-visible{ outline-color:#fff; }

/* honeypot (spam trap) — visually and semantically hidden, off the a11y tree */
.hp{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* visually hidden but exposed to assistive tech (live-region announcements) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* form-level error banner (submit/network failure) */
.form-error{ display:none; margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1.5px solid var(--error); border-radius:var(--r-sm); background:color-mix(in srgb, var(--error) 10%, transparent); color:var(--error); font-size:var(--fs-small); font-weight:600; }
.form-error.on{ display:block; }

/* header */
.hdr{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line); }
.hdr__in{ display:flex; align-items:center; flex-wrap:nowrap; gap:var(--sp-4); min-height:4.5rem; }
.logo{ display:flex; align-items:center; }
.logo-svg{ height:23px; width:auto; display:block; color:var(--blue); }

.nav{ display:flex; gap:var(--sp-4); margin-left:var(--sp-3); flex:none; }
.nav a{ text-decoration:none; color:var(--muted); font-size:var(--fs-small); font-weight:600; white-space:nowrap; }
.nav a:hover{ color:var(--ink); }
.hdr__actions{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); }
.icontact{ display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:600; font-size:var(--fs-small); text-decoration:none; color:var(--ink); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); }
.icontact svg{ width:var(--icon-sm); height:var(--icon-sm); }
.icontact.wa{ color:var(--ink); }
.icontact:hover{ background:var(--surface); }
.icontact .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.hdr .btn{ padding:var(--sp-3) var(--sp-4); font-size:var(--fs-small); box-shadow:none; }
@media (max-width:1120px){ .nav{ display:none; } .icontact .lbl{ display:none; } }
.hdr__cta-short{ display:none; }
.hdr__cta-full{ white-space:nowrap; }
@media (max-width:1120px){
  .icontact.callnum .num{ display:none; }
  .hdr__cta-full{ display:none; }
  .hdr__cta-short{ display:inline; }
  .icontact{ min-height:48px; min-width:48px; justify-content:center; }
  .hdr .btn{ min-height:48px; }
}
@media (max-width:560px){
  .icontact.callnum .num{ display:none; }
  .hdr__in{ gap:var(--sp-2); min-height:4rem; }
  .hdr__actions{ gap:var(--sp-1); }
  .logo-svg{ height:20px; }
  .icontact{ padding:var(--sp-2) var(--sp-2); min-height:48px; min-width:48px; justify-content:center; }
  .hdr .btn{ padding:var(--sp-2) var(--sp-3); font-size:var(--fs-small); min-height:48px; }
  .hdr__cta-full{ display:none; }
  .hdr__cta-short{ display:inline; }
}
@media (max-width:400px){
  .hdr__in{ gap:var(--sp-1); }
  .hdr__actions{ gap:var(--sp-1); }
  .logo-svg{ height:17px; }
  .icontact.wa{ display:none; }
  .icontact{ padding:var(--sp-2) var(--sp-1); }
  .hdr .btn{ padding:var(--sp-2) var(--sp-3); min-width:0; white-space:nowrap; }
}

/* hero */
.hero{ position:relative; isolation:isolate; border-bottom:1px solid var(--line); padding-block:0; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,14,20,.05) 0%, rgba(10,14,20,.20) 46%, rgba(10,14,20,.72) 100%), linear-gradient(90deg, rgba(10,14,20,.55) 0%, rgba(10,14,20,.18) 46%, transparent 72%); }
@media (max-width:760px){
  .hero::after{ background:linear-gradient(180deg, rgba(10,14,20,.10) 0%, rgba(10,14,20,.30) 45%, rgba(10,14,20,.78) 100%), linear-gradient(90deg, rgba(10,14,20,.86) 0%, rgba(10,14,20,.66) 42%, rgba(10,14,20,.42) 72%, rgba(10,14,20,.30) 100%); }
}
.hero__in{ display:flex; flex-direction:column; justify-content:flex-end; min-height:min(76vh,660px); min-height:min(76dvh,660px); padding-block:clamp(2.5rem,7vw,5rem); color:#fff; }
.hero .eyebrow{ color:var(--eyebrow-dark); }
.hero h1{ color:#fff; font-size:clamp(2.3rem,6vw,4rem); margin:var(--sp-3) 0 var(--sp-4); max-width:16ch; letter-spacing:-.02em; }
.hero .sub{ font-size:clamp(1.125rem,2vw,1.3rem); color:rgba(255,255,255,.92); max-width:34ch; }
.hero__fine{ font-size:var(--fs-caption); color:rgba(255,255,255,.82); max-width:40ch; margin-top:var(--sp-3); letter-spacing:.01em; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.hero__cta .btn--outline{ color:#fff; border-color:rgba(255,255,255,.8); background:rgba(16,24,32,.22); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.hero__cta .btn--outline:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* trust bar */
.trust{ background:var(--surface); }
.trust__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.titem{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-5) var(--sp-4); border-left:1px solid var(--line); }
.titem:first-child{ border-left:0; }
.titem svg{ width:var(--icon-md); height:var(--icon-md); color:var(--blue); flex:none; margin-top:2px; }
.titem b{ font-family:var(--font-head); font-size:var(--fs-base); display:block; line-height:1.2; margin-bottom:2px; }
.titem span{ font-size:var(--fs-small); color:var(--muted); line-height:1.35; overflow-wrap:break-word; hyphens:auto; }
@media (max-width:820px){ .trust__in{ grid-template-columns:1fr 1fr; } .titem:nth-child(odd){ border-left:0; } }
@media (max-width:440px){ .trust__in{ grid-template-columns:1fr; } .titem{ border-left:0; } }

/* sections */
section{ padding-block:clamp(3.5rem,8vw,8.5rem); }
.section--tight{ padding-block:clamp(2.5rem,5vw,5rem); }
.section--airy{ padding-block:clamp(5rem,11vw,10rem); }
.sc{ text-align:center; max-width:48ch; margin-inline:auto; margin-bottom:clamp(2.75rem,4vw,3.5rem); }
.sc--left{ text-align:left; margin-inline:0; }
.sc h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:var(--sp-3); letter-spacing:-.015em; }
.sc p{ color:var(--muted); margin-top:var(--sp-3); }

/* value cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(var(--sp-4),2vw,var(--sp-5)); }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }
.card{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-6) var(--sp-5); transition:box-shadow var(--t-base),transform var(--t-base),border-color var(--t-base); }
/* crisp branded top edge — structure + punch, no motion (quiet-shadow aesthetic) */
.card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--blue); }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:color-mix(in srgb, var(--blue) 28%, var(--line)); }
@media (prefers-reduced-motion:reduce){ .card:hover{ transform:none; } }
.card .ic{ width:56px; height:56px; border-radius:var(--r-lg); background:linear-gradient(145deg, color-mix(in srgb, var(--blue) 82%, #fff), var(--blue)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-4); box-shadow:var(--shadow-sm); }

.card .ic svg{ width:var(--icon-md); height:var(--icon-md); }
.card h3{ font-size:clamp(1.375rem,3vw,1.6875rem); margin-bottom:var(--sp-2); line-height:1.2; }
.card p{ font-size:1.0625rem; line-height:1.5; color:var(--muted); max-width:60ch; }

/* home split */
.home{ background:var(--surface); }
.home__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--sp-5),4vw,var(--sp-8)); align-items:start; }
@media (max-width:860px){ .home__in{ grid-template-columns:1fr; } }
.home__img{ border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); aspect-ratio:4/3; }
.home__img img{ width:100%; height:100%; object-fit:cover; }
.home h2{ font-size:clamp(1.5rem,3.2vw,2.15rem); margin:var(--sp-2) 0 var(--sp-4); }
.home>.home__in>div>p{ color:var(--muted); margin-bottom:var(--sp-4); max-width:64ch; }
.feat{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2) var(--sp-4); }
@media (max-width:520px){ .feat{ grid-template-columns:1fr; } }
.feat li{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-body-sm); }
.feat svg{ width:var(--icon-sm); height:var(--icon-sm); color:var(--blue); flex:none; margin-top:var(--sp-1); }

/* gallery (interior photos) */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }
.gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--surface); }
.gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery figcaption{ padding:var(--sp-3) var(--sp-4); font-size:var(--fs-small); color:var(--muted); }
.placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; aspect-ratio:4/3; background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px); color:var(--faint); font-size:var(--fs-small); padding:var(--sp-4); }

/* interior carousel + lightbox */
.carousel{ position:relative; }
.carousel__track{ list-style:none; margin:0; padding:0 0 var(--sp-3); display:flex; gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ .carousel__track{ scroll-behavior:auto; } }
.carousel__item{ flex:0 0 auto; width:min(33%,420px); scroll-snap-align:start; }
@media (max-width:820px){ .carousel__item{ width:min(46%,360px); } }
@media (max-width:520px){ .carousel__item{ width:86%; } }
.zoomable{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.zoomable img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform var(--t-base); }
.zoomable:hover img{ transform:scale(1.04); }
.carousel__cap{ display:block; margin-top:var(--sp-2); font-size:var(--fs-small); color:var(--muted); }
.carousel__nav{ position:absolute; top:calc(50% - 1.4rem); transform:translateY(-50%); z-index:2; width:2.75rem; height:2.75rem; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.carousel__nav svg{ width:22px; height:22px; }
.carousel__nav--prev{ left:.75rem; } .carousel__nav--next{ right:.75rem; }
/* full-bleed carousel: breaks the 1140px container for one edge-to-edge moment */
.fullbleed{ width:100vw; margin-inline:calc(50% - 50vw); }
.carousel.fullbleed .carousel__track{ padding-inline:clamp(1.1rem,4vw,2.4rem); }
.carousel__nav:hover{ border-color:var(--blue); color:var(--blue); }
@media (max-width:640px){ .carousel__nav{ display:none; } }
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(10,14,20,.9); display:flex; align-items:center; justify-content:center; padding:var(--sp-4); cursor:zoom-out; }
.lightbox[hidden]{ display:none; }
.lightbox__fig{ margin:0; display:flex; flex-direction:column; gap:var(--sp-2); max-width:min(1100px,94vw); max-height:92vh; }
.lightbox__img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.lightbox__cap{ color:#fff; text-align:center; font-size:var(--fs-small); }

/* floor plan */
.plan__in{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(var(--sp-5),4vw,var(--sp-8)); align-items:center; }
@media (max-width:860px){ .plan__in{ grid-template-columns:1fr; } }
.plan__fig{ margin:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--surface-2); padding:clamp(var(--sp-3),2vw,var(--sp-5)); }
.plan__fig a{ display:block; }
.plan__fig img{ width:100%; height:auto; background:#fff; }
.plan__meta{ list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.plan__meta li{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-body-sm); }
.plan__meta svg{ width:var(--icon-sm); height:var(--icon-sm); color:var(--blue); flex:none; margin-top:var(--sp-1); }

/* process timeline */
.steps{ list-style:none; margin:var(--sp-6) auto 0; padding:0; max-width:720px; display:grid; gap:0; }
.step{ position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-4); padding-bottom:var(--sp-6); }
.step:last-child{ padding-bottom:0; }
.step::before{ content:""; position:absolute; left:1.25rem; top:2.9rem; bottom:0; width:2px; background:var(--line); transform:translateX(-1px); }
.step:last-child::before{ display:none; }
.step__n{ position:relative; z-index:1; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:var(--fs-lead); flex:none; box-shadow:var(--shadow-sm); }

.step__body{ padding-top:.35rem; }
.step__body h3{ font-size:var(--fs-lead); margin-bottom:var(--sp-1); line-height:1.2; }
.step__body p{ font-size:var(--fs-body-sm); color:var(--muted); max-width:56ch; }

/* price anchor */
.price{ background:var(--blue-deep); color:#fff; }
.price .eyebrow{ color:var(--eyebrow-dark); }
.price__box{ max-width:600px; margin-inline:auto; text-align:center; }
.price__from{ font-family:var(--font-head); font-size:clamp(1.75rem,4vw,2.6rem); color:#fff; line-height:1.15; margin:var(--sp-3) 0; }
.price__from .cur{ font-size:.5em; color:rgba(255,255,255,.72); font-family:var(--font-body); font-weight:600; }
.price__note{ color:rgba(255,255,255,.82); font-size:var(--fs-small); max-width:56ch; margin:var(--sp-3) auto 0; }
.price__cta{ margin-top:var(--sp-6); }
.pending{ outline:2px dashed var(--orange-accessible); outline-offset:4px; }
.pending::before{ content:"INHALT AUSSTEHEND — "; font-size:var(--fs-caption); font-weight:700; letter-spacing:.08em; color:var(--orange-accessible); }

/* contact person (Mario) */
.person{ display:flex; gap:var(--sp-4); align-items:center; margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.18); }
.person{ gap:var(--sp-5); }
.person__photo{ width:92px; height:92px; border-radius:50%; object-fit:cover; flex:none; border:2px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.person__name{ font-weight:600; color:#fff; }
.person__role{ font-size:var(--fs-small); color:rgba(255,255,255,.72); }

/* musterhaus + calendar */
.mh{ background:var(--paper); }
.mh__in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--sp-5),4vw,var(--sp-8)); align-items:stretch; }
@media (max-width:900px){ .mh__in{ grid-template-columns:1fr; } }
.mh__photo{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:280px; position:relative; }
.mh__photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.mh__photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:var(--sp-4) var(--sp-4); background:linear-gradient(180deg,rgba(10,14,20,.70),rgba(10,14,20,.92)); color:#fff; font-size:var(--fs-small); text-shadow:0 1px 3px rgba(10,14,20,.7); }
.mh__photo .cap b{ font-family:var(--font-head); display:block; font-size:var(--fs-lead); }
.book{ background:transparent; border:0; border-radius:0; padding:0; display:flex; flex-direction:column; }
.book h3{ font-size:var(--fs-h3-card); margin-bottom:var(--sp-2); line-height:1.2; }
.book .lead-t{ color:var(--muted); font-size:var(--fs-body-sm); margin-bottom:var(--sp-4); }
.days-wrap{ position:relative; }
/* scroll affordance: fade the right edge so days 6–8 read as "more →" */
.days-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:var(--sp-3); width:34px; background:linear-gradient(90deg, transparent, var(--paper)); pointer-events:none; }
.days{ display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); scroll-snap-type:x proximity; }
.day{ flex:none; width:56px; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; scroll-snap-align:start; font-family:var(--font-body); border:1px solid var(--muted); border-radius:var(--r-md); background:var(--paper); padding:var(--sp-2) var(--sp-1); text-align:center; cursor:pointer; transition:border-color var(--t-base), background var(--t-base); }
.day:hover{ border-color:var(--blue); }
.day .dow{ font-size:var(--fs-caption); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.day .dnum{ font-family:var(--font-head); font-size:1.35rem; }
.day .dmon{ font-size:var(--fs-caption); color:var(--muted); }
.day.sel{ background:var(--blue); border-color:var(--blue); }
.day.sel .dow,.day.sel .dnum,.day.sel .dmon{ color:#fff; }

.slots{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); margin-top:var(--sp-4); }
@media (max-width:520px){ .slots{ grid-template-columns:repeat(2,1fr); } }
.slot{ border:1px solid var(--muted); background:var(--paper); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-1); min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:var(--fs-body-sm); font-variant-numeric:tabular-nums; transition:border-color var(--t-base),background var(--t-base); }
.slot:hover{ border-color:var(--blue); }
.slot.sel{ background:var(--blue); color:#fff; border-color:var(--blue); }

.book .cal-note{ font-size:var(--fs-body-sm); color:var(--muted); margin-top:var(--sp-3); }
.book__fields{ margin-top:var(--sp-4); }
.book .field input{ background:var(--surface); }
.book .book-cta{ margin-top:auto; padding-top:var(--sp-4); }
.book .btn{ width:100%; }
.done{ display:none; text-align:center; padding:var(--sp-5) 0; }
.done.on{ display:block; }
.done svg{ width:56px; height:56px; color:var(--blue); margin:0 auto var(--sp-4); }
.done h3{ font-size:var(--fs-h3-card); margin-bottom:var(--sp-2); }
.book[data-done="true"] .book__body{ display:none; }

/* LEAD panel */
.lead{ background:var(--blue-deep); color:#fff; }
.lead__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center; }
@media (max-width:900px){ .lead__in{ grid-template-columns:1fr; } }
.lead .eyebrow{ color:var(--eyebrow-dark); }
.lead h2{ color:#fff; font-size:clamp(1.9rem,4vw,2.7rem); margin:var(--sp-3) 0 var(--sp-4); letter-spacing:-.02em; }
.lead .big{ color:rgba(255,255,255,.9); font-size:var(--fs-lead); margin-bottom:var(--sp-5); max-width:38ch; }
.lead .plus{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
.lead .plus li{ display:flex; gap:var(--sp-2); align-items:flex-start; color:rgba(255,255,255,.92); font-size:var(--fs-body-sm); }
.lead .plus svg{ width:var(--icon-sm); height:var(--icon-sm); color:#fff; flex:none; margin-top:.2rem; }
.lead .callbar{ margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; padding-top:var(--sp-5); border-top:1px solid rgba(255,255,255,.18); }
.lead .callbar .who{ font-size:var(--fs-small); color:rgba(255,255,255,.72); }
.lead .callbar a{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; font-weight:600; text-decoration:none; font-size:var(--fs-lead); }
.lead .callbar a:hover{ color:var(--eyebrow-dark); }
.lead .callbar svg{ width:var(--icon-sm); height:var(--icon-sm); }
@media (max-width:900px){
  .lead .callbar{ gap:var(--sp-2) var(--sp-5); }
  .lead .callbar a{ min-height:48px; padding:var(--sp-2) 0; }
}

/* form card */
.form{ background:var(--paper); color:var(--ink); border-radius:var(--r-xl); padding:clamp(var(--sp-5),3vw,var(--sp-7)); box-shadow:var(--shadow-lg); }
.form h3{ font-size:clamp(1.5rem,3.2vw,2.15rem); margin-bottom:var(--sp-1); }
.form .fsub{ color:var(--muted); font-size:var(--fs-body-sm); margin-bottom:var(--sp-5); }
.fgrid{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:var(--sp-1); }
.field label{ font-size:var(--fs-small); font-weight:600; }
.field label .req{ color:var(--blue); }
.field input,.field select{ font:inherit; font-size:var(--fs-base); padding:var(--sp-3) var(--sp-3); border:1.5px solid var(--muted); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); width:100%; transition:border-color var(--t-base), box-shadow var(--t-base); }
.field input:hover:not(:focus),.field select:hover:not(:focus){ border-color:var(--ink); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:var(--error); }
.ferr{ display:block; color:var(--error); font-size:var(--fs-small); font-weight:600; margin-top:var(--sp-1); }
.ferr:empty{ display:none; }
.ferr--block{ margin-top:var(--sp-1); }
.consent{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-small); color:var(--muted); margin-top:var(--sp-4); }
.consent input{ margin-top:var(--sp-1); flex:none; }
.consent a{ color:var(--blue); text-decoration:underline; }
.form .btn{ width:100%; margin-top:var(--sp-4); }
.form .micro{ text-align:center; font-size:var(--fs-body-sm); color:var(--muted); margin-top:var(--sp-3); }
.form[data-done="true"] .form__body{ display:none; }

/* faq */
.faq{ max-width:760px; margin-inline:auto; }
.qa{ border-bottom:1px solid var(--line); }
.qa button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); background:none; border:0; cursor:pointer; text-align:left; padding:var(--sp-4) 0; font-family:var(--font-head); font-size:var(--fs-lead); font-weight:500; line-height:1.2; color:var(--ink); }
.qa button:hover{ color:var(--blue); }
.qa .pl{ flex:none; width:22px; height:22px; color:var(--blue); transition:transform var(--t-base); }
.qa button[aria-expanded="true"] .pl{ transform:rotate(45deg); }
.qa .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-slow) ease; }
.qa .ans > div{ overflow:hidden; min-height:0; }
.qa button[aria-expanded="true"] + .ans{ grid-template-rows:1fr; }
@media (prefers-reduced-motion:reduce){ .qa .ans{ transition:none; } }
.qa .ans p{ padding-bottom:var(--sp-4); color:var(--muted); font-size:var(--fs-body-sm); max-width:62ch; }

/* footer */
.ft{ background:var(--footer-bg); color:rgba(255,255,255,.85); }
.ft__in{ padding-block:var(--sp-7); display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-6); }
.ft__in > *{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:820px){ .ft__in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ft__in{ grid-template-columns:1fr; } }
.ft .logo-svg{ height:22px; color:#fff; margin-bottom:var(--sp-3); }
.ft p,.ft li{ color:rgba(255,255,255,.78); line-height:1.6; font-size:var(--fs-small); }
.ft h3{ color:#fff; font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.09em; margin-bottom:var(--sp-3); }
.ft ul{ list-style:none; padding:0; margin:0; } .ft li{ margin-bottom:var(--sp-2); }
.ft a{ color:#fff; text-decoration:underline; } .ft a:hover{ color:rgba(255,255,255,.72); }
@media (max-width:1024px){
  .ft a{ display:inline-flex; align-items:center; min-height:48px; padding:var(--sp-1) 0; }
  .ft li{ margin-bottom:var(--sp-2); }
}
.ft__legal{ border-top:1px solid rgba(255,255,255,.22); padding-block:var(--sp-4); font-size:var(--fs-caption); color:rgba(255,255,255,.6); }

/* =======================================================================
   Mobile optimisation (phones). Everything above is unchanged on desktop.
   ======================================================================= */

/* Sticky bottom action bar — the three primary actions always in reach on a
   12+ screen page. Hidden on desktop; the header carries the CTA there. */
.mobabar{ display:none; }
@media (max-width:760px){
  .mobabar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:1px;
    background:var(--line); border-top:1px solid var(--line);
    box-shadow:0 -3px 14px rgba(16,24,32,.12);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .mobabar__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-height:58px; background:var(--paper); color:var(--ink);
    text-decoration:none; font-size:var(--fs-caption); font-weight:600; text-align:center;
  }
  .mobabar__item svg{ width:20px; height:20px; }
  .mobabar__item--cta{ background:var(--orange); color:var(--orange-ink); font-size:var(--fs-small); font-weight:600; }
  .mobabar__item--cta:active{ background:var(--orange-hover); }
  /* keep the footer clear of the fixed bar */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Header simplifies to logo + CTA — call/WhatsApp now live in the bottom bar */
  .hdr__actions .icontact{ display:none; }
  /* solid header on mobile (backdrop-filter blur is a known mid-range Android jank source) */
  .hdr{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* give the Musterhaus photo more height so the address caption doesn't dominate it */
  .mh__photo{ min-height:clamp(320px, 62vw, 440px); }
}

/* Hero CTAs: stack full-width for clean thumb targets on small phones */
@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
}