/* EnSpector · Entwurf 2026-10 · Ergänzungen für die App-Unterseiten
   (funktionen, grundriss-app, ergebnisse, neu, einblicke). Nach stil.css einbinden.
   Nur Bausteine, die stil.css nicht hat; Werte aus den Variablen von stil.css. */

/* Gerät mit Bildunterschrift: äußere figure ohne Browser-Rand, Rahmen sitzt in .geraet-bild */
.geraet-figur{margin:0}
.geraet-figur.schmal{max-width:360px}

/* Zwei Spalten im 12er-Raster: Text links, Inhalt rechts */
.z-text{grid-column:1/span 4}
.z-inhalt{grid-column:6/span 7}
@media (max-width:980px){.z-text,.z-inhalt{grid-column:1/-1}.z-inhalt{margin-top:40px}}

/* Galerie der App-Ansichten: je Arbeitsschritt eine Zeile, Text links, Ansichten rechts */
.galerie{display:grid;gap:clamp(64px,8vw,120px)}
.g-schritt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);align-items:start;
  border-top:1px solid var(--linie);padding-top:clamp(28px,3.5vw,44px)}
.g-text{grid-column:1/span 3;position:sticky;top:calc(var(--kopf-h) + 28px)}
.g-text .nr{display:block;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.06em;color:var(--mark);margin-bottom:14px}
.g-text h2{margin-bottom:12px}
.g-text p{color:var(--fg-2);font-size:.98rem}
.g-bilder{grid-column:5/span 8;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px var(--spalt);align-items:start}
@media (max-width:860px){
  .g-text,.g-bilder{grid-column:1/-1}
  .g-text{position:static;margin-bottom:28px}
  .g-bilder{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Gebäudemodell (IFC) zum Drehen: helle Planfläche mit klaren Kanten */
.stage{position:relative;height:clamp(400px,62vh,660px);background:radial-gradient(ellipse at 50% 40%,var(--weiss),var(--papier-2));
  border:1px solid rgba(163,183,199,.22);color:var(--tinte);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden;
  --grid3d:#7d93a6}
.stage.dragging{cursor:grabbing}
.stage canvas{width:100%;height:100%;display:block}
.stage .fallback{position:absolute;inset:12% 10%}
.stage .fallback svg{width:100%;height:100%}
.stage .p-wall,.stage .p-wall-in{fill:var(--tinte)}
.stage .p-room{fill:var(--weiss)}
.stage .p-F{fill:var(--weiss);stroke:var(--blau);stroke-width:1.2}
.stage .p-T{fill:var(--weiss)}
.stage .p-name,.stage .p-area,.stage .p-dim{text-anchor:middle;fill:var(--tinte);font-family:var(--f-text);font-size:11px}
.stage .p-name{font-weight:600}
.stage .p-area,.stage .p-dim{font-family:var(--f-mono);font-size:9px;fill:var(--tinte-2)}
.tags{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;transform:translate(-50%,-50%);text-align:center;font-family:var(--f-mono);font-size:.72rem;line-height:1.25;color:var(--tinte-2);white-space:nowrap;transition:opacity .4s}
.tag b{display:block;font-family:var(--f-text);font-size:.86rem;font-weight:600;color:var(--tinte)}
.tip{position:absolute;pointer-events:none;background:var(--nacht);color:var(--hell);font-family:var(--f-mono);font-size:.74rem;padding:.5em .7em;border-radius:var(--r);white-space:nowrap;transform:translate(14px,14px);opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip b{display:block;font-family:var(--f-text);font-weight:600;font-size:.85rem}
.stage-cap{position:absolute;top:14px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-2)}
.hud{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-end;pointer-events:none}
.hud>*{pointer-events:auto}
.seg{display:inline-flex;flex-wrap:wrap;gap:0;background:var(--weiss);border:1px solid rgba(11,29,44,.18);border-radius:var(--r)}
.seg button{border:0;background:transparent;cursor:pointer;min-height:38px;padding:0 14px;font-size:.86rem;font-weight:500;color:var(--tinte-2)}
.seg button+button{border-left:1px solid rgba(11,29,44,.12)}
.seg button[aria-pressed="true"]{background:var(--nacht);color:#fff}
.seg.layers button[aria-pressed="true"]{background:var(--akz-t);color:#fff}
.seg button:focus-visible{outline:2px solid var(--akz-t);outline-offset:-2px}
.stage-hinweis{margin-top:16px;font-size:.92rem;color:var(--fg-3);max-width:46em}
@media (max-width:640px){.stage{height:440px}.seg button{padding:0 10px;font-size:.8rem}}