/* Allgemeine Hintergrundfarbe */
body {
  background-color: #161616; /* Dunkler Hintergrund für die gesamte Seite */
  color: #fff; /* Weiße Schriftfarbe für besseren Kontrast */
  padding-top: 150px; /* Abstand zwischen dem Header und dem Seiteninhalt */
  padding-bottom: 50px; /* Abstand zwischen dem Footer und dem Seiteninhalt */
}

/* Header und Footer */
.header {
  background-color: #222222; /* Dunkelgrauer Hintergrund für den Header */
  position: fixed; /* Fixierung des Headers oben auf der Seite */
  top: 0; /* Positionierung am oberen Rand */
  left: 0; /* Ausrichtung am linken Rand */
  width: 100%; /* Volle Breite des Headers */
  z-index: 950; /* Sicherstellen, dass der Header über anderen Elementen liegt */
  padding: 10px; /* Innenabstand für den Inhalt des Headers */
  text-align: center; /* Zentriert den Text im Header */
  height: 120px; /* Höhe des Headers */
  display: flex; /* Flexbox-Layout für die Ausrichtung des Inhalts */
  justify-content: center; /* Zentrierung horizontal */
  align-items: center; /* Zentrierung vertikal */
}

.footer {
  background-color: #ca2426; /* Roter Hintergrund für den Footer */
  position: fixed; /* Fixierung des Footers unten auf der Seite */
  bottom: 0; /* Positionierung am unteren Rand */
  left: 0; /* Ausrichtung am linken Rand */
  width: 100%; /* Volle Breite des Footers */
  text-align: center; /* Zentrierung des Texts im Footer */
  color: #fff; /* Weiße Schriftfarbe */
  padding: 2px; /* Innenabstand des Footers */
}

/* Logo in der Mitte */
.logo-image {
  max-width: 450px; /* Maximale Breite des Logos */
  max-height: 120px; /* Maximale Höhe des Logos */
}

/* Hamburger Menü */
.hamburger-menu {
  position: absolute; /* Absolute Positionierung für flexible Platzierung */
  right: 20px; /* Abstand vom rechten Rand */
  top: 15px; /* Abstand vom oberen Rand */
  border-radius: 5px; /* Abgerundete Ecken */
}

.navbar-toggler {
  background-color: #ca2426; /* Hintergrundfarbe des Hamburger-Icons */
  border: none; /* Entfernt den Rahmen */
  color: #fff; /* Weiße Icon-Farbe */
  border-radius: 5px; /* Abgerundete Ecken für das Icon */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox%3D%270 0 30 30%27%3E%3Cpath stroke%3D%27rgba%280, 0, 0, 1%29%27 stroke-width%3D%272%27 d%3D%27M4 7h22M4 15h22M4 23h22%27/%3E%3C/svg%3E");
}

.navbar-collapse {
  background-color: #ca2426; /* Hintergrundfarbe des geöffneten Menüs */
  padding: 15px; /* Innenabstand des Menüs */
  border-radius: 5px; /* Abgerundete Ecken */
}

.nav-link {
  color: #fff; /* Weiße Schriftfarbe für die Links */
  font-size: 1.2em; /* Vergrößerte Schrift für bessere Lesbarkeit */
  margin-bottom: 10px; /* Abstand zwischen den Links */
  display: flex; /* Flexbox-Layout für Icon und Text */
  align-items: center; /* Vertikale Ausrichtung der Icons */
}

.nav-link i {
  margin-right: 10px; /* Abstand zwischen Icon und Text */
  font-size: 1.4em; /* Vergrößerte Icons */
}

/* Styling der Tabelle */
.table {
  margin-top: 20px; /* Zusätzlicher Abstand zur Vermeidung von Überlappungen */
}

/* Footer Fixierung */
.footer p {
  margin: 0; /* Entfernt Außenabstand bei Absätzen im Footer */
}

/* Mittige Ausrichtung der Tabellenzellen für Punkte */
.table td {
  text-align: center; /* Zentriert den Text horizontal */
  vertical-align: middle; /* Zentriert den Text vertikal */
}

/* Optionale Anpassung: Überschriftzellen ebenfalls zentrieren */
.table th {
  text-align: center; /* Zentriert den Text in Headerzellen */
}

/* Auswahlfeld für Jahre */
.year-select {
  width: 150px; /* Breite des Auswahlfelds */
  display: inline-block; /* Ermöglicht Inline-Positionierung */
}
label.year-label {
  font-size: 24px; /* Schriftgröße des Labels */
}

/* Abstand zwischen Label und Auswahlfeld */
.year-label {
  margin-right: 10px; /* Abstand für visuelle Klarheit */
}

