/* =========================================================
   ZEUS V172 · STARTSEITE PRO
   ========================================================= */

.start-pro{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 60px;
  display:grid;
  gap:12px;
}


/* HERO
   ========================================================= */

.start-pro-hero{
  position:relative;
  min-height:400px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,.065);
  border-radius:18px;

  background:#0c1117;
}

.start-pro-visual{
  position:absolute;
  inset:0;
}

.start-pro-visual picture,
.start-pro-visual img{
  width:100%;
  height:100%;
  display:block;
}

.start-pro-visual img{
  object-fit:cover;
  object-position:center;
}

.start-pro-visual-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(8,12,17,.97) 0%,
      rgba(8,12,17,.90) 34%,
      rgba(8,12,17,.54) 62%,
      rgba(8,12,17,.24) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8,12,17,.65),
      transparent 55%
    );
}

.start-pro-hero-content{
  position:relative;
  z-index:2;

  width:min(650px,72%);
  min-height:400px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:36px 42px;
}

.start-pro-brand{
  display:flex;
  align-items:center;
  gap:11px;

  margin-bottom:28px;
}

.start-pro-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
}

.start-pro-brand>div{
  display:grid;
  gap:2px;
}

.start-pro-brand span{
  color:#bda15e;
  font-size:10px;
  font-weight:750;
  letter-spacing:.16em;
}

.start-pro-brand small{
  color:#66717d;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.start-pro-eyebrow{
  display:block;

  margin-bottom:9px;

  color:#89784e;

  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
}

.start-pro-copy h1{
  max-width:620px;

  margin:0;

  color:#edf1f4;

  font-size:42px;
  line-height:1.04;
  font-weight:650;
  letter-spacing:-.025em;
}

.start-pro-copy p{
  max-width:570px;

  margin:15px 0 0;

  color:#8b96a1;

  font-size:11px;
  line-height:1.65;
}

.start-pro-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:24px;
}

.start-pro-btn{
  min-height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 14px;

  border:1px solid rgba(255,255,255,.075);
  border-radius:8px;

  background:rgba(255,255,255,.025);

  color:#aab3bc;

  font-size:9px;
  font-weight:650;
  text-decoration:none;

  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease;
}

.start-pro-btn:hover{
  border-color:rgba(193,157,73,.24);
  background:rgba(193,157,73,.045);
  color:#d1ba7c;
}

.start-pro-btn-primary{
  border-color:rgba(193,157,73,.32);
  background:rgba(193,157,73,.11);
  color:#d1b671;
}


/* STATS
   ========================================================= */

.start-pro-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.start-pro-stats>a{
  min-width:0;
  min-height:67px;

  display:flex;
  align-items:center;
  gap:11px;

  padding:11px 14px;

  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;

  background:rgba(255,255,255,.012);

  text-decoration:none;
  color:inherit;
}

.start-pro-stats>a>span{
  width:32px;
  height:32px;
  flex:0 0 32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(192,157,73,.14);
  border-radius:8px;

  background:rgba(192,157,73,.035);

  color:#a88f52;
  font-size:11px;
}

.start-pro-stats>a>div{
  min-width:0;
  display:grid;
}

.start-pro-stats strong{
  color:#d8dfe5;
  font-size:16px;
  line-height:1.15;
}

.start-pro-stats small{
  margin-top:2px;

  color:#697581;
  font-size:8px;
}


/* STATUS
   ========================================================= */

.start-pro-system{
  padding:12px;

  border:1px solid rgba(255,255,255,.05);
  border-radius:11px;

  background:rgba(255,255,255,.01);
}

.start-pro-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:8px;
  padding:0 3px;
}

.start-pro-section-head>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.start-pro-section-head span{
  color:#688275;
  font-size:7px;
  font-weight:750;
  letter-spacing:.12em;
}

.start-pro-section-head strong{
  color:#aeb7c0;
  font-size:9px;
}

.start-pro-section-head>small{
  color:#515c67;
  font-size:7px;
}

.start-pro-system-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr))
    auto;
  gap:5px;
}

