/* =============================================================================
   GEBACKENE LADENFRONTEN
   Die Läden stecken als Geometrie im Karten-SVG (echte Projektion).
   Farben erben --accent über data-cat; die Choreografie feuert, sobald
   data-zoom-cat am Kartencontainer die Kategorie nennt.
   ========================================================================== */
.shop[data-cat="friseur"]    { --accent: var(--c-friseur, var(--friseur, #b82e38)); }
.shop[data-cat="restaurant"] { --accent: var(--c-restaurant, var(--restaurant, #c66600)); }
.shop[data-cat="cafe"]       { --accent: var(--c-cafe); }
.shop[data-cat="gym"]        { --accent: var(--c-gym); }
.shop[data-cat="fotografie"] { --accent: var(--c-fotografie); }
.shop[data-cat="mode"]       { --accent: var(--c-mode); }
.shop[data-cat="immobilien"] { --accent: var(--c-immobilien, var(--immobilien, #b58b14)); }
.shop[data-cat="agentur"]    { --accent: var(--c-agentur); }
.shop[data-cat="gastgeber"]  { --accent: var(--c-gastgeber, var(--gastgeber, #188a43)); }

/* Fassade — sie gehört zum Haus und ist immer da. Nur Markise, Schild und
   Requisiten warten auf den Zoom. */
.shop .shop-walk    { fill: #d9d9d3; }
.shop .shop-step    { fill: #c9c9c2; }
.shop .shop-glass   { fill: color-mix(in srgb, var(--accent) 26%, #1b1f24); }
.shop .shop-refl    { fill: #fff; opacity: .12; }
.shop .shop-matte   { fill: color-mix(in srgb, var(--accent) 40%, #3a3a34); }
.shop .shop-kasten2 { fill: #6d6d64; }
.shop .shop-blumen  { fill: #85857d; }
.shop .shop-upglass { fill: color-mix(in srgb, var(--accent) 26%, #2b2d32);
                      stroke: color-mix(in srgb, var(--accent) 25%, #fff);
                      stroke-width: .3; opacity: .82; }
.shop .shop-frame   { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, #fff);
                      stroke-width: .22; opacity: .55; }
.shop .shop-door    { fill: color-mix(in srgb, var(--accent) 45%, #000); }
.shop .shop-handle  { fill: none; stroke: #e8e8e2; stroke-width: .5;
                      stroke-linecap: round; }
.shop .shop-fascia  { fill: color-mix(in srgb, var(--accent) 62%, #0d0d0c); }
.shop .shop-awntop  { fill: color-mix(in srgb, var(--accent) 24%, #fff);
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-awn-a   { fill: var(--accent);
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-awn-b   { fill: #f6f6f2;
                      stroke: color-mix(in srgb, var(--accent) 55%, #000); stroke-width: .5; }
.shop .shop-sign    { font-family: var(--font-mono, var(--mono, monospace)); font-weight: 700;
                      letter-spacing: .07em; fill: #fbfbf9; }
.shop .shop-boxside { fill: color-mix(in srgb, var(--accent) 40%, #77776f); }
.shop .shop-boxtop  { fill: color-mix(in srgb, var(--accent) 18%, #f2f2ee); }
.shop .shop-proptop { fill: #f4f4ef; stroke: #6d6d65; stroke-width: .2; }
.shop .shop-propline{ fill: none; stroke: #7c7c74; stroke-width: .35; stroke-linecap: round; }
.shop .shop-chair-s { fill: #7f7f77; }
.shop .shop-chair-t { fill: #a3a39a; }
.shop .shop-chair-l { fill: #8e8e85; }
.shop .shop-schirm-a{ fill: var(--accent); stroke: color-mix(in srgb, var(--accent) 60%, #000);
                      stroke-width: .18; }
.shop .shop-schirm-b{ fill: #f6f6f2; stroke: color-mix(in srgb, var(--accent) 60%, #000);
                      stroke-width: .18; }
.shop .shop-kuebel-s{ fill: #5d5d56; }
.shop .shop-kuebel-t{ fill: #77776e; }
.shop .shop-gruen   { fill: #77796e; stroke: #4c5c40; stroke-width: .2; }
.shop .shop-board   { fill: #74746b; stroke: #4a4a43; stroke-width: .18; }
.shop .shop-boardtext { fill: #e8e8e0; opacity: .8; }
.shop .shop-pole    { fill: #f4f4ef; stroke: #55554f; stroke-width: .2; }
.shop .shop-polewendel { fill: none; stroke: var(--accent); stroke-width: .34;
                      stroke-dasharray: 1.6 1.6; }
.shop .shop-case-s  { fill: color-mix(in srgb, var(--accent) 45%, #000); }
.shop .shop-case-t  { fill: color-mix(in srgb, var(--accent) 60%, #000); }
.shop .shop-kastenrahmen { fill: #23252a; stroke: #f2f2ee; stroke-width: .22; }
.shop .shop-expose  { fill: #fbfbf6; }
.shop .shop-icon    { fill: none; stroke: #fbfbf9; stroke-width: .7; stroke-linecap: round; }
.shop .shop-iconb   { fill: #fbfbf9; }
.shop .shop-arm     { fill: none; stroke: #2c2c28; stroke-width: .5; stroke-linecap: round; }
.shop .shop-plate   { fill: color-mix(in srgb, var(--accent) 70%, #0d0d0c);
                      stroke: #f2f2ee; stroke-width: .3; }
.shop .shop-person-b{ fill: #454852; }
.shop .shop-person-k{ fill: #8b8981; }
.shop .shop-person-s{ fill: #000; opacity: .12; }
/* Lichtschein: bei Tag gibt es keinen, nachts trägt er den halben Zauber */
.shop .shop-schein  { fill: #ffd894; opacity: 0; }
.map.is-night .shop .shop-schein { opacity: .16; }
.shop .shop-steam   { fill: none; stroke: color-mix(in srgb, var(--accent) 30%, #8b8b85);
                      stroke-width: .9; stroke-linecap: round; }

/* Dampf, Blitz und Bildschirm laufen als SMIL im SVG (siehe Generator).
   Eine CSS-Animation würde den Knoten in eine eigene Compositing-Ebene
   heben — und die rastert Chrome beim Zuschnitt in der Auflösung der
   Totale, womit das ganze Modell matschig wird. */

/* Nachtmodus: Glas leuchtet warm, Trottoir wird dunkel */
.map.is-night .shop .shop-walk    { fill: #303038; }
.map.is-night .shop .shop-step    { fill: #3a3a42; }
.map.is-night .shop .shop-glass   { fill: color-mix(in srgb, var(--accent) 12%, #ffd894); }
.map.is-night .shop .shop-upglass { fill: color-mix(in srgb, var(--accent) 14%, #f6c96f); opacity: .7; }
.map.is-night .shop .shop-frame   { stroke: color-mix(in srgb, var(--accent) 55%, #2a2a26); }
.map.is-night .shop .shop-awntop  { fill: color-mix(in srgb, var(--accent) 40%, #3a3a40); }
.map.is-night .shop .shop-awn-b   { fill: #cfcfc8; }
.map.is-night .shop .shop-proptop { fill: #45454a; }
.map.is-night .shop .shop-schirm-b { fill: #cfcfc8; }
.map.is-night .shop .shop-gruen    { fill: #3f4a36; }
.map.is-night .shop .shop-blumen   { fill: #46553a; }
.map.is-night .shop .shop-kasten2  { fill: #33333a; }
.map.is-night .shop .shop-refl     { opacity: .05; }
.map.is-night .shop .shop-matte    { fill: #2f2f36; }
.map.is-night .shop .shop-kuebel-s { fill: #2e2e34; }
.map.is-night .shop .shop-kuebel-t { fill: #3c3c42; }
.map.is-night .shop .shop-chair-s  { fill: #3a3a40; }
.map.is-night .shop .shop-chair-t  { fill: #4a4a50; }
.map.is-night .shop .shop-chair-l  { fill: #424248; }
.map.is-night .shop .shop-person-b { fill: #6a6e78; }
.map.is-night .shop .shop-person-k { fill: #b09a86; }
.map.is-night .shop .shop-person-s { opacity: 0; }
.map.is-night .shop .shop-pole     { fill: #d8d8d0; }
.map.is-night .shop .shop-expose   { fill: #ffe9a8; }
.map.is-night .shop .shop-boxtop  { fill: color-mix(in srgb, var(--accent) 30%, #4a4a50); }

/* Der Dunstverlauf über der Ferne ist für die Totale gedacht. Steht man
   beim Zoom mitten im Quartier, nimmt er dem Modell nur die Zeichnung. */
.map__artwrap .dunst { transition: opacity .8s var(--ease); }
.map__artwrap[data-zoom-cat] .dunst { opacity: .18; }
@media (prefers-reduced-motion: reduce) {
  .map__artwrap .dunst { transition: none; }
}

/* Only the selected shop is painted. Entrances use SVG animation so the
   geometry stays sharp during a viewBox zoom. No CSS transform on the model. */
.shop { display: none; }
.shop.is-selected { display: inline; }
.shop .shop-person-arm { fill: none; stroke: #454852; stroke-width: .36; stroke-linecap: round; }
.shop .shop-cup { fill: #f4f4ef; stroke: #77776f; stroke-width: .16; }
.shop .shop-detail-line { fill: none; stroke: #e8e8e0; stroke-width: .22; stroke-linecap: round; }
.map.is-night .shop .shop-person-arm { stroke: #6a6e78; }

.shop .shop-interior { fill: #deded7; opacity: .32; }
.map.is-night .shop .shop-interior { fill: #303038; opacity: .6; }

/* Static city slices and live shop slices keep their SVG paint order;
   the marker buttons remain the only hit targets above the model. */
.map__depthlayer, .map__shoplayer, .map__vehiclelayer { pointer-events: none; }
/* Each SVG keeps a separate paint surface. Native motion in a tiny vehicle
   must not repaint the neighbouring static city surfaces. The transform
   itself stays unchanged; zoom still changes the vector viewBox. */
.map__art { contain: paint; will-change: transform; }