/* Allmend 21 · Gunzgen — Verkaufsseite ab Plan. Nutzt die Live-Tokens (--blue, --night, --ice, --mist, --ink, --muted, --line). */
.am{--am-gold:#c9a96a;--am-glass:rgb(8 31 54 / .62);--am-radius:2px;color:var(--ink)}
.am *{box-sizing:border-box}
.am img{display:block;max-width:100%;height:auto}
.am .am-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.am h2{font-size:var(--type-section-title);font-weight:var(--type-heading-weight);letter-spacing:var(--type-heading-tracking);line-height:var(--type-heading-leading);color:var(--blue);margin:0 0 20px}
.am p{line-height:var(--type-body-leading)}
.am-section{padding-block:clamp(72px,10vw,140px)}
.am-muted{color:var(--muted)}
.am-num{font-variant-numeric:tabular-nums}

/* ---------- Hero ---------- */
.am-hero{position:relative;min-height:min(100svh,980px);display:grid;align-items:end;color:#fff;background:var(--night);overflow:hidden;isolation:isolate}
.am-hero-media{position:absolute;inset:0;z-index:-2}
.am-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transition:opacity 1.1s ease}
.am-hero-media img[data-time="dusk"]{opacity:0}
.am-hero[data-time="dusk"] .am-hero-media img[data-time="dusk"]{opacity:1}
.am-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(8 31 54 / .62) 0%,rgb(8 31 54 / .25) 38%,rgb(8 31 54 / 0) 60%),linear-gradient(180deg,rgb(8 31 54 / .45) 0%,rgb(8 31 54 / 0) 24%,rgb(8 31 54 / 0) 50%,rgb(8 31 54 / .85) 100%)}
.am-hero-inner{padding-block:clamp(120px,16vh,180px) clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.am-hero .am-eyebrow{color:#fff;text-shadow:0 1px 12px rgb(8 31 54 / .6)}
.am-hero-inner{pointer-events:none}
.am-hero-inner a,.am-hero-inner button,.am-hero-inner aside{pointer-events:auto}
.am-hero h1{color:#fff;font-size:clamp(3.4rem,8vw,7.2rem);font-weight:420;letter-spacing:-.05em;line-height:.95;margin:0 0 22px}
.am-hero-lead{font-size:var(--type-lead);max-width:34ch;margin:0 0 28px;color:rgb(255 255 255 / .9)}
.am-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.am-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:14px 26px;font:inherit;font-size:15px;font-weight:550;border:1px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
.am-btn-primary{background:#fff;color:var(--blue)}
.am-btn-primary:hover{background:var(--ice)}
.am-btn-ghost{background:transparent;color:#fff;border-color:rgb(255 255 255 / .55)}
.am-btn-ghost:hover{border-color:#fff;background:rgb(255 255 255 / .08)}
.am-btn-blue{background:var(--blue);color:#fff}
.am-btn-blue:hover{background:var(--action-hover)}
.am-price-card{background:var(--am-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgb(255 255 255 / .18);padding:22px 26px;min-width:260px}
.am-price-card small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.am-price-card strong{display:block;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:450;letter-spacing:-.03em;margin:6px 0 10px}
.am-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:rgb(255 255 255 / .86)}
.am-status i{width:8px;height:8px;border-radius:50%;background:#7fd3a8;box-shadow:0 0 0 4px rgb(127 211 168 / .18)}
.am-time{position:absolute;top:clamp(96px,12vh,132px);right:clamp(16px,4vw,56px);display:flex;background:var(--am-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .18)}
.am-time button{font:inherit;font-size:13px;padding:10px 16px;color:rgb(255 255 255 / .75);background:none;border:0;cursor:pointer;min-height:44px}
.am-time button[aria-pressed="true"]{color:var(--night);background:#fff}

/* Hotspots auf dem Hero-Bild (Reel-Mechanik: Haus wählen am Gebäude) */
.am-house-hit{position:absolute;z-index:1;background:transparent;border:0;padding:0;cursor:pointer}
.am-house-hit::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgb(255 255 255 / .2),rgb(255 255 255 / 0) 70%);opacity:0;transition:opacity .3s}
.am-house-hit::after{content:"";position:absolute;left:50%;top:44%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgb(255 255 255 / .28),0 6px 18px rgb(0 0 0 / .3)}
.am-house-hit:hover::before,.am-house-hit:focus-visible::before,.am-house-hit[data-active]::before{opacity:1}
.am-house-hit:focus-visible{outline:2px solid #fff;outline-offset:4px}
.am-house-tag{position:absolute;left:50%;top:calc(44% - 22px);transform:translate(-50%,-100%);white-space:nowrap;background:#fff;color:var(--ink);padding:12px 16px;font-size:14px;line-height:1.35;text-align:left;box-shadow:0 18px 40px rgb(0 0 0 / .25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.am-house-tag b{display:block;color:var(--blue);font-size:16px;font-weight:600}
.am-house-hit:hover .am-house-tag,.am-house-hit:focus-visible .am-house-tag,.am-house-hit[data-active] .am-house-tag{opacity:1;transform:translate(-50%,-112%)}

/* ---------- Fakten ---------- */
.am-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-block:1px solid var(--line);margin:0}
.am-facts div{padding:26px 18px;border-left:1px solid var(--line)}
.am-facts div:first-child{border-left:0}
.am-facts dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.am-facts dd{margin:0;font-size:clamp(1.05rem,1.45vw,1.4rem);hyphens:auto;overflow-wrap:normal;color:var(--blue);font-weight:500;letter-spacing:-.02em}

/* ---------- Häuser ---------- */
.am-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.am-houses{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.am-house{position:relative;border:1px solid var(--line);background:#fff;padding:28px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,box-shadow .25s}
.am-house:hover,.am-house[data-active]{border-color:var(--blue);box-shadow:0 24px 60px rgb(0 55 129 / .1)}
.am-house h3{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:450;letter-spacing:-.03em;color:var(--blue);margin:0}
.am-house ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15px}
.am-house li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--mist);padding-bottom:8px}
.am-house li span:last-child{color:var(--ink);font-weight:500}
.am-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;background:#e8f6ee;color:var(--success)}
.am-chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.am-house-price{font-size:1.5rem;color:var(--ink);font-weight:500;letter-spacing:-.02em;margin-top:auto}
.am-house-actions{display:flex;flex-wrap:wrap;gap:10px}
.am-house-actions .am-btn{min-height:46px;padding:10px 18px;font-size:14px}
.am-link{font:inherit;font-size:14px;color:var(--blue);background:none;border:0;padding:10px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

/* ---------- Explorer ---------- */
.am-explorer{background:var(--night);color:#fff}
.am-explorer h2{color:#fff}
.am-explorer .am-eyebrow{color:var(--ice)}
.am-x-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.am-seg{display:inline-flex;border:1px solid rgb(255 255 255 / .22)}
.am-seg button{font:inherit;font-size:14px;min-height:46px;padding:10px 18px;background:none;border:0;color:rgb(255 255 255 / .72);cursor:pointer}
.am-seg button[aria-pressed="true"],.am-seg button[aria-selected="true"]{background:#fff;color:var(--night)}
.am-x-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr);gap:clamp(24px,4vw,56px);align-items:start}
.am-x-stage{position:relative;aspect-ratio:4/3;background:#0f2238;overflow:hidden}
.am-x-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.am-x-stage img[hidden]{display:block;opacity:0;transform:scale(1.03);pointer-events:none}
.am-x-stage .am-plan{background:#fff;padding:4%}
.am-x-stage[data-mirror] .am-iso{transform:scaleX(-1)}
.am-x-note{font-size:13px;color:rgb(255 255 255 / .6);margin-top:12px}
.am-floors{display:flex;flex-direction:column;border-top:1px solid rgb(255 255 255 / .16)}
.am-floors button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:left;font:inherit;color:rgb(255 255 255 / .62);background:none;border:0;border-bottom:1px solid rgb(255 255 255 / .16);padding:18px 0;cursor:pointer;min-height:44px}
.am-floors button span:first-child{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em}
.am-floors button[aria-selected="true"]{color:#fff}
.am-floors button[aria-selected="true"] span:first-child::before{content:"";display:inline-block;width:18px;height:2px;background:var(--ice);vertical-align:middle;margin-right:12px}
.am-rooms{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:2px}
.am-rooms li{display:flex;justify-content:space-between;font-size:15px;padding:9px 0;color:rgb(255 255 255 / .85);border-bottom:1px dashed rgb(255 255 255 / .12)}
.am-rooms li button{font:inherit;color:var(--ice);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.am-x-views{margin-top:18px}

/* ---------- Innenräume ---------- */
.am-rooms-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.am-room-fig{margin:0;position:relative;overflow:hidden;background:var(--mist);cursor:zoom-in}
.am-room-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.am-room-fig:hover img{transform:scale(1.03)}
.am-room-fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:40px 22px 18px;color:#fff;background:linear-gradient(0deg,rgb(8 31 54 / .78),rgb(8 31 54 / 0));font-size:14px}
.am-room-fig figcaption b{display:block;font-size:1.25rem;font-weight:500;letter-spacing:-.02em}
.am-rf-1{grid-column:1/-1;aspect-ratio:21/9}
.am-rf-2{grid-column:span 7;aspect-ratio:4/3}
.am-rf-3{grid-column:span 5;aspect-ratio:4/5}
.am-rf-4{grid-column:span 6;aspect-ratio:3/2}
.am-rf-5{grid-column:span 6;aspect-ratio:3/2}
.am-disclaimer{font-size:13px;color:var(--muted);margin-top:16px}
.am-lightbox{border:0;padding:0;max-width:min(1600px,96vw);background:transparent}
.am-lightbox::backdrop{background:rgb(4 14 26 / .92)}
.am-lightbox img{max-height:86vh;width:auto;margin-inline:auto}
.am-lightbox p{color:#fff;font-size:14px;margin:12px 0 0;display:flex;justify-content:space-between;gap:16px}
.am-lightbox button{font:inherit;color:#fff;background:none;border:1px solid rgb(255 255 255 / .4);padding:8px 14px;cursor:pointer;min-height:44px}

/* ---------- Lage ---------- */
.am-map{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--mist)}
.am-map img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:var(--fx,50%) var(--fy,50%);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.am-map[data-in] img{transform:scale(1)}
.am-map-label{position:absolute;left:16px;bottom:16px;background:#fff;padding:10px 14px;font-size:13px;color:var(--ink)}
.am-dist{list-style:none;padding:0;margin:24px 0 0}
.am-dist li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.am-dist li span:last-child{color:var(--blue);font-weight:550}
.am-note{font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- Tragbarkeit ---------- */
.am-calc{background:var(--mist)}
.am-calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.am-calc-form{display:grid;gap:18px;margin-top:32px}
.am-field{display:grid;gap:8px}
.am-field label{font-size:14px;font-weight:550;color:var(--ink)}
.am-field input,.am-field select,.am-field textarea{font:inherit;font-size:16px;min-height:52px;padding:12px 14px;border:1px solid var(--field);background:#fff;color:var(--ink);border-radius:0;width:100%}
.am-field textarea{min-height:120px;resize:vertical}
.am-field input:focus-visible,.am-field select:focus-visible,.am-field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.am-field small{font-size:13px;color:var(--muted)}
.am-result{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,36px)}
.am-gauge{height:10px;background:var(--line);position:relative;margin:18px 0 8px}
.am-gauge span{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .4s ease,background .3s}
.am-gauge::after{content:"";position:absolute;top:-6px;bottom:-6px;left:calc(33.333% / .6);width:2px;background:var(--ink)}
.am-result[data-state="warn"] .am-gauge span{background:#b7791f}
.am-result[data-state="bad"] .am-gauge span{background:var(--error)}
.am-verdict{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--blue);letter-spacing:-.03em;font-weight:500;margin:0}
.am-result[data-state="warn"] .am-verdict{color:#8a5a12}
.am-result[data-state="bad"] .am-verdict{color:var(--error)}
.am-result dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:22px 0 0;font-size:15px}
.am-result dt{color:var(--muted)}
.am-result dd{margin:0;text-align:right;color:var(--ink);font-weight:500}

/* ---------- Ablauf ---------- */
.am-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.am-steps li{padding:26px 22px 0 0}
.am-steps b{display:block;font-size:13px;letter-spacing:.12em;color:var(--blue);margin-bottom:14px}
.am-steps h3{font-size:1.2rem;font-weight:550;margin:0 0 8px;color:var(--ink)}
.am-steps p{font-size:15px;color:var(--muted);margin:0}

/* ---------- Anfrage ---------- */
.am-enquiry{background:var(--blue);color:#fff}
.am-enquiry h2{color:#fff}
.am-enquiry .am-eyebrow{color:var(--ice)}
.am-enquiry .am-field label{color:#fff}
.am-enquiry .am-field small{color:rgb(255 255 255 / .72)}
.am-enquiry .am-field input,.am-enquiry .am-field select,.am-enquiry .am-field textarea{border-color:rgb(255 255 255 / .4)}
.am-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.am-form-grid .am-wide{grid-column:1/-1}
.am-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.am-form-msg{font-size:15px;margin:0;min-height:1.5em}
.am-form-msg a{color:#fff}
.am-legal{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px;margin-top:0}

/* ---------- Mobile Leiste ---------- */
.am-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px rgb(0 0 0 / .08);transform:translateY(110%);transition:transform .35s ease}
.am-bar[data-show]{transform:none}
.am-bar small{display:block;font-size:12px;color:var(--muted)}
.am-bar strong{font-size:17px;color:var(--ink)}
.am-bar .am-btn{min-height:46px;padding:10px 18px}

@media (max-width:1080px){
  .am-facts{grid-template-columns:repeat(3,1fr)}
  .am-facts div:nth-child(4){border-left:0}
  .am-facts div:nth-child(n+4){border-top:1px solid var(--line)}
  .am-split,.am-x-grid,.am-calc-grid{grid-template-columns:1fr}
  .am-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .am-hero{min-height:0;display:block}
  .am-hero::after{display:none}
  .am-hero-media{position:relative;inset:auto;aspect-ratio:16/10}
  .am-hero-inner{grid-template-columns:1fr;padding:28px 0 32px}
  .am-hero h1{font-size:clamp(2.8rem,13vw,3.6rem);margin-bottom:14px}
  .am-price-card{min-width:0}
  .am-houses,.am-form-grid{grid-template-columns:1fr}
  .am-facts{grid-template-columns:1fr 1fr}
  .am-facts div{border-left:0;padding:18px 12px 18px 0}
  .am-facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .am-rooms-gallery{grid-template-columns:1fr}
  .am-rooms-gallery>*{grid-column:1/-1!important;aspect-ratio:4/3!important}
  .am-steps{grid-template-columns:1fr}
  .am-house-hit{display:none}
  .am-bar{display:flex}
  .am-time{top:12px;right:12px}
  .am-time button{min-height:40px;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){.am *{transition:none!important}.am-map img{transform:none}}

/* ---------- 3D-Puppenhaus ---------- */
.am-3d{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.am-x-stage[data-view="3d"] .am-3d[data-ready]{opacity:1}
.am-x-stage[data-view="plan"] .am-3d{opacity:0;pointer-events:none}
.am-3d canvas{display:block;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y}
.am-3d-labels{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.am-3d-label{position:absolute;left:0;top:0;display:grid;gap:1px;text-align:center;padding:5px 9px;background:rgb(8 31 54 / .72);color:#fff;font-size:12px;line-height:1.25;white-space:nowrap;transition:opacity .2s,background .2s}
.am-3d-label b{font-weight:550}
.am-3d-label small{font-size:11px;color:rgb(255 255 255 / .75)}
.am-3d-label-link{border-bottom:2px solid var(--ice)}
.am-3d-label[data-focus]{background:#fff;color:var(--ink)}
.am-3d-label[data-focus] small{color:var(--muted)}
.am-x-views{margin-top:14px}

/* ---------- Aussicht ---------- */
.am-outlook-section{background:var(--night);color:#fff}
.am-outlook-section h2{color:#fff}
.am-outlook-section .am-eyebrow{color:var(--ice)}
.am-outlook-section .am-x-note,.am-outlook-section .am-note{color:rgb(255 255 255 / .66)}
.am-outlook{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0f2238}
.am-outlook img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.am-outlook img[data-show]{opacity:1}
.am-out-time{position:absolute;left:16px;bottom:16px;display:flex;background:rgb(8 31 54 / .62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .2)}
.am-out-time button{font:inherit;font-size:14px;min-height:44px;padding:10px 18px;background:none;border:0;color:rgb(255 255 255 / .8);cursor:pointer}
.am-out-time button[aria-pressed="true"]{background:#fff;color:var(--night)}
.am-out-time button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Kamerafahrt ---------- */
.am-fly{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff}
.am-fly::backdrop{background:#000}
.am-fly video{width:100%;height:100%;object-fit:cover;display:block}
.am-fly-end{position:absolute;left:0;right:0;bottom:0;padding:clamp(48px,8vw,120px) clamp(24px,5vw,64px) clamp(24px,5vw,64px);background:linear-gradient(0deg,rgb(8 31 54 / .92) 0%,rgb(8 31 54 / .7) 55%,rgb(8 31 54 / 0) 100%)}
.am-fly-end .am-eyebrow{color:#fff}
.am-fly-title{font-size:clamp(1.8rem,4vw,3.2rem);letter-spacing:-.03em;margin:0 0 20px;font-weight:450}
.am-fly-x{position:absolute;top:16px;right:16px;width:48px;height:48px;font-size:28px;line-height:1;color:#fff;background:rgb(0 0 0 / .4);border:1px solid rgb(255 255 255 / .3);cursor:pointer}
.am-fly-note{position:absolute;left:16px;top:16px;margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgb(255 255 255 / .75)}
@media (max-width:720px){.am-outlook{aspect-ratio:4/3}.am-out-time button{padding:8px 12px}}