/* ==========================================================================
   PULSWERK · Einsatzorte (Stadtseiten, NRW-Seite, Übersicht /einsatzorte/)
   Kopffeld css: seiten/einsatzorte.css. Bausteine aus werkzeuge/einsatzorte-erzeugen.py:
     .passt      „Passt dazu“ unter jedem Abschnitt einer Stadtseite (Links zu Leistungen und Branchen)
     .quellen    Quellen zu den Ortsangaben am Ende des Fließtexts
     .nrwkarte   große Karte: Grundbild + SVG-Ebene mit Punkten, Namen und Links
                 (Desktop alle Namen, unter 700 px nur die groß lesbaren, die übrigen Punkte bleiben klickbar)
     .ortsliste  Städte nach Regionen auf /einsatzorte/
   ========================================================================== */

/* ---------- Karte im Seitenkopf: immer ganz zeigen, Rand in der Grundfarbe der Karte ---------- */
.seitenkopf__bild > .bild--karte,
.seitenkopf__bild > picture > .bild--karte { object-fit: contain; background: #15191D; }

/* ---------- Auftakt der Aufgaben (zweiter Einleitungsabsatz) ---------- */
.fliesstext > .auftakt { margin-bottom: 1.6em; font-size: clamp(18px, .3vw + 16px, 20px); line-height: 1.55; color: var(--c-text); }

/* ---------- Passt dazu ---------- */
.passt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 1.1em 0 0;
}
.passt__titel {
  margin: 0;
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .01em;
  color: var(--c-gedaempft);
}
.fliesstext .passt__liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fliesstext .passt__liste > li { margin: 0; padding: 0; }
.fliesstext .passt__liste > li::before { content: none; }
.fliesstext a.passt__link {
  display: inline-block;
  padding: 6px 12px 7px;
  border: 1px solid var(--linie-stark);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.fliesstext a.passt__link:hover { border-color: var(--c-link); color: var(--c-link); }

/* ---------- Quellen ---------- */
.quellen { margin-top: 2.6em; padding-top: 18px; border-top: 1px solid var(--c-linie); }
.quellen__titel { margin: 0 0 10px; font: 500 12.5px/1.3 var(--schrift-mono); letter-spacing: .01em; color: var(--c-gedaempft); }
.fliesstext .quellen__liste { margin: 0 0 10px; }
.fliesstext .quellen__liste > li { margin-bottom: .35em; padding-left: 16px; font-size: 14.5px; line-height: 1.45; }
.fliesstext .quellen__liste > li::before { top: .5em; width: 6px; height: 6px; }
.fliesstext .quellen__liste a { color: var(--c-gedaempft); }
.fliesstext .quellen__liste a:hover { color: var(--c-link); }
.quellen__stand { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-gedaempft); }

