/* Radio Satisfaction Design – style.css */

/* Grundlayout */

body {

  margin: 0;

  padding: 0;

  font-family: 'Segoe UI', sans-serif;

  background: linear-gradient(to right, #1e1e2f, #2c2c3f);

  color: #fff;

}

/* Überschriften */

h1, h2, h3 {

  text-align: center;

  margin-top: 1rem;

  color: #e91e63;

}

/* Container für Karten */

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

  padding: 1rem;

}

/* Radio-Karten */

.radio-card {

  background: #2a2a3a;

  border-radius: 10px;

  padding: 1rem;

  width: 300px;

  box-shadow: 0 0 10px rgba(0,0,0,0.5);

  transition: transform 0.3s, box-shadow 0.3s;

}

.radio-card:hover {

  transform: scale(1.03);

  box-shadow: 0 0 15px rgba(255, 64, 129, 0.6);

}

/* Banner-Bilder */

.radio-card img {

  width: 100%;

  border-radius: 5px;

  margin-bottom: 0.5rem;

}

/* Audio/Video */

audio, video {

  width: 100%;

  margin-top: 0.5rem;

  border-radius: 5px;

}

/* Buttons */

.vote-btn {

  background: #e91e63;

  color: white;

  border: none;

  padding: 0.4rem 0.8rem;

  margin-top: 0.6rem;

  cursor: pointer;

  border-radius: 5px;

  font-size: 0.9rem;

  font-weight: bold;

  display: inline-block;

  width: fit-content;

  max-width: 80%;

  transition: background 0.3s;

}

.vote-btn:hover {

  background: #c2185b;

}

/* Button Wrapper */

.button-wrapper {

  text-align: center;

}

/* Formulare */

form label {

  display: block;

  margin-top: 0.8rem;

  margin-bottom: 0.2rem;

  font-weight: bold;

  color: #ffccff;

}

/* Links */

a {

  color: #ff4081;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

/* Responsive Design */

@media (max-width: 600px) {

  .radio-card {

    width: 90%;

  }

  .container {

    flex-direction: column;

    align-items: center;

  }

}