/* Musteretage in 3D. Gestaltung wie Richtung B: dunkle Buehne, rote Akzente,
   eckige Kanten. Die Bedienung liegt als HTML ueber der Leinwand, nicht in der
   Szene - so bleibt sie lesbar, bedienbar und mit der Tastatur erreichbar. */
#dc3d-etage{position:relative;background:#0e1114;border:1px solid #2a333b;}
#dc3d-etage .dc3d-leinwand{position:relative;width:100%;aspect-ratio:16/9;min-height:360px;
  max-height:76vh;overflow:hidden;cursor:grab;}
#dc3d-etage .dc3d-leinwand:active{cursor:grabbing;}
#dc3d-etage canvas{display:block;width:100%;height:100%;}
#dc3d-etage .dc3d-laedt{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#7f8b94;font-family:"Barlow Semi Condensed",sans-serif;
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;}
#dc3d-etage .dc3d-kein{display:none;padding:28px;color:#a4afb6;}

/* Bedienleiste */
#dc3d-etage .dc3d-leiste{display:flex;flex-wrap:wrap;gap:1px;background:#2a333b;
  border-top:1px solid #2a333b;}
#dc3d-etage .dc3d-leiste > *{background:#0e1114;}
#dc3d-etage button{font-family:"Archivo",sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#a4afb6;background:#0e1114;
  border:0;padding:13px 16px;cursor:pointer;transition:color .2s,background .2s;}
#dc3d-etage button:hover{color:#fff;background:#171c21;}
#dc3d-etage button[aria-pressed="true"]{color:#fff;background:#171c21;
  box-shadow:inset 0 -2px 0 #cc0000;}
#dc3d-etage button:focus-visible{outline:2px solid #cc0000;outline-offset:-2px;}
#dc3d-etage .dc3d-gruppe{display:flex;gap:1px;background:#2a333b;}
#dc3d-etage .dc3d-marke{align-self:center;padding:0 16px;color:#626e77;
  font-family:"Barlow Semi Condensed",sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;}

/* Legende und Infotafel */
#dc3d-etage .dc3d-legende{display:flex;flex-wrap:wrap;gap:14px 22px;padding:16px;
  border-top:1px solid #2a333b;}
#dc3d-etage .dc3d-legende span{display:flex;align-items:center;gap:8px;color:#a4afb6;
  font-size:14px;}
#dc3d-etage .dc3d-legende i{width:11px;height:11px;display:block;flex:none;}
#dc3d-etage .dc3d-tafel{position:absolute;left:16px;bottom:16px;max-width:min(360px,72%);
  background:rgba(14,17,20,.94);border:1px solid #2a333b;border-left:3px solid #cc0000;
  padding:16px 18px;display:none;}
#dc3d-etage .dc3d-tafel.dc3d-an{display:block;}
#dc3d-etage .dc3d-tafel b{display:block;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:17px;color:#fff;letter-spacing:-.01em;}
#dc3d-etage .dc3d-tafel .dc3d-kap{display:block;font-family:"Barlow Semi Condensed",sans-serif;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#cc0000;margin-bottom:5px;}
#dc3d-etage .dc3d-tafel p{margin:8px 0 0;color:#a4afb6;font-size:14.5px;line-height:1.45;}
#dc3d-etage .dc3d-tafel a{color:#fff;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;}
#dc3d-etage .dc3d-tafel .dc3d-zu{position:absolute;top:8px;right:10px;padding:4px 8px;
  font-size:16px;line-height:1;letter-spacing:0;}
@media (max-width:48rem){
  #dc3d-etage .dc3d-leinwand{aspect-ratio:4/3;min-height:300px;}
  #dc3d-etage .dc3d-tafel{left:8px;right:8px;bottom:8px;max-width:none;}
  #dc3d-etage button{padding:11px 12px;font-size:12px;}
}