/* Try it yourself · paper stage, HORIZON for text and controls. E-143: two looks for the stage and its controls —
   Bright (HORIZON glass, default) and Cinema (dark glass), html[data-look] set by main.ts; the text below stays light. */
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url(../schriften/Archivo-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../schriften/InstrumentSans-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../schriften/InstrumentSans-700.woff2) format("woff2")}

:root{
  --navy:#0F2552;--ink:#33466B;--muted:#66779A;--line:#DCE7F4;--white:#FFFFFF;
  --accent:#1F6FEB;--accent-mid:#22C3E8;
  --grad:linear-gradient(90deg,#2EE6D0 0%,#22C3E8 45%,#1F6FEB 100%);
  --grad-button:linear-gradient(90deg,#1FB5E3,#1F6FEB);
  --shadow:0 1px 2px rgba(15,37,82,.06),0 10px 30px rgba(31,79,196,.10);
  --paper:#F7F5EF;
  --rand:clamp(16px,4vw,56px);
  /* E-143: the controls' glass, by look */
  --glas:rgba(255,255,255,.92);--glas-text:var(--navy);--glas-linie:var(--line);--leise:var(--ink);
  --wahl-bg:var(--white);--wahl-text:var(--navy);--wahl-an-bg:var(--navy);--wahl-an-text:#fff;--buehne-bg:var(--paper);
}
html[data-look="kino"]{
  --glas:rgba(12,18,32,.80);--glas-text:#EEF3FF;--glas-linie:rgba(238,243,255,.16);--leise:#B4C0DA;
  --wahl-bg:rgba(238,243,255,.07);--wahl-text:#EEF3FF;--wahl-an-bg:#EEF3FF;--wahl-an-text:var(--navy);--buehne-bg:#0B1220;
}
html[data-look="kino"] .buehne{--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 "Instrument Sans","Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
h1{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:700;color:var(--navy);letter-spacing:-.015em;line-height:1.1;margin:0 0 .5em;font-size:clamp(1.7rem,3.4vw,2.5rem)}
p{margin:0 0 .7em}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.kopf{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--rand);pointer-events:none}
.kopf>*{pointer-events:auto}
.marke{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 14px 4px 6px;border-radius:999px;background:var(--glas);box-shadow:var(--shadow);text-decoration:none;backdrop-filter:blur(6px)}
.marke svg{width:30px;height:30px}
.wortmarke{font:700 1rem/1 Archivo,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--glas-text)}
.kopf-rechts{display:flex;align-items:center;gap:8px}
.lookwahl{display:inline-flex;border-radius:999px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.look{min-width:44px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--glas-text);font:700 .85rem/1 "Instrument Sans",sans-serif;cursor:pointer}
.look[aria-pressed="true"]{background:var(--wahl-an-bg);color:var(--wahl-an-text)}
.vollbild{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:var(--glas);color:var(--glas-text);box-shadow:var(--shadow);cursor:pointer;backdrop-filter:blur(6px)}
.vollbild svg,.radknopf svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* E-146: house switch at the top centre (only in a build that carries the second house); below the head on phones */
.hauswahl{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:inline-flex;border-radius:999px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.haus{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;color:var(--glas-text);font:700 .85rem/1 "Instrument Sans",sans-serif;text-decoration:none;white-space:nowrap}
.haus[aria-current="page"]{background:var(--wahl-an-bg);color:var(--wahl-an-text)}
body.ohne-poster .poster{display:none}
/* phase 3: room labels in the exploded view (a dot on the room, the label above it) */
.raumschilder{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.raumschild{position:absolute;transform:translate(-50%,calc(-100% - 6px));padding:5px 10px;border-radius:12px;background:var(--glas);box-shadow:var(--shadow);color:var(--glas-text);font:700 .78rem/1.25 "Instrument Sans",sans-serif;white-space:nowrap;backdrop-filter:blur(6px)}
.raumschild small{display:block;font-weight:400;font-size:.7rem;color:var(--leise)}
.raumschild::after{content:"";position:absolute;left:50%;bottom:-8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--glas-text)}
@media (max-width:640px){.raumschild{font-size:.7rem;padding:4px 8px}.raumschild small{font-size:.64rem}}
/* E-146: the villa film's lightning — a white flash over the 3D view (opacity set per frame by main.ts) */
.blitz{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 55% 20%,#f4f8ff 0%,#dfe8ff 55%,#c9d6f2 100%);opacity:0}
@media (max-width:1100px){.hauswahl{top:64px}body.mit-hauswahl{--oben:120px}} /* rows and cards below the head start under the house switch */
.beispiel{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--glas);border:1px solid var(--glas-linie);color:var(--glas-text);font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow)}

.buehne{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--buehne-bg)}
/* E-143: Cinema's soft vignette (CSS only, no render pass) */
.buehne::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 95% at 55% 45%,transparent 52%,rgba(3,7,16,.55) 100%);opacity:0;transition:opacity .4s}
html[data-look="kino"] body.dreid-an .buehne::after{opacity:1}
.leinwand,.poster,.poster img{position:absolute;inset:0;width:100%;height:100%}
.poster img{object-fit:cover}
.leinwand{display:block;opacity:0;transition:opacity .5s;touch-action:none}
.leinwand:focus-visible{outline-offset:-4px;border-radius:0} /* Codex R3-2: the full-bleed 3D view shows its keyboard focus inside */
body.dreid-an .leinwand{opacity:1}
body.dreid-an .poster{opacity:0;transition:opacity .5s .3s}
body.weg-bild .leinwand{display:none}
body.geht .leinwand{cursor:grab}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:0;border-radius:999px;background:var(--grad-button);color:#fff;font:700 .95rem/1 "Instrument Sans",sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 6px 18px rgba(31,111,235,.25)}
.knopf.zweit{background:var(--white);color:var(--navy);border:1px solid var(--line);box-shadow:none}
.wahl{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 14px;border:1px solid var(--glas-linie);border-radius:999px;background:var(--wahl-bg);color:var(--wahl-text);font:700 .9rem/1 "Instrument Sans",sans-serif;cursor:pointer}
.wahl[aria-pressed="true"]{background:var(--wahl-an-bg);border-color:var(--wahl-an-bg);color:var(--wahl-an-text)}
.wahl:disabled{opacity:.45;cursor:default}

