body {
  background-color: black;
  color: #00FF00; /* klassisches DOS-Grün */
  font-family: 'Courier New', Courier, monospace;
  margin: 0; 
  padding: 20px;
}

header {
  color: #60e712;
  text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191, 1px 5px 1px #919191, 1px 6px 1px #919191, 1px 7px 1px #919191, 1px 8px 1px #919191, 1px 9px 1px #919191, 1px 10px 1px #919191, 1px 18px 6px rgba(16, 16, 16, 0.4), 1px 22px 10px rgba(16, 16, 16, 0.2), 1px 25px 35px rgba(16, 16, 16, 0.2), 1px 30px 60px rgba(16, 16, 16, 0.4);
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 80px;
  font-weight: bold;
  font-style: italic;
  border: 15px solid #00ff00;         /* grüner Rahmen */
  border-radius: 25px;             /* abgerundete Ecken */
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  color: white;                    /* weiße Schrift */
  text-align: center;
  user-select: none;               /* Text nicht markieren */
  box-shadow: 0px 8px 20px rgba(142, 207, 142, 0.836);
}

.heading {
  font-size: 18px;
  font-weight: bold;
  color: #00ff00;
  text-align: center;
  margin-bottom: 15px;
  border-bottom: 2px solid green;
  padding-bottom: 5px;
}

.glow-header {
  font-size: 80px;
  font-weight: bold;
  color: #c7d7ff; /* sanftes Blau */
  text-align: center;
  padding: 10px 20px;
  background: #111;
  border: 3px solid #445; /* dunkles Blau-Grau */
  border-radius: 10px;
  margin: 20px auto;
  width: fit-content;

  color: #00f7ff; /* Türkis */
  text-shadow:
    0 0 5px #00f7ff,
    0 0 10px #00f7ff,
    0 0 20px #00f7ff,
    0 0 30px #00c9cc;
  animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    text-shadow:
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor;
  }
  to {
    text-shadow:
      0 0 20px currentColor,
      0 0 30px currentColor,
      0 0 40px currentColor;
  }
}








.container {
  display: flex;
  gap: 10px;
}

.sidebar {
  background-color: black;
  border: 4px solid lime;
  border-radius: 15px;
  width: 200px;
  padding: 10px;
  margin: 0px;
  box-shadow: 0px 8px 20px rgba(0, 255, 0, 0.5);
  float: left;
}

.nav-heading {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding: 10px;
  border-radius: 10px;
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  margin-bottom: 15px;
  box-shadow: 0px 4px 10px rgba(255,255,255,0.3);
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.sidebar ul li {
  margin: 8px 0;
}

.sidebar ul li a {
  text-decoration: none;
  color: lime;
  font-weight: bold;
  display: block;
  padding: 5px 10px;
  border: 1px solid #0f0;
  border-radius: 8px;
  background-color: #111;
  transition: all 0.3s;
}

.sidebar ul li a:hover {
  background-color: #0f0;
  color: black;
}




main {
  border: 2px solid #00FF00;
  padding: 10px;
  width: 60%; /* mittlere Spalte groß */
}

aside {
  border: 2px solid #00FF00;
  padding: 10px;
  width: 20%; /* rechte Spalte klein */
  min-width: 150px;
}

/* blinkender Cursor */
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

.cursor {
  font-weight: bold;
  animation: blink 1s infinite;
}

/* Team Css */
.team-section {
  margin-top: 30px; /* Abstand zur Navigation */
  text-align: center;
  color: white; /* Schriftfarbe anpassen, je nach Hintergrund */
}

.team-section h2 {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  padding: 5px;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Lauftext-Container */
.lauftext {
  overflow: hidden;
  white-space: nowrap;
  width: 100%; /* volle Breite der Spalte */
  box-sizing: border-box;
  border: 2px solid #4CAF50; /* grüner Rahmen */
  border-radius: 10px;
  background-color: #000; /* schwarzer Hintergrund für Retro-Style */
}

/* Bild im Lauftext */
.lauftext img {
      width: 100px;
  height: 20px;
  border: 5px solid #0ae7f7;
  border-radius: 5px; /* Abgerundete Ecken für das Logo */
  display: inline-block;
  height: 80px; /* Bildhöhe anpassen */
  animation: scroll-left 15s linear infinite;
}

/* Keyframes für die Laufanimation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.datum-uhrzeit-box {
    background-color: #0000cd;
    width: 400px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 5px 29px 2px #fdfafa;
    text-align: center;
    color: #fdfcf8;
    font-size: 1.2rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
     border: 5px solid greenyellow;
  border-radius: 5px; /* Abgerundete Ecken für das Logo */
}


/* GEMA Css */
.gvl-section  {
    font-size: 25px;
  margin-top: 30px; /* Abstand zur Navigation */
  text-align: center;
  color: white; /* Schriftfarbe anpassen, je nach Hintergrund */
}

.gvl-section {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  padding: 5px;
  border-radius: 10px;
  font-weight: bold;
  margin-bottom: 10px;
}

.gema-logo {
  display: block;
  margin: 30px auto; /* zentriert es horizontal und gibt Abstand */
  max-width: 200px; /* Größe anpassen je nach Bedarf */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* schwebender Schatten */
  border-radius: 10px; /* abgerundete Ecken, optional */
  transition: transform 0.3s ease;
   padding: 15px;
}

.gema-logo:hover {
  transform: scale(1.05); /* Vergrößert sich beim Überfahren leicht */
}

/* Social Links */
.social-heading {
  margin-top: 30px;
  padding: 10px;
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 23px;
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.social-links a {
   text-decoration: none;
  color: lime;
  font-weight: bold;
  display: block;
  padding: 5px 10px;
  border: 1px solid #0f0;
  border-radius: 8px;
  background-color: #111;
  transition: all 0.3s;
}

.social-links a i {
  margin-right: 8px;
  font-size: 22px;
}
.social-links a:hover {
  background-color: #0f0;
  color: black;
}




main {
   margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Inhalt horizontal zentrieren */
   border: 4px solid lime;
  border-radius: 15px;
  
 
}
/* Bestehendes Webradio-IFrame beibehalten */
#webradio-iframe {
  width: 550px;
  height: 140px;
  background-color: #0af7e3;
  border-radius: 7px;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* optional für Tiefe */
}

.main-heading {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  color: white;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  width: 100%;                /* volle Breite des Elterncontainers */
  box-sizing: border-box;     /* wichtig, damit padding nicht Breite vergrößert */
  margin-bottom: 20px;
}

.main-heading h2 {
  margin: 0;
  font-size: 26px;
  text-shadow: 1px 1px 2px black;
}






/* Logo-Bereich zentrieren */
#logo {
  margin-top: 5px;
  text-align: center;
}

