:root {
 --background-logo-width: 460px;
 --background-logo-height: 566px;

 --top-logo-height: 110px;

 --span-title-width: 250px;
 --span-title-padding-left: 15px;
}

/* =====================================================================
   OePNV /mobiel im VBN-Stil (12.10.2026) - ersetzt das moBiel-Orange.
   Liegt in custom_static/css/variables.css, weil munimap nur ganze Dateien
   ueberlagert und diese Datei vor appStyle.css auf jeder Seite geladen wird
   -> Regeln brauchen !important. Selektoren nur aus der Transport-App, die
   uebrigen Apps bleiben unberuehrt. Quelle der Werte: Konzept Abschnitt 11.
   ===================================================================== */
:root {
  --vbn-rot: #E3000F;
  --vbn-rot-dunkel: #B8000C;
  --vbn-text: #24242A;
  --vbn-grau: #F4F4F5;
  --vbn-linie: #DADADD;
}

/* --- Popups (Haltestelle, Linienverlauf) ------------------------------ */
.transport-map .anol-popup,
.station-layer-popup.anol-popup {
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(36, 36, 42, .22) !important;
  border: none !important;
  overflow: visible;
}
.transport-map .anol-popup .anol-popup-content,
.station-layer-popup.anol-popup .anol-popup-content {
  border-radius: 8px !important;
  overflow: hidden;
  background: #fff !important;
}
.transport-map .anol-popup .anol-popup-content h4,
.station-layer-popup.anol-popup .anol-popup-content h4,
.timetable-informations h4 {
  background-color: var(--vbn-rot) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: .1px;
  padding: 10px 14px !important;
}
.transport-map .anol-popup.bottom:after,
.station-layer-popup.anol-popup.bottom:after {
  border-bottom-color: var(--vbn-rot) !important;
}
.transport-map .anol-popup .anol-popup-content .subroute-content li::before,
.transport-map .anol-popup .anol-popup-content .construction-content li::before,
.station-layer-popup.anol-popup .anol-popup-content .subroute-content li::before,
.station-layer-popup.anol-popup .anol-popup-content .construction-content li::before {
  border-color: rgba(0, 0, 0, 0) var(--vbn-rot) !important;
}
.transport-map .select-station-content li,
.transport-map .transport-content li,
.transport-map .subroute-content li {
  color: var(--vbn-text);
  padding: 3px 0;
}
.transport-map .select-station-content li:hover,
.transport-map .subroute-content li:hover { color: var(--vbn-rot) !important; }
.transport-map .select-station-content a,
.station-layer-popup .select-station-content a {
  color: var(--vbn-rot) !important;
  font-weight: 600;
}

/* Liniennummern als Kacheln */
.transport-map .badge.ref-badge {
  border-radius: 4px !important;
  font-weight: 700 !important;
  padding: 4px 7px !important;
  min-width: 28px;
}
.transport-map .badge.ref-badge.bus { background-color: var(--vbn-rot) !important; }
.transport-map li.active .badge.ref-badge { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vbn-text); }

/* --- Feld Fahrplanauskunft -------------------------------------------- */
.transport-map .timetable-informations {
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(36, 36, 42, .18) !important;
  overflow: hidden;
  padding: 0 !important;
  background: #fff !important;
}
.transport-map .timetable-informations form { padding: 10px 14px 14px; }
.transport-map .timetable-informations label {
  color: var(--vbn-text);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 3px;
}
.transport-map .timetable-informations input[type=text],
.transport-map .timetable-informations input:not([type]),
.transport-map .timetable-informations input[type=date],
.transport-map .timetable-informations input[type=time] {
  border: 1px solid var(--vbn-linie) !important;
  border-radius: 6px !important;
  padding: 6px 9px !important;
  background: #fff !important;
  color: var(--vbn-text) !important;
}
.transport-map .timetable-informations input:focus {
  border-color: var(--vbn-rot) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(227, 0, 15, .15);
}
.transport-map .timetable-informations .btn {
  background: var(--vbn-rot) !important;
  border-color: var(--vbn-rot) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
}
.transport-map .timetable-informations .btn:hover,
.transport-map .timetable-informations .btn:focus { background: var(--vbn-rot-dunkel) !important; }

/* --- Hintergrund-Umschalter unten (aktiv/hover) ------------------------ */
.transport-map .button-layer-wrapper button.active,
.transport-map .button-layer-wrapper button:hover {
  color: var(--vbn-rot) !important;
  border-color: var(--vbn-rot) !important;
}
.transport-map .button-layer-wrapper button.active span,
.transport-map .button-layer-wrapper button:hover span { color: var(--vbn-rot) !important; }
.side-bar .sidebar-header .transport-link-logo { background-color: var(--vbn-rot) !important; }
/* ===================== Ende OePNV / VBN-Stil ========================= */

