/* ===========================================================================
   Baustellen-Portal - Signaletik
   Asphalt, Verkehrsgelb (RAL 1023), Warnstreifen. Harte Kanten, keine
   Rundungen ausser dort, wo es die Bedienung wirklich braucht.
   =========================================================================== */

:root {
  --asphalt-900: #101114;
  --asphalt-800: #17181c;
  --asphalt-700: #1e2026;
  --asphalt-600: #272a32;
  --asphalt-500: #363a45;
  --asphalt-400: #4a4f5c;

  --kreide:      #f2f0ea;
  --beton:       #c3c1b8;
  --beton-matt:  #8a8880;

  --warn:        #f5b301;
  --warn-hell:   #ffcf3d;
  --warn-tief:   #c98f00;

  --sperrung:    #e0523c;
  --hinweis:     #5aa9db;
  --geplant:     #7dc47f;

  /* Grundfarbe der basemap.de-Kacheln - siehe Hinweis bei #karte */
  --karte-grund: #fffdee;

  --raster: 4px;
  --schatten: 0 2px 0 rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);

  --display: 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --text: 'Barlow', 'Segoe UI', sans-serif;
  --eng: 'Barlow Semi Condensed', 'Barlow', sans-serif;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss staerker sein als jede eigene display-Regel.
   Ohne diese Zeile schlaegt etwa `.dialog { display: grid }` die
   Browser-Voreinstellung `[hidden] { display: none }` - Autorenregeln
   gewinnen gegen die Voreinstellung - und das Abruffenster steht
   dauerhaft leer ueber der Seite. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--asphalt-900);
  color: var(--kreide);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* feine Asphaltkoernung */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(245, 179, 1, .05), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(90, 169, 219, .04), transparent 48%);
}

a { color: var(--warn-hell); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kreide); }

/* --- Warnstreifen ------------------------------------------------------- */
.streifen {
  height: 10px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--warn) 0 12px,
    var(--asphalt-900) 12px 24px
  );
  flex: none;
}
.streifen--duenn { height: 5px; opacity: .8; }

/* --- Grundgeruest ------------------------------------------------------- */
.huelle {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.kopf {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--asphalt-600);
  background: linear-gradient(180deg, var(--asphalt-800), var(--asphalt-900));
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: 14px;
}

.marke__zeichen {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--warn);
  color: var(--asphalt-900);
  /* Verkehrszeichen: auf die Spitze gestelltes Dreieck, hier als Raute */
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.marke__zeichen svg { width: 22px; height: 22px; display: block; }

.marke__titel {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: .92;
  letter-spacing: .012em;
  text-transform: uppercase;
  margin: 0;
}
.marke__titel em {
  font-style: normal;
  color: var(--warn);
}
.marke__unter {
  font-family: var(--eng);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--beton-matt);
  margin: 3px 0 0;
}

.kopf__stand {
  margin-left: auto;
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--beton-matt);
  text-align: right;
}
.kopf__stand b { color: var(--beton); font-weight: 600; }


/* --- Umschalter Umkreis / Route ------------------------------------------ */
.modus {
  display: flex;
  gap: 2px;
  padding: 14px 26px 0;
  background: var(--asphalt-800);
}
.modus__knopf {
  font-family: var(--eng);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 20px;
  background: var(--asphalt-900);
  color: var(--beton-matt);
  border: 1px solid var(--asphalt-600);
  border-bottom: none;
  cursor: pointer;
  transition: color .12s, background .12s;
}
.modus__knopf:hover { color: var(--kreide); }
.modus__knopf--aktiv {
  background: var(--warn);
  color: var(--asphalt-900);
  border-color: var(--warn);
}

#von, #nach { width: min(13rem, 44vw); font-family: var(--eng); font-size: 17px; }

/* --- Suchleiste --------------------------------------------------------- */
.suche {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 18px 26px;
  background: var(--asphalt-800);
  border-bottom: 1px solid var(--asphalt-600);
}

