/* hotspots.css – Living Maps V1 (Correction Sprint 2026-09-29): map-native interaktive Szenen-Objekte statt loser
   "Hotspot"-Knoepfe. Golden Rule: DAS ZIMMER SELBST IST DIE OBERFLAECHE -- ein Sofa ist klickbar, weil es sichtbar
   ein Sofa ist (css hier), nicht weil ein Icon in einer Ecke schwebt. Geometrie/Objektliste: js/map-objects.js.
   Rendern/Verdrahten (Klick -> Sitzplatz/Umkleide): js/app.js renderMapObjects()/onMapObjectClick().

   Aufbau je Objekt: EIN .mapobj-Element pro Objekt liefert das Aussehen (reines CSS, pointer-events: none -- Deko),
   plus EIN .seatzone-Button je Sitzplatz bzw. genau EIN .wardrobezone-Button fuers ganze Umkleide-Objekt (beide
   pointer-events: auto, unsichtbar bis Hover/Fokus -- die Klickflaeche liegt exakt auf der sichtbaren Moebel-Kunst,
   kein gestricheltes Icon-Rechteck mehr). Layer: VOR #crowd im Markup (siehe index.html) -> niedrigerer z-index als
   die Figuren, eine sitzende Figur erscheint optisch auf dem Sitzplatz. */

#mapObjects { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-furniture); }   /* SSSS Phase A Hierarchie, siehe css/style.css :root */
.mapobj { position: absolute; pointer-events: none; }