.start-pro-system-grid article{
  min-width:0;
  min-height:45px;

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 10px;

  border:1px solid rgba(255,255,255,.04);
  border-radius:8px;

  background:rgba(0,0,0,.10);
}

.start-pro-system-grid article>i{
  width:6px;
  height:6px;
  flex:0 0 6px;

  border-radius:50%;

  background:#63816d;

  box-shadow:
    0 0 7px rgba(99,129,109,.28);
}

.start-pro-system-grid article>div{
  min-width:0;
  display:grid;
}

.start-pro-system-grid small{
  color:#58636e;
  font-size:7px;
}

.start-pro-system-grid strong{
  margin-top:1px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#9ea8b2;
  font-size:8px;
}

.start-pro-version{
  min-width:90px!important;
  justify-content:center!important;
}

.start-pro-version span{
  color:#665b3f;
  font-size:7px;
}

.start-pro-version strong{
  color:#a88f52;
}


/* PANELS
   ========================================================= */

.start-pro-panel{
  min-width:0;

  padding:14px;

  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.006)
    );
}

.start-pro-panel-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;

  margin-bottom:11px;
  padding:0 2px;
}

.start-pro-panel-head>div{
  min-width:0;
}

.start-pro-panel-head span{
  display:block;

  margin-bottom:3px;

  color:#89784e;
  font-size:7px;
  font-weight:750;
  letter-spacing:.14em;
}

.start-pro-panel-head h2{
  margin:0;

  color:#d3dbe2;

  font-size:15px;
  font-weight:620;
}

.start-pro-panel-head p{
  margin:4px 0 0;

  color:#687480;
  font-size:8px;
}

.start-pro-panel-head>a{
  flex:0 0 auto;

  color:#897a51;

  font-size:8px;
  font-weight:600;
  text-decoration:none;
}


/* LIVE MARKT
   ========================================================= */

.start-pro-live-market{
  padding:15px;
}

.start-pro-live-grid{
  min-height:70px;
}


/* SCHNELLZUGRIFF
   ========================================================= */

.start-pro-quick{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.start-pro-quick>a{
  min-width:0;
  min-height:70px;

  display:grid;
  grid-template-columns:31px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;

  padding:11px;

  border:1px solid rgba(255,255,255,.052);
  border-radius:10px;

  background:rgba(255,255,255,.011);

  color:inherit;
  text-decoration:none;
}

.start-pro-quick>a>span{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(193,157,73,.12);
  border-radius:8px;

  color:#a08a54;
  font-size:11px;
}

.start-pro-quick>a>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.start-pro-quick strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#c6ced5;

  font-size:9px;
  font-weight:650;
}

.start-pro-quick small{
  color:#626e79;
  font-size:7px;
  line-height:1.35;
}

.start-pro-quick b{
  color:#675d42;
  font-size:10px;
}


/* MARKT / NETZWERK
   ========================================================= */

.start-pro-market,
.start-pro-network{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
  gap:10px;
}

.start-pro-network{
  grid-template-columns:1fr 1fr;
}


/* EXISTIERENDE DYNAMISCHE INHALTE
   ========================================================= */

.start-pro-offers,
.start-pro-shortages,
.start-pro-news-host,
.start-pro-top3{
  min-width:0;
}

.start-pro .start-pro-loading{
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px dashed rgba(255,255,255,.045);
  border-radius:8px;

  color:#596571;
  font-size:8px;
}


/* HOVER
   ========================================================= */

