html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

h2 {
  font-size: 1.75em;         /* Größer als h3 */
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #ccc;  /* Deutliche Linie als Abgrenzung */
}

/* Allgemeine Formatierung für h3 */
h3 {
  font-size: 1.4em;          /* Etwas kleiner als h2 */
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #555;               /* Leicht abgedunkelte Schriftfarbe */
  padding-bottom: 3px;
  border-bottom: 1px solid #ddd;  /* Leichtere Linie zur optischen Trennung */
}

/* Anpassung im Dark Mode */
body.dark-mode h2 {
  border-bottom: 2px solid #555;
}

body.dark-mode h3 {
  border-bottom: 1px solid #555;
  color: #ccc;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

:root {
  --bg-color: white;
  --text-color: black;
  --navbar-bg: white;
  --navbar-text: black;
}

.dark-mode {
  --bg-color: #121212;
  --text-color: white;
  --navbar-bg: #1f1f1f;
  --navbar-text: white;
  --footer-text:white;
  ---bg: #1f1f1f;
}

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #333;  /* Dunkelgrauer Hintergrund */
    color: white;  /* Weiße Schrift */
    border: 1px solid #555;  /* Dezenter Rahmen */
    outline: none; /* Standard-Outline entfernen */
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #bbb;  /* Heller Grauton für Platzhalter */
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: #333;
    color: white;
    border: 1px solid #258cfb;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Dezenter Glow-Effekt */
}


body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.navbar {
  background-color: var(--navbar-bg) !important;
}

.navbar-nav .nav-link {
  color: var(--navbar-text) !important;
}

.btn-outline-dark {
  border-color: var(--navbar-text);
  color: var(--navbar-text);
}

.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: black; /* Standardfarbe im Light Mode */
  text-align: center;
}

.dark-mode .page-title {
  color: white; /* Schriftfarbe für Dark Mode */
  background-color: black; /* Hintergrundfarbe für Dark Mode */
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

body.dark-mode .navbar-brand {
  color: white !important;
}

.station-list {
  list-style-type: none; /* Entfernt die Aufzählungspunkte */
  padding: 0; /* Entfernt unnötigen Abstand */
}

.station-list li {
  border-bottom: 1px solid #ddd; /* Fügt einen Strich zwischen den Listenelementen hinzu */
  padding: 10px 10px; /* Fügt etwas Abstand oben und unten hinzu */
}

.station-list li:nth-child(even) {
  background-color: #f9f9f9; /* Abwechselnde Farben für jedes zweite Element */
}

.station-list li:last-child {
  border-bottom: none; /* Entfernt den Strich beim letzten Element */
}

/* Standardfarben für station-summary und station-details */
.station-summary {
  color: black;  /* Standard (Hellmodus) */
  cursor: pointer; /* Ändert den Mauszeiger in eine Hand */
}

.station-details {
  color: gray;  /* Standard (Hellmodus) */
}

/* Dark Mode Anpassungen */
body.dark-mode .station-summary {
  color: white;  /* Weiße Schrift im Dark Mode */
}

body.dark-mode .station-details {
  color: lightgray;  /* Helle Grauschrift im Dark Mode */
}

body.dark-mode .station-item {
  background-color: #2c2c2c; /* Dunkler Hintergrund für Listenelemente im Dark Mode */
  border-color: #444;  /* Dunklerer Rand */
}

body.dark-mode .station-item:nth-child(even) {
  background-color: #3a3a3a; /* Abwechselnde Hintergrundfarbe für jedes zweite Element */
}

body.dark-mode .station-item:hover {
  background-color: #444; /* Hellerer Hover-Effekt */
}

body.dark-mode .station-list li {
  border-bottom: 1px solid #444;  /* Dunklerer Trennstrich zwischen den Listenelementen */
}

body.dark-mode .station-list {
  background-color: #1f1f1f; /* Dunkler Hintergrund für die gesamte Liste */
}

body.dark-mode .station-list li:last-child {
  border-bottom: none; /* Entfernt den Trennstrich beim letzten Listenelement */
}

.radio-spacing {
  display: flex;
  gap: 15px; /* Abstand zwischen den Labels */
}

body.dark-mode .form-select {
  background-color: #2c2c2c;
  color: #f1f1f1;
  border-color: #555;

  /* Dropdown-Pfeil neu definieren (SVG) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ccc' d='M8 10.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

.suggestions-box {
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  background-color: white;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  border-radius:5px ;
}
.suggestion-item {
  padding: 5px;
  cursor: pointer;
}
.suggestion-item:hover {
  background-color: #f0f0f0;
}

body.dark-mode .suggestions-box {
  background-color: #2c2c2c;
  border: 1px solid #444;
}

body.dark-mode .suggestion-item {
  color: #f1f1f1;
}

body.dark-mode .suggestion-item:hover {
  background-color: #444;
}

.tooltip-inner {
  background-color: #efefef !important; /* Deine Wunschfarbe */
  color: #000000 !important;
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: 6px;
  opacity: 1 !important; 
}

body.dark-mode .tooltip-inner {
  background-color: #333 !important;  /* Dunkelgrauer Hintergrund */
  color: white !important;  /* Weiße Schrift */
  font-size: 0.875rem;
  padding: 8px 12px;
  border-radius: 6px;
  opacity: 1 !important; 
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #bbb !important;
}

/* Dark Mode Map Filter */
.dark-map .leaflet-layer,
.dark-map .leaflet-control-zoom-in,
.dark-map .leaflet-control-zoom-out,
.dark-map .leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}



@media screen and (max-width: 767px) {
  .col-md-5.custom-col.col-12 {
    justify-content: space-between;
    margin-top: 20px; 
  }
  .row{
    margin-bottom: 30px; 
  }
}

@media screen and (min-width: 768px) {
  .col-md-5.custom-col.col-12 {
    justify-content: space-between;
  }
  .row{
    margin-bottom: 30px; 
  }
}