/* Abstand zwischen der Überschrift und dem Label */
.container .year-label {
  margin-top: 5px; /* Vertikaler Abstand */
  display: inline-block; /* Inline-Positionierung */
}

.year-select {
  margin-left: 10px; /* Optionaler Abstand zur Vergrößerung */
}

/* Reduzierte Margen für bestimmte Abstände */
.my-5 {
  margin-top: 0rem !important; /* Entfernt oberen Abstand */
  margin-bottom: 1rem !important; /* Setzt unteren Abstand */
}

/* Modal-Inhalt */
.modal-content {
  background-color: #fff; /* Weißer Hintergrund für das Modal */
  color: #000; /* Schwarzer Text */
  border-radius: 10px; /* Abgerundete Ecken */
  padding: 20px; /* Innenabstand für den Inhalt */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); /* Schatten für 3D-Effekt */
}

/* Modal-Titel */
.modal-title {
  color: #000; /* Schwarzer Text für den Titel */
  font-weight: bold; /* Fettgedruckter Text */
  text-align: center; /* Zentrierung des Titels */
}

/* Input-Label im Modal */
.modal-content label {
  color: #000; /* Schwarzer Text für die Labels */
  font-size: 14px; /* Lesbare Schriftgröße */
  margin-bottom: 5px; /* Abstand zum Eingabefeld */
}

/* Eingabefelder im Modal */
.modal-content .form-control {
  background-color: #f8f9fa; /* Hellgrauer Hintergrund */
  color: #000; /* Schwarzer Text */
  border: 1px solid #ced4da; /* Standardrahmen von Bootstrap */
  border-radius: 5px; /* Abgerundete Ecken */
}

/* Eingabefelder: Fokus-Zustand */
.modal-content .form-control:focus {
  border-color: #80bdff; /* Blaue Umrandung bei Fokus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Leuchtender Schatten */
}

/* Login-Button */
.modal-content .btn {
  background-color: #007bff; /* Bootstrap-Blau für den Button */
  color: #fff; /* Weißer Text */
  border: none; /* Entfernt den Rahmen */
  font-weight: bold; /* Fettgedruckter Text */
  padding: 8px 15px; /* Innenabstand für die Buttons */
  border-radius: 5px; /* Abgerundete Ecken */
  width: 100%; /* Volle Breite */
}

/* Login-Button: Hover-Zustand */
.modal-content .btn:hover {
  background-color: #0056b3; /* Dunkleres Blau bei Hover */
}

/* Login-Button: Fokus-Zustand */
.modal-content .btn:focus {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blaue Leucht-Umrandung */
}

/* Einblendung für die DB-Verbindung nur auf der index.php */
.toast-container {
  position: fixed; /* Fixiert den Toast-Container */
  bottom: 20px; /* Abstand vom unteren Rand */
  left: 20px; /* Abstand vom linken Rand */
  z-index: 1050; /* Oberhalb anderer Elemente */
}

/* Tabellenzeilen abwechselnd einfärben */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9; /* Hellgraue Hintergrundfarbe für ungerade Zeilen */
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #e9ecef; /* Etwas dunkleres Grau für gerade Zeilen */
}

/* Angepasste Klassen für das Markieren von Siegen und schnellsten Runden */
.race-primary {
  background-color: #007bff !important; /* Blau für Sieger */
  color: white !important; /* Weiße Schriftfarbe */
  text-align: center; /* Zentrierter Text */
  font-weight: bold; /* Fettgedruckter Text */
}

.fastest-lap-only {
  background-color: #dc3545 !important; /* Rot für schnellste Runde */
  color: white !important; /* Weiße Schriftfarbe */
  text-align: center; /* Zentrierter Text */
  font-weight: bold; /* Fettgedruckter Text */
}

/* Stil für Zellen mit durchgängig blauem Hintergrund und rotem Kreis um die Zahl */
.winner-fastest-lap {
  background-color: #007bff !important; /* Blauer Hintergrund */
  color: white !important; /* Weiße Schriftfarbe */
  text-align: center; /* Zentrierter Text */
  position: relative; /* Ermöglicht absolute Positionierung der Kinder */
  font-weight: bold; /* Fettgedruckter Text */
}

