body {
  /*
   * Setze die Schriftfamilie auf „Futura Halbfett“ (wenn installiert) oder
   * nahe Alternativen. Durch den halbfetten Schnitt wirkt die Anwendung
   * modern und gut lesbar. Fallbacks sorgen dafür, dass die Seite auch
   * ohne Futura korrekt angezeigt wird.
   */
  font-family: 'Futura Halbfett', 'Futura', 'Arial', sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
  /*
   * Sanftes Hellgrau als Grundfarbe für die gesamte Seite. Dadurch
   * verschwinden harte weiße Hintergründe und die Inhalte heben sich
   * angenehm ab.
   */
  /* Verwende ein leicht dunkleres Grau als Hintergrund (#bfbfbf) */
  background-color: #bfbfbf;
  color: #333;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  /*
   * Größere Überschriften mit dunkelgrauer Farbe. Der erhöhte
   * Schriftschnitt passt zum Wunsch nach Futura Halbfett und sorgt
   * gleichzeitig für klaren Kontrast.
   */
  font-size: 2.2em;
  color: #333;
  font-weight: 600;
}

audio {
  /*
   * Audio‑Player: nutzen 80 % der Breite und maximal 800 px, damit
   * sie sich elegant in die Seite einfügen. Ein sanftes Hellgrau als
   * Hintergrund erzeugt einen modernen Look, der zum restlichen Layout
   * passt. Die abgerundeten Ecken harmonieren mit den Bewertungs‑Buttons.
   */
  margin: 20px 0;
  width: 80%;
  max-width: 800px;
  border-radius: 8px;
  /* Passe die Audio‑Playerfarbe an den neuen Hintergrund an */
  background-color: #d1d1d1;
  overflow: hidden;
}

button {
  font-size: 1.2em;
  padding: 10px 20px;
  margin: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button.positive {
  /*
   * Großer quadratischer Button für positive Bewertung. Das helle
   * Hintergrundfeld mit sanfter Rundung und Schatten erinnert an
   * App‑Icons. Die Outline in kräftigem Grün zeigt sofort den
   * „Daumen hoch“ an.
   */
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px solid #00B050;
  color: #00B050;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.neutral {
  /*
   * Großer quadratischer Button für neutrale Bewertung. Eine goldene
   * Outline (#F5B041) verleiht ihm einen edlen Charakter. Text wird
   * durch ein SVG ersetzt, daher kein großes Font‑Size nötig.
   */
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px solid #F5B041;
  color: #F5B041;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

button.negative {
  /*
   * Großer quadratischer Button für negative Bewertung. Die kräftig rote
   * Outline zeigt auf den ersten Blick „Daumen runter“. Der Stil
   * entspricht den anderen Bewertungs‑Buttons.
   */
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px solid #E74C3C;
  color: #E74C3C;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hervorgehobene Bewertungsbuttons: Neon‑ähnlicher Schein und hellgrauer
   Hintergrund, um die Auswahl zu verdeutlichen. Die Farben orientieren
   sich an der jeweiligen Kategorie. */
/* Neon‑Highlight für die ausgewählten Bewertungsfelder. Die
   Hintergrundfarbe ist dunkelgrau (#595959), während die Umrandung in
   der jeweiligen Bewertungsfarbe leuchtet. Zwei Box‑Shadows erzeugen
   einen Neon‑Effekt. */
button.selected-positive {
  /* Kein Hintergrund, nur leuchtende Outline und Schatten */
  background-color: transparent;
  border-color: #00B050;
  box-shadow: 0 0 8px #00B050, 0 0 16px #00B050;
}
button.selected-neutral {
  background-color: transparent;
  border-color: #F5B041;
  box-shadow: 0 0 8px #F5B041, 0 0 16px #F5B041;
}
button.selected-negative {
  background-color: transparent;
  border-color: #E74C3C;
  box-shadow: 0 0 8px #E74C3C, 0 0 16px #E74C3C;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  /* Setze Label in Akzentfarbe, damit Formularbeschriftungen besser
     wahrgenommen werden. */
  color: #800000;
}

input[type="text"] {
  padding: 8px;
  font-size: 1em;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin: 0 auto 20px auto;
  display: block;
}

/* Dynamischer Namenscontainer auf der Teilnehmerauswahlseite */
#participant-names-container input {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  font-size: 1em;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Plus‑Button zum Hinzufügen weiterer Teilnehmer */
#add-participant {
  background-color: #800000;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  line-height: 1;
  padding: 0;
  margin-top: 10px;
}

/* Bewertungscontainer: ordnet die Zeilen der Teilnehmer untereinander an.
   Die Rows werden vertikal gestapelt und zentral ausgerichtet. */
#ratings-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

button.submit-btn {
  /* Tiefes Maroon (#800000) als Hauptaktionsfarbe. Diese Akzentfarbe
     zieht sich durch alle wichtigen Buttons der Anwendung. */
  background-color: #800000;
  color: #fff;
}

/* Logo auf der Startseite: zentriert, mit max. Breite und
   ausreichendem Abstand nach unten. */
#start-screen img#logo {
  max-width: 300px;
  width: 60%;
  height: auto;
  margin-bottom: 20px;
}

/* Layout der Hauptbereiche vergrößern, sodass mehr vom verfügbaren
   vertikalen Raum genutzt wird. Durch die Flexbox-Ausrichtung werden
   Inhalte vertikal zentriert und wirken nicht so gedrängt am oberen Rand. */
#start-screen,
#start-screen,
#survey,
#final-summary,
#submit-section,
#start-screen {
  /*
   * Die Bereiche Start, Bewertung, Zusammenfassung und Abschicken
   * sollen viel vom vertikalen Raum nutzen und den Inhalt zentrieren.
   */
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  text-align: center;
  /*
   * Kein eigener Hintergrund – sie erben die Grundfarbe des Body (#d9d9d9).
   */
  background-color: transparent;
}