.feld { display: flex; flex-direction: column; gap: 5px; }

.feld__label {
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--beton-matt);
}

.feld input[type="text"],
.feld input[type="search"] {
  background: var(--asphalt-900);
  border: 1px solid var(--asphalt-500);
  color: var(--kreide);
  font-family: var(--text);
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 0;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.feld input:focus {
  border-color: var(--warn);
  box-shadow: inset 0 -2px 0 var(--warn);
}
.feld input::placeholder { color: var(--asphalt-400); }

#ziel {
  /* Nimmt Ort und Postleitzahl entgegen, deshalb Textbreite statt
     fuenf gesperrter Ziffern. */
  width: min(16rem, 52vw);
  font-family: var(--eng);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
}

#q { width: min(280px, 46vw); }

/* Radius als Messband */
.radius { min-width: 220px; }
.radius__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.radius__wert {
  font-family: var(--display);
  font-size: 21px;
  color: var(--warn);
  line-height: 1;
}
.radius input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.radius input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background:
    repeating-linear-gradient(90deg, var(--asphalt-500) 0 1px, transparent 1px 20px),
    var(--asphalt-600);
  border-bottom: 1px solid var(--asphalt-500);
}
.radius input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--asphalt-600);
  border-bottom: 1px solid var(--asphalt-500);
}
.radius input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 22px;
  margin-top: -8px;
  background: var(--warn);
  border: 1px solid var(--asphalt-900);
  box-shadow: 0 0 0 1px var(--warn-tief);
}
.radius input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 22px;
  border-radius: 0;
  background: var(--warn);
  border: 1px solid var(--asphalt-900);
}

/* Knopf */
.knopf {
  font-family: var(--eng);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: none;
  border-radius: 0;
  background: var(--warn);
  color: var(--asphalt-900);
  cursor: pointer;
  position: relative;
  transition: transform .1s, background .12s;
}
.knopf::after {
  content: '';
  position: absolute;
  inset: auto 0 -4px 0;
  height: 4px;
  background: var(--warn-tief);
}
.knopf:hover { background: var(--warn-hell); }
.knopf:active { transform: translateY(2px); }
.knopf:active::after { height: 2px; }
.knopf[disabled] { opacity: .5; cursor: progress; }

.knopf--still {
  background: transparent;
  color: var(--beton);
  border: 1px solid var(--asphalt-500);
}
.knopf--still::after { display: none; }
.knopf--still:hover { color: var(--kreide); border-color: var(--warn); background: transparent; }

.schalter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--beton-matt);
  cursor: pointer;
  user-select: none;
}
.schalter input { accent-color: var(--warn); width: 15px; height: 15px; }

/* Im Routenmodus entscheidet dieser Schalter ueber den halben Bestand -
   er darf nicht wie eine Randnotiz aussehen. */
.schalter[data-fuer="route"] {
  border: 1px solid var(--asphalt-500);
  padding: 7px 11px;
  color: var(--beton);
}
.schalter[data-fuer="route"]:hover { border-color: var(--warn); color: var(--kreide); }

/* --- Arbeitsflaeche ----------------------------------------------------- */
.buehne {
  display: grid;
  grid-template-columns: minmax(340px, 30rem) 1fr;
  flex: 1 1 auto;
  min-height: 0;   /* damit die Liste im Flex-Container scrollen darf */
}

.liste {
  overflow-y: auto;
  border-right: 1px solid var(--asphalt-600);
  background: var(--asphalt-800);
  scrollbar-color: var(--asphalt-500) var(--asphalt-800);
}

.liste__kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 18px;
  background: var(--asphalt-700);
  border-bottom: 1px solid var(--asphalt-600);
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beton-matt);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.liste__kopf b { color: var(--warn); font-weight: 600; }

