body {
      font-family: Georgia;
      background: black;
      color: white;
      padding: 20px;
    }
    
    h1 {
      font-family: Georgia;
      background: black;
      color: red;
      padding: 40px;
    }
    
    h2 {
      font-family: Georgia;
      background: black;
      color: red;
      padding: 40px;
    }
    
    h3 {
      font-family: Georgia;
      background: black;
      color: red;
      padding: 40px;
    }

    .comment-box {
      text-align: center;
      margin-bottom: 20px;
    }

    .comment-button {
      background-color: black;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: bold;
    }

    .comment-button:hover {
      background-color: red;
    }

    #comment-section {
      max-width: 500px;
      margin: auto;
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      border-radius: 6px;
      border: 1px solid black;
    }

    button {
      margin-top: 10px;
      padding: 10px;
      width: 100%;
      background: black;
      color: red;
      border: none;
      border-radius: 6px;
      font-weight: bold;
      cursor: pointer;
    }

    .comment {
      background: white;
      padding: 10px;
      border-radius: 6px;
    }
/* Grundlayout: Alles zentrieren */
  layout-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Verhindert Scrollbalken durch schwirrende Bilder */
  background-color: black;
}

/* Der gerahmte Text in der Mitte */
.center-content {
  max-width: 500px;
  padding: 40px;
  border: 2px dashed red; /* Dein Rahmen */
  background: black;
  z-index: 10; /* Damit der Text über den Bildern liegt, falls sie sich überlappen */
  text-align: center;
}

/* Gemeinsames Styling für die Bilder */
.floating-image {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-family: georgia;
}

.floating-image img {
  width: 300px;
  height: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

/* Individuelle Positionen der Bilder (Beispiele) */
.pos-1 {
  top: 10%;
  left: 15%;
  transform: rotate(-5deg); /* Ein leichter Schwung */
}

.pos-2 {
  bottom: 15%;
  right: 10%;
  transform: rotate(8deg);
}

.pos-3 {
  top: 20%;
  right: 15%;
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-image {
  animation: float 4s ease-in-out infinite;
}

/* Die Bühne: Hält alles zusammen */
.stage {
  position: relative;
  width: 80%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  overflow: hidden;
}

/* Der Textrahmen in der Mitte */
.center-box {
  width: 300px;
  padding: 30px;
  border: 3px dashed red; /* Dein gewünschter Rahmen */
  background: black;
  text-align: center;
  z-index: 100; /* Immer obenauf */
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Der Orbit, der sich dreht */
.orbit {
  position: absolute;
  width: 800px; /* Durchmesser des Kreises */
  height: 800px;
  border-radius: 50%;
  animation: rotate-orbit 20s linear infinite;
}

/* Die einzelnen Bild-Container */
.item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Damit die Bilder selbst nicht auf dem Kopf stehen, wenn sie kreisen: */
  animation: counter-rotate 20s linear infinite;
}

.item img {
  width: 30px;
  border-radius: 10px;
  border: 2px dashed red;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.title {
  font-family: georgia;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Positionen auf dem Kreis (Mathematik!) */
.pos-1 { top: 0; left: 50%; transform: translateX(-50%); }
.pos-2 { bottom: 0; left: 50%; transform: translateX(-50%); }
.pos-3 { top: 50%; left: 0; transform: translateY(-50%); }

/* Animationen */
@keyframes rotate-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Grund-Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: georgia; /* Passt zum Künstler-Vibe */
  background-color: black;
  color: white;
  overflow-x: hidden;
}

/* Die Bühne für das Karussell */
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Der gerahmte Text in der Mitte */
.center-box {
  width: 90%;
  max-width: 450px;
  padding: 30px;
  border: 4px dashed red; /* Roter Rahmen passend zu deinem Style */
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 100;
  box-shadow: 0 0 20px rgba(230, 0, 35, 0.3);
}

.center-box h1 { font-size: 1.5rem; margin-bottom: 15px; color: #e60023; }
.center-box p { margin-bottom: 10px; line-height: 1.4; }
.nav-links { list-style: none; margin: 15px 0; }
.nav-links li { display: inline; margin: 0 5px; }
.center-box a { color: #e60023; text-decoration: none; font-weight: bold; }
.center-box a:hover { text-decoration: underline; }

/* Der Orbit (Der Kreis) */
.orbit {
  position: absolute;
  width: 700px; /* Durchmesser des "Schwirr-Bereichs" */
  height: 700px;
  animation: rotate-orbit 30s linear infinite;
}

/* Stoppt die Animation, wenn man drüber fährt */
.orbit:hover { animation-play-state: paused; }

/* Die Bilder im Orbit */
.item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: counter-rotate 30s linear infinite;
}

.image-title {
  font-size: 0.9rem;
  margin-bottom: 5px;
  background: black;
  padding: 2px 8px;
  border-radius: 4px;
}

.item img {
  width: 300px;
  height: auto;
  border: 2px solid #fff;
  filter: grayscale(50%);
  transition: 0.3s;
}

.item img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}

/* Positionen der Bilder auf dem Kreis */
.pos-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
.pos-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.pos-3 { top: 50%; left: 0; transform: translate(-50%, -50%); }

/* Animationen */
@keyframes rotate-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counter-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Kommentarbereich Styling */
.bottom-content {
  padding: 50px 20px;
  max-width: 800px;
  margin: 0 auto;
}