/* ============================================================
   quiz.css – Kahoot-ähnliches Design für einekleinelernwelt.de
   Farben angelehnt an das Blau-Schema der Hauptseite
   ============================================================ */

/* Grundfarben der Website: #2980b9, #3498db */
:root {
  --blau-dunkel:   #1a5276;
  --blau-haupt:    #2980b9;
  --blau-hell:     #3498db;
  --blau-sehr-hell: #d6eaf8;

  /* Antwort-Farben (Kahoot-Style) */
  --rot:    #e74c3c;
  --blau:   #2980b9;
  --gelb:   #f39c12;
  --gruen:  #27ae60;

  --rot-hover:   #c0392b;
  --blau-hover:  #1a5276;
  --gelb-hover:  #d68910;
  --gruen-hover: #1e8449;

  --grau-hell: #f4f6f7;
  --grau:      #bdc3c7;
  --dunkel:    #2c3e50;
  --weiss:     #ffffff;

  --schatten: 0 4px 15px rgba(0, 0, 0, 0.15);
  --radius:   12px;
}

/* ============================================================
   Reset & Basis
   ============================================================ */
* {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

body {
  font-family:      'Segoe UI', Arial, sans-serif;
  background:       linear-gradient(135deg, var(--blau-dunkel) 0%, var(--blau-hell) 100%);
  min-height:       100vh;
  color:            var(--dunkel);
}

/* ============================================================
   Hauptcontainer
   ============================================================ */
.container {
  max-width:  900px;
  margin:     0 auto;
  padding:    20px;
}

/* ============================================================
   Header / Logo-Bereich
   ============================================================ */
.quiz-header {
  text-align:    center;
  padding:       30px 20px 20px;
  color:         var(--weiss);
}

.quiz-header h1 {
  font-size:      2.2rem;
  font-weight:    700;
  text-shadow:    0 2px 4px rgba(0,0,0,0.3);
  margin-bottom:  8px;
}

.quiz-header p {
  font-size:   1rem;
  opacity:     0.9;
}

/* ============================================================
   Karten / Panels
   ============================================================ */
.karte {
  background:    var(--weiss);
  border-radius: var(--radius);
  padding:       30px;
  box-shadow:    var(--schatten);
  margin-bottom: 20px;
}

.karte h2 {
  color:         var(--blau-dunkel);
  margin-bottom: 20px;
  font-size:     1.4rem;
  border-bottom: 3px solid var(--blau-hell);
  padding-bottom: 10px;
}

/* ============================================================
   Eingabefelder
   ============================================================ */
.eingabe-gruppe {
  margin-bottom: 16px;
}

.eingabe-gruppe label {
  display:       block;
  font-weight:   600;
  margin-bottom: 6px;
  color:         var(--blau-dunkel);
}

.eingabe-gruppe input,
.eingabe-gruppe select {
  width:         100%;
  padding:       12px 16px;
  border:        2px solid var(--grau);
  border-radius: 8px;
  font-size:     1rem;
  transition:    border-color 0.2s;
  background:    var(--weiss);
}

.eingabe-gruppe input:focus,
.eingabe-gruppe select:focus {
  outline:       none;
  border-color:  var(--blau-hell);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:        inline-block;
  padding:        14px 28px;
  border:         none;
  border-radius:  8px;
  font-size:      1rem;
  font-weight:    700;
  cursor:         pointer;
  transition:     transform 0.1s, box-shadow 0.2s, background 0.2s;
  text-align:     center;
  text-decoration: none;
  width:          100%;
}

.btn:active {
  transform: scale(0.97);
}

.btn-haupt {
  background:  var(--blau-haupt);
  color:       var(--weiss);
  box-shadow:  0 4px 12px rgba(41, 128, 185, 0.4);
}

.btn-haupt:hover {
  background:  var(--blau-dunkel);
  box-shadow:  0 6px 16px rgba(41, 128, 185, 0.5);
}

.btn-gruen {
  background:  var(--gruen);
  color:       var(--weiss);
  box-shadow:  0 4px 12px rgba(39, 174, 96, 0.4);
}

.btn-gruen:hover { background: var(--gruen-hover); }

.btn-rot {
  background:  var(--rot);
  color:       var(--weiss);
}

.btn-rot:hover { background: var(--rot-hover); }

.btn-grau {
  background:  var(--grau);
  color:       var(--dunkel);
}

.btn-grau:hover { background: #a9b4bb; }

/* ============================================================
   PIN-Anzeige (groß, für Beamer)
   ============================================================ */
.pin-anzeige {
  text-align:     center;
  background:     var(--blau-dunkel);
  color:          var(--weiss);
  border-radius:  var(--radius);
  padding:        30px;
  margin-bottom:  20px;
}

.pin-anzeige .pin-label {
  font-size:     1rem;
  opacity:       0.8;
  margin-bottom: 8px;
}

.pin-anzeige .pin-nummer {
  font-size:     4rem;
  font-weight:   900;
  letter-spacing: 10px;
  text-shadow:   0 3px 8px rgba(0,0,0,0.4);
}

/* ============================================================
   Spieler-Liste
   ============================================================ */
.spieler-liste {
  display:        flex;
  flex-wrap:      wrap;
  gap:            8px;
  margin-top:     12px;
  min-height:     50px;
}

.spieler-chip {
  background:    var(--blau-sehr-hell);
  color:         var(--blau-dunkel);
  padding:       6px 14px;
  border-radius: 20px;
  font-weight:   600;
  font-size:     0.9rem;
  animation:     erscheinen 0.3s ease;
}

@keyframes erscheinen {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Fragen-Anzeige
   ============================================================ */
.frage-bereich {
  text-align:    center;
  padding:       20px;
}

.frage-nummer {
  font-size:    0.9rem;
  color:        var(--blau-haupt);
  font-weight:  600;
  margin-bottom: 8px;
}

.frage-text {
  font-size:     1.5rem;
  font-weight:   700;
  color:         var(--dunkel);
  margin-bottom: 20px;
  line-height:   1.4;
}

/* ============================================================
   Timer
   ============================================================ */
.timer-bereich {
  text-align:    center;
  margin-bottom: 16px;
}

.timer-kreis {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          70px;
  height:         70px;
  border-radius:  50%;
  background:     var(--blau-haupt);
  color:          var(--weiss);
  font-size:      1.8rem;
  font-weight:    900;
  box-shadow:     var(--schatten);
  transition:     background 0.5s;
}

.timer-kreis.dringend {
  background: var(--rot);
  animation:  pulsieren 0.5s infinite alternate;
}

@keyframes pulsieren {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* ============================================================
   Antwort-Buttons (4 Farben, Kahoot-Style)
   ============================================================ */
.antworten-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-top:            16px;
}

.antwort-btn {
  padding:       20px 16px;
  border:        none;
  border-radius: var(--radius);
  font-size:     1rem;
  font-weight:   700;
  color:         var(--weiss);
  cursor:        pointer;
  transition:    transform 0.1s, opacity 0.2s;
  min-height:    80px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  text-align:    center;
  line-height:   1.3;
}

.antwort-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter:    brightness(1.1);
}

.antwort-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.antwort-btn:disabled {
  cursor:  not-allowed;
  opacity: 0.7;
}

.antwort-btn.a { background: var(--rot); }
.antwort-btn.b { background: var(--blau); }
.antwort-btn.c { background: var(--gelb); }
.antwort-btn.d { background: var(--gruen); }

.antwort-btn.richtig {
  box-shadow: 0 0 0 4px #2ecc71, 0 4px 12px rgba(46,204,113,0.5);
  transform:  scale(1.04);
}

.antwort-btn.falsch {
  opacity: 0.4;
}

/* ============================================================
   Fortschrittsbalken (Antwort-Statistik)
   ============================================================ */
.statistik {
  margin-top: 16px;
}

.statistik-zeile {
  display:       flex;
  align-items:   center;
  margin-bottom: 8px;
  gap:           10px;
}

.statistik-farbe {
  width:         16px;
  height:        16px;
  border-radius: 4px;
  flex-shrink:   0;
}

.statistik-balken-hintergrund {
  flex:          1;
  background:    var(--grau-hell);
  border-radius: 6px;
  height:        20px;
  overflow:      hidden;
}

.statistik-balken {
  height:        100%;
  border-radius: 6px;
  transition:    width 0.6s ease;
}

.statistik-anzahl {
  font-weight: 700;
  min-width:   30px;
  text-align:  right;
}

/* ============================================================
   Rangliste (Leaderboard)
   ============================================================ */
.rangliste {
  list-style: none;
}

.rangliste li {
  display:        flex;
  align-items:    center;
  padding:        12px 16px;
  margin-bottom:  8px;
  border-radius:  8px;
  background:     var(--grau-hell);
  font-weight:    600;
  transition:     background 0.3s;
}

.rangliste li:nth-child(1) { background: #fef9e7; border-left: 5px solid #f1c40f; }
.rangliste li:nth-child(2) { background: #f8f9fa; border-left: 5px solid #bdc3c7; }
.rangliste li:nth-child(3) { background: #fdf0e8; border-left: 5px solid #e67e22; }

.rang-platz {
  font-size:    1.2rem;
  width:        40px;
  text-align:   center;
}

.rang-name {
  flex: 1;
}

.rang-punkte {
  font-size:   1.1rem;
  color:       var(--blau-haupt);
}

/* ============================================================
   Feedback-Screen (richtig/falsch)
   ============================================================ */
.feedback {
  text-align:    center;
  padding:       30px;
  border-radius: var(--radius);
  margin-top:    16px;
}

.feedback.richtig {
  background: #eafaf1;
  border:     3px solid var(--gruen);
}

.feedback.falsch {
  background: #fdedec;
  border:     3px solid var(--rot);
}

.feedback-symbol {
  font-size:     3rem;
  margin-bottom: 10px;
}

.feedback h3 {
  font-size:     1.4rem;
  margin-bottom: 8px;
}

.feedback .punkte-anzeige {
  font-size:   2rem;
  font-weight: 900;
  color:       var(--blau-dunkel);
}

.feedback .erklaerung {
  margin-top:  12px;
  font-size:   0.95rem;
  color:       #555;
  font-style:  italic;
}

/* ============================================================
   Warte-Screen
   ============================================================ */
.warte-screen {
  text-align:  center;
  padding:     40px 20px;
  color:       var(--weiss);
}

.warte-screen h2 {
  font-size:     2rem;
  margin-bottom: 10px;
}

.warte-screen .spieler-name {
  font-size:     1.3rem;
  background:    rgba(255,255,255,0.2);
  display:       inline-block;
  padding:       8px 24px;
  border-radius: 30px;
  margin:        16px 0;
}

.warte-animation {
  display:        flex;
  justify-content: center;
  gap:            8px;
  margin-top:     20px;
}

.warte-punkt {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  background:    var(--weiss);
  animation:     huepfen 1.2s infinite;
}

.warte-punkt:nth-child(2) { animation-delay: 0.2s; }
.warte-punkt:nth-child(3) { animation-delay: 0.4s; }

@keyframes huepfen {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-16px); opacity: 1; }
}

/* ============================================================
   Fehlermeldungen
   ============================================================ */
.fehler-box {
  background:    #fdedec;
  border:        2px solid var(--rot);
  border-radius: 8px;
  padding:       12px 16px;
  color:         var(--rot);
  font-weight:   600;
  margin-top:    12px;
  display:       none;
}

.fehler-box.sichtbar {
  display: block;
}

/* ============================================================
   Trennlinie
   ============================================================ */
.trenner {
  text-align:   center;
  margin:       24px 0;
  color:        var(--grau);
  font-size:    0.9rem;
  position:     relative;
}

.trenner::before,
.trenner::after {
  content:    '';
  position:   absolute;
  top:        50%;
  width:      40%;
  height:     1px;
  background: var(--grau);
}

.trenner::before { left:  0; }
.trenner::after  { right: 0; }

/* ============================================================
   Responsive (Smartphone)
   ============================================================ */
@media (max-width: 600px) {
  .quiz-header h1   { font-size: 1.6rem; }
  .pin-nummer       { font-size: 2.8rem; letter-spacing: 6px; }
  .antworten-grid   { grid-template-columns: 1fr; }
  .frage-text       { font-size: 1.2rem; }
  .karte            { padding: 20px; }
  .antwort-btn      { min-height: 65px; }
}