.seatzone, .wardrobezone {
  position: absolute; pointer-events: auto; cursor: pointer; border-radius: 50%;
  background: transparent; transition: background .15s ease, box-shadow .15s ease;
}
.seatzone { width: 4.2em; height: 2.6em; transform: translate(-50%, 0); border-radius: 1.4em; }
.seatzone:hover, .seatzone:focus-visible { background: #ffffff22; box-shadow: 0 0 0 .12em #ffffff44; }
.seatzone.taken { cursor: not-allowed; }
.seatzone.mine { background: #a56cff33; box-shadow: 0 0 0 .12em #a56cff88; }
.wardrobezone { pointer-events: auto; }
.wardrobezone:hover, .wardrobezone:focus-visible { filter: brightness(1.18); }

/* ============================================================================
   LOUNGE / BAR: Bartresen mit zwei Hockern, zweisitziges Sofa (wiederverwendet css/map-art.css --art-lounge),
   Garderobe als Kleiderschrank.
   ========================================================================== */
.mapobj.bar {
  border-radius: .5em .5em 0 0; background: linear-gradient(#6b4426, #3a2515); border-top: .3em solid #d99a52;
  box-shadow: 0 0 2em #d99a5240, inset 0 .3em .5em #ffffff14;
}
.mapobj.bar::before {                                  /* Flaschen-Regal ueber dem Tresen */
  content: ""; position: absolute; left: .6em; right: .6em; top: -4.4em; height: 3.8em;
  background: repeating-linear-gradient(90deg, #2a1a0e 0 .9em, transparent .9em 1.8em),
              linear-gradient(#3a2818cc, #1c1208cc);
  border-radius: .3em; box-shadow: inset 0 .2em .4em #00000066;
}
.mapobj.bar::after {                                    /* Flaschen-Silhouetten */
  content: ""; position: absolute; left: 1em; right: 1em; top: -4em; height: 2.6em;
  background: repeating-linear-gradient(90deg, #d99a52 0 .5em, transparent .5em .5em .1em, transparent .1em 1.6em);
  opacity: .8; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
.mapobj.roofsofa, .mapobj.sofa { background-image: var(--art-lounge); background-repeat: no-repeat; background-size: 100% 100%; }
.mapobj.roofsofa.right, .mapobj.sofa { transform: none; }
.mapobj.roofsofa.left { transform: scaleX(-1); }         /* Rooftop: linkes Sofa gespiegelt (wie bislang .lounge.l) */

/* Core Recovery (2026-10-01), CORE-03: Adrian lehnte den "aufgeklebtes Riesenrechteck"-Eindruck ab -- der Schrank
   stand bislang als reine, scharfkantige Box frei auf dem Boden. Ein breiterer, dunklerer "Wandnische"-Rahmen
   (zusaetzliche box-shadow-Ebene, GEOMETRIE/Klickflaeche bleibt exakt unveraendert) laesst ihn stattdessen in die
   Wand eingelassen wirken; abgerundete Oberkante + ein schmales Gesims druechen den reinen Kisten-Charakter. */
.mapobj.wardrobe {
  pointer-events: auto; cursor: pointer; border-radius: .7em .7em .15em .15em;
  background: linear-gradient(#4a3220, #241708);
  border: .12em solid #8a5a2c;
  box-shadow: 0 0 0 .45em #2a1d12b0, 0 .3em .9em #000000a0, inset 0 .3em .5em #ffffff10;
}

.mapobj.wardrobe::before {                              /* Tuer-Trennlinie + Griffe */
  content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%; width: .1em; background: #1c1108;
}
.mapobj.wardrobe::after {
  content: ""; position: absolute; left: 44%; top: 46%; width: .5em; height: .5em; border-radius: 50%;
  background: #d99a52; box-shadow: 3.2em 0 0 #d99a52; opacity: .85;
}

/* Product Reality Fix 01 (2026-10-01), P01: Adrian hat den grossen braunen Garderobenschrank live auf Rooftop/Cinema
   (inkl. der Dance-Performance, die auf Rooftop stattfindet) abgelehnt. Objekt/Position/Klickarchitektur in
   js/map-objects.js bleiben VOLLSTAENDIG bestehen (fuer spaeter) -- hier wird nur die Anzeige UND die unsichtbare
   Klickflaeche (.wardrobezone) auf genau diesen beiden Maps ausgeblendet, nicht geloescht. Comedy/Lounge/Arcade
   bleiben unveraendert (dort nicht beanstandet, nicht Teil dieses Auftrags). */
#scene[data-map="rooftop"] .mapobj.wardrobe, #scene[data-map="rooftop"] .wardrobezone,
#scene[data-map="cinema"] .mapobj.wardrobe, #scene[data-map="cinema"] .wardrobezone { display: none; }

/* ============================================================================
   COMEDY CLUB: kleine Tische mit zwei Stuehlen, Blick zur Buehne.
   ========================================================================== */
.mapobj.clubtable {
  border-radius: 50% / 30%; background: radial-gradient(60% 60% at 50% 30%, #6b4a2a, #3a2815 70%);
  border: .1em solid #8a5a2c88; box-shadow: 0 .3em .5em #0006;
}

/* ============================================================================
   CINEMA: echte Sitzreihe (Fortsetzung der bestehenden .cinema-seatrow-Kunst als klickbare Einzelplaetze).
   ========================================================================== */
.mapobj.cinemarow {
  background: repeating-linear-gradient(90deg, #05060a 0 1.6em, #12141c 1.6em 1.9em), linear-gradient(#242938, #0a0c14);
  border-radius: .3em .3em 0 0; border-top: .1em solid #3a4256; box-shadow: inset 0 .3em .5em #00000080, 0 -.3em 1em #7a8bb02a;
}
.mapobj.cinemarow::before {                              /* Gang-Beleuchtung am Sitzreihen-Fuss (typisches Kino-Detail) */
  content: ""; position: absolute; left: .3em; right: .3em; bottom: .4em; height: .3em; border-radius: .2em;
  background: repeating-linear-gradient(90deg, #ffd98a 0 .5em, transparent .5em 1.9em); opacity: .8; filter: drop-shadow(0 0 .3em #ffd98a88);
}

/* ============================================================================
   ARCADE: Sitzhocker vor einem Automaten, kleine Neon-Sitzbank.
   ========================================================================== */
.mapobj.arcadestool {
  border-radius: 50%; background: radial-gradient(60% 60% at 50% 35%, #ff2fb0, #2a1650 75%);
  box-shadow: 0 0 1em #ff2fb066;
}
.mapobj.arcadebench {
  border-radius: .6em; background: linear-gradient(#241a3a, #10091f); border: .1em solid #2be8ff77;
  box-shadow: 0 0 1.2em #2be8ff33;
}

/* Handy/Hochformat (SSSS Phase 11, 2026-09-30 -- echter Bug behoben): #mapObjects wurde hier bislang KOMPLETT
   ausgeblendet ("alles oder nichts"), obwohl die Garderobe und mindestens ein Sitzplatz auch auf schmalen
   Bildschirmen funktionieren koennen. js/app.js renderMapObjects() waehlt jetzt bei schmaler Szene nur noch einen
   Sitzplatz + die Garderobe aus (weniger Dichte, siehe dortiger Kommentar); hier wird nur noch sichergestellt, dass
   die Klickflaechen selbst bei kleiner werdender em-Basis (font-size: min(1cqw, 1.7778cqh), siehe css/scene.css)
   eine echte Mindestgroesse behalten (~44x44 CSS-Px, uebliche Touch-Ziel-Untergrenze) statt mit der Buehne beliebig
   zu schrumpfen. */
@container (max-width: 700px) or (max-aspect-ratio: 1/1) {
  .seatzone, .wardrobezone { min-width: 44px; min-height: 44px; }
  .mapobj.bar, .mapobj.sofa, .mapobj.roofsofa, .mapobj.clubtable, .mapobj.cinemarow, .mapobj.arcadebench { transform: scale(.82); transform-origin: bottom center; }
}