.start-pro-stats>a,
.start-pro-quick>a{
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.start-pro-stats>a:hover,
.start-pro-quick>a:hover{
  border-color:rgba(193,157,73,.15);
  background:rgba(193,157,73,.022);
  transform:translateY(-1px);
}


/* TABLET
   ========================================================= */

@media(max-width:900px){

  .start-pro{
    width:min(100% - 20px,1180px);
  }

  .start-pro-hero-content{
    width:82%;
  }

  .start-pro-stats,
  .start-pro-quick{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .start-pro-system-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .start-pro-version{
    grid-column:1/-1;
  }

  .start-pro-market,
  .start-pro-network{
    grid-template-columns:1fr;
  }
}


/* MOBILE
   ========================================================= */

@media(max-width:560px){

  .start-pro{
    width:calc(100% - 14px);
    padding-top:8px;
    gap:8px;
  }

  .start-pro-hero{
    min-height:360px;
    border-radius:12px;
  }

  .start-pro-visual-overlay{
    background:
      linear-gradient(
        90deg,
        rgba(8,12,17,.96),
        rgba(8,12,17,.78)
      );
  }

  .start-pro-hero-content{
    width:100%;
    min-height:360px;
    padding:24px 20px;
  }

  .start-pro-brand{
    margin-bottom:22px;
  }

  .start-pro-copy h1{
    font-size:32px;
  }

  .start-pro-copy p{
    font-size:10px;
  }

  .start-pro-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .start-pro-btn{
    width:100%;
  }

  .start-pro-stats,
  .start-pro-quick{
    grid-template-columns:1fr 1fr;
    gap:5px;
  }

  .start-pro-stats>a{
    min-height:60px;
    padding:9px;
  }

  .start-pro-quick>a{
    grid-template-columns:28px minmax(0,1fr);
    min-height:62px;
    padding:9px;
  }

  .start-pro-quick>a>b{
    display:none;
  }

  .start-pro-quick small{
    display:none;
  }

  .start-pro-system-grid{
    grid-template-columns:1fr 1fr;
  }

  .start-pro-panel{
    padding:11px;
  }

  .start-pro-panel-head{
    align-items:flex-start;
  }

}


/* VERY SMALL
   ========================================================= */

@media(max-width:380px){

  .start-pro-stats,
  .start-pro-quick,
  .start-pro-system-grid{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   ZEUS V176 · STARTSEITE DYNAMIC CONTENT · START
   ========================================================= */


/* Handelskarten
   --------------------------------------------------------- */

.start-pro-live-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

.start-pro #home-offers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.start-pro-trade-row{
  position:relative;

  min-width:0;
  min-height:104px;

  display:flex;
  flex-direction:column;

  padding:11px 12px;

  border:1px solid rgba(255,255,255,.052);
  border-radius:9px;

  background:rgba(255,255,255,.010);

  color:inherit;
  text-decoration:none;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.start-pro-trade-row:hover{
  transform:translateY(-1px);

  border-color:
    rgba(191,158,79,.18);

  background:
    rgba(191,158,79,.022);
}

.start-pro-trade-row::before{
  content:"";

  position:absolute;

  top:9px;
  bottom:9px;
  left:0;

  width:2px;

  border-radius:0 2px 2px 0;

  background:#6c7a88;
}

.start-pro-trade-row.is-offer::before{
  background:#778c7d;
}

.start-pro-trade-row.is-request::before{
  background:#9b795e;
}

.start-pro-trade-row.is-recurring::before{
  background:#958052;
}

.start-pro-trade-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.start-pro-trade-head>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#9a8551;

  font-size:7px;
  font-weight:750;
  letter-spacing:.08em;

  text-transform:uppercase;
}

.start-pro-trade-head time{
  flex:0 0 auto;

  color:#4f5a65;

  font-size:7px;
}

.start-pro-trade-main{
  min-width:0;

  display:grid;
  gap:2px;

  margin-top:8px;
}

.start-pro-trade-main strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#d0d8df;

  font-size:10px;
  font-weight:650;
}

.start-pro-trade-main small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#66727e;

  font-size:8px;
}

.start-pro-trade-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;

  margin-top:auto;
  padding-top:9px;
}

.start-pro-trade-meta span{
  max-width:100%;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  padding:3px 6px;

  border:1px solid rgba(255,255,255,.045);
  border-radius:5px;

  background:rgba(0,0,0,.12);

  color:#77838f;

  font-size:7px;
}

.start-pro-trade-row>b{
  position:absolute;
  right:10px;
  bottom:9px;

  color:#665d43;
  font-size:9px;
}


/* Engpässe
   --------------------------------------------------------- */

.start-pro-shortages{
  display:grid;
  gap:5px;
}

.start-pro-shortage-row{
  min-width:0;
  min-height:48px;

  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;

  padding:7px 9px;

  border:1px solid rgba(255,255,255,.045);
  border-radius:8px;

  background:rgba(255,255,255,.009);

  color:inherit;
  text-decoration:none;
}

