/* ImmoUpside Potenzialkarte */
:root{
  --f-text:"Archivo",system-ui,sans-serif; --f-display:"Archivo",system-ui,sans-serif;
  --paper:#F7F9FA; --ink:#0F1B24; --ink-2:#4A5863; --ink-3:#87939B; --line:#DDE3E7;
  --green:#3B7864; --green-2:#4E8C78; --green-soft:#D6E9E1;
  --slab-top:#EEF1F1; --slab-side:#D9DFE1;
  --w-t:#FFFFFF; --w-l:#E6EAEC; --w-r:#CFD5D9;
  --r-t:#EBD5C6; --r-l:#DDBBA6; --r-r:#C9A28B;
  --g-t:#B2D8C8; --g-l:#7FB39E; --g-r:#619683;
  --e-t:#F2F8F5; --e-l:#D3E7DE; --e-r:#B9D6C9;
  --water:#C3D9E3; --park:#DCE8D6; --forest:#D0E1C8;
  --tree-1:#A5C197; --tree-2:#8DAE80; --tree-3:#B7CFAA;
  --field-1:#E8ECE7; --field-2:#E3E9E1; --field-3:#EDF0EC; --field-4:#E1E7DF;
}
/* Karte: SVG-Flächen */
.wt{fill:var(--w-t)}.wl{fill:var(--w-l)}.wr{fill:var(--w-r)}
.rt{fill:var(--r-t)}.rl{fill:var(--r-l)}.rr{fill:var(--r-r)}
.gt{fill:var(--g-t)}.gl{fill:var(--g-l)}.gr{fill:var(--g-r)}
.et{fill:var(--e-t)}.el{fill:var(--e-l)}.er{fill:var(--e-r)}
.sp{fill:#35503F}
.dome{fill:#9CC2AE}.dome2{fill:#7FA692}.dome-hi{fill:none;stroke:#C9E0D3;stroke-width:.9;stroke-linecap:round}.spire{stroke:#7FA692;stroke-width:.9}
.sat{fill:#F3EBDA}.sal{fill:#E4D6BB}.sar{fill:#D2C2A3}.rwin{fill:#C5B595}.rdoor{fill:#B7A585}.sock{fill:#CDBEA0}
.stt{fill:#FBFBF8}.stl{fill:#C9CDCF}.str{fill:#C9CDCF}.stbt{fill:#E7E3DA}.stbl{fill:#D8D3C8}.stbr{fill:#D8D3C8}
.stin{fill:#AEB5B8}.stin2{fill:#949DA1}.pitch2{fill:#A9C590}.st-edge{fill:none;stroke:#E2E6E7;stroke-width:1}
.lawn{fill:#D3E3BD}.gpath{fill:#EFE7D3}.bed{fill:#9DBE86}.bed-in{fill:#C9DDB2}
.hedget{fill:#8DB074}.hedgel{fill:#6F945A}.hedger{fill:#6F945A}
.jet{stroke:#FFFFFF;stroke-width:.8;stroke-linecap:round;opacity:.95}.jet-top{fill:#FFFFFF;opacity:.85}.jet-foot{fill:#FFFFFF;opacity:.7}
.air{fill:#E3E6D3}.apron{fill:#DCD8CF}.rwy{fill:#C9C6BF}.rwy-line{fill:none;stroke:#FAF8F2;stroke-width:.9;stroke-dasharray:5 5}.rwy-mark{fill:#FAF8F2}
.taxi{fill:none;stroke:#D2CEC6;stroke-width:2.2;stroke-linecap:round}
.plane{fill:none;stroke:#FFFFFF;stroke-width:1.15;stroke-linecap:round}.plane.thin{stroke-width:.8}
.glasst{fill:#7E9A9A}.glassl{fill:#6D8A8B}.glassr{fill:#5E7B7C}
.mast{stroke:var(--w-r);stroke-width:1.6}
.tgt{fill:#E6E8E8}.tgl{fill:#D0D4D5}.tgr{fill:#BCC1C3}.tg-line{stroke:#AEB3B6;stroke-width:.35}.mast-tip{stroke:#C98B6B;stroke-width:1.6}
.pitch{fill:#B7CF9E}.pline{stroke:#F4F8EE;stroke-width:.55}.pline2{stroke:var(--w-r);stroke-width:1.2}
.win{fill:#F6FBF0}
.wa{fill:var(--water);stroke:var(--water);stroke-width:.8}
.pk{fill:var(--park);stroke:var(--park);stroke-width:.8}
.fo{fill:var(--forest);stroke:var(--forest);stroke-width:.8}
.f1{fill:var(--field-1)}.f2{fill:var(--field-2)}.f3{fill:var(--field-3)}.f4{fill:var(--field-4)}
.t1{fill:var(--tree-1)}.t2{fill:var(--tree-2)}.t3{fill:var(--tree-3)}
.shadow{fill:#000;opacity:.06}

/* Aufbau-Animation: Häuser wachsen aus dem Modell */
.b{transform-box:fill-box;transform-origin:50% 100%;animation:rise .9s cubic-bezier(.2,.75,.25,1) both}
@keyframes rise{from{transform:scaleY(.02);opacity:0}to{transform:none;opacity:1}}
.x{transform-box:fill-box;transform-origin:50% 100%;animation:grow 1.1s cubic-bezier(.2,.75,.25,1) both}
@keyframes grow{from{transform:scaleY(.02);opacity:0}to{transform:none;opacity:1}}
.settled .b,.settled .x{animation:none}
.settled .x{transition:transform .7s cubic-bezier(.2,.75,.25,1),opacity .5s}
.settled .pot.before .x{transform:scaleY(.02);opacity:0}
.settled .b{transition:opacity .4s}
.settled.focus .b:not(.active){opacity:.55}
.pot{cursor:pointer}

/* Beschriftung und Marker (HTML über der Karte, damit sie auf dem Handy lesbar bleiben) */
.lbl{position:absolute;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;font:500 10.5px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 0 3px var(--paper),0 0 6px var(--paper),0 0 10px var(--paper);opacity:0;animation:lbl .8s ease 1.6s both}
.lbl.water{font:italic 400 12.5px var(--f-text);letter-spacing:.01em;text-transform:none;color:#4F7486}
.lbl.forest{font:italic 400 12.5px var(--f-text);letter-spacing:.01em;text-transform:none;color:#56795F}
.lbl.poi{font:italic 400 11.5px var(--f-text);letter-spacing:.02em;text-transform:none;color:var(--ink-2)}
.lbl.town{color:var(--ink-3);font-size:9.5px}
@keyframes lbl{to{opacity:1}}
.mk{position:absolute;width:40px;height:50px;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;padding-top:9px;opacity:0;animation:lbl .5s ease both}
.mk::after{content:"";width:1.5px;flex:1;margin-top:3px;background:var(--green);opacity:.8}
.mk.on::after{background:var(--ink)}
.mk i{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font:500 11px/22px var(--f-text);font-style:normal;text-align:center;box-shadow:0 0 0 3px rgba(255,255,255,.9);position:relative;transition:transform .2s}
.mk i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green);animation:pulse 2.6s ease-out infinite;animation-delay:inherit}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
.mk:hover i,.mk:focus-visible i,.mk.on i{transform:scale(1.18)}
.mk.on i{background:var(--ink)}
.mk.on i::after{border-color:var(--ink)}
.mk:focus-visible{outline:none}
.mk:focus-visible i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}

.legend{font:400 .72rem var(--f-text);color:var(--ink-3);text-align:right}
.compass{position:absolute;right:9%;bottom:24%;font:500 .72rem var(--f-text);color:var(--ink-3);text-align:center;line-height:1.1;opacity:0;animation:lbl .8s ease 1.6s both}
svg#city{display:block;width:100%;height:auto;overflow:visible}
@media (prefers-reduced-motion:reduce){
  .b,.x,.lbl,.mk,.compass{animation:none!important;opacity:1}
  .mk i::after{display:none}
}

/* Zwangsversteigerungen (Prototyp): orange Zahl-Cluster, Beispiel-Pins solange ausgeblendet */
:root{--zvg:#CC7322;--zvg-2:#A95A14}
#overlay.zvg-on .mk{visibility:hidden}
.zc{position:absolute;width:max(36px,calc(var(--s,28px) + 10px));height:max(36px,calc(var(--s,28px) + 10px));transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer;animation:zin .5s cubic-bezier(.2,.75,.25,1) both;-webkit-tap-highlight-color:transparent}
.zc i{width:var(--s,28px);height:var(--s,28px);border-radius:50%;background:var(--zvg);color:#fff;font:700 12.5px/var(--s,28px) var(--f-text);font-style:normal;text-align:center;letter-spacing:.01em;box-shadow:0 0 0 2.5px rgba(255,255,255,.95),0 0 0 7px rgba(204,115,34,.2),0 4px 10px -2px rgba(80,40,0,.35);transition:transform .2s,background .2s}
.zc:hover i,.zc:focus-visible i{transform:scale(1.12);background:var(--zvg-2)}
.zc.on i{background:var(--zvg-2);box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--ink),0 4px 10px -2px rgba(80,40,0,.35)}
.zc:focus-visible{outline:none}
@keyframes zin{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.zc{animation:none}}

/* Objekte für Investoren: orange Nummern-Marker, außerhalb des Ausschnitts am Kartenrand mit Pfeil nach außen */
.iv{position:absolute;z-index:3;width:40px;height:40px;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer;animation:zin .5s cubic-bezier(.2,.75,.25,1) both;-webkit-tap-highlight-color:transparent}
.iv i{position:relative;width:26px;height:26px;border-radius:50%;background:var(--zvg);color:#fff;font:700 12.5px/26px var(--f-text);font-style:normal;text-align:center;box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--zvg-2),0 4px 10px -2px rgba(80,40,0,.4);transition:transform .2s,background .2s}
.iv i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--zvg);animation:pulse 2.6s ease-out 2s infinite;opacity:0}
.iv .chev{display:none;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a,0deg)) translateX(20px)}
.iv .chev::before{content:"";position:absolute;left:-3px;top:-5px;border-left:7px solid var(--zvg);border-top:5px solid transparent;border-bottom:5px solid transparent}
.iv.edge .chev{display:block}
.iv .km{position:absolute;left:50%;top:calc(100% - 3px);transform:translateX(-50%);white-space:nowrap;font:600 10.5px/1.2 var(--f-text);letter-spacing:.02em;color:var(--zvg-2);text-shadow:0 0 3px var(--paper),0 0 6px var(--paper),0 0 10px var(--paper);pointer-events:none}
.iv:hover i,.iv:focus-visible i,.iv.hl i{transform:scale(1.15);background:var(--zvg-2)}
.iv.on i{background:var(--zvg-2);box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--ink),0 4px 10px -2px rgba(80,40,0,.35)}
.iv.on i::after{display:none}
.iv:focus-visible{outline:none}
.iv:focus-visible i{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--ink)}
@media (prefers-reduced-motion:reduce){.iv{animation:none}.iv i::after{display:none}}