@layer components{.verkenner{position:relative}.verkenner__stage{isolation:isolate;position:relative}.verkenner__canvas{aspect-ratio:3/2;translate:calc(var(--px,0) * -4px) calc(var(--py,0) * -3px);position:relative}.verkenner__house{z-index:1;object-fit:contain;block-size:100%;inline-size:100%;filter:contrast(1.05) saturate(1.07) brightness(1.01) drop-shadow(0 30px 40px color-mix(in srgb, var(--color-primary) 14%, transparent));position:relative}.verkenner__shadow{z-index:0;background:radial-gradient(closest-side, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent);filter:blur(16px);opacity:.85;pointer-events:none;block-size:15%;position:absolute;inset-block-end:3%;inset-inline:14% 3%;transform:skew(-18deg)}.verkenner__light{z-index:2;background:radial-gradient(70% 60% at 82% 8%, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent 60%), linear-gradient(215deg, transparent 45%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);mix-blend-mode:soft-light;-webkit-mask:var(--house) center / contain no-repeat;-webkit-mask:var(--house) center / contain no-repeat;mask:var(--house) center / contain no-repeat;pointer-events:none;position:absolute;inset:0}.verkenner__tether{z-index:3;pointer-events:none;block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:visible}.verkenner__tether path{fill:none;stroke:var(--color-accent);stroke-width:1.5px;stroke-linecap:round;stroke-dasharray:.5 4.5;vector-effect:non-scaling-stroke}.verkenner__tether circle{fill:var(--color-accent)}@media not (min-width:48rem){.verkenner__tether{display:none}}.verkenner__glow{translate:calc(var(--px,0) * 3px) calc(var(--py,0) * 2px);z-index:0;background:radial-gradient(48% 52% at 52% 46%, color-mix(in srgb, var(--color-surface-raised) 92%, transparent), transparent 70%), radial-gradient(36% 40% at 68% 30%, var(--glow-warm), transparent 72%);pointer-events:none;position:absolute;inset:-8% -6% -4%}.surface-donker .verkenner__glow{background:radial-gradient(46% 50% at 52% 50%, color-mix(in srgb, var(--color-highlight) 14%, transparent), transparent 70%), radial-gradient(30% 36% at 62% 28%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 72%)}.hotspot{z-index:3;border-radius:50%;place-items:center;block-size:2.75rem;inline-size:2.75rem;display:none;position:absolute;inset-block-start:var(--y);inset-inline-start:var(--x);translate:-50% -50%}.js .hotspot{display:grid}.hotspot__dot{background:var(--color-surface-raised);block-size:1.75rem;inline-size:1.75rem;color:var(--color-primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-surface-raised) 45%, transparent), var(--shadow-md);transition:inline-size .7s var(--ease-zacht), block-size .7s var(--ease-zacht), background-color .6s var(--ease-zacht), color .6s var(--ease-zacht), box-shadow .7s var(--ease-zacht);border-radius:50%;place-items:center;display:grid}.hotspot__dot:before{content:"";background:var(--color-primary);block-size:.625rem;inline-size:.625rem;transition:transform .6s var(--ease-zacht), opacity .4s var(--ease-zacht);border-radius:50%;grid-area:1/1}.hotspot__dot .icon{--icon-size:1.25rem;stroke-width:2.25px;opacity:0;transition:transform .7s var(--ease-zacht), opacity .5s var(--ease-zacht);grid-area:1/1;transform:scale(.4)rotate(-90deg)}.hotspot:hover .hotspot__dot,.hotspot:focus-visible .hotspot__dot{block-size:2.125rem;inline-size:2.125rem}.hotspot.is-active .hotspot__dot{background:var(--color-accent);block-size:2.75rem;inline-size:2.75rem;color:var(--color-on-accent);box-shadow:0 0 0 6px color-mix(in srgb, var(--color-accent) 28%, transparent), var(--shadow-md)}.hotspot.is-active .hotspot__dot .icon{opacity:1;transform:none}.hotspot.is-active .hotspot__dot:before{opacity:0;transform:scale(0)}.hotspot:focus-visible{outline:none}.hotspot:focus-visible .hotspot__dot{box-shadow:var(--focus-ring), var(--shadow-md)}.hotspot__label{border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-on-primary);font-size:var(--text-label);font-weight:var(--weight-ui);letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-snel) var(--ease-out), translate var(--dur-snel) var(--ease-out);padding:.3rem .7rem;position:absolute;inset-block-end:calc(100% + .25rem);inset-inline-start:50%;translate:-50% 4px}.hotspot:hover .hotspot__label,.hotspot:focus-visible .hotspot__label{opacity:1;translate:-50%}.hotspot.is-active .hotspot__label{opacity:0}.hotspot.is-active:after{content:"";border:2px solid var(--color-accent);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.js .verkenner.is-ready .hotspot.is-active:after,.hotspot.is-active.is-ping:after{animation:hotspot-pulse 1.4s var(--ease-out) 2}.hotspot.is-active .hotspot__dot{animation:hotspot-pop .8s var(--ease-zacht)}}@keyframes hotspot-pop{0%{scale:.85}}@keyframes hotspot-pulse{0%{opacity:.8;transform:scale(.9)}to{opacity:0;transform:scale(2.1)}}.verkenner__card{z-index:4;border-radius:var(--radius-xl);inline-size:min(27rem,60%);translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 4px);padding:1.125rem 1.125rem .875rem 1.25rem;position:absolute;inset-block-start:84%;inset-inline-end:calc(var(--space-gutter) * .5)}.verkenner__card-items{display:grid;overflow:hidden}.verkenner__card-item{grid-area:1/1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;display:grid}.verkenner__card-item[hidden]{visibility:hidden;display:grid}.verkenner.is-ready .verkenner__card-item{opacity:0;visibility:hidden}.verkenner.is-ready .verkenner__card-item.is-current{opacity:1;visibility:visible;animation:card-item-in .9s var(--ease-zacht) 60ms both}.verkenner.is-ready .verkenner__card-item.is-leaving{visibility:visible;animation:card-item-out .6s var(--ease-in-out) both}.verkenner.is-ready .verkenner__card-item.is-current[data-dir=prev]{animation-name:card-item-in-prev}.verkenner.is-ready .verkenner__card-item.is-leaving[data-dir=prev]{animation-name:card-item-out-prev}@keyframes card-item-in{0%{opacity:0;filter:blur(6px);translate:0 14px}}@keyframes card-item-in-prev{0%{opacity:0;filter:blur(6px);translate:0 -14px}}@keyframes card-item-out{0%{opacity:1}to{opacity:0;filter:blur(6px);translate:0 -10px}}@keyframes card-item-out-prev{0%{opacity:1}to{opacity:0;filter:blur(6px);translate:0 10px}}.verkenner.is-ready .verkenner__card-item.is-current .verkenner__card-icon{animation:card-icon-in .9s var(--ease-zacht) .15s both}@keyframes card-icon-in{0%{rotate:-8deg;scale:.8}}@media (prefers-reduced-motion:reduce){.verkenner.is-ready .verkenner__card-item.is-current,.verkenner.is-ready .verkenner__card-item.is-leaving{animation:none}.verkenner.is-ready .verkenner__card-item.is-leaving{visibility:hidden}.verkenner.is-ready .verkenner__card-item.is-current .verkenner__card-icon{animation:none}}.verkenner__card-icon{background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--color-surface-raised) 40%, var(--color-accent)), var(--color-accent) 70%);block-size:3.25rem;inline-size:3.25rem;color:var(--color-on-accent);box-shadow:0 8px 18px -8px color-mix(in srgb, var(--color-accent) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-surface-raised) 50%, transparent);border-radius:50%;place-items:center;display:grid}.verkenner__card-icon .icon{--icon-size:1.5rem}.verkenner__card-kicker{font-size:var(--text-label);font-weight:var(--weight-sterk);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.verkenner__card-title{letter-spacing:-.02em;margin-block-start:.125rem;font-size:1.3125rem;font-weight:560;line-height:1.15}.verkenner__card-text{font-size:var(--text-small);color:var(--color-text-muted);margin-block-start:.25rem;line-height:1.45}.verkenner__card-link{background:var(--color-primary);block-size:3rem;inline-size:3rem;color:var(--color-on-primary);transition:background-color var(--dur-snel), scale var(--dur-basis) var(--ease-spring);border-radius:50%;place-items:center;display:grid}.verkenner__card-link:hover{background:var(--color-primary-hover);scale:1.06}.verkenner__card-link .icon{transition:transform var(--dur-basis) var(--ease-out)}.verkenner__card-link:hover .icon{transform:translate(2px)}.verkenner:not(.has-tour) .verkenner__tour{display:none}.verkenner__tour{border-block-start:1px solid color-mix(in srgb, var(--on-light-text) 8%, transparent);justify-content:flex-start;align-items:center;gap:0;margin-block-start:.875rem;padding-block-start:.75rem;display:flex}.verkenner__dot{block-size:1.5rem;inline-size:1.5rem;transition:inline-size .8s var(--ease-zacht);place-items:center start;display:grid;position:relative}.verkenner__dot:before{content:"";border-radius:var(--radius-pill);background:color-mix(in srgb, var(--on-light-text) 16%, transparent);grid-area:1/1;block-size:.375rem;inline-size:calc(100% - .75rem)}.verkenner__dot:hover:before{background:color-mix(in srgb, var(--on-light-text) 32%, transparent)}.verkenner__dot:focus-visible{outline:2px solid var(--on-light-focus);outline-offset:0;border-radius:var(--radius-sm)}.verkenner__dot.is-active{inline-size:3rem}.verkenner__dot span{border-radius:var(--radius-pill);background:var(--color-accent);transform-origin:100%;block-size:.375rem;inline-size:calc(100% - .75rem);transition:transform .7s var(--ease-zacht);grid-area:1/1;transform:scaleX(0)}.verkenner__dot.is-active span{transform-origin:0;transform:scaleX(1)}.verkenner.has-tour .verkenner__dot.is-active span{transform:scaleX(var(--p,0));transition:none}.verkenner__chips{scrollbar-width:none;scroll-snap-type:x proximity;gap:.5rem;margin-block-start:var(--space-2);padding-block:.25rem;padding-inline:.125rem;display:flex;overflow-x:auto}@media (min-width:48rem){.hero-woning .verkenner__chips{display:none}}@media not (min-width:48rem){.hotspot{pointer-events:none;visibility:hidden}.hotspot.is-active .hotspot__dot{visibility:visible}.hotspot__dot{block-size:1.25rem;inline-size:1.25rem}.hotspot.is-active .hotspot__dot{block-size:2rem;inline-size:2rem}.verkenner__card{inline-size:100%;margin-block-start:calc(var(--space-2) * -1);position:relative;inset:auto}}.verkenner__flows{z-index:2;pointer-events:none;block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:visible}.verkenner__flows path{fill:none;stroke:var(--color-accent);stroke-width:.45px;stroke-linecap:round;stroke-dasharray:.2 1.6;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--dur-traag) var(--ease-out)}.verkenner__flows path.is-active{opacity:1;stroke-width:3px;stroke-dasharray:2 9}@media (prefers-reduced-motion:no-preference){.verkenner__flows path.is-active{animation:1.4s linear infinite flow-dash}}@keyframes flow-dash{to{stroke-dashoffset:-22px}}@media (prefers-reduced-motion:no-preference){.js .verkenner .verkenner__house{animation:house-in var(--dur-entree) var(--ease-out) both}.js .verkenner .verkenner__glow{animation:glow-in 1.6s var(--ease-out) both}.js .verkenner .hotspot{animation:hotspot-in var(--dur-traag) var(--ease-spring) both;animation-delay:calc(.5s + var(--i,0) * 90ms)}.js .verkenner .verkenner__card{animation:card-rise var(--dur-traag) var(--ease-out) both;animation-delay:.85s}}@keyframes house-in{0%{opacity:.01;transform:translateY(28px)scale(.985)}}@keyframes glow-in{0%{opacity:0;transform:scale(.9)}}@keyframes hotspot-in{0%{opacity:0;scale:.4}}@keyframes card-rise{0%{opacity:0;transform:translateY(14px)}}}@layer sections{@media not (min-width:24rem){.verkenner__card-item{gap:.75rem}.verkenner__card-icon{margin-inline:-.35rem;transform:scale(.8)}.verkenner__card{padding-inline:.875rem}}.js .verkenner:not(.is-ready) .hotspot{visibility:hidden}}
