/* 
 * Childbase Stylesheet
 * Dieses Stylesheet definiert das Design für die Unterseiten der Website
 * Es verwendet ein dunkles Farbschema mit Akzenten in Rot und Orange
 */

/* Globale Farbpalette */
:root {
  --text: #f6efef;      /* Heller Text für dunklen Hintergrund */
  --background: #000000; /* Schwarzer Hintergrund */
  --primary: #d72323;    /* Kräftiges Rot als Hauptfarbe */
  --secondary: #3f3737;  /* Dunkles Grau als Sekundärfarbe */
  --accent: #443dff;     /* Blaue Akzentfarbe */
  --border-color: #ccc;
  --light-text: #fff;
  --border-radius: 10px;
  --hover-color: #f5f5f5;
  --secondary-bg: #f0f0f0;
}

/* Formular-Styling */
#login_user_form,
#register_user_form {
  /* Abstände für Formulare */
  padding-left: 20px;
  padding-right: 20px;
}

/* Überschriften-Styling */
h1 {
  /* Große Schriftgröße für Überschriften */
  font-size: 100px;
}

/* Grundlegendes Body-Styling */
body {
  /* Hintergrundfarbe und Textfarbe */
  background-color: var(--background);
  color: var(--text);
  /* Schriftfamilie */
  font-family: 'Bebas Neue', sans-serif;
}

/* Hauptcontainer-Layout */
main {
  /* Flexbox-Layout für Hauptcontainer */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Header und Navigation */
header {
  /* Zentrieren von Header-Inhalten */
  justify-content: center;
  display: grid;
  /* Hohe Z-Index für Header */
  z-index: 9999;
}

/* Logo-Styling */
header #logo {
  /* Breite und Höhe des Logos */
  width: 100px;
  height: auto;
  /* Opazität und Übergangseffekt */
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
}

/* Navigationsleiste mit Glasmorphismus-Effekt */
header nav {
  /* Flexbox-Layout für Navigation */
  justify-content: space-between;
  position: relative;
  /* Höhe und Breite der Navigationsleiste */
  height: 60px;
  width: auto;
  display: flex;
  align-items: center;
  /* Abstand zur oberen Seite */
  top: 100px;
  /* Abstand zum unteren Rand */
  margin-bottom: 150px;
  /* Glasmorphismus-Effekt */
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: 1s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.2s;
}

/* Navigation Links */
header nav a {
  /* Textfarbe und Dekoration */
  color: #fff;
  text-decoration: none;
  /* Schriftgröße und -stärke */
  font-weight: 700;
  padding: 10px 16px;
  font-size: 18px;
  letter-spacing: 1.8px;
  /* Übergangseffekt */
  transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.6s, 0.3s color ease;
}

header nav a:hover {
  /* Textfarbe bei Hover */
  color: #000;
}

/* Seiteninformationen */
.PageInfo {
  /* Textausrichtung und Abstand */
  text-align: center;
  padding-bottom: 20px;
}

/* Spielplan-Sektion */
.image-container {
  /* Flexbox-Layout für Spielplan */
  display: flex;
  justify-content: center;
  padding: 1.5%;
  /* Gradient-Hintergrund */
  background: linear-gradient(180deg, rgba(0,0,0,1) 9%, rgba(215,35,35,1) 49%, rgba(0,0,0,1) 90%);
}

.spielplan-png {
  /* Maximale Breite und Höhe */
  max-width: 90%;
  height: auto;
}

/* Spielplan Styles */
.spielplan-container .table td, 
.spielplan-container .table th {
    vertical-align: middle;
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.spielplan-container .card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.spielplan-container .card-header {
    background: var(--primary);
    color: var(--light-text);
    padding: 1rem;
    border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
}

.spielplan-container .card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.spielplan-container .table-hover tbody tr:hover {
    background-color: var(--hover-color);
}

.spielplan-container .thead-light th {
    background-color: var(--secondary-bg);
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.impressum-container h2{
    color: #f6efef;
}

@media (max-width: 768px) {
    .spielplan-container .table {
        font-size: 0.9rem;
    }
    
    .spielplan-container .card-header h3 {
        font-size: 1.2rem;
    }
}

/* Berichts-Container */
.bericht-container {
  /* Abstand zum Rand */
  margin: 20px;
}

/* Berichtsliste mit Neumorphismus-Effekt */
.berichtsliste li {
  /* Abstände und Rundungen */
  padding: 5px;
  border-radius: 20px;
  /* Hintergrundfarbe und Schatten */
  background: #6f5d6d;
  box-shadow: inset 30px 30px 61px #5e4f5d,
              inset -30px -30px 61px #806b7d;
  /* Schriftgröße */
  font-size: 3rem;
  /* Abstände */
  margin: 10px 0;
}

/* News-Slider */
#slider {
  /* Höhe und Rundungen */
  height: 100px;
  border-radius: 80px;
  /* Hintergrundbild */
  background-image: linear-gradient(to top right, #3f3737, #0000);
  /* Flexbox-Layout */
  display: flex;
  justify-content: center;
  align-items: start;
  /* Abstand zum Rand */
  margin: 50px;
}

/* News-Karten */
#slider .news_card {
  /* Flexbox-Layout für News-Karten */
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  /* Positionierung */
  position: absolute;
  /* Hintergrundfarbe und Rundungen */
  background-color: #eee7e7;
  border: solid;
  border-radius: 10px;
  /* Rote Leuchteffekt-Box-Shadow */
  -webkit-box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  -moz-box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  /* Abstand zum Rand */
  margin: 50px;
}

/* News-Karten Styling */
#slider .news_card h2 {
  /* Textausrichtung und Farbe */
  align-items: center;
  color: orange;
  /* Schriftgröße */
  font-size: xx-large;
}

