/* Die gezeichnete Ansicht des Lageplans (templates/baukasten/_lageplan_3d.html, static/plan/lage3d.js).
   Farben nur aus Tokens (_journal_stil.html, plan.css). Handy 390 px zuerst, Tippziele >= 44 px.

   --px kommt aus lage3d.js: CSS-Pixel je Bildpunkt des Originals. Alles andere rechnet daraus,
   damit Bild und Beschriftung in jeder Grösse zusammenpassen. Der Vorgabewert traegt die Ansicht,
   bis der erste ResizeObserver gelaufen ist. */
.lage3d-schalter{display:flex;justify-content:center;gap:6px;margin:0 0 10px}
.lage3d-schalter .j-pille,.lage3d-knoepfe .j-pille{min-height:44px;min-width:44px;justify-content:center}
.lage3d-schalter [aria-pressed="true"]{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.lage3d-feld[hidden],.lage3d-liste[hidden],.lage3d-schalter[hidden]{display:none}

.lage3d-plan{--px:.2;margin:0}
.lage3d-fenster{position:relative;overflow:hidden;width:100%;
  height:calc(var(--px) * var(--aus-h) * 1px);
  border:1px solid var(--linie2);border-radius:6px;background:var(--papier)}
.lage3d-fenster::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--gelb);z-index:3}
.lage3d-welt{position:absolute;
  left:calc(var(--px) * var(--aus-x) * -1px);
  top:calc(var(--px) * var(--aus-y) * -1px);
  width:calc(var(--px) * var(--welt-b) * 1px);
  height:calc(var(--px) * var(--welt-h) * 1px)}
.lage3d-welt picture,.lage3d-welt img{display:block;width:100%;height:auto}

/* Das Textband deckt das gezeichnete ab: Lage = Mitte des gemessenen Bandes, Mindestmass = dessen
   Laenge und Dicke, Neigung = dessen Neigung. Der Text darf es groesser machen (laengere Sprache),
   nie kleiner.

   🔴 KEINE Mindestschrift. Eine Untergrenze klang gut und war falsch: im ganzen Plan bei 390 px
   schoben sich die Baender dann uebereinander (gemessen 22.09.2026, Bild nachher-ganz-390). Ohne
   sie schrumpft die Beschriftung mit der Zeichnung, bleibt an ihrem Platz und deckt das gezeichnete
   Band weiter ab — lesbar wird der ganze Plan ueber „Ganzer Plan“, nicht ueber groessere Schrift. */
.lage3d-band{position:absolute;z-index:2;
  left:calc(var(--px) * var(--x) * 1px);
  top:calc(var(--px) * var(--y) * 1px);
  min-width:calc(var(--px) * var(--l) * 1px);
  min-height:calc(var(--px) * var(--d) * 1px);
  transform:translate(-50%,-50%) rotate(var(--dreh));
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:0 .5em;white-space:nowrap;
  background:var(--gelb);color:#141414;
  font-family:var(--sans);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:calc(var(--px) * var(--schrift) * 1px);
  line-height:1.1;box-shadow:0 1px 0 rgba(0,0,0,.18)}

.lage3d-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 4px}
.lage3d-quelle{text-align:center;margin:8px auto 0;max-width:34em;text-transform:none;letter-spacing:0}
.lage3d-liste{margin:14px auto 0;max-width:420px}
.lage3d-liste > p{text-align:center;margin:0 0 4px}
.lage3d-liste ul{list-style:none;margin:0;padding:0}
.lage3d-liste li{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--linie)}
.lage3d-liste .zahl{font-family:var(--sans);font-size:12px;color:var(--tinte)}