.schrittkarte{position:absolute;z-index:5;top:var(--oben,max(76px,9vh));left:calc(var(--rad-b,0px) + (100% - var(--rad-b,0px)) / 2);transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100% - var(--rad-b,0px) - 32px);padding:8px 8px 8px 20px;border-radius:999px;background:var(--glas);border:1px solid var(--glas-linie);box-shadow:var(--shadow);color:var(--glas-text);font-weight:700}
.schritt-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.gehleiste{position:absolute;z-index:5;left:calc(var(--rad-b,0px) + (100% - var(--rad-b,0px)) / 2);transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100% - var(--rad-b,0px) - 32px);padding:8px;border-radius:24px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(6px)}

/* ---- E-143 phase 1: one control place. A dial at the left edge from 641 px wide and 561 px high (outer ring: views,
   inner ring: time of day, centre: Start), else a bar at the bottom; a mode's extra row sits beside the dial, above the
   bar on phones and beside it on short landscape screens. Positions from a packing without overlaps (6 px gaps). ---- */
.leiste{position:absolute;z-index:5;color:var(--glas-text)}
.radknopf{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--glas-linie);border-radius:999px;background:var(--wahl-bg);color:var(--wahl-text);font:700 .66rem/1 "Instrument Sans",sans-serif;letter-spacing:.02em;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.radknopf:hover{border-color:var(--accent-mid)}
.radknopf[aria-pressed="true"],.radknopf[aria-expanded="true"]{background:var(--wahl-an-bg);border-color:var(--wahl-an-bg);color:var(--wahl-an-text)}
.radknopf.klein svg{width:19px;height:19px}
.radknopf:disabled{opacity:.38;cursor:default}.radknopf:disabled:hover{border-color:var(--glas-linie)}
/* the Build button keeps its place while the build runs (it is hidden then, the step card has Skip) */
.radknopf.abspielen[hidden]{display:inline-flex!important;visibility:hidden}
.kontext{position:absolute;z-index:6;display:flex;gap:6px;padding:6px;border-radius:22px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
@media (min-width:641px) and (min-height:561px){
  /* phase 3 rig (1000×600 with the house switch): the dial's centre stays low enough that its top button clears the
     collapsed facts card under the head (card bottom ≈ --oben + 44 px, top button 158 px above the centre) */
  .buehne{--rad-b:172px}
  .leiste{left:0;top:50%;width:172px;height:344px;transform:translateY(-50%);border-radius:0 172px 172px 0;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
  .rad-aussen,.rad-innen{display:contents}
  .radknopf{position:absolute;left:calc(var(--x) * 1px);top:calc(172px + var(--y) * 1px);transform:translate(-50%,-50%);width:44px;height:44px}
  .radknopf.zurueck{--x:32;--y:0;width:52px;height:52px}
  .rad-aussen .radknopf{width:62px;height:62px}
  /* phase 4: six outer buttons (Floors, Cut, X-ray, Build, Walk, Light) at 144 px every 30° (±15/45/75°), four inner at
     88 px at ±22.5°/±67.5°, Start at 30 px: no two button boxes overlap (borders included), all inside the 172 px dial */
  .geschossknopf{--x:37.3;--y:-139.1}.radknopf.schnittknopf{--x:101.8;--y:-101.8}.radknopf.roentgenknopf{--x:139.1;--y:-37.3}.radknopf.abspielen{--x:139.1;--y:37.3}.radknopf.gehen{--x:101.8;--y:101.8}.radknopf.lichtknopf{--x:37.3;--y:139.1}
  [data-zeitschnell="night"]{--x:33.7;--y:-81.3}[data-zeitschnell="morning"]{--x:81.3;--y:-33.7}[data-zeitschnell="noon"]{--x:81.3;--y:33.7}[data-zeitschnell="evening"]{--x:33.7;--y:81.3}
  .radknopf.zurueck{--x:30}
  .geschossfeld,.schnittfeld,.schichtfeld{left:calc(var(--rad-b) + 14px);top:50%;transform:translateY(-50%);flex-direction:column;align-items:stretch}
  .schichtfeld{display:grid;grid-template-columns:1fr;max-height:calc(100% - var(--oben,76px) - 24px);overflow:auto}
  @media (max-height:760px){.schichtfeld{grid-template-columns:1fr 1fr}}
  .schnittfeld{width:240px}
  .schnittfeld .schnittregler{flex:none;width:100%}
  .schnittfeld .gruppe{justify-content:center}
  .hilfeknopf{left:20px;top:calc(50% + 190px)}
}
@media (max-width:640px),(max-height:560px){
  .hilfeknopf{right:16px;top:var(--oben,max(76px,9vh))}
  .leiste{left:50%;bottom:max(16px,2.5vh);transform:translateX(-50%);display:flex;gap:2px;width:min(calc(100% - 24px),420px);padding:5px;border-radius:22px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(8px)}
  .rad-aussen{display:contents}.rad-innen{display:none}
  .radknopf{flex:1 1 0;height:54px;border-radius:17px;border-color:transparent;background:transparent}
  .geschossfeld,.schnittfeld,.schichtfeld{left:50%;transform:translateX(-50%);bottom:calc(max(16px,2.5vh) + var(--leiste-h,64px) + 10px);max-width:calc(100% - 24px)}
  /* phase 4: the layers as a row to swipe */
  .schichtfeld{width:calc(100% - 24px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .schichtfeld .wahl{flex:none;white-space:nowrap;padding:8px 12px;font-size:.84rem}
  .schnittfeld{width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
  .geschossfeld .wahl{padding:8px 11px;font-size:.84rem;white-space:nowrap}
}
@media (min-width:641px) and (max-height:560px){
  .leiste{left:16px;transform:none;width:360px}
  .geschossfeld,.schnittfeld{left:calc(16px + var(--leiste-b,360px) + 12px);transform:none;bottom:max(16px,2.5vh);max-width:calc(100% - var(--leiste-b,360px) - 40px)}
}
/* Codex P1-R2-4: too narrow for the row beside the bar (667×375 needs ~700 px) — it goes above the bar as on phones */
@media (min-width:641px) and (max-width:779px) and (max-height:560px){
  .geschossfeld,.schnittfeld{left:16px;bottom:calc(max(16px,2.5vh) + var(--leiste-h,64px) + 10px);max-width:calc(100% - 32px)}
}
.geschossfeld{overflow-x:auto}
/* phase 3: cut row — three directions, the slider, its metre value and a note */
.schnittfeld{align-items:center;gap:8px;padding:8px;color:var(--glas-text)}
.wahl.symbol{padding:0;width:44px}
.wahl.symbol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.schnittregler{flex:1 1 140px;min-width:120px;min-height:44px;margin:0;accent-color:var(--wahl-an-bg)}
.schnittwert{font:700 .9rem/1 "Instrument Sans",sans-serif;min-width:52px;text-align:right}
.schnitthinweis{flex-basis:100%;font-size:.76rem;color:var(--leise);text-align:center}
/* phase 3: facts card (top left under the head; a closed summary on phones) */
.fakten{position:absolute;z-index:6;left:16px;top:var(--oben,max(76px,9vh));max-width:min(300px,calc(100% - 32px));padding:10px 14px;border-radius:18px;background:var(--glas);box-shadow:var(--shadow);color:var(--glas-text);backdrop-filter:blur(6px)}
.fakten summary{min-height:24px;cursor:pointer;font:700 .74rem/1.4 "Instrument Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.fakten-liste{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 4px}
.fakten-liste div{display:flex;flex-direction:column}
.fakten-liste dt{order:2;font-size:.72rem;color:var(--leise)}
.fakten-liste dd{order:1;margin:0;font:700 1.35rem/1.1 Archivo,"Helvetica Neue",Arial,sans-serif;color:var(--glas-text)}
.fakten-zusatz{margin:4px 0 0;font-size:.78rem;color:var(--leise)}
/* Codex P3-R4-2: on the dial layout the card stands beside the dial (above it, an open card or the house switch pushed
   it into the dial's top buttons); an open row takes that place, so the card steps aside then */
@media (min-width:641px) and (min-height:561px){.fakten{top:var(--oben,max(76px,9vh));left:calc(var(--rad-b) + 16px);max-width:min(300px,calc(100% - var(--rad-b) - 32px))}}
.zeile-offen .fakten{display:none} /* rig 844×390: with the light row open on a phone the card covered the house */
/* rig 1024×600 (tablet): the floors or cut row beside the dial reaches down to the thumb stick; a row open while walking
   is a choice that ends the walk (a floor) or pauses it, so the stick steps aside meanwhile */
@media (min-width:641px) and (min-height:561px){.zeile-offen .knueppel{display:none!important}}
/* phase 3 rig: the facts card belongs to the calm outside view — not while walking or while the build card shows;
   on the bottom bar layout the help button also steps aside for the walk bar and an open row */
/* Codex P3-R2-2: plain classes, no relational selector (Safari 15.0–15.3 drops a whole selector list it cannot parse) */
body.geht .fakten{display:none}
body.baut .fakten{display:none}
@media (max-width:640px),(max-height:560px){body.geht .hilfeknopf,.feld-offen .hilfeknopf{display:none}}
.hilfeknopf{position:absolute;z-index:6;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--glas-linie);border-radius:50%;background:var(--glas);color:var(--glas-text);box-shadow:var(--shadow);font:700 1.1rem/1 "Instrument Sans",sans-serif;cursor:pointer}
.hilfe{position:absolute;z-index:30;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:12px;padding:24px;overflow-y:auto;overscroll-behavior:contain;background:rgba(6,12,24,.35);backdrop-filter:blur(2px)}
.hilfe-karte{width:min(300px,100%);padding:16px 18px;border-radius:18px;background:var(--glas);box-shadow:var(--shadow);color:var(--glas-text)}
.hilfe-karte h2{margin:0 0 6px;font:700 1rem/1.2 Archivo,"Helvetica Neue",Arial,sans-serif}
.hilfe-karte p{margin:0;font-size:.88rem;line-height:1.5}
.hilfe-zu{flex:0 0 160px;height:auto;align-self:center;margin:0 calc(50% - 80px)} /* its own centred row under the cards */
/* Codex P3-R2-3: on short screens the cards start at the top and the dialog scrolls (centred content would overflow both edges) */
@media (max-height:560px){.hilfe{align-content:flex-start;padding:16px}.hilfe-karte{width:min(260px,100%)}}
/* Codex R5-1: the walk bar and (phones) the step card sit above the lower bar at its measured height (--leiste-h, main.ts) */
.gehleiste{bottom:calc(max(16px,2.5vh) + var(--leiste-h,60px) + 16px)}
.gruppe{display:inline-flex;flex-wrap:wrap;gap:6px}
/* E-138: light and time panel - at the side from 641 px, above the lower bar on phones (--feld-h moves the step card up) */
/* review 8: under the head and above the bar (and the walk bar); while it is open the step card moves to the left */
.lichtfeld{position:absolute;z-index:6;right:16px;top:var(--oben,max(76px,9vh));width:min(320px,calc(100% - 32px));max-height:calc(100% - var(--oben,max(76px,9vh)) - max(16px,2.5vh) - var(--leiste-h,60px) - var(--geh-h,0px) - 16px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:20px;background:var(--glas);box-shadow:var(--shadow);backdrop-filter:blur(6px);color:var(--glas-text)}
.lichtfeld[hidden]{display:none}
.feldkopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:2px 4px 0;font:700 .82rem/1.2 "Instrument Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--leise)}
.uhrzeit,.lichtzustand{font:700 .95rem/1 "Instrument Sans",sans-serif;letter-spacing:0;text-transform:none;color:var(--glas-text)}
.zeitregler{width:100%;min-height:44px;margin:0;accent-color:var(--wahl-an-bg);cursor:pointer}
.feldhinweis{margin:2px 4px 0;font-size:.78rem;color:var(--leise)}
.lichtansage{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lichtfeld .gruppe{flex-wrap:nowrap}
@media (min-width:641px){.feld-offen .schrittkarte{left:calc(var(--rad-b,0px) + 16px);transform:none;max-width:calc(100% - var(--rad-b,0px) - 368px)}}
@media (min-width:641px) and (max-height:560px){.lichtfeld{gap:4px;padding:8px}.kopf-jahreszeit,.feldhinweis{display:none}}
.lichtfeld .wahl{flex:1 1 0;padding:8px 6px}
.gehhinweis{margin:0 6px;font-size:.82rem;color:var(--leise)}
.gehleiste .tuerknopf{background:var(--wahl-an-bg);border-color:var(--wahl-an-bg);color:var(--wahl-an-text)}
/* phase 2: thumb stick, touch screens only, while walking; bottom left above the bar (beside the dial from 641 px) */
.knueppel{display:none;position:absolute;z-index:6;left:calc(var(--rad-b,0px) + 20px);bottom:calc(max(16px,2.5vh) + var(--leiste-h,0px) + var(--geh-h,0px) + 20px);width:124px;height:124px;border-radius:50%;background:var(--glas);border:1px solid var(--glas-linie);box-shadow:var(--shadow);backdrop-filter:blur(6px);touch-action:none}
.knauf{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--wahl-an-bg);box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
@media (pointer:coarse){.gehhinweis{display:none}body.geht .knueppel{display:block}}
/* phones: the walk bar sits at the top, the light row above the bar — the stick stands above that row */
@media (max-width:640px){.knueppel{bottom:calc(max(16px,2.5vh) + var(--leiste-h,0px) + var(--feld-h,0px) + 20px)}}
/* Pixel 10a in landscape (852×381): stick, jump row and bar stacked on the left reached up into the logo; on short
   landscape screens the stick stands at the bottom right, beside the bar */
@media (min-width:641px) and (max-height:560px){.knueppel{left:auto;right:20px;bottom:calc(max(16px,2.5vh) + var(--feld-h,0px))}.feld-offen .knueppel{display:none!important}} /* (the light panel stands on the right there) */

.ladebalken{position:absolute;left:50%;bottom:calc(max(20px,3vh) + 14px);transform:translateX(-50%);display:none;align-items:center;gap:12px;padding:8px 16px;border-radius:999px;background:var(--glas);box-shadow:var(--shadow);font-size:.85rem;color:var(--glas-text);white-space:nowrap}
body.laedt .ladebalken{display:flex}
.ladespur{width:110px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.ladespur i{display:block;height:100%;width:0;background:var(--grad)}
.dreid{position:absolute;left:0;right:0;bottom:max(24px,4vh);display:flex;justify-content:center;margin:0}

.text{max-width:900px;padding:40px var(--rand) 8px}
.text::before{content:"";display:block;width:64px;height:4px;border-radius:4px;background:var(--grad);margin:0 0 14px}
.kicker{font:500 .74rem/1.5 "Instrument Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.fuss{padding:28px var(--rand) 40px;max-width:900px;font-size:.85rem;color:var(--muted)}
.attribution{color:var(--navy);text-decoration-color:var(--accent-mid)}
.rechtliches{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 12px}
.rechtliches a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.fuss-zeile a{display:inline-flex;align-items:center;min-height:44px}

@media (max-width:640px){
  .hilfeknopf{right:16px;top:var(--oben,max(76px,9vh))}
  .fakten{max-width:calc(100% - 92px);padding:8px 12px}
  .wortmarke{display:none}
  .marke{padding:4px 7px}
  .kopf{gap:8px}
  .kopf-rechts{gap:6px}
  .look{padding:0 10px;font-size:.8rem}
  .beispiel{padding:4px 10px;font-size:.72rem}
  .wahl{padding:8px 10px;font-size:.84rem}
  .gehleiste{bottom:auto;top:var(--oben,max(76px,9vh))}
  .schrittkarte{top:auto;bottom:calc(max(16px,2.5vh) + var(--leiste-h,96px) + var(--feld-h,0px) + 16px)}
  /* E-143 D1: on phones the light panel is one row above the bar to swipe through (times, slider, seasons, lights) */
  .lichtfeld{top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(max(16px,2.5vh) + var(--leiste-h,64px) + 10px);width:calc(100% - 24px);max-height:none;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:6px 8px;gap:10px;border-radius:22px}
  .lichtfeld>*{flex:0 0 auto;scroll-snap-align:start}
  .lichtfeld .feldkopf{flex-direction:column;align-items:flex-start;gap:3px;margin:0 2px;font-size:.66rem}
  .lichtfeld .zeitregler{width:150px}
  .feldhinweis{display:none}
}
@media (prefers-reduced-motion:reduce){.leinwand,.poster{transition:none!important}}

/* ---- phase 4: X-ray layers and the element label ---- */
/* Codex P4-R3-2: seven 44 px buttons do not fit the bar under 360 px (320 px phones): the bar scrolls sideways */
@media (max-width:359px){.leiste{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.leiste .radknopf{flex:0 0 46px}}
[data-schicht="rohbau"]{--farbe:#8c9bb0}[data-schicht="dach"]{--farbe:#c8644b}[data-schicht="oeffnungen"]{--farbe:#3aa6d9}[data-schicht="treppe"]{--farbe:#7a5cc8}
[data-schicht="ausbau"]{--farbe:#d9a441}[data-schicht="einrichtung"]{--farbe:#5fae6e}[data-schicht="technik"]{--farbe:#e0c341}[data-schicht="aussen"]{--farbe:#6f9a5a}
.wahl.schicht{display:inline-flex;align-items:center;gap:8px;justify-content:flex-start}
.wahl.schicht::before,.bauteilschild .gewerk::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--farbe,#8c9bb0);box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.bauteilschild{position:absolute;z-index:7;display:flex;flex-direction:column;gap:2px;max-width:240px;padding:8px 12px;border-radius:14px;background:var(--glas);border:1px solid var(--glas-linie);box-shadow:var(--shadow);color:var(--glas-text);font-size:.78rem;line-height:1.35;pointer-events:none;backdrop-filter:blur(6px)}
.bauteilschild strong{font:700 .9rem/1.25 Archivo,"Helvetica Neue",Arial,sans-serif}
.bauteilschild .gewerk{display:inline-flex;align-items:center;gap:6px;color:var(--leise)}

/* Coordinator 20.10.: short landscape phones (under 420 px high) — a compact head in one row (logo mark, house switch,
   look, full screen and the "Example" label stay visible, tap targets 44 px), and a flatter bar, so the house gets
   the height (on a real phone held sideways Chrome leaves about 326 px for the stage) */
@media (max-height:420px) and (min-width:560px){
  .kopf{padding:4px 12px;gap:8px}
  .marke{min-height:44px;min-width:44px;justify-content:center;padding:2px 8px 2px 4px}.marke svg{width:26px;height:26px}.wortmarke{display:none}
  .hauswahl{top:4px}
  .haus{padding:0 12px;font-size:.78rem}
  .look{padding:0 10px;font-size:.76rem}
  .beispiel{min-height:26px;padding:2px 9px;font-size:.66rem}
  body.mit-hauswahl{--oben:60px}
  .buehne{--oben:60px}
  .leiste{padding:3px;bottom:8px}
  .leiste .radknopf{height:46px}
}