/* =========================================================
   SHELL – Background + Header + iFrame + Footer
   Nutzung: index.html + depot.html (body.shell-body)
   ========================================================= */

.shell-body{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--navText);

  background:
    radial-gradient(900px 520px at 72% 18%, rgba(47,124,246,.18), transparent 55%),
    radial-gradient(900px 520px at 25% 22%, rgba(255,45,125,.10), transparent 60%),
    linear-gradient(180deg, #04162a, #061f33 55%, #04162a);
}

.shell-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,0) 7px
    );
  opacity:.22;
  mix-blend-mode: overlay;
}

.shell-body::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 65% 40%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(closest-side at 50% 55%, rgba(255,255,255,.035), transparent 66%);
  opacity:.55;
}

/* Header */
.shell-header{
  position:relative;
  z-index:2;
  background:linear-gradient(0deg,var(--nav2),var(--nav));
  border-bottom:1px solid rgba(255,255,255,.08);
}

.shell-header-inner{
  height:64px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.shell-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.shell-logo{
  width:34px;height:34px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.logo-svg{display:block; width:34px; height:34px;}

.shell-brand-text{ line-height:1.05; }
.shell-brand-top{ font-size:14px; color:var(--navText); }
.shell-brand-sub{ font-size:12px; color:var(--navMut); }

.shell-header-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.shell-status-pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--navText);
  font-size:12px;
}

/* Optional Shell Button (z.B. Abmelden im Depot-Header) */
.shell-btn{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--navText);
  cursor:pointer;
}
.shell-btn:hover{ filter:brightness(.98); }

/* Main + iFrame (index.html) */
.shell-main{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  min-height:0;
}

.shell-frame{
  width:100%;
  border:0;
  flex:1;
  background:transparent; /* wichtig: parent background sichtbar */
}

/* Footer */
.shell-footer{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(0deg,var(--nav2),var(--nav));
}

.shell-footer-inner{
  height:46px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navText);
  opacity:.9;
  font-size:12px;
}

/* Responsive (Shell) */
@media (max-width:480px){
  .shell-header-inner{ height:auto; padding:12px 14px; }
  .shell-header-right{ flex-wrap:wrap; justify-content:flex-end; }
}