body {
  margin: 0;
  background: #87ceeb;
  font-family: Arial, sans-serif;
  overflow: hidden;
  position: relative;
  width: 1000px;  /* Fixe Breite für absolute Positionierung */
  height: 600px;  /* Fixe Höhe für absolute Positionierung */
}

/* Wiese */
.forest {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1000px;
  height: 240px;
  background: linear-gradient(to top, #0b6623, #228B22);
  z-index: 0;
}

/* 2-stöckiges Haus */
.house {
  position: absolute;
  bottom: 240px;
  left: 600px;
  width: 232px;
  height: 200px;
  background: #8b4513;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding: 25px;
  box-sizing: border-box;
  z-index: 2;
}

.window {
  background: #add8e6;
  border: 3px solid #333;
  font-size: small;
  font-family: monospace;
}

.roof {
  position: absolute;
  bottom: 440px;
  left: 564px;
  width: 300px;
  height: 100px;
  background: #a52a2a;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  z-index: 2;
}

/* Mast links */
.pole {
  position: absolute;
  bottom: 240px;
  left: 50px;
  width: 10px;
  height: 150px;
  background: #555;
  z-index: 3;
}

.pole-top {
  position: absolute;
  bottom: 390px;
  left: 25px;
  width: 60px;
  height: 8px;
  background: #444;
  z-index: 3;
}

/* Vertikale Kabel am Mast */
.cable {
  position: absolute;
  width: 6px;
  background: red;
  border: 1px solid white;
  top: 200px;
  bottom: 0px;
  z-index: 5;
}

.cable1 { left: 65px; }
.cable2 { left: 50px; }
.cable3 { left: 35px; }
.cable1 { background: black;       border: 1px solid darkgreen;}
.cable2 { background: black;       border: 1px solid darkgreen;}
.cable3 { background: black;       border: 1px solid darkgreen;}

/* Gestrichelte Verbindung vom Mast ins Haus */
svg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1000px;
  height: 600px;
  z-index: 4;
  pointer-events: none;
}

h1 {
  position: absolute;
  top: 10px;
  left: 20px;
  color: white;
  text-shadow: 2px 2px 4px black;
  z-index: 10;
}