/* Aufbau-Szene.
 *
 * Der <style>-Block aus aufbau-vorlage.html, Klassennamen und Werte
 * unveraendert. Drei Dinge mussten angepasst werden, sonst haette die
 * Vorlage die uebrigen Szenen zerlegt:
 *
 *   1. Jeder Selektor haengt unter #szene-aufbau. Zehn Klassennamen der
 *      Vorlage gibt es in style.css schon - darunter .buehne, und das ist
 *      der Container ALLER Szenen. Die Namen im Markup bleiben wortgleich.
 *   2. :root wird zu #szene-aufbau, body zu #szene-aufbau .aufbau.
 *   3. position:fixed wird absolute, sonst laeuft der Schimmer aus der
 *      Szene heraus ueber Kopfleiste und Eingabe. @keyframes p heisst
 *      aufbau-p, weil Keyframe-Namen global sind.
 *
 * Sonst ist nichts geaendert: keine eigenen Farben, keine eigenen
 * Schriften, keine eigenen Abstaende.
 */
#szene-aufbau{
  --grund:#07060A;--linie:#19151C;--linie2:#2A2430;
  --text:#EFEAE2;--dim:#7C7581;--dimmer:#4C4652;
  --ember:#FF4620;--glut:#FF8A4C;--brass:#F0A83C;--kern:#FFF3E2;
}#szene-aufbau *{box-sizing:border-box}#szene-aufbau .aufbau{margin:0;background:var(--grund);color:var(--text);font-family:"Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased}#szene-aufbau .aufbau::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 80% at 106% 20%,rgba(146,22,52,.50),transparent 66%),
    radial-gradient(60% 55% at -6% 102%,rgba(255,70,32,.13),transparent 68%)}#szene-aufbau .aufbau::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 54%,rgba(0,0,0,.6) 100%);
  opacity:.85}#szene-aufbau .rahmen{position:relative;z-index:1;padding:0 16px 32px}