/* Ergebniskarte */
.treffer {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--asphalt-700);
  border-left: 4px solid var(--asphalt-500);
  color: inherit;
  font: inherit;
  padding: 14px 18px 15px;
  cursor: pointer;
  transition: background .12s, border-left-color .12s;
  animation: auftauchen .34s cubic-bezier(.2, .7, .3, 1) both;
}
.treffer:hover,
.treffer:focus-visible { background: var(--asphalt-700); outline: none; }
.treffer[aria-current="true"] { background: var(--asphalt-600); }

.treffer { border-left-color: var(--kat, var(--warn)); }

@keyframes auftauchen {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.treffer__kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.treffer__titel {
  font-family: var(--eng);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .005em;
  flex: 1;
  min-width: 0;
}
.treffer__km {
  font-family: var(--display);
  font-size: 15px;
  color: var(--warn);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.treffer__text {
  font-size: 13.5px;
  color: var(--beton);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.treffer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.marke-chip {
  padding: 2px 7px;
  border: 1px solid var(--asphalt-500);
  color: var(--beton-matt);
  white-space: nowrap;
}

/* Der Zeitraum ist die Angabe, nach der zuerst gesucht wird -
   deshalb deutlich groesser als die uebrigen Kennzeichnungen. */
.marke-chip--zeit {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  padding: 3px 10px;
  color: var(--kreide);
  border-color: var(--asphalt-400);
  font-variant-numeric: tabular-nums;
}
.marke-chip--laeuft {
  border-color: var(--warn-tief);
  color: var(--asphalt-900);
  background: var(--warn);
  font-weight: 600;
}
.marke-chip--geplant { border-color: var(--geplant); color: var(--geplant); }

.hinweisbox {
  padding: 34px 24px;
  text-align: center;
  color: var(--beton-matt);
  font-family: var(--eng);
  letter-spacing: .04em;
}
.hinweisbox strong { display: block; color: var(--kreide); font-size: 17px; margin-bottom: 6px; }

/* Ladebalken im Warnstreifen-Look */
.laden {
  height: 4px;
  background-image: repeating-linear-gradient(-45deg, var(--warn) 0 10px, var(--asphalt-700) 10px 20px);
  background-size: 28px 100%;
  animation: rutschen .6s linear infinite;
}
@keyframes rutschen { to { background-position: 28px 0; } }

/* --- Karte -------------------------------------------------------------- */
#karte {
  height: 100%;
  /* Heller Untergrund, kein Asphaltgrau: basemap.de liefert bei einzelnen
     Zoomstufen (beobachtet bei z=11) Kacheln mit teilweise durchsichtigem
     Hintergrund - rund 55 Prozent der Pixel. Bei dunklem Untergrund
     erscheint dann eine schwarze Flaeche, auf der nur Waldflaechen und
     Strassen stehen bleiben. Mit der Grundfarbe der Karte faellt die
     Luecke nicht mehr auf. */
  background: var(--karte-grund);
}
.leaflet-container { font-family: var(--text); background: var(--karte-grund); }
.leaflet-popup-content-wrapper {
  background: var(--asphalt-800);
  color: var(--kreide);
  border-radius: 0;
  border-left: 4px solid var(--warn);
  box-shadow: var(--schatten);
}
.leaflet-popup-tip { background: var(--asphalt-800); }
.leaflet-popup-content {
  margin: 12px 14px;
  font-size: 13.5px;
  /* Mehrere Bauabschnitte in einem Popup koennen lang werden. */
  max-height: 46vh;
  overflow-y: auto;
}
.leaflet-popup-content .popup-anzahl {
  margin: -2px 0 10px;
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--warn);
}
.leaflet-popup-content .popup-block + .popup-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--asphalt-600);
}
.leaflet-popup-content h3 {
  font-family: var(--eng);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 6px;
}
.leaflet-popup-content p { margin: 0 0 6px; color: var(--beton); }
.leaflet-popup-content .popup-status {
  margin: 0 0 8px;
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leaflet-popup-content dl { margin: 0; font-size: 12px; color: var(--beton-matt); }
/* erste Zeile ist der Zeitraum - genauso hervorgehoben wie in der Liste */
.leaflet-popup-content dl div:first-child {
  font-family: var(--eng);
  font-size: 16px;
  font-weight: 600;
  color: var(--kreide);
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.leaflet-popup-close-button { color: var(--beton-matt) !important; }
.leaflet-control-attribution {
  background: rgba(16, 17, 20, .82) !important;
  color: var(--beton-matt) !important;
  font-size: 10.5px;
}
.leaflet-control-attribution a { color: var(--beton) !important; }
.leaflet-bar a {
  background: var(--asphalt-800);
  color: var(--kreide);
  border-bottom-color: var(--asphalt-600);
}
.leaflet-bar a:hover { background: var(--asphalt-600); color: var(--warn); }

.nadelgruppe { position: relative; width: 18px; height: 18px; }

/* Zaehler, wenn an einer Stelle mehrere Meldungen liegen. */
.nadel__zahl {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  background: var(--asphalt-900);
  color: var(--kat, var(--warn));
  border: 1px solid var(--kat, var(--warn));
  border-radius: 8px;
  font-family: var(--eng);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.nadel {
  width: 18px;
  height: 18px;
  background: var(--kat, var(--warn));
  border: 2px solid var(--asphalt-900);
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}


/* Geplant, aber noch nicht begonnen: hohl statt gefuellt. An einer
   Baustelle liegen oft mehrere Bauabschnitte uebereinander - ohne diesen
   Unterschied erwischt man auf der Karte leicht den kuenftigen statt des
   laufenden. Laufende Massnahmen liegen zusaetzlich weiter oben
   (zIndexOffset in app.js). */
.nadel--geplant {
  background: var(--asphalt-900);
  border-width: 3px;
  border-color: var(--kat, var(--warn));
}
.nadel--aktiv {
  animation: pochen 1.1s ease-in-out infinite;
  z-index: 900 !important;
}
@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, .55); }
  60%      { box-shadow: 0 0 0 12px rgba(245, 179, 1, 0); }
}

