body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('boxen/background.jpg'); /* Hintergrundbild wie beim Sendeplan */
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    color: #f3f4f6; /* Helle Schriftfarbe für guten Kontrast */
}

header {
    background: transparent; /* Optional: transparent oder passend zum Hintergrund */
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

nav a {
    color: #f3f4f6;
    text-decoration: none;
    margin: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Abstand zwischen Icon und Text */
}

nav a:hover {
    color: #c7822c; /* Goldton passend zum Sendeplan */
}

nav a i {
    font-size: 1.1em;
    color: inherit; /* Icon übernimmt Linkfarbe */
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 160px); /* Höhe anpassen für Header und Footer */
}

.login-container {
    background-color: rgba(74, 54, 14, 0.85); /* Dunkles Messing-Braun mit Transparenz */
    border-radius: 8px;
    padding: 2rem;
    width: 320px;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    color: #f3f4f6;
    text-align: center;
}

.login-container h2 {
    margin-bottom: 20px;
}

.login-container label {
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

/* Wrapper für Input + Icon */
.input-icon {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

.input-icon input[type="text"],
.input-icon input[type="password"] {
    width: 100%;
    padding: 10px 2.5em 10px 10px; /* Rechts Platz für Icon */
    border: 1px solid #c7822c;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.1);
    color: #f3f4f6;
    box-sizing: border-box;
    font-size: 1rem;
    height: 40px;
}

.input-icon i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #c7822c; /* Goldton passend zum Design */
    font-size: 1.2em;
    pointer-events: none; /* Icon nicht klickbar */
}

.login-container input[type="text"]::placeholder,
.login-container input[type="password"]::placeholder {
    color: #d9cba3;
}

.login-container input[type="submit"] {
    background: #c7822c; /* Goldton */
    color: #1a1a1a;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    font-weight: bold;
    width: 100%;
    font-size: 1rem;
}

.login-container input[type="submit"]:hover {
    background: #a66f22;
}

.error {
    color: #ff6b6b;
    margin-bottom: 15px;
}

.tagline {
  font-family: 'Segoe UI Variable', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  font-optical-sizing: auto; /* Optimiert Lesbarkeit bei großen Schriftgrößen */
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.2;
  color: #f3d27a; /* warmes Gold */
  text-align: center;
  margin: 2rem auto;
  max-width: 600px;
  user-select: none;
  position: relative;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 5px rgba(243, 210, 122, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(90deg, #f3d27a 0%, #c7822c 50%, #f3d27a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
}

/* Zweite Zeile etwas kleiner und dezenter */
.tagline p:nth-child(2) {
  font-weight: 500;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: #d9b94a;
  margin-top: 0.3rem;
  letter-spacing: 0.1em;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: initial;
}

/* Sanfter Glanzlauf über den Text */
@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Optional: leichter Puls-Effekt */
.tagline:hover {
  animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
  0% {
    text-shadow:
      0 0 5px rgba(243, 210, 122, 0.7),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
  100% {
    text-shadow:
      0 0 15px rgba(243, 210, 122, 1),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

/* Footer wird über css/footer.css geladen und passt sich automatisch an */