/* ===========================================================
   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);
}

/* ---------- Formularfelder (Geocoder, Datum, Login etc.) ---------- */
.ls-app-page .form-control{
  font-family: var(--font-body);
  border-color: var(--contour);
  background: var(--card-bg);
  color: var(--ink);
}
.ls-app-page .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 (h1/h2) außerhalb des Accordions ---------- */
.ls-app-page h1,
.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);
}
.ls-app-page .alert-warning,
.ls-app-page .alert.bg-warning{
  background-color: rgba(184,68,46,0.1);
  border-color: rgba(184,68,46,0.35);
  color: var(--route-deep);
}

/* Horizontaler Anzeigenblock (z.B. unter der Laufveranstaltungs-Liste) */
.ls-ad-banner-inline{
  border: 1px solid var(--contour);
  border-radius: 6px;
  background: var(--paper-deep);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ls-ad-banner-inline .ls-ad-slot{ min-height: 90px; }

/* ---------- 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);
}

/* Volkslaufkalender Detailseite */
.event-dates {
    margin-top: 0.5rem;
}

.event-date {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
}

.event-date-next {
    border-color: #198754;
    background: #f0f9f4;
}

.event-date-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: 0.9rem;
}

.event-date-next .event-date-icon {
    background: #198754;
    color: #fff;
}

.event-date-content {
    line-height: 1.25;
}

.event-date-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.event-date-value {
    font-weight: 600;
}

.event-date-next .event-date-value {
    color: #146c43;
}

.event-date-badge {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 600;
    color: #146c43;
}

.event-organizer {
    margin-top: 1rem;
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
}

.event-meta-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f5;
    font-size: 0.9rem;
}

.event-meta-content {
    line-height: 1.25;
}

.event-meta-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.1rem;
}

.event-meta-value {
    font-weight: 600;
}

.event-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}