/* Dein Logo-Stil */
#logo img {
  
  width: 280px;
  height: 50px;
  border: 5px solid #0ae7f7;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* optional: Schatten */
}


/* IFrame-Stil */
.gespielte-lieder {
  
  
  margin: 0 auto;
  background-color: #0af7e3;
  border: 5px solid greenyellow;
  border-radius: 7px;
  padding: 15px;
  text-align: center;
}

/* IFrame selbst */
.gespielte-lieder-frame {
  width: 550px;
  height: 280px;
  border: none;
    
  border-radius: 50px;
}

/* Überschrift im gleichen Stil wie vorher */
.box-heading {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  color: white;
  padding: 10px;

  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  width: 100%;                /* volle Breite des Elterncontainers */
  box-sizing: border-box;     /* wichtig, damit padding nicht Breite vergrößert */
  margin-top: 7px;
}

/* Überschrift rechte Spalte */
.gradient-heading {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  color: white;
  background: rgb(17, 17, 17);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}




    .heading {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  border: 2px solid #c00d0d;
  border-radius: 5px; /* Abgerundete Ecken für Überschriften */
  padding: 5px;
  margin-bottom: 10px;
  background: linear-gradient(to right, violet, indigo, blue, green, rgb(190, 190, 38), orange, red);
  color: white; /* Textfarbe für bessere Lesbarkeit */
}

  
  

/* shoutbox*/
.event-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  color: #00ff00; /* klassisches DOS-Grün */
  font-family: 'Courier New', monospace;
}

.event-list li {
  margin-bottom: 15px;
  border-bottom: 1px solid #0f0;
  padding-bottom: 8px;
}

.event-title {
  font-weight: bold;
  font-size: 1.1rem;
}

.event-desc {
  font-size: 0.9rem;
  margin-top: 3px;
  color: #a0ffa0;
}



.event-button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 15px;
    background-color: black;
    border: 2px solid gold;
    color: gold;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-button:hover {
    background-color: gold;
    color: black;
}

    /* ===== Layout-Fix: kein Float in Flex-Layout ===== */
.container {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: nowrap;           /* verhindert, dass Spalten umbrechen */
}

.sidebar {
  /* float: left;  <-- ENTFERNEN! */
  flex: 0 0 220px;             /* feste Breite links */
  background-color: black;
  border: 4px solid lime;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0px 8px 20px rgba(0, 255, 0, 0.5);
}

