/* layout grundlagen */
*{box-sizing:border-box;
  margin:0;
  padding:0
}

body{
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.4;
  color:#e6e9ef;
  background:#0f1115;
}

/* header bereich */
header{
  position:sticky; top:0;
  display:flex; align-items:center;
  padding:12px 14px;
  background:#141821;
  border-bottom:1px solid #2a3242;
}

header h1{
  font-size:18px;
  color:#e6e9ef
}

/* sidebar navigation */
#sidebar{
  position:fixed;
  top:54px;
  left:12px;
  bottom:12px;
  width:240px;
  background:#1a1f2b;
  border:1px solid #2a3242;
  border-radius:10px;
  padding:12px; overflow:auto;
}

/* hauptbereich */
main {
  margin:16px 12px 24px 268px;
  display:grid;
  grid-template-columns: minmax(280px,1fr) minmax(240px,0.9fr);
  gap:16px;
}

/* responsive design*/
@media (max-width: 980px) {
  #sidebar {
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    height:auto;
    margin-bottom:12px;
  }

  main {
    margin: 12px;
    grid-template-columns: 1fr;
  }

  .component-visual {
    margin-bottom:16px;
  }
}

/* nav tree */
#tree-view ul{
  list-style:none;
  padding-left:0
}

#tree-view li{
  margin:6px 0
}

#tree-view summary{
  cursor:pointer;
  padding:4px 6px;
  border-radius:6px;
  color:#e6e9ef
}

#tree-view summary:hover{
  background:#2a3242
}

#tree-view a{
  color:#e6e9ef;
  text-decoration:none;
  display:block;
  padding:4px 6px;
  border-radius:6px
}

#tree-view a:hover{
  background:#2a3242
}

#tree-view li.active > a{
  font-weight:600;
  background:#1e2a3f;
  border:1px solid #5fb3f9;
  color:#5fb3f9;
}

/* komponenten container */
.component-visual, .info-panel{
  background:#1a1f2b;
  border:1px solid #2a3242;
  border-radius:10px;
  padding:12px;
}

.component-visual{
  position:relative;
  min-height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.component-visual img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:6px
}

/* informationsbereich */
.info-panel h2{
  font-size:18px;
  margin-bottom:8px;
  color:#e6e9ef
}

.info-text p, .info-text li{
  font-size:14px;
  color:#a7b0c0
}

.info-text ul{
  padding-left:18px
}

/* tab navigation */
.info-tabs{display:flex;
  gap:6px;
  margin:8px 0
}

.info-tabs .btn{
  border:1px solid #2a3242;
  background:#141821;
  color:#e6e9ef;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px
}

.info-tabs .btn.active{
  background:#5fb3f9;
  border-color:#5fb3f9;
  color:#0f1115
}

.tab-pane{
  display:none
}

.tab-pane.active{
  display:block
}

/* textabstände */
.info-panel p,
.tab-content p {
  margin: 0 0 10px 0;
}

.info-panel ul,
.tab-content ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 22px;
  margin: 0 0 10px 0;
}

.info-panel li,
.tab-content li {
  margin: 0 0 6px 0;
}

/* rechner styling */
.calculator{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:center;
  margin-top:8px
}

.calculator label{
  font-size:12px;
  color:#a7b0c0
}

.calculator input{
  border:1px solid #2a3242;
  background:#0f1115;
  color:#e6e9ef;
  padding:6px 8px;
  border-radius:6px;
  font-family:monospace
}

.calculator .btn{
  grid-column:1/-1;
  background:#21588f;
  border:0;
  color:#fff;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer
}

.result{
  grid-column:1/-1;
  border:1px solid #2a3242;
  background:#141821;
  padding:6px 8px;
  border-radius:6px;
  color:#e6e9ef
}

/* interaktive hotspots */
.hotspot{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#5fb3f9;
  border:2px solid #fff;
  box-shadow:0 0 0 4px rgba(95,179,249,.25);
  cursor:pointer
}

/* beschriftungsboxen */
.label-box{
  position:absolute;
  padding:6px 10px;
  background:#5fb3f9;
  color:#0f1115;
  font-size:13px;
  font-weight:bold;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  white-space:nowrap;
}

/* link styling */
a{
  color:#5fb3f9;
}