/* ===========================================================
   langstrecken.de – Tool-Seiten (map.php, volkslaufkalender.php, ...)
   Setzt tokens.css voraus (Fonts, Farbvariablen, .ls-btn, .ls-ad-*, .ls-footer)
   Bewusst nur Optik: keine IDs/Klassen angefasst, die JS referenziert.
   =========================================================== */

.ls-app-page{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
}

/* ---------- Hauptnavigation (banner_v2.inc.php) ---------- */
.ls-navbar{
  background: var(--trail);
}
.ls-navbar .navbar-brand{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: #fbf6ec;
}
.ls-navbar .nav-link{
  font-family: var(--font-body);
  font-weight: 500;
  color: rgba(251,246,236,0.85);
}
.ls-navbar .nav-link:hover,
.ls-navbar .nav-link:focus{
  color: #fbf6ec;
}
.ls-navbar .navbar-toggler{
  border-color: rgba(251,246,236,0.4);
}
.ls-navbar .navbar-toggler-icon{
  filter: brightness(0) invert(1);
}

/* ---------- Kartenbereich ---------- */
.ls-app-page #mapwrapper{
  border: 1px solid var(--contour);
  border-radius: 6px;
  overflow: hidden;
}
.ls-app-page #map{
  background: var(--paper-deep);
}

/* ---------- Geocoder-Suche ---------- */
.ls-app-page .input-group .form-control{
  font-family: var(--font-body);
  border-color: var(--contour);
  background: var(--card-bg);
  color: var(--ink);
}
.ls-app-page .input-group .form-control:focus{
  border-color: var(--trail);
  box-shadow: 0 0 0 0.2rem rgba(62,92,70,0.15);
}
.ls-app-page .input-group-text{
  background: var(--trail);
  color: #fbf6ec;
  border-color: var(--trail);
}
.ls-app-page .input-group-text:hover{ background: var(--trail-deep); }

/* ---------- Accordion ---------- */
.ls-app-page .accordion-item{
  border-color: var(--contour);
  background: var(--card-bg);
}
.ls-app-page .accordion-button{
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--card-bg);
}
.ls-app-page .accordion-button:not(.collapsed){
  color: var(--route-deep);
  background: var(--paper-deep);
  box-shadow: inset 0 -1px 0 var(--contour);
}
.ls-app-page .accordion-button:focus{
  box-shadow: 0 0 0 0.2rem rgba(62,92,70,0.15);
}
.ls-app-page .accordion-button::after{
  filter: sepia(30%) saturate(400%) hue-rotate(80deg) brightness(0.7);
}

/* Bootstrap-Buttons generell auf den Tool-Seiten an die Palette anpassen */
.ls-app-page .btn-primary{
  background-color: var(--route);
  border-color: var(--route);
}
.ls-app-page .btn-primary:hover,
.ls-app-page .btn-primary:focus{
  background-color: var(--route-deep);
  border-color: var(--route-deep);
}
.ls-app-ad-col{
  border: 1px solid var(--contour);
  border-radius: 6px;
  background: var(--paper-deep);
  padding: 14px;
}
.ls-app-ad-col .ls-ad-slot{ min-height: 250px; }

@media (min-width: 992px){
  .ls-app-ad-col{ position: sticky; top: 20px; }
}

/* ---------- Warte-/Popup-Overlays ---------- */
.ls-app-page #wait{
  font-family: var(--font-body);
}

/* ---------- Listen (Strecken zeigen, Lauftagebuch, Laufrouten) ----------
   Wird per innerHTML aus main.js/lauftagebuch.js gerendert -
   Bootstrap-Standardklassen (list-group, badge, pagination),
   hier generell fuer alle Tool-Seiten umgefaerbt, keine Klassen im JS geaendert. */
.ls-app-page #trackliste-content{
  background: var(--card-bg);
  border: 1px solid var(--contour);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.ls-app-page .list-group-item{
  font-family: var(--font-body);
  background: var(--card-bg);
  border-color: var(--contour);
  color: var(--ink);
  padding: 10px 14px;
}
.ls-app-page .list-group-item:hover{
  background: var(--paper-deep);
}
.ls-app-page .badge.bg-warning{
  background-color: var(--route) !important;
  color: #fbf6ec;
  font-weight: 500;
}
.ls-app-page .badge.bg-info{
  background-color: var(--trail) !important;
  color: #fbf6ec;
  font-weight: 500;
}
.ls-app-page #track .badge.bg-secondary{
  background-color: var(--trail-deep) !important;
}
.ls-app-page .trackoptions{
  margin-top: 8px;
}
.ls-app-page .pagination .page-link{
  color: var(--trail-deep);
  border-color: var(--contour);
}
.ls-app-page .pagination .page-link:hover{
  background: var(--paper-deep);
  color: var(--trail-deep);
}
.ls-app-page .pagination .page-item.active .page-link{
  background-color: var(--trail);
  border-color: var(--trail);
  color: #fbf6ec;
}

/* ---------- Seiten-Überschriften (h2) außerhalb des Accordions ---------- */
.ls-app-page h2:not(.accordion-header){
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* ---------- Strecken-Detailseite (track.php) ---------- */
.ls-track-heading h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
  padding-right: 70px;
  margin-bottom: 4px;
}
.ls-track-heading .badge.bg-danger{
  background-color: var(--route) !important;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Bootstrap btn-secondary (Upload-Button etc.) */
.ls-app-page .btn-secondary{
  background: var(--trail);
  border-color: var(--trail);
}
.ls-app-page .btn-secondary:hover{
  background: var(--trail-deep);
  border-color: var(--trail-deep);
}

/* Laufzeiten-Tabelle */
.ls-app-page .table{
  font-family: var(--font-body);
  color: var(--ink);
}
.ls-app-page .table th{
  border-color: var(--contour);
  color: var(--trail-deep);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ls-app-page .table td{
  border-color: var(--contour);
}

/* "Bin ich gelaufen"-Modal */
.ls-app-page .modal-content{
  font-family: var(--font-body);
  background: var(--card-bg);
  border: 1px solid var(--contour);
}
.ls-app-page .modal-header,
.ls-app-page .modal-footer{
  border-color: var(--contour);
}
.ls-app-page .modal-title{
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* Hinweisbox "Strecke zeichnen oder suchen?" */
.ls-app-page .alert-info{
  background-color: var(--paper-deep);
  border-color: var(--contour);
  color: var(--ink);
}
.ls-app-page .alert:not([class*="alert-"]){
  background-color: var(--paper-deep);
  border: 1px solid var(--contour);
  color: var(--ink);
}

/* ---------- Cards (Login/Registrierung etc.) ---------- */
.ls-app-page .card{
  background: var(--card-bg);
  border-color: var(--contour);
}
.ls-app-page .card-header{
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--paper-deep);
  border-color: var(--contour);
  color: var(--ink);
}
.ls-app-page .card-body h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
}