main {
  flex: 1 1 auto;              /* Hauptspalte nimmt Restbreite */
  min-width: 0;                /* verhindert Überlauf */
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px solid lime;
  border-radius: 15px;
}

aside {
  flex: 0 0 320px;             /* feste Breite rechts */
  min-width: 280px;
  border: 2px solid #00FF00;
  padding: 10px;
}

/* ===== Login-Button ===== */
.btn-login {
  display: block;
  margin: 12px 0 18px 0;
  text-align: center;
  padding: 8px 10px;
  border: 2px solid #0f0;
  border-radius: 10px;
  background: #111;
  color: lime;
  font-weight: bold;
  text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn-login:hover {
  background: #0f0;
  color: #000;
  transform: translateY(-1px);
}

/* ===== Event-Box Stil ===== */

 .event-box {
  width: 100%;
  max-width: 750px;
  background: #0a0a0a;
  border: 3px solid gold;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
  margin: 18px 0;
}

.event-box-heading {
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  color: white;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.event-item {
  font-size: 18px; /* größere Schrift */
  border-left: 3px solid #39ff14;
  padding: 8px 10px;
  margin: 8px 0;
  background: #111;
  border-radius: 8px;
}

.event-item i {
  margin-right: 6px;
}

.event-date {
  color: #39ff14;
  font-weight: bold;
}

.event-title {
  color: #fff;
  font-weight: bold;
}

.event-desc {
  color: #cfcfcf;
}

.event-more {
  text-align: right;
  margin-top: 8px;
}

.event-button {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid #0f0;
  border-radius: 8px;
  color: #0f0;
  text-decoration: none;
  font-weight: bold;
}
.event-button:hover {
  background: #0f0;
  color: #000;
}

.event-error {
  color: #ff8080;
  font-weight: bold;
}

/* Events Box */
/* Events Box */
.events-box {
    background: linear-gradient(135deg, #222, #444);
    border: 3px solid gold;
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.6);
    color: white;
    font-family: Arial, sans-serif;
    max-width: 95%;
}

/* Überschrift */
.events-heading {
    font-size: 24px;
    font-weight: bold;
    color: gold;
    border-bottom: 2px solid gold;
    padding-bottom: 8px;
    margin-bottom: 15px;
    text-shadow: 0 0 8px gold, 0 0 15px gold;
    text-align: center;
}

/* Einzelne Event-Zeilen */
.event-item {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-item:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px gold;
}

/* Datum */
.event-date {
    font-size: 20px;
    font-weight: bold;
    color: #0f0; /* Grün für Datum */
    text-shadow: 0 0 6px #0f0;
}

/* Titel */
.event-title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

/* Beschreibung */
.event-desc {
    font-size: 18px;
    color: #ddd;
    margin-top: 5px;
    display: block;
}

/* Button unten */
.event-more {
    text-align: center;
    margin-top: 15px;
}

.event-button {
    background: gold;
    color: black;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s ease;
}

.event-button:hover {
    background: orange;
}



/* Station Info Box */
.station-info-box {
    background: linear-gradient(135deg, #111, #222);
    border: 3px solid #1e90ff;
    border-radius: 15px;
    padding: 20px;
    margin-top: 25px;
    box-shadow: 0px 0px 15px rgba(30, 144, 255, 0.7);
    color: white;
    font-family: "Arial", sans-serif;
    max-width: 95%;
    text-align: center;
}

.station-info-heading {
    font-size: 24px;
    font-weight: bold;
    color: #1e90ff;
    border-bottom: 2px solid #1e90ff;
    padding-bottom: 10px;
    margin-bottom: 15px;
    text-shadow: 1px 1px 4px black;
}

.station-info-date {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
    font-style: italic;
}

.station-info-text {
    font-size: 19px;
    line-height: 1.6;
    color: #fff;
    text-shadow: 0px 0px 6px rgba(0,0,0,0.6);
}

/* Events Box */
.events-box {
    background: linear-gradient(135deg, #222, #444);
    border: 3px solid gold;
    border-radius: 12px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0px 0px 15px rgba(255, 215, 0, 0.6);
    color: white;
    font-family: Arial, sans-serif;
    max-width: 95%;
}

.events-heading {
    font-size: 1.6em;
    font-weight: bold;
    color: gold;
    border-bottom: 2px solid gold;
    padding-bottom: 8px;
    margin-bottom: 10px;
    text-shadow: 1px 1px 4px black;
}

.event-item {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.event-date {
    font-weight: bold;
    color: #ffd700;
}

.event-title {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-top: 4px;
}

.event-desc {
    font-size: 15px;
    color: #eee;
}