body{margin:0;font-family:sans-serif;background:#111;color:#eee;display:flex;height:100vh}
    .sidebar{width:220px;background:#222;padding:10px;box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;gap:12px;position:relative}
    .component-btn, .palette .comp{background:#333;padding:8px;margin:5px 0;cursor:pointer;border-radius:4px;text-align:center;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
    .component-btn img{height:1em}
    .small-btn{font-size:12px} /* Kleinere Schrift für Zurück und Impressum */
    .tools{display:flex;gap:6px;flex-wrap:wrap}
    .tool{flex:1;background:#333;padding:6px;border-radius:4px;text-align:center;cursor:pointer}
    .tool.active{background:#555}
    .stage{flex:1;position:relative;background:#000;border-left:2px solid #444;overflow:hidden}
    .device{position:absolute;padding:6px 10px;background:#222;border:1px solid #555;border-radius:6px;color:#fff;cursor:grab;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
    .device .icon{font-size:18px}
    .device .label{font-size:13px}
    svg.connection{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
    .props{font-size:13px;background:#222;padding:6px;border-radius:4px}
    .props input{width:90%;padding:4px;margin-top:4px;background:#111;color:#fff;border:1px solid #555;border-radius:4px}
    .ip-display{font-size:11px;color:#aaa}
    .bottom-links{margin-top:auto;display:flex;flex-direction:row;justify-content:space-between;gap:4px;position:absolute;bottom:10px;left:10px;right:10px} /* Nebeneinander */
    .bottom-links a{flex:1;text-align:center} /* Gleichmäßige Breite */
	/* Tabs (kleine, dezente Buttons über der Palette) */
.component-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.component-tabs .tab {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background: transparent;      /* passt sich deinem Sidebar-Look an */
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  color: #555;
}

.component-tabs .tab:hover {
  filter: brightness(0.95);
}

.component-tabs .tab.active {
  /* Hebe aktiven Tab hervor - passe Variablen an dein Theme an */
  background: var(--highlight-color, #2b8aef);
  color: white;
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;       /* ganze Höhe vom Bildschirm */
}

.sidebar-top {
  flex: 1;             /* nimmt den ganzen restlichen Platz */
  overflow-y: auto;   /* nur dieser Bereich scrollt */
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  
}

.sidebar-bottom {
  flex-shrink: 0;      /* bleibt fest unten */
  display: flex;
  justify-content: space-around; /* Buttons nebeneinander */
  padding: 1em;
}


/* Palette verstecken */
.hidden {
  display: none !important;
}

/* Optional: sorgt dafür, dass die zwei Paletten die gleiche Höhe / Platzverhalten haben */
.palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* löschen der Komponenten */
.device {
  position: absolute;
  padding: 6px 10px;
  background: #222;
  border: 1px solid #555;
  border-radius: 6px;
  color: #fff;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;  /* Elemente zentrieren */
  gap: 2px;
}

.device .close {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
}

.device .close:hover {
  color: red;
}

/* löschen der Verbindungen */
#connections line {
  pointer-events: stroke; /* macht die Linie selbst klickbar */
  cursor: pointer;        /* schöner: zeigt Handcursor */
}

/* besserer Touch für Safari */
#connections line {
  pointer-events: stroke;
  cursor: pointer;
  shape-rendering: crispEdges;
  vector-effect: non-scaling-stroke;
}

#connections {
  transform: translateZ(0); /* Safari-GPU-Render erzwingen */
}
/* Heim-Palette */
#palette-home .comp,
.component-btn {
  background: #333;
  padding: 8px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#palette-home .comp img,
.component-btn img {
  height: 1em;
}

#palette-home .small-btn {
  font-size: 12px; /* Kleinere Schrift für Zurück und Impressum */
}

#palette-home .tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#palette-home .tool {
  flex: 1;
  background: #333;
  padding: 6px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

#palette-home .tool.active {
  background: #555;
}

#palette-home .stage {
  flex: 1;
  position: relative;
  background: #000;
  border-left: 2px solid #444;
  overflow: hidden;
}

#palette-home .device {
  position: absolute;
  padding: 6px 10px;
  background: #222;
  border: 1px solid #555;
  border-radius: 6px;
  color: #fff;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

#palette-home .device .icon {
  font-size: 18px;
}

#palette-home .device .label {
  font-size: 13px;
}

#palette-home svg.connection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* WWW-Palette */
#palette-www .comp,
.component-btn {
  background: #333;
  padding: 8px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#palette-www .comp img,
.component-btn img {
  height: 1em;
}

#palette-www .small-btn {
  font-size: 12px; /* Kleinere Schrift für Zurück und Impressum */
}

#palette-www .tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#palette-www .tool {
  flex: 1;
  background: #333;
  padding: 6px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

#palette-www .tool.active {
  background: #555;
}

#palette-www .stage {
  flex: 1;
  position: relative;
  background: #000;
  border-left: 2px solid #444;
  overflow: hidden;
}

#palette-www .device {
  position: absolute;
  padding: 6px 10px;
  background: #222;
  border: 2px solid #fff;
  border-radius: 6px;
  color: #fff;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

#palette-www .device .icon {
  font-size: 18px;
}

#palette-www .device .label {
  font-size: 13px;
}

#palette-www svg.connection {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* Heim-Geräte in der Stage */
.device.home {
  border: 1px solid #aaa; 
    border-radius: 5px;

}

/* WWW-Geräte in der Stage */
.device.www {
  border: 1px solid #555;
  border-radius: 0px;
}

/* Pakete */
.device.selected-start { outline: 2px solid green; }
.device.selected-waypoint { outline: 2px solid orange; }
.device.selected-end { outline: 2px solid red; }
.device.highlight { background: #ace435; transition: background 0.3s; }

.packet-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #222;
  border: 1px solid #999;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  user-select: none;
}
.packet-btn:hover {
  background: #ddd;
}
.device.highlight {
  box-shadow: 0 0 12px 4px #ace435;
  border-radius: 12px;
}