body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 1rem;
  background: #f5f5f5;
}

.layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.area {
  position: relative;
  border: 2px dashed #999;
  padding: 1rem;
  height: 450px;
  flex: 1;
}

.area-label {
  position: absolute;
  top: -0.9rem;
  left: 1rem;
  background: #f5f5f5;
  padding: 0 0.4rem;
  font-weight: bold;
  font-size: 0.9rem;
}

/* Knoten */
.node {
  position: absolute;
  background: #fafafa;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 0.6rem;
}

/* Slots */
.slots {
  display: grid;
  gap: 0.3rem;
}

.slot {
  border: 1px dashed #aaa;
  background: #fff;
  min-height: 1.4rem;
  padding: 0.2rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #777;
}

.slot.over { background: #e6f2ff; border-color: #0077cc; }
.slot.correct { background: #d9fdd3; border-color: #3c9a3c; }
.slot.wrong { background: #ffe0e0; border-color: #cc0000; }

/* Fachmodul im Konnektor */
.inner-node {
  border: 1px solid #bbb;
  padding: 0.4rem;
  background: #fff;
  width: 120px;
}

/* Drag-Blöcke */
.drag {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  margin-top: 1rem;
}

.drag-row {
  display: flex;
  gap: 1rem;
}

.drag-col {
  flex: 1;
}

.drag-block {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  cursor: grab;
  border: 1px solid #666;
  font-size: 0.85rem;
}

.name { background: #e0f0ff; }
.function { background: #e0ffe0; }
.cert { background: #ffe0e0; }

/* SVG Pfeile */
svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

line {
  stroke: #444;
  stroke-width: 2;
  marker-end: url(#arrow);
}