/* ━━━━━━━━━━━━━━━✨ BASIS-STYLES & ROOT-VARIABLEN ━━━━━━━━━━━━━━━ */
:root {
  --accent: #D87C4A;
  --highlight: #ffd7ba;
}
body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: black;
  color: #B0B0B0;
  font-family: "Playwrite NZ Basic", cursive;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
}
/* ━━━━━━━━━━━━━━━✨ LAYOUT-BEREICHE ━━━━━━━━━━━━━━━ */
.container {
  max-width: 2050px;
  margin: 10px auto;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.box-row {
  display: flex;
  gap: 20px;
  width: 100%;
}
.intro-box, .interessen-box, .warum-box {
  flex: 1;
  background-color: black;
  border: 1px solid #8E1616;
  border-radius: 10px;
  padding: 20px;
  height: 277px;
  overflow-y: auto;
}
.image-row {
  display: flex;
  gap: 20px;
  width: 100%;
  margin-top: 5px;
}

.image-container {
  flex: 1;
  position: relative; /* wichtig für die Positionierung */
  text-decoration: none; /* entfernt die Unterstreichung */
  display: block;
  cursor: pointer; /* zeigt den Zeiger beim Hover */
}

.image-container img {
  width: 100%;
  height: 365px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.image-label {
  position: absolute;
  bottom: 3px; /* Abstand vom unteren Rand */
  left: 50%;
  transform: translateX(-50%); /* zentriert horizontal */
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 3px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
}
.image-container:hover .image-label {
  background-color: rgba(0, 0, 0, 0.9); /* macht das Label dunkler beim Hover */
}
.ki-box {
  background-color: black;
  border: 1px solid #8E1616;
  border-radius: 10px;
  padding: 20px;
  margin-top: 5px;
}
.intro-box h3 {
  margin-top: 15px;
  margin-bottom: 5px;
  color: #EEEEEE;
  font-size: 18px;
}
.intro-box a {
  color: #8E1616;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}
.intro-box a:hover {
  color: #EEEEEE;
}
/* ━━━━━━━━━━━━━━━✨ HEADERS & TEXT-STYLES ━━━━━━━━━━━━━━━ */
h1 {
  font-family: "Playpen Sans", cursive;
  font-size: 75px;
  align-self: center;
  color: #8E1616;
  margin-top: 0;
  margin-bottom: 50px;
  text-align: center;
}
h2 {
  font-family: "Playpen Sans", cursive;
  font-size: 23px;
  align-self: center;
  color: #D84040;
  margin: 5px auto;
  text-align: center;
}
p {
  margin: 5px 0;
  font-size: 15px;
}
.highlight {
  color: #D84040;
  font-weight: bold;
}
/* ━━━━━━━━━━━━━━━✨ FOOTER & BLOCKQUOTES ━━━━━━━━━━━━━━━ */

footer {
  text-align: center;
  margin-top: 60px;
  font-size: 0.9em;
  color: #8E1616;
}

blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 15px;
  color: var(--highlight);
  font-style: italic;
  margin: 20px 0;
}