:root { --ink: #1d2140; --accent: #ff8a3d; --glass: rgba(255,255,255,.92); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #060a18; font-family: Fredoka, system-ui, sans-serif; color: var(--ink); -webkit-tap-highlight-color: transparent; }
#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#globe:active { cursor: grabbing; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #060a18; color: #cfd6ff; z-index: 20; transition: opacity .6s; }
#loading.done { opacity: 0; pointer-events: none; }
.spin { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
#top { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 5; }
.brand, .count { background: var(--glass); border-radius: 99px; padding: 8px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.brand b { font-size: 18px; font-weight: 600; }
.pinlogo { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7cc35a 0 30%, #2f7fd8 32%); }
.count b { font-size: 22px; font-weight: 700; } .count span { color: #6b7090; font-weight: 500; }
#searchbox { position: fixed; top: calc(max(14px, env(safe-area-inset-top)) + 62px); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); z-index: 6; }
#search { width: 100%; border: 0; border-radius: 16px; padding: 14px 18px; font: 500 17px Fredoka, sans-serif; background: var(--glass); box-shadow: 0 10px 30px rgba(0,0,0,.3); color: var(--ink); }
#search:focus { outline: 3px solid rgba(255,138,61,.6); }
#suggest { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--glass); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-height: 50vh; overflow: auto; }
#suggest:empty { display: none; }
#suggest li { padding: 9px 12px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
#suggest li:hover, #suggest li.on { background: rgba(255,138,61,.15); }
#suggest small { color: #6b7090; }
#card { position: fixed; left: 16px; bottom: 24px; width: min(360px, calc(100% - 32px)); background: #fff; border-radius: 22px; padding: 20px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.4); z-index: 7; animation: up .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }
#card small { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
#card h2 { margin: 4px 0 6px; font-size: 28px; font-weight: 600; word-break: break-word; }
#card p { margin: 3px 0; } .muted { color: #6b7090; }
.x { position: absolute; right: 12px; top: 10px; background: none; border: 0; font-size: 26px; color: #9aa0bf; cursor: pointer; }
.cbtns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cbtns button { border: 0; border-radius: 12px; padding: 10px 13px; font: 600 15px Fredoka, sans-serif; cursor: pointer; background: var(--accent); color: #fff; }
.cbtns button.ghost { background: #eef0f8; color: var(--ink); }
#cities { position: fixed; right: 16px; top: 90px; width: 220px; background: rgba(255,255,255,.88); border-radius: 18px; padding: 14px 16px; z-index: 4; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#cities h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
#cities ol { margin: 0; padding-left: 20px; } #cities li { padding: 3px 0; cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
#cities li:hover { color: var(--accent); } #cities li span { color: #6b7090; }
#tools { position: fixed; right: 16px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
#tools button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--glass); font-size: 20px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.3); color: var(--ink); }
#foot { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: 12px; font-family: Inter, sans-serif; pointer-events: none; white-space: nowrap; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.lbl { position: absolute; transform: translate(-50%, -100%); background: rgba(255,255,255,.9); color: var(--ink); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: auto; cursor: pointer; transition: opacity .2s; }
.lbl span { color: #ff8a3d; margin-left: 4px; }
.lbl.me { background: var(--accent); color: #fff; font-size: 15px; padding: 5px 14px; }
body.embed #searchbox, body.embed #cities, body.embed #tools, body.embed #foot, body.embed #card { display: none; }
@media (max-width: 760px) { #cities { display: none; } #foot { display: none; } .brand b { font-size: 15px; } #card { bottom: 16px; } }

#legal{position:fixed;right:76px;bottom:10px;font:500 12px Inter,system-ui,sans-serif;color:rgba(255,255,255,.75);z-index:8;pointer-events:auto}#legal a{color:inherit;text-decoration:none;padding:6px 2px;display:inline-block}#legal a:hover{text-decoration:underline}

.small{font-size:13px}#cStory[disabled]{opacity:.6;cursor:wait}
.rtabs{display:flex;gap:4px;margin:0 0 8px}.rtabs button{flex:1;border:0;border-radius:10px;padding:6px 8px;font:600 14px Fredoka,sans-serif;background:transparent;color:#6b7090;cursor:pointer}.rtabs button.on{background:#eef0f8;color:var(--ink)}
.lbl.country{background:rgba(21,25,54,.82);color:#fff;font-size:14px;padding:4px 12px}.lbl.country span{color:#ffd84a}

/* Erstbesucher: wie bekomme ich ein Haus? */
#intro{position:fixed;left:16px;bottom:24px;width:min(380px,calc(100% - 32px));background:#fff;border-radius:22px;padding:20px 22px 16px;box-shadow:0 20px 50px rgba(0,0,0,.4);z-index:7;animation:up .35s cubic-bezier(.2,1.4,.4,1)}
#intro small{color:var(--accent);font-weight:600;letter-spacing:.04em}
#intro h2{margin:6px 0 6px;font-size:26px;line-height:1.15;font-weight:700}
#intro p{margin:0 0 12px;color:#4a4f6e;line-height:1.4}
#intro h4{margin:14px 0 6px;font-size:14px;color:#6b7090;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
#iNew{list-style:none;margin:0;padding:0;max-height:180px;overflow:auto}
#iNew li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;cursor:pointer}
#iNew li:hover{background:rgba(255,138,61,.12)}#iNew li b{font-weight:600}#iNew li span{color:#6b7090;margin-left:auto;font-size:14px}
.plats{display:flex;gap:8px;flex-wrap:wrap}.plats a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-radius:12px;padding:9px 13px;font:600 15px Fredoka,sans-serif;background:var(--accent);color:#fff}
.plats a.tt{background:#111}.plats a.yt{background:#e62117}.plats a.fb{background:#1877f2}.plats a.th{background:#222}
#introOpen{position:fixed;left:16px;bottom:24px;z-index:6;border:0;border-radius:99px;padding:11px 18px;font:600 15px Fredoka,sans-serif;background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer}
.join{margin-top:14px;padding:12px 14px;border-radius:14px;background:#fff4ec;display:flex;flex-direction:column;gap:6px}.join span{color:#6b7090;font-size:14px}
img.flag{width:20px;height:15px;border-radius:3px;object-fit:cover;vertical-align:-2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lbl img.flag{width:16px;height:12px;margin-right:4px;vertical-align:-1px}
body.embed #intro,body.embed #introOpen{display:none}
@media (max-width:760px){#intro{bottom:16px;padding:16px 18px 12px}#intro h2{font-size:22px}#iNew{max-height:120px}}

/* Handy: kein großes Fenster beim Öffnen – nur der kleine Knopf; Fenster kompakt, ohne „Just moved in“ */
@media (max-width:760px){
  #intro{left:12px;right:12px;width:auto;bottom:calc(28px + env(safe-area-inset-bottom));max-height:46vh;overflow:auto;padding:14px 16px 12px}
  #intro h2{font-size:20px;margin:4px 0}#intro p{font-size:14px;margin:0 0 10px}
  #intro h4,#iNew{display:none}
  .plats a{padding:8px 11px;font-size:14px}
  #introOpen{left:12px;bottom:calc(30px + env(safe-area-inset-bottom));padding:10px 15px;font-size:14px}
  #legal{left:12px;right:auto;bottom:calc(6px + env(safe-area-inset-bottom));font-size:11px;z-index:4}
  #card{left:12px;right:12px;width:auto;bottom:calc(30px + env(safe-area-inset-bottom));max-height:60vh;overflow:auto}
  #tools{bottom:calc(30px + env(safe-area-inset-bottom))}
}
body.embed #legal{display:none}