#slider .news_card p {
  /* Abstand zum Rand */
  margin: 20px;
  /* Textfarbe */
  color: #000;
}

#slider .news_card .date {
  /* Textausrichtung */
  text-align: right;
}

/* Slider-Navigation */
#up, #down {
  /* Positionierung */
  position: absolute;
  /* Textfarbe und Hintergrundfarbe */
  color: #ffff;
  background-color: transparent;
  /* Schriftgröße und -stärke */
  font-size: xx-large;
  font-family: monospace;
  font-weight: bold;
  /* Abstand zum Rand */
  left: 40px;
  /* Z-Index */
  z-index: 100;
}

#down {
  /* Positionierung */
  left: unset;
  right: 40px;
}

/* Team-Sektion */
main h1 {
  /* Textfarbe und Abstand */
  color: orange;
  margin-bottom: 30px;
}

/* Team-Container */
#team1, #team2 {
  /* Rundungen und Schatten */
  border-radius: 80px;
  -webkit-box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  -moz-box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  box-shadow: 0px 0px 181px 51px rgba(255,46,46,0.9);
  /* Höhe und Breite */
  height: 80vh;
  width: 200px;
  /* Überlappung verhindern */
  overflow: hidden;
  /* Flexbox-Layout */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Abstand zum Rand */
  margin: 50px;
  margin-bottom: 100px;
}

/* Team-Karussell */
#team1 .carousel-container, #team2 .carousel-container {
  /* Überlappung verhindern */
  overflow: hidden;
  /* Höhe */
  height: 100px;
  /* Flexbox-Layout */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Team-Karten */
#team1 .card, #team2 .card {
  /* Positionierung */
  position: absolute;
  /* Hintergrundfarbe und Rundungen */
  background: white;
  border-radius: 10px;
  /* Schatten */
  box-shadow: 0 4px 8px rgba(143, 12, 12, 0.1);
  /* Flexbox-Layout */
  flex-shrink: 0;
  /* Breite */
  width: 200px;
  /* Textausrichtung */
  text-align: center;
  /* Skalierung */
  transform: scale(0.8);
  /* Z-Index */
  z-index: 99;
  /* Positionierung */
  left: calc(50% - 100px);
  /* Überlappung verhindern */
  overflow: hidden;
}

/* Team-Karten Bilder */
#team1 .card img, #team2 .card img {
  /* Breite und Höhe */
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  /* Überlappung verhindern */
  overflow: hidden;
}

/* Team-Info-Bereich */
#team1 .card .info, #team2 .card .info {
  /* Textfarbe und Abstand */
  color: #000;
  padding: 15px;
  /* Überlappung verhindern */
  overflow: hidden;
}

/* Team-Info Tabellen */
#team1 .info tr, #team2 .info tr {
  /* Trennlinie */
  border-bottom: 1px solid #000;
}

#team1 .info tr:last-child, #team2 .info tr:last-child {
  /* Trennlinie entfernen */
  border-bottom: none;
}

#team1 .info td, #team2 .info td {
  /* Abstand zum Rand */
  padding: 10px 0;
}

#team1 .info p, #team2 .info p {
  /* Abstand zum Rand */
  margin: 0;
}

#team1 .info p.value, #team2 .info p.value {
  /* Textfarbe und Abstand */
  color: orange;
  margin-top: 5px;
}

/* Team-Überschriften */
h2 {
  /* Textfarbe und Überlappung verhindern */
  color: #000;
  overflow: hidden;
}

/* Team-Navigation */
#next1, #prev1, #next2, #prev2 {
  /* Positionierung */
  position: absolute;
  /* Textausrichtung und Farbe */
  align-items: center;
  color: #ffff;
  /* Hintergrundfarbe */
  background-color: transparent;
  /* Schriftgröße und -stärke */
  font-size: xx-large;
  font-family: monospace;
  font-weight: bold;
  /* Abstand zum Rand */
  left: 20px;
  /* Z-Index */
  z-index: 100;
}

#next1, #next2 {
  /* Positionierung */
  left: unset;
  right: 20px;
}

/* Footer */
.footer {
  /* Positionierung */
  bottom: 0;
  /* Abstand zum Rand */
  margin-top: 50px;
}

/* Responsive Design für mobile Geräte */
@media screen and (max-width: 520px) {
  /* Anpassungen für die Navigation */
  header nav {
    /* Höhe */
    height: 60px;
  }

  header nav button {
    /* Breite und Höhe */
    width: 50px;
    height: 50px;
  }

  header nav a {
    /* Schriftgröße */
    font-size: 16px;
  }

  /* Anpassungen für Überschriften */
  section h1 {
    /* Schriftgröße */
    font-size: 80px;
  }

  /* Anpassungen für sticky Navigation */
  header.sticky nav {
    /* Breite und Höhe */
    width: 70px;
    height: 70px;
  }
}

/* Spielbericht-Modal */
.modal-content {
    background-color: #2c2c2c;
    color: #ffffff;
    border: 1px solid #444;
}

.modal-header {
    border-bottom: 1px solid #444;
    background-color: #363636;
}

.modal-header .btn-close {
    color: #ffffff;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.game-info {
    background-color: #363636;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.game-info h6 {
    color: #ffffff;
    margin-bottom: 8px;
}

.report-text {
    color: #ffffff;
    line-height: 1.6;
    white-space: pre-wrap;
    background-color: #2c2c2c;
    padding: 15px;
    border-radius: 5px;
}