/* OePNV /mobiel: VLN-Fahrplan-PDF und Lageplan der Haltepunkte (12.10.2026) */
.transport-map li.oepnv-pdf { margin-top: 6px; }
.transport-map li.oepnv-pdf a,
.transport-map li.oepnv-skizze a {
  color: var(--vbn-rot) !important;
  font-weight: 600;
  text-decoration: none;
}
.transport-map li.oepnv-pdf a::before { content: "\1F4C4\00A0"; }
.transport-map li.oepnv-pdf a:hover,
.transport-map li.oepnv-skizze a:hover { text-decoration: underline; }
.transport-map li.oepnv-skizze { margin-top: 6px; }
.transport-map li.oepnv-skizze img {
  display: block;
  max-width: 220px;
  width: 100%;
  margin: 2px 0 3px;
  border: 1px solid var(--vbn-linie);
  border-radius: 6px;
}
.transport-map .anol-popup .anol-popup-content li.oepnv-skizze::before,
.station-layer-popup.anol-popup .anol-popup-content li.oepnv-skizze::before { display: none !important; }

/* OePNV /mobiel: Haltestellen-Popup breit und zweispaltig (12.10.2026)
   links Haltestelle/Aktionen/Lageplan, rechts Linien/Richtungen/Fahrplan-PDF.
   Hoehe begrenzt, damit das Popup nicht unten aus dem Fenster laeuft. */
.transport-map .anol-popup.station-layer .anol-popup-content,
.station-layer-popup.anol-popup .anol-popup-content {
  width: 540px !important;
  max-width: 92vw;
  white-space: normal !important;
  max-height: 60vh;
  overflow-y: auto !important;
}
.transport-map .anol-popup.station-layer div[ng-controller="routeController"],
.station-layer-popup.anol-popup div[ng-controller="routeController"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  column-gap: 16px;
  width: auto !important;
}
.transport-map .anol-popup.station-layer div[ng-controller="routeController"] > h4,
.station-layer-popup.anol-popup div[ng-controller="routeController"] > h4 {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 1;
}
.transport-map .anol-popup.station-layer .select-station-content,
.station-layer-popup.anol-popup .select-station-content {
  grid-column: 1;
  grid-row: 2 / span 2;
  padding: 8px 0 8px 12px;
}
.transport-map .anol-popup.station-layer .transport-content,
.station-layer-popup.anol-popup .transport-content {
  grid-column: 2;
  grid-row: 2;
  padding: 8px 12px 0 12px;
  border-left: 1px solid var(--vbn-linie);
}
.transport-map .anol-popup.station-layer .subroute-content,
.station-layer-popup.anol-popup .subroute-content {
  grid-column: 2;
  grid-row: 3;
  padding: 4px 12px 10px 12px;
  border-left: 1px solid var(--vbn-linie);
  align-self: start;
}
.transport-map .anol-popup.station-layer .transport-content .list-inline > li,
.station-layer-popup.anol-popup .transport-content .list-inline > li { padding: 2px 1px; }
@media (max-width: 640px) {
  .transport-map .anol-popup.station-layer div[ng-controller="routeController"],
  .station-layer-popup.anol-popup div[ng-controller="routeController"] { display: block; }
  .transport-map .anol-popup.station-layer .transport-content,
  .transport-map .anol-popup.station-layer .subroute-content { border-left: none; }
}

/* Korrektur 12.10.2026: Kachelzeile nicht strecken, Schliessen-Kreuz ueber dem Kopf */
.transport-map .anol-popup.station-layer div[ng-controller="routeController"],
.station-layer-popup.anol-popup div[ng-controller="routeController"] {
  grid-template-rows: auto min-content 1fr;
}
.transport-map .anol-popup.station-layer .transport-content,
.station-layer-popup.anol-popup .transport-content {
  align-self: start;
  background: var(--vbn-grau) !important;
  padding-bottom: 8px;
}
.transport-map .anol-popup.station-layer .anol-popup-closer,
.station-layer-popup.anol-popup .anol-popup-closer {
  z-index: 5 !important;
  color: #fff !important;
  top: 13px !important;
  right: 14px !important;
  font-size: 16px;
  opacity: .95;
}
.transport-map .anol-popup.station-layer .anol-popup-closer:hover { opacity: 1; transform: scale(1.1); }
.transport-map .anol-popup.station-layer div[ng-controller="routeController"] > h4,
.station-layer-popup.anol-popup div[ng-controller="routeController"] > h4 { padding-right: 40px !important; }

/* Korrektur 2 (12.10.2026): Rahmen statt nur Inhalt breit (Kreuz rechts), Popup niedriger */
.transport-map .anol-popup.station-layer,
.station-layer-popup.anol-popup {
  width: 540px !important;
  max-width: 92vw !important;
  padding: 0 !important;
}
.transport-map .anol-popup.station-layer .anol-popup-content,
.station-layer-popup.anol-popup .anol-popup-content {
  width: 100% !important;
  max-height: 45vh;
}
.transport-map li.oepnv-skizze img {
  max-height: 150px;
  width: auto;
  max-width: 100%;
}

/* Korrektur 3: appStyle.css setzt ".transport-map .anol-popup.station-layer {width:250px !important}"
   und laedt NACH dieser Datei -> hier hoehere Spezifitaet noetig. */