/* ---------- Große Karte ---------- */
.nrwkarte { max-width: 1000px; margin: clamp(28px, 3vw, 48px) auto 0; }
.nrwkarte__flaeche { position: relative; border: 1px solid var(--linie); background: #15191D; }
.nrwkarte__grund { display: block; width: 100%; height: auto; }
.nrwkarte__ebene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nrwkarte__ort { cursor: pointer; }
.nrwkarte__ort:focus { outline: none; }
.nrwkarte__klick { fill: transparent; }
.nrwkarte__punkt { fill: var(--text); stroke: #15191D; stroke-width: 2; transition: fill .15s; }
.nrwkarte__raute { fill: var(--flaeche); stroke: var(--gelb); stroke-width: 3.5; }
.nrwkarte__raute-kern { fill: var(--gelb); }
.nrwkarte__name {
  font-family: var(--schrift-display);
  font-weight: 700;
  fill: var(--text);
  paint-order: stroke;
  stroke: #15191D;
  stroke-width: 5px;
  stroke-linejoin: round;
  transition: fill .15s;
}
.nrwkarte__zusatz {
  font-family: var(--schrift-mono);
  font-weight: 500;
  fill: var(--text-gedaempft);
  paint-order: stroke;
  stroke: #15191D;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.nrwkarte__fuehrung { stroke: var(--text-gedaempft); stroke-width: 1.2; }
.nrwkarte__ort:hover .nrwkarte__punkt,
.nrwkarte__ort:focus-visible .nrwkarte__punkt { fill: var(--gelb); }
.nrwkarte__ort:hover .nrwkarte__name,
.nrwkarte__ort:focus-visible .nrwkarte__name { fill: var(--gelb); }
.nrwkarte__ort:hover .nrwkarte__fuehrung,
.nrwkarte__ort:focus-visible .nrwkarte__fuehrung { stroke: var(--gelb); }
.nrwkarte__ort:focus-visible .nrwkarte__klick { stroke: var(--gelb); stroke-width: 3; }
.nrwkarte__nur-mobil { display: none; }
@media (max-width: 699px) {
  .nrwkarte__nur-desktop { display: none; }
  .nrwkarte__nur-mobil { display: inline; }
}
.nrwkarte__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
  font: 500 12.5px/1.4 var(--schrift-mono);
  letter-spacing: .01em;
  color: var(--c-gedaempft);
}
.nrwkarte__eintrag { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; }
.nrwkarte__zeichen { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.nrwkarte__zeichen--raute { border-radius: 0; background: var(--gelb); transform: rotate(45deg) scale(.85); }

/* ---------- Ortsliste nach Regionen ---------- */
.ortsliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 28px var(--luecke);
  margin-top: clamp(32px, 3.4vw, 52px);
}
.ortsliste__region {
  margin: 0 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-linie);
  font: 500 12.5px/1.3 var(--schrift-mono);
  letter-spacing: .01em;
  color: var(--c-gedaempft);
}
.ortsliste__liste { margin: 0; padding: 0; list-style: none; }
.ortsliste__link {
  display: inline-block;
  padding: 5px 0;
  font: 600 clamp(18px, .35vw + 16px, 21px)/1.25 var(--schrift-text);
  color: var(--c-text);
  text-decoration: none;
}
.ortsliste__link:hover { color: var(--c-link); }
@media (min-width: 700px) {
  .ortsliste__gruppe--breit { grid-column: span 2; }
  .ortsliste__gruppe--breit .ortsliste__liste { columns: 2; column-gap: var(--luecke); }
}

/* ---------- Ortssuche über der Karte (js/ortssuche.js; ohne JavaScript verborgen) ---------- */
.ortssuche { position: relative; max-width: 620px; margin: 0 auto clamp(18px, 2vw, 26px); }
.ortssuche[hidden] { display: none; }
.ortssuche__label { display: block; margin-bottom: 10px; font: 600 clamp(18px, .4vw + 16px, 21px)/1.3 var(--schrift-text); color: var(--c-text); }
.ortssuche__zeile { display: flex; gap: 10px; }
.ortssuche__feld {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--c-rand-feld, var(--rand-feld));
  border-radius: 0;
  background: var(--c-feld, var(--grund));
  color: var(--c-text);
  font: 400 18px/1.4 var(--schrift-text);
}
.ortssuche__feld::placeholder { color: var(--c-platzhalter, var(--text-gedaempft)); }
.ortssuche__feld:focus { outline: none; border-color: var(--gelb); box-shadow: 0 0 0 1px var(--gelb); }
.ortssuche .knopf { flex: none; }
.ortssuche__liste {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
.ortssuche__liste[hidden] { display: none; }
.ortssuche__treffer {
  display: block;
  padding: 10px 16px;
  color: var(--text);
  font: 600 17px/1.3 var(--schrift-text);
  text-decoration: none;
}
.ortssuche__treffer:hover,
.ortssuche__treffer:focus { outline: none; background: var(--flaeche-hoch); color: var(--gelb); }
.ortssuche__hinweis { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--c-gedaempft); }
.ortssuche__hinweis:empty { display: none; }
.ortssuche__hinweis a { color: var(--c-link); }
@media (max-width: 479px) {
  .ortssuche__zeile { flex-direction: column; }
  .ortssuche .knopf { justify-content: center; }
}
/* Treffer auf der Karte: gelb und größer, der Rest tritt zurück */
.nrwkarte--sucht .nrwkarte__ort { opacity: .35; transition: opacity .15s; }
.nrwkarte--sucht .nrwkarte__ort.ist-treffer { opacity: 1; }
.nrwkarte__ort.ist-treffer .nrwkarte__punkt { fill: var(--gelb); }
.nrwkarte__ort.ist-treffer .nrwkarte__name { fill: var(--gelb); }