/* Body Layout */
body {
  font-family: Arial, sans-serif; /* Set the entire website's font to Arial */
  margin: 0;
  padding: 0;
}

.parent-container {
  position: relative; /* Position the grid container relative to its parent */
  width: 100%; /* Full width */
  max-width: 800px; /* Set maximum width as needed */
  height: 100vh; /* Full viewport height */
}

.grid-container {
  display: grid;
  grid-template-rows: 80px auto; /* First row 80px high, second row auto height */
  grid-template-columns: 28% 72%; /* First column 28%, second column 72% */
  margin: 0 auto; /* Center horizontally */
  width: 100%; /* Full width */
  max-width: 800px; /* Set maximum width as needed */
  border-bottom: 1px solid black; /* Thin and black bottom line */
}

.cell {
  border: 1px solid black; /* Thin black border */
  padding: 8pt;
  overflow: auto; /* Allow overflow content to be scrolled */
  word-wrap: break-word; /* Break text if it exceeds cell width */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.cell img {
  width: 100%; /* Make the image fill the entire cell */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Scale the image to cover the entire area of the cell */
}

.cell video {
  width: 100%; /* Make the video fill the entire width of the cell */
  height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

.cell:nth-child(3) {
  background-color: rgba(255, 213, 0, 0.217); /* Set the background color of the fourth cell */
}

.cell:nth-child(2) {
  background-color: rgba(173, 173, 173, 0.346); /* Set the background color of the fourth cell */
}

/* Textarea Styling */
.cell:nth-child(4) textarea {
  width: 100%; /* Full width of the cell */
  height: calc(4cm - 16pt); /* Set height to 4 cm minus padding (8pt top + 8pt bottom) */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  resize: vertical; /* Allow vertical resizing */
}

/* Line Styling */
hr {
  border: none; /* Remove default border */
  border-top: 1px solid black; /* Adjust thickness and color as needed */
  margin: 10px 0; /* Adjust spacing above and below the line */
}

/* Tooltip Styles */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 70px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9999; /* Ensure tooltips are above all other elements */
  top: 50%;
  left: calc(100% + 5px); /* Position to the right of the element */
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip2:hover .tooltiptext2 {
  visibility: visible;
  opacity: 1;
}

/* Popup Message (not in use) */
.popup-message {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup-message button {
  display: inline-block;
  padding: 10px 20px; /* Adjust as needed */
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s;
}

.popup-message button:hover {
  background-color: #0056b3;
}

.error-message {
  color: rgba(254, 73, 2, 0.902);
}

.ok-message {
  color: rgb(6, 254, 2);
}

.info-message {
  color: rgb(109, 79, 246);
}

/* Media Query for small screens */
@media (max-width: 600px) {
  .grid-container {
      grid-template-columns: 1fr; /* Single column layout */
  }
  .cell textarea {
      font-size: 16px; /* Adjust font size for better readability */
  }
}

/* Up scroll Bild */
#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
  width: 15px; /* Passe die Größe des Bildes an */
  height: 20px; /* Passe die Größe des Bildes an */
}

#backToTopBtn:hover {
  opacity: 0.8;
}