@media(min-width:900px){#szene-aufbau .rahmen{padding:0 22px 32px}}#szene-aufbau .rail{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--linie);padding-block:9px}#szene-aufbau .zelle{padding:0 14px;border-right:1px solid var(--linie);display:flex;flex-direction:column;gap:1px}#szene-aufbau .zelle:first-child{padding-left:0}#szene-aufbau .k{font-size:8.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--dimmer);font-weight:600}#szene-aufbau .v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-variant-numeric:tabular-nums}#szene-aufbau .puls{width:5px;height:5px;border-radius:50%;background:#57A87A;display:inline-block;margin-right:6px;animation:aufbau-p 2.4s ease-in-out infinite;vertical-align:middle}
@keyframes aufbau-p{0%,100%{opacity:1}50%{opacity:.22}}#szene-aufbau .demo{margin-left:auto;font-size:8.5px;letter-spacing:.16em;font-weight:600;color:var(--brass);border:1px solid rgba(240,168,60,.35);padding:3px 8px;text-transform:uppercase}#szene-aufbau .kopf{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:24px 0 14px}#szene-aufbau .kopf h1{font-family:"Saira Condensed",sans-serif;font-weight:200;font-size:clamp(23px,3.3vw,37px);letter-spacing:.24em;text-transform:uppercase;margin:0}#szene-aufbau .kopf h1 em{font-style:normal;color:var(--dimmer)}#szene-aufbau .kopf p{margin:7px 0 0;font-size:12.5px;color:var(--dim);max-width:60ch;line-height:1.55}#szene-aufbau .uhr{margin-left:auto;text-align:right;flex-shrink:0}#szene-aufbau .uhr .z{font-family:"Saira Condensed",sans-serif;font-weight:200;font-size:clamp(34px,5vw,54px);line-height:.9;font-variant-numeric:tabular-nums}#szene-aufbau .uhr .d{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--dim);letter-spacing:.13em;margin-top:5px}#szene-aufbau .gitter{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);grid-template-columns:1fr}
@media(min-width:900px){#szene-aufbau .gitter{grid-template-columns:230px minmax(0,1fr) 190px}}#szene-aufbau .feld{background:var(--grund);padding:15px 15px 17px;min-width:0}#szene-aufbau .feld-k{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);font-weight:600;margin-bottom:11px;display:flex;justify-content:space-between;gap:8px}#szene-aufbau .feld-k span:last-child{color:var(--dim)}#szene-aufbau .teil{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid rgba(25,21,28,.9);cursor:default}#szene-aufbau .teil:last-child{border-bottom:0}#szene-aufbau .pkt{width:7px;height:7px;border-radius:50%}#szene-aufbau .teil .n{font-size:12.5px;font-weight:500}#szene-aufbau .teil .w{font-family:"JetBrains Mono",monospace;font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim)}#szene-aufbau .tun{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid rgba(25,21,28,.9);font-size:11.5px}#szene-aufbau .tun:last-child{border-bottom:0}#szene-aufbau .tun .a{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--dim);letter-spacing:.02em}#szene-aufbau .tun .b{color:var(--glut);font-size:11px}#szene-aufbau .buehne{position:relative;background:var(--grund);min-height:420px;display:flex;align-items:center;justify-content:center;padding:0}#szene-aufbau canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab}#szene-aufbau canvas:active{cursor:grabbing}#szene-aufbau .ecke{position:absolute;width:20px;height:20px;border:1px solid var(--linie2);pointer-events:none}#szene-aufbau .ecke.tl{top:10px;left:10px;border-right:0;border-bottom:0}#szene-aufbau .ecke.tr{top:10px;right:10px;border-left:0;border-bottom:0}#szene-aufbau .ecke.bl{bottom:10px;left:10px;border-right:0;border-top:0}#szene-aufbau .ecke.br{bottom:10px;right:10px;border-left:0;border-top:0}#szene-aufbau .hinweis{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);pointer-events:none}#szene-aufbau .status{position:absolute;top:16px;right:18px;text-align:right;pointer-events:none}#szene-aufbau .status div{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--dim);letter-spacing:.1em;line-height:1.7}#szene-aufbau .status .an{color:var(--glut)}#szene-aufbau .info{background:var(--grund)}#szene-aufbau .info .titel{font-family:"Saira Condensed",sans-serif;font-weight:300;font-size:21px;letter-spacing:.12em;text-transform:uppercase;margin:2px 0 8px}#szene-aufbau .info p{margin:0 0 10px;font-size:11.5px;line-height:1.6;color:var(--dim)}#szene-aufbau .info .zeile{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding:5px 0;border-bottom:1px solid rgba(25,21,28,.9)}#szene-aufbau .info .zeile span:first-child{color:var(--dimmer)}#szene-aufbau .info .zeile span:last-child{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}#szene-aufbau .chip{display:inline-block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--linie2);color:var(--dim);font-weight:600}#szene-aufbau .chip.an{color:#57A87A;border-color:rgba(87,168,122,.4)}#szene-aufbau .chip.aus{color:var(--dimmer)}#szene-aufbau .fuss{margin-top:22px;padding-top:14px;border-top:1px solid var(--linie);font-size:10.5px;color:var(--dimmer);line-height:1.7;max-width:80ch}#szene-aufbau .legende{margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.65;max-width:68ch;border-left:2px solid var(--ember);padding:10px 0 10px 15px}#szene-aufbau .legende b{color:var(--text);font-weight:600}#szene-aufbau .aufbau, #szene-aufbau .aufbau{background:#07060A}

/* --- Anschluss an den Szenenrahmen ------------------------------------
 *
 * Nicht aus der Vorlage, sondern das, was sie braucht, um in einer Szene
 * zu sitzen statt auf einer eigenen Seite:
 *
 *   - .aufbau war frueher <body> und ist jetzt ein Kind. Die beiden
 *     Schimmer-Ebenen sind absolut positioniert und brauchen deshalb hier
 *     ihren Bezugsrahmen.
 *   - .szene-inhalt bringt 22px Seitenrand mit, .rahmen noch einmal 16px.
 *     Zusammen waeren das auf einem 400px breiten Schirm 76px Rand. Der
 *     Rand der Vorlage gewinnt.
 *
 * Keine Farben, keine Schriften, keine Groessen der Vorlage angefasst.
 */
#szene-aufbau .szene-inhalt { padding: 0; }
#szene-aufbau .aufbau { position: relative; min-height: 100%; }

/* Tabellenbreite: der Ring darf schmal werden, aber nie den Schirm
   sprengen. .szene blockt horizontales Scrollen ohnehin - das hier
   verhindert, dass stattdessen etwas abgeschnitten wird. */
#szene-aufbau .gitter { max-width: 100%; }
#szene-aufbau canvas { max-width: 100%; }