/* OKNXT Unterseite Web-Exposé (Präfix wx-). Baut auf site.css, abschnitte.css und agenten-seite.css auf (Abstände 150 px wie überall).
   Web-Exposé nach dem Aufbau aus der App, mit Musterfirma. Das Fenster ist mit cqw skaliert. --w und --dreh sind seitenweit Winkel. */

.wx-seite-wrap{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5;--wx-p:#2F6BFF;--wx-s:#16204A}
.wx-hell{color:var(--h-text)}
.wx-klein{margin:0 0 10px;font-size:.58rem;font-weight:600;color:var(--h-text-2)}
.wx-seite-wrap svg{stroke-width:1.8}

/* ---------- Browser und nachgebautes Web-Exposé ---------- */
.wx-browser{border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.25),0 0 100px -30px rgba(92,203,255,.6)}
.wx-leiste{display:flex;align-items:center;gap:12px;height:34px;padding:0 12px;background:#EEF1F6;border-bottom:1px solid var(--h-linie)}
.wx-ampel{display:flex;gap:5px}.wx-ampel i{width:9px;height:9px;border-radius:50%;background:#D5DBE7}
.wx-url{display:inline-flex;align-items:center;gap:6px;flex:1;max-width:340px;margin:0 auto;padding:4px 10px;border-radius:7px;background:#fff;font-size:.62rem;color:var(--h-text-2)}
.wx-url svg{width:10px;height:10px;color:#16A36A}
.wx-fenster{container-type:inline-size;color:#1E2333;background:#fff}
.wx-kopf{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 3cqw;border-bottom:1px solid #EEF1F6}
.wx-logo{display:inline-flex;align-items:center;gap:.8cqw;color:var(--wx-s)}
.wx-logo i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--wx-p);box-shadow:inset 0 0 0 .55cqw #fff,0 0 0 .25cqw var(--wx-p)}
.wx-logo b{font-size:1.7cqw;font-weight:800;letter-spacing:.06em}
.wx-logo em{font-style:normal;font-size:1cqw;letter-spacing:.24em;color:#8A93A8}
.wx-k-r{display:flex;align-items:center;gap:2cqw;font-size:1.1cqw;color:#3D4560}
.wx-k-r span{display:inline-flex;align-items:center;gap:.5cqw}
.wx-k-r svg{width:1.3cqw;height:1.3cqw}
.wx-k-r em{font-style:normal;padding:.6cqw 1.2cqw;border-radius:.6cqw;border:1px solid var(--wx-p);color:var(--wx-p)}
.wx-buehne{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:1cqw 3cqw;padding:0 3cqw 0 0;background:#F5F6F9}
.wx-galerie{position:relative;grid-row:span 1;aspect-ratio:3/2;overflow:hidden}
.wx-g{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s ease}
.wx-g.an{opacity:1}
.wx-zahl{position:absolute;right:1.4cqw;bottom:1.4cqw;padding:.4cqw .9cqw;border-radius:.6cqw;background:rgba(0,0,0,.55);color:#fff;font-size:1cqw}
.wx-pfeil{position:absolute;left:1.4cqw;top:50%;display:grid;place-items:center;width:3.4cqw;height:3.4cqw;margin-top:-1.7cqw;border-radius:50%;background:rgba(255,255,255,.85);font-size:2cqw;color:#333}
.wx-pfeil-r{left:auto;right:1.4cqw}
.wx-eck{align-self:center;display:grid;gap:1.4cqw}
.wx-eck small{display:inline-flex;align-items:center;gap:.5cqw;font-size:1.1cqw;color:#666}
.wx-eck small svg{width:1.3cqw;height:1.3cqw;color:var(--wx-p)}
.wx-eck h4{margin:0;font-size:2.5cqw;font-weight:700;line-height:1.2}
.wx-eck dl{display:flex;flex-wrap:wrap;gap:1.4cqw 2.4cqw;margin:0}
.wx-eck dl div{padding-right:2.4cqw;border-right:1px solid #DDE1EA}
.wx-eck dl div:last-child{border:0}
.wx-eck dt{font-size:1.5cqw;font-weight:700}.wx-eck dd{margin:0;font-size:.95cqw;color:#777}
.wx-knopf{display:inline-flex;justify-content:center;padding:1.1cqw 2cqw;border-radius:.8cqw;background:var(--wx-p);color:#fff;font-size:1.2cqw;font-weight:700;justify-self:start}
.wx-daumen{display:flex;gap:.8cqw;padding:0 0 1.6cqw 0}
.wx-daumen img{width:8cqw;aspect-ratio:3/2;max-width:none;object-fit:cover;border-radius:.6cqw;border:.25cqw solid transparent}
.wx-daumen img.an{border-color:var(--wx-p)}
.wx-daumen span{display:grid;place-items:center;width:8cqw;border-radius:.6cqw;background:#333;color:#fff;font-size:1.2cqw}
/* Reiter, Inhalt, Seitenspalte */
.wx-reiter{display:flex;gap:2.4cqw;padding:1.4cqw 3cqw;border-bottom:1px solid #E6E9F0;background:#fff;font-size:1.15cqw;color:#666}
.wx-reiter span{padding-bottom:.6cqw;transition:color .3s,box-shadow .3s}
.wx-reiter span.an{color:var(--wx-p);font-weight:600;box-shadow:inset 0 -.25cqw 0 var(--wx-p)}
.wx-unten{display:grid;grid-template-columns:1fr 30cqw;gap:3cqw;padding:2.4cqw 3cqw 3cqw;background:#F5F6F9}
.wx-inhalt{display:grid;gap:2cqw}
.wx-ab{padding:2.2cqw 2.4cqw;border-radius:1cqw;background:#fff;border:1px solid #E6E9F0;transition:box-shadow .4s,border-color .4s}
.wx-ab.an{border-color:#B9CBFF;box-shadow:0 0 0 .4cqw rgba(47,107,255,.1)}
.wx-ab h5{margin:0 0 1.4cqw;padding-bottom:.8cqw;font-size:1.6cqw;font-weight:700;border-bottom:.25cqw solid var(--wx-p);display:inline-block}
.wx-ab p{margin:0 0 1cqw;font-size:1.15cqw;line-height:1.6;color:#3D4560}
.wx-tab{display:grid;grid-template-columns:1fr auto;margin:0;font-size:1.15cqw}
.wx-tab dt,.wx-tab dd{padding:.8cqw 0;border-bottom:1px solid #EEF1F6}
.wx-tab dt{color:#777}.wx-tab dd{margin:0;text-align:right;font-weight:600}
.wx-merk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1cqw;font-size:1.15cqw}
.wx-merk li{display:flex;align-items:center;gap:.8cqw}
.wx-merk svg{width:1.4cqw;height:1.4cqw;color:#16A36A;stroke-width:3}
.wx-skala{position:relative;display:block;height:1cqw;margin-top:1.6cqw;border-radius:1cqw;background:linear-gradient(90deg,#16A36A,#9BD64B,#F5D33B,#F59E0B,#E5484D)}
.wx-skala i{position:absolute;left:var(--k);top:-.6cqw;width:.4cqw;height:2.2cqw;background:#1E2333}
.wx-karte{position:relative;height:20cqw;border-radius:1cqw;overflow:hidden}
.wx-karte img{width:100%;height:100%;max-width:none;object-fit:cover;filter:saturate(.6)}
.wx-karte i{position:absolute;left:50%;top:50%;width:9cqw;height:9cqw;margin:-4.5cqw;border-radius:50%;background:rgba(47,107,255,.25);border:.3cqw solid var(--wx-p)}
.wx-karte small{position:absolute;left:1cqw;bottom:1cqw;padding:.5cqw .9cqw;border-radius:.5cqw;background:#fff;font-size:1cqw}
.wx-ablauf{display:grid;gap:1cqw}
.wx-ablauf>b{font-size:1.5cqw}.wx-ablauf>small{font-size:1.05cqw;color:#777}
.wx-ablauf ol{list-style:none;margin:.6cqw 0 0;padding:0;display:grid;gap:1.4cqw}
.wx-ablauf li{display:flex;gap:1.4cqw;font-size:1.05cqw}
.wx-ablauf li>i{flex:none;display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:50%;font-style:normal;font-weight:700;background:#EEF1F6}
.wx-ablauf li.wx-pflicht>i{background:var(--wx-p);color:#fff}
.wx-ablauf li span{display:grid;gap:.3cqw}
.wx-ablauf li b em{margin-left:.8cqw;padding:.2cqw .7cqw;border-radius:.4cqw;font-style:normal;font-size:.85cqw;font-weight:600;color:#11804F;background:#E3F8EE}
.wx-ablauf li.wx-pflicht b em{color:#fff;background:var(--wx-p)}
.wx-ablauf small{color:#666;line-height:1.5}
.wx-widerruf{margin:.6cqw 0 0!important;padding-top:1cqw;border-top:1px solid #EEF1F6;font-size:1cqw!important}
.wx-seite{display:grid;gap:2cqw;align-content:start;position:relative}
.wx-karte-k{display:grid;gap:1cqw;padding:2cqw;border-radius:1cqw;background:#fff;border:1px solid #E6E9F0;font-size:1.1cqw}
.wx-karte-k>small{font-size:.9cqw;color:#888;line-height:1.5}
.wx-mk{display:flex;align-items:center;gap:1.4cqw}
.wx-mk img{width:6cqw;height:6cqw;max-width:none;border-radius:50%;object-fit:cover}
.wx-mk b{font-size:1.4cqw}
.wx-zk{display:flex;align-items:center;justify-content:center;gap:.8cqw;padding:.9cqw;border-radius:.7cqw;border:1px solid #E1E5EE}
.wx-zk svg{width:1.3cqw;height:1.3cqw}
.wx-dt{font-size:1.3cqw}
.wx-doks{list-style:none;margin:0;padding:0;display:grid;gap:.8cqw}
.wx-doks li{display:flex;align-items:center;gap:1cqw;padding:1cqw;border-radius:.7cqw;border:1px solid var(--wx-linie,#E6E9F0);transition:border-color .4s,background .4s}
.wx-doks li span{flex:1;display:grid}
.wx-doks li b{font-size:1.1cqw}.wx-doks li small{font-size:.85cqw;color:var(--wx-text-3,#888)}
.wx-doks li>svg{width:1.4cqw;height:1.4cqw;color:var(--wx-text-3,#999)}
.wx-sch{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:#FFF1EA;color:#E26A2C;transition:background .4s,color .4s}
.wx-sch svg{width:1.4cqw;height:1.4cqw}
.wx-seite .wx-knopf{justify-self:stretch}

/* ---------- W1 · Einstieg ---------- */
.wx-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.wx-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.wx-start .h1{max-width:12ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.wx-start .unterzeile{max-width:42ch}
.wx-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wx-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.wx-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.wx-start .einstieg-aktionen{display:flex;margin-top:30px}
.wx-start-buehne{position:relative;perspective:1800px;padding:20px 0}
.wx-start-buehne::before{content:"";position:absolute;inset:-6% -8%;background:radial-gradient(50% 50% at 55% 50%,rgba(47,107,255,.42),transparent 70%),radial-gradient(35% 40% at 85% 80%,rgba(155,5,254,.3),transparent 70%);filter:blur(24px);opacity:0;transition:opacity 1.6s ease .2s}
.wx-an.wx-start-buehne::before{opacity:1}
.wx-held{--rx:16deg;--ry:-16deg;transform:rotateX(var(--rx)) rotateY(var(--ry));opacity:0;translate:0 50px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.wx-an .wx-held{--rx:5deg;--ry:-9deg;opacity:1;translate:0 0}
.wx-chip{position:absolute;z-index:3;left:-4%;bottom:-4px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:.78rem;color:var(--text);background:rgba(14,17,27,.86);border:1px solid rgba(143,164,255,.35);box-shadow:0 20px 40px -18px rgba(0,0,0,.9),0 0 30px -10px rgba(47,107,255,.8);opacity:0;translate:0 14px;transition:opacity .6s ease 1.8s,translate .8s cubic-bezier(.22,1,.36,1) 1.8s}
.wx-chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,var(--cyan),var(--violett))}
.wx-chip svg{width:12px;height:12px;color:#fff}
.wx-an .wx-chip{opacity:1;translate:0 0}

/* ---------- W2 · Rundgang ---------- */
.wx-rund{max-width:1060px;margin:0 auto}
.wx-rund .wx-fenster{position:relative}
.wx-scroll{height:var(--wx-h,min(560px,calc(100svh - 430px)));overflow:hidden;position:relative}
.wx-lauf{will-change:transform}
.wx-rund .wx-kopf{position:relative;z-index:2;background:#fff}

/* ---------- W3 · Ablauf ---------- */
.wx-abl{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,3vw,48px);align-items:center;max-width:1080px;margin:0 auto}
.wx-stationen{position:relative;list-style:none;margin:0;padding:0 0 0 28px;display:grid;gap:22px}
.wx-bahn{position:absolute;left:6px;top:6px;bottom:6px;width:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.wx-bahn i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);border-radius:inherit;background:linear-gradient(180deg,var(--cyan),var(--blau),var(--violett));box-shadow:0 0 10px rgba(47,107,255,.8)}
.wx-st{position:relative;display:flex;gap:12px;align-items:flex-start;opacity:.38;transition:opacity .45s,transform .5s cubic-bezier(.22,1,.36,1)}
.wx-st::before{content:"";position:absolute;left:-27px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--grund);border:2px solid rgba(255,255,255,.25);transition:all .4s}
.wx-st.an{opacity:1;transform:translateX(6px)}
.wx-st.an::before{background:var(--blau);border-color:#8FDCFF;box-shadow:0 0 12px rgba(47,107,255,.9)}
.wx-st>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau) 55%,var(--violett))}
.wx-st>i svg{width:17px;height:17px}
.wx-st b{display:block;font-size:1.15rem;font-weight:600}
.wx-st small{display:block;margin-top:4px;font-size:.88rem;line-height:1.5;color:var(--text-2)}
.wx-szenen{position:relative;display:grid;min-height:460px;padding:20px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.wx-sz{grid-area:1/1;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(20px) scale(.97);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.wx-sz.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s .08s,transform .7s cubic-bezier(.22,1,.36,1) .08s,visibility 0s}
.wx-anfrage,.wx-mail,.wx-vb,.wx-frei{width:min(460px,100%);padding:18px;border-radius:16px;background:var(--wx-f1,#fff);border:1px solid var(--h-linie);box-shadow:0 30px 60px -30px rgba(22,27,46,.5)}
.wx-a-kopf{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;margin-bottom:10px}
.wx-a-kopf svg{grid-row:span 2;width:30px;height:30px;padding:6px;border-radius:9px;color:#fff;background:#00A8C0}
.wx-a-kopf small{font-size:.72rem;color:var(--h-text-2)}
.wx-anfrage dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:.82rem}
.wx-anfrage dt{color:var(--h-text-2)}.wx-anfrage dd{margin:0}
.wx-auto{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;font-size:.78rem;color:var(--wx-blau-t,#2457D6);background:var(--wx-blass,#EEF2FF)}
.wx-auto svg{width:14px;height:14px}
.wx-m-kopf{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.wx-m-kopf i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font:700 .64rem/1 "Manrope",sans-serif;font-style:normal;color:#fff;background:var(--wx-s)}
.wx-m-kopf span{display:grid}.wx-m-kopf small{font-size:.7rem;color:var(--h-text-2)}
.wx-m-betr{display:block;margin-bottom:10px;font-size:.94rem}
.wx-mail img{width:100%;height:150px;max-width:none;object-fit:cover;border-radius:10px}
.wx-mail p{margin:10px 0;font-size:.82rem;color:var(--wx-text-m,#3D4560)}
.wx-mail .wx-knopf,.wx-frei .wx-knopf{padding:10px 16px;border-radius:9px;font-size:.84rem}
.wx-vb-t{display:block;margin-bottom:10px;font-size:1rem}
.wx-anrede{display:flex;gap:6px;margin-bottom:10px}
.wx-anrede span{padding:6px 12px;border-radius:8px;border:1px solid var(--h-linie);font-size:.76rem}
.wx-anrede span.an{border-color:var(--wx-p);color:var(--wx-blau-t2,var(--wx-p));font-weight:600}
.wx-felder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wx-felder label{display:grid;gap:4px}
.wx-felder small{font-size:.66rem;font-weight:600}.wx-felder em{font-style:normal;color:#E5484D}
.wx-felder span{min-height:32px;padding:7px 9px;border-radius:8px;border:1px solid var(--h-linie);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-info{display:flex;gap:8px;margin:10px 0;padding:9px 11px;border-radius:10px;border:1px solid var(--wx-orange-r,#FFD2B8);background:var(--wx-orange-bg,#FFF5EF);font-size:.72rem;line-height:1.45}
.wx-info svg{flex:none;width:15px;height:15px;color:var(--wx-orange-t,#E26A2C)}
.wx-haken{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.wx-haken li{display:flex;gap:8px;font-size:.68rem;line-height:1.45;color:var(--wx-text-m,#3D4560)}
.wx-hk{flex:none;position:relative;width:15px;height:15px;margin-top:1px;border-radius:4px;border:1.5px solid var(--wx-rand,#9AA3B5);transition:background .25s,border-color .25s}
.wx-hk::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wx-haken li.an .wx-hk{background:var(--wx-p);border-color:var(--wx-p)}
.wx-haken li.an .wx-hk::after{transform:rotate(45deg) scale(1)}
.wx-bestellen{display:flex;justify-content:center;padding:11px;border-radius:10px;font-size:.88rem;font-weight:700;color:#fff;background:var(--wx-p);transition:transform .2s,filter .3s}
.wx-bestellen.drueckt{animation:wx-druck .35s ease}
@keyframes wx-druck{50%{transform:scale(.97)}}
.wx-frei-bilder{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.wx-frei-bilder img{width:100%;aspect-ratio:3/2;max-width:none;object-fit:cover;border-radius:8px;filter:blur(6px) saturate(.6);transition:filter 1s ease}
.wx-sz-frei.an .wx-frei-bilder img{filter:none}
.wx-sz-frei.an .wx-frei-bilder img:nth-child(2){transition-delay:.15s}.wx-sz-frei.an .wx-frei-bilder img:nth-child(3){transition-delay:.3s}.wx-sz-frei.an .wx-frei-bilder img:nth-child(4){transition-delay:.45s}
.wx-doks-frei li{padding:7px 9px}
.wx-doks-frei li b{font-size:.78rem}.wx-doks-frei li small{font-size:.62rem;color:var(--wx-gruen-t,#11804F)}
.wx-doks-frei .wx-sch{width:24px;height:24px;border-radius:7px;background:var(--wx-gruen-bg,#E3F8EE);color:var(--wx-gruen-t,#11804F)}
.wx-doks-frei .wx-sch svg{width:13px;height:13px}
.wx-doks-frei li>svg{width:14px;height:14px}
.wx-bestaetigt{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border-radius:10px;font-size:.74rem;color:var(--wx-gruen-t,#11804F);background:var(--wx-gruen-bg,#E3F8EE)}
.wx-bestaetigt svg{width:14px;height:14px}
.wx-weiter{max-width:640px;margin:28px auto 0;text-align:center;font-size:.92rem;color:var(--text-2)}
.wx-weiter a{color:#9DB6FF;font-weight:600;text-decoration:none}
.wx-zeiger{position:absolute;z-index:9;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.wx-zeiger.da{opacity:1}
.wx-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.wx-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.wx-zeiger.klick i{animation:wx-ring .6s ease-out}
@keyframes wx-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}

/* ---------- W4 · Einstellungen ---------- */
.wx-ein{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto;align-items:start}
.wx-ein-l,.wx-ein-r{padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.wx-sws{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.wx-sw{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;background:var(--wx-f1,#fff);border:1px solid var(--h-linie);transition:border-color .3s,box-shadow .3s}
.wx-sw span{flex:1;display:grid;gap:3px}
.wx-sw b{font-size:.82rem}.wx-sw small{font-size:.72rem;line-height:1.45;color:var(--h-text-2)}
.wx-sw.leuchtet{border-color:var(--wx-blau-r,#9DB6FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.wx-schalter{position:relative;flex:none;width:34px;height:19px;border-radius:999px;background:var(--wx-schalter,#D5DBE7);transition:background .3s}
.wx-schalter i{position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.wx-sw.an .wx-schalter{background:var(--wx-p)}
.wx-sw.an .wx-schalter i{transform:translateX(15px)}
.wx-fw{list-style:none;margin:0;padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;border-radius:13px;background:var(--wx-f1,#fff);border:1px solid var(--h-linie);font-size:.76rem}
.wx-fw li{display:flex;align-items:center;gap:7px}
.wx-fw em,.wx-h-zeile em{margin-left:auto;font-style:normal;font-size:.62rem;color:var(--wx-schwach,#B5BCCB)}
.wx-fw em.an,.wx-h-zeile em.an{color:var(--wx-orange-t,#E26A2C);font-weight:600}
.wx-cb{flex:none;position:relative;width:14px;height:14px;border-radius:4px;border:1.5px solid var(--wx-rand,#B5BCCB)}
.wx-cb.an{background:var(--wx-p);border-color:var(--wx-p)}
.wx-cb.an::after{content:"";position:absolute;left:3.5px;top:.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.wx-vs{display:grid;gap:8px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--h-linie)}
.wx-vs-bild{position:relative;border-radius:10px;overflow:hidden}
.wx-vs-bild img,.wx-vs-daumen img{width:100%;max-width:none;aspect-ratio:3/2;object-fit:cover;display:block;transition:filter .7s ease}
.wx-vs-schloss{position:absolute;left:50%;top:50%;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;transform:translate(-50%,-50%) scale(.8);background:rgba(14,17,27,.75);color:#fff;font-size:.74rem;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.wx-vs-schloss svg{width:13px;height:13px}
.wx-vs-daumen{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.wx-vs-daumen img{border-radius:7px}
.wx-vs-titel{font-size:.94rem}
.wx-vs-adr{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--h-text-2)}
.wx-vs-adr svg{width:13px;height:13px;color:var(--wx-p)}
.wx-adr-teil{display:none}
.wx-vs-doks li{padding:8px 10px}
.wx-vs-doks li b{font-size:.76rem}.wx-vs-doks li small{font-size:.62rem}
.wx-vs-doks .wx-sch{width:24px;height:24px;border-radius:7px}
.wx-vs-doks .wx-sch svg{width:13px;height:13px}
.wx-vs-doks li>svg{width:14px;height:14px}
.wx-vs .wx-vs-doks li:nth-child(n+3){display:none}
/* Gesperrt: Bilder verschwommen, Adresse gekürzt, Dokumente mit Schloss */
.wx-ein.gesperrt .wx-vs-bild img,.wx-ein.gesperrt .wx-vs-daumen img{filter:blur(8px) saturate(.5)}
.wx-ein.gesperrt .wx-vs-schloss{opacity:1;transform:translate(-50%,-50%)}
.wx-ein.gesperrt .wx-adr-voll{display:none}.wx-ein.gesperrt .wx-adr-teil{display:inline}
.wx-ein:not(.gesperrt) .wx-vs-doks .wx-sch{background:#E3F8EE;color:#11804F}
.wx-ein:not(.gesperrt) .wx-vs-doks li small{color:#11804F}
.wx-texte{list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wx-texte li{display:grid;gap:10px;align-content:start;padding:18px;border-radius:18px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.wx-texte b{font-size:1rem;font-weight:600}
.wx-txt{padding:12px 14px;border-radius:12px;background:var(--wx-f1,#fff);color:var(--wx-text-m,#3D4560);font-size:.8rem;line-height:1.55}
.wx-ph{padding:1px 5px;border-radius:5px;font-family:"JetBrains Mono",monospace;font-size:.92em;color:var(--wx-blau-t,#2457D6);background:var(--wx-blass,#E8F1FF);transition:all .3s}
.wx-ph.voll{font-family:"Manrope",sans-serif;color:var(--wx-gruen-t,#11804F);background:var(--wx-gruen-bg,#E3F8EE);font-weight:600}
.wx-h-zeile{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--wx-linie,#EEF1F6)}
.wx-h-zeile:last-child{border:0}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:900px){
  .wx-start-innen{grid-template-columns:1fr;min-height:0}
  .wx-abl,.wx-ein{grid-template-columns:1fr}
  .wx-stationen{display:none}
  .wx-texte{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wx-held{--rx:0deg;--ry:0deg}.wx-an .wx-held{--rx:0deg;--ry:0deg}
  .wx-chip{left:2%;bottom:-12px}
  .wx-szenen{padding:12px;min-height:500px}
  .wx-felder{grid-template-columns:1fr}
  .wx-fw{grid-template-columns:1fr 1fr}
  .wx-unten{grid-template-columns:1fr}
  .wx-seite{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wx-seite-wrap *,.wx-seite-wrap *::before,.wx-seite-wrap *::after{transition:none!important;animation:none!important}
  .wx-held,.wx-chip{opacity:1;translate:0 0}
}
/* height-Attribut der Bilder würde aspect-ratio aushebeln */
.wx-seite-wrap img{height:auto}
.wx-g,.wx-karte img,.wx-mail img{height:100%}
.wx-mail img{height:150px}
/* Ablauf kompakt, damit Überschrift und Szene angeheftet in eine Bildhöhe passen */
@media (min-width:901px){
  .wx-abl-ab .ak-kopf{margin-bottom:28px}
  .wx-szenen{min-height:0;height:min(470px,calc(100svh - 360px));padding:14px}
  .wx-anfrage,.wx-mail,.wx-vb,.wx-frei{padding:14px}
  .wx-mail img{height:110px}
  .wx-vb-t{margin-bottom:6px}.wx-anrede{margin-bottom:6px}
  .wx-felder{gap:6px}.wx-felder span{min-height:28px;padding:5px 8px}
  .wx-info{margin:7px 0;padding:7px 9px}
  .wx-haken{gap:5px;margin-bottom:8px}.wx-haken li{font-size:.64rem}
  .wx-bestellen{padding:9px}
  .wx-frei-bilder{grid-template-columns:repeat(4,1fr)}
  .wx-doks-frei{grid-template-columns:1fr 1fr}
  .wx-rund-ab .ak-kopf{margin-bottom:28px}
  .wx-scroll{--wx-h:min(560px,calc(100svh - 380px))}
}
@media (min-width:901px) and (max-height:900px){.wx-abl-ab .ab-text,.wx-rund-ab .ab-text{display:none}}
.wx-seite{align-self:start}
/* Karte statt Luftbild */
.wx-karte{height:auto;aspect-ratio:2/1;background:#EEF0DA;border:1px solid #E6E9F0}
.wx-map{display:block;width:100%;height:100%}
.wx-map .wx-pin{transform-origin:300px 126px;animation:wx-pin 2.4s ease-in-out infinite}
@keyframes wx-pin{50%{transform:translateY(-4px)}}
.wx-karte-txt{display:block;margin-top:.8cqw;font-size:.95cqw;color:#777}
/* Ablauf: Bild der Mail nicht anschneiden */
.wx-mail img{height:auto!important;aspect-ratio:16/9;object-position:50% 45%}
@media (min-width:901px){.wx-mail{width:min(400px,100%)}.wx-mail p{margin:8px 0}}
/* Einstellungen: linke Spalte gefüllt */
.wx-ein{align-items:stretch}
.wx-ein-l{display:flex;flex-direction:column}
.wx-k2{margin-top:16px}
.wx-auto-mail{list-style:none;margin:0;padding:12px 14px;display:grid;gap:9px;border-radius:13px;background:var(--wx-f1,#fff);border:1px solid var(--h-linie);font-size:.8rem}
.wx-auto-mail li{display:flex;align-items:center;gap:9px}
.wx-auto-mail svg{flex:none;width:18px;height:18px;padding:3px;border-radius:50%;color:#fff;background:#16A36A;stroke-width:3}
.wx-version{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:14px;font-size:.76rem;color:var(--h-text-2)}
.wx-version svg{width:15px;height:15px}
.wx-map rect,.wx-map text,.wx-map g>rect{stroke:none}
.wx-map path[fill]:not([fill="none"]){stroke:none}
.wx-map .wx-pin path{stroke:#fff}
.wx-map .wx-pin circle{stroke:none}
/* Rundgang: Unterzeile auf großen Bildschirmen weg, Fenster nutzt die ganze Höhe */
@media (min-width:901px){.wx-rund-ab .ab-text{display:none}.wx-rund-ab .ak-kopf{margin-bottom:22px}}

/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Ablauf, Einstellungen der App ----------
   Rundgang und die Vorschau „So sieht es der Interessent“ zeigen die Seite des Maklers für seine Kunden und bleiben hell. */
.wx-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;--wx-f1:#161A24;--wx-f2:#1C2130;
  --wx-linie:rgba(255,255,255,.09);--wx-rand:rgba(255,255,255,.28);--wx-text-m:#C9CCD6;--wx-text-3:#6F7281;--wx-schwach:#6F7281;--wx-blau-t:#8FA4FF;--wx-blau-t2:#8FA4FF;
  --wx-blau-r:rgba(143,164,255,.55);--wx-blass:rgba(110,140,255,.14);--wx-gruen-bg:rgba(74,222,154,.12);--wx-gruen-t:#4ADE9A;--wx-orange-bg:rgba(251,191,90,.12);
  --wx-orange-r:rgba(251,191,90,.3);--wx-orange-t:#FBBF5A;--wx-schalter:#2A3042;color:var(--h-text)}
.wx-szenen.wx-dunkel,.wx-ein-l.wx-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.wx-dunkel .wx-anfrage,.wx-dunkel .wx-mail,.wx-dunkel .wx-vb,.wx-dunkel .wx-frei{box-shadow:none}
.wx-dunkel .wx-m-kopf i{background:#2F6BFF}
.wx-dunkel .wx-sw.leuchtet{box-shadow:none}
.wx-dunkel .wx-txt{border:1px solid var(--h-linie)}

/* ---------- Handy (18.10.2026) ---------- */
/* Web-Exposé im Fenster (Einstieg und Rundgang): Am Desktop skaliert alles mit cqw. Auf dem Handy wurde die Schrift dadurch
   3,5 bis 6 px klein und unlesbar. Hier steht die Seite wie ein echtes Web-Exposé auf dem Handy: Galerie, Vorschaubilder,
   Eckdaten untereinander, Reiter in zwei Zeilen, Ansprechpartner und Dokumente unter dem Inhalt (vorher ausgeblendet). */
@media (max-width:640px){
  .wx-leiste{height:30px;gap:10px;padding:0 10px}
  .wx-url{font-size:.62rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wx-fenster .wx-kopf{gap:8px;padding:8px 12px}
  .wx-fenster .wx-logo{gap:5px;flex:none}
  .wx-fenster .wx-logo i{width:13px;height:13px;box-shadow:inset 0 0 0 3px #fff,0 0 0 1.5px var(--wx-p)}
  .wx-fenster .wx-logo b{font-size:.74rem}
  .wx-fenster .wx-logo em{font-size:.5rem;letter-spacing:.14em}
  .wx-fenster .wx-k-r{gap:9px;font-size:0}
  .wx-fenster .wx-k-r svg{width:14px;height:14px}
  .wx-fenster .wx-k-r em{padding:5px 8px;border-radius:6px;font-size:.62rem;white-space:nowrap}
  .wx-fenster .wx-buehne{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  /* Safari: aspect-ratio im Raster durch Platzhalter ersetzen (Galerie hat nur absolut gesetzte Kinder) */
  .wx-fenster .wx-galerie{aspect-ratio:auto;height:auto;align-self:start}
  .wx-fenster .wx-galerie::before{content:"";display:block;padding-top:66.667%}
  .wx-fenster .wx-zahl{right:8px;bottom:8px;padding:3px 7px;border-radius:5px;font-size:.62rem}
  .wx-fenster .wx-pfeil{left:8px;width:26px;height:26px;margin-top:-13px;font-size:1rem}
  .wx-fenster .wx-pfeil-r{left:auto;right:8px}
  .wx-fenster .wx-daumen{order:2;gap:5px;padding:7px 12px 0}
  .wx-fenster .wx-daumen img{flex:1;min-width:0;width:auto;border-width:2px;border-radius:5px}
  .wx-fenster .wx-daumen span{flex:1;min-width:0;width:auto;border-radius:5px;font-size:.66rem}
  .wx-fenster .wx-eck{order:3;gap:8px;padding:12px 12px 14px}
  .wx-fenster .wx-eck small{gap:4px;font-size:.66rem}
  .wx-fenster .wx-eck small svg{width:12px;height:12px}
  .wx-fenster .wx-eck h4{font-size:1rem}
  .wx-fenster .wx-eck dl{gap:6px 0}
  .wx-fenster .wx-eck dl div{padding:0 10px 0 0;margin-right:10px}
  .wx-fenster .wx-eck dt{font-size:.8rem}.wx-fenster .wx-eck dd{font-size:.62rem}
  .wx-fenster .wx-knopf{padding:8px 14px;border-radius:8px;font-size:.72rem}
  .wx-fenster .wx-reiter{flex-wrap:wrap;gap:6px 14px;padding:8px 12px;font-size:.66rem}
  .wx-fenster .wx-reiter span{padding-bottom:3px}
  .wx-fenster .wx-reiter span.an{box-shadow:inset 0 -2px 0 var(--wx-p)}
  .wx-fenster .wx-unten{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 12px 14px}
  .wx-fenster .wx-inhalt{gap:10px}
  .wx-fenster .wx-ab{padding:11px 12px;border-radius:10px}
  .wx-fenster .wx-ab.an{box-shadow:0 0 0 3px rgba(47,107,255,.1)}
  .wx-fenster .wx-ab h5{margin:0 0 8px;padding-bottom:4px;font-size:.84rem;border-bottom-width:2px}
  .wx-fenster .wx-ab p{margin:0 0 8px;font-size:.72rem}
  .wx-fenster .wx-tab{font-size:.7rem}
  .wx-fenster .wx-tab dt,.wx-fenster .wx-tab dd{padding:4px 0}
  .wx-fenster .wx-merk{gap:6px;font-size:.7rem}
  .wx-fenster .wx-merk li{gap:6px}
  .wx-fenster .wx-merk svg{width:12px;height:12px}
  .wx-fenster .wx-skala{height:7px;margin-top:10px;border-radius:7px}
  .wx-fenster .wx-skala i{top:-4px;width:3px;height:15px}
  .wx-fenster .wx-karte{border-radius:8px}
  .wx-fenster .wx-karte-txt{margin-top:6px;font-size:.62rem}
  .wx-fenster .wx-ablauf{gap:6px}
  .wx-fenster .wx-ablauf>b{font-size:.8rem}.wx-fenster .wx-ablauf>small{font-size:.66rem}
  .wx-fenster .wx-ablauf ol{gap:8px;margin-top:4px}
  .wx-fenster .wx-ablauf li{gap:8px;font-size:.66rem}
  .wx-fenster .wx-ablauf li>i{width:20px;height:20px}
  .wx-fenster .wx-ablauf li span{gap:2px}
  .wx-fenster .wx-ablauf li b em{margin-left:6px;padding:1px 5px;border-radius:4px;font-size:.62rem}
  .wx-fenster .wx-widerruf{margin:4px 0 0!important;padding-top:8px;font-size:.66rem!important}
  .wx-fenster .wx-seite{display:grid;gap:10px}
  .wx-fenster .wx-karte-k{gap:8px;padding:12px;border-radius:10px;font-size:.72rem}
  .wx-fenster .wx-karte-k>small{font-size:.62rem}
  .wx-fenster .wx-mk{gap:10px}
  .wx-fenster .wx-mk img{width:40px;height:40px}
  .wx-fenster .wx-mk b{font-size:.82rem}
  .wx-fenster .wx-zk{gap:6px;padding:7px;border-radius:7px}
  .wx-fenster .wx-zk svg{width:13px;height:13px}
  .wx-fenster .wx-dt{font-size:.8rem}
  .wx-fenster .wx-doks{gap:6px}
  .wx-fenster .wx-doks li{gap:8px;padding:7px 9px;border-radius:7px}
  .wx-fenster .wx-doks li b{font-size:.72rem}.wx-fenster .wx-doks li small{font-size:.62rem}
  .wx-fenster .wx-doks li>svg{width:13px;height:13px}
  .wx-fenster .wx-sch{width:22px;height:22px;border-radius:6px}
  .wx-fenster .wx-sch svg{width:12px;height:12px}
  /* Rundgang: feste Fensterhöhe statt 100svh (auf dem iPhone sonst nur rund 230 px) */
  .wx-scroll{height:470px}
  .wx-chip{max-width:96%}
}
/* Handy: Eckdaten in einer Zeile wie am Desktop (vorher brach „1958“ allein in die zweite Zeile, Trennlinie hing am Rand) */
@media (max-width:640px){
  .wx-fenster .wx-eck dl{display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:0 6px}
  .wx-fenster .wx-eck dl div{padding:0;margin:0;border:0}
}
/* Handy Ablauf: die vier Stationen waren unter 900 px ausgeblendet, die Szenen standen ohne Erklärung da. Jetzt als
   kompakte Schrittleiste über der Szene: vier Symbole mit Titel, darunter die Beschreibung der aktiven Station
   (alle Beschreibungen liegen übereinander, die Höhe bleibt fest) (18.10.2026) */
@media (max-width:640px){
  .wx-stationen{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 0 64px;margin-bottom:12px}
  .wx-bahn{display:none}
  .wx-st{position:static;flex-direction:column;align-items:center;gap:6px;text-align:center;opacity:.4}
  .wx-st::before{display:none}
  .wx-st.an{transform:none}
  .wx-st>i{width:30px;height:30px;border-radius:9px}
  .wx-st>i svg{width:15px;height:15px}
  .wx-st b{font-size:.66rem;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
  .wx-st small{position:absolute;left:0;right:0;bottom:0;height:56px;margin:0;padding:8px 12px;border-radius:12px;border:1px solid var(--linie);background:var(--panel);font-size:.76rem;line-height:1.4;text-align:left;opacity:0;transition:opacity .35s}
  .wx-st.an small{opacity:1}
  .wx-szenen{min-height:0}
}
/* Handy Ablauf: Formular kompakter (Vor- und Nachname nebeneinander, E-Mail über die volle Breite), die Szenenkarte
   war 650 px hoch und passte mit der Schrittleiste nicht in eine Bildschirmhöhe */
@media (max-width:640px){
  .wx-felder{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wx-felder label{min-width:0}
  .wx-felder label:nth-child(3){grid-column:1/-1}
  /* Felder fest hoch: leer und gefüllt gleich (vorher wuchs die Karte beim Tippen um 7 px) */
  .wx-felder span{height:32px;min-height:0;line-height:16px}
}
/* Handy Einstellungen: Der Schalter „Exposé erst nach bestätigter Provisionsvereinbarung“ schaltet sich von selbst, die
   Wirkung (Bilder verschwommen, Adresse gekürzt) stand aber 800 px tiefer in der Vorschau. Die Vorschau steht jetzt
   kompakt über den Einstellungen, Schalter und Wirkung sind zusammen im Bild (18.10.2026) */
@media (max-width:640px){
  .wx-ein-r{order:-1;padding:12px}
  .wx-vs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:6px;padding:10px}
  .wx-vs-bild{grid-column:1;grid-row:1/3}
  .wx-vs-daumen{grid-column:1;grid-row:3;gap:4px}
  .wx-vs-daumen img{border-radius:5px}
  .wx-vs-titel{grid-column:2;grid-row:1;align-self:end;font-size:.86rem;line-height:1.3}
  .wx-vs-adr{grid-column:2;grid-row:2/4;align-self:start;align-items:flex-start;font-size:.7rem;line-height:1.4}
  .wx-vs-adr svg{flex:none;margin-top:2px}
  .wx-vs-doks{grid-column:1/-1;grid-row:4;margin-top:4px}
  .wx-vs-schloss{max-width:92%;padding:6px 9px;gap:5px;font-size:.62rem;line-height:1.25;text-align:center}
  .wx-vs-schloss svg{flex:none;width:11px;height:11px}
}
/* Handy: kleine Beschriftungen nicht unter 0.62rem */
@media (max-width:640px){
  .wx-klein{font-size:.62rem}
  .wx-fenster .wx-ablauf li small{font-size:.62rem}
  .wx-fenster .wx-logo em{font-size:.56rem;letter-spacing:.1em}
}
/* Handy: Szenen oben ausrichten statt mittig, sonst stand über der kurzen Anfrage-Szene viel Leerraum (18.10.2026) */
@media (max-width:640px){.wx-sz{place-items:start center}}