body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

/* Styles für die Auswahlboxen (Select) */
select {
  height: 40px; /* gleiche Höhe wie die Buttons */
  padding: 10px 20px; /* gleiche Polsterung wie die Buttons */
  font-size: 16px; /* gleiche Schriftgröße wie die Buttons */
  border-radius: 5px; /* gleiche abgerundete Ecken wie die Buttons */
  border: 1px solid #ccc; /* optional: Rahmenfarbe */
  cursor: pointer; /* Zeiger ändern */
  margin-right: 10px; /* Abstand zum Button */
}

/* Styles für die Buttons (Elemente hinzufügen) */
#addBallBtn {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#addNumberingBtn {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#addLineBtn {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#addRackBtn {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

/* Button zum Löschen aller Elemente */
#clearElementsBtn {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#clearElementsBtn:hover {
  background-color: darkred;
}

/* Styles für die Buttons (Import/Export/PNG/Drucken) */
#exportJsonBtn {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#exportJsonBtn:hover {
  background-color: darkgreen;
}

#importJsonBtn {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#importJsonBtn:hover {
  background-color: darkgreen;
}

#downloadPngBtn {
  background-color: orange;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#downloadPngBtn:hover {
  background-color: darkorange;
}

#printBtn {
  background-color: orange;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}

#printBtn:hover {
  background-color: darkorange;
}

/* Container der Karte – 650px breit */
#card {
  width: 650px;
  border: 10px solid red;
  padding: 10px;
  margin-top: 20px;
  background-color: #fff;
  position: relative;
}

/* Kopfzeile */
#cardHeader {
  position: relative;
  height: 50px;
  margin-bottom: 10px;
}

#topLeftLabel {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  font-size: 18px;
}
  
#topCenterLabel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 18px;
  padding: 2px 6px;
}

#topRightNumber {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
}

#topRightBall {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

/* Beschreibung – Textarea (im Header) */
#description {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* Container für Billardtisch & dynamische Elemente – 600x300 */
#tableContainer {
  position: relative;
  width: 624px;
  height: 324px;
}

/* SVG-Billardtisch – statischer Hintergrund */
#billiardTable {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Linien des Billardtisches */
#lineVert1, #lineVert2, #lineVert3, #lineVert4, #lineVert5, #lineVert6, #lineVert7,
#lineHoriz1, #lineHoriz2, #lineHoriz3 {
  display: none;
}

/* Billardkugeln (20x20px) */
/* Mit Flexbox zentriert, damit die Zahlen immer mittig stehen */
.ball {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  cursor: move;
  z-index: 2;
  user-select: none;
}

/* Roter Punkt in der Cue-Kugel */
.cueDot {
  width: 4px;
  height: 4px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Nummerierungen – etwa 20 % größer als Kugeln */
.numbering {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  cursor: move;
  z-index: 2;
  user-select: none;
}

/* Endpunkte der Linie */
.line-endpoint {
  cursor: pointer;
}

/* Beim Drucken Endpunkte ausblenden */
@media print {
  .line-endpoint { display: none; }
  body * { visibility: hidden; }
  #card, #card * { visibility: visible; }
  #card { position: absolute; left: 0; top: 0; }
}