.start-pro-shortage-score{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(180,145,72,.12);
  border-radius:7px;

  background:rgba(180,145,72,.025);

  color:#a28b55;

  font-size:9px;
  font-weight:700;
}

.start-pro-shortage-row>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.start-pro-shortage-row strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#bdc6ce;

  font-size:9px;
}

.start-pro-shortage-row small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#606c77;

  font-size:7px;
}

.start-pro-shortage-row>b{
  color:#605840;
  font-size:9px;
}

.start-pro-shortage-row.is-critical
.start-pro-shortage-score{
  border-color:rgba(176,82,73,.22);
  background:rgba(176,82,73,.05);
  color:#b87970;
}

.start-pro-shortage-row.is-high
.start-pro-shortage-score{
  color:#b2945b;
}


/* Bekanntmachung
   --------------------------------------------------------- */

.start-pro-news{
  display:grid;
  gap:6px;
}

.start-pro-news time{
  color:#806f48;

  font-size:7px;
  font-weight:650;
  letter-spacing:.08em;
}

.start-pro-news h3{
  margin:0;

  color:#cbd3da;

  font-size:12px;
  font-weight:630;
  line-height:1.35;
}

.start-pro-news p{
  margin:0;

  color:#6f7b86;

  font-size:8px;
  line-height:1.6;
}


/* Rangliste
   --------------------------------------------------------- */

.start-pro-top3{
  display:grid;
  gap:5px;
}

.start-pro-rank-row{
  min-width:0;
  min-height:48px;

  display:grid;
  grid-template-columns:31px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;

  padding:7px 9px;

  border:1px solid rgba(255,255,255,.045);
  border-radius:8px;

  background:rgba(255,255,255,.009);

  color:inherit;
  text-decoration:none;
}

.start-pro-rank-no{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(194,158,71,.15);
  border-radius:7px;

  background:rgba(194,158,71,.03);

  color:#ac9254;

  font-size:9px;
  font-weight:750;
}

.start-pro-rank-row>div{
  min-width:0;
  display:grid;
  gap:1px;
}

.start-pro-rank-row>div strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:#c3ccd4;
  font-size:9px;
}

.start-pro-rank-row>div small{
  color:#626d77;
  font-size:7px;
}

.start-pro-rank-row>b{
  color:#978251;
  font-size:8px;
}


/* Empty State
   --------------------------------------------------------- */

.start-pro-empty{
  grid-column:1/-1;

  min-height:64px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  padding:12px;

  border:1px dashed rgba(255,255,255,.055);
  border-radius:8px;

  color:#64707b;
}

.start-pro-empty>span{
  color:#88784f;
}

.start-pro-empty>div{
  display:grid;
  gap:2px;
}

.start-pro-empty strong{
  color:#9aa5ae;
  font-size:9px;
}

.start-pro-empty small{
  color:#59646e;
  font-size:7px;
}


/* Systemstatus
   --------------------------------------------------------- */

.start-pro-system-grid
article.status-good>i{
  background:#658270;

  box-shadow:
    0 0 7px
    rgba(101,130,112,.35);
}

.start-pro-system-grid
article.status-good strong{
  color:#8ca695;
}

.start-pro-system-grid
article.status-warn>i{
  background:#9a8351;

  box-shadow:
    0 0 7px
    rgba(154,131,81,.30);
}

.start-pro-system-grid
article.status-warn strong{
  color:#aa945f;
}

.start-pro-system-grid
article.status-bad>i{
  background:#9d625c;

  box-shadow:
    0 0 7px
    rgba(157,98,92,.30);
}

.start-pro-system-grid
article.status-bad strong{
  color:#ad7770;
}


/* Responsive
   --------------------------------------------------------- */

@media(max-width:900px){

  .start-pro-live-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .start-pro #home-offers{
    grid-template-columns:1fr;
  }

}

@media(max-width:560px){

  .start-pro-live-grid{
    grid-template-columns:1fr;
  }

  .start-pro-trade-row{
    min-height:94px;
  }

}


/* ZEUS V176 · STARTSEITE DYNAMIC CONTENT · END */