/* Nur der Inhalt der vorhandenen Hero-Bildfläche ändert sich. */
.references-hero .reference-viewport{position:absolute;inset:0;overflow:clip;overscroll-behavior:auto;touch-action:pan-y;cursor:auto;isolation:isolate;background:var(--paper)}
.reference-viewport::-webkit-scrollbar{display:none}
.references-hero .reference-world{position:relative;width:100%;height:100%;aspect-ratio:1.5;user-select:none}
.references-hero .reference-world>.reference-city{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;aspect-ratio:1.5;margin:0;z-index:0;pointer-events:none}
.references-hero .reference-world>.reference-hotspots{position:absolute;inset:0;display:block;aspect-ratio:auto;margin:0;z-index:1;pointer-events:none}
.references-hero .reference-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;min-width:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;z-index:2;color:var(--graphite)}
.references-hero .reference-symbol{display:grid;place-items:center;width:31px;height:31px;border:1.5px solid #fff;border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 2px 8px #151c2240;transition:background .18s,color .18s,box-shadow .18s}
.references-hero .reference-symbol svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.references-hero .reference-marker[aria-pressed=true] .reference-symbol{background:var(--selected);color:var(--graphite);box-shadow:0 0 0 4px #f3d36b55,0 2px 10px #151c2220}
.references-hero .reference-marker:focus-visible{outline:2px solid #a48223;outline-offset:2px;border-radius:50%}
.references-hero .reference-marker.is-revealed{z-index:4}
.references-hero .reference-callout{position:absolute;bottom:calc(100% + 24px);left:50%;transform:translateX(calc(-50% + var(--callout-shift,0px)));width:max-content;max-width:210px;padding:8px 11px;background:var(--paper);box-shadow:0 3px 12px #151c2224;border:1px solid #c8d8de;font-size:14px;line-height:1.3;font-weight:600;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s linear .15s}
.references-hero .reference-wire{position:absolute;bottom:calc(100% - 7px);left:calc(50% - 1px);width:2px;height:32px;background:var(--blue);pointer-events:none;transform:scaleY(0);transform-origin:bottom;opacity:0;transition:transform .22s ease,opacity .12s}
.references-hero .reference-wire:after{content:'';position:absolute;top:0;left:var(--wire-left,0px);height:2px;width:var(--wire-width,0px);background:var(--blue)}
.references-hero .is-revealed .reference-wire{opacity:1;transform:scaleY(1)}
.references-hero .is-revealed .reference-callout{opacity:1;visibility:visible;transition:opacity .18s ease .2s,visibility 0s}
.references-hero .is-revealed .reference-callout-text{display:block;animation:reference-city-text .22s ease .34s both}
.references-hero .label-below .reference-callout{bottom:auto;top:calc(100% + 24px)}
.references-hero .label-below .reference-wire{bottom:auto;top:calc(100% - 7px);transform-origin:top}
.references-hero .label-below .reference-wire:after{top:auto;bottom:0}
.references-hero .reference-viewport:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.references-hero .reference-viewport.is-dragging{cursor:grabbing}
.references-hero .reference-illustration{position:absolute;top:100%;bottom:auto;left:0;right:0;margin:7px 0 0;display:flex;justify-content:space-between;gap:12px;text-align:right;font-size:10px;line-height:1.4}
.reference-city-hint{font-size:12px;text-align:left}
.reference-touch-hint{display:none}
@keyframes reference-city-text{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@media(max-width:1279px){.references-hero .reference-stage{margin-bottom:24px}}
@media(max-width:700px){.references-hero .reference-world{width:100%}.references-hero .reference-callout{max-width:175px;font-size:13px}.references-hero .reference-illustration{flex-direction:column;gap:3px;text-align:left}.references-hero .reference-stage{margin-bottom:42px}}
@media(hover:none){.reference-mouse-hint{display:none}.reference-touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.references-hero .reference-symbol,.references-hero .reference-wire,.references-hero .reference-callout,.references-hero .is-revealed .reference-callout{transition:none}.references-hero .is-revealed .reference-callout-text{animation:none}}