:root {
  --bg: #0a0a0f;
  --primary: #1e90ff;       /* Das schicke Blau */
  --secondary: #11121a;     /* Dunkler Hintergrund für Boxen/Tabs */
  --text: #e0e0e0;
  --accent: #1e90ffcc;
  --font: 'Inter', sans-serif;
  --danger: #cc0000;        /* Rot für den Stop-Button */
}

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

body { 
  font-family: var(--font); 
  background: var(--bg); 
  color: var(--text); 
  height: 100vh; 
  overflow: hidden; 
}

/* Haupt-Container der App */
.app-container { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
  padding: 16px; 
}

/* Header & Stationsanzeige */
header { 
  text-align: center; 
  margin-bottom: 15px; 
}

header h1 {
  color: var(--primary);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 5px;
}

#tvCurrentStation { 
  color: var(--primary); 
  font-size: 18px; 
  font-weight: 600;
}

/* Tab-Navigation oben */
.tabs { 
  display: flex; 
  background-color: var(--secondary); 
  border: 1px solid #222;
  border-radius: 8px; 
  margin-bottom: 15px; 
  padding: 4px;
}

.tab-btn { 
  flex: 1; 
  padding: 12px; 
  border: none; 
  background: none; 
  color: var(--text);
  font-weight: bold; 
  cursor: pointer; 
  border-radius: 6px; 
  transition: background-color 0.3s, color 0.3s;
}

/* Aktiver Tab leuchtet jetzt Blau statt Rot */
.tab-btn.active { 
  background-color: var(--primary); 
  color: white; 
}

/* Scrollbarer Bereich für die Senderliste */
.scroll-view { 
  flex: 1; 
  overflow-y: auto; 
  margin-bottom: 10px; 
}

#stationContainer { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}

/* Die Sender-Buttons im dunklen Box-Design */
.station-button { 
  padding: 15px; 
  background: var(--secondary); 
  color: var(--text);
  border: 1px solid #222; 
  border-radius: 8px; 
  font-size: 16px; 
  text-align: left;
  cursor: pointer; 
  transition: background-color 0.2s, border-color 0.2s;
}

.station-button:hover {
  background: #161722;
  border-color: var(--primary);
}

/* Stop-Button (bleibt als Warnfarbe Rot, passt aber zum Darkmode) */
#btnStop { 
  padding: 15px; 
  background: var(--danger); 
  color: white; 
  border: none; 
  border-radius: 8px; 
  font-weight: bold; 
  width: 100%; 
  cursor: pointer; 
  transition: opacity 0.2s;
}

#btnStop:hover {
  opacity: 0.9;
}

/* Feedback-Formular */
.feedback-form { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}

#etFeedback { 
  height: 150px; 
  padding: 12px; 
  background: var(--secondary);
  color: var(--text);
  border-radius: 8px; 
  border: 1px solid #333; 
  font-family: var(--font);
  font-size: 16px; 
  resize: none;
  outline: none;
  transition: border-color 0.3s;
}

#etFeedback:focus {
  border-color: var(--primary);
}

/* Feedback Absenden-Button in Blau */
#btnSendFeedback { 
  padding: 15px; 
  background: var(--primary); 
  color: white; 
  border: none; 
  border-radius: 8px; 
  font-weight: bold; 
  font-size: 16px;
  cursor: pointer; 
  transition: background-color 0.3s;
}

#btnSendFeedback:hover { 
  background: var(--accent); 
}