/* Roter Kreis mit Zahl */
.winner-fastest-lap span {
  background-color: #dc3545; /* Roter Hintergrund für den Kreis */
  color: white; /* Weiße Schriftfarbe */
  border-radius: 50%; /* Runde Form */
  padding: 4px 8px; /* Abstand für Kreisform */
  display: inline-block; /* Block-Element mit Inline-Ausrichtung */
  position: absolute; /* Absolute Positionierung */
  top: 50%; /* Vertikal zentriert */
  left: 50%; /* Horizontal zentriert */
  transform: translate(-50%, -50%); /* Exakte Zentrierung */
  z-index: 1; /* Über anderen Elementen */
  min-width: 28px; /* Mindestbreite für den Kreis */
  text-align: center; /* Zentrierung des Textes im Kreis */
  line-height: 1.2; /* Vertikale Ausrichtung des Textes */
}

/* Überschrift */
h1 {
  text-align: center; /* Zentriert den Text */
}

/* Zeitstempel */
#timestamp {
  margin-bottom: 15px; /* Abstand nach unten */
  font-weight: bold; /* Fettgedruckter Text */
}

/* Flexibles Layout für das Admin-Formular */
.container {
  max-width: 900px; /* Maximale Breite des Containers */
  margin: 0 auto; /* Zentriert den Container */
  padding-top: 20px; /* Abstand nach oben */
}

/* Layout für die Formularelemente */
#adminForm .row {
  margin-bottom: 15px; /* Abstand zwischen den Zeilen */
}

/* Admin Formular zentrieren */
.admin-form-container {
  max-width: 900px; /* Maximale Breite */
  margin: 0 auto; /* Zentriert den Container */
  padding-top: 20px; /* Abstand nach oben */
}

/* Abstand zwischen den Buttons */
.me-2 {
  margin-right: 10px; /* Abstand nach rechts */
}

label {
  color: #fff; /* Weiße Schriftfarbe */
}

.form-check-inline .form-check-label {
  margin-left: 3px; /* Abstand zwischen Checkbox und Text "SR" */
}

/* Zusätzlicher Abstand bei Buttons */
.d-flex {
  margin-top: 20px; /* Abstand nach oben */
}

/* Dubletten-Zeilen deutlich markieren */
table.table tr.duplicate-row td {
    background-color: #ffcccc !important;  /* hellrot */
    font-weight: bold;
    color: #000000; /* dunkler Rotton für den Text */
}

/* Verbesserungen für mobile Geräte */
@media (max-width: 768px) {
  /* Logo anpassen */
  .logo-image {
    max-width: 75%; /* Verkleinerung des Logos */
    max-height: 80px; /* Reduzierte Höhe */
    left: 0 auto; /* Zentriert das Logo */
    display: block; /* Block-Anzeige für mobiles Layout */
  }

  /* Header Höhe und Padding anpassen */
  .header {
    height: 100px; /* Reduzierte Höhe des Headers */
    padding-top: 5px; /* Weniger Innenabstand oben */
    padding-bottom: 5px; /* Weniger Innenabstand unten */
  }

  /* Hamburger-Menü Position und Größe */
  .hamburger-menu {
    position: absolute; /* Absolute Positionierung */
    right: 10px; /* Weniger Abstand rechts */
    top: 10px; /* Weniger Abstand oben */
  }

  .navbar-toggler {
    background-color: #ca2426; /* Hintergrundfarbe */
    padding: 5px 10px; /* Weniger Innenabstand */
    font-size: 1.2em; /* Kleinere Schriftgröße */
  }

  .navbar-toggler-icon {
    width: 20px; /* Kleinere Breite des Icons */
    height: 20px; /* Kleinere Höhe des Icons */
  }

  /* Menu-Links Styling in der mobilen Ansicht */
  .navbar-collapse {
    padding: 10px; /* Weniger Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    text-align: center; /* Zentrierung der Links */
  }

  .nav-link {
    font-size: 1em; /* Kleinere Schriftgröße */
    padding: 8px 0; /* Weniger Abstand */
  }

  /* Tabelle an den Bildschirm anpassen */
  .table-responsive {
    overflow-x: auto; /* Horizontal scrollbare Tabelle */
  }

  /* Button und Textgrößen im Formular für mobile Ansicht */
  .btn {
    font-size: 1em; /* Kleinere Schriftgröße */
    padding: 8px 12px; /* Weniger Innenabstand */
  }

  label,
  h1 {
    font-size: 1.5em; /* Größere Schriftgröße für Texte */
    text-align: center; /* Zentrierung */
  }

  /* Container für mobile Ansicht anpassen */
  .container {
    padding: 0 10px; /* Weniger Innenabstand */
  }
  .modal-content {
    padding: 15px; /* Weniger Innenabstand für kleinere Geräte */
  }

  .modal-title {
    font-size: 18px; /* Größere Schriftgröße für den Titel */
  }

  .modal-content .btn {
    font-size: 16px; /* Größere Schrift für Buttons */
  }
}
#infoMessage {
  transition: opacity 0.5s ease;
}