.ws-person, .ws-square-entry, .ws-exit, .ws-buy, .ws-visit { font: 600 14px var(--font, system-ui); cursor: pointer; }
.ws-person { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 52px; height: 56px;
  display: grid; place-items: center; z-index: 34; border: 1px solid #e1e6ed; border-radius: 12px;
  color: #e65435; background: #fff; box-shadow: 0 5px 20px #13203422; }
.ws-person[aria-pressed=true] { color: #fff; background: #d83c2c; border-color: #d83c2c; }
.ws-person:disabled { opacity: .45; cursor: default; }
.ws-square-entry { position: fixed; right: 24px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 34;
  background: #182538; color: #fff; border: 1px solid #344257; border-radius: 10px; padding: 12px 16px; min-height: 44px; box-shadow: 0 5px 20px #13203422; }
.ws-square-entry:disabled { opacity: .45; cursor: default; }
.ws-walk-bar { position: fixed; top: calc(var(--top, 76px) + 16px); left: 20px; right: 20px; z-index: 34;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px;
  max-width: 660px; border: 1px solid #e1e6ed; border-radius: 12px; background: #fffffff2; box-shadow: 0 5px 20px #13203422; }
.ws-walk-bar[hidden] { display: none; }
.ws-walk-message { color: #26354a; font: 500 14px var(--font, system-ui); }
.ws-exit { flex-shrink: 0; min-height: 44px; border: 0; border-radius: 8px; padding: 10px 14px; background: #182538; color: white; }
.ws-selecting .hero, .ws-selecting .district-panel, .ws-selecting .ticker, .ws-selecting .district-bar,
.ws-walking .hero, .ws-walking .district-panel, .ws-walking .ticker, .ws-walking .district-bar,
.ws-walking .viewport-tools, .ws-selecting .viewport-tools, .ws-walking .hint-bar,
.ws-walking .tooltip, .ws-selecting .tooltip, .ws-walking .ws-square-entry { display: none !important; }
.ws-selecting #city { cursor: crosshair; }
.ws-walking #city { cursor: grab; }
.ws-billboard-dialog { color: #182538; background: #fff; border: 1px solid #dfe5ed; border-radius: 18px;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; overflow: auto; box-shadow: 0 24px 80px #101b3844; font-family: var(--font, system-ui); }
.ws-billboard-dialog::backdrop { background: #0a162c88; }
.ws-billboard-dialog h2 { padding-right: 18px; margin: 10px 0 12px; font-size: 28px; overflow-wrap: anywhere; }
.ws-dialog-close { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; background: #f0f3f7; border: 0; border-radius: 50%; font-size: 26px; cursor: pointer; }
.ws-eyebrow { color: #c53827; font-size: 12px; letter-spacing: .09em; font-weight: 700; }
.ws-billboard-detail { color: #566579; font-size: 16px; line-height: 1.5; }
.ws-billboard-price { font-size: 28px; font-weight: 700; margin-top: 18px; }
.ws-buy, .ws-visit { display: block; width: 100%; margin-top: 20px; padding: 13px 18px; border: 0; border-radius: 10px; background: #d83c2c; color: #fff; text-align: center; text-decoration: none; }
.ws-buy:disabled { opacity: .6; cursor: default; }
.ws-billboard-feedback { color: #a52c20; font-size: 14px; margin-top: 12px; }
@media (max-width: 760px) {
  .ws-person { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* Clear of the value board at the bottom of the phone screen. --board-h is measured in main.js;
     the fallback keeps the button usable if that ever fails to run. In street view the board is
     hidden anyway and the rule below puts the button back in the corner. */
  body:not(.ws-walking):not(.ws-selecting) .ws-person {
    bottom: calc(var(--board-h, 200px) + 42px + env(safe-area-inset-bottom));
  }
  .ws-square-entry { right: 78px; bottom: calc(84px + env(safe-area-inset-bottom)); min-height: 56px; }
  /* Keep the new entry controls separate from the existing district panel. */
  body:not(.ws-walking):not(.ws-selecting) .district-panel { bottom: calc(152px + env(safe-area-inset-bottom)); max-height: 23dvh; }
  /* Clear of the legal strip at the very bottom, which is now the last thing on the phone screen. */
  .ws-walking .ws-person, .ws-selecting .ws-person { bottom: calc(44px + env(safe-area-inset-bottom)); }
  .ws-walk-bar { left: 12px; right: 12px; top: calc(var(--top, 62px) + 10px); padding: 10px; gap: 8px; }
  .ws-walk-message { font-size: 13px; }
  .ws-exit { padding-inline: 10px; font-size: 13px; }
}
@media (max-height: 540px) and (orientation: landscape) { .ws-walk-message { max-width: 280px; } }


/* ---- house adjustments (Max, 12.9.2026: "so dass man es auf jeden Fall sieht") ----
   The delivered button was a plain 52px icon tile. On a busy map that reads as decoration, so it
   carries its own label and sits on the brand colour like every other action on the page. */
.ws-person { width: auto; height: auto; min-height: 56px; padding: 9px 14px 8px;
  grid-auto-flow: row; gap: 1px; border: 0; border-radius: 14px;
  color: #fff; background: var(--accent, #d83c2c); box-shadow: 0 8px 24px rgba(16, 20, 34, .28); }
.ws-person::after { content: 'Street view'; font: 700 11px var(--font, system-ui); letter-spacing: .02em; }
.ws-person[aria-pressed=true] { background: var(--ink, #182031); }
.ws-person[aria-pressed=true]::after { content: 'Cancel'; }
@media (max-width: 760px) {
  /* A fixed element is positioned against the LARGE viewport (100vh), but a phone browser draws its
     address bar over the bottom of it. At bottom:16px the button therefore sat behind Safari's
     toolbar and was invisible on a real iPhone, while looking perfectly placed in any desktop test.
     100dvh is the viewport as it currently is, toolbar included, so their difference is exactly how
     much the browser is covering. Zero on desktop, so the same rule works everywhere. */
  .ws-person,
  .ws-walking .ws-person,
  .ws-selecting .ws-person {
    right: 14px;
    bottom: calc(100vh - 100dvh + 16px + env(safe-area-inset-bottom));
  }
  /* Those two rules referred to panels this site no longer shows on a phone. */
  body:not(.ws-walking):not(.ws-selecting) .district-panel { bottom: auto; max-height: none; }
}

/* While the consent banner is up on a phone it covers the corner the street-view button lives in;
   a half-hidden button looks broken, so the button waits until the visitor has decided. */
@media (max-width: 760px) {
  body.consent-open .ws-person, body.consent-open .ws-square-entry { visibility: hidden; }
}