/* Teilnehmerauswahl-Seite: nutzt denselben Look wie die übrigen
   Inhaltsseiten. Dadurch wirkt sie konsistent und zentriert die
   Elemente vertikal. */
#participant-screen {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  text-align: center;
  background-color: transparent;
}

/* Logo auf der Teilnehmerseite: ähnlich wie Startbildschirm */
#participant-screen img {
  max-width: 300px;
  width: 60%;
  height: auto;
  margin-bottom: 20px;
}

/* Auswahlbuttons für Alleine / Gruppe: gleiche Akzentfarbe wie andere
   Hauptbuttons, aber mit fester Breite und angenehmem Abstand. */
#participant-choice button {
  background-color: #800000;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 24px;
  font-size: 1.1em;
  cursor: pointer;
}

/* Container der Auswahlbuttons horizontal ausrichten und verhindern,
   dass sich die Buttons über die gesamte Höhe strecken. */
#participant-choice {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Abstände innerhalb der Namenseingabe-Sektion */
#participant-name-section input {
  padding: 8px;
  font-size: 1em;
  width: 100%;
  max-width: 300px;
  margin: 10px auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

#participant-name-section label {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

/* Reserve vertical space for the fixed top logo on all Inhaltsseiten
   außer dem Startbildschirm. Dieser zusätzliche Innenabstand sorgt
   dafür, dass Titel, Mediaplayer und Buttons optisch unter dem Logo
   beginnen. */
#survey,
#final-summary,
#submit-section {
  padding-top: calc(30px + 140px);
}

/* Der Startbildschirm erhält einen individuellen Hintergrund und
   Farbgebung. Ein dunkles Banane-Motiv wird als Hintergrundbild
   verwendet. Die helle Schrift sorgt für ausreichenden Kontrast. */