/* --- Fuss --------------------------------------------------------------- */
.fuss {
  padding: 16px 26px 26px;
  background: var(--asphalt-900);
  border-top: 1px solid var(--asphalt-700);
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--beton-matt);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Quellenseite ------------------------------------------------------- */
.inhalt { max-width: 60rem; margin: 0 auto; padding: 34px 26px 60px; }
.inhalt h2 {
  font-family: var(--display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 6px;
}
.inhalt p { color: var(--beton); max-width: 62ch; }

.quellen-tabelle { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 14px; }
.quellen-tabelle th {
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--beton-matt);
  border-bottom: 2px solid var(--warn);
  padding: 8px 10px;
}
.quellen-tabelle td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--asphalt-700);
  vertical-align: top;
}
.quellen-tabelle tr:hover td { background: var(--asphalt-800); }
.quellen-tabelle .zahl { font-variant-numeric: tabular-nums; color: var(--warn); font-weight: 600; }


/* --- Standanzeige und Aktualisieren --------------------------------------
   Die Seite wird selten aufgerufen, deshalb kein Cronjob: Der Bestand
   wird auf Knopfdruck geholt. Alter des Bestands steht gross daneben,
   damit man sieht, ob sich das lohnt.
   -------------------------------------------------------------------------- */
.stand {
  margin-left: auto;
  position: relative;      /* Bezug fuer das Protokoll */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--beton-matt);
}
.stand__zahlen b { color: var(--beton); font-weight: 600; font-size: 14px; }
.stand__zeit { color: var(--beton-matt); }
.stand--alt .stand__zeit {
  color: var(--asphalt-900);
  background: var(--warn);
  padding: 2px 8px;
  font-weight: 600;
}

.knopf--gross {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  padding: 14px 26px;
  margin-top: 2px;
}
.knopf__symbol { font-size: 19px; line-height: 1; }
.knopf--laeuft .knopf__symbol {
  display: inline-block;
  animation: drehen 1.1s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }



