/* ==================================================================
   Startseite: Bedienoberflaeche ueber der Fertigungszelle.
   Die 3D-Szene selbst braucht kein CSS; hier steht nur, was als
   HTML darueber liegt: Kopfbereich, Statuszeile, Fusszeile, Dialog.
   ================================================================== */

  :root{
    --bg:#0f1216;
    --surface:#171c21;
    --surface-2:#1e242a;
    --line:#2c343b;
    --text:#e8ebed;
    --muted:#8d979f;
    --signal:#ff6a13;      
  }
  
  *{ box-sizing:border-box; }
  html,body{
    margin:0; height:100%; background:var(--bg); color:var(--text);
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;
    overflow:hidden;
  }
  #scene{ position:fixed; inset:0; }
  canvas{ display:block; }

  /* ---------- Kopfbereich ---------- */
  #masthead{
    position:fixed; top:0; left:0; padding:24px 28px; max-width:420px;
    pointer-events:none; z-index:5;
  }
  #masthead .plate{
    display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  }
  #masthead .cell{
    font-size:11px; font-weight:600; letter-spacing:.14em;
    color:#0f1216; background:var(--signal); padding:3px 7px; border-radius:2px;
  }
  #masthead .unit{
    font-size:11px; letter-spacing:.14em; color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  #masthead h1{
    margin:0 0 8px; font-size:26px; line-height:1.15; font-weight:650; letter-spacing:-.015em;
  }
  #masthead p{
    margin:0; font-size:13px; line-height:1.6; color:var(--muted); max-width:34ch;
  }

  /* ---------- Statuszeile unten ---------- */
  #status{
    position:fixed; left:28px; bottom:24px; z-index:5; pointer-events:none;
    display:flex; align-items:center; gap:10px;
    font-size:12px; color:var(--muted); letter-spacing:.02em;
  }
  #status .led{
    width:7px; height:7px; border-radius:50%; background:var(--muted);
    transition:background .2s ease;
  }
  #status.busy .led{ background:var(--signal); animation:pulse 1s ease-in-out infinite; }
  @keyframes pulse{ 50%{ opacity:.35; } }

  /* ---------- Fußzeile ---------- */
  #legal{
    position:fixed; right:28px; bottom:24px; z-index:6;
    display:flex; gap:18px; align-items:center;
    font-size:11.5px; letter-spacing:.04em;
  }
  #legal button{
    background:none; border:0; padding:0; margin:0; cursor:pointer;
    font:inherit; color:var(--muted);
    border-bottom:1px solid transparent;
    transition:color .18s ease, border-color .18s ease;
  }
  #legal button:hover{ color:var(--text); border-bottom-color:var(--signal); }
  #legal button:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
  #legal .sep{ color:#4a545c; }

  @media (max-width:560px){
    #legal{ right:18px; bottom:18px; gap:14px; font-size:11px; }
  }

  /* ---------- Modal-Dialog ---------- */
  #overlay{
    position:fixed; inset:0; z-index:20;
    display:flex; align-items:center; justify-content:center; padding:24px;
    background:rgba(8,10,13,.72); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .26s ease;
  }
  #overlay[hidden]{ display:none; }
  #overlay.open{ opacity:1; }

  #modal{
    position:relative;
    width:min(920px, 100%); height:min(700px, 88vh);
    display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--line); border-radius:6px;
    box-shadow:0 32px 90px rgba(0,0,0,.6);
    transform:translateY(14px) scale(.985);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  #overlay.open #modal{ transform:none; }

  /* Angeheftetes Bauteil: sitzt über der oberen linken Ecke und zeigt an,
     in welchem Asset man sich gerade befindet. */
  #m-badge{
    position:absolute; top:-30px; left:-30px; width:92px; height:92px;
    border-radius:50%; background:var(--surface-2);
    border:1px solid var(--line); box-shadow:0 10px 26px rgba(0,0,0,.55);
    display:grid; place-items:center; overflow:hidden;
  }
  #m-badge::after{                       /* farbiger Ring je Bauteil */
    content:""; position:absolute; inset:-1px; border-radius:50%;
    border:2px solid var(--badge, var(--signal)); opacity:.9; pointer-events:none;
  }
  #m-canvas{ width:74px; height:74px; display:block; }

  /* Rechtstexte gehören zu keinem Bauteil — dann entfällt die Vorschau */
  #modal.plain #m-badge{ display:none; }
  #modal.plain #m-head{ padding-left:22px; }

  #m-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:22px 22px 18px 78px; border-bottom:1px solid var(--line); flex:0 0 auto;
  }
  #m-head .kicker{
    font-size:11px; letter-spacing:.16em; color:var(--muted);
    font-variant-numeric:tabular-nums; margin-bottom:6px;
  }
  #m-head h2{ margin:0; font-size:23px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }

  /* Aktionen rechts in der Kopfzeile: Download und Schließen.
     Der Download-Knopf steht links davon und teilt Höhe und Rahmen,
     damit beide als ein Paar gelesen werden. */
  #m-actions{
    flex:0 0 auto; display:flex; align-items:center; gap:10px;
  }

  #m-download{
    display:inline-flex; align-items:center; gap:7px;
    height:36px; padding:0 12px; border-radius:3px;
    background:transparent; border:1px solid var(--line); color:var(--muted);
    font:inherit; font-size:12px; font-weight:550; letter-spacing:.06em;
    text-decoration:none; white-space:nowrap;
    transition:border-color .18s ease, color .18s ease, background .18s ease;
  }
  #m-download svg{ width:15px; height:15px; flex:0 0 auto; }
  #m-download:hover{ border-color:var(--signal); color:var(--text); background:var(--surface-2); }
  #m-download:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
  #m-download[hidden]{ display:none; }

  #m-close{
    flex:0 0 auto; width:36px; height:36px; border-radius:3px;
    background:transparent; border:1px solid var(--line); color:var(--muted);
    font:inherit; font-size:20px; line-height:1; cursor:pointer;
    transition:border-color .18s ease, color .18s ease, background .18s ease;
  }
  #m-close:hover{ border-color:var(--signal); color:var(--text); background:var(--surface-2); }
  #m-close:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

  #m-frame{
    flex:1 1 auto; width:100%; border:0; display:block;
    background:var(--surface); border-radius:0 0 5px 5px;
  }

  @media (max-width:560px){
    #overlay{ padding:16px; }
    #modal{ height:90vh; }
    #m-badge{ top:-22px; left:-16px; width:70px; height:70px; }
    #m-canvas{ width:56px; height:56px; }
    #m-head{ padding:18px 16px 14px 62px; }
    #m-head h2{ font-size:19px; }
    /* Auf schmalen Geräten bleibt nur das Sinnbild */
    #m-actions{ gap:8px; }
    #m-download{ padding:0 10px; }
    #m-download span{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    #overlay, #modal{ transition:none; }
    #status.busy .led{ animation:none; }
  }