:root{
  --ifc-ink:#f7f8fb;
  --ifc-muted:#b9c1cc;
  --ifc-cyan:#31dce8;
  --ifc-violet:#9273ff;
  --ifc-gold:#e7d4b5;
  --ifc-surface:rgba(5,8,14,.94);
  --ifc-line:rgba(255,255,255,.14);
}

#intro > .twin-generation-card{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(620px,calc(100vw - 48px))!important;
  max-width:620px!important;
  max-height:none!important;
  margin:0!important;
  padding:clamp(22px,2.4vw,32px)!important;
  overflow:visible!important;
  color:var(--soft,#dfe7f2)!important;
  background:
    linear-gradient(180deg,rgba(5,11,17,.95),rgba(7,9,16,.92)),
    color-mix(in srgb,var(--ifc-cyan,var(--cyan,#00e5ff)) 3%,rgba(2,4,7,.96))!important;
  border:1px solid color-mix(in srgb,var(--ifc-cyan,var(--cyan,#00e5ff)) 38%,rgba(255,255,255,.16))!important;
  border-radius:22px!important;
  box-shadow:
    0 36px 100px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 54px -34px var(--ifc-cyan,var(--cyan,#00e5ff))!important;
  text-align:left!important;
}

#intro > .twin-generation-card::before{
  inset:8px!important;
  width:auto!important;
  height:auto!important;
  border-color:color-mix(in srgb,var(--ifc-cyan,var(--cyan,#00e5ff)) 42%,transparent)!important;
  border-radius:16px!important;
  opacity:.72!important;
  transform:none!important;
  /* Das geerbte Panel-::before malte einen violett-beigen Verlauf mit
     mix-blend-mode:screen und hellte die dunkle Karte auf. Nur der feine
     Innenrahmen bleibt, damit der Aktionsknopf der hellste Punkt ist. */
  background:none!important;
  mix-blend-mode:normal!important;
}

#intro > .twin-generation-card::after{
  background:none!important;
  mix-blend-mode:normal!important;
}

#intro > .twin-generation-card::after{
  display:none!important;
}

.twin-generation-header,
.twin-generation-flow,
.twin-generation-domains{
  position:relative;
  z-index:1;
}

.twin-generation-kicker,
.twin-generation-output-label{
  margin:0;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.twin-generation-mark,
.ifc-simulator-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.65);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:600;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.twin-generation-mark{
  margin-bottom:9px;
}

.twin-generation-mark img,
.ifc-simulator-brand img{
  display:block;
  flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(231,212,181,.2));
}

.twin-generation-mark img{
  width:30px;
  height:30px;
}

.twin-generation-title{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:8px 0 10px;
  /* Der geerbte Titel war auf seine min-content-Breite (~250px) begrenzt und brach
     deshalb nach jedem langen Wort um - auf Desktop wuchs die Karte dadurch auf 842px.
     Volle Kartenbreite: gleicher Titel in 3 statt 8 Zeilen, Karte 626px. */
  width:auto!important;
  max-width:none!important;
  color:#fff;
  font-family:var(--display,inherit);
  font-size:clamp(29px,3vw,42px)!important;
  font-weight:700;
  line-height:1.02!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

.twin-generation-title strong{
  color:var(--ifc-gold);
  font:inherit;
}

.twin-generation-lead{
  max-width:58ch;
  margin:0;
  color:rgba(255,255,255,.74)!important;
  font-size:14px!important;
  line-height:1.52!important;
  letter-spacing:0!important;
}

.twin-generation-flow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:18px 0 16px;
  border-block:1px solid var(--ifc-line);
}

.twin-generation-flow > div{
  min-width:0;
  padding:12px 13px;
}

.twin-generation-flow > div + div{
  border-left:1px solid var(--ifc-line);
}

.twin-generation-flow span,
.twin-generation-flow strong{
  display:block;
  letter-spacing:0;
}

.twin-generation-flow span{
  margin-bottom:4px;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase;
}

.twin-generation-flow strong{
  color:var(--ifc-ink);
  font-size:12px;
  font-weight:650;
  line-height:1.38;
}

.twin-generation-domains{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin:8px 0 17px;
  padding:0;
  list-style:none;
}

.twin-generation-domains li{
  min-width:0;
  padding:8px 5px;
  color:#e4e7ed;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-radius:8px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
  text-align:center;
}

.twin-generation-action-box{
  display:grid;
  place-items:stretch;
  gap:7px;
  margin:5px 0 10px;
  padding:10px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--ifc-cyan,var(--cyan,#00e5ff)) 62%,rgba(255,255,255,.28));
  background:
    linear-gradient(155deg,rgba(0,229,255,.18),rgba(255,255,255,.05)),
    rgba(11,10,18,.62);
  box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 22px -12px var(--ifc-cyan,var(--cyan,#00e5ff));
}

.twin-generation-action{
  border-radius:9px!important;
  border-color:rgba(255,255,255,.95)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.26);
}

.twin-generation-action,
.ifc-simulator-primary,
.ifc-simulator-secondary{
  box-sizing:border-box;
  width:100%;
  min-height:50px;
  padding:12px 18px;
  border-radius:8px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}

/* Zwei Knoepfe untereinander brauchen eine Fuge. Bis zum 08.10.2026 lagen
   sie Kante an Kante, gemessen null Pixel: am Telefon trifft der Daumen
   dann den falschen, und der zweite Knopf sieht aus wie der Sockel des
   ersten. */
.ifc-simulator-primary + .ifc-simulator-secondary,
.ifc-simulator-secondary + .ifc-simulator-primary,
.ifc-simulator-secondary + .ifc-simulator-secondary{
  margin-top:12px;
}

.twin-generation-action,
.ifc-simulator-primary{
  color:#101116;
  background:linear-gradient(130deg,#7af7ff,#c6a2ff);
  border:1px solid rgba(255,255,255,.84);
}

.twin-generation-action:hover,
.ifc-simulator-primary:hover{
  transform:translateY(-1px);
  background:linear-gradient(130deg,#95ffff,#e8c1ff);
}

.twin-generation-action:active,
.ifc-simulator-primary:active,
.ifc-simulator-secondary:active{
  transform:translateY(1px);
}

.twin-generation-action:focus-visible,
.ifc-simulator button:focus-visible,
.ifc-dropzone:focus-within{
  outline:3px solid rgba(49,220,232,.72);
  outline-offset:3px;
}

/* Puls fuer hoch relevante Aktionen: nur box-shadow, damit Hover/Active
   ihre eigene transform-Transition behalten. */
@keyframes pcm-action-pulse{
  0%{ box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 0 0 rgba(122,247,255,.55); }
  55%{ box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 0 15px rgba(122,247,255,0); }
  100%{ box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 0 0 rgba(122,247,255,0); }
}

.twin-generation-action,
.ifc-simulator-primary:not(:disabled){
  animation:pcm-action-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}

/* Waehrend der Bedienung ruhig bleiben - der Puls ist eine Einladung, kein Feedback. */
.twin-generation-action:hover,
.twin-generation-action:active,
.twin-generation-action:focus-visible,
.ifc-simulator-primary:hover,
.ifc-simulator-primary:active,
.ifc-simulator-primary:focus-visible{
  animation-play-state:paused;
}

@media (prefers-reduced-motion:reduce){
  .twin-generation-action,
  .ifc-simulator-primary:not(:disabled){
    animation:none;
  }
}

/* Der zweite Eingang: derselbe Rahmen, aber ohne Fuellung und ohne Puls.
   Er soll gesehen werden und nicht mit dem Hauptweg um Aufmerksamkeit
   ringen - wer eine eigene Datei hat, soll sie testen. Schrift und Laufweite
   bleiben gleich, damit die beiden als ein Paar lesen.

   Seit dem 07.09.2026 steht der Knopf nicht mehr auf der Karte: was er zeigte,
   war ein fremdes Bauwerk, und ein Besucher hielt es fuer seines. Diese Regeln
   bleiben absichtlich stehen. Die eingefrorenen Daten sind der Pruefstand des
   Betrachters (tools/qa/check_ifc_schauweg.mjs), und wenn der Betreiber den
   Eingang zurueckhaben will, ist es eine Zeile in import_wix_export.py und
   nicht ein neuer Entwurf. */
.twin-generation-demo{
  box-sizing:border-box;
  width:100%;
  min-height:42px;
  padding:10px 16px;
  border-radius:9px;
  border:1px solid color-mix(in srgb,var(--ifc-cyan,var(--cyan,#00e5ff)) 58%,rgba(255,255,255,.3));
  background:rgba(11,10,18,.5);
  color:#dff7fb;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}

.twin-generation-demo:hover{
  transform:translateY(-1px);
  border-color:rgba(122,247,255,.9);
  background:rgba(0,229,255,.14);
  color:#ffffff;
}

.twin-generation-demo:active{
  transform:translateY(1px);
}

.twin-generation-demo:focus-visible{
  outline:3px solid rgba(49,220,232,.72);
  outline-offset:3px;
}

.twin-generation-privacy{
  margin:8px 0 0;
  color:#9099a6;
  font-size:10px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  text-align:center;
}

body.ifc-simulator-open{
  overflow:hidden!important;
}

body.ifc-simulator-open .pcm-store-launcher{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.ifc-simulator[hidden],
.ifc-simulator-view[hidden],
.ifc-selected-file[hidden],
.ifc-upgrade-box[hidden],
.ifc-live[hidden],
.ifc-live-teilstand[hidden],
.ifc-live-schritte[hidden],
.ifc-systemwahl-grund[hidden],
.ifc-systemwahl-bericht[hidden],
.ifc-simulator-error[hidden]{
  display:none!important;
}

.ifc-simulator{
  position:fixed;
  inset:0;
  z-index:12000;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  color:var(--ifc-ink);
  isolation:isolate;
}

.ifc-simulator-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:rgba(0,2,7,.86);
  border:0;
  border-radius:0;
  cursor:default;
}

.ifc-simulator-shell{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(760px,calc(100vw - 24px));
  max-height:calc(100dvh - max(32px,env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  padding:clamp(20px,4vw,36px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(49,220,232,.34) transparent;
  color:var(--ifc-ink);
  background:linear-gradient(150deg,rgba(27,23,42,.98),rgba(4,8,14,.99) 58%);
  border:1px solid rgba(49,220,232,.52);
  border-radius:22px;
  box-shadow:0 38px 120px rgba(0,0,0,.76),0 0 54px rgba(146,115,255,.12);
}

.ifc-simulator-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.ifc-simulator-heading{
  min-width:0;
}

.ifc-simulator-brand{
  margin-bottom:12px;
}

.ifc-simulator-brand img{
  width:36px;
  height:36px;
}

.ifc-simulator-header p{
  margin:0 0 5px;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ifc-simulator-header h2{
  margin:0;
  color:var(--ifc-ink);
  font-family:var(--display,inherit);
  font-size:clamp(24px,4vw,36px);
  line-height:1.08;
  letter-spacing:0;
  text-wrap:balance;
}

.ifc-simulator-close{
  flex:0 0 46px;
  width:46px;
  height:46px;
  padding:0;
  color:#eef2f6;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}

.ifc-simulator-progress{
  margin:0 0 22px;
}

.ifc-simulator-progress > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  line-height:1.3;
  letter-spacing:0;
}

.ifc-simulator-progress b{
  color:var(--ifc-gold);
}

/* Der Verlauf hat zwei Halte, nicht drei. Ein Verlauf im Wert wird auf
   dessen Breite gestaucht: mit einem dritten, hellen Halt am Ende steht bei
   einem Drittel Fortschritt bereits das Gold im Bild und liest sich als
   Luecke im Balken. Am 08.09.2026 im Bild belegt. */
.ifc-simulator-progress progress{
  display:block;
  width:100%;
  height:4px;
  overflow:hidden;
  appearance:none;
  background:rgba(255,255,255,.14);
  border:0;
  border-radius:999px;
}

.ifc-simulator-progress progress::-webkit-progress-bar{
  background:rgba(255,255,255,.14);
  border-radius:999px;
}

.ifc-simulator-progress progress::-webkit-progress-value{
  background:linear-gradient(90deg,var(--ifc-violet),var(--ifc-cyan));
  border-radius:999px;
  box-shadow:0 0 12px rgba(49,220,232,.5);
  transition:width .35s ease;
}

.ifc-simulator-progress progress::-moz-progress-bar{
  background:linear-gradient(90deg,var(--ifc-violet),var(--ifc-cyan));
  border-radius:999px;
  box-shadow:0 0 12px rgba(49,220,232,.5);
}

.ifc-dropzone{
  position:relative;
  display:grid;
  min-height:154px;
  place-items:center;
  padding:20px;
  background:rgba(255,255,255,.035);
  border:1px dashed rgba(49,220,232,.5);
  border-radius:12px;
  text-align:center;
  transition:background-color .18s ease,border-color .18s ease;
}

.ifc-dropzone.is-dragging{
  background:rgba(49,220,232,.09);
  border-color:var(--ifc-cyan);
}

.ifc-dropzone input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

.ifc-dropzone label{
  display:flex;
  min-height:96px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  color:var(--ifc-ink);
  cursor:pointer;
}

.ifc-dropzone label::before{
  content:"IFC";
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  color:var(--ifc-cyan);
  border:1px solid rgba(49,220,232,.45);
  border-radius:50%;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:12px;
  font-weight:800;
}

.ifc-dropzone label strong{
  font-size:16px;
  line-height:1.35;
  letter-spacing:0;
}

.ifc-dropzone label span,
.ifc-file-help{
  color:var(--ifc-muted);
  font-size:12px;
  line-height:1.45;
  letter-spacing:0;
}

.ifc-file-help{
  margin:10px 0 14px;
  text-align:center;
}

.ifc-selected-file{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  margin:0 0 14px;
  padding:12px 14px;
  background:rgba(49,220,232,.055);
  border-left:2px solid var(--ifc-cyan);
}

.ifc-selected-file strong,
.ifc-selected-file span{
  min-width:0;
  letter-spacing:0;
}

.ifc-selected-file strong{
  overflow:hidden;
  color:var(--ifc-ink);
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-selected-file span{
  flex:0 0 auto;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
}

.ifc-deep-context{
  display:grid;
  gap:10px;
  margin:14px 0 10px;
}

/* `hidden` allein reicht nicht: die Label-Regel setzt display und schlaegt
   den Vorgabewert des Attributs. Der Energiestandard erscheint erst, wenn
   energieeffizient gewaehlt ist. */
.ifc-deep-context label[hidden]{ display:none!important; }

.ifc-deep-context label{
  display:grid;
  gap:6px;
}

.ifc-deep-context label > span{
  color:#d9dfe8;
  font-size:11px;
  line-height:1.35;
}

.ifc-deep-context select,
.ifc-deep-context input{
  width:100%;
  min-height:48px;
  padding:10px 36px 10px 12px;
  color:var(--ifc-ink);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  outline:0;
  /* Kurzform "font:15px/1.2 inherit" ist ungueltig (inherit ist als family in der Shorthand
     nicht erlaubt) und wurde komplett verworfen -> Felder fielen auf die Serifen-UA-Schrift zurueck. */
  font-family:inherit;
  font-size:15px;
  line-height:1.2;
  appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2331dce8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat calc(100% - 13px) 50%/11px 8px,
    linear-gradient(135deg,rgba(49,220,232,.08),rgba(255,255,255,.04)),
    rgba(255,255,255,.055);
}

.ifc-deep-context select:focus-visible,
.ifc-deep-context input:focus-visible{
  border-color:rgba(49,220,232,.7);
}

.ifc-deep-context select option,
.ifc-deep-context select optgroup{
  color:#0b1017;
  background:#e8edf4;
}

.ifc-deep-context input{
  padding-right:12px;
  background-image:linear-gradient(135deg,rgba(49,220,232,.08),rgba(255,255,255,.04));
}

.ifc-deep-context-hint{
  margin:0 0 12px;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.45;
}

/* Die Grundangaben stehen seit dem 08.10.2026 auf vier Seiten. Eine Seite
   ist ein Raster wie der Behaelter darum, damit zwei Felder auf derselben
   Seite denselben Abstand halten wie vorher zwei Felder untereinander. */
.ifc-konfig-seite{
  display:grid;
  gap:10px;
}

/* `hidden` allein reicht hier so wenig wie bei den Labels weiter oben:
   die Seite setzt selbst ein display. */
.ifc-konfig-seite[hidden]{ display:none!important; }

.ifc-konfig-fortschritt{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 2px;
}

/* Die Zahl steht als Wort daneben. Ein Balken allein zeigt, wie weit es
   ist, aber nicht, wie viele Schritte noch kommen. */
.ifc-konfig-zaehler{
  flex:0 0 auto;
  margin:0;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ifc-konfig-balken{
  display:flex;
  flex:1 1 auto;
  gap:4px;
}

.ifc-konfig-balken i{
  flex:1 1 0;
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.12);
}

.ifc-konfig-balken i[data-stand="fertig"]{ background:rgba(49,220,232,.45); }
.ifc-konfig-balken i[data-stand="jetzt"]{ background:var(--ifc-cyan,#31dce8); }

/* Zurueck steht links und schmal, Weiter nimmt den Rest. Zurueck geht man
   selten, und zwei gleich breite Knoepfe nebeneinander lesen sich wie eine
   Frage mit zwei gleichwertigen Antworten. Die Fuge fuer gestapelte Knoepfe
   gilt hier nicht: diese beiden stehen nebeneinander. */
.ifc-konfig-weg{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

.ifc-konfig-weg > .ifc-simulator-primary,
.ifc-konfig-weg > .ifc-simulator-secondary{
  margin-top:0;
}

.ifc-konfig-weg > .ifc-simulator-secondary{ flex:0 0 38%; }
.ifc-konfig-weg > .ifc-simulator-primary{ flex:1 1 auto; }
.ifc-konfig-weg > #ifcVorauswahlAnpassen{
  flex:1 1 auto;
  color:var(--ifc-cyan,#31dce8);
  border-color:rgba(49,220,232,.45);
}
.ifc-konfig-weg > #ifcVorauswahlAnpassen[aria-expanded="true"]{
  background:rgba(49,220,232,.12);
}

.ifc-simulator-error{
  margin:0 0 14px;
  padding:11px 13px;
  color:#ffd9d9;
  background:rgba(205,52,72,.15);
  border-left:2px solid #ff6f7f;
  font-size:12px;
  line-height:1.45;
}

.ifc-simulator-primary:disabled{
  color:#777d86;
  background:#24272d;
  border-color:#353941;
  cursor:not-allowed;
  transform:none;
}

.ifc-processing-status{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.ifc-processing-status > i{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--ifc-cyan);
  border-radius:50%;
  animation:ifc-spin .8s linear infinite;
}

.ifc-processing-status strong,
.ifc-processing-status span{
  display:block;
  letter-spacing:0;
}

.ifc-processing-status strong{
  color:var(--ifc-ink);
  font-size:16px;
}

.ifc-processing-status span{
  margin-top:3px;
  color:var(--ifc-muted);
  font-size:12px;
}

.ifc-stage-list{
  margin:0;
  padding:0;
  list-style:none;
  border-block:1px solid var(--ifc-line);
}

.ifc-stage-list li{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:8px 4px;
  color:#747d89;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .2s ease;
}

.ifc-stage-list li:last-child{
  border-bottom:0;
}

.ifc-stage-list li > i{
  flex:0 0 12px;
  width:12px;
  height:12px;
  background:transparent;
  border:1px solid currentColor;
  border-radius:50%;
}

.ifc-stage-list li.is-active{
  color:var(--ifc-cyan);
}

.ifc-stage-list li.is-complete{
  color:#77e6bb;
}

.ifc-stage-list li.is-complete > i{
  background:currentColor;
}

.ifc-stage-list strong,
.ifc-stage-list small{
  display:block;
  letter-spacing:0;
}

.ifc-stage-list strong{
  font-size:13px;
  line-height:1.35;
}

.ifc-stage-list small{
  margin-top:2px;
  font-size:11px;
  line-height:1.35;
}

.ifc-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  border-block:1px solid var(--ifc-line);
}

.ifc-stat-grid > div{
  min-width:0;
  padding:14px 12px;
}

.ifc-stat-grid > div + div{
  border-left:1px solid var(--ifc-line);
}

.ifc-stat-grid dt{
  color:var(--ifc-muted);
  font-size:10px;
  line-height:1.25;
  letter-spacing:0;
}

.ifc-stat-grid dd{
  margin:4px 0 0;
  overflow:hidden;
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:clamp(17px,3vw,24px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-result-list{
  margin:14px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.ifc-result-row{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-height:46px;
  padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ifc-result-row strong,
.ifc-result-row span{
  letter-spacing:0;
}

.ifc-result-row strong{
  color:var(--ifc-gold);
  font-size:12px;
}

.ifc-result-row span{
  color:#d5dae2;
  font-size:12px;
  line-height:1.35;
}

.ifc-result-row span::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  background:var(--ifc-cyan);
  border-radius:50%;
  box-shadow:0 0 12px rgba(49,220,232,.55);
}

.ifc-check-list{
  margin:14px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.ifc-check-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 12px;
  align-items:baseline;
  padding:11px 4px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.ifc-check-row strong{
  color:var(--ifc-gold);
  font-size:12px;
  letter-spacing:0;
}

.ifc-check-row b{
  justify-self:end;
  padding:2px 8px;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.08em;
}

.ifc-check-row span{
  grid-column:1 / -1;
  color:#d5dae2;
  font-size:12px;
  line-height:1.45;
}

.ifc-check-row[data-status="ok"] b{ color:#4fe3a8; }
.ifc-check-row[data-status="warn"] b{ color:var(--ifc-gold,#e8c07a); }
.ifc-check-row[data-status="fail"] b{ color:#ff8b96; }

.ifc-check-row span::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:50%;
  background:var(--ifc-cyan);
  box-shadow:0 0 12px rgba(49,220,232,.55);
}

.ifc-check-row[data-status="ok"] span::before{ background:#4fe3a8; box-shadow:0 0 12px rgba(79,227,168,.5); }
.ifc-check-row[data-status="warn"] span::before{ background:#e8c07a; box-shadow:0 0 12px rgba(232,192,122,.5); }
.ifc-check-row[data-status="fail"] span::before{ background:#ff8b96; box-shadow:0 0 12px rgba(255,139,150,.5); }

.ifc-upgrade-box{
  margin:0 0 14px;
  padding:13px 14px;
  border:1px solid rgba(49,220,232,.28);
  border-radius:10px;
  background:linear-gradient(150deg,rgba(49,220,232,.09),rgba(255,255,255,.02));
}

.ifc-upgrade-box > span{
  display:block;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.12em;
}

.ifc-upgrade-box > strong{
  display:block;
  margin:6px 0 9px;
  color:var(--ifc-ink);
  font-size:14px;
  line-height:1.35;
}

.ifc-upgrade-box ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:7px;
}

.ifc-upgrade-box li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:9px;
  color:#d5dae2;
  font-size:12px;
  line-height:1.4;
}

.ifc-upgrade-box li::before{
  content:"+";
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
}

.ifc-next-domains{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.ifc-next-domains li{
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#d5dae2;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.06em;
}

.ifc-result-disclaimer{
  margin:0 0 16px;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.5;
  letter-spacing:0;
}

.ifc-simulator-secondary{
  color:var(--ifc-ink);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.16);
}

.ifc-simulator-secondary:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(49,220,232,.45);
}

.ifc-extended-entry{
  margin:18px 0 12px;
  padding:18px;
  background:linear-gradient(135deg,rgba(146,115,255,.13),rgba(49,220,232,.055));
  border:1px solid rgba(146,115,255,.38);
  border-radius:8px;
}

.ifc-extended-entry > span,
.ifc-report-offer span,
.ifc-analysis-chart header span{
  display:block;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.1em;
}

.ifc-extended-entry > strong{
  display:block;
  margin-top:7px;
  color:var(--ifc-ink);
  font-size:17px;
  line-height:1.25;
}

.ifc-extended-entry > p,
.ifc-guest-intro,
.ifc-report-offer p{
  margin:7px 0 14px;
  color:var(--ifc-muted);
  font-size:12px;
  line-height:1.5;
}

.ifc-guest-form{
  display:grid;
  gap:12px;
}

.ifc-guest-form > label{
  display:grid;
  gap:6px;
}

.ifc-guest-form > label > span{
  color:#d9dfe8;
  font-size:11px;
  line-height:1.35;
}

.ifc-guest-form > label > span small{
  color:var(--ifc-muted);
}

.ifc-guest-form input:not([type="checkbox"]),
.ifc-guest-form select{
  width:100%;
  min-height:48px;
  padding:10px 12px;
  color:var(--ifc-ink);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  outline:0;
  font:15px/1.2 inherit;
}

.ifc-guest-form input:focus,
.ifc-guest-form select:focus{
  border-color:var(--ifc-cyan);
  box-shadow:0 0 0 2px rgba(49,220,232,.12);
}

.ifc-guest-form select{
  appearance:none;
  background:
    linear-gradient(135deg,rgba(49,220,232,.08),rgba(255,255,255,.04)),
    rgba(255,255,255,.055);
  background-repeat:no-repeat;
  background-position:calc(100% - 14px) 50%;
  background-size:10px;
  padding-right:36px;
}

.ifc-code-input{
  font-family:var(--mono,"Roboto Mono",monospace)!important;
  font-size:28px!important;
  font-weight:700!important;
  letter-spacing:.28em!important;
  text-align:center;
}

.ifc-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
}


/* --- Systemwahl ---------------------------------------------------------
   Ein Fachbereich, eine Wahl. Der Block traegt links die Gewerksfarbe aus
   dem Buendel (die Ansicht prueft den Hexwert, bevor er hier ankommt), damit
   dieselbe Farbe die Karte, das Modell und die Legende verbindet.
   Auf 390 px steht ein Fachbereich je Zeile, ab rund 640 px zwei - die
   Karte waechst dann in die Breite statt in die Laenge.  */
.ifc-systemwahl-grundlage{
  margin:0 0 14px;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  line-height:1.5;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.ifc-systemwahl{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:16px;
}

@media(min-width:640px){
  .ifc-systemwahl{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.ifc-systemwahl-gruppe{
  box-sizing:border-box;
  min-width:0;
  margin:0;
  padding:10px 12px 8px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--ifc-line);
  border-left:3px solid rgba(255,255,255,.28);
  border-radius:12px;
}

.ifc-systemwahl-legende{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:0;
  margin-bottom:8px;
}

.ifc-systemwahl-kuerzel{
  flex:0 0 auto;
  padding:2px 6px;
  color:#03060c;
  background:rgba(255,255,255,.82);
  border-radius:5px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.08em;
}

.ifc-systemwahl-name{
  min-width:0;
  color:var(--ifc-ink);
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.ifc-systemwahl-klasse{
  margin-left:auto;
  color:#6f7987;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.06em;
}

/* Seit dem 08.10.2026 ist der Kopf der Box ein Knopf. Ein Knopf bringt
   seine eigene Schrift, seinen eigenen Rahmen und eine zentrierte Mitte
   mit; hier soll er aussehen wie die Zeile, die er vorher war, und sich
   nur anfuehlen wie ein Knopf. */
.ifc-systemwahl-legende{
  min-height:34px;
  margin-bottom:4px;
  padding:2px 0;
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

/* Der Stift. Ein Knopf mit genug Flaeche fuer einen Daumen, aber ohne
   Rahmen: in der Liste soll er ein Zeichen sein und kein zweiter Knopf
   neben der Zeile. */
.ifc-systemwahl-stift{
  flex:0 0 auto;
  width:34px;
  height:34px;
  margin:-6px -6px -6px 2px;
  padding:0;
  color:var(--ifc-cyan,#31dce8);
  background:none;
  border:0;
  border-radius:8px;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}

.ifc-systemwahl-stift:hover,
.ifc-systemwahl-stift:focus-visible{
  background:rgba(49,220,232,.12);
}

/* Das Fenster zum Bearbeiten. Es liegt ueber dem Fenster und misst sich am
   Raster, nicht an 100vw: so bleibt es in den sicheren Raendern, und was
   nicht passt, rollt in der Karte. Dieselbe Rechnung wie bei der
   Anmeldekarte, nur in den Farben des Simulators. */
.ifc-fach{
  position:fixed;
  inset:0;
  z-index:12300;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  isolation:isolate;
}

.ifc-fach[hidden]{display:none}

.ifc-fach-blende{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:rgba(3,6,12,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:0;
  border-radius:0;
  cursor:default;
}

.ifc-fach-karte{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(420px,100%);
  max-height:100%;
  padding:18px 18px 16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#0b1017;
  border:1px solid rgba(49,220,232,.28);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  /* Nur die Bewegung wird animiert, nicht die Sichtbarkeit. Die Karte der
     Anmeldung blendet sich aus `opacity:0` ein und wird nur deshalb
     ueberhaupt sichtbar, weil eine Regel sie bei "reduzierte Bewegung"
     von der Animation befreit. Hier gemessen: 351 x 274 Pixel an der
     richtigen Stelle, `opacity` 0, und auf dem Schirm war nichts als eine
     abgedunkelte Seite. Was man sehen muss, darf nicht davon abhaengen,
     dass eine Animation laeuft. */
  animation:ifc-fach-auf .28s cubic-bezier(.2,.9,.25,1) both;
}

@keyframes ifc-fach-auf{
  from{transform:translateY(12px) scale(.98)}
  to{transform:none}
}

.ifc-fach-kopf{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.ifc-fach-kopf strong{
  min-width:0;
  color:var(--ifc-ink);
  font-size:14px;
  font-weight:600;
  line-height:1.3;
}

.ifc-fach-zu{
  flex:0 0 auto;
  width:30px;
  height:30px;
  margin-left:auto;
  padding:0;
  color:var(--ifc-muted);
  background:none;
  border:1px solid var(--ifc-line);
  border-radius:50%;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}

.ifc-fach-zu:hover{ color:var(--ifc-ink); }

.ifc-fach-stand{
  margin:0 0 10px;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.4;
}

/* Im Fenster steht der Kasten offen - er ist ja der Inhalt. */
.ifc-fach-inhalt .ifc-systemwahl-fach{
  margin-top:0;
  border-top:0;
}

/* Was gerade gilt. Es steht im Kopf, damit man nicht jede Box aufmachen
   muss, um zu sehen, womit geplant wird. */
.ifc-systemwahl-jetzt{
  margin:0 0 2px;
  color:var(--ifc-ink);
  font-size:12.5px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.ifc-systemwahl-kurz{
  margin:0;
  color:var(--ifc-muted);
  font-size:10.5px;
  line-height:1.4;
}

.ifc-systemwahl-gruppe[data-offen="true"]{
  background:rgba(255,255,255,.055);
}

.ifc-systemwahl-fach{
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.1);
}

.ifc-systemwahl-fach[hidden]{ display:none!important; }

.ifc-systemwahl-option{
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:6px 0;
  border-top:1px solid rgba(255,255,255,.07);
  cursor:pointer;
}

.ifc-systemwahl-option:first-of-type{
  border-top:0;
}

.ifc-systemwahl-option input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:var(--ifc-cyan);
}

.ifc-systemwahl-text{
  min-width:0;
}

.ifc-systemwahl-titel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  color:var(--ifc-ink);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.ifc-systemwahl-marke{
  padding:1px 5px;
  color:#03060c;
  background:var(--ifc-cyan);
  border-radius:4px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.ifc-systemwahl-mass{
  display:block;
  margin-top:2px;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

/* Eine gemeldete Luecke steht offen da, nicht hinter einem Knopf: sie ist
   der Hinweis, dass ein gewaehltes System noch nicht vollstaendig gebaut
   wird - und den soll man vor der Wahl sehen. */
.ifc-systemwahl-luecke{
  display:block;
  margin:3px 0 0;
  color:var(--ifc-gold,#e8c07a);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.ifc-systemwahl-warum{
  margin-top:3px;
  padding:0;
  color:var(--ifc-cyan);
  background:none;
  border:0;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.06em;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}

.ifc-systemwahl-grund{
  margin:4px 0 0;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.ifc-systemwahl-bericht{
  margin:0 0 12px;
  color:var(--ifc-gold);
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* --- Live-Ansicht -------------------------------------------------------- */
.ifc-live{
  display:block;
  margin-bottom:16px;
}

.ifc-live-kopf{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
}

.ifc-live-kopf > span{
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.ifc-live-kopf > strong{
  margin-left:auto;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
}

.ifc-live-schritte li{
  min-height:0;
  padding:7px 4px;
}

.ifc-live-schritte li > span{
  min-width:0;
}

.ifc-live-schritte strong{
  overflow-wrap:anywhere;
}

.ifc-live-schritte small{
  color:inherit;
  opacity:.78;
  overflow-wrap:anywhere;
}

.ifc-live-schritte li[data-status="OFFEN"],
.ifc-live-schritte li[data-status="UEBERSPRUNGEN"]{
  color:#5f6875;
}

/* Die Buehne der laufenden Analyse. Sie steht zuoberst in der Ansicht, weil
   das Gebaeude wichtiger ist als die Liste der Schritte darunter. Nur der
   Abstand gehoert ihr - die Hoehe des Modells steht weiter unten und gilt
   hier wie im Ergebnis. */
.ifc-live-buehne{
  margin:0 0 14px;
}

.ifc-live-buehne[data-stand="leer"]{
  display:none;
}

.ifc-live-buehne .ifc-live-model{
  margin:0;
}

/* Faellt der Aufbau aus, bleibt hier ein Satz und sonst nichts: der Kasten
   verschwindet, die Schritte ruecken nach oben. Kein Rot - die Analyse
   laeuft ja weiter. */
.ifc-live-buehne[data-stand="ausfall"] .ifc-live-model{
  display:none;
}

.ifc-live-buehne-satz{
  margin:0 0 2px;
  padding:9px 11px;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.5;
  background:rgba(255,255,255,.03);
  border-left:2px solid var(--ifc-line);
  overflow-wrap:anywhere;
}

.ifc-live-buehne-satz[hidden]{
  display:none;
}

.ifc-live-teilstand{
  margin:10px 0 0;
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

/* Die Hoehe des Modellkastens - fest, und im Lauf dieselbe wie im Ergebnis.
   320 px auf dem grossen Schirm, 240 px auf dem Telefon (unten in der
   Medienabfrage); beides so bemessen, dass auf der Buehne darunter mehr als
   drei Schritte ganz im Bild bleiben.

   **Warum fest und warum beidseits gleich.** Vorher stand hier
   `clamp(220px,38vh,350px)`. Beim Umzug von der Buehne ins Ergebnis wechselte
   die Hoehe damit um ein paar Pixel, der Betrachter bemass seinen Zeichenpuffer
   neu - und eine WebGL-Leinwand, deren Puffer neu bemessen wurde, bleibt in
   WebKit schwarz: sie zeichnet weiter (Bildzaehler laeuft, `readPixels` liefert
   ein sauberes Modell), angezeigt wird nichts mehr. Nachgestellt an einer
   reinen Hoehenaenderung von 240 auf 310 px: 15.5 % helle Bildpunkte vorher,
   0.9 % danach. Gleiche Hoehe heisst kein neuer Puffer, und der Umzug kostet
   kein Bild. */
.ifc-live-model{
  position:relative;
  width:100%;
  height:320px;
  margin:2px 0 12px;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--ifc-line);
}

.ifc-live-model canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  cursor:grab;
  touch-action:none;
}

.ifc-live-model canvas:active{
  cursor:grabbing;
}

/* Das Wasserzeichen: das Logo, gross und blass hinter dem Modell.

   Wer das Modell fotografiert, hat das Logo mit auf dem Bild. Es liegt unter
   dem Modell und nicht darueber: die Leinwand ist durchsichtig, und
   `z-index:-1` stellt das Zeichen im eigenen Stapel des Kastens
   (`isolation:isolate`) ueber dessen Grund und unter die Leinwand. Wo das
   Modell steht, deckt es das Zeichen, und nirgends deckt das Zeichen das
   Modell. Die Datei laedt die Seite ohnehin, sie steht im Kopf des Fensters.

   Die Deckkraft ist gemessen. Die Bildpruefungen zaehlen einen Bildpunkt ab
   der Helligkeit 40 als gezeichnetes Modell. Hebt das Zeichen den Grund
   darueber, haelt eine Pruefung einen leeren Kasten fuer ein Modell, und ein
   schwarzer Kasten faellt nicht mehr auf. Der kleine Kasten hat keinen
   eigenen Grund, er steht durchsichtig auf der Karte. Dort bleibt das Zeichen
   bei .04. Die Vollansicht und das grosse Modell decken selbst, fast
   schwarz, und tragen .08. */
.ifc-live-model::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  box-sizing:border-box;
  padding:clamp(18px,7%,64px);
  background:url("/assets/media/3cf370_f3e998ebf9da4d759eb78a8ab155986f~mv2.png") center / contain no-repeat content-box;
  opacity:.04;
  pointer-events:none;
}

.ifc-live-model-status{
  position:absolute;
  z-index:2;
  left:2px;
  top:8px;
  display:grid;
  gap:3px;
  max-width:calc(100% - 58px);
  pointer-events:none;
}

.ifc-live-model-status span,
.ifc-live-model-status strong{
  overflow:hidden;
  font-family:var(--mono,"Roboto Mono",monospace);
  letter-spacing:.08em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-live-model-status span{
  color:var(--ifc-cyan);
  font-size:8px;
  font-weight:700;
}

.ifc-live-model-status strong{
  color:var(--ifc-muted);
  font-size:9px;
  font-weight:500;
}

.ifc-live-model[data-state="loading"] .ifc-live-model-status strong::after{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-left:7px;
  vertical-align:-1px;
  border:1px solid rgba(49,220,232,.25);
  border-top-color:var(--ifc-cyan);
  border-radius:50%;
  animation:ifc-spin .8s linear infinite;
}

.ifc-live-model[data-state="error"] .ifc-live-model-status strong{
  color:#ef9d9d;
  white-space:normal;
}

/* Der Knopf, der das Modell gross macht.
   Durchsichtig, damit er das Modell nicht beschneidet, und rund wie der
   Schliessknopf des Overlays - er gehoert zur selben Familie von Griffen. */
.ifc-live-model-gross{
  position:absolute;
  z-index:3;
  top:8px;
  right:8px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  padding:0;
  color:var(--ifc-ink);
  background:rgba(8,12,19,.42);
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  cursor:pointer;
  touch-action:manipulation;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}

.ifc-live-model-gross svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ifc-live-model-gross .ifc-gross-zu{ display:none; }
.ifc-live-model-gross[aria-pressed="true"] .ifc-gross-auf{ display:none; }
.ifc-live-model-gross[aria-pressed="true"] .ifc-gross-zu{ display:block; }

.ifc-live-model-gross:hover,
.ifc-live-model-gross:focus-visible{
  color:var(--ifc-cyan);
  background:rgba(8,12,19,.68);
  border-color:rgba(49,220,232,.62);
  outline:0;
}

/* Solange kein Modell steht, gibt es nichts zu vergroessern. */
.ifc-live-model:not([data-state="ready"]) .ifc-live-model-gross{
  display:none;
}

/* ---- Raeume: Schalter und Legende ------------------------------------
   Beide sitzen im Modellkasten und nicht daneben.

   Die Legende ist der Kern: ein Bild, das seinen Begleittext braucht,
   verliert unterwegs seine Aussage. Wer den Screenshot ohne einen Satz Text
   sieht, muss lesen koennen, welche Farbe welcher Raumtyp ist, wie viele
   Raeume das sind und wie viel Flaeche - mit Einheit. Darum steht das alles
   im Bild, unten links, auf einem eigenen dunklen Grund: eine Beschriftung
   ohne Grund wird auf einem hellen Bauteil unlesbar. */
/* Der Schalter sitzt unten rechts, die Legende unten links: beide gehoeren
   den Raeumen, und beide lassen die Statuszeile oben in Ruhe. Oben rechts
   stand er im Weg - gemessen auf 390 px, wo er "zwei Finger zum Drehen"
   halb verdeckt hat. */
.ifc-raum-schalter{
  position:absolute;
  z-index:3;
  bottom:8px;
  right:8px;
  display:inline-flex;
  gap:6px;
  align-items:center;
  height:38px;
  padding:0 12px;
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  background:rgba(8,12,19,.42);
  border:1px solid rgba(255,255,255,.16);
  border-radius:19px;
  cursor:pointer;
  touch-action:manipulation;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}

/* Der Punkt am Schalter sagt, was er schaltet: dieselbe Art Farbflaeche, die
   im Modell steht. Ausgeschaltet ist er leer - der Zustand steht damit im
   Bild und nicht nur im `aria-pressed`. */
.ifc-raum-schalter-zeichen{
  width:10px;
  height:10px;
  background:linear-gradient(135deg,#7fb069,#4f9ad7 55%,#a35ce0);
  border:1px solid rgba(255,255,255,.55);
  border-radius:2px;
}

.ifc-raum-schalter[aria-pressed="false"]{
  color:var(--ifc-muted);
  border-color:rgba(255,255,255,.10);
}

.ifc-raum-schalter[aria-pressed="false"] .ifc-raum-schalter-zeichen{
  background:none;
  border-style:dashed;
}

.ifc-raum-schalter:hover,
.ifc-raum-schalter:focus-visible{
  color:var(--ifc-cyan);
  background:rgba(8,12,19,.68);
  border-color:rgba(49,220,232,.62);
  outline:0;
}

.ifc-raum-schalter[hidden]{
  display:none;
}

.ifc-raum-legende{
  position:absolute;
  z-index:2;
  left:8px;
  bottom:8px;
  /* Platz fuer den Schalter daneben - er darf die Legende nicht ueberdecken
     und sie ihn nicht. */
  max-width:min(300px,calc(100% - 118px));
  padding:7px 9px 6px;
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  background:rgba(6,10,16,.74);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}

.ifc-raum-legende[hidden]{
  display:none;
}

.ifc-raum-legende-kopf{
  display:flex;
  gap:8px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:5px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* Eine Groesse groesser als die Statuszeile daneben: diese Legende wird als
   Bild weitergereicht und muss auch dann lesbar sein, wenn niemand sie
   heranzoomt. */
.ifc-raum-legende-kopf span{
  color:var(--ifc-cyan);
  font-size:9px;
  font-weight:700;
  letter-spacing:.09em;
  white-space:nowrap;
}

.ifc-raum-legende-kopf strong{
  color:var(--ifc-muted);
  font-size:10px;
  font-weight:500;
  white-space:nowrap;
}

.ifc-raum-legende-liste{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.ifc-raum-legende-liste li{
  display:grid;
  gap:6px;
  grid-template-columns:11px minmax(0,1fr) auto;
  align-items:center;
  font-size:10px;
  line-height:1.5;
}

.ifc-raum-legende-liste i{
  width:11px;
  height:11px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:2px;
}

/* Eine Vorgabefarbe ist keine Typfarbe: gestrichelt statt voll, und der
   Stern hinter dem Namen sagt dasselbe noch einmal in Text. Wer nur die
   Flaeche sieht, soll nicht glauben, Grau bedeute etwas. */
.ifc-raum-legende-liste i[data-raum-vorgabe]{
  border-style:dashed;
  border-color:rgba(255,255,255,.7);
}

.ifc-raum-legende-liste span{
  overflow:hidden;
  color:var(--ifc-ink);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-raum-legende-liste b{
  color:var(--ifc-muted);
  font-weight:500;
  white-space:nowrap;
}

.ifc-raum-legende-fuss{
  margin:4px 0 0;
  color:var(--ifc-muted);
  font-size:9px;
  line-height:1.45;
}

.ifc-raum-legende-fuss[hidden]{
  display:none;
}

/* Naeherung ist keine Nebensache: steht dort ein Kasten aus Schwerpunkt und
   Flaeche statt eines Raumes, muss das im Bild stehen. Gold wie die
   Luecken der Systemwahl - dieselbe Bedeutung, dieselbe Farbe. */
.ifc-raum-legende[data-umriss="NAEHERUNG"] [data-raum-hinweis]{
  color:var(--ifc-gold);
}

/* Gross: das Modell nimmt den ganzen Schirm. Der Hintergrund muss dabei
   selbst decken - die Leinwand ist durchsichtig, sonst stuende die Seite
   dahinter mitten im Bauwerk. */
body.ifc-modell-gross .ifc-live-model{
  position:fixed;
  z-index:120;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  border:0;
  border-radius:0;
  /* Deckend, nicht fast deckend. Bei 98.5 Prozent blieb der Text der Seite
     dahinter als dunkles Grau lesbar - auf einer fast schwarzen Flaeche
     reicht anderthalb Prozent Weiss dafuer aus. */
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(49,220,232,.07),transparent 62%),
    linear-gradient(180deg,#070c13,#05070c);
}

/* Auf dem eigenen, fast schwarzen Grund steht das Wasserzeichen doppelt so
   kraeftig wie im kleinen Kasten. Warum, steht bei `.ifc-live-model::before`. */
body.ifc-modell-gross .ifc-live-model::before{
  opacity:.08;
}

body.ifc-modell-gross .ifc-live-model-gross{
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
}

body.ifc-modell-gross .ifc-live-model-status{
  left:14px;
  top:max(14px,env(safe-area-inset-top));
}

/* Gross bleibt die Legende, wo sie ist - nur mit Abstand zum Rand des
   Geraets. Sie waechst dabei nicht mit: mehr Platz heisst mehr Modell, nicht
   mehr Beschriftung. */
body.ifc-modell-gross .ifc-raum-legende{
  left:max(14px,env(safe-area-inset-left));
  bottom:max(14px,env(safe-area-inset-bottom));
}

body.ifc-modell-gross .ifc-raum-schalter{
  bottom:max(14px,env(safe-area-inset-bottom));
  right:max(14px,env(safe-area-inset-right));
}


.ifc-power-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--ifc-line);
}

.ifc-power-grid article{
  min-width:0;
  padding:14px 12px;
  border-right:1px solid var(--ifc-line);
  border-bottom:1px solid var(--ifc-line);
}

.ifc-power-grid article:nth-child(3n){
  border-right:0;
}

.ifc-power-grid article:nth-last-child(-n+3){
  border-bottom:0;
}

.ifc-power-grid span,
.ifc-power-grid strong{
  display:block;
  overflow:hidden;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-power-grid span{
  color:var(--ifc-muted);
  font-size:9px;
  text-transform:uppercase;
}

.ifc-power-grid strong{
  margin:5px 0 10px;
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:clamp(15px,2.7vw,21px);
}

.ifc-power-grid i{
  display:block;
  width:100%;
  height:3px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.ifc-power-grid i::before{
  content:"";
  display:block;
  width:var(--meter,0%);
  height:100%;
  background:linear-gradient(90deg,var(--ifc-violet),var(--ifc-cyan));
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}

.ifc-analysis-chart,
.ifc-phinix-insight,
.ifc-report-offer{
  margin-top:16px;
  padding:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
}

.ifc-analysis-chart header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.ifc-analysis-chart header strong{
  color:var(--ifc-ink);
  font-size:12px;
}

.ifc-trade-chart{
  display:grid;
  gap:9px;
}

.ifc-trade-row{
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 58px;
  gap:9px;
  align-items:center;
  min-height:20px;
}

.ifc-trade-row b,
.ifc-trade-row span{
  overflow:hidden;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-trade-row span{
  color:var(--ifc-muted);
  text-align:right;
}

.ifc-trade-bar{
  height:8px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border-radius:8px;
}

.ifc-trade-bar i{
  display:block;
  width:var(--width,0%);
  height:100%;
  background:linear-gradient(90deg,var(--ifc-violet),var(--ifc-cyan),var(--ifc-gold));
}

.ifc-phinix-insight{
  border-color:rgba(146,115,255,.38);
  background:linear-gradient(135deg,rgba(146,115,255,.1),rgba(255,255,255,.025));
}

.ifc-phinix-insight > div{
  display:grid;
  grid-template-columns:28px auto 1fr;
  gap:9px;
  align-items:center;
}

.ifc-phinix-orb{
  width:24px;
  height:24px;
  border:6px solid rgba(146,115,255,.32);
  border-radius:50%;
  background:#090c13;
  box-shadow:0 0 15px rgba(146,115,255,.7);
}

.ifc-phinix-insight strong,
.ifc-phinix-insight b{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.08em;
}

.ifc-phinix-insight b{
  color:var(--ifc-cyan);
  text-align:right;
}

.ifc-phinix-insight p{
  margin:12px 0 0;
  color:#d8dce6;
  font-size:12px;
  line-height:1.55;
}

.ifc-report-offer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 18px;
  align-items:center;
  margin-bottom:12px;
  border-color:rgba(231,212,181,.38);
}

/* `display` an einer Klasse schlaegt die Browserregel fuer `[hidden]`. Ohne
   diese Zeile setzt der Code das Attribut, und der Kasten steht trotzdem da.
   Gemessen im Schauweg: hidden=true, display=grid, sichtbar. */
.ifc-report-offer[hidden]{
  display:none;
}

.ifc-report-offer > div > strong{
  display:block;
  margin-top:6px;
  color:var(--ifc-ink);
  font-size:14px;
}

.ifc-report-offer > div > p{
  margin-bottom:0;
}

.ifc-report-offer > b{
  color:var(--ifc-gold);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:22px;
  white-space:nowrap;
}

.ifc-report-offer-actions{
  grid-column:1/-1;
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--ifc-gold,#f7c66d) 62%,rgba(255,255,255,.34));
  background:linear-gradient(150deg,rgba(231,212,181,.16),rgba(255,255,255,.04));
  border-radius:10px;
}

.ifc-report-offer > .ifc-simulator-error,
.ifc-report-offer .ifc-report-offer-actions > .ifc-simulator-primary{
  grid-column:1/-1;
}

.ifc-report-offer-actions .ifc-simulator-primary{
  background:linear-gradient(130deg,#ffd98a,#f7c66d 58%,#ffb347);
  border-color:rgba(255,224,160,.7);
}

.ifc-report-offer-actions .ifc-simulator-primary:hover{
  background:linear-gradient(130deg,#ffdca7,#ffce6f 58%,#ffc55f);
}

@keyframes ifc-spin{
  to{transform:rotate(360deg)}
}

@media(max-width:820px){
  #intro > .twin-generation-card{
    width:min(92vw,390px)!important;
    max-width:calc(100vw - 24px)!important;
    padding:18px 18px 16px!important;
    border-radius:20px!important;
  }

  /* Eine geerbte Wix-Regel (.scene.hero h1) ist spezifischer als die Klasse und
     hat den Titel mobil auf 6.45vw gedrueckt - mit der Karte im Selektor gilt
     wieder die eigene Groesse, und die Kapitelkarten treffen sie exakt. */
  #intro > .twin-generation-card .twin-generation-title{
    font-size:clamp(25px,7.2vw,30px)!important;
  }

  .twin-generation-mark{
    margin-bottom:7px;
  }

  .twin-generation-lead{
    font-size:12px!important;
    line-height:1.43!important;
  }

  .twin-generation-flow{
    grid-template-columns:1fr;
    margin:13px 0 12px;
  }

  .twin-generation-flow > div{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:10px;
    padding:7px 2px;
  }

  .twin-generation-flow > div + div{
    border-top:1px solid rgba(255,255,255,.08);
    border-left:0;
  }

  .twin-generation-flow span{
    margin:1px 0 0;
  }

  .twin-generation-flow strong{
    font-size:11px;
  }

  .twin-generation-domains{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin:7px 0 12px;
  }

  .twin-generation-domains li{
    padding:6px 4px;
  }

  .twin-generation-action{
    min-height:48px;
    font-size:10px;
  }

  .twin-generation-demo{
    min-height:40px;
    padding:9px 12px;
    font-size:9px;
  }

  .ifc-simulator-shell{
    width:calc(100vw - 24px);
    padding:18px 16px 20px;
    border-radius:18px;
  }

  .ifc-simulator-header h2{
    font-size:25px;
  }

  .ifc-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ifc-stat-grid > div:nth-child(3){
    border-left:0;
    border-top:1px solid var(--ifc-line);
  }

  .ifc-stat-grid > div:nth-child(4){
    border-top:1px solid var(--ifc-line);
  }

  .ifc-power-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* 330 px, und die Zahl ist erarbeitet, nicht gewaehlt. Bei 240 px teilten
     sich Band und Bauwerk den Kasten so: 146 px Band, 93 px Rest. Der
     Betrachter rahmt in den Rest, und ein Haus von 57.8 x 37 x 18.7 m stand
     darin als Wuerfel von 88 x 43 px. Mit 330 px bleiben dem Bauwerk 183 px,
     und es steht mit 157 x 78 px da - beim gleichen Band, mit den gleichen
     vier Zeilen. Die Seite scrollt ohnehin; das Modell ist der Grund, warum
     jemand hier ist. */
  .ifc-live-model{
    height:330px;
    margin-top:0;
  }

  /* Auf dem kleinen Kasten wird aus der Eckkarte ein Band unten.
     Gemessen auf 390 px, und die Zahlen waren eindeutig: als schmale Karte
     stand die Legende 152 von 239 Pixeln hoch, und 87.7 Prozent aller
     gezeichneten Modellpunkte lagen unter ihr. Zwei Gruende dafuer waren
     die Breite: der Kopf brach auf zwei Zeilen um, und die Raumtypnamen
     wurden abgeschnitten. Ueber die volle Breite steht der Kopf einzeilig,
     die Namen stehen ganz da, und das Band liegt dort, wo ohnehin kein
     Modell hingehoert - unten am Rand.
     Wie viele Zeilen hineinpassen, entscheidet das Skript durch Messen
     (`raumLegendeBudget`), nicht der Ueberlauf: gescrollt wird hier nicht,
     und abgeschnitten schon gar nicht. Eine Legende, die ihren eigenen
     Hinweis kappt, war in diesem Projekt zweimal der teuerste Fehler.
     Der Schalter bleibt unten rechts. Oben rechts verdeckte er den Hinweis
     zum Drehen, gemessen auf 390 px. Er liegt damit auf der letzten Zeile
     des Bandes, und die haelt sich rechts von ihm frei: Text unter einem
     deckenden Knopf ist kein Text. */
  .ifc-raum-legende{
    right:8px;
    max-width:none;
    padding:5px 9px 5px;
  }

  /* Enger gesetzt, damit vier Zeilen hineinpassen. Vier ist die Untergrenze
     der Pruefung, und locker gesetzt kosteten Kopf, vier Zeilen,
     Sammelzeile und Hinweis 152 von 239 Pixeln - zwei Drittel des Kastens
     fuer die Beschriftung. Kleiner wird hier nichts, nur dichter. */
  .ifc-raum-legende-kopf{
    margin-bottom:3px;
    padding-bottom:3px;
  }

  .ifc-raum-legende-liste li{
    line-height:1.35;
  }

  .ifc-raum-legende-fuss{
    margin-top:3px;
  }

  .ifc-raum-legende [data-raum-hinweis]{
    padding-right:92px;
  }

  .ifc-raum-schalter{
    height:30px;
    padding:0 10px;
    font-size:9px;
  }

  .ifc-power-grid article:nth-child(3n){
    border-right:1px solid var(--ifc-line);
  }

  .ifc-power-grid article:nth-child(2n){
    border-right:0;
  }

  .ifc-power-grid article:nth-last-child(-n+3){
    border-bottom:1px solid var(--ifc-line);
  }

  .ifc-power-grid article:nth-last-child(-n+2){
    border-bottom:0;
  }
}

@media(max-width:420px) and (max-height:720px){
  #intro > .twin-generation-card{
    padding:13px 15px 12px!important;
  }

  .twin-generation-kicker,
  .twin-generation-output-label{
    font-size:8px;
  }

  .twin-generation-mark img{
    width:24px;
    height:24px;
  }

  .twin-generation-mark{
    font-size:7px;
  }

  .twin-generation-title{
    margin:5px 0 7px;
    font-size:23px!important;
  }

  .twin-generation-lead{
    font-size:11px!important;
  }

  .twin-generation-flow{
    margin:9px 0;
  }

  .twin-generation-flow > div{
    padding:5px 2px;
  }

  .twin-generation-domains{
    margin-bottom:9px;
  }

  .twin-generation-domains li{
    padding:5px 3px;
    font-size:8px;
  }

  .twin-generation-privacy{
    margin-top:5px;
    font-size:8px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .twin-generation-action,
  .twin-generation-demo,
  .ifc-simulator button,
  .ifc-stage-list li{
    transition:none!important;
  }

  .ifc-processing-status > i{
    animation-duration:1.8s;
  }
}

/* Gewerk-Explorer der erweiterten Analyse.
   Die Uebersicht traegt nur die Hauptfacts; alles Weitere haengt an einem
   Dropdown. Vier Kacheln statt sechs, weil die Konzeptplanung vier Zahlen
   hat, die wirklich tragen: was es kostet, wie gross es ist, wie viele
   Gewerke mitspielen und welche Last darin steckt. */
.ifc-power-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.ifc-power-grid article:nth-child(3n){
  border-right:1px solid var(--ifc-line);
}

.ifc-power-grid article:nth-child(2n){
  border-right:0;
}

.ifc-power-grid article:nth-last-child(-n+2){
  border-bottom:0;
}

.ifc-trade-explorer{
  border-bottom:1px solid var(--ifc-line);
  padding:16px 14px 18px;
}

.ifc-trade-explorer > header{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:10px;
}

.ifc-trade-explorer > header span{
  display:block;
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ifc-trade-explorer > header strong{
  display:block;
  margin-top:3px;
  font-size:15px;
}

/* ===== Gewerksliste mit Zuordnung =====
   Zwoelf gleichrangige Zeilen sagen nicht, dass die Kaelte zur Heizung
   gehoert. Die Liste zeigt darum eine Klammer je Obergruppe, den Einzug fuer
   die Untergruppe und die Gruppensumme **neben** den Einzelzahlen. Farbe,
   Zahl, Einheit und die Bedeutung des Einzugs stehen im Kasten selbst: das
   Bild wird weitergereicht, seine Bildunterschrift nicht. */
.ifc-gewerk-liste{
  margin:0 0 12px;
  padding:10px 12px 9px;
  background:rgba(6,10,16,.5);
  border:1px solid var(--ifc-line);
  border-radius:10px;
}

.ifc-gewerk-liste[hidden]{
  display:none;
}

.ifc-gewerk-liste-kopf{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.ifc-gewerk-liste-kopf span{
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.ifc-gewerk-liste-kopf strong{
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

.ifc-gewerk-liste-liste{
  display:grid;
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}

.ifc-gewerk-glieder{
  display:grid;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

/* Die Gruppe ist eine Klammer, kein Kasten - sie fasst zusammen, ohne die
   Zeilen darin zu ersetzen. */
.ifc-gewerk-block[data-gewerk-block="gruppe"]{
  padding:5px 0 5px 8px;
  background:rgba(255,255,255,.04);
  border-left:2px solid rgba(255,255,255,.4);
  border-radius:0 5px 5px 0;
}

.ifc-gewerk-gruppenkopf{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:3px;
}

.ifc-gewerk-gruppenkopf span{
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ifc-gewerk-gruppenkopf b{
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}

.ifc-gewerk-zeile{
  position:relative;
}

.ifc-gewerk-zeile > button{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:3px 8px;
  width:100%;
  padding:3px 5px;
  color:inherit;
  font:inherit;
  text-align:left;
  background:none;
  border:0;
  border-radius:5px;
  cursor:pointer;
}

.ifc-gewerk-zeile > button:hover{
  background:rgba(255,255,255,.07);
}

.ifc-gewerk-zeile[data-gewaehlt] > button{
  background:rgba(49,220,232,.14);
  box-shadow:inset 0 0 0 1px rgba(49,220,232,.55);
}

.ifc-gewerk-titel{
  display:flex;
  flex-wrap:wrap;
  gap:4px 7px;
  align-items:center;
  min-width:0;
}

/* Die Farbe des Gewerks - dieselbe wie im Modell. Eine Untergruppe erbt sie
   nie von ihrem Obergewerk: waere sie rot wie die Heizung, waere sie im Bild
   nicht mehr von ihr zu trennen. */
.ifc-gewerk-titel > i{
  flex:none;
  width:12px;
  height:12px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:2px;
}

.ifc-gewerk-titel > i[data-gewerk-ohne-farbe]{
  background:rgba(255,255,255,.14);
  border-style:dashed;
}

.ifc-gewerk-name{
  overflow:hidden;
  color:var(--ifc-ink);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Der Einzug ist eine Formsache, dieser Satz ist die Aussage. Beides steht
   da: wer die Klammer uebersieht, liest sie im Text. */
.ifc-gewerk-marke{
  padding:1px 6px;
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  font-style:normal;
  letter-spacing:.04em;
  white-space:nowrap;
  border:1px solid rgba(49,220,232,.45);
  border-radius:20px;
}

.ifc-gewerk-kosten{
  /* Oben ausgerichtet, nicht gestreckt: bricht der Name auf zwei Zeilen um,
     soll die Zahl auf der Hoehe des Namens stehen und nicht in der Mitte
     eines hohen Kastens schweben. */
  align-self:start;
  color:var(--ifc-ink);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  font-weight:600;
  text-align:right;
  white-space:nowrap;
}

.ifc-gewerk-balken{
  display:block;
  grid-column:1 / -1;
  height:6px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border-radius:6px;
}

.ifc-gewerk-balken i{
  display:block;
  width:var(--width,0%);
  height:100%;
  background:var(--ifc-cyan,#31dce8);
  border-radius:6px;
}

/* Der Einzug samt Winkel: die Untergruppe haengt sichtbar an der Klammer
   ihrer Gruppe. */
.ifc-gewerk-zeile[data-rolle="unter"]{
  padding-left:18px;
}

.ifc-gewerk-zeile[data-rolle="unter"]::before{
  content:"";
  position:absolute;
  top:1px;
  left:5px;
  width:8px;
  height:12px;
  border-bottom:1px solid rgba(255,255,255,.45);
  border-left:1px solid rgba(255,255,255,.45);
  border-bottom-left-radius:3px;
}

.ifc-gewerk-liste-fuss{
  margin:7px 0 0;
  color:var(--ifc-muted);
  font-size:10px;
  line-height:1.45;
}

.ifc-gewerk-liste-fuss[hidden]{
  display:none;
}

@media(max-width:560px){
  .ifc-gewerk-liste{ padding:9px 10px 8px; }
  .ifc-gewerk-liste-kopf strong{ font-size:10px; }
  .ifc-gewerk-name{ font-size:11px; }
  .ifc-gewerk-kosten{ font-size:10px; }
}

.ifc-trade-picker{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:min(280px,100%);
}

.ifc-trade-picker span{
  color:var(--ifc-muted);
}

.ifc-trade-picker select{
  padding:9px 30px 9px 10px;
  border:1px solid var(--ifc-line);
  border-radius:6px;
  background:rgba(255,255,255,.05);
  color:var(--ifc-ink);
  font-size:13px;
}

.ifc-trade-tabs{
  display:flex;
  overflow-x:auto;
  gap:6px;
  margin:12px 0 10px;
  padding-bottom:4px;
}

.ifc-trade-tabs button{
  flex:0 0 auto;
  padding:7px 12px;
  border:1px solid var(--ifc-line);
  border-radius:999px;
  background:transparent;
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.ifc-trade-tabs button[aria-selected="true"]{
  border-color:var(--ifc-cyan);
  background:rgba(49,220,232,.14);
  color:var(--ifc-ink);
}

.ifc-trade-section{
  margin-bottom:16px;
}

.ifc-trade-section h4{
  margin:0 0 8px;
  color:var(--ifc-gold);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Breite Tabellen scrollen in sich, statt die Karte zu sprengen. */
.ifc-trade-table{
  display:block;
  overflow-x:auto;
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
}

.ifc-trade-table th,
.ifc-trade-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--ifc-line);
  text-align:left;
  white-space:nowrap;
}

.ifc-trade-table th{
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ifc-trade-table td.num,
.ifc-trade-table th.num{
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.ifc-trade-bars{
  display:grid;
  gap:5px;
}

.ifc-trade-bars .ifc-trade-row{
  grid-template-columns:minmax(0,150px) minmax(0,1fr) 62px;
}

.ifc-trade-classes{
  color:var(--ifc-muted);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  line-height:1.7;
}

.ifc-trade-empty{
  color:var(--ifc-muted);
  font-size:12px;
}

.ifc-trade-open{
  margin-bottom:12px;
  padding-left:12px;
  border-left:2px solid var(--ifc-gold);
}

.ifc-trade-open b{
  display:block;
  color:var(--ifc-gold);
  font-size:12px;
}

.ifc-trade-open p{
  margin:4px 0 0;
  color:var(--ifc-muted);
  font-size:12px;
  line-height:1.55;
}

/* ===== Steuerleiste ueber dem Modell =====
   Sie bestimmt alles darunter: Modellansicht, Kennzahlen und Unterlagen folgen
   dem gewaehlten Gewerk. Darum steht sie oben und nicht am Ende der Seite. */
.ifc-trade-control{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.ifc-trade-control .ifc-trade-picker{ flex:1 1 260px; }

.ifc-trade-controls{
  display:flex;
  /* Schrumpfen erlaubt: die Statuszeile darunter wird mit der Bauteilzahl
     laenger, und ohne `1` an zweiter Stelle waechst dieser Kasten mit ihr aus
     der Steuerleiste heraus. Gemessen auf 1440, dort fehlte das Ende. */
  flex:0 1 auto;
  min-width:0;
  /* Die Zeile darunter darf jetzt umbrechen, und damit wird dieser Kasten
     hoeher als seine runden Knoepfe. Ohne `flex-start` wuerden die sich auf
     die neue Hoehe strecken und zu Schlaeuchen werden - auf 390 gemessen.
     Und dort soll die Zeile eine eigene Reihe bekommen statt in einer
     Restspalte zu versickern, darum `wrap`. */
  flex-wrap:wrap;
  align-items:flex-start;
  gap:8px;
}

.ifc-trade-knopf{
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}

.ifc-trade-knopf[aria-pressed="true"]{
  border-color:var(--ifc-cyan,#31dce8);
  background:rgba(49,220,232,.14);
  color:#fff;
}

.ifc-trade-kopf{ margin:0 0 8px; }
.ifc-trade-kopf span{
  display:block;
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ifc-trade-kopf strong{
  display:block;
  margin-top:4px;
  font-family:var(--display,"Space Grotesk",sans-serif);
  font-size:19px;
}

@media(max-width:560px){
  .ifc-trade-control{ padding:10px; }
  .ifc-trade-controls{ width:100%; }
  .ifc-trade-knopf{ flex:1 1 0; justify-content:center; }
}

/* ===== Erkennungsbericht =====
   Er steht vor den Zahlen, weil er sagt, worauf sie beruhen. Zwei Stufen: eine
   Auswertung ohne jeden Raumtyp hat keine Gebaeudetechnik und muss auffallen;
   eine teilweise erkannte ist unvollstaendig und darf leiser sein. */
/* Was die Wahl des Landes an den Kosten aendert. Der Bauteilkatalog fuehrt
   Schweizer Referenzpreise; ohne diesen Satz waere der Faktor unsichtbar. */
.ifc-land-hinweis{
  color:rgba(49,220,232,.78);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.01em;
}

.ifc-trade-lod{
  display:grid;
  gap:3px;
  min-width:0;
  /* 220 px ist die Schwelle: bleibt neben den Knoepfen weniger uebrig, faellt
     die Zeile in eine eigene Reihe, statt sich in eine Restspalte zu quetschen. */
  flex:1 1 220px;
}

.ifc-trade-lod span{
  color:rgba(255,255,255,.5);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ifc-trade-lod select{
  width:100%;
  padding:9px 30px 9px 10px;
  color:var(--ifc-ink);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12.5px;
}

/* Ein unbehandeltes <select> zeichnet das Betriebssystem: heller Kasten,
   eigener Pfeil, weisses Klappmenue - mitten in einer dunklen Karte. Der
   Pfeil kommt als Bild in den Hintergrund, weil ein zusaetzliches Element
   davor die Bedienung schluckte. Die Eintraege bekommen ihre Farbe
   ausdruecklich: sonst zeichnet Windows sie schwarz auf weiss. */
.ifc-trade-picker select,
.ifc-trade-lod select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2331dce8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:11px 7px;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}

.ifc-trade-picker select:hover,
.ifc-trade-lod select:hover{
  border-color:rgba(49,220,232,.45);
}

.ifc-trade-picker select:focus-visible,
.ifc-trade-lod select:focus-visible{
  outline:2px solid rgba(49,220,232,.7);
  outline-offset:2px;
}

.ifc-trade-picker select option,
.ifc-trade-lod select option{
  color:#eef2f7;
  background:#0b1018;
}

/* Was aus den geplanten Bauteilen wurde: erzeugte Koerper, Leitungen, und
   was das geladene Modell schon fuehrt. Der Satz steht unter der Auswahl,
   weil er ihre Folge ist. */
.ifc-trade-lod-status{
  min-width:0;
  color:rgba(255,255,255,.62);
  font-size:11px;
  line-height:1.45;
  letter-spacing:.01em;
  overflow-wrap:anywhere;
}

.ifc-trade-lod select:focus-visible{
  border-color:rgba(49,220,232,.62);
  outline:0;
}

.ifc-geo{
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-left:3px solid rgba(98,220,230,.5);
  border-radius:10px;
  background:rgba(255,255,255,.028);
}

.ifc-geo-kopf{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  margin-bottom:8px;
}

.ifc-geo-kopf span{
  color:#62dce6;
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ifc-geo-kopf strong{
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:13px;
  font-weight:650;
}

.ifc-geo-liste{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:7px 16px;
  margin:0;
}

.ifc-geo-liste div{ min-width:0; }

.ifc-geo-liste dt{
  color:rgba(255,255,255,.5);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ifc-geo-liste dd{
  margin:1px 0 0;
  overflow:hidden;
  color:rgba(255,255,255,.82);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ifc-geo-hinweis{
  margin:8px 0 0!important;
  max-width:72ch;
  color:rgba(255,255,255,.62)!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}

.ifc-erkennung{
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid rgba(231,212,181,.35);
  border-left-width:3px;
  border-radius:10px;
  background:rgba(231,212,181,.05);
}

.ifc-erkennung[data-stufe="kritisch"]{
  border-color:rgba(231,143,143,.45);
  background:rgba(231,143,143,.06);
}

/* Eine Annahme ist keine Stoerung. Sie steht in der Farbe der Auswertung
   selbst - sichtbar, aber nicht als Alarm: die Zahlen sind brauchbar, sie
   ruhen nur auf der Gebaeudekategorie statt auf Raumbezeichnungen. */
.ifc-erkennung[data-stufe="annahme"]{
  border-color:rgba(98,220,230,.42);
  background:rgba(98,220,230,.05);
}

.ifc-erkennung[data-stufe="annahme"] .ifc-erkennung-marke{ color:#62dce6; }

.ifc-erkennung-kopf{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  margin-bottom:6px;
}

.ifc-erkennung-marke{
  color:var(--ifc-gold,#e7d4b5);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ifc-erkennung[data-stufe="kritisch"] .ifc-erkennung-marke{ color:#e78f8f; }

.ifc-erkennung-kopf strong{
  font-size:13.5px;
  font-weight:650;
}

.ifc-erkennung p{
  margin:0;
  max-width:72ch;
  color:rgba(255,255,255,.74);
  font-size:13px;
  line-height:1.55;
}

.ifc-erkennung-namen{
  margin-top:6px!important;
  color:rgba(255,255,255,.52)!important;
  font-size:12px!important;
}

/* SCHRITT 2 · GRUNDLAGE
   Zwei Karten nebeneinander, und die zweite sagt, dass sie noch nicht kann.
   Ein gesperrter Knopf ohne Begruendung sieht aus wie ein Fehler; mit der
   Marke "in Entwicklung" ist er eine Ankuendigung. */
.ifc-grundlage-wahl{
  position:relative;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;margin:6px 0 14px;
}
/* Seit dem 08.10.2026 ist die Wahl selbst die Ablage. Das Dateifeld liegt
   unsichtbar darin: ein Pixel mit Deckkraft null statt display:none, damit
   der Dialog beim Klick aus dem Skript sicher aufgeht, und ohne Zeiger,
   damit es den Klick auf die Karte nicht abfaengt. */
.ifc-grundlage-wahl input[type="file"]{
  position:absolute;top:0;left:0;width:1px;height:1px;
  opacity:0;pointer-events:none;
}
.ifc-grundlage-wahl.is-dragging{
  outline:1px dashed var(--ifc-cyan,#31dce8);outline-offset:7px;
}
.ifc-file-help i{ font-style:normal;color:rgba(255,255,255,.34); }
.ifc-grundlage-karte{
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  text-align:left;padding:16px 16px 18px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);color:inherit;font:inherit;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
.ifc-grundlage-karte:hover:not([disabled]){
  border-color:var(--ifc-cyan,#31dce8);background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.ifc-grundlage-karte[disabled]{cursor:not-allowed;opacity:.55}
.ifc-grundlage-karte strong{font:600 17px/1.2 "Space Grotesk","Segoe UI",sans-serif}
.ifc-grundlage-karte small{color:rgba(255,255,255,.66);font-size:12.5px;line-height:1.45}
.ifc-grundlage-marke{
  font:600 10.5px/1 ui-monospace,"Cascadia Mono",monospace;letter-spacing:.14em;
  color:var(--ifc-cyan,#31dce8);text-transform:uppercase;
}
.ifc-grundlage-marke[data-entwicklung]{color:#e0a23c}

/* SCHRITT 4 · GEBAEUDE UND SYSTEME
   Eine Seite, zwei Bloecke. Der zweite kann erst stehen, wenn das Modell
   uebertragen ist - solange zeigt er, worauf er wartet, und nicht eine
   leere Liste. */
.ifc-basis-systeme{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
}
.ifc-basis-systeme-kopf{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  justify-content:space-between;margin-bottom:8px;
}
.ifc-basis-systeme-kopf span{
  font:600 10.5px/1 ui-monospace,"Cascadia Mono",monospace;letter-spacing:.14em;
  color:var(--ifc-cyan,#31dce8);text-transform:uppercase;
}
.ifc-basis-systeme-kopf strong{
  font:500 12.5px/1.3 "Inter","Segoe UI",sans-serif;color:rgba(255,255,255,.7);
}
.ifc-basis-systeme[data-stand="wartet"] #ifcSystemwahlHinweis,
.ifc-basis-systeme[data-stand="wartet"] #ifcSystemwahlGrundlage,
.ifc-basis-systeme[data-stand="wartet"] #ifcSystemwahl,
.ifc-basis-systeme[data-stand="wartet"] #ifcSystemwahlWeiter,
.ifc-basis-systeme[data-stand="wartet"] #ifcSystemwahlUeberspringen{display:none}

/* Vor dem Transfer: der Projektbeschrieb steht, die Wahl erst auf Wunsch.
   Uebernommen wird sie mit dem Startknopf, ein eigener Knopf fehlt darum. */
.ifc-basis-systeme[data-stand="vorab"] #ifcSystemwahlGrundlage,
.ifc-basis-systeme[data-stand="vorab"] #ifcSystemwahlWeiter,
.ifc-basis-systeme[data-stand="vorab"] #ifcSystemwahlUeberspringen{display:none}
.ifc-basis-systeme[data-stand="vorab"]:not([data-anpassen="true"]) #ifcSystemwahlHinweis,
.ifc-basis-systeme[data-stand="vorab"]:not([data-anpassen="true"]) #ifcSystemwahl{display:none}
.ifc-projektbeschrieb{margin:0 0 14px}
.ifc-basis-systeme:not([data-stand="vorab"]) .ifc-projektbeschrieb{display:none}
.ifc-projektbeschrieb-satz{
  margin:0 0 10px;
  font:400 13.5px/1.5 "Inter","Segoe UI",sans-serif;color:rgba(255,255,255,.86);
}
.ifc-projektbeschrieb-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:6px;
}
@media (min-width:640px){
  .ifc-projektbeschrieb-liste{grid-template-columns:1fr 1fr;gap:6px 14px}
}
.ifc-projektbeschrieb-liste li{
  display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:baseline;
  padding:7px 10px;border-left:3px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.04);border-radius:0 8px 8px 0;
}
.ifc-projektbeschrieb-liste b{
  grid-row:span 2;align-self:center;
  font:700 10px/1 ui-monospace,"Cascadia Mono",monospace;letter-spacing:.08em;
  padding:4px 6px;border-radius:5px;background:rgba(255,255,255,.14);color:#f7f8fb;
}
.ifc-projektbeschrieb-liste span{
  font:500 11.5px/1.3 "Inter","Segoe UI",sans-serif;color:rgba(255,255,255,.6);
}
.ifc-projektbeschrieb-liste strong{
  font:600 13px/1.35 "Inter","Segoe UI",sans-serif;color:#f7f8fb;
}
.ifc-projektbeschrieb-liste em{
  font-style:normal;margin-left:6px;
  font:600 10px/1 ui-monospace,"Cascadia Mono",monospace;letter-spacing:.06em;
  color:var(--ifc-cyan,#31dce8);text-transform:uppercase;
}

/* Die Bildlaufleiste des Systems ist hell und breit und sass im Bild vom
   08.09.2026 wie ein Fremdkoerper am Rand der Karte. Firefox nimmt
   scrollbar-width oben, die uebrigen diese Regeln. */
.ifc-simulator-shell::-webkit-scrollbar{
  width:9px;
}

.ifc-simulator-shell::-webkit-scrollbar-track{
  background:transparent;
}

.ifc-simulator-shell::-webkit-scrollbar-thumb{
  background:rgba(49,220,232,.3);
  border:2px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}

.ifc-simulator-shell::-webkit-scrollbar-thumb:hover{
  background:rgba(49,220,232,.52);
  background-clip:content-box;
}

/* =====================================================================
   DAS ANMELDEFENSTER UND DIE VOLLANSICHT
   =====================================================================

   Zwei Dinge stehen hier, und sie gehoeren zusammen: die Karte, mit der sich
   ein Gast anmeldet, und die Seite, auf der er danach landet.

   Die Karte folgt WISSENSBANK/shared/16-auth-overlay-card-standard.md und
   sieht aus wie die Anmeldung der App (LoginView): weisse Karte auf
   schwarzem Grund, Marke, braune Linie, graue Felder, brauner Knopf, darunter
   Apple und Google als runde Knoepfe. Sie geht schmal auf, mit einem
   Ladezustand, und oeffnet sich dann in die Anmeldung: dieselbe Karte, nur
   hoeher. Kein zweites Fenster, kein harter Wechsel. Die Vorgabe verlangt
   eigene Bezeichner fuer die Farben, damit eine andere Firmenfarbe nur diese
   Zeilen anfasst und nicht dreissig Regeln.

   Anders als in der App gibt es hier kein Kennwort und keine Haken: der
   Zugangscode per E-Mail oder Apple und Google genuegen, und die Bedingungen
   gelten mit der Anmeldung. Der Satz dazu steht unten auf der Karte.

   Das Braun der Linie (#9a8a78) traegt keine Schrift, auf Weiss erreicht es
   nur 3.3 zu 1. Knopf, Verweise und leise Texte haben darum eigene, dunklere
   Toene, die fuer Schrift reichen.
   ===================================================================== */

.ifc-gate{
  --auth-background:rgba(5,5,5,.86);
  --auth-background-accent:rgba(154,138,120,.12);
  --auth-card-background:#fff;
  --auth-card-stroke:rgba(0,0,0,.06);
  --auth-card-shadow:0 15px 40px rgba(0,0,0,.5);
  --auth-brand-text:#000;
  --auth-subtitle-text:#9a8a78;
  --auth-accent:#9a8a78;
  --auth-accent-track:rgba(154,138,120,.2);
  --auth-body-text:#111;
  --auth-muted-text:#737373;
  --auth-link:#7a6a58;
  --auth-link-hover:#5e5040;
  --auth-input-background:#f5f5f5;
  --auth-input-stroke:#e3e3e3;
  --auth-input-placeholder:#6e6e6e;
  --auth-primary-action:#837360;
  --auth-primary-action-hover:#74654f;
  --auth-primary-action-text:#fff;
  --auth-secondary-action:#4a4a4a;
  --auth-secondary-stroke:#d6d6d6;
  --auth-status-success:#177a42;
  --auth-status-warning:#9a6a1f;
  --auth-status-error:#c0392b;
  --auth-font:Poppins,"Space Grotesk",system-ui,sans-serif;

  position:fixed;
  inset:0;
  z-index:12400;
  display:grid;
  /* Eine Spalte und eine Zeile, die nie breiter oder hoeher werden als der
     Platz innerhalb der sicheren Raender. Daran misst sich die Karte. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  color:var(--auth-body-text);
  isolation:isolate;
}

.ifc-gate[hidden]{display:none}

.ifc-gate-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:var(--auth-background);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:0;
  border-radius:0;
  cursor:default;
}

/* Die Karte: 420 px am Schirm, auf dem Telefon 360 px wie in der App. Breite
   und Hoehe haengen am Raster und nicht an 100vw oder 100dvh: so bleibt sie
   innerhalb der sicheren Raender, und was nicht passt, rollt in der Karte. */
.ifc-gate-card{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(420px,100%);
  max-height:100%;
  padding:30px 26px 22px;
  overflow-y:auto;
  overscroll-behavior:contain;
  color:var(--auth-body-text);
  font-family:var(--auth-font);
  background:var(--auth-card-background);
  border:1px solid var(--auth-card-stroke);
  border-radius:16px;
  box-shadow:var(--auth-card-shadow);
  animation:ifc-gate-auf .34s cubic-bezier(.2,.9,.25,1) both;
}

@media (max-width:520px){
  .ifc-gate-card{width:min(360px,100%)}
}

@keyframes ifc-gate-auf{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

.ifc-gate-brand{
  display:grid;
  justify-items:center;
  gap:4px;
  text-align:center;
}

.ifc-gate-brand img{
  width:55px;
  height:55px;
  margin-bottom:6px;
  object-fit:contain;
}

.ifc-gate-brand strong{
  color:var(--auth-brand-text);
  font-family:var(--auth-font);
  font-size:24px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.08em;
}

.ifc-gate-brand span{
  color:var(--auth-subtitle-text);
  font-family:var(--auth-font);
  font-size:11px;
  font-weight:700;
  letter-spacing:.32em;
}

/* Die kurze braune Linie der App. Waehrend geladen wird, laeuft ein Licht
   darin; steht die Anmeldung, ist sie ruhig und voll. Eine Linie, die sich
   nicht bewegt, waehrend etwas laeuft, sieht aus wie ein Stillstand. */
.ifc-gate-linie{
  position:relative;
  width:120px;
  height:2px;
  margin:18px auto 16px;
  overflow:hidden;
  background:var(--auth-accent-track);
  border-radius:2px;
}

.ifc-gate-linie i{
  position:absolute;
  inset:0 auto 0 0;
  width:38%;
  background:linear-gradient(90deg,transparent,var(--auth-accent),transparent);
  transform:translateX(-100%);
}

.ifc-gate[data-gate-state="laden"] .ifc-gate-linie i{
  animation:ifc-gate-lauf 1.15s linear infinite;
}

.ifc-gate:not([data-gate-state="laden"]) .ifc-gate-linie i{
  width:100%;
  transform:none;
  background:var(--auth-accent);
}

@keyframes ifc-gate-lauf{
  from{transform:translateX(-100%)}
  to{transform:translateX(320%)}
}

.ifc-gate-kopf{
  text-align:center;
}

.ifc-gate-kopf h2{
  margin:0 0 4px;
  color:var(--auth-body-text);
  font-family:var(--auth-font);
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
}

.ifc-gate-kopf p{
  margin:0;
  color:var(--auth-muted-text);
  font-size:12.5px;
  line-height:1.5;
}

/* Der Koerper waechst, statt zu springen. Die Hoehe wird beim Wechsel kurz
   festgeschrieben und danach wieder freigegeben: so laeuft die Karte auf,
   ohne dass ein fester Wert im Stylesheet stuende, der bei laengerem Text
   falsch waere. Innenabstand und Gegenrand halten den Fokusring der Felder
   frei, den overflow:hidden sonst abschnitte. border-box, weil die Hoehe aus
   scrollHeight kommt und der Innenabstand darin schon steckt. */
.ifc-gate-koerper{
  box-sizing:border-box;
  margin:12px -6px 0;
  padding:6px;
  overflow:hidden;
  transition:height .32s cubic-bezier(.2,.9,.25,1);
}

.ifc-gate-panel[hidden]{display:none}

.ifc-gate-panel{
  animation:ifc-gate-panel-auf .3s ease both;
}

@keyframes ifc-gate-panel-auf{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Der Ladezustand ist leer: was geschieht, sagen die laufende Linie und die
   Ueberschrift. Die paar Punkte Hoehe braucht die Messung, mit der der
   Koerper danach auflaeuft. */
.ifc-gate-panel[data-gate-view="laden"]{
  min-height:4px;
}

.ifc-gate-hinweis{
  margin:0 0 12px;
  color:var(--auth-muted-text);
  font-size:12.5px;
  line-height:1.5;
  text-align:center;
}

.ifc-gate-fertig{
  margin:0 0 14px;
  color:var(--auth-status-success);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  text-align:center;
}

.ifc-gate-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.ifc-gate-fuss{
  margin:18px 0 0;
  color:var(--auth-muted-text);
  font-size:11px;
  line-height:1.55;
  text-align:center;
}

.ifc-gate-fuss a{
  color:var(--auth-link);
  text-decoration:underline;
  text-underline-offset:2px;
}

.ifc-gate-fuss a:hover{
  color:var(--auth-link-hover);
}

/* Die Felder wie in der App: grau, ohne Beschriftung darueber, der Name
   steht als Platzhalter im Feld. Die Beschriftung bleibt fuer
   Vorleseprogramme im Dokument. 16 px Schrift, sonst vergroessert Safari auf
   dem iPhone beim Antippen die Seite. */
.ifc-gate .ifc-guest-form > label{
  position:relative;
  display:block;
}

.ifc-gate .ifc-guest-form > label > span{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.ifc-gate .ifc-guest-form input:not([type="checkbox"]){
  box-sizing:border-box;
  width:100%;
  min-height:45px;
  padding:0 15px;
  color:var(--auth-body-text);
  background:var(--auth-input-background);
  border:1px solid var(--auth-input-stroke);
  border-radius:8px;
  outline:0;
  font-family:inherit;
  font-size:16px;
  line-height:1.2;
}

.ifc-gate .ifc-guest-form input.ifc-code-input{
  min-height:56px;
}

.ifc-gate .ifc-guest-form input::placeholder{
  color:var(--auth-input-placeholder);
  opacity:1;
}

.ifc-gate .ifc-guest-form input.ifc-code-input::placeholder{
  color:#b5b5b5;
}

.ifc-gate .ifc-guest-form input:focus{
  border-color:var(--auth-accent);
  box-shadow:0 0 0 3px rgba(154,138,120,.22);
}

/* Die Knoepfe wie in der App: 45 px hoch, Satzschrift statt Versalien, kein
   Puls. Der Knopf ist eine Stufe dunkler als die Linie, damit die weisse
   Schrift darauf lesbar ist (4.58 zu 1). */
.ifc-gate .ifc-simulator-primary,
.ifc-gate .ifc-simulator-secondary{
  min-height:45px;
  padding:10px 16px;
  border-radius:8px;
  font-family:var(--auth-font);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  box-shadow:none;
}

.ifc-gate .ifc-simulator-primary{
  color:var(--auth-primary-action-text);
  background:var(--auth-primary-action);
  border:1px solid transparent;
  animation:none;
}

.ifc-gate .ifc-simulator-primary:hover{
  transform:none;
  background:var(--auth-primary-action-hover);
}

.ifc-gate .ifc-simulator-primary:disabled{
  color:var(--auth-primary-action-text);
  background:var(--auth-primary-action);
  border-color:transparent;
  opacity:.55;
  cursor:default;
}

.ifc-gate .ifc-simulator-secondary{
  color:var(--auth-secondary-action);
  background:transparent;
  border:1px solid var(--auth-secondary-stroke);
}

.ifc-gate .ifc-simulator-secondary:hover{
  background:var(--auth-input-background);
  border-color:#c4c4c4;
}

.ifc-gate .ifc-simulator-primary:focus-visible,
.ifc-gate .ifc-simulator-secondary:focus-visible{
  outline:2px solid var(--auth-accent);
  outline-offset:3px;
}

/* Fehler auf der hellen Karte: dunkles Rot auf blassem Grund. Die
   Grundregel ist fuer den dunklen Simulator gebaut und waere hier kaum
   lesbar. */
.ifc-gate .ifc-simulator-error{
  margin:0;
  color:#a93226;
  background:#fdecea;
  border-left:2px solid var(--auth-status-error);
  border-radius:6px;
}

.ifc-gate #ifcAuthProviderError{
  margin-top:12px;
}

/* Der Trenner der App: ODER zwischen zwei feinen Linien. Der Innenabstand
   links gleicht die Laufweite nach dem letzten Buchstaben aus. */
.ifc-gate-oder{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0 14px;
  color:var(--auth-muted-text);
  font-family:var(--auth-font);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}

.ifc-gate-oder span{
  padding-left:.2em;
}

.ifc-gate-oder::before,
.ifc-gate-oder::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--auth-input-stroke);
}

.ifc-auth-choice[hidden],
.ifc-auth-apple[hidden],
.ifc-auth-google[hidden]{display:none}

.ifc-auth-knoepfe{
  display:flex;
  justify-content:center;
  gap:18px;
}

/* Apple und Google als runde Knoepfe, 56 px wie in der App. Apple schwarz
   mit weissem Zeichen, Google weiss mit feinem Rand, wie beide Anbieter es
   fuer hellen Grund vorsehen. */
.ifc-auth-apple,
.ifc-auth-google{
  display:grid;
  width:56px;
  height:56px;
  flex:0 0 56px;
  place-items:center;
  padding:0;
  border-radius:50%;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .18s ease,box-shadow .18s ease;
}

.ifc-auth-apple{
  color:#fff;
  background:#000;
  border:1px solid #000;
}

.ifc-auth-google{
  color:#1f1f1f;
  background:#fff;
  border:1px solid #dadce0;
}

.ifc-auth-apple:hover,
.ifc-auth-google:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}

.ifc-auth-apple svg{
  width:20px;
  height:24px;
  /* Der Apfel sitzt in seinem Feld leicht tief. */
  transform:translateY(-1px);
}

.ifc-auth-google svg{
  width:22px;
  height:22px;
}

.ifc-gate .ifc-auth-apple:focus-visible,
.ifc-gate .ifc-auth-google:focus-visible{
  outline:2px solid var(--auth-accent);
  outline-offset:3px;
}

/* Ohne Bewegung steht die Linie voll da. Der Waehler traegt den Zustand mit,
   sonst gewaenne die Regel fuer den Ladezustand und die Linie liefe weiter. */
@media (prefers-reduced-motion:reduce){
  .ifc-gate-card,
  .ifc-fach-karte,
  .ifc-gate-panel{animation:none}
  .ifc-gate-koerper{transition:none}
  .ifc-gate[data-gate-state] .ifc-gate-linie i{
    width:100%;
    transform:none;
    background:var(--auth-accent);
    animation:none;
  }
  .ifc-auth-apple,
  .ifc-auth-google{transition:none}
}


/* =====================================================================
   VOLLANSICHT: /konfigurator/
   =====================================================================

   Hier steht das Modell nicht mehr in einer Kachel, sondern fuellt den
   Schirm - und die Konfiguration liegt darueber. Das ist der Unterschied zur
   Startseite: dort ist die Analyse der Inhalt und das Modell die Beigabe,
   hier ist es umgekehrt.

   Technisch wird nichts neu gebaut. Es ist dasselbe Fenster, dieselbe
   Leinwand, derselbe Ablauf; nur der Platz ist anders verteilt. Zwei
   Anwendungen fuer denselben Weg waeren zwei Wahrheiten. */

body.pcm-konfigurator{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(49,220,232,.07),transparent 62%),
    linear-gradient(180deg,#070c13,#05070c);
  color:var(--ifc-ink,#f7f8fb);
  overflow:hidden;
}

/* Die Leinwand liegt hinter allem und fuellt den Schirm. Sie deckt selbst,
   weil sie durchsichtig ist - sonst stuende die Seite mitten im Bauwerk. */
body.pcm-konfigurator .ifc-live-model{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100dvh;
  max-height:none;
  margin:0;
  border:0;
  border-radius:0;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(49,220,232,.07),transparent 62%),
    linear-gradient(180deg,#070c13,#05070c);
}

/* Die Buehne der laufenden Analyse traegt die Leinwand, solange gerechnet
   wird. Sie darf dabei keinen eigenen Platz beanspruchen: ihr Kind liegt
   fest, sie selbst waere sonst ein leerer Kasten im Panel.
   `display:none` verboete sich - damit verschwaende auch das Kind. */
body.pcm-konfigurator .ifc-live-buehne{
  min-height:0;
  height:0;
  margin:0;
  padding:0;
  overflow:visible;
  background:none;
  border:0;
}

body.pcm-konfigurator .ifc-live-buehne-satz{display:none}

/* Die Statuszeile haengt an der Oberkante der Karte, links, dem Knopf
   "Sicht frei" gegenueber, auf jedem Schirm. Bis zum 14.09.2026 stand sie
   am breiten Schirm oben links, und die Karte war dort eine Spalte am
   rechten Rand. Wo die Oberkante liegt, weiss nur die Karte: ihre Hoehe
   folgt dem Inhalt, und ein Beobachter schreibt sie als `--konfig-karte`
   an den Koerper. Ist die Sicht frei, bleibt von der Karte ein Griff von
   62px. Am breiten Schirm ist die Karte 560px breit und steht mittig; die
   Zeile beginnt acht Pixel innerhalb ihrer linken Kante, und neben dem
   Knopf bleiben ihr 386px. Die zweite Zeile bricht darum um, statt
   gekuerzt zu werden. */
body.pcm-konfigurator .ifc-live-model-status{
  left:calc(50% - 272px);
  top:auto;
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--konfig-karte,0px) + 10px);
  max-width:386px;
  transition:bottom .3s cubic-bezier(.2,.9,.25,1);
}

body.pcm-konfigurator .ifc-live-model-status strong{
  white-space:normal;
}

body.pcm-konfigurator.ifc-konfig-sicht .ifc-live-model-status{
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px + 10px);
}

/* Passt die Zeile nicht zwischen Legende und Karte, weicht sie in ihren
   alten Platz oben links aus: auf kurzen oder quer gehaltenen Telefonen
   reicht die Legende bis an die Karte, am breiten Schirm eine lange
   Legende ueber einer hohen Karte, und angedockt laege die Zeile auf ihr.
   Das entscheidet das Skript und setzt `ifc-status-oben`. Breite und
   Umbruch bleiben wie angedockt, damit die Zeile an beiden Plaetzen gleich
   hoch ist und die Rechnung nicht kippt. */
body.pcm-konfigurator.ifc-status-oben .ifc-live-model-status{
  left:max(16px,env(safe-area-inset-left));
  top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  bottom:auto;
}

body.pcm-konfigurator .ifc-live-model-gross{display:none}

/* Die Legende steht in der Vollansicht **oben**, nicht unten.

   Unten liegt die Konfiguration, eine Karte ueber hoechstens zwei Dritteln
   des Schirms. Eine Legende am unteren Rand waere dort verdeckt, und ein
   Bild ohne Legende erklaert sich nicht mehr selbst: genau dafuer steht sie
   im Kasten und nicht daneben. Am breiten Schirm nimmt sie oben links den
   Platz, den bis zum 14.09.2026 die Statuszeile hatte. Steht die Zeile
   oben, weil sie ausgewichen ist oder weil das Dock ohne fertiges Modell
   steht, rueckt die Legende darunter. Auf dem Telefon steht sie immer als
   Band unter dem Schalter, siehe unten. */
body.pcm-konfigurator .ifc-raum-legende{
  left:max(16px,env(safe-area-inset-left));
  top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  bottom:auto;
}

body.pcm-konfigurator.ifc-status-oben .ifc-raum-legende,
body.pcm-konfigurator.ifc-konfig-dock .ifc-raum-legende{
  top:calc(max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px)) + 44px);
}

/* Legende, Schalter und die ausgewichene Statuszeile haengen im
   Modellkasten, und der deckt seit dem 07.10.2026 den ganzen Schirm. Bis zum
   Abend des 07.10.2026 wichen alle drei um `--konfig-seite` nach rechts aus,
   weil das Faktenfeld quer am linken Rand stand. Es steht nicht mehr dort,
   siehe die Eigenschaftenkarte weiter unten: links ist frei. */
body.pcm-konfigurator .ifc-raum-schalter{
  bottom:max(16px,env(safe-area-inset-bottom));
  left:max(16px,env(safe-area-inset-left));
  right:auto;
}

/* Das Konfigurationsfenster wird zur Karte am unteren Rand, einer
   Schublade. Sie nimmt hoechstens zwei Drittel der Hoehe: das obere Drittel
   gehoert dem Modell, sonst koennte man die Vollansicht auch weglassen. Der
   Hintergrund bleibt frei: wer konfiguriert, will sehen, woran. Am breiten
   Schirm steht sie mittig und 560px breit, auf dem Telefon ueber die ganze
   Breite. Bis zum 14.09.2026 war sie am breiten Schirm eine Spalte am
   rechten Rand; seither sieht er aus wie das Telefon. */
body.pcm-konfigurator .ifc-simulator{
  place-items:end stretch;
  justify-content:center;
  padding:0;
  pointer-events:none;
}

body.pcm-konfigurator .ifc-simulator-backdrop{display:none}

body.pcm-konfigurator .ifc-simulator-shell{
  pointer-events:auto;
  width:min(560px,calc(100vw - 16px));
  max-height:min(66dvh,720px);
  margin:0 0 max(8px,env(safe-area-inset-bottom));
  padding:16px 16px 18px;
  background:linear-gradient(158deg,rgba(20,18,32,.93),rgba(4,8,14,.95) 62%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:18px 18px 12px 12px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}

/* Auf dem Telefon spannt sich die Karte ueber die ganze Breite, bis auf
   acht Pixel je Seite. */
@media (max-width:860px){
  body.pcm-konfigurator .ifc-simulator{
    justify-content:stretch;
  }
  body.pcm-konfigurator .ifc-simulator-shell{
    width:auto;
    margin:0 8px max(8px,env(safe-area-inset-bottom));
  }
  /* Hochkant nimmt die Schublade den ganzen unteren Rand: dort ist fuer den
     Schalter kein Platz mehr. Er wandert nach oben rechts, und die Legende
     spannt sich als Band darunter. Bis zum 08.09.2026 stand hier
     `display:none`: das war bequem und falsch, denn damit war der
     Screenshot der Vollansicht auf dem Telefon der einzige ohne Legende.
     Die Statuszeile stand bis zum 11.09.2026 oben links, dem Schalter
     gegenueber, bei laufender Analyse 474px ueber der Karte. Sie haengt
     jetzt an der Karte, siehe oben. */
  body.pcm-konfigurator .ifc-raum-legende{
    right:max(16px,env(safe-area-inset-right));
    top:calc(max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px)) + 44px);
  }

  body.pcm-konfigurator .ifc-raum-legende [data-raum-hinweis]{
    padding-right:0;
  }

  body.pcm-konfigurator .ifc-raum-schalter{
    top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
    right:max(16px,env(safe-area-inset-right));
    bottom:auto;
    left:auto;
  }

  /* Auf dem Telefon beginnt die Statuszeile am linken Rand des Schirms,
     denn die Karte nimmt die ganze Breite. Neben dem Knopf bleiben ihr rund
     200px. */
  body.pcm-konfigurator .ifc-live-model-status{
    left:max(16px,env(safe-area-inset-left));
    max-width:calc(100% - 190px);
  }
}

/* Der Knopf, mit dem man das Fenster schliesst, heisst hier nicht
   "schliessen", sondern raeumt die Sicht frei. Weg ist er nie: sonst kaeme
   man an die Zahlen nicht mehr heran. Die Karte faehrt dafuer hinunter, bis
   auf einen Griff von 62px. */
body.pcm-konfigurator.ifc-konfig-sicht .ifc-simulator-shell{
  transform:translateY(calc(100% - 62px));
  transition:transform .3s cubic-bezier(.2,.9,.25,1);
}

body.pcm-konfigurator .ifc-simulator-shell{
  transition:transform .3s cubic-bezier(.2,.9,.25,1);
}

/* Das Wasserzeichen steht in der Vollansicht im freien Teil des Schirms.
   Ueber den ganzen Kasten gelegt, laege seine Mitte hinter der Karte, und
   auf dem Bildschirmfoto stuende das Logo nur halb. Es endet darum an der
   Oberkante der Karte. Wird die Sicht frei, faehrt es mit der Karte. */
body.pcm-konfigurator .ifc-live-model::before{
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--konfig-karte,0px));
  opacity:.08;
  transition:bottom .3s cubic-bezier(.2,.9,.25,1);
}

body.pcm-konfigurator.ifc-konfig-sicht .ifc-live-model::before{
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px);
}

/* ==================================================================
   Die Vollansicht: was nur auf /konfigurator/ vorkommt
   ==================================================================

   Die Lage der Karte, des Betrachters und der Buehne steht weiter oben im
   Block `body.pcm-konfigurator`. Hier stehen die drei Dinge, die es nur auf
   dieser Seite gibt: der unsichtbare Eingang, die Wartekarte und der Knopf,
   der die Sicht freiraeumt. */

/* Der Eingang.

   `ifc-twin-simulator.js` bindet sich an genau diesen Knopf und oeffnet auf
   seinen Klick das Fenster. Auf dieser Seite klickt niemand: der Ablauf tut
   es selbst, sobald die Uebergabe gelesen ist. Der Knopf muss trotzdem im
   Baum stehen - ohne ihn startet das Modul gar nicht.

   Nicht `display:none`: ein Knopf, den es nicht gibt, laesst sich auch nicht
   anklicken, und `click()` liefe ins Leere. Er steht also da, nur eben
   ausserhalb des Bildes. */
.konfig-eingang{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* Die Wartekarte.

   Zwischen dem Klick im ersten Fenster und dem gelesenen Modell liegen ein
   paar hundert Millisekunden, beim Oeffnen eines Projekts aus dem Datenraum
   auch einige Sekunden. Eine schwarze Flaeche in dieser Zeit sieht aus wie
   ein Fehler, darum steht hier eine Karte im Aussehen der App: weiss auf
   Schwarz, die Marke, ein Balken und darunter der Schritt, der gerade
   laeuft. Sie verschwindet, sobald das Modell da ist, und bleibt stehen,
   wenn es nicht kommt, dann mit dem Weg zurueck zur Analyse.

   Die Spalte ist minmax(0,1fr), und die Karte misst sich an ihr statt an
   100vw. Bis zum 13.09.2026 stand dort 100vw mit dem Innenabstand obendrauf,
   und auf dem iPhone lief die Karte rechts aus dem Schirm. margin:auto
   stellt sie in die Mitte; ist der Schirm quer zu niedrig, beginnt sie oben
   und laesst sich rollen, statt oben abgeschnitten zu werden. */
.konfig-warten{
  position:fixed;
  inset:0;
  z-index:12600;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  box-sizing:border-box;
  padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  overflow-y:auto;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(49,220,232,.07),transparent 62%),
    linear-gradient(180deg,#070c13,#05070c);
  transition:opacity .4s ease;
}

.konfig-warten[data-stand="fertig"]{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}

.konfig-warten-karte{
  box-sizing:border-box;
  width:min(420px,100%);
  margin:auto;
  display:grid;
  gap:14px;
  justify-items:center;
  padding:30px 26px 26px;
  color:var(--ifc-ink);
  font-family:Poppins,"Space Grotesk",system-ui,sans-serif;
  text-align:center;
  background:rgba(6,10,16,.86);
  border:1px solid rgba(49,220,232,.36);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}

@media (max-width:520px){
  .konfig-warten-karte{
    width:min(360px,100%);
    padding:26px 22px 22px;
  }
}

.konfig-warten-marke{
  display:grid;
  gap:4px;
  justify-items:center;
}

.konfig-warten-marke img{
  width:55px;
  height:55px;
  margin-bottom:6px;
  object-fit:contain;
}

.konfig-warten-marke strong{
  color:var(--ifc-ink);
  font-family:inherit;
  font-size:24px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.08em;
}

.konfig-warten-marke span{
  color:var(--ifc-cyan);
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.32em;
}

.konfig-warten-satz{
  margin:0;
  color:var(--ifc-ink);
  font-size:14px;
  font-weight:600;
  line-height:1.5;
}

/* Der Balken steht fuer die Schritte, die wirklich geschehen: das Skript
   setzt seine Breite je Schritt und schreibt darunter, was gerade laeuft.
   Das Licht darin zeigt, dass gearbeitet wird, auch wenn ein Schritt
   dauert. */
.konfig-warten-balken{
  position:relative;
  width:100%;
  height:4px;
  overflow:hidden;
  background:rgba(49,220,232,.14);
  border-radius:2px;
}

.konfig-warten-balken i{
  position:relative;
  display:block;
  width:8%;
  height:100%;
  overflow:hidden;
  background:var(--ifc-cyan);
  border-radius:inherit;
  transition:width .45s cubic-bezier(.2,.9,.25,1);
}

.konfig-warten-balken i::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);
  animation:konfig-balken-licht 1.4s ease-in-out infinite;
}

@keyframes konfig-balken-licht{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

.konfig-warten-hinweis{
  margin:-4px 0 0;
  min-height:1.5em;
  color:var(--ifc-muted);
  font-size:12.5px;
  line-height:1.5;
}

/* Steht die Karte, weil kein Modell kommt oder eine Datei fehlt, gehen
   Balken und Hinweis weg: eine laufende Anzeige waere dann eine Zusage, die
   niemand einloest. */
.konfig-warten[data-stand="leer"] .konfig-warten-balken,
.konfig-warten[data-stand="leer"] .konfig-warten-hinweis,
.konfig-warten[data-stand="datei"] .konfig-warten-balken,
.konfig-warten[data-stand="datei"] .konfig-warten-hinweis{
  display:none;
}

.konfig-warten-weg,
.konfig-warten-datei{
  display:none;
  align-items:center;
  justify-content:center;
}

.konfig-warten[data-stand="leer"] .konfig-warten-weg,
.konfig-warten[data-stand="datei"] .konfig-warten-weg,
.konfig-warten[data-stand="datei"] .konfig-warten-datei{
  display:inline-flex;
}

/* Die Knoepfe der Karte in den Farben des Konfigurators, 45 px,
   Satzschrift, kein Puls. */
.konfig-warten-karte .ifc-simulator-primary{
  min-height:45px;
  color:#101116;
  background:linear-gradient(130deg,#7af7ff,#c6a2ff);
  border:1px solid rgba(255,255,255,.84);
  border-radius:8px;
  box-shadow:none;
  animation:none;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  text-decoration:none;
}

.konfig-warten-karte .ifc-simulator-primary:hover{
  transform:none;
  background:linear-gradient(130deg,#95ffff,#e8c1ff);
}

/* Ein Projekt aus dem Datenraum, dessen IFC nicht auf diesem Geraet liegt:
   dann wird sie hier einmal gewaehlt. Der Weg zurueck steht leiser
   darunter. */
.konfig-warten-datei{
  position:relative;
}

.konfig-warten-datei input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.konfig-warten-datei:focus-within,
.konfig-warten-karte .ifc-simulator-primary:focus-visible{
  outline:3px solid rgba(49,220,232,.6);
  outline-offset:3px;
}

.konfig-warten[data-stand="datei"] .konfig-warten-weg{
  color:var(--ifc-ink);
  background:transparent;
  border-color:rgba(49,220,232,.36);
}

.konfig-warten[data-stand="datei"] .konfig-warten-weg:hover{
  background:rgba(49,220,232,.1);
}

/* Der Knopf, der die Sicht freiraeumt.

   Das Modell fuellt den Schirm, die Konfiguration liegt darueber, und wer
   das Netz in Ruhe ansehen will, braucht die Konfiguration einen Moment
   nicht. Der Knopf schiebt sie nach unten und holt sie zurueck. Er bleibt
   sichtbar: ohne ihn kaeme man an die Zahlen nicht mehr heran. */
.konfig-sicht{
  position:fixed;
  /* An der Oberkante der Karte, rechts, der Statuszeile gegenueber. Am
     breiten Schirm ist die Karte 560px breit und steht mittig: der Knopf
     endet acht Pixel innerhalb ihrer rechten Kante. Auf dem Telefon steht
     er am rechten Rand, siehe unten. Die Hoehe der Karte schreibt ein
     Beobachter als `--konfig-karte` an den Koerper. Am breiten Schirm
     stand der Knopf bis zum 14.09.2026 oben, links neben der Spalte. */
  right:calc(50% - 272px);
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--konfig-karte,0px) + 10px);
  z-index:12550;
  padding:9px 15px;
  border:1px solid rgba(49,220,232,.36);
  border-radius:999px;
  background:rgba(6,10,16,.82);
  backdrop-filter:blur(8px);
  color:var(--ifc-cyan);
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,bottom .3s cubic-bezier(.2,.9,.25,1);
}

.konfig-sicht:hover{
  border-color:rgba(49,220,232,.62);
  background:rgba(10,16,24,.9);
}

/* Ist die Sicht frei, bleibt von der Karte ein Griff von 62px, und der
   Knopf faehrt mit hinunter. Die Seite wechselt er nicht: ein Schalter, der
   seinen Platz wechselt, sucht sich beim zweiten Mal niemand. */
body.ifc-konfig-sicht .konfig-sicht{
  bottom:calc(max(8px,env(safe-area-inset-bottom)) + 62px + 10px);
}

/* Solange die Wartekarte steht, gibt es nichts freizuraeumen. */
.konfig-warten:not([data-stand="fertig"]) ~ .konfig-sicht{
  display:none;
}

/* Auf dem Telefon nimmt die Karte die ganze Breite, und der Knopf steht am
   rechten Rand des Schirms. Bis zum 11.09.2026 stand er dort, wo die
   hoechste Schublade endet (`min(66dvh,720px)`). Die Karte der laufenden
   Analyse ist aber kurz, und auf dem iPhone schwebte der Knopf weit ueber
   ihr mitten im Modell: gemessen 237px ueber ihrer Oberkante, auf
   390 x 844 px. */
@media (max-width:860px){
  .konfig-sicht{
    right:max(16px,env(safe-area-inset-right));
  }
}

/* Der Schliessknopf hat in der Vollansicht kein Ziel: hinter dem Fenster
   liegt keine Seite, auf die man zurueckfaende, sondern nur das Modell ohne
   seine Zahlen. Diese Aufgabe hat hier "Sicht frei", und die ist umkehrbar. */
body.pcm-konfigurator .ifc-simulator-close{
  display:none;
}

@media (prefers-reduced-motion:reduce){
  .konfig-warten-balken i{ transition:none; }
  .konfig-warten-balken i::after{ animation:none; opacity:0; }
}

/* Das Overlay oben.

   Fortschritt und Schritte stehen getrennt: oben mittig ein eigenes kleines
   Overlay mit dem Balken, unten in der Karte, was gerade geschieht. Hat das
   Modell geladen, steht oben statt des Balkens nur die Gewerkwahl; alle
   Angaben zum Gewerk bleiben unten. Das Skript haengt beide Teile hierher
   um und schreibt die Unterkante als `--konfig-kopf` an den Koerper:
   Legende und Schalter beginnen darunter, die Statuszeile, wenn sie oben
   steht, und der Betrachter rahmt das Bauwerk unter ihm. Es steht mittig
   ueber die ganze Breite; am breiten Schirm stand es bis zum 14.09.2026
   ueber dem freien Teil links der Spalte. */
body.pcm-konfigurator .konfig-kopf{
  position:fixed;
  z-index:2;
  top:max(16px,env(safe-area-inset-top),var(--konfig-wahl,var(--konfig-marke,0px)));
  left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right));
  display:flex;
  justify-content:center;
  pointer-events:none;
}

body.pcm-konfigurator .konfig-kopf[hidden]{
  display:none;
}

.konfig-kopf-karte{
  box-sizing:border-box;
  width:min(391px,100%);
  padding:10px 14px 11px;
  pointer-events:auto;
  /* Durchsichtig genug, dass Raster und Schein darunter zu sehen sind, und
     deckend genug fuer die Zahlen darauf. Bis zum 07.10.2026 standen hier
     84 Prozent: damit lag die Leinwand zwar darunter, zu sehen war davon
     nichts, und die Karte las sich weiter wie ein angesetztes Panel. Die
     Unschaerfe traegt den Rest - sie glaettet, was sonst durch den Text
     laufen wuerde. */
  background:rgba(6,10,16,.6);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(49,220,232,.36);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}

.konfig-kopf-karte[data-inhalt="gewerk"]{
  padding:6px;
}

.konfig-kopf .ifc-simulator-progress{
  margin:0;
}

.konfig-kopf .ifc-simulator-progress[hidden],
.konfig-kopf .ifc-trade-picker[hidden]{
  display:none;
}

/* Oben steht nur die Auswahl, ohne Beschriftung: was das Gewerk bedeutet,
   steht unten. Die Auswahl traegt ihr eigenes aria-label. */
.konfig-kopf .ifc-trade-picker{
  min-width:0;
  gap:0;
}

.konfig-kopf .ifc-trade-picker span{
  display:none;
}

.konfig-kopf .ifc-trade-picker select{
  width:100%;
}

/* Unten bleiben von der Steuerung Knoepfe und Detailgrad. Sie nehmen die
   Zeile, die die Auswahl frei gemacht hat. */
body.pcm-konfigurator .ifc-trade-controls{
  flex:1 1 auto;
}

@media (max-width:860px){
  body.pcm-konfigurator .konfig-kopf{
    top:max(8px,env(safe-area-inset-top),var(--konfig-wahl,var(--konfig-marke,0px)));
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
  }
}

/* Die Ablage: ein Platz ohne Ansicht.

   Die Gewerkwahl steht seit dem 06.10.2026 im Overlay von GEWERK. Ihr Platz
   muss trotzdem irgendwo sein, denn das Overlay haengt sie nur um und gibt
   sie beim Schliessen zurueck. In der Karte unten koennte er nicht liegen:
   die Karte verschwindet, sobald das Dock steht. */
.konfig-ablage{ display:none; }

/* ------------------------------------------------------------------
   Die Master-Facts oben in der Mitte
   ------------------------------------------------------------------

   Oben mittig stand bis zum 06.10.2026 das Auswahlfeld der Gewerke. Es
   zeigte ein Gewerk und verbarg zweiundsechzig; die Wahl ist jetzt eine
   eigene Zeile darueber, und hier steht, was das gewaehlte Gewerk im Master
   fuehrt.

   Die Karte steht in jeder Bauform mittig unter der Gewerkzeile und ist auf
   ein Drittel der Schirmhoehe gedeckelt: dahinter steht das Bauwerk, und
   eine Karte, die es zudeckt, nimmt der Vollansicht ihren Zweck. Was mehr
   Platz braucht, steht im Overlay des Docks, und das ist formatfuellend.
   Quer und breit genug war die Karte bis zum Abend des 07.10.2026 eine hohe
   Spalte am linken Rand. */
.konfig-fakten{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.konfig-fakten[hidden]{ display:none; }

.konfig-fakten-kopf{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}

.konfig-fakten-marke{
  flex:0 0 auto;
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(49,220,232,.85);
}

.konfig-fakten-kopf strong{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.konfig-fakten-summe{
  flex:0 0 auto;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:rgba(247,248,251,.9);
}

.konfig-fakten-inhalt{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  max-height:min(34dvh,300px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Die Balkengruppen des Feldes stehen seit dem 07.10.2026 nicht mehr hier,
   sondern als richtige Diagramme in den Overlays. Im Feld traegt ihre
   Stelle das Kategorienraster: `.konfig-kat-raster` am Ende dieser
   Datei. */

.konfig-fakten-zahlen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(74px,1fr));
  gap:6px 10px;
  margin:0;
  padding:0;
  list-style:none;
}

.konfig-fakten-zahlen li{ min-width:0; }

.konfig-fakten-zahlen b{
  display:block;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.konfig-fakten-zahlen span{
  display:block;
  font-size:8.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(247,248,251,.5);
}

/* Der Ring: aussen das Ganze, innen der Teil. Die Zahl steht in der Mitte
   und die Bezugsgroesse daneben - ein Anteil ohne sein Ganzes ist keine
   Aussage, und der Ring allein waere genau das. */
.konfig-fakten-ring{
  display:flex;
  align-items:center;
  gap:10px;
}

.konfig-fakten-ring svg{
  flex:0 0 auto;
  width:54px;
  height:54px;
}

.konfig-fakten-ring-bahn{
  fill:none;
  stroke:rgba(247,248,251,.14);
  stroke-width:7;
}

.konfig-fakten-ring-teil{
  fill:none;
  stroke:rgba(49,220,232,.9);
  stroke-width:7;
  stroke-linecap:round;
}

.konfig-fakten-ring-zahl{
  fill:#f7f8fb;
  font-size:15px;
  font-weight:600;
}

.konfig-fakten-ring p{
  margin:0;
  font-size:10px;
  color:rgba(247,248,251,.8);
}

.konfig-fakten-ring p span{
  display:block;
  font-size:9px;
  color:rgba(247,248,251,.5);
}

/* Quer stand das Faktenfeld bis zum Abend des 07.10.2026 als hohe Spalte am
   linken Rand, und Markenzeile, Gewerkzeile, das Overlay des Docks und das
   Feld der Werkzeugleiste richteten sich danach. Jetzt steht alles in der
   Mitte, in jeder Bauform: oben am Schirmrand die Markenzeile, darunter die
   Gewerkzeile, darunter die Eigenschaften, und das Overlay des Docks nimmt
   den ganzen Platz zwischen Markenzeile und Dock.

   Der Grund ist nicht Platz, sondern Ausrichtung. Eine mittige Titelzeile
   ueber einer linken Spalte ist keine Spalte mehr, sondern ein Winkel, und
   ein Bericht in der freien Haelfte daneben hat halb so viel Blatt, wie der
   Schirm hergibt. Was die Spalte an Hoehe brachte, bringt jetzt das Overlay
   des Docks: dort stehen die vollen Listen, und zwar formatfuellend. */

/* ------------------------------------------------------------------
   VIEW: die vier Ansichten
   ------------------------------------------------------------------ */
.konfig-ansicht-wahl{
  display:flex;
  gap:4px;
  padding:3px;
  border:1px solid rgba(247,248,251,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}

.konfig-ansicht-knopf{
  flex:1 1 0;
  min-width:0;
  padding:6px 4px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:rgba(247,248,251,.7);
  font:inherit;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}

.konfig-ansicht-knopf:hover{ color:#f7f8fb; background:rgba(255,255,255,.06); }

.konfig-ansicht-knopf[aria-pressed="true"]{
  background:rgba(49,220,232,.16);
  color:#eafcff;
  box-shadow:inset 0 0 0 1px rgba(49,220,232,.4);
}

.konfig-ansicht-satz{
  margin:8px 0 0;
  font-size:10.5px;
  line-height:1.5;
  color:rgba(247,248,251,.7);
}

/* Das Anlagenschema: von links nach rechts gelesen, Erzeuger, Verteilung,
   Uebergabe, dazwischen je Leiter eine Bahn in seiner Farbe. Die
   Beschriftung steht im Bild, damit die Zeichnung allein verstaendlich ist
   und nicht erst mit dem Text darunter. */
.konfig-schema{ display:flex; flex-direction:column; gap:8px; }

.konfig-schema-name{
  margin:8px 0 0;
  font-size:11.5px;
  font-weight:600;
}

.konfig-schema-bild{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(247,248,251,.1);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.konfig-schema-kasten{
  fill:rgba(49,220,232,.08);
  stroke:rgba(49,220,232,.4);
  stroke-width:1;
}

.konfig-schema-text{ fill:rgba(247,248,251,.9); font-size:9px; }
.konfig-schema-bahn{ font-size:7.5px; letter-spacing:.06em; }
.konfig-schema-fuss{ fill:rgba(247,248,251,.5); font-size:7.5px; letter-spacing:.1em; }
.konfig-schema-leiter{ fill:none; stroke-width:2.2; }

.konfig-schema-werte{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 10px;
  margin:0;
  font-size:10px;
}

.konfig-schema-werte dt{
  color:rgba(247,248,251,.5);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:8.5px;
  align-self:center;
}

.konfig-schema-werte dd{ margin:0; font-variant-numeric:tabular-nums; }

.konfig-schema-grund{
  display:flex;
  gap:6px;
  margin:0;
  font-size:9.5px;
  line-height:1.45;
  color:rgba(247,248,251,.62);
}

.konfig-schema-grund i{
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin-top:4px;
  border-radius:50%;
}

/* Die Karte unten beschreibt nur noch den Ablauf, und sie liegt ueber dem
   Modell. Schrift und Abstaende sind darum eine Stufe kleiner als im
   Fenster der Startseite: jede Zeile weniger ist Platz fuer das Bauwerk.
   Die kleinen Marken in Grossbuchstaben bleiben, wie sie sind. Die Regeln
   haengen am Fenster, nicht an der Karte: die Overlays des Docks tragen
   Teile der Karte und liegen ebenso ueber dem Modell. */
body.pcm-konfigurator .ifc-simulator .ifc-simulator-header{ margin-bottom:10px; }
body.pcm-konfigurator .ifc-simulator .ifc-simulator-brand{ margin-bottom:6px; }
body.pcm-konfigurator .ifc-simulator .ifc-simulator-brand img{ width:22px; height:22px; }
body.pcm-konfigurator .ifc-simulator .ifc-simulator-header p{ margin:0 0 3px; font-size:9px; }
body.pcm-konfigurator .ifc-simulator .ifc-simulator-header h2{ font-size:clamp(17px,2.2vw,21px); }
body.pcm-konfigurator .ifc-simulator .ifc-processing-status{ gap:10px; margin-bottom:12px; }
body.pcm-konfigurator .ifc-simulator .ifc-processing-status > i{ flex-basis:24px; width:24px; height:24px; }
body.pcm-konfigurator .ifc-simulator .ifc-processing-status strong{ font-size:14px; }
body.pcm-konfigurator .ifc-simulator .ifc-processing-status span{ font-size:11px; }
body.pcm-konfigurator .ifc-simulator .ifc-live{ margin-bottom:10px; }
body.pcm-konfigurator .ifc-simulator .ifc-live-kopf > span,
body.pcm-konfigurator .ifc-simulator .ifc-live-kopf > strong{ font-size:9px; }
body.pcm-konfigurator .ifc-simulator .ifc-live-schritte li{ padding:5px 4px; }
body.pcm-konfigurator .ifc-simulator .ifc-stage-list strong{ font-size:12px; }
body.pcm-konfigurator .ifc-simulator .ifc-stage-list small,
body.pcm-konfigurator .ifc-simulator .ifc-live-teilstand{ font-size:10px; }
body.pcm-konfigurator .ifc-simulator .ifc-result-disclaimer{ margin:0 0 10px; font-size:10px; }
body.pcm-konfigurator .ifc-simulator .ifc-stat-grid dd{ font-size:clamp(15px,2.2vw,19px); }
body.pcm-konfigurator .ifc-simulator .ifc-power-grid strong{ font-size:clamp(14px,2vw,17px); }
body.pcm-konfigurator .ifc-simulator .ifc-analysis-chart header strong,
body.pcm-konfigurator .ifc-simulator .ifc-result-row strong,
body.pcm-konfigurator .ifc-simulator .ifc-result-row span,
body.pcm-konfigurator .ifc-simulator .ifc-check-row strong,
body.pcm-konfigurator .ifc-simulator .ifc-check-row span,
body.pcm-konfigurator .ifc-simulator .ifc-simulator-error,
body.pcm-konfigurator .ifc-simulator .ifc-phinix-insight p,
body.pcm-konfigurator .ifc-simulator .ifc-report-offer p,
body.pcm-konfigurator .ifc-simulator .ifc-gewerk-name,
body.pcm-konfigurator .ifc-simulator .ifc-trade-empty,
body.pcm-konfigurator .ifc-simulator .ifc-trade-open b,
body.pcm-konfigurator .ifc-simulator .ifc-trade-open p{ font-size:11px; }
body.pcm-konfigurator .ifc-simulator .ifc-systemwahl-name,
body.pcm-konfigurator .ifc-simulator .ifc-systemwahl-titel,
body.pcm-konfigurator .ifc-simulator .ifc-geo-kopf strong,
body.pcm-konfigurator .ifc-simulator .ifc-erkennung p{ font-size:12px; }
body.pcm-konfigurator .ifc-simulator .ifc-erkennung-kopf strong{ font-size:12.5px; }
body.pcm-konfigurator .ifc-simulator .ifc-geo-liste dd,
body.pcm-konfigurator .ifc-simulator .ifc-grundlage-karte small,
body.pcm-konfigurator .ifc-simulator .ifc-trade-lod select{ font-size:11.5px; }
body.pcm-konfigurator .ifc-simulator .ifc-geo-hinweis{ font-size:11.5px!important; }
body.pcm-konfigurator .ifc-simulator .ifc-erkennung-namen{ font-size:11px!important; }
body.pcm-konfigurator .ifc-simulator .ifc-report-offer > div > strong{ font-size:13px; }
body.pcm-konfigurator .ifc-simulator .ifc-report-offer > b{ font-size:19px; }
body.pcm-konfigurator .ifc-simulator .ifc-trade-explorer > header strong{ font-size:13px; }
body.pcm-konfigurator .ifc-simulator .ifc-trade-kopf strong{ font-size:16px; }

/* Das Dock.

   Hat das Modell fertig konfiguriert, weicht die Karte unten einem Dock
   mit fuenf runden Knoepfen, wie am unteren Rand eines Mac. Jeder oeffnet
   mittig ueber dem Modell ein Overlay mit seinem Teil der Analyse; das
   Skript haengt die Teile dafuer aus der Karte um. Mit der Karte gehen
   "Sicht frei" und, sobald das Modell steht, die Statuszeile. Scheitert
   das Modell, bleibt die Zeile oben stehen: dann sagt sie, warum. Die
   Hoehe des Docks schreibt ein Beobachter als `--konfig-dock` an den
   Koerper. Das Overlay endet darueber, und der Betrachter rahmt das
   Bauwerk darueber. */
body.pcm-konfigurator.ifc-konfig-dock .ifc-simulator-shell,
body.pcm-konfigurator.ifc-konfig-dock .konfig-sicht{
  display:none;
}

body.pcm-konfigurator.ifc-konfig-dock .ifc-live-model-status{
  left:max(16px,env(safe-area-inset-left));
  top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  bottom:auto;
}

body.pcm-konfigurator.ifc-konfig-dock .ifc-live-model[data-state="ready"] .ifc-live-model-status{
  display:none;
}

/* Das Wasserzeichen nimmt den ganzen Schirm ueber dem Dock. */
body.pcm-konfigurator.ifc-konfig-dock .ifc-live-model::before{
  right:0;
  bottom:var(--konfig-dock,0px);
}

/* Steht das Modell, geht die Statuszeile, und am breiten Schirm nimmt die
   Legende oben wieder ihren Platz. Auf dem Telefon bleibt sie unter dem
   Schalter. */
@media (min-width:861px){
  body.pcm-konfigurator.ifc-konfig-dock .ifc-live-model[data-state="ready"] .ifc-raum-legende{
    top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  }
}

.konfig-dock{
  position:fixed;
  z-index:3;
  left:0;
  right:0;
  bottom:max(10px,env(safe-area-inset-bottom));
  box-sizing:border-box;
  width:max-content;
  max-width:calc(100vw - 16px);
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:8px 12px 10px;
  pointer-events:auto;
  background:rgba(6,10,16,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(49,220,232,.28);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55);
  animation:konfig-dock-auf .38s cubic-bezier(.2,.9,.25,1);
}

.konfig-dock[hidden]{
  display:none;
}

.konfig-dock-knopf{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:46px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--ifc-cyan);
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.konfig-dock-kreis{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  box-sizing:border-box;
  border:1px solid rgba(49,220,232,.4);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(49,220,232,.2),rgba(8,14,22,.92) 72%);
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  transform-origin:50% 100%;
  transition:transform .2s cubic-bezier(.2,.9,.25,1),border-color .2s ease,box-shadow .2s ease;
}

.konfig-dock-kreis svg,
.konfig-analyse-zeichen svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.konfig-dock-kreis svg{
  width:22px;
  height:22px;
}

.konfig-dock-name{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ifc-muted);
  transition:color .2s ease;
}

/* Offen: der Kreis leuchtet, und darunter steht ein Punkt wie unter einer
   laufenden Anwendung. */
.konfig-dock-knopf[aria-pressed="true"] .konfig-dock-kreis{
  border-color:rgba(49,220,232,.9);
  box-shadow:0 0 0 1px rgba(49,220,232,.3),0 0 22px rgba(49,220,232,.32),0 6px 16px rgba(0,0,0,.45);
}

.konfig-dock-knopf[aria-pressed="true"] .konfig-dock-name{
  color:var(--ifc-ink);
}

.konfig-dock-knopf[aria-pressed="true"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:var(--ifc-cyan);
  box-shadow:0 0 6px var(--ifc-cyan);
}

.konfig-dock-knopf:active .konfig-dock-kreis{
  transform:scale(.94);
}

.ifc-simulator .konfig-dock-knopf:focus-visible{
  outline:none;
}

.konfig-dock-knopf:focus-visible .konfig-dock-kreis{
  outline:2px solid rgba(49,220,232,.8);
  outline-offset:3px;
}

/* Unter dem Zeiger waechst der Knopf und hebt sich aus dem Dock, die
   Nachbarn ein wenig mit. Nur mit einer Maus: auf dem Telefon bliebe ein
   Knopf nach dem Tippen vergroessert stehen. */
@media (hover:hover){
  .konfig-dock-knopf:hover .konfig-dock-kreis{
    transform:translateY(-7px) scale(1.2);
  }

  .konfig-dock-knopf:hover:active .konfig-dock-kreis{
    transform:translateY(-5px) scale(1.12);
  }

  .konfig-dock-knopf:hover + .konfig-dock-knopf .konfig-dock-kreis{
    transform:translateY(-3px) scale(1.08);
  }

  /* Eigene Regel: wo :has fehlt, faellt nur sie weg. */
  .konfig-dock-knopf:has(+ .konfig-dock-knopf:hover) .konfig-dock-kreis{
    transform:translateY(-3px) scale(1.08);
  }

  .konfig-dock-knopf:hover .konfig-dock-name{
    color:var(--ifc-ink);
  }
}

/* Das Overlay einer Analyse steht mittig ueber dem Modell und nimmt den
   ganzen Platz zwischen der Zeile oben und dem Dock unten. Nur die Karte
   faengt den Zeiger: rundherum laesst sich das Modell weiter drehen. Ist der
   Inhalt hoeher als die Karte, rollt er, der Kopf bleibt stehen.

   Formatfuellend seit dem Abend des 07.10.2026. Vorher begann es unter der
   Eigenschaftenkarte und war auf 560 Pixel Breite gedeckelt: ein Bericht
   und ein Plan standen damit in einem Streifen, waehrend daneben der halbe
   Schirm frei blieb. Die Eigenschaften liegen jetzt darunter und treten
   weg, solange das Overlay steht (siehe weiter unten), denn zwei
   durchsichtige Karten uebereinander sind ein Schleier und keine Auskunft.

   Steht die Werkzeugleiste, weicht das Overlay ihr auf **beiden** Seiten
   gleich weit aus. Nur rechts auszuweichen waere etwas mehr Blatt und eine
   Karte, die neben der Mitte des Schirms steht. */
.konfig-analyse{
  /* Was die Werkzeugleiste je Seite belegt. Ohne Leiste nichts. */
  --konfig-leiste-platz:0px;
  position:fixed;
  z-index:2;
  top:max(16px,env(safe-area-inset-top),var(--konfig-wahl,var(--konfig-marke,0px)));
  bottom:calc(var(--konfig-dock,0px) + 12px);
  left:calc(max(16px,env(safe-area-inset-left)) + var(--konfig-leiste-platz));
  right:calc(max(16px,env(safe-area-inset-right)) + var(--konfig-leiste-platz));
  display:flex;
  align-items:stretch;
  justify-content:center;
  pointer-events:none;
}

body.pcm-konfigurator.ifc-konfig-leiste .konfig-analyse{
  --konfig-leiste-platz:88px;
}

.konfig-analyse[hidden]{
  display:none;
}

.konfig-analyse-karte{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:100%;
  padding:12px 14px 14px;
  pointer-events:auto;
  color:var(--ifc-ink);
  background:rgba(6,10,16,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(49,220,232,.36);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:konfig-analyse-auf .28s cubic-bezier(.2,.9,.25,1);
}

.konfig-analyse-kopf{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--ifc-line);
}

.konfig-analyse-zeichen{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  box-sizing:border-box;
  border:1px solid rgba(49,220,232,.5);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(49,220,232,.22),rgba(8,14,22,.92) 72%);
  color:var(--ifc-cyan);
}

.konfig-analyse-zeichen svg{
  width:17px;
  height:17px;
}

.konfig-analyse-beschriftung{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  gap:2px;
}

.konfig-analyse-marke{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ifc-cyan);
}

.konfig-analyse-beschriftung strong{
  font-size:15px;
  line-height:1.25;
  color:var(--ifc-ink);
}

.konfig-analyse-zu{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  margin:0;
  padding:0;
  border:1px solid var(--ifc-line);
  border-radius:50%;
  background:rgba(255,255,255,.04);
  color:var(--ifc-muted);
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}

.konfig-analyse-zu:hover{
  border-color:rgba(49,220,232,.6);
  color:var(--ifc-ink);
}

.konfig-analyse-inhalt{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(49,220,232,.35) transparent;
}

/* Die Teile bringen aus der Karte eigene Abstaende mit; hier setzt die
   Luecke des Overlays sie. */
body.pcm-konfigurator .ifc-simulator .konfig-analyse-inhalt > *{
  flex:0 0 auto;
  margin:0;
}

body.pcm-konfigurator .ifc-simulator .konfig-analyse-inhalt > [hidden]{
  display:none;
}

/* Die Farbtafel der Raumtypen steht seit dem 06.10.2026 hier und nicht mehr
   im Modellkasten. Dort war sie ein Band ueber dem Bauwerk; hier traegt sie
   weder eigene Lage noch eigenen Grund, das Overlay stellt beides. Sie rollt
   mit und zeigt darum jeden Raumtyp statt einer Sammelzeile. */
body.pcm-konfigurator .ifc-simulator .konfig-feld-inhalt > .ifc-raum-legende,
body.pcm-konfigurator .ifc-simulator .konfig-fakten-inhalt > .ifc-raum-legende,
body.pcm-konfigurator .ifc-simulator .konfig-analyse-inhalt > .ifc-raum-legende{
  position:static;
  inset:auto;
  max-width:none;
  padding:0;
  background:none;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:auto;
}

.konfig-analyse-satz{
  color:var(--ifc-muted);
  font-size:12px;
  line-height:1.5;
}

/* LEAN zeigt einen Reiter des Gewerks, eine Leiste braucht es dafuer nicht.
   Dasselbe gilt fuer das Feld RAEUME der Werkzeugleiste: es stellt den
   Reiter Raumbuch selbst. SYSTEM zeigt alle ausser LEAN; das Raumbuch steht
   seit dem 07.10.2026 darunter, denn ohne Modell steht die Werkzeugleiste
   nicht, und das Raumbuch ist Datum und nicht Geometrie. Steht statt des
   Reiters ein Satz, faellt die Tafel weg. */
body.pcm-konfigurator .konfig-analyse-karte[data-analyse="lean"] .ifc-trade-tabs,
body.pcm-konfigurator .konfig-fakten-inhalt .ifc-trade-tabs,
body.pcm-konfigurator .konfig-analyse-karte[data-analyse="system"] [data-trade-tab="lean"],
body.pcm-konfigurator .konfig-analyse-karte[data-ohne-reiter] .ifc-trade-panel{
  display:none;
}

@media (max-width:860px){
  .konfig-dock{
    gap:8px;
    padding:7px 10px 9px;
    border-radius:20px;
  }

  .konfig-dock-knopf{
    min-width:42px;
  }

  .konfig-dock-kreis{
    width:42px;
    height:42px;
  }

  .konfig-dock-kreis svg{
    width:20px;
    height:20px;
  }

  .konfig-analyse{
    top:max(8px,env(safe-area-inset-top),var(--konfig-wahl,var(--konfig-marke,0px)));
    bottom:calc(var(--konfig-dock,0px) + 8px);
    left:calc(max(8px,env(safe-area-inset-left)) + var(--konfig-leiste-platz));
    right:calc(max(8px,env(safe-area-inset-right)) + var(--konfig-leiste-platz));
  }

  body.pcm-konfigurator.ifc-konfig-leiste .konfig-analyse{
    --konfig-leiste-platz:74px;
  }

  .konfig-analyse-karte{
    padding:10px 12px 12px;
    border-radius:14px;
  }
}

@keyframes konfig-dock-auf{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

@keyframes konfig-analyse-auf{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .konfig-dock,
  .konfig-analyse-karte{
    animation:none;
  }

  .konfig-dock-kreis{
    transition:none;
  }
}

/* ==================================================================
   EMISSION und DOKU: zwei Overlays im Dock vor EXPORT, dazu der
   Betrachter, der ein Dokument als Blatt im Format A4 zeigt.
   ================================================================== */
/* Beide waren bis zum Abend des 07.10.2026 auf 880 Pixel breit gestellt,
   die uebrigen Overlays auf 560. Jetzt sind alle formatfuellend, und die
   Ausnahme hat sich erledigt. */

.konfig-zusatz-halter,
.konfig-zusatz-halter[hidden]{
  display:none;
}

.konfig-emission,
.konfig-doku{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-emission > *,
.konfig-doku > *{
  margin:0;
}

.konfig-emission [hidden],
.konfig-doku [hidden]{
  display:none;
}

/* Stand mit Balken, oben in beiden Overlays und in jeder Dokumentzeile. */
.konfig-zusatz-stand{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.konfig-zusatz-stand-text{
  font-size:12px;
  line-height:1.45;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-zusatz-balken{
  display:block;
  height:4px;
  border-radius:2px;
  background:rgba(49,220,232,.14);
  overflow:hidden;
}

.konfig-zusatz-balken i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--ifc-cyan,#31dce8);
  transition:width .3s ease;
}

.konfig-zusatz-titel{
  margin:0;
  padding-top:4px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-zusatz-satz{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-zusatz-satz.konfig-zusatz-quelle{
  font-size:11px;
  opacity:.85;
}

.konfig-zusatz-tabelle{
  overflow-x:auto;
  border:1px solid var(--ifc-line,rgba(255,255,255,.12));
  border-radius:10px;
}

.konfig-zusatz-tabelle table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  line-height:1.4;
}

.konfig-zusatz-tabelle th{
  padding:7px 10px;
  border-bottom:1px solid var(--ifc-line,rgba(255,255,255,.12));
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
  color:var(--ifc-muted,#8fa3ad);
  white-space:nowrap;
}

.konfig-zusatz-tabelle td{
  padding:6px 10px;
  border-top:1px solid rgba(255,255,255,.05);
  vertical-align:middle;
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-zusatz-tabelle .rechts{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------
   EMISSION
   ------------------------------------------------------------------ */
.konfig-emission-kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
}

.konfig-emission-kachel{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--ifc-line,rgba(255,255,255,.12));
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.konfig-emission-kachel-titel{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-emission-kachel strong{
  font-size:22px;
  font-weight:600;
  line-height:1.1;
  color:var(--ifc-ink,#e8f4f6);
  font-variant-numeric:tabular-nums;
}

.konfig-emission-kachel strong small{
  font-size:11px;
  font-weight:400;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-emission-kachel em{
  font-size:11px;
  font-style:normal;
  line-height:1.35;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-emission-anteil{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:110px;
}

.konfig-emission-anteil .konfig-zusatz-balken{
  flex:1 1 auto;
}

.konfig-emission-anteil span:last-child{
  flex:0 0 auto;
  min-width:42px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-emission-vorschlaege{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px;
}

.konfig-emission-vorschlag{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid var(--ifc-line,rgba(255,255,255,.12));
  border-left:3px solid var(--ifc-cyan,#31dce8);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.konfig-emission-vorschlag[data-art="system"]{
  border-left-color:#efd0a3;
}

.konfig-emission-vorschlag p{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-emission-vorschlag-kopf{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.konfig-emission-vorschlag-kopf strong{
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-emission-art{
  align-self:flex-start;
  padding:1px 7px;
  border:1px solid rgba(49,220,232,.35);
  border-radius:999px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ifc-cyan,#31dce8);
}

.konfig-emission-vorschlag[data-art="system"] .konfig-emission-art{
  border-color:rgba(239,208,163,.45);
  color:#efd0a3;
}

.konfig-emission-vorschlag p.konfig-emission-ersparnis{
  font-size:13px;
  font-weight:600;
  color:var(--ifc-cyan,#31dce8);
  font-variant-numeric:tabular-nums;
}

.konfig-emission-vorschlag p.konfig-emission-vergleich{
  font-size:11px;
}

.konfig-emission-vorschlag p.konfig-emission-pruefen{
  font-size:11px;
  color:#efd0a3;
}

/* ------------------------------------------------------------------
   DOKU: Filter, Liste und Zeilen mit eigenem Stand
   ------------------------------------------------------------------ */
.konfig-doku-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.konfig-doku-wahl{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 220px;
  min-width:0;
}

.konfig-doku-wahl span{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-doku-wahl select{
  width:100%;
  min-height:36px;
  box-sizing:border-box;
  padding:6px 10px;
  border:1px solid var(--ifc-line,rgba(255,255,255,.12));
  border-radius:9px;
  background:#0b121b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2331dce8' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none;
  appearance:none;
  padding-right:30px;
  color:var(--ifc-ink,#e8f4f6);
  font:inherit;
  font-size:13px;
}

.konfig-doku-wahl select:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:1px;
}

.konfig-doku-wahl option{
  background:#0b121b;
  color:#e8f4f6;
}

.konfig-doku-liste{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.konfig-doku-zeile{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:9px 12px;
  border:1px solid var(--ifc-line,rgba(255,255,255,.12));
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:var(--ifc-ink,#e8f4f6);
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s ease,background .2s ease;
}

.konfig-doku-zeile[aria-disabled="true"]{
  cursor:default;
}

.konfig-doku-zeile[data-stand="bereit"]:hover{
  border-color:rgba(49,220,232,.55);
  background:rgba(49,220,232,.07);
}

.konfig-doku-zeile:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:2px;
}

.konfig-doku-zeile-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}

.konfig-doku-zeile-text strong{
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.konfig-doku-zeile-meta{
  font-size:11px;
  line-height:1.4;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-doku-zeile-stand{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  flex:0 0 112px;
}

.konfig-doku-zeile-stand .konfig-zusatz-balken{
  width:100%;
}

.konfig-doku-zeile[data-stand="wartet"] .konfig-zusatz-balken i{
  background:rgba(49,220,232,.35);
}

.konfig-doku-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border:1px solid rgba(49,220,232,.35);
  border-radius:999px;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--ifc-cyan,#31dce8);
}

.konfig-doku-zeile[data-stand="wartet"] .konfig-doku-chip,
.konfig-doku-platzhalter[data-stand="wartet"] .konfig-doku-chip,
.konfig-doku-platzhalter[data-stand="leer"] .konfig-doku-chip,
.konfig-doku-chip.konfig-doku-chip-still{
  border-color:var(--ifc-line,rgba(255,255,255,.12));
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-doku-zeile[data-stand="bereit"] .konfig-doku-chip{
  border-color:var(--ifc-cyan,#31dce8);
  background:var(--ifc-cyan,#31dce8);
  color:#06121a;
}

.konfig-doku-platzhalter{
  cursor:default;
  border-style:dashed;
  background:transparent;
}

.konfig-doku-platzhalter[data-stand="fehler"] .konfig-doku-chip{
  border-color:rgba(255,159,143,.45);
  color:#ff9f8f;
}

.konfig-doku-mehr{
  align-self:center;
  margin:0;
  padding:8px 14px;
  border:1px solid rgba(49,220,232,.4);
  border-radius:999px;
  background:rgba(49,220,232,.08);
  color:var(--ifc-cyan,#31dce8);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}

.konfig-doku-mehr[hidden]{
  display:none;
}

.konfig-doku-leer{
  margin:0;
  padding:14px;
  border:1px dashed var(--ifc-line,rgba(255,255,255,.12));
  border-radius:10px;
  font-size:12px;
  line-height:1.5;
  text-align:center;
  color:var(--ifc-muted,#8fa3ad);
}

/* ------------------------------------------------------------------
   Der Betrachter: dunkle Flaeche ueber allem, Blaetter zur Ansicht.
   Nichts laesst sich markieren, ziehen oder drucken.
   ------------------------------------------------------------------ */
.konfig-doku-betrachter{
  --doku-kopf:"Bahnschrift SemiBold",Bahnschrift,"Segoe UI",system-ui,sans-serif;
  --doku-text:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --doku-mono:"Cascadia Mono",Consolas,"Roboto Mono",monospace;
  position:fixed;
  inset:0;
  z-index:12800;
  display:flex;
  flex-direction:column;
  background:rgba(3,6,10,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.konfig-doku-betrachter[hidden]{
  display:none;
}

.konfig-doku-betrachter-kopf{
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:max(10px,env(safe-area-inset-top)) 16px 10px;
  border-bottom:1px solid rgba(49,220,232,.2);
  background:rgba(6,10,16,.92);
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-doku-betrachter-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
}

.konfig-doku-betrachter-text strong{
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.konfig-doku-betrachter-text span{
  font-size:12px;
  line-height:1.35;
  color:var(--ifc-muted,#8fa3ad);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.konfig-doku-zu{
  flex:none;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:1px solid rgba(49,220,232,.4);
  border-radius:50%;
  background:rgba(8,14,22,.92);
  color:var(--ifc-ink,#e8f4f6);
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.konfig-doku-zu:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:2px;
}

/* 09.10.2026: die Flaeche ist eine Buehne fuer das Buch. Sie scrollt
   nicht, das Buch passt sich ein; umbrochen wird ausser Sicht. */
.konfig-doku-flaeche{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  touch-action:pan-y;
}

.konfig-doku-mess{
  position:absolute;
  left:-10000px;
  top:0;
  width:794px;
  visibility:hidden;
  pointer-events:none;
}

.doku-buch{
  --buch-b:320px;
  --buch-n:1;
  position:relative;
  flex:none;
  display:flex;
  width:calc(var(--buch-b) * var(--buch-n));
  height:calc(var(--buch-b) * 297 / 210);
  perspective:calc(var(--buch-b) * 4);
}

.doku-buch-fach{
  position:relative;
  flex:none;
  width:var(--buch-b);
  height:100%;
}

.doku-buch-fach[hidden]{
  display:none;
}

.doku-buch .doku-blatt{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  margin:0;
}

.doku-buch:not(.ist-einzeln) .doku-buch-links .doku-blatt{
  border-radius:3px 0 0 3px;
}

.doku-buch:not(.ist-einzeln) .doku-buch-rechts .doku-blatt{
  border-radius:0 3px 3px 0;
}

/* Der Ruecken: zur Mitte hin dunkelt jedes Blatt leicht ab. */
.doku-buch:not(.ist-einzeln) .doku-buch-fach .doku-blatt::after,
.doku-buch:not(.ist-einzeln) .doku-buch-blatt .doku-blatt::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:9%;
  pointer-events:none;
}

.doku-buch:not(.ist-einzeln) .doku-buch-links .doku-blatt::after,
.doku-buch:not(.ist-einzeln) .doku-buch-blatt.ist-rechts .doku-buch-hinten .doku-blatt::after,
.doku-buch:not(.ist-einzeln) .doku-buch-blatt.ist-links .doku-buch-seite:not(.doku-buch-hinten) .doku-blatt::after{
  right:0;
  background:linear-gradient(to left,rgba(40,28,10,.2),rgba(40,28,10,0));
}

.doku-buch:not(.ist-einzeln) .doku-buch-rechts .doku-blatt::after,
.doku-buch:not(.ist-einzeln) .doku-buch-blatt.ist-rechts .doku-buch-seite:not(.doku-buch-hinten) .doku-blatt::after,
.doku-buch:not(.ist-einzeln) .doku-buch-blatt.ist-links .doku-buch-hinten .doku-blatt::after{
  left:0;
  background:linear-gradient(to right,rgba(40,28,10,.2),rgba(40,28,10,0));
}

/* Das wendende Blatt: Vorder- und Rueckseite, gedreht um den Ruecken. */
.doku-buch-blatt{
  position:absolute;
  top:0;
  z-index:5;
  width:var(--buch-b);
  height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}

.doku-buch-blatt.ist-rechts{
  left:calc(100% - var(--buch-b));
  transform-origin:left center;
}

.doku-buch-blatt.ist-links{
  left:0;
  transform-origin:right center;
}

.doku-buch-seite{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

.doku-buch-seite.doku-buch-hinten{
  transform:rotateY(180deg);
}

.doku-buch-seite .doku-blatt{
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.doku-buch-schatten{
  position:absolute;
  inset:0;
  z-index:4;
  opacity:0;
  background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.1));
  pointer-events:none;
}

.konfig-doku-nav{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:8px 16px max(10px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(49,220,232,.2);
  background:rgba(6,10,16,.92);
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-doku-blaettern{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  padding:0 0 3px;
  border:1px solid rgba(49,220,232,.45);
  border-radius:50%;
  background:rgba(8,14,22,.92);
  color:var(--ifc-ink,#e8f4f6);
  font:inherit;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease,opacity .2s ease;
}

.konfig-doku-blaettern:hover:not(:disabled){
  background:rgba(49,220,232,.16);
}

.konfig-doku-blaettern:disabled{
  opacity:.3;
  cursor:default;
}

.konfig-doku-blaettern:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:2px;
}

.konfig-doku-seitenzahl{
  min-width:170px;
  text-align:center;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-doku-flaeche:focus-visible{
  outline:2px solid rgba(49,220,232,.5);
  outline-offset:-2px;
}

/* Ein Blatt: A4, alle Masse in --pt, einem Punkt des Blatts. Die
   Variable gilt erst in den Kindern, dort misst 100cqw das Blatt. */
.doku-blatt{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:min(794px,100%);
  aspect-ratio:210/297;
  margin:0 auto;
  container-type:inline-size;
  --pt:calc(100cqw / 595.3);
  overflow:hidden;
  background:#FFFFFF;
  color:#191207;
  border-radius:2px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  -webkit-user-drag:none;
}

.doku-blatt + .doku-blatt{
  margin-top:24px;
}

.doku-blatt > .doku-seite{
  z-index:1;
}

.doku-blatt :where(h1,h2,p,ul,li,dl,dt,dd,table,thead,tbody,tr,th,td,header,footer,span,strong,small,div){
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0;
  background:none;
  list-style:none;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:normal;
  text-transform:none;
  text-shadow:none;
  color:inherit;
}

.doku-seite{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:calc(44 * var(--pt)) calc(66 * var(--pt)) calc(40 * var(--pt)) calc(88 * var(--pt));
  font-family:var(--doku-text);
  font-size:calc(8.5 * var(--pt));
  line-height:1.45;
  color:#191207;
  text-align:left;
}

.doku-deckblatt .doku-seite{
  padding-top:calc(96 * var(--pt));
}

/* Das Logo, schraeg ueber das ganze Blatt gestreut, hinter dem Text.
   Die Kachel legt der Betrachter als --doku-muster an. */
.doku-wasserzeichen{
  position:absolute;
  inset:-30%;
  z-index:0;
  background-image:var(--doku-muster,url("/assets/media/3cf370_f3e998ebf9da4d759eb78a8ab155986f~mv2.png"));
  background-size:calc(96 * var(--pt)) calc(96 * var(--pt));
  background-repeat:repeat;
  transform:rotate(-22deg);
  opacity:.13;
  pointer-events:none;
}

/* Das Sperrblatt am Ende der Vorschau. */
.doku-sperre{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(10 * var(--pt));
  text-align:center;
}

.doku-sperre-schloss{
  position:relative;
  display:block;
  width:calc(34 * var(--pt));
  height:calc(26 * var(--pt));
  margin:calc(22 * var(--pt)) 0 calc(8 * var(--pt));
  border-radius:calc(4 * var(--pt));
  background:#8A6520;
}

.doku-sperre-schloss::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  box-sizing:border-box;
  width:calc(22 * var(--pt));
  height:calc(18 * var(--pt));
  transform:translateX(-50%);
  border:calc(4 * var(--pt)) solid #8A6520;
  border-bottom:0;
  border-radius:calc(11 * var(--pt)) calc(11 * var(--pt)) 0 0;
}

.doku-sperre-zeile{
  font-size:calc(7.5 * var(--pt));
  letter-spacing:.12em;
}

.doku-sperre-titel{
  font-family:var(--doku-kopf);
  font-size:calc(22 * var(--pt));
  font-weight:600;
  line-height:1.2;
}

.doku-sperre-text{
  max-width:calc(330 * var(--pt));
  font-size:calc(9.5 * var(--pt));
  line-height:1.5;
  color:#4D4030;
}

.doku-ecke{
  position:absolute;
  z-index:1;
  width:calc(11 * var(--pt));
  height:calc(11 * var(--pt));
  border:0 solid #6D5D47;
  pointer-events:none;
}

.doku-ecke-lo{
  top:calc(28 * var(--pt));
  left:calc(68 * var(--pt));
  border-top-width:calc(.8 * var(--pt));
  border-left-width:calc(.8 * var(--pt));
}

.doku-deckblatt .doku-ecke-lo{
  top:calc(82 * var(--pt));
}

.doku-ecke-ru{
  right:calc(52 * var(--pt));
  bottom:calc(30 * var(--pt));
  border-right-width:calc(.8 * var(--pt));
  border-bottom-width:calc(.8 * var(--pt));
}

.doku-ecke-ro,
.doku-ecke-lu{
  display:none;
}

.doku-mono{
  font-family:var(--doku-mono);
}

.doku-gold{
  color:#8A6520;
}

/* Fuss mit Feldern wie in der Vorlage: Haus, Blatt, Berichtsnummer. */
.doku-fuss{
  flex:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:calc(12 * var(--pt));
  padding-top:calc(6 * var(--pt));
  border-top:calc(.6 * var(--pt)) solid #6D5D47;
}

.doku-fuss-text{
  display:flex;
  flex-direction:column;
  gap:calc(1 * var(--pt));
  min-width:0;
}

.doku-fuss-text strong{
  font-family:var(--doku-kopf);
  font-size:calc(8.5 * var(--pt));
  font-weight:600;
  color:#191207;
}

.doku-fuss-text span{
  font-family:var(--doku-mono);
  font-size:calc(6 * var(--pt));
  color:#4A3B2B;
}

.doku-fuss-text span.doku-mono{
  letter-spacing:.24em;
  color:#6D5D47;
}

.doku-felder{
  flex:none;
  display:flex;
  border:calc(.6 * var(--pt)) solid #6D5D47;
}

.doku-feld{
  display:flex;
  flex-direction:column;
  gap:calc(1.5 * var(--pt));
  min-width:calc(62 * var(--pt));
  padding:calc(3 * var(--pt)) calc(6 * var(--pt));
}

.doku-feld + .doku-feld{
  border-left:calc(.6 * var(--pt)) solid #6D5D47;
}

.doku-feld span{
  font-family:var(--doku-mono);
  font-size:calc(5 * var(--pt));
  letter-spacing:.22em;
  color:#6D5D47;
}

.doku-feld strong{
  font-family:var(--doku-mono);
  font-size:calc(6.8 * var(--pt));
  font-weight:700;
  letter-spacing:.06em;
  color:#191207;
  white-space:nowrap;
}

/* Deckblatt */
.doku-deck-kopf{
  flex:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:calc(12 * var(--pt));
  padding-bottom:calc(5 * var(--pt));
}

.doku-deck-projekt{
  display:flex;
  flex-direction:column;
  gap:calc(2 * var(--pt));
  min-width:0;
}

.doku-deck-projekt strong{
  font-family:var(--doku-kopf);
  font-size:calc(11 * var(--pt));
  font-weight:600;
  line-height:1.2;
  color:#191207;
}

.doku-deck-projekt span{
  font-size:calc(6.5 * var(--pt));
  letter-spacing:.12em;
}

.doku-marke{
  flex:none;
  font-family:var(--doku-kopf);
  font-size:calc(9 * var(--pt));
  font-weight:600;
  letter-spacing:.28em;
  color:#8A6520;
}

.doku-deck-linie{
  position:relative;
  flex:none;
  height:calc(.8 * var(--pt));
  background:#2A1A0E;
}

.doku-deck-linie::before{
  content:"";
  position:absolute;
  left:0;
  top:calc(.8 * var(--pt));
  width:calc(58 * var(--pt));
  height:calc(4 * var(--pt));
  background:#F3E9D8;
}

.doku-deck-bericht{
  margin-top:calc(10 * var(--pt));
  font-size:calc(6.2 * var(--pt));
  letter-spacing:.3em;
  color:#6D5D47;
}

.doku-deck-titel{
  margin-top:calc(52 * var(--pt));
  font-family:var(--doku-kopf);
  font-size:calc(22 * var(--pt));
  font-weight:600;
  line-height:1.12;
  color:#191207;
  overflow-wrap:anywhere;
}

.doku-deck-unter{
  margin-top:calc(3 * var(--pt));
  font-family:var(--doku-kopf);
  font-size:calc(17 * var(--pt));
  font-weight:600;
  line-height:1.15;
  color:#8A6520;
}

.doku-deck-zeile{
  margin-top:calc(8 * var(--pt));
  font-size:calc(6.2 * var(--pt));
  letter-spacing:.24em;
  color:#A8801F;
}

.doku-deck-lead{
  margin-top:calc(14 * var(--pt));
  max-width:calc(420 * var(--pt));
  font-size:calc(9.5 * var(--pt));
  line-height:1.55;
  color:#191207;
}

.doku-regel{
  flex:none;
  margin-top:calc(16 * var(--pt));
  height:calc(1 * var(--pt));
  background:#2A1A0E;
}

.doku-deck-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:calc(8 * var(--pt));
}

.doku-deck-kpi{
  display:flex;
  flex-direction:column;
  gap:calc(2 * var(--pt));
  min-width:0;
  padding-right:calc(8 * var(--pt));
}

.doku-deck-kpi + .doku-deck-kpi{
  padding-left:calc(8 * var(--pt));
  border-left:calc(.5 * var(--pt)) solid #E2D6C2;
}

.doku-deck-kpi strong{
  order:-1;
  font-family:var(--doku-kopf);
  font-size:calc(17 * var(--pt));
  font-weight:600;
  line-height:1.1;
  color:#191207;
  white-space:nowrap;
}

.doku-deck-kpi strong small{
  font-family:var(--doku-text);
  font-size:calc(7.5 * var(--pt));
  font-weight:400;
  color:#6D5D47;
}

.doku-deck-kpi > span{
  font-size:calc(5.6 * var(--pt));
  letter-spacing:.2em;
  color:#4A3B2B;
}

.doku-deck-kpi::after{
  content:"";
  height:calc(3.5 * var(--pt));
  margin-top:calc(3 * var(--pt));
  background:#8A6520;
}

.doku-deck-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(20 * var(--pt));
  margin-top:calc(22 * var(--pt));
}

.doku-deck-meta > div{
  display:grid;
  grid-template-columns:calc(64 * var(--pt)) 1fr;
  align-items:baseline;
  gap:calc(6 * var(--pt));
  padding:calc(6 * var(--pt)) 0;
  border-bottom:calc(.5 * var(--pt)) solid #E6DCCB;
}

.doku-deck-meta dt{
  font-size:calc(5.5 * var(--pt));
  letter-spacing:.2em;
  color:#6D5D47;
}

.doku-deck-meta dd{
  font-size:calc(8 * var(--pt));
  color:#191207;
  overflow-wrap:anywhere;
}

.doku-deck-vertraulich{
  margin-top:calc(9 * var(--pt));
  font-size:calc(6 * var(--pt));
  line-height:1.5;
  letter-spacing:.06em;
  color:#6D5D47;
}

.doku-deck-hinweis{
  display:flex;
  align-items:flex-end;
  min-height:calc(70 * var(--pt));
  margin-top:auto;
  margin-bottom:calc(14 * var(--pt));
  padding:calc(14 * var(--pt)) calc(16 * var(--pt));
  background:#F6EDDD;
  font-size:calc(8 * var(--pt));
  line-height:1.5;
  color:#4A3B2B;
}

/* Kopf der Inhaltsblaetter */
.doku-kopf{
  position:relative;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:calc(1 * var(--pt));
  padding-bottom:calc(4 * var(--pt));
  border-bottom:calc(.6 * var(--pt)) solid #6D5D47;
}

.doku-kopf::after{
  content:"PCM VISION";
  position:absolute;
  right:0;
  top:0;
  font-family:var(--doku-kopf);
  font-size:calc(7.5 * var(--pt));
  font-weight:600;
  letter-spacing:.26em;
  color:#8A6520;
}

.doku-kopf-projekt{
  font-family:var(--doku-kopf);
  font-size:calc(9 * var(--pt));
  font-weight:600;
  color:#191207;
}

.doku-kopf-nummer{
  padding-right:calc(70 * var(--pt));
  font-size:calc(5.8 * var(--pt));
  letter-spacing:.2em;
  color:#6D5D47;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.doku-kopf-balken{
  flex:none;
  width:calc(46 * var(--pt));
  height:calc(3.5 * var(--pt));
  background:#F3E9D8;
}

/* Der Rumpf misst den Umbruch: Blockfluss, Abstaende nur nach oben. */
.doku-rumpf{
  flex:1 1 auto;
  min-height:0;
  display:block;
  overflow:hidden;
  padding:calc(16 * var(--pt)) 0 calc(8 * var(--pt));
}

.doku-rumpf > *{
  margin-top:calc(7 * var(--pt));
}

.doku-rumpf > .doku-h1{
  margin-top:calc(18 * var(--pt));
}

.doku-rumpf > .doku-h2{
  margin-top:calc(13 * var(--pt));
}

.doku-rumpf > .doku-tabelle{
  margin-top:calc(9 * var(--pt));
}

.doku-rumpf > .doku-h1 + *,
.doku-rumpf > .doku-h2 + *{
  margin-top:calc(6 * var(--pt));
}

.doku-rumpf > :first-child{
  margin-top:0;
}

.doku-h1{
  font-family:var(--doku-kopf);
  font-size:calc(17 * var(--pt));
  font-weight:600;
  line-height:1.15;
  color:#191207;
}

.doku-h1::after{
  content:"";
  display:block;
  width:calc(56 * var(--pt));
  height:calc(6 * var(--pt));
  margin-top:calc(5 * var(--pt));
  background:#F3E9D8;
}

.doku-h2{
  font-family:var(--doku-kopf);
  font-size:calc(10.5 * var(--pt));
  font-weight:600;
  line-height:1.2;
  color:#8A6520;
}

.doku-p{
  font-size:calc(8.5 * var(--pt));
  line-height:1.5;
  color:#191207;
}

.doku-spalten{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(18 * var(--pt));
}

.doku-spalte{
  min-width:0;
}

.doku-spalte-titel{
  padding-top:calc(3 * var(--pt));
  border-top:calc(.6 * var(--pt)) solid #4A3B2B;
  font-size:calc(5.6 * var(--pt));
  letter-spacing:.22em;
  color:#6D5D47;
}

.doku-spalte ul{
  margin-top:calc(4 * var(--pt));
}

.doku-spalte li{
  position:relative;
  padding:calc(2.2 * var(--pt)) 0 calc(2.2 * var(--pt)) calc(9 * var(--pt));
  font-size:calc(8 * var(--pt));
  line-height:1.4;
}

.doku-spalte li::before{
  content:"·";
  position:absolute;
  left:calc(1 * var(--pt));
  top:calc(2.2 * var(--pt));
  font-weight:700;
  color:#A8801F;
}

.doku-tabelle table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:calc(7.4 * var(--pt));
  line-height:1.35;
}

.doku-tabelle th{
  padding:calc(3 * var(--pt)) calc(4 * var(--pt));
  border-bottom:calc(.8 * var(--pt)) solid #2A1A0E;
  font-family:var(--doku-mono);
  font-size:calc(5.4 * var(--pt));
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:left;
  vertical-align:bottom;
  color:#6D5D47;
}

.doku-tabelle td{
  padding:calc(2.6 * var(--pt)) calc(4 * var(--pt));
  border-bottom:calc(.4 * var(--pt)) solid #E6DCCB;
  vertical-align:top;
  overflow-wrap:anywhere;
}

.doku-tabelle tbody tr:nth-child(even) td{
  background:#FAF7F2;
}

.doku-tabelle .rechts{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.doku-tabelle tr.doku-summe td{
  border-top:calc(.8 * var(--pt)) solid #2A1A0E;
  border-bottom:0;
  background:#F3E9D8;
  font-weight:700;
}

.doku-tabelle-titel{
  margin-top:calc(3.5 * var(--pt));
  font-size:calc(7 * var(--pt));
  font-weight:600;
  color:#4A3B2B;
}

.doku-quelle{
  margin-top:calc(1 * var(--pt));
  font-size:calc(5.6 * var(--pt));
  letter-spacing:.04em;
  color:#6D5D47;
}

@media (max-width:560px){
  .konfig-doku-chip-still{
    display:none;
  }

  .konfig-doku-zeile-stand{
    flex-basis:92px;
  }

  .konfig-emission-kacheln{
    grid-template-columns:1fr 1fr;
  }

  .konfig-emission-kachel strong{
    font-size:19px;
  }

  .konfig-doku-flaeche{
    padding:10px 8px;
  }

  .doku-blatt + .doku-blatt{
    margin-top:14px;
  }
}

/* Acht Knoepfe im Dock seit dem 06.10.2026: auf schmalen Telefonen enger
   gesetzt. Nur im Dock, die Leiste nutzt dieselben Kreise. Gemessen auf 360
   Pixeln stehen alle acht ganz im Bild; `check_konfigurator` haelt das fest,
   damit ein neunter Knopf nicht still den letzten hinausschiebt. */
@media (max-width:420px){
  .konfig-dock{
    gap:4px;
    padding:6px 8px 8px;
  }

  .konfig-dock .konfig-dock-knopf{
    min-width:38px;
  }

  .konfig-dock .konfig-dock-kreis{
    width:38px;
    height:38px;
  }

  .konfig-dock .konfig-dock-kreis svg{
    width:18px;
    height:18px;
  }

  .konfig-dock .konfig-dock-name{
    font-size:8px;
    letter-spacing:.06em;
  }
}

@media (max-width:340px){
  .konfig-dock{
    gap:3px;
    padding:6px 6px 8px;
  }

  .konfig-dock .konfig-dock-knopf{
    min-width:36px;
  }

  .konfig-dock .konfig-dock-kreis{
    width:36px;
    height:36px;
  }

  .konfig-dock .konfig-dock-name{
    font-size:7px;
    letter-spacing:.04em;
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-zusatz-balken i,
  .konfig-doku-zeile{
    transition:none;
  }
}

/* Das Blatt gibt es nur am Schirm. */
@media print{
  .konfig-doku-betrachter{
    display:none!important;
  }
}

/* ==================================================================
   Die Leiste am linken Rand: vier runde Knoepfe fuer die Ansicht und
   das Feld, das rechts daneben ausfaehrt. Die Kreise sind die des Docks.
   ================================================================== */
.konfig-leiste{
  position:fixed;
  z-index:3;
  right:max(12px,env(safe-area-inset-right));
  top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  bottom:calc(var(--konfig-dock,0px) + 12px);
  display:flex;
  align-items:center;
  pointer-events:none;
}

.konfig-leiste[hidden]{display:none}

body.pcm-konfigurator.ifc-status-oben .konfig-leiste,
body.pcm-konfigurator.ifc-konfig-dock .konfig-leiste{
  top:calc(max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px)) + 44px);
}

/* Sieben Knoepfe mit Namen sind rund 480 Pixel hoch. Hochkant ist das kein
   Thema, quer auf einem Telefon schon: bei 390 Pixeln Schirmhoehe bleiben
   neben Feld oben und Dock unten rund 250. Die Leiste wird darum zuerst
   kleiner (siehe unten) und rollt notfalls. Eine Leiste, die aus dem Bild
   ragt, verliert ihre letzten Knoepfe ohne ein Zeichen davon. */
.konfig-leiste-knoepfe{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:8px;
  border:1px solid rgba(49,220,232,.28);
  border-radius:999px;
  background:rgba(6,10,16,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.55);
  pointer-events:auto;
  animation:konfig-leiste-auf .38s cubic-bezier(.2,.9,.25,1);
}

.ifc-simulator .konfig-leiste-knopf{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--ifc-cyan);
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.konfig-leiste-knopf .konfig-dock-kreis{transform-origin:0 50%}

.konfig-leiste-knopf[aria-pressed="true"] .konfig-dock-kreis,
.konfig-leiste-knopf[aria-expanded="true"] .konfig-dock-kreis{
  border-color:rgba(49,220,232,.9);
  box-shadow:0 0 0 1px rgba(49,220,232,.3),0 0 22px rgba(49,220,232,.32),0 6px 16px rgba(0,0,0,.45);
}

.konfig-leiste-knopf[aria-pressed="true"]::after,
.konfig-leiste-knopf[aria-expanded="true"]::after{
  content:"";
  position:absolute;
  top:50%;
  right:-6px;
  width:4px;
  height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--ifc-cyan);
  box-shadow:0 0 8px rgba(49,220,232,.8);
}

.konfig-leiste-knopf:active .konfig-dock-kreis{transform:scale(.94)}

.ifc-simulator .konfig-leiste-knopf:focus-visible{outline:none}

.konfig-leiste-knopf:focus-visible .konfig-dock-kreis{
  outline:2px solid rgba(49,220,232,.8);
  outline-offset:3px;
}

@media (hover:hover){
  .konfig-leiste-knopf:hover .konfig-dock-kreis{transform:translateX(4px) scale(1.12)}
}

/* Das Feld faehrt neben der Leiste aus, also nach links. `margin-left:auto`
   schiebt es an ihre Kante: mit `left`, `right` und einer Hoechstbreite
   stuende es sonst am linken Rand des Schirms, weit weg von dem Knopf, der
   es geoeffnet hat. */
.konfig-feld{
  position:fixed;
  z-index:3;
  top:max(16px,env(safe-area-inset-top),var(--konfig-kopf,0px));
  left:max(16px,env(safe-area-inset-left));
  right:calc(max(12px,env(safe-area-inset-right)) + 88px);
  max-width:340px;
  margin-left:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-sizing:border-box;
  padding:12px 14px 14px;
  pointer-events:auto;
  color:var(--ifc-ink);
  background:rgba(6,10,16,.86);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(49,220,232,.36);
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:konfig-feld-auf .28s cubic-bezier(.2,.9,.25,1);
}

.konfig-feld[hidden]{display:none}

.konfig-feld .konfig-analyse-kopf{flex:0 0 auto}

.konfig-feld-inhalt{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

.konfig-feld-satz{
  margin:0;
  color:var(--ifc-muted);
  font-size:12px;
  line-height:1.5;
}

.konfig-feld-hinweis{color:rgba(231,212,181,.92)}

.konfig-feld-grund{
  padding-left:10px;
  border-left:2px solid rgba(231,212,181,.45);
}

/* Detailgrad: drei Stufen, der Daumen gleitet zur gewaehlten. */
.konfig-stufen{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:4px;
  border:1px solid var(--ifc-line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.konfig-stufen-daumen{
  position:absolute;
  top:4px;
  bottom:4px;
  left:4px;
  width:calc((100% - 8px) / 3);
  box-sizing:border-box;
  border:1px solid rgba(49,220,232,.6);
  border-radius:9px;
  background:radial-gradient(circle at 50% 0,rgba(49,220,232,.28),rgba(49,220,232,.08) 70%);
  box-shadow:0 0 16px rgba(49,220,232,.22);
  transition:transform .28s cubic-bezier(.2,.9,.25,1),opacity .28s;
}

.konfig-stufen[data-stufe="1"] .konfig-stufen-daumen{transform:translateX(100%)}
.konfig-stufen[data-stufe="2"] .konfig-stufen-daumen{transform:translateX(200%)}
.konfig-stufen.ist-gesperrt .konfig-stufen-daumen{opacity:.35}

.ifc-simulator .konfig-stufe{
  position:relative;
  z-index:1;
  display:grid;
  gap:2px;
  justify-items:center;
  margin:0;
  padding:8px 4px;
  border:0;
  background:none;
  color:var(--ifc-muted);
  font:inherit;
  font-size:10.5px;
  cursor:pointer;
}

.konfig-stufe strong{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
}

.konfig-stufe[aria-checked="true"]{color:var(--ifc-ink)}
.konfig-stufe[aria-checked="true"] strong{color:var(--ifc-cyan)}

.ifc-simulator .konfig-stufe:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.ifc-simulator .konfig-stufe:focus-visible{
  outline:2px solid rgba(49,220,232,.8);
  outline-offset:-2px;
  border-radius:9px;
}

/* Ebenen: je Zeile ein Schalter. */
.konfig-schalter-liste{
  display:grid;
  gap:6px;
}

.ifc-simulator .konfig-schalter{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  width:100%;
  margin:0;
  padding:9px 10px;
  border:1px solid var(--ifc-line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--ifc-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.konfig-schalter-text{
  display:grid;
  gap:2px;
  min-width:0;
}

.konfig-schalter-text strong{
  font-size:13px;
  font-weight:600;
}

.konfig-schalter-satz{
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.4;
}

.konfig-schalter-zahl{
  color:var(--ifc-muted);
  font-family:var(--mono);
  font-size:10.5px;
}

.konfig-schalter-bahn{
  position:relative;
  width:34px;
  height:20px;
  box-sizing:border-box;
  border:1px solid var(--ifc-line);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  transition:background-color .28s,border-color .28s;
}

.konfig-schalter-knauf{
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--ifc-muted);
  transition:transform .28s cubic-bezier(.2,.9,.25,1),background-color .28s;
}

.konfig-schalter[aria-checked="true"] .konfig-schalter-bahn{
  border-color:rgba(49,220,232,.7);
  background:rgba(49,220,232,.28);
}

.konfig-schalter[aria-checked="true"] .konfig-schalter-knauf{
  transform:translateX(14px);
  background:var(--ifc-cyan);
  box-shadow:0 0 10px rgba(49,220,232,.6);
}

.ifc-simulator .konfig-schalter:disabled{cursor:not-allowed}

.konfig-schalter:disabled strong,
.konfig-schalter:disabled .konfig-schalter-bahn{opacity:.42}

.ifc-simulator .konfig-schalter:focus-visible{
  outline:2px solid rgba(49,220,232,.8);
  outline-offset:2px;
}

@media (hover:hover){
  .ifc-simulator .konfig-schalter:not(:disabled):hover{border-color:rgba(49,220,232,.5)}
}

/* Ansichtsvorlagen: Baum nach Fachgebiet. */
.konfig-baum{
  display:grid;
  gap:6px;
}

.konfig-baum-kategorie{
  border:1px solid var(--ifc-line);
  border-radius:12px;
}

.ifc-simulator .konfig-baum-kopf{
  display:grid;
  grid-template-columns:14px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  width:100%;
  margin:0;
  padding:9px 10px;
  border:0;
  background:none;
  color:var(--ifc-ink);
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}

.konfig-baum-kopf strong{font-weight:600}

.konfig-baum-pfeil{
  color:var(--ifc-cyan);
  font-size:16px;
  line-height:1;
  text-align:center;
  transition:transform .22s cubic-bezier(.2,.9,.25,1);
}

.konfig-baum-kopf[aria-expanded="true"] .konfig-baum-pfeil{transform:rotate(90deg)}

.konfig-baum-stand{
  color:var(--ifc-cyan);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.konfig-baum-stand.ist-leer{color:var(--ifc-muted)}

.konfig-baum-liste{
  display:grid;
  gap:4px;
  margin:0;
  padding:0 8px 8px 30px;
  list-style:none;
}

.konfig-baum-liste[hidden]{display:none}

.ifc-simulator .konfig-vorlage{
  display:grid;
  gap:2px;
  width:100%;
  margin:0;
  padding:8px 10px;
  border:1px solid rgba(49,220,232,.22);
  border-radius:10px;
  background:rgba(49,220,232,.05);
  color:var(--ifc-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.konfig-vorlage strong{
  font-size:12.5px;
  font-weight:600;
}

.konfig-vorlage span{
  color:var(--ifc-muted);
  font-size:11px;
  line-height:1.4;
}

.ifc-simulator .konfig-vorlage[aria-pressed="true"]{
  border-color:rgba(49,220,232,.9);
  box-shadow:0 0 0 1px rgba(49,220,232,.3),0 0 16px rgba(49,220,232,.22);
}

.ifc-simulator .konfig-vorlage:disabled{
  border-style:dashed;
  border-color:var(--ifc-line);
  background:none;
  color:var(--ifc-muted);
  cursor:not-allowed;
}

.ifc-simulator .konfig-baum-kopf:focus-visible,
.ifc-simulator .konfig-vorlage:focus-visible{
  outline:2px solid rgba(49,220,232,.8);
  outline-offset:2px;
}

@keyframes konfig-leiste-auf{
  from{opacity:0;transform:translateX(-16px)}
}

@keyframes konfig-feld-auf{
  from{opacity:0;transform:translateX(12px)}
}

/* Die Raumlegende und ihr Schalter stehen links im Modellkasten. Bis zum
   07.10.2026 stand die Leiste dort und schob beide um ihre Breite nach
   rechts; seit dem Seitentausch ist links frei, und der Abstand waere nur
   noch ein Loch. */

@media (max-width:860px){
  .konfig-leiste{
    right:max(8px,env(safe-area-inset-right));
    top:max(8px,env(safe-area-inset-top),var(--konfig-kopf,0px));
    bottom:calc(var(--konfig-dock,0px) + 8px);
  }
  body.pcm-konfigurator.ifc-status-oben .konfig-leiste,
  body.pcm-konfigurator.ifc-konfig-dock .konfig-leiste{
    top:calc(max(8px,env(safe-area-inset-top),var(--konfig-kopf,0px)) + 44px);
  }
  .konfig-leiste-knoepfe{
    gap:8px;
    padding:6px;
  }
  .konfig-leiste .konfig-dock-kreis{
    width:42px;
    height:42px;
  }
  .konfig-leiste .konfig-dock-kreis svg{
    width:20px;
    height:20px;
  }
  .konfig-feld{
    left:max(8px,env(safe-area-inset-left));
    right:calc(max(8px,env(safe-area-inset-right)) + 74px);
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-leiste-knoepfe,
  .konfig-feld{animation:none}
  .konfig-stufen-daumen,
  .konfig-schalter-bahn,
  .konfig-schalter-knauf,
  .konfig-baum-pfeil{transition:none}
}


/* =====================================================================
   DATENRAUM (/datenraum/, auf preview.pcm-vision.com die Startseite)

   Hier landet, wer sich auf www angemeldet hat. Jedes Projekt ist eine Box
   mit Ablaufdatum; abgelaufene treten zurueck, statt zu verschwinden, damit
   man sieht, was war. Die erste Box ist immer der Weg zum naechsten Projekt,
   und von dort laeuft das Fenster wie auf der Startseite.

   Die Farben sind die des Fensters: Cyan fuer das, was bereit ist und was
   man anklicken kann, Gold fuer das, was laeuft und fuer die Zeit.
   ===================================================================== */

body.pcm-datenraum{
  margin:0;
  min-height:100dvh;
  background:
    radial-gradient(110% 70% at 50% -12%,rgba(49,220,232,.09),transparent 62%),
    linear-gradient(180deg,#070c13,#04070c 70%);
  /* Die Grundfarbe traegt die ganze Leinwand. Der feste Verlauf deckt nur,
     was im Fenster steht: beim Ueberziehen auf dem Telefon und im Bild der
     ganzen Seite war darunter Weiss, und abgelaufene Boxen wurden grau. */
  background-color:#04070c;
  background-attachment:fixed;
  color:var(--ifc-ink,#f7f8fb);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

.datenraum{
  box-sizing:border-box;
  width:min(1120px,100%);
  margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right))
          56px max(18px,env(safe-area-inset-left));
}

.datenraum-kopf{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:4px 0 22px;
  margin-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.datenraum-marke{
  display:flex;
  align-items:center;
  gap:12px;
}

.datenraum-marke span{
  display:grid;
  gap:3px;
}

.datenraum-marke strong{
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:13px;
  font-weight:400;
  letter-spacing:.24em;
}

.datenraum-marke small{
  color:rgba(247,248,251,.5);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10.5px;
  letter-spacing:.22em;
}

.datenraum-konto{
  max-width:46vw;
  margin:0;
  overflow:hidden;
  color:rgba(247,248,251,.62);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12px;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.datenraum-kicker{
  margin:0 0 10px;
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12px;
  letter-spacing:.2em;
}

.datenraum h1{
  margin:0;
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  font-size:clamp(32px,4.6vw,48px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
}

.datenraum h1 span{color:var(--ifc-gold,#e7d4b5)}

.datenraum-lead{
  max-width:60ch;
  margin:12px 0 0;
  color:rgba(247,248,251,.7);
  font-size:15px;
  line-height:1.6;
}

.datenraum-status{
  margin:24px 0 0;
  color:rgba(247,248,251,.56);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:12px;
  letter-spacing:.1em;
}

.datenraum-status:empty{display:none}

.datenraum-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;
  margin-top:24px;
}

.datenraum-raster[hidden],
.datenraum-ohne[hidden]{display:none}

.datenraum-box{
  position:relative;
  box-sizing:border-box;
  min-height:200px;
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:20px 20px 18px;
  color:inherit;
  font:inherit;
  text-align:left;
  background:linear-gradient(158deg,rgba(22,26,40,.94),rgba(6,10,16,.97) 64%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  transition:border-color .2s ease,transform .2s ease,opacity .2s ease;
}

.datenraum-neu{
  align-items:flex-start;
  cursor:pointer;
  background:linear-gradient(158deg,rgba(20,44,54,.72),rgba(6,10,16,.94) 70%);
  border:1px dashed rgba(49,220,232,.5);
}

.datenraum-neu:hover{
  border-color:var(--ifc-cyan,#31dce8);
  transform:translateY(-2px);
}

.datenraum-neu:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:3px;
}

.datenraum-plus{
  position:relative;
  width:44px;
  height:44px;
  margin-bottom:auto;
  border:1px solid rgba(49,220,232,.55);
  border-radius:12px;
}

.datenraum-plus::before,
.datenraum-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:2px;
  background:var(--ifc-cyan,#31dce8);
  transform:translate(-50%,-50%);
}

.datenraum-plus::after{transform:translate(-50%,-50%) rotate(90deg)}

.datenraum-neu strong{
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  font-size:20px;
  font-weight:600;
}

.datenraum-neu small{
  color:rgba(247,248,251,.62);
  font-size:13px;
}

.datenraum-chip{
  align-self:flex-start;
  padding:4px 10px;
  color:rgba(247,248,251,.78);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
}

.datenraum-projekt[data-status="ready"] .datenraum-chip{
  color:var(--ifc-cyan,#31dce8);
  border-color:rgba(49,220,232,.55);
}

.datenraum-projekt[data-status="created"] .datenraum-chip,
.datenraum-projekt[data-status="uploading"] .datenraum-chip,
.datenraum-projekt[data-status="processing"] .datenraum-chip{
  color:var(--ifc-gold,#e7d4b5);
  border-color:rgba(231,212,181,.5);
}

.datenraum-projekt[data-status="failed"] .datenraum-chip{
  color:#f08a80;
  border-color:rgba(224,72,60,.6);
}

.datenraum-name{
  margin:4px 0 0;
  font-family:"Space Grotesk","Inter",system-ui,sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.datenraum-meta{
  margin:0;
  color:rgba(247,248,251,.62);
  font-size:13px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}

.datenraum-ablauf{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  margin:auto 0 0;
  padding-top:12px;
  color:rgba(247,248,251,.82);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  border-top:1px solid rgba(255,255,255,.08);
}

.datenraum-ablauf span{
  color:rgba(247,248,251,.5);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.datenraum-ablauf small{
  margin-left:auto;
  color:var(--ifc-gold,#e7d4b5);
  font-size:12px;
}

/* Abgelaufen: leicht durchsichtig und ohne Farbe. Die Box bleibt stehen,
   damit man sieht, was war; sie lockt nur nicht mehr. */
.datenraum-projekt.ist-abgelaufen{
  opacity:.5;
  filter:saturate(.35);
}

.datenraum-ohne{
  display:grid;
  gap:16px;
  justify-items:start;
  max-width:520px;
  margin-top:24px;
  padding:22px 22px 20px;
  background:rgba(9,13,20,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
}

.datenraum-ohne p{
  margin:0;
  color:rgba(247,248,251,.78);
  font-size:15px;
  line-height:1.55;
}

.datenraum-ohne a{text-decoration:none}

/* Offen heisst: fertig oder noch in Arbeit, und nicht abgelaufen. Dann ist
   die ganze Box der Weg zurueck ins Projekt, im Konfigurator. */
a.datenraum-projekt{
  text-decoration:none;
  cursor:pointer;
}

a.datenraum-projekt:hover{
  border-color:var(--ifc-cyan,#31dce8);
  transform:translateY(-2px);
}

a.datenraum-projekt:focus-visible{
  outline:2px solid var(--ifc-cyan,#31dce8);
  outline-offset:3px;
}

.datenraum-oeffnen{
  position:absolute;
  top:20px;
  right:20px;
  color:var(--ifc-cyan,#31dce8);
  font-family:var(--mono,"Share Tech Mono",monospace);
  font-size:10.5px;
  line-height:22px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media (max-width:560px){
  .datenraum-kopf{margin-bottom:26px}
  .datenraum-raster{grid-template-columns:1fr}
  .datenraum-box{min-height:172px}
}

@media (prefers-reduced-motion:reduce){
  .datenraum-box{transition:none}
  .datenraum-neu:hover,
  a.datenraum-projekt:hover{transform:none}
}

/* Ein Overlay ist offen und der Schirm ist ein Telefon hochkant: die linke
   Leiste geht ganz. Gemessen am 06.10.2026 auf 390x844: die Leiste steht
   74 Pixel breit links neben einem Overlay, das von 390 Pixeln 350 braucht,
   und ihr eigenes Feld ist beim Oeffnen gerade zugegangen. Quer bleibt sie,
   dort ist die Breite da. */
@media (max-width:860px) and (orientation:portrait){
  body.pcm-konfigurator.ifc-konfig-overlay .konfig-leiste{
    display:none;
  }

  /* Und weil sie geht, braucht das Overlay ihren Platz nicht freizuhalten.
     Sonst stuenden hochkant 74 Pixel je Seite leer neben einer Leiste, die
     gerade verschwunden ist. */
  body.pcm-konfigurator.ifc-konfig-leiste.ifc-konfig-overlay .konfig-analyse{
    --konfig-leiste-platz:0px;
  }
}

/* Das Faktenfeld am Telefon hochkant: enger gesetzt und mit Deckel.
   Gemessen am 06.10.2026 auf 390x844 deckte es 206 von 844 Pixeln zu, also
   ein Viertel des Bauwerks. Es steht dort **ueber** dem Modell und nimmt ihm
   seine Hoehe Pixel fuer Pixel; quer steht es daneben und darf bleiben, wie
   es ist. Gekuerzt wird nichts: was nicht hineinpasst, rollt. */
@media (max-width:860px) and (orientation:portrait){
  body.pcm-konfigurator .konfig-fakten{
    gap:6px;
  }
  body.pcm-konfigurator .konfig-fakten-inhalt{
    gap:7px;
    /* 96 Pixel plus 45 Pixel Rahmen sind 141 von 844, also ein Sechstel des
       Schirms statt des gemessenen Viertels. Mehr Deckel heisst weniger
       Bauwerk, und das Bauwerk ist hier die Aussage. */
    max-height:min(11dvh,96px);
  }
  body.pcm-konfigurator .konfig-fakten-zahlen{
    grid-template-columns:repeat(auto-fit,minmax(66px,1fr));
    gap:4px 8px;
  }
  body.pcm-konfigurator .konfig-fakten-zahlen b{
    font-size:11px;
  }
}

/* Ein langes Wort sprengt sonst seine Spalte und laeuft in die Nachbarin:
   "NETTOGESCHOSSFLAECHE" und "RAEUME" standen am 06.10.2026 auf 390 Pixeln
   ineinander. Es bricht jetzt um, statt zu ueberlaufen, und kostet dafuer in
   seiner eigenen Spalte eine zweite Zeile. */
.konfig-fakten-zahlen span{
  overflow-wrap:anywhere;
  line-height:1.2;
}

/* Liegt der Schirm quer und ist flach (ein Telefon im Querformat), traegt
   die Karte weniger Hoehe: unter ihr stehen noch Legende, Schalter und das
   Dock, und 320 Pixel Hoehe sind fuer alle vier zusammen zu wenig. */
@media (orientation:landscape) and (max-height:520px){
  body.pcm-konfigurator .konfig-fakten-inhalt{
    max-height:min(24dvh,110px);
  }
}

/* Der Name unter dem Zeichen, wie im Dock, nur kleiner: die Leiste steht
   schmal am Rand des Bildes, und "VORLAGEN" muss dort hineingehen. Der
   Knopf traegt seinen Namen ausserdem als `title` und als `aria-label`;
   dieser hier ist nur Bild. */
.konfig-leiste-name{
  font-size:7.5px;
  letter-spacing:.06em;
  text-align:center;
  max-width:62px;
}

.konfig-leiste-knoepfe::-webkit-scrollbar{
  width:0;
  height:0;
}

/* Kurzer Schirm: dieselben sechs Knoepfe, enger gesetzt. */
@media (max-height:620px){
  .konfig-leiste-knoepfe{
    gap:7px;
    padding:6px;
  }
  .konfig-leiste-knopf .konfig-dock-kreis{
    width:38px;
    height:38px;
  }
  .konfig-leiste-knopf .konfig-dock-kreis svg{
    width:18px;
    height:18px;
  }
  .konfig-leiste-name{
    font-size:7px;
  }
}

/* Telefon im Querformat: sechs Namen passen neben ein Bauwerk von 390
   Pixeln Hoehe nicht mehr, ohne dass die Leiste aus dem Bild laeuft. Die
   Zeichen bleiben, der Name bleibt als Tooltip und fuer Vorlesewerkzeuge. */
@media (max-height:470px){
  .konfig-leiste-knoepfe{
    gap:5px;
  }
  .konfig-leiste-knopf .konfig-dock-kreis{
    width:34px;
    height:34px;
  }
  .konfig-leiste-name{
    display:none;
  }
}

/* Die Markenzeile ganz oben.

   Zeichen und Projektname in einer Zeile, mittig am oberen Schirmrand, in
   jeder Bauform. Sie sagt, woran man arbeitet, und das gehoert in die Mitte
   und nicht an einen Rand. Sie nimmt keine Klicks an: unter ihr liegt das
   Bauwerk. Ausserhalb des Konfigurators, etwa im Datenraum, gibt es sie
   nicht; dort steht der Name schon auf der Seite. */
.konfig-marke{
  display:none;
}

/* Ausgerichtet wie die Karte darunter, nicht fuer sich: beides zusammen ist
   eine Spalte, und die steht in der Mitte.

   Quer am breiten Schirm stand die Zeile am 07.10.2026 fuer einen Tag
   linksbuendig ueber einer Spalte am linken Rand. Dass beide gleich breit
   rechnen, genuegt fuer eine Spalte naemlich nicht: bis 423 Pixeln
   Schirmbreite fuellen sie ihren Platz und stehen zwangslaeufig buendig,
   darueber ist die Karte schmaler als der Platz, und eine mittige Karte
   unter einer linksbuendigen Zeile steht sichtbar versetzt. Auf einem 440er
   Telefon waren das 16 Pixel: zu sehen auf dem Geraet, nicht in einer
   Pruefung auf 390. */
body.pcm-konfigurator .konfig-marke{
  position:fixed;
  z-index:3;
  top:max(16px,env(safe-area-inset-top));
  left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right));
  display:flex;
  justify-content:center;
  pointer-events:none;
}

/* Dieselbe Breite wie die Kopfkarte darunter, Zahl fuer Zahl: beides
   zusammen ist eine Spalte. Eine Zeile, die nur so breit ist wie ihr Text,
   steht ueber der Karte wie ein Rest. */
.konfig-marke-karte{
  display:flex;
  align-items:center;
  gap:9px;
  box-sizing:border-box;
  width:min(391px,100%);
  /* Rechts schmaler als links, weil rechts der Pfeil steht: dieselben
     Masse wie die Gewerkzeile, damit beide Pillen gleich aussehen. */
  padding:5px 11px 5px 7px;
  /* Die Zeile um die Pille herum laesst Klicks durch, die Pille nicht:
     sie fuehrt zur Auswahl aller Projekte. */
  pointer-events:auto;
  cursor:pointer;
  text-decoration:none;
  color:var(--ifc-text,rgba(226,240,255,.94));
  /* Durchsichtig genug, dass Raster und Schein darunter zu sehen sind, und
     deckend genug fuer die Zahlen darauf. Bis zum 07.10.2026 standen hier
     84 Prozent: damit lag die Leinwand zwar darunter, zu sehen war davon
     nichts, und die Karte las sich weiter wie ein angesetztes Panel. Die
     Unschaerfe traegt den Rest - sie glaettet, was sonst durch den Text
     laufen wuerde. */
  background:rgba(6,10,16,.6);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(49,220,232,.36);
  border-radius:999px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}

.konfig-marke-karte:hover,
.konfig-marke-karte:focus-visible{
  border-color:rgba(49,220,232,.6);
  background:rgba(8,14,22,.72);
}

.konfig-marke-logo{
  flex:0 0 auto;
  width:22px;
  height:22px;
  object-fit:contain;
}

/* Derselbe Pfeil wie in der Gewerkzeile. Ohne ihn sieht die Pille aus wie
   eine Aufschrift, und niemand fasst eine Aufschrift an. */
.konfig-marke-pfeil{
  flex:0 0 auto;
  margin-left:auto;
  padding-left:6px;
  font-size:15px;
  line-height:1;
  color:rgba(49,220,232,.75);
}

/* Lange Dateinamen sind die Regel, nicht die Ausnahme. Die Zeile bleibt
   eine Zeile und kuerzt mit drei Punkten, statt zu zweien zu werden und
   dem Bauwerk eine weitere Zeile Hoehe zu nehmen. */
.konfig-marke-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:11px;
  line-height:1.3;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ifc-text,rgba(226,240,255,.94));
}

/* Am Telefon ruecken beide Karten auf 8 Pixel an den Rand. Diese Regel
   steht hinter der Grundregel der Titelzeile und nicht oben bei der
   Kopfkarte: beide treffen gleich genau, und dann gewinnt die spaetere. */
@media (max-width:860px){
  body.pcm-konfigurator .konfig-marke{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
  }
}

@media (max-height:470px){
  .konfig-marke-karte{
    padding:3px 9px 3px 6px;
  }
  .konfig-marke-logo{
    width:18px;
    height:18px;
  }
  .konfig-marke-name{
    font-size:10px;
  }
}

/* ------------------------------------------------------------------
   Die Gewerkzeile zwischen Marke und Faktenfeld
   ------------------------------------------------------------------

   Dieselbe Pille wie die Markenzeile, mit zwei Unterschieden: sie nimmt
   Klicks an, und sie traegt einen Pfeil. Seit die Wahl nicht mehr im Dock
   steht, ist sie der einzige Weg ins Gewerk-Overlay, und der einzige Ort,
   an dem der Stand der Wahl immer zu sehen ist.

   Oben steht, welches Projekt, hier, welches Gewerk, darunter dessen
   Zahlen. Drei Zeilen einer Spalte, von aussen nach innen gelesen. */
.konfig-gewerk{ display:none; }

body.pcm-konfigurator .konfig-gewerk{
  position:fixed;
  z-index:3;
  top:max(16px,env(safe-area-inset-top),var(--konfig-marke,0px));
  left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right));
  display:flex;
  justify-content:center;
  pointer-events:none;
}

body.pcm-konfigurator .konfig-gewerk[hidden]{ display:none; }

.konfig-gewerk-karte{
  display:flex;
  align-items:center;
  gap:9px;
  box-sizing:border-box;
  width:min(391px,100%);
  padding:5px 11px 5px 7px;
  pointer-events:auto;
  cursor:pointer;
  text-align:left;
  background:rgba(6,10,16,.6);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(49,220,232,.36);
  border-radius:999px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  color:var(--ifc-text,rgba(226,240,255,.94));
}

.konfig-gewerk-karte:hover,
.konfig-gewerk-karte:focus-visible{
  border-color:rgba(49,220,232,.6);
  background:rgba(8,14,22,.72);
}

.konfig-gewerk-karte[aria-expanded="true"]{
  border-color:rgba(49,220,232,.8);
}

.konfig-gewerk-zeichen{
  flex:0 0 auto;
  display:flex;
  width:22px;
  height:22px;
}

.konfig-gewerk-zeichen svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:rgba(49,220,232,.9);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.konfig-gewerk-marke{
  flex:0 0 auto;
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(49,220,232,.85);
}

.konfig-gewerk-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  line-height:1.3;
  color:inherit;
}

.konfig-gewerk-pfeil{
  flex:0 0 auto;
  margin-left:auto;
  padding-left:6px;
  font-size:15px;
  line-height:1;
  color:rgba(49,220,232,.75);
}

@media (max-height:470px){
  .konfig-gewerk-karte{ padding:3px 9px 3px 6px; }
  .konfig-gewerk-zeichen{ width:18px; height:18px; }
  .konfig-gewerk-name{ font-size:11px; }
}

/* Der schmale Rand steht **hinter** der Grundregel, aus demselben Grund wie
   bei der Markenzeile: beide treffen gleich genau, und dann gewinnt die
   spaetere. Vorne stuende hier 16px gegen 8px der Nachbarn. */
@media (max-width:860px){
  body.pcm-konfigurator .konfig-gewerk{
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
  }
}

/* ------------------------------------------------------------------
   Die Gewerke in Kaesten, je Kategorie einer
   ------------------------------------------------------------------

   Im Overlay GEWERK. Jede Kategorie ein Kasten, darin jedes Gewerk mit
   seiner Zahl und seinem Balken, ohne Kappung, denn gewaehlt wird aus
   allem und nicht aus den ersten sieben. Der Kopf waehlt die ganze
   Kategorie, eine Zeile ihr Gewerk; beide schreiben in dasselbe
   Auswahlfeld darueber, damit es einen Stand gibt und nicht zwei. */
/* So viele Spalten, wie 260 Pixel breit hineingehen. Eine feste Zahl stand
   hier bis zum Abend des 07.10.2026, zwei ab 720 Pixeln Schirmbreite; seit
   das Overlay formatfuellend ist, waeren zwei Spalten auf einem breiten
   Schirm zwei Kaesten von 600 Pixeln, und eine Zeile mit Punkt, Namen und
   Betrag braucht davon ein Drittel. */
.konfig-gewerk-kacheln{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
  align-content:start;
}

.konfig-gewerk-kachel{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:1px solid rgba(247,248,251,.12);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}

.konfig-gewerk-kachel-kopf{
  display:flex;
  align-items:baseline;
  gap:8px;
  width:100%;
  padding:4px 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.konfig-gewerk-kachel-kopf:disabled{ cursor:default; }

.konfig-gewerk-kachel-kopf:not(:disabled):hover,
.konfig-gewerk-kachel-kopf:focus-visible{ background:rgba(49,220,232,.1); }

.konfig-gewerk-kachel-kopf[aria-pressed="true"]{
  background:rgba(49,220,232,.18);
  box-shadow:inset 0 0 0 1px rgba(49,220,232,.45);
}

.konfig-gewerk-kachel-name{
  font-family:var(--mono,"Roboto Mono",monospace);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(49,220,232,.9);
}

.konfig-gewerk-kachel-zahl{
  font-size:10px;
  color:rgba(247,248,251,.55);
}

.konfig-gewerk-kachel-summe{
  margin-left:auto;
  font-size:11px;
  font-weight:600;
  color:rgba(247,248,251,.8);
}

.konfig-gewerk-kachel-liste{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.konfig-gewerk-eintrag{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  width:100%;
  padding:4px 6px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:rgba(247,248,251,.86);
  text-align:left;
  cursor:pointer;
}

.konfig-gewerk-eintrag:disabled{
  color:rgba(247,248,251,.4);
  cursor:default;
}

.konfig-gewerk-eintrag:not(:disabled):hover,
.konfig-gewerk-eintrag:focus-visible{ background:rgba(255,255,255,.06); }

.konfig-gewerk-eintrag[aria-pressed="true"]{
  background:rgba(49,220,232,.18);
  box-shadow:inset 0 0 0 1px rgba(49,220,232,.45);
}

.konfig-gewerk-eintrag-punkt{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(247,248,251,.3);
}

.konfig-gewerk-eintrag-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
}

.konfig-gewerk-eintrag-wert{
  font-size:11px;
  color:rgba(247,248,251,.6);
}

/* Der Balken steht unter der Zeile und nicht neben ihr: neben einem Namen,
   der umbrechen darf, waere er mal 40 und mal 120 Pixel lang, und ein
   Balken, dessen Bahn sich aendert, vergleicht nichts mehr. */
.konfig-gewerk-eintrag-bahn{
  grid-column:1 / -1;
  display:block;
  height:2px;
  border-radius:2px;
  background:rgba(247,248,251,.1);
}

.konfig-gewerk-eintrag-bahn > i{
  display:block;
  height:100%;
  border-radius:2px;
  background:rgba(49,220,232,.6);
}


/* ------------------------------------------------------------------
   07.10.2026: der Modus RAEUME in der Eigenschaftenkarte

   RAEUME war ein Feld der Werkzeugleiste und ist ein Modus des Modells
   geworden; was es zeigte, steht jetzt in der Eigenschaftenkarte. Die
   geliehenen Teile bringen aus ihrem Platz in der Karte eigene Abstaende
   mit, und die Luecke der Eigenschaften setzt sie neu: dieselbe Regel wie
   im Overlay des Docks, aus demselben Grund. */
body.pcm-konfigurator .ifc-simulator .konfig-fakten-inhalt > *{
  flex:0 0 auto;
  margin:0;
}

body.pcm-konfigurator .ifc-simulator .konfig-fakten-inhalt > [hidden]{
  display:none;
}

/* Hochkant am Telefon ist der Inhalt der Eigenschaften auf 96 Pixel
   gedeckelt, damit das Bauwerk dahinter zu sehen bleibt.

   Bis zum 08.10.2026 stand hier eine Ausnahme fuer den Modus RAEUME, ein
   Drittel des Schirms, weil Farbtafel, Raumerkennung, Lage und Raumbuch in
   96 Pixeln vier Zeilen hinter einem Rollbalken waeren. Der Grund stimmt,
   die Folge war falsch: die Leiste rechts beginnt unter der Karte, und mit
   der doppelt so hohen Karte standen ihre Knoepfe mitten im Bauwerk. Eine
   Karte, die ihre Hoehe je Modus aendert, verschiebt alles unter sich.

   Die Hoehe liegt darum in jedem Modus fest, und wer mehr lesen will,
   rollt aus: der Griff unter der Karte am Ende dieser Datei. */

/* GESCHOSS ist eine Wahl aus mehreren und kein Schalter: eine Zeile ist
   gewaehlt oder nicht, und es gibt kein "aus". Darum traegt hier die Zeile
   selbst die Markierung und nicht ein Schieber an ihrem Rand. Ein Schieber
   neben vier anderen Schiebern sagt nicht, dass nur einer gelten kann. */
.ifc-simulator .konfig-geschoss-liste .konfig-schalter{
  grid-template-columns:minmax(0,1fr);
}

.ifc-simulator .konfig-geschoss-liste .konfig-schalter[aria-checked="true"]{
  border-color:rgba(49,220,232,.7);
  background:rgba(49,220,232,.14);
}

.ifc-simulator .konfig-geschoss-liste .konfig-schalter[aria-checked="true"] strong{
  color:var(--ifc-cyan);
}

/* Ein gesperrter Knopf der Leiste: RAEUME ohne Raumvolumen, und seit dem
   07.10.2026 gibt es ihn. Er bleibt stehen und sagt im Titel, was fehlt:
   ein Knopf, der verschwindet, nimmt die Auskunft mit, dass es ihn gibt. */
.ifc-simulator .konfig-leiste-knopf:disabled{
  cursor:not-allowed;
}

.konfig-leiste-knopf:disabled .konfig-dock-kreis,
.konfig-leiste-knopf:disabled .konfig-dock-name{
  opacity:.38;
}

@media (hover:hover){
  .konfig-leiste-knopf:disabled:hover .konfig-dock-kreis{transform:none}
}

/* ------------------------------------------------------------------
   07.10.2026, Abend: alles in der Mitte, das Overlay formatfuellend

   Steht ein Overlay des Docks, liegt die Eigenschaftenkarte vollstaendig
   darunter. Sie tritt darum weg. `visibility` und nicht `display`: die
   Karte bleibt messbar, `--konfig-kopf` behaelt seinen Wert, und das
   Bauwerk hinter dem Overlay rueckt nicht, nur weil davor eines steht.
   Mit `display:none` sprang es bei jedem Oeffnen und Schliessen.

   Die geliehenen Teile sind davon nicht betroffen: wer im Overlay steht,
   ist kein Kind der Karte mehr. */
body.pcm-konfigurator.ifc-konfig-overlay .konfig-kopf{
  visibility:hidden;
}

/* ------------------------------------------------------------------
   07.10.2026: Kategorien im Feld, Diagramme in den Overlays

   Das Eigenschaftenfeld ist der Ueberblick. Es traegt die Kopfzahl je
   Thema und ein kleines Bild dazu; wer mehr will, klickt und bekommt das
   Overlay mit der ausgebreiteten Auswertung.

   Die Diagramme sind Kaesten und kein SVG, ausser Ring und Kurve. Ein
   SVG mit `width:100%` skaliert seine Schrift mit, und dasselbe Diagramm
   stuende auf 390 Pixeln in Sechs-Punkt-Schrift und auf 1232 in
   Achtzehn. Kaesten nehmen die Schrift des Hauses.

   Die Farben stehen im Skript, nicht hier: sie haengen an den Daten, und
   die Reihenfolge der sechs ist gemessen und nicht gewaehlt. Hier steht
   nur, was alle Diagramme gemeinsam haben: duenne Marken, ein Raster,
   das zuruecktritt, und Zahlen in der Schriftfarbe des Hauses statt in
   der Farbe ihres Balkens.
   ------------------------------------------------------------------ */

.konfig-kat-raster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.konfig-kat{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  padding:7px 9px 8px;
  font:inherit;
  color:inherit;
  text-align:left;
  background:rgba(247,248,251,.05);
  border:1px solid rgba(247,248,251,.1);
  border-radius:10px;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}

.konfig-kat:focus-visible{
  outline:2px solid var(--ifc-cyan);
  outline-offset:2px;
}

.konfig-kat-titel{
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ifc-muted);
}

.konfig-kat-wert{
  font-size:15px;
  font-weight:700;
  line-height:1.1;
  color:var(--ifc-ink);
  /* Eine einzelne grosse Zahl steht in gewoehnlichen Ziffern. Gleich
     breite Ziffern sind fuer Spalten da, die untereinander stehen; in
     einer Zeile fuer sich lassen sie "121" auseinanderfallen. */
}

.konfig-kat-wert small{
  margin-left:2px;
  font-size:9px;
  font-weight:600;
  color:var(--ifc-muted);
}

/* Das kleine Bild: Balken ohne Achse und ohne Zahl. Es sagt, wie ungleich
   verteilt ist, was die Zahl darueber zusammenfasst. */
.konfig-kat-vorschau{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:16px;
  margin:2px 0 1px;
}

/* Die Kachel traegt bis zu vierzehn Balken. Klein stehen davon sieben,
   im ausgerollten Panel ab Tablet-Breite alle (unten am Dateiende). */
.konfig-kat-vorschau i:nth-child(n+8){
  display:none;
}

.konfig-kat-vorschau i{
  flex:1 1 0;
  min-width:0;
  background:var(--ifc-cyan);
  border-radius:2px 2px 0 0;
  opacity:.72;
}

/* Der Satz haelt sich an den unteren Rand. Eine Kachel ohne Vorschaubild,
   weil ihre Zahl keine Verteilung hat, waere sonst oben beschriftet und
   unten leer, und die vier Kacheln stuenden ungleich. */
.konfig-kat-satz{
  margin-top:auto;
  padding-top:2px;
  font-size:8.5px;
  line-height:1.3;
  color:var(--ifc-muted);
}

/* ---- Die Auswertungen in den Overlays ---------------------------- */

.konfig-auswertung{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.konfig-auswertung:empty{
  display:none;
}

.konfig-dia{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.konfig-dia-titel{
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ifc-ink);
}

.konfig-dia-satz{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:var(--ifc-muted);
}

/* Ab zwei Farben steht die Legende immer da: eine Zuordnung, die nur an
   der Farbe haengt, ist fuer jeden Zwanzigsten keine Zuordnung. */
.konfig-dia-legende{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  margin:0;
  padding:0;
  list-style:none;
}

.konfig-dia-legende li{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  color:var(--ifc-muted);
}

.konfig-dia-legende i{
  width:9px;
  height:9px;
  border-radius:2px;
}

.konfig-dia-balken{
  display:flex;
  flex-direction:column;
  /* Zwei Pixel Luft zwischen zwei Balken, wie im Ring. Ein Strich um
     jeden Balken macht aus zwoelf Flaechen vierundzwanzig Kanten. */
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}

.konfig-dia-balken li{
  display:grid;
  grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
}

.konfig-dia-name{
  overflow:hidden;
  font-size:11px;
  line-height:1.35;
  color:var(--ifc-muted);
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Die Bahn ist das Raster: eine Spur, die zuruecktritt, und darin der
   Balken. Darum braucht kein Diagramm hier Gitterlinien. */
.konfig-dia-feld{
  position:relative;
  height:7px;
  background:rgba(247,248,251,.07);
  border-radius:4px;
}

.konfig-dia-feld i{
  display:block;
  height:100%;
  min-width:3px;
  background:var(--ifc-cyan);
  /* Am Nullpunkt bleibt der Balken eckig und sitzt auf der Achse; nur das
     Ende, das die Groesse zeigt, ist gerundet. */
  border-radius:0 4px 4px 0;
}

.konfig-dia-wert{
  font-size:11px;
  font-weight:700;
  color:var(--ifc-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---- Ring -------------------------------------------------------- */

.konfig-dia-ring-reihe{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}

.konfig-dia-ring-bild{
  flex:0 0 auto;
  width:124px;
  height:124px;
}

.konfig-dia-ring-teil{
  fill:none;
  stroke-width:14;
}

/* Die Legende waechst nicht ueber ihre Lesbarkeit hinaus. Auf der vollen
   Breite des Overlays stuende der Prozentwert einen halben Meter rechts
   von seinem Namen, und dann gehoert er zu keinem mehr. */
.konfig-dia-ring-legende{
  display:flex;
  flex:0 1 460px;
  flex-direction:column;
  gap:5px;
  margin:0;
  padding:0;
  list-style:none;
}

.konfig-dia-ring-legende li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:8px;
  min-width:0;
}

.konfig-dia-ring-legende i{
  width:9px;
  height:9px;
  border-radius:2px;
  transform:translateY(1px);
}

.konfig-dia-ring-legende span{
  min-width:0;
  overflow:hidden;
  font-size:11px;
  color:var(--ifc-muted);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.konfig-dia-ring-legende span small{
  margin-left:6px;
  font-size:10px;
  opacity:.75;
}

.konfig-dia-ring-legende b{
  font-size:11px;
  color:var(--ifc-ink);
  font-variant-numeric:tabular-nums;
}

/* ---- Kurve ------------------------------------------------------- */

/* Das Bild wird auf die Breite gezogen. Es traegt darum keine Schrift:
   gezogene Schrift ist entstellte Schrift. Die Beschriftung steht
   darunter als Text, der Strich bleibt zwei Pixel breit. */
.konfig-dia-kurve-bild{
  display:block;
  width:100%;
  height:76px;
}

.konfig-dia-kurve-flaeche{
  fill:rgba(49,220,232,.16);
}

.konfig-dia-kurve-linie{
  fill:none;
  stroke:var(--ifc-cyan);
  stroke-width:2;
  stroke-linejoin:round;
  stroke-linecap:round;
}

/* Die Beschriftungen stehen an den Stellen ihrer Punkte: das Skript setzt
   je Eintrag ein `left` in Prozent. Ein Raster aus gleichen Spalten setzte
   sie in deren Mitte, und das ist bei neun Punkten ein halbes Neuntel
   daneben. */
.konfig-dia-achse{
  position:relative;
  height:17px;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(247,248,251,.1);
}

.konfig-dia-achse li{
  position:absolute;
  top:4px;
  font-size:9.5px;
  color:var(--ifc-muted);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  transform:translateX(-50%);
}

.konfig-dia-achse li:first-child{
  transform:none;
}

.konfig-dia-achse li:last-child{
  transform:translateX(-100%);
}

.konfig-dia-ende{
  margin:0;
  font-size:11px;
  font-weight:700;
  color:var(--ifc-ink);
}

/* ---- Kennzahlenkacheln ------------------------------------------- */

.konfig-dia-kennzahlen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;
}

.konfig-dia-kachel{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  padding:8px 10px 9px;
  background:rgba(247,248,251,.05);
  border:1px solid rgba(247,248,251,.1);
  border-radius:10px;
}

.konfig-dia-kachel span{
  font-size:8.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ifc-muted);
}

.konfig-dia-kachel strong{
  font-size:17px;
  font-weight:700;
  line-height:1.15;
  color:var(--ifc-ink);
}

.konfig-dia-kachel strong small{
  font-size:10px;
  font-weight:600;
  color:var(--ifc-muted);
}

.konfig-dia-kachel em{
  font-size:9.5px;
  font-style:normal;
  line-height:1.3;
  color:var(--ifc-muted);
}

@media (hover:hover){
  .konfig-kat:hover{
    background:rgba(49,220,232,.12);
    border-color:rgba(49,220,232,.45);
  }
}

/* Schmal: das Feld oben hat auf dem Telefon 96 Pixel Hoehe. Dort traegt
   die Kachel ihre Zahl und ihren Namen, das kleine Bild bleibt weg: ein
   Bild von sechs Pixeln Hoehe ist kein Bild mehr, nur noch Hoehe. */
@media (max-width:860px) and (orientation:portrait){
  body.pcm-konfigurator .konfig-kat-raster{
    gap:4px;
  }
  body.pcm-konfigurator .konfig-kat{
    padding:5px 7px 6px;
    border-radius:8px;
  }
  body.pcm-konfigurator .konfig-kat-vorschau{
    display:none;
  }
  body.pcm-konfigurator .konfig-kat-wert{
    font-size:13px;
  }
  body.pcm-konfigurator .konfig-kat-satz{
    display:none;
  }
}

/* Im Overlay ist Platz, auf dem Telefon aber keine neun Zentimeter fuer
   den Namen: dort nimmt der Name, was uebrig ist. */
@media (max-width:560px){
  .konfig-dia-balken li{
    grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto;
    gap:7px;
  }
  .konfig-dia-ring-reihe{
    gap:12px;
  }
  .konfig-dia-ring-bild{
    width:92px;
    height:92px;
  }
  .konfig-dia-kurve-bild{
    height:62px;
  }
  .konfig-dia-kennzahlen{
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:6px;
  }
  .konfig-dia-kachel strong{
    font-size:15px;
  }
  /* Neun Phasen auf 390 Pixeln sind 43 Pixel je Beschriftung. Der Code
     steht da, der Name steht in der Tabelle darunter. */
  .konfig-dia-achse li{
    font-size:8.5px;
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-kat{
    transition:none;
  }
}

/* ------------------------------------------------------------------
   Titel und Gewerk nebeneinander, hochkant am Telefon (08.10.2026)
   ------------------------------------------------------------------

   Zwei Pillen uebereinander kosten 42 Pixel Hoehe, und hochkant ist Hoehe
   das Knappe: darunter stehen die Kopfkarte, das Bauwerk und das Dock.
   Nebeneinander kosten dieselben zwei Pillen eine Zeile. Links, woran man
   arbeitet, rechts, welches Gewerk. Zusammen so breit wie die Karte
   darunter, damit die Spalte eine Spalte bleibt.

   Die Spaltenbreite steht im Kasten und nicht in der Pille. `min(391px,
   100%)` als einzige Rasterspalte haelt beide auf der Breite der Karte,
   auch auf einem Tablett hochkant, wo der Platz breiter ist als die
   Karte; die Pille rechnet ihre halbe Breite dann gegen die Spalte und
   nicht gegen den Schirm.

   Geteilt wird nur, solange es etwas zu teilen gibt. Vor dem Ergebnis ist
   die Gewerkzeile versteckt, und eine halbe Pille mit leerer Haelfte
   daneben saehe aus wie ein Fehler. `:has()` fragt genau das. */
@media (max-width:860px) and (orientation:portrait){
  body.pcm-konfigurator .konfig-marke:has(~ .konfig-gewerk:not([hidden])),
  body.pcm-konfigurator .konfig-gewerk{
    display:grid;
    grid-template-columns:min(391px,100%);
    justify-content:center;
    align-items:start;
  }
  /* Dieselbe Oberkante wie die Marke: eine Zeile hat eine Oberkante. */
  body.pcm-konfigurator .konfig-gewerk{
    top:max(16px,env(safe-area-inset-top));
  }
  .konfig-marke:has(~ .konfig-gewerk:not([hidden])) .konfig-marke-karte{
    width:calc(50% - 4px);
    justify-self:start;
  }
  .konfig-gewerk-karte{
    width:calc(50% - 4px);
    justify-self:end;
  }
}

/* ------------------------------------------------------------------
   Der Griff unter der Karte: ausrollen bis kurz ueber das Dock (08.10.2026)
   ------------------------------------------------------------------

   Hochkant am Telefon ist die Karte ein Deckel ueber dem Bauwerk, und ihre
   Hoehe steht fest, damit die Leiste rechts still steht. Fest heisst aber
   nicht endgueltig: ein Griff unter der Karte rollt sie aus, bis kurz ueber
   das Dock, und die Leiste faehrt dabei nach rechts aus dem Bild.

   Die Leiste geht, statt schmaler zu werden. Zwischen einer Karte, die
   fast den ganzen Schirm nimmt, und dem Dock blieben ihr sonst dreissig
   Pixel, und vier Knoepfe in dreissig Pixeln sind kein Bedienelement mehr.
   Sie kommt zurueck, sobald die Karte wieder einklappt.

   Geklammert wird ohne eine einzige gemessene Zahl: der Kasten der Karte
   reicht ausgerollt von ihrer Oberkante bis zwoelf Pixel ueber das Dock,
   genau wie die Leiste, die Karte nimmt davon, was nach dem Griff bleibt,
   und der Inhalt rollt in dem, was der Karte bleibt. Die Zahl im `max-height`
   des Inhalts bewegt nur die Bewegung: sie ist absichtlich etwas groesser
   als das Ziel, damit der Verlauf nicht vorzeitig steht, und was wirklich
   gilt, entscheidet der Kasten darueber. */
.konfig-kopf-griff{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;
  height:20px;
  padding:0;
  pointer-events:auto;
  cursor:pointer;
  border:1px solid rgba(49,220,232,.3);
  border-radius:999px;
  background:rgba(6,10,16,.6);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  color:rgba(49,220,232,.85);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}

.konfig-kopf-griff:hover,
.konfig-kopf-griff:focus-visible{
  border-color:rgba(49,220,232,.6);
  background:rgba(8,14,22,.74);
}

/* Der Winkel der beiden Pillen darueber, um eine Vierteldrehung gelegt:
   nach unten heisst oeffnen, nach oben schliessen. */
.konfig-kopf-griff-pfeil{
  display:block;
  font-size:15px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .3s cubic-bezier(.2,.9,.25,1);
}

.konfig-kopf-griff[aria-expanded="true"] .konfig-kopf-griff-pfeil{
  transform:rotate(-90deg);
}

@media (max-width:860px) and (orientation:portrait){
  /* Karte und Griff stehen untereinander in einer Spalte, mittig wie alles
     andere oben. Der Kasten reicht bis zwoelf Pixel ueber das Dock, genau
     wie die Leiste rechts: er laesst Klicks durch, die Karte darin nimmt
     nur, was sie braucht, und ausgerollt den ganzen Rest. */
  body.pcm-konfigurator .konfig-kopf{
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    bottom:calc(var(--konfig-dock,0px) + 12px);
  }
  /* Der Griff gehoert zu den Zahlen. Ueber dem Fortschrittsbalken gaebe es
     nichts auszurollen. */
  .konfig-kopf-karte[data-inhalt="fakten"] ~ .konfig-kopf-griff{
    display:flex;
  }
  body.pcm-konfigurator .konfig-kopf-karte{
    display:flex;
    flex-direction:column;
    flex:0 1 auto;
    min-height:0;
  }
  body.pcm-konfigurator .konfig-fakten{
    min-height:0;
  }
  body.pcm-konfigurator .konfig-fakten-inhalt{
    flex:1 1 auto;
    min-height:0;
    transition:max-height .34s cubic-bezier(.2,.9,.25,1);
  }
  body.pcm-konfigurator .konfig-leiste{
    transition:transform .34s cubic-bezier(.2,.9,.25,1),opacity .22s linear;
  }

  /* Ausgerollt. `height` fuellt, `max-height` bewegt: der Verlauf laeuft
     auf dem Deckel, waehrend die volle Hoehe schon darunter steht. Beide
     tragen dieselbe Rechnung, sonst stuende der Verlauf vor dem Ziel.
     Die Zahl ist gemessen und nicht geschaetzt (08.10.2026, 390x844): was
     die Karte um ihren Inhalt herum braucht, plus der Griff mit seiner
     Luft, plus die zwoelf Pixel ueber dem Dock. */
  body.pcm-konfigurator.ifc-konfig-fakten-weit .konfig-fakten-inhalt{
    height:var(--konfig-weit);
    max-height:var(--konfig-weit);
  }
  body.pcm-konfigurator.ifc-konfig-fakten-weit{
    --konfig-weit:calc(100dvh - var(--konfig-wahl,0px) - var(--konfig-dock,0px) - 81px);
  }
  /* Die Leiste faehrt nach rechts aus dem Bild. Zwischen einer fast
     schirmhohen Karte und dem Dock blieben ihr dreissig Pixel, und sieben
     Knoepfe in dreissig Pixeln sind kein Bedienelement mehr. */
  body.pcm-konfigurator.ifc-konfig-fakten-weit .konfig-leiste{
    transform:translateX(calc(100% + max(12px,env(safe-area-inset-right))));
    opacity:0;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-kopf-griff-pfeil,
  body.pcm-konfigurator .konfig-fakten-inhalt,
  body.pcm-konfigurator .konfig-leiste{
    transition:none;
  }
}

/* ------------------------------------------------------------------
   09.10.2026: ab Tablet-Breite wie am Desktop

   Nur das Telefon behaelt die Spalte in der Mitte. Ab 861 Pixeln, also auf
   dem iPad hoch und quer und am Desktop, steht die Karte mit den Zahlen als
   ausgerolltes Panel am linken Rand, von der Gewerkzeile bis ueber das Dock.
   Darueber stehen Marke und Gewerk als einzeiliger Kopf nebeneinander,
   zuerst die Marke, dann das Gewerk, je halb so breit und zusammen genau so
   breit wie das Panel, mit etwas Luft zum Panel. Am Nachmittag stand die
   Marke kurz fuer sich in der Mitte und danach kurz ueber dem Gewerk; der
   Nutzer wollte eine Zeile, nicht breiter als das Panel. Die Beschriftung
   "Gewerk" faellt in der halben Pille weg, das Zeichen sagt es.

   Das Skript setzt `ifc-konfig-seite`, sobald die Karte Zahlen traegt, und
   meldet ihre rechte Kante als `--konfig-seite`; der Betrachter rahmt das
   Bauwerk rechts davon. Waehrend gerechnet wird, bleibt der Fortschritt
   oben in der Mitte.

   Am Mittag stand das Panel kurz und klein unter einer geteilten
   Kopfzeile: es war auf ein Drittel der Hoehe gedeckelt und zeigte die
   Kacheln zu zweit nebeneinander. Ausgerollt steht jede Kachel in einer
   eigenen Zeile mit grossem Bild. Das Panel ist so hoch wie sein Inhalt und
   hoechstens bis ueber das Dock: leere Flaeche unten gibt es nicht, was
   nicht hineinpasst, rollt.

   Oeffnet ein Overlay des Docks, faehrt das Panel nach links und die
   Werkzeugleiste nach rechts aus dem Bild, und das Overlay nimmt die ganze
   Flaeche zwischen Kopfzeile und Dock, deckend und ohne Durchsicht.
   ------------------------------------------------------------------ */
@media (min-width:861px){
  body.pcm-konfigurator.ifc-konfig-seite{
    --konfig-halb:calc((min(391px,calc(100vw - 32px)) - 8px) / 2);
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-marke,
  body.pcm-konfigurator.ifc-konfig-seite .konfig-gewerk{
    top:max(16px,env(safe-area-inset-top));
    right:auto;
    width:var(--konfig-halb);
    justify-content:flex-start;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-gewerk{
    left:calc(max(16px,env(safe-area-inset-left)) + var(--konfig-halb) + 8px);
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-gewerk-marke{
    display:none;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-marke-karte,
  body.pcm-konfigurator.ifc-konfig-seite .konfig-gewerk-karte{
    width:100%;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kopf{
    top:calc(max(16px,env(safe-area-inset-top),var(--konfig-wahl,0px)) + 6px);
    right:auto;
    width:min(391px,calc(100vw - 32px));
    bottom:calc(var(--konfig-dock,0px) + 12px);
    align-items:flex-start;
    justify-content:flex-start;
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s;
  }
  body.pcm-konfigurator.ifc-konfig-seite.ifc-konfig-overlay .konfig-kopf{
    transform:translateX(calc(-100% - 32px));
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;
  }
  body.pcm-konfigurator .konfig-leiste{
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s;
  }
  body.pcm-konfigurator.ifc-konfig-overlay .konfig-leiste{
    visibility:hidden;
    transform:translateX(calc(100% + 32px));
    transition:transform .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;
  }
  body.pcm-konfigurator.ifc-konfig-leiste.ifc-konfig-overlay .konfig-analyse{
    --konfig-leiste-platz:0px;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kopf-karte{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:100%;
    padding:14px 16px 16px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-fakten{
    gap:12px;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-fakten-kopf strong{ font-size:15px; }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-fakten-summe{ font-size:14px; }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-fakten-inhalt{
    gap:12px;
    max-height:none;
    overflow:visible;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-raster{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat{
    gap:4px;
    padding:10px 12px 11px;
    border-radius:12px;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-titel{ font-size:9px; }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-wert{ font-size:19px; }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-wert small{ font-size:11px; }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-vorschau{
    gap:3px;
    height:clamp(30px,7vh,96px);
    margin:4px 0 2px;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-vorschau i:nth-child(n+8){
    display:block;
  }
  body.pcm-konfigurator.ifc-konfig-seite .konfig-kat-satz{ font-size:10px; }
  /* Legende und Statuszeile stehen oben links im Modellkasten. Neben dem
     Panel, nicht darunter. */
  body.pcm-konfigurator.ifc-konfig-seite .ifc-raum-legende,
  body.pcm-konfigurator.ifc-konfig-seite .ifc-live-model-status{
    left:calc(max(16px,env(safe-area-inset-left),var(--konfig-seite,0px)) + 4px);
  }
}

/* Die Overlays des Docks sind deckend, in jeder Bauform (09.10.2026).
   Durchsichtig lag das Bauwerk als Schleier unter Bericht und Diagramm. */
body.pcm-konfigurator .konfig-analyse-karte{
  background:#070b11;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (prefers-reduced-motion:reduce){
  body.pcm-konfigurator .konfig-kopf,
  body.pcm-konfigurator .konfig-leiste{
    transition:none;
  }
}

/* ------------------------------------------------------------------
   09.10.2026: die Overlays des Docks als Hauptdashboards

   Oben Stand und Kennzahlen ueber die ganze Breite, darunter Karten in
   einem Raster, das die Flaeche fuellt. Am Telefon steht alles in einer
   Spalte, ab Tablet-Breite nebeneinander. `ist-breit` nimmt zwei Spalten,
   `ist-voll` die ganze Zeile: Plaene, Vorschlaege, breite Tabellen.
   ------------------------------------------------------------------ */
body.pcm-konfigurator .konfig-analyse .konfig-dash{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));
  grid-auto-flow:row dense;
  align-items:start;
  gap:12px;
}

body.pcm-konfigurator .konfig-analyse .konfig-dash > .konfig-dash-reihe,
body.pcm-konfigurator .konfig-analyse .konfig-dash > .ist-voll{
  grid-column:1 / -1;
}

@media (min-width:861px){
  body.pcm-konfigurator .konfig-analyse .konfig-dash > .ist-breit{
    grid-column:span 2;
  }
}

.konfig-dash-karte{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  margin:0;
  padding:12px 14px 14px;
  background:rgba(247,248,251,.035);
  border:1px solid rgba(247,248,251,.09);
  border-radius:12px;
}

.konfig-dash-karte[hidden]{ display:none; }

.konfig-dash-karte > *{ margin:0; }

.konfig-dash-titel{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ifc-cyan,#31dce8);
}

.konfig-dash-karte .konfig-zusatz-tabelle{
  max-height:420px;
  overflow:auto;
}

.konfig-dash .konfig-emission-vorschlaege{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  gap:10px;
}

/* Gestapelte Balken: Ressourcen je Phase nach Rolle. */
.konfig-stapel{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.konfig-stapel-zeile{
  display:grid;
  grid-template-columns:minmax(110px,34%) 1fr auto;
  align-items:center;
  gap:10px;
  font-size:11px;
}

.konfig-stapel-name{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ifc-ink);
}

.konfig-stapel-spur{
  display:flex;
  height:12px;
  border-radius:3px;
  background:rgba(247,248,251,.06);
  overflow:hidden;
}

.konfig-stapel-spur i{
  display:block;
  height:100%;
}

.konfig-stapel-wert{
  min-width:56px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--ifc-ink);
}

/* Phasenwahl ueber Kalender und Plan. */
.konfig-plan-wahl{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.konfig-plan-phase{
  padding:5px 10px;
  font:inherit;
  font-size:11px;
  color:var(--ifc-muted);
  background:rgba(247,248,251,.04);
  border:1px solid rgba(247,248,251,.12);
  border-radius:999px;
  cursor:pointer;
}

.konfig-plan-phase[aria-pressed="true"]{
  color:var(--ifc-ink);
  border-color:rgba(49,220,232,.7);
  background:rgba(49,220,232,.14);
}

.konfig-plan-huelle{
  overflow-x:auto;
  overscroll-behavior-x:contain;
}

/* Kalender und Personaleinsatzplan: ein Raster, links die Namen. */
.konfig-kalender,
.konfig-pep{
  display:grid;
  font-size:10px;
  color:var(--ifc-ink);
}

.konfig-kalender{
  grid-template-columns:minmax(140px,180px) repeat(var(--plan-spalten),minmax(66px,1fr));
  min-width:1180px;
}

.konfig-pep{
  grid-template-columns:minmax(150px,190px) repeat(var(--plan-spalten),minmax(11px,1fr)) 54px;
  min-width:960px;
}

.konfig-plan-ecke,
.konfig-plan-woche,
.konfig-plan-tag,
.konfig-plan-halb{
  padding:3px 4px;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ifc-muted);
  white-space:nowrap;
  overflow:hidden;
}

.konfig-plan-woche{
  color:var(--ifc-ink);
  font-weight:700;
  border-left:1px solid rgba(49,220,232,.4);
}

.konfig-plan-tag,
.konfig-plan-halb{
  text-align:center;
  border-left:1px solid rgba(247,248,251,.06);
}

.konfig-plan-halb{
  padding:2px 0;
  font-size:8px;
}

.konfig-plan-tag.ist-wochenanfang,
.konfig-plan-halb.ist-wochenanfang,
.konfig-kalender-tag.ist-wochenanfang,
.konfig-pep-feld.ist-wochenanfang{
  border-left:1px solid rgba(49,220,232,.4);
}

.konfig-plan-halb.ist-tagesanfang,
.konfig-pep-feld.ist-tagesanfang{
  border-left:1px solid rgba(247,248,251,.14);
}

.konfig-plan-gewerk,
.konfig-pep-name,
.konfig-pep-gewerk{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:4px 6px 4px 0;
  border-top:1px solid rgba(247,248,251,.07);
}

.konfig-plan-gewerk span,
.konfig-pep-name span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.konfig-plan-gewerk i,
.konfig-pep-name i,
.konfig-pep-gewerk i{
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
}

.konfig-pep-name{
  padding-left:14px;
  color:var(--ifc-muted);
}

.konfig-pep-name i{
  border-radius:2px;
}

.konfig-pep-gewerk{
  margin-top:6px;
  padding-top:8px;
  font-size:11px;
  border-top:1px solid rgba(49,220,232,.25);
}

.konfig-pep-gewerk span{
  color:var(--ifc-muted);
}

.konfig-kalender-tag{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:4px 3px;
  border-top:1px solid rgba(247,248,251,.07);
  border-left:1px solid rgba(247,248,251,.06);
}

.konfig-kalender-chip{
  display:block;
  padding:2px 4px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9.5px;
  line-height:1.3;
  background:rgba(247,248,251,.06);
  border-left:3px solid var(--ifc-cyan);
  border-radius:3px;
}

.konfig-kalender-mehr{
  font-size:9px;
  color:var(--ifc-muted);
}

.konfig-pep-feld{
  min-height:20px;
  margin:2px 0;
  border-left:1px solid rgba(247,248,251,.04);
  background:rgba(247,248,251,.03);
}

.konfig-pep-rest{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:2px;
  font-size:10px;
  font-variant-numeric:tabular-nums;
  color:#e3b34a;
}

/* DOKU: die Kategorien als Kacheln mit ihrer Zahl. */
.konfig-doku-kategorien{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
}

.konfig-doku-kategorie{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:9px 12px 10px;
  font:inherit;
  text-align:left;
  color:var(--ifc-ink);
  background:rgba(247,248,251,.05);
  border:1px solid rgba(247,248,251,.1);
  border-radius:10px;
  cursor:pointer;
}

.konfig-doku-kategorie span{
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ifc-muted);
}

.konfig-doku-kategorie strong{
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.konfig-doku-kategorie[aria-pressed="true"]{
  border-color:rgba(49,220,232,.75);
  background:rgba(49,220,232,.12);
}

.konfig-doku-kategorie[data-kategorie="alle"][aria-pressed="true"]{
  border-color:rgba(247,248,251,.1);
  background:rgba(247,248,251,.05);
}

.konfig-dash-karte .konfig-doku-liste{
  max-height:min(56vh,620px);
  overflow:auto;
}

/* EXPORT als Dashboard: oben, was der Bericht enthaelt, darunter Bericht
   und PHINIX nebeneinander. */
.konfig-export{
  gap:10px;
}

@media (min-width:861px){
  body.pcm-konfigurator .konfig-analyse-karte[data-analyse="export"] .konfig-analyse-inhalt{
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    align-content:start;
    gap:12px;
  }
  body.pcm-konfigurator .konfig-analyse-karte[data-analyse="export"] .konfig-analyse-inhalt > *{
    grid-column:1 / -1;
  }
  body.pcm-konfigurator .konfig-analyse-karte[data-analyse="export"] .konfig-analyse-inhalt > .ifc-report-offer{
    grid-column:1;
  }
  body.pcm-konfigurator .konfig-analyse-karte[data-analyse="export"] .konfig-analyse-inhalt > #ifcPhinixInsight{
    grid-column:2;
  }
}

.konfig-dash-spalte{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

/* ------------------------------------------------------------------
   09.10.2026: SIMULATION

   Seit dem 09.10.2026 abends ein deckendes Overlay wie jedes andere im
   Dock, mit Kopf, Titel und Schliessen. Das Bauwerk mit Sonne, Schatten
   und Stoffen steht auf einer Buehne in seiner Mitte, gezeichnet vom
   Betrachter. Links und rechts die Diagramme, unter der Buehne die
   Zeitleiste mit dem Play-Knopf. Am Telefon Buehne, Leiste und ein Band
   aus Karten zum Wischen untereinander.
   ------------------------------------------------------------------ */
/* Das Kleinbild braucht es hier nicht: die Buehne ist das Modell. */
body.pcm-konfigurator .konfig-analyse-karte[data-analyse="simulation"] .konfig-kleinbild{
  display:none;
}

body.pcm-konfigurator .konfig-analyse-karte[data-analyse="simulation"] .konfig-analyse-zeichen{
  border-color:rgba(239,208,163,.55);
  background:radial-gradient(circle at 50% 30%,rgba(239,208,163,.25),rgba(8,14,22,.92) 72%);
  color:#efd0a3;
}

body.pcm-konfigurator .konfig-analyse-karte[data-analyse="simulation"] .konfig-analyse-inhalt{
  overflow:hidden;
}

body.pcm-konfigurator .konfig-analyse-inhalt > .konfig-sim{
  flex:1 1 auto;
  min-height:0;
  margin:0;
}

.konfig-sim{
  display:grid;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,300px);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"l m r" "l b r";
  gap:12px;
  width:100%;
  height:100%;
  min-height:0;
  color:var(--ifc-ink,#e8f4f6);
}

.konfig-sim-seiten{ display:contents; }
.konfig-sim-links{ grid-area:l; }
.konfig-sim-rechts{ grid-area:r; }
.konfig-sim-mitte{ grid-area:m; }
.konfig-sim-leiste{ grid-area:b; }

.konfig-sim-spalte{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(239,208,163,.3) transparent;
}

.konfig-sim-karte{
  flex:none;
  box-sizing:border-box;
  padding:10px 12px 11px;
  border:1px solid rgba(239,208,163,.18);
  border-radius:12px;
  background:rgba(7,11,17,.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.konfig-sim-titel{
  margin:0 0 8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#efd0a3;
}

.konfig-sim-zeile{
  display:grid;
  grid-template-columns:minmax(52px,auto) minmax(0,1fr) 54px;
  align-items:center;
  gap:8px;
  margin-top:5px;
  font-size:11.5px;
}

.konfig-sim-zeile.ist-leer{
  opacity:.35;
}

.konfig-sim-zeile-name{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-sim-zeile-wert{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.konfig-sim-spur{
  display:block;
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.konfig-sim-spur i{
  display:block;
  width:0;
  height:100%;
  border-radius:3px;
  transition:width .12s linear;
}

.konfig-sim-gross{
  display:block;
  font-size:22px;
  font-weight:500;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}

.konfig-sim-fuss{
  margin:7px 0 0;
  font-size:10.5px;
  line-height:1.4;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-sim-polar{
  display:block;
  width:100%;
  max-width:180px;
  margin:0 auto;
  overflow:visible;
}

.konfig-sim-ring{
  fill:none;
  stroke:rgba(255,255,255,.14);
  stroke-width:1;
}

.konfig-sim-himmel{
  font-size:10px;
  fill:var(--ifc-muted,#8fa3ad);
  text-anchor:middle;
}

.konfig-sim-bogen{
  fill:none;
  stroke:#efd0a3;
  stroke-width:1.6;
  stroke-dasharray:4 3;
}

.konfig-sim-punkt{
  fill:#ffd27a;
  stroke:#fff4d6;
  stroke-width:1.5;
  filter:drop-shadow(0 0 6px rgba(255,200,100,.9));
}

.konfig-sim-werte{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
}

.konfig-sim-spurbild{
  display:block;
  width:100%;
  height:44px;
  margin-top:8px;
}

.konfig-sim-spurlinie{
  fill:none;
  stroke:#efd0a3;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}

.konfig-sim-co2,
.konfig-sim-strom{
  display:block;
  width:100%;
  margin-top:6px;
  overflow:visible;
}

.konfig-sim-strom{
  height:64px;
}

.konfig-sim-co2-flaeche{ fill:rgba(224,96,60,.22); }
.konfig-sim-co2-grau{ fill:rgba(154,138,120,.6); }
.konfig-sim-co2-linie{ fill:none; stroke:#e0603c; stroke-width:1.6; }

.konfig-sim-zeiger{
  stroke:#efd0a3;
  stroke-width:1;
  stroke-dasharray:3 3;
}

.konfig-sim-achse{
  font-size:8px;
  fill:var(--ifc-muted,#8fa3ad);
  text-anchor:middle;
}

.konfig-sim-strombalken{
  fill:rgba(60,155,224,.22);
}

.konfig-sim-strombalken.ist-vorbei{
  fill:#3c9be0;
}

.konfig-sim-legende{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  margin-top:6px;
  font-size:10.5px;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-sim-legende span::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:5px;
  border-radius:2px;
  vertical-align:-1px;
}

.konfig-sim-legende .ist-grau::before{ background:rgba(154,138,120,.85); }
.konfig-sim-legende .ist-betrieb::before{ background:#e0603c; }

.konfig-sim-mitte{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(239,208,163,.16);
  border-radius:14px;
  background:radial-gradient(ellipse at 50% 20%,#24384a,#0b121b 70%);
}

.konfig-sim-buehne{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
}

.konfig-sim-buehne:active{
  cursor:grabbing;
}

.konfig-sim-zeit{
  flex:none;
  display:grid;
  justify-items:start;
  gap:2px;
  min-width:150px;
  text-align:left;
}

.konfig-sim-zeit strong{
  font-size:28px;
  font-weight:300;
  letter-spacing:.04em;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:#fff;
}

.konfig-sim-zeit span{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#efd0a3;
}

.konfig-sim-leiste{
  box-sizing:border-box;
  display:grid;
  gap:8px;
  width:100%;
  padding:10px 14px;
  border:1px solid rgba(239,208,163,.26);
  border-radius:16px;
  background:rgba(7,11,17,.88);
  pointer-events:auto;
}

.konfig-sim-leiste-kopf{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.konfig-sim-arten{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.konfig-sim-arten[hidden]{
  display:none;
}

.konfig-sim-chip{
  margin:0;
  padding:5px 11px;
  border:1px solid rgba(239,208,163,.3);
  border-radius:999px;
  background:transparent;
  color:var(--ifc-ink,#e8f4f6);
  font:inherit;
  font-size:11px;
  line-height:1.2;
  cursor:pointer;
}

.konfig-sim-chip[aria-pressed="true"]{
  border-color:#efd0a3;
  background:rgba(239,208,163,.18);
  color:#efd0a3;
}

.konfig-sim-chip:focus-visible,
.konfig-sim-play:focus-visible,
.konfig-sim-regler:focus-visible{
  outline:2px solid #efd0a3;
  outline-offset:2px;
}

.konfig-sim-tempo{
  min-width:44px;
  font-variant-numeric:tabular-nums;
}

.konfig-sim-leiste-fuss{
  display:flex;
  align-items:center;
  gap:14px;
}

.konfig-sim-play{
  flex:none;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f6e2bf,#efd0a3 45%,#c98a3a);
  color:#22120c;
  box-shadow:0 0 0 4px rgba(239,208,163,.14),0 8px 24px rgba(0,0,0,.5);
  cursor:pointer;
}

.konfig-sim-play svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

.konfig-sim-play .ist-pause,
.konfig-sim-play.ist-an .ist-play{
  display:none;
}

.konfig-sim-play.ist-an .ist-pause{
  display:inline;
}

.konfig-sim-regler{
  flex:1 1 auto;
  min-width:0;
  height:28px;
  margin:0;
  accent-color:#efd0a3;
  cursor:pointer;
}

.konfig-sim-hinweis{
  margin:0;
  font-size:10px;
  line-height:1.35;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-sim-hinweis:empty{
  display:none;
}

@media (max-width:860px){
  body.pcm-konfigurator .konfig-analyse-karte[data-analyse="simulation"] .konfig-analyse-inhalt{
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  body.pcm-konfigurator .konfig-analyse-inhalt > .konfig-sim{
    flex:none;
  }

  .konfig-sim{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:auto;
  }

  .konfig-sim-mitte{
    flex:none;
    height:min(46vh,380px);
  }

  /* Unter der Buehne zuerst die Zeitleiste, dann die Karten. */
  .konfig-sim-leiste{ order:1; }
  .konfig-sim-seiten{ order:2; }

  .konfig-sim-zeit{
    min-width:0;
  }

  .konfig-sim-zeit strong{
    font-size:20px;
  }

  .konfig-sim-zeit span{
    font-size:9px;
    letter-spacing:.08em;
  }

  .konfig-sim-leiste{
    flex:none;
    width:100%;
    padding:8px 10px;
  }

  .konfig-sim-play{
    width:46px;
    height:46px;
  }

  .konfig-sim-seiten{
    flex:none;
    display:flex;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .konfig-sim-spalte{
    display:contents;
  }

  .konfig-sim-karte{
    flex:0 0 min(76vw,300px);
    max-height:min(26vh,190px);
    overflow-y:auto;
    scroll-snap-align:start;
  }

  .konfig-sim-polar{
    max-width:118px;
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-sim-spur i{
    transition:none;
  }
}

/* ------------------------------------------------------------------
   09.10.2026: Kleinbild oben rechts in jedem Overlay

   Das ganze Modell klein im Kopf des Overlays, gezeichnet vom Betrachter
   selbst. Was im Overlay ueberfahren wird, leuchtet darin golden auf; die
   Unterschrift sagt, was es ist und wie viele Teile im Modell stehen.
   ------------------------------------------------------------------ */
.konfig-kleinbild{
  position:relative;
  flex:0 0 auto;
  width:168px;
  height:92px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(239,208,163,.2);
  border-radius:10px;
  background:radial-gradient(ellipse at 50% 35%,rgba(49,220,232,.08),rgba(4,7,11,.95) 75%);
  transition:border-color .2s ease,box-shadow .2s ease;
}

.konfig-kleinbild.ist-hervor{
  border-color:rgba(239,208,163,.7);
  box-shadow:0 0 0 3px rgba(239,208,163,.12);
}

.konfig-kleinbild-leinwand{
  display:block;
  width:100%;
  height:100%;
}

.konfig-kleinbild-text{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  padding:12px 8px 5px;
  background:linear-gradient(transparent,rgba(4,7,11,.88) 60%);
  font-size:10px;
  line-height:1.2;
  pointer-events:none;
}

.konfig-kleinbild-name{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-kleinbild.ist-hervor .konfig-kleinbild-name{
  color:#efd0a3;
}

.konfig-kleinbild-zahl{
  flex:none;
  font-variant-numeric:tabular-nums;
  color:#efd0a3;
}

@media (max-width:860px){
  .konfig-kleinbild{
    width:112px;
    height:66px;
    border-radius:8px;
  }

  .konfig-kleinbild-text{
    padding:8px 6px 3px;
    font-size:9px;
  }

  .konfig-kleinbild-zahl{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .konfig-kleinbild{
    transition:none;
  }
}

/* ------------------------------------------------------------------
   Anlagen-Konfigurator unter SYSTEM (09.10.2026)

   Reiter nach Schemaart, im Prinzipschema die Erzeugung oben und die
   Kette der Gruppen darunter. Die gewaehlte Gruppe traegt Gold, der
   einzige Akzent; eine Gruppe mit Warnung einen warmen Rand.
   ------------------------------------------------------------------ */
.konfig-anlkonf-reiter{
  display:flex;
  gap:4px;
  padding:3px;
  background:rgba(247,248,251,.05);
  border-radius:10px;
  overflow-x:auto;
}

.konfig-anlkonf-reiterknopf{
  flex:1 0 auto;
  min-height:34px;
  padding:6px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(247,248,251,.72);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.konfig-anlkonf-reiterknopf[aria-selected="true"]{
  background:rgba(239,208,163,.16);
  color:#efd0a3;
  font-weight:600;
}

.konfig-anlkonf-flaeche{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.konfig-anlkonf-flaeche > *{ margin:0; }

/* Schemablatt (10.10.2026): der Plan bleibt weiss wie Papier, damit er so
   aussieht, wie er gedruckt und als IFC weitergegeben wird. */
.konfig-schemablatt-blaetter,
.konfig-schemablatt-werkzeug{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.konfig-schemablatt-blattknopf,
.konfig-schemablatt-knopf{
  min-height:32px;
  padding:5px 11px;
  border:1px solid rgba(247,248,251,.16);
  border-radius:8px;
  background:rgba(247,248,251,.04);
  color:rgba(247,248,251,.82);
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
}

.konfig-schemablatt-blattknopf[aria-selected="true"]{
  border-color:rgba(239,208,163,.55);
  background:rgba(239,208,163,.16);
  color:#efd0a3;
  font-weight:600;
}

.konfig-schemablatt-blattknopf:disabled,
.konfig-schemablatt-knopf:disabled{ opacity:.4; cursor:default; }

.konfig-schemablatt-zahl{
  margin-right:auto;
  color:rgba(247,248,251,.62);
  font-size:12px;
}

.konfig-schemablatt-buehne{
  max-height:68vh;
  overflow:auto;
  border-radius:8px;
  background:#ffffff;
  box-shadow:0 0 0 1px rgba(247,248,251,.14);
}

.konfig-schemablatt-svg{ display:block; height:auto; }
.konfig-schemablatt-element{ cursor:pointer; }
.konfig-schemablatt-element:hover polyline,
.konfig-schemablatt-element:hover polygon,
.konfig-schemablatt-element:hover circle{ stroke:#9a6b2f; }
.konfig-schemablatt-element.ist-gewaehlt polyline,
.konfig-schemablatt-element.ist-gewaehlt polygon,
.konfig-schemablatt-element.ist-gewaehlt circle{ stroke:#c08a3e; stroke-width:.6; }
.konfig-schemablatt-element.ist-gewaehlt .konfig-schemablatt-treffer{ fill:rgba(239,208,163,.28); }

.konfig-schemablatt-karte{
  padding:10px 12px;
  border:1px solid rgba(247,248,251,.12);
  border-radius:10px;
  background:rgba(247,248,251,.04);
}

.konfig-schemablatt-angaben{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:3px 12px;
  margin:8px 0 0;
  font-size:12.5px;
}

.konfig-schemablatt-angaben dt{ color:rgba(247,248,251,.58); }
.konfig-schemablatt-angaben dd{ margin:0; overflow-wrap:anywhere; }

.konfig-anlkonf-erzeuger{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  padding:10px 12px;
  border:1px solid rgba(247,248,251,.12);
  border-radius:10px;
  background:rgba(247,248,251,.04);
}

.konfig-anlkonf-kette{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:4px 2px 8px;
  scroll-snap-type:x proximity;
}

.konfig-anlkonf-glied{
  position:relative;
  flex:0 0 150px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:10px 10px 12px;
  border:1px solid rgba(247,248,251,.12);
  border-top:3px solid #e0483c;
  border-radius:10px;
  background:rgba(247,248,251,.035);
  color:#f7f8fb;
  font:inherit;
  text-align:left;
  cursor:pointer;
  scroll-snap-align:start;
}

.konfig-anlkonf-glied[data-art="SPEICHER"],
.konfig-anlkonf-glied[data-art="SOLAR"]{ border-top-color:#9a8a78; }

.konfig-anlkonf-glied[aria-selected="true"]{
  border-color:#efd0a3;
  box-shadow:0 0 0 1px #efd0a3 inset;
}

.konfig-anlkonf-glied.ist-warnung{ border-color:#e39a3b; }

.konfig-anlkonf-glied strong{
  font-size:14px;
  overflow-wrap:anywhere;
}

.konfig-anlkonf-art{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(247,248,251,.6);
}

.konfig-anlkonf-werte{
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:rgba(247,248,251,.82);
}

.konfig-anlkonf-modell{
  margin-top:2px;
  padding:1px 6px;
  border-radius:6px;
  background:rgba(49,220,232,.12);
  color:var(--ifc-cyan,#31dce8);
  font-size:10px;
}

.konfig-anlkonf-detail{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border:1px solid rgba(239,208,163,.35);
  border-radius:10px;
  background:rgba(239,208,163,.05);
}

.konfig-anlkonf-detail > *{ margin:0; }

.konfig-anlkonf-detailname{ font-size:15px; color:#efd0a3; }

.konfig-anlkonf-einstellen,
.konfig-anlkonf-temp,
.konfig-anlkonf-einsetzen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
}

.konfig-anlkonf-feld{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:rgba(247,248,251,.75);
}

.konfig-anlkonf-feld input,
.konfig-anlkonf-wahl{
  min-height:34px;
  padding:4px 8px;
  border:1px solid rgba(247,248,251,.2);
  border-radius:8px;
  background:rgba(5,5,5,.55);
  color:#f7f8fb;
  font:inherit;
  font-size:13px;
}

.konfig-anlkonf-feld input{ width:72px; font-variant-numeric:tabular-nums; }

body.pcm-konfigurator .konfig-anlkonf select.konfig-anlkonf-wahl{
  flex:1 1 180px;
  min-width:0;
  -webkit-appearance:none;
  appearance:none;
  padding-right:28px;
  background:rgba(5,5,5,.55) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23efd0a3%27 stroke-width=%271.5%27/%3E%3C/svg%3E") no-repeat right 10px center;
  color:#f7f8fb;
}

body.pcm-konfigurator .konfig-anlkonf select.konfig-anlkonf-wahl option{
  background:#0b0d12;
  color:#f7f8fb;
}

.konfig-anlkonf-knopf{
  min-height:34px;
  padding:6px 12px;
  border:1px solid rgba(239,208,163,.5);
  border-radius:8px;
  background:rgba(239,208,163,.12);
  color:#efd0a3;
  font:inherit;
  font-size:13px;
  cursor:pointer;
}

.konfig-anlkonf-knopf.ist-leise{
  align-self:flex-start;
  border-color:rgba(247,248,251,.2);
  background:transparent;
  color:rgba(247,248,251,.7);
}

.konfig-anlkonf-teile{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.konfig-anlkonf-teile th,
.konfig-anlkonf-teile td{
  padding:5px 6px;
  border-bottom:1px solid rgba(247,248,251,.08);
  text-align:left;
}

.konfig-anlkonf-teile th{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(247,248,251,.6);
}

.konfig-anlkonf-teile td:nth-child(2),
.konfig-anlkonf-teile td:nth-child(4){ text-align:right; font-variant-numeric:tabular-nums; }

.konfig-anlkonf-teile tr:hover td{ background:rgba(239,208,163,.06); }

.konfig-feld-satz.ist-warnung{ color:#e39a3b; }

.konfig-anlkonf-strang{
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  margin:0 auto;
}

.konfig-anlkonf-linie{ fill:none; stroke-width:3; stroke-linecap:round; }
.konfig-anlkonf-steig{ fill:none; stroke-width:5; stroke-linecap:round; }
.konfig-anlkonf-svgname{ fill:#f7f8fb; font-size:13px; font-weight:600; }
.konfig-anlkonf-svgtext{ fill:rgba(247,248,251,.85); font-size:12px; }
.konfig-anlkonf-svgklein{ fill:rgba(247,248,251,.6); font-size:11px; }

@media (max-width:860px){
  .konfig-anlkonf-reiterknopf{ flex:1 1 0; min-width:0; padding:6px 4px; font-size:12px; white-space:normal; line-height:1.2; }
  .konfig-anlkonf-glied{ flex-basis:132px; }
  .konfig-anlkonf-svgname{ font-size:22px; }
  .konfig-anlkonf-svgtext{ font-size:21px; }
  .konfig-anlkonf-svgklein{ font-size:18px; }
  .konfig-anlkonf-einsetzen .konfig-anlkonf-knopf{ flex:1 1 40%; }
}

/* ------------------------------------------------------------------
   Zusaetze der Anlagentechnik (09.10.2026)

   Eine Zeile je Zusatz: Name und ein Satz links, der Schalter rechts. Die
   Label-Regel des Formulars setzt ein Raster und die Feldregel eine Hoehe
   von 48 px; beides gilt hier nicht, darum die engere Auswahl ueber die
   Klasse. Das Kaestchen bleibt im Baum (Tastatur, Vorleser) und ist nur
   unsichtbar; gezeichnet wird der Schalter daneben.
   ------------------------------------------------------------------ */
.ifc-zusaetze{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}

.ifc-zusaetze-legende{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.ifc-deep-context label.ifc-zusatz{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

.ifc-deep-context label.ifc-zusatz:has(input:checked){
  border-color:rgba(49,220,232,.55);
  background:rgba(49,220,232,.07);
}

.ifc-deep-context label.ifc-zusatz input{
  position:absolute;
  inset:0;
  width:100%;
  min-height:0;
  height:100%;
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
}

.ifc-zusatz-text{
  display:grid;
  flex:1 1 auto;
  gap:2px;
  min-width:0;
}

.ifc-zusatz-text strong{
  color:var(--ifc-ink,#f7f8fb);
  font-size:14px;
  font-weight:600;
}

.ifc-zusatz-text small{
  color:var(--ifc-muted,#9aa6b5);
  font-size:11px;
  line-height:1.4;
}

.ifc-zusatz-schalter{
  position:relative;
  flex:0 0 auto;
  width:40px;
  height:22px;
  border-radius:11px;
  background:rgba(255,255,255,.18);
  transition:background .18s ease;
}

.ifc-zusatz-schalter::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f7f8fb;
  transition:transform .18s ease;
}

.ifc-zusatz input:checked ~ .ifc-zusatz-schalter{ background:var(--ifc-cyan,#31dce8); }
.ifc-zusatz input:checked ~ .ifc-zusatz-schalter::after{ transform:translateX(18px); }
.ifc-zusatz input:focus-visible ~ .ifc-zusatz-schalter{ outline:2px solid var(--ifc-cyan,#31dce8); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .ifc-zusatz-schalter,
  .ifc-zusatz-schalter::after{ transition:none; }
}

/* Simulationsmodule (10.10.2026): Leiste der Module ueber der Buehne,
   Legende unten links, Namensnennung der Kartendaten unten rechts. In
   einem Modul treten Zeitleiste und Karten von Sonne und 25 Jahren
   zurueck, die Karten des Moduls treten ein. */
.konfig-sim-module{
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid rgba(239,208,163,.2);
  border-radius:18px;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(6px);
}

.konfig-sim-module::-webkit-scrollbar{ display:none; }

.konfig-sim-module .konfig-sim-chip{
  flex:none;
  white-space:nowrap;
}

.konfig-sim-werkzeuge{
  display:flex;
  gap:6px;
  margin-left:auto;
  padding-left:8px;
  border-left:1px solid rgba(239,208,163,.2);
}

.konfig-sim-werkzeug{
  border-style:dashed;
}

.konfig-sim-buehne.ist-abfrage{
  cursor:crosshair;
}

.konfig-sim-skala{
  position:absolute;
  z-index:2;
  left:12px;
  bottom:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  max-width:min(420px,calc(100% - 24px));
  padding:8px 12px;
  border:1px solid rgba(239,208,163,.2);
  border-radius:12px;
  background:rgba(5,5,5,.78);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.konfig-sim-skala[hidden],
.konfig-sim-namensnennung[hidden]{
  display:none;
}

.konfig-sim-skala-band{
  display:block;
  width:150px;
  height:10px;
  border-radius:5px;
}

.konfig-sim-skala-einheit{
  flex-basis:100%;
  color:#9a8a78;
  font-size:10px;
}

.konfig-sim-skala-klasse::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;
  border-radius:2px;
  vertical-align:-1px;
  background:var(--farbe);
}

.konfig-sim-namensnennung{
  position:absolute;
  z-index:2;
  right:10px;
  bottom:6px;
  margin:0;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(5,5,5,.6);
  color:#9a8a78;
  font-size:9px;
}

.konfig-sim.ist-modul .ist-grund,
.konfig-sim.ist-modul .konfig-sim-leiste,
.konfig-sim:not(.ist-modul) .ist-modul-karte{
  display:none;
}

.konfig-sim.ist-modul{
  grid-template-rows:minmax(0,1fr);
  grid-template-areas:"l m r";
}

.konfig-sim-wahl{
  margin-bottom:8px;
}

.konfig-sim-status{
  margin:0 0 6px;
  font-size:11px;
  color:#efd0a3;
}

.konfig-sim-status:empty{
  display:none;
}

.konfig-sim-fortschritt{
  display:block;
  margin-bottom:8px;
}

.konfig-sim-fortschritt[hidden]{
  display:none;
}

.konfig-sim-fortschritt i{
  transition:width .2s linear;
  background:linear-gradient(90deg,#c98a3a,#efd0a3);
}

.konfig-sim-kennzahlen{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 10px;
  margin:0;
  font-size:12px;
}

.konfig-sim-kennzahlen dt{
  color:var(--ifc-muted,#8fa3ad);
}

.konfig-sim-kennzahlen dd{
  margin:0;
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:#fff;
}

@media (max-width:860px){
  .konfig-sim-module{
    top:6px;
    left:6px;
    right:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    border-radius:999px;
  }

  .konfig-sim-skala{
    left:6px;
    bottom:18px;
  }

  .konfig-sim-skala-band{
    width:110px;
  }
}