/* --- Kategoriefilter ----------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--asphalt-900);
  border-bottom: 1px solid var(--asphalt-700);
}
.filter__label {
  font-family: var(--eng);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--beton-matt);
  margin-right: 2px;
}

.kat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--eng);
  font-size: 13px;
  letter-spacing: .04em;
  padding: 5px 11px;
  background: var(--asphalt-800);
  color: var(--kreide);
  border: 1px solid var(--asphalt-500);
  border-radius: 0;
  cursor: pointer;
  transition: border-color .12s, opacity .12s, background .12s;
}
.kat:hover { border-color: var(--kat); }
.kat__punkt {
  width: 11px;
  height: 11px;
  flex: none;
  background: var(--kat);
  transform: rotate(45deg);
}
.kat__zahl {
  font-variant-numeric: tabular-nums;
  color: var(--beton-matt);
  font-weight: 600;
}
/* Abgewaehlt: sichtbar, aber deutlich zurueckgenommen. */
.kat[aria-pressed="false"] {
  opacity: .4;
  background: transparent;
  text-decoration: line-through;
}
.kat[aria-pressed="false"] .kat__punkt { background: var(--asphalt-500); }
.kat--leer { opacity: .35; }

.filter__alle {
  font-family: var(--eng);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--warn-hell);
  cursor: pointer;
  padding: 5px 4px;
}
.filter__alle:hover { color: var(--kreide); }

/* "alle" und "keine" gehoeren zusammen und sollen nicht getrennt umbrechen. */
.filter__schalter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.filter__schalter .filter__alle + .filter__alle {
  border-left: 1px solid var(--asphalt-500);
  padding-left: 8px;
  margin-left: 4px;
}

/* Kategoriemarke in Liste und Popup */
.kat-chip {
  border-color: var(--kat) !important;
  color: var(--kat) !important;
  font-weight: 600;
}


/* Zweite Filterleiste: Strassenklasse. Ohne Farbcodierung - die Farbe
   ist fuer die Schwere der Auswirkung reserviert, hier genuegt der
   Klassenbuchstabe. */
.filter--klasse {
  border-bottom: 1px solid var(--asphalt-700);
  padding-top: 0;
}
.kat--klasse { gap: 6px; }
.kat__kurz {
  display: grid;
  place-items: center;
  width: 20px;
  height: 16px;
  flex: none;
  background: var(--asphalt-600);
  border: 1px solid var(--asphalt-500);
  color: var(--beton);
  font-family: var(--eng);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.kat--klasse[aria-pressed="false"] .kat__kurz { opacity: .6; }

.marke-chip--neben {
  border-color: var(--asphalt-400);
  color: var(--beton-matt);
  font-style: italic;
}

.marke-chip--klasse {
  font-weight: 600;
  color: var(--beton);
  border-color: var(--asphalt-400);
}

/* Ortsauswahl bei mehrdeutiger Eingabe */
.treffer--auswahl { border-left-color: var(--warn); }
.treffer--auswahl .treffer__titel { font-size: 17px; }

.warnhinweis { color: var(--warn); font-weight: 600; }


/* --- Abruffenster ---------------------------------------------------------
   Der Abruf dauert gut eine Minute, davon fast alles auf die Autobahn-API.
   Ohne sichtbare Regung wirkt das wie ein Absturz - deshalb je Quelle eine
   Zeile mit Zustand und mitlaufender Sekundenanzeige.
   -------------------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 9, 11, .78);
  backdrop-filter: blur(2px);
  animation: einblenden .18s ease-out;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.dialog__feld {
  width: min(34rem, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--asphalt-800);
  border: 1px solid var(--asphalt-600);
  box-shadow: var(--schatten);
}

.dialog__kopf { padding: 18px 22px 12px; }
.dialog__kopf h2 {
  font-family: var(--display);
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: .012em;
  margin: 0 0 4px;
}
.dialog__kopf p {
  margin: 0;
  font-family: var(--eng);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--beton-matt);
}

.fortschritt {
  height: 5px;
  background: var(--asphalt-600);
  margin: 0 22px;
}
.fortschritt__balken {
  height: 100%;
  width: 0;
  background: var(--warn);
  transition: width .35s ease-out;
}

.abruf {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 22px;
}
.abruf__zeile {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 2px 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--asphalt-700);
  align-items: baseline;
}
.abruf__status {
  font-size: 15px;
  line-height: 1.2;
  color: var(--beton-matt);
  text-align: center;
}
.abruf__name {
  font-family: var(--eng);
  font-size: 15px;
  font-weight: 600;
  color: var(--kreide);
}
.abruf__info {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--beton-matt);
  font-variant-numeric: tabular-nums;
}

.abruf__zeile--wartet { opacity: .5; }
.abruf__zeile--laeuft .abruf__name  { color: var(--warn); }
.abruf__zeile--laeuft .abruf__info  { color: var(--beton); }
.abruf__zeile--ok     .abruf__status { color: var(--geplant); }
.abruf__zeile--still  .abruf__status { color: var(--asphalt-400); }
.abruf__zeile--fehler .abruf__status,
.abruf__zeile--fehler .abruf__info   { color: var(--sperrung); }

/* Kreisel fuer die gerade laufende Quelle */
.abruf__zeile--laeuft .abruf__status::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--asphalt-500);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: drehen .8s linear infinite;
}