#start-screen {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  text-align: center;
  /* Der Startbildschirm besitzt nun keinen Fotohintergrund mehr. Der
     Hintergrund entspricht dem Standard‑Seitenhintergrund und das
     Logo übernimmt die visuelle Rolle. */
  background: none;
  color: #333;
  text-shadow: none;
}

/* Die Button-Gruppe im Bewertungsbereich nebeneinander ausrichten */
#survey > div {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}

/* Eingabe- und Formularstile für den Namen */
form {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
}

input[type="text"] {
  padding: 8px;
  font-size: 1em;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin: 0 auto 20px auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Startbildschirm und Zusammenfassung sollen die gleiche Schrift- und
   Absatzeinstellungen verwenden wie der Rest der App. */
#start-screen,
#final-summary {
  max-width: 800px;
  margin: 0 auto;
}

/* Modal für die Auswahl zwischen zwei nahezu identischen Songs */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/*
 * Login‑Bildschirm: Zentriert Inhalte im vertikalen Raum und nutzt
 * denselben Look wie der Startbildschirm. Hier muss der Nutzer
 * zunächst einen PIN eingeben, um fortzufahren.
 */
#login-screen {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
  text-align: center;
  background-color: transparent;
}

#login-screen img {
  max-width: 300px;
  width: 60%;
  height: auto;
  margin-bottom: 20px;
}

#pin-input {
  padding: 10px;
  font-size: 1.2em;
  width: 200px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

#pin-error {
  color: #E74C3C;
  font-size: 0.9em;
}

.modal-content {
  /* Nutze einen sehr hellen Grauton im Pop‑Up, damit es sich vom Rest
     der Seite abhebt, ohne komplett weiß zu wirken. */
  background-color: #f5f5f5;
  position: relative;
  /*
   * Mehr Abstand nach oben schaffen, damit das BlckSwn‑Logo im
   * Pop‑Up deutlich vom einleitenden Text getrennt ist. Die
   * erste Zahl steht für den oberen Innenabstand; 20px für rechts,
   * unten und links bleiben unverändert. So hängt das Logo nicht
   * direkt an der Überschrift.
   */
  padding: 70px 20px 20px 20px;
  border-radius: 8px;
  max-width: 90%;
  width: 600px;
  text-align: left;
}

/* Logo im Gating‑Pop‑Up: erscheint oben rechts in der Modaldialogbox. */
.modal-logo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 120px;
  height: auto;
}

/* Container für die Optionen im Modal. Jede Option enthält den
   Songtitel, einen Audio‑Player und einen Auswahlknopf. */
#gating-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

#gating-options .option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

#gating-options .option button {
  align-self: flex-start;
  margin-top: 10px;
  /* Gleiche Akzentfarbe wie die Hauptschaltflächen für Konsistenz */
  background-color: #800000;
  color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Songliste in der finalen Zusammenfassung. Jeder Song wird als
   flex‑Zeile dargestellt, mit dem Titel links und dem Player rechts. */
#song-list .song-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}

/*
 * Kleines Logo oben rechts: Auf allen Seiten außer dem Startbildschirm
 * soll das BlckSwn‑Logo als dezenter Markenhinweis erscheinen. Per
 * JavaScript wird dieses Element erst sichtbar gemacht, sobald die
 * Umfrage gestartet wird. Durch die absolute Positionierung bleibt es
 * immer in der Ecke verankert.  
 */
#top-logo {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 150px;
  height: auto;
  z-index: 1000;
  /* Standardmäßig ausgeblendet – wird per JS eingeblendet */
  display: none;
}

/*
 * Drehe das SVG im neutralen Button um 90°. Dadurch zeigt der Daumen zur
 * Seite, was die neutrale Bewertung klar von „hoch“ und „runter“
 * abgrenzt. Der Drehpunkt liegt mittig des SVG.
 */
button.neutral svg {
  transform: rotate(90deg);
  transform-origin: center;
}

#song-list .song-item label {
  font-weight: normal;
  margin-bottom: 8px;
}

#song-list .song-item input[type="radio"] {
  margin-right: 8px;
}