.anol-map.transport-map .anol-popup-container > .anol-popup.station-layer {
  width: 540px !important;
  max-width: 92vw !important;
  padding: 0 !important;
}

/* Alle Linien-Kacheln VBN-Rot (12.10.2026) - vorher grau fuer andere Betreiber als die VGH.
   Der Betreibername steht weiterhin in Klammern neben der gewaehlten Linie. */
.anol-map.transport-map .badge.ref-badge.other-operator,
.anol-map.transport-map .badge.ref-badge {
  background-color: var(--vbn-rot) !important;
  color: #fff !important;
}
/* appStyle: ".transport-map .anol-popup .anol-popup-content .badge.other-operator {#777 !important}" -> spezifischer */
.anol-map.transport-map .anol-popup .anol-popup-content .badge.ref-badge.other-operator,
.anol-map.transport-map .anol-popup .anol-popup-content .badge.ref-badge {
  background-color: var(--vbn-rot) !important;
}

/* Kennzeichnung externer Links / neues Fenster (BITV), 12.10.2026 */
.anol-map.transport-map .oepnv-extern {
  display: inline-block;
  margin-left: 3px;
  font-size: .85em;
  font-weight: normal;
  opacity: .75;
}
.anol-map.transport-map .timetable-informations .oepnv-extern-hinweis {
  margin: 6px 0 0;
  font-size: 11px;
  color: #6b6b72;
}

/* Feste Legende in /mobiel (12.10.2026) */
.anol-map.transport-map .oepnv-legende {
  position: absolute;
  right: 10px;
  bottom: 44px;
  z-index: 2;
  width: 230px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(36, 36, 42, .18);
  font-size: 12px;
  color: var(--vbn-text);
  overflow: hidden;
}
.anol-map.transport-map .oepnv-legende-kopf {
  display: block;
  width: 100%;
  border: 0;
  background: var(--vbn-rot);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: 6px 12px;
}
.anol-map.transport-map .oepnv-legende-kopf .glyphicon { float: right; top: 3px; font-size: 11px; }
.anol-map.transport-map .oepnv-legende-inhalt { padding: 4px 12px 10px; max-height: 50vh; overflow-y: auto; }
.anol-map.transport-map .oepnv-leg-titel { font-weight: 600; margin: 7px 0 2px; color: #55555c; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.anol-map.transport-map .oepnv-leg-zeile { display: flex; align-items: center; line-height: 18px; }
.anol-map.transport-map .oepnv-leg-zeile svg { flex: 0 0 22px; margin-right: 6px; }
.anol-map.transport-map .oepnv-leg-klassen { display: flex; justify-content: space-between; text-align: center; }
.anol-map.transport-map .oepnv-leg-klassen span { display: flex; flex-direction: column; align-items: center; font-size: 11px; }
.anol-map.transport-map .oepnv-leg-hinweis { margin-top: 7px; font-size: 11px; color: #6b6b72; }
@media (max-width: 640px) {
  .anol-map.transport-map .oepnv-legende { width: 190px; bottom: 54px; }
}

/* Legende /app/oepnv: Titel UEBER dem eigenen Legendenbild (anol setzt ihn darunter).
   Nur fuer die SVG-Legenden aus custom_static/img/legende/, andere Apps unberuehrt. */
div:has(> div > img.anol-legend-item-image[src*="/img/legende/"]) {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}
div:has(> div > img.anol-legend-item-image[src*="/img/legende/"]) > .anol-legend-item-title {
  order: -1;
  font-weight: 600;
  color: #24242a;
  margin: 4px 0 3px;
}

/* Mängelmelder (13.10.2026): Knopf „Ort markieren“ des geoEDITOR hervorheben – im Blau des
   Knopfs „Meldung absenden“ auf melden.sg-weseraue.de (#2f5d8c). Nur der geoEDITOR ist betroffen
   (genutzt von der App maengelmelder). appStyle.css lädt NACH dieser Datei -> spezifische
   Selektoren + !important. Quelle: GDI Weseraue/maengelmelder/munimap/variables-geoeditor.css */
.geoeditor .btn-group .btn.draw-point {
  background: #2f5d8c !important;
  border-color: #2f5d8c !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 7px 12px !important;
}
.geoeditor .btn-group .btn.draw-point,
.geoeditor .btn-group .btn.draw-point * { color: #fff !important; }
.geoeditor .btn-group .btn.draw-point:hover,
.geoeditor .btn-group .btn.draw-point.active {
  background: #244a70 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3) !important;
}
.geoeditor .btn-group .btn.draw-point .draw-icon { filter: brightness(0) invert(1); }
/* Punkt gesetzt (Knopf gesperrt, max. 1): grün */
.geoeditor .btn-group .btn.draw-point[disabled] {
  background: #2e7d32 !important;
  border-color: #1b5e20 !important;
  opacity: 1 !important;
}
/* Zähler „#: 0 min: 1 max: 1“ sagt Bürgern nichts */
.geoeditor .geoeditor-badge { display: none !important; }