.dialog__fuss {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 20px;
}
.dialog__zeit {
  font-family: var(--eng);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--beton-matt);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

/* --- Schmal ------------------------------------------------------------- */
/* --- Schmal ---------------------------------------------------------------
   Feste Bildschirmaufteilung statt langer Seite: Karte oben, Liste darunter
   mit eigenem Scrollbereich. So bleibt die Karte immer sichtbar, waehrend
   man die Meldungen durchgeht - und ein Klick auf einen Marker kann die
   Karte nicht mehr aus dem Bild schieben.
   dvh statt vh, damit die ein- und ausfahrende Browserleiste auf dem
   Telefon die Aufteilung nicht zerreisst.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Kopf und Suche kompakter - der Platz wird unten gebraucht. */
  .kopf { padding: 14px 16px 12px; gap: 12px; }
  .marke__zeichen { width: 38px; height: 38px; }
  .marke__zeichen svg { width: 18px; height: 18px; }
  .kopf__stand { margin-left: 0; text-align: left; width: 100%; font-size: 11px; }
  .suche { padding: 12px 16px; gap: 12px; }
  .modus { padding: 10px 16px 0; }
  #von, #nach { width: 100%; }
  .feld:has(#von), .feld:has(#nach) { flex: 1 1 100%; }
  .filter { padding: 10px 16px; gap: 6px; }
  .filter--klasse { padding-top: 0; }
  .filter__label { width: 100%; }
  .stand { align-items: stretch; width: 100%; margin-left: 0; }
  .knopf--gross { justify-content: center; width: 100%; font-size: 17px; padding: 15px 20px; }
  .dialog__feld { max-height: 92vh; }
  .fuss { padding: 9px 16px; font-size: 11px; gap: 12px; }

  /* Karte und Liste teilen sich gemeinsam eine volle Bildschirmhoehe.
     Der Kopfbereich darf darueber wegscrollen - er wird einmal fuer die
     Eingabe gebraucht, danach nicht mehr. Innerhalb dieses Blocks
     scrollt ausschliesslich die Liste, die Karte bleibt stehen. */
  .buehne {
    grid-template-columns: 1fr;
    grid-template-rows: 42dvh minmax(0, 1fr);
    height: 100dvh;
  }

  #karte { height: auto; order: -1; }

  .liste {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    border-right: none;
    border-top: 1px solid var(--asphalt-600);
  }

  #q { width: 100%; }
  .feld:has(#q) { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}