/* Karte Deutschland unter „Über uns“ (Markup: karte-svg.html, Logik: karte.js).
   Ohne JavaScript: statische Gesamtansicht (viewBox in Welteinheiten, Symbole per
   scale() vergrößert, siehe erzeuge_karte.py). Mit JavaScript (.ist-js): viewBox in echten Pixeln,
   alle Größen hier sind dann Bildschirmpixel. */

.karte-gross {
  --karte-meer: #edf0f1;
  --karte-halo: rgba(255, 255, 255, 0.92);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.karte-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: var(--karte-meer);
  border: 1px solid var(--linie, #e4dfd9);
  border-radius: var(--ecke-karte, 12px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.karte-unterschrift { color: var(--text-2, #5c554f); font-size: 0.95rem; line-height: 1.5; }

/* ---------- Landkarte (wird skaliert, Linien bleiben haarfein) ---------- */
.karte-welt path { vector-effect: non-scaling-stroke; fill: none; stroke: none; stroke-linejoin: round; stroke-linecap: round; }
.karte-welt .karte-ausland { fill: #f3f0ec; }
.karte-welt .karte-de { fill: #ffffff; }
.karte-welt .karte-ni { fill: #fdf0eb; }
.karte-welt .karte-see { fill: var(--karte-meer); stroke: #cdd5d9; stroke-width: 0.75px; }
.karte-welt .karte-gitter { stroke: #e9e4de; stroke-width: 1px; }
.karte-welt .karte-fluss { stroke: #b4c8d2; stroke-width: 1.25px; }
.karte-welt .karte-grenze-land { stroke: #c9c2bb; stroke-width: 1px; }
.karte-welt .karte-grenze-ausland { stroke: #d3cdc6; stroke-width: 1px; }
.karte-welt .karte-kueste { stroke: #a9a8a7; stroke-width: 1px; }
.karte-welt .karte-grenze-staat { stroke: #9d9d9c; stroke-width: 1.6px; }

/* ---------- Beschriftung ---------- */
.karte-svg text {
  font-family: var(--text-schrift, "Instrument Sans", Arial, sans-serif);
  font-size: 13px;
  fill: var(--text-2, #5c554f);
  paint-order: stroke;
  stroke: var(--karte-halo);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.karte-gebiet text {
  font-family: var(--display, "Archivo", Arial, sans-serif);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  fill: #a49c95;
  stroke: none;
}
.karte-gebiet-ausland text { fill: #b4ada6; }
.karte-gebiet-meer text { font-family: var(--text-schrift, Arial, sans-serif); font-stretch: 100%; font-style: italic; font-weight: 400; letter-spacing: 0.08em; fill: #8a979e; font-size: 13px; }

.karte-ort .karte-punkt { stroke: #fff; stroke-width: 1.5px; }
.karte-region .karte-punkt { fill: var(--linie-feld, #8e867e); }
.karte-region text { fill: var(--text-2, #5c554f); }
.karte-stadt .karte-punkt { fill: var(--grau, #9d9d9c); }
.karte-stadt text { fill: var(--text-3, #736b64); font-size: 12.5px; }
.karte-kunde .karte-punkt { fill: #fff; stroke: var(--marke, #e74010); stroke-width: 2.5px; }
.karte-kunde .karte-kern { fill: var(--marke, #e74010); }
.karte-kunde text { fill: var(--text, #1a1714); font-weight: 600; font-size: 14px; }
.karte-kunde .karte-zusatz { fill: var(--akzent-text, #c2370d); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.karte-heim .karte-punkt { fill: var(--marke, #e74010); stroke: #fff; stroke-width: 2.5px; }
.karte-heim .karte-kern { fill: #fff; }
.karte-heim .karte-ring { fill: none; stroke: var(--marke, #e74010); stroke-width: 2px; }
.karte-heim .karte-ring:not([opacity]) { stroke-opacity: 0.35; }
.karte-heim text { font-family: var(--display, "Archivo", Arial, sans-serif); font-weight: 700; font-size: 17px; fill: var(--text, #1a1714); stroke-width: 4px; }

/* ---------- Bögen und Pulse ---------- */
.karte-bogen { fill: none; stroke: var(--marke, #e74010); stroke-width: 1.75px; stroke-linecap: butt; vector-effect: non-scaling-stroke; stroke-opacity: 0.85; }
.karte-puls { fill: var(--marke, #e74010); stroke: #fff; stroke-width: 1.5px; }

/* ---------- Maßstab, Legende, Nordpfeil ---------- */
.karte-kasten { fill: rgba(255, 255, 255, 0.94); stroke: var(--linie, #e4dfd9); stroke-width: 1px; }
.karte-massstab text, .karte-legende text { font-size: 12.5px; fill: var(--text-2, #5c554f); stroke: none; }
.karte-massstab-linie { fill: none; stroke: var(--text, #1a1714); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.karte-heim-punkt { fill: var(--marke, #e74010); }
.karte-kunde-punkt { fill: #fff; stroke: var(--marke, #e74010); stroke-width: 2px; }
.karte-kunde-kern { fill: var(--marke, #e74010); }
.karte-nord-pfeil { fill: var(--text-2, #5c554f); }
.karte-nord text { font-family: var(--display, "Archivo", Arial, sans-serif); font-weight: 700; font-size: 12px; fill: var(--text-2, #5c554f); stroke: none; }

/* Ohne JavaScript: Labels, die in der Gesamtansicht kollidieren, ausblenden */
.karte-svg:not(.ist-js) .karte-aus text,
.karte-svg:not(.ist-js) .karte-region { display: none; }
.karte-svg .karte-weg { visibility: hidden; }

/* Handy: mit JavaScript höher statt breiter, ohne JavaScript seitlich scrollbar */
@media (max-width: 700px) {
  .karte-gross { overflow-x: auto; }
  .karte-svg.ist-js { aspect-ratio: 4 / 5; }
  .karte-svg:not(.ist-js) { min-width: 820px; }
}

/* Zoom beim Scrollen (karte.js setzt .karte-faehrt, nur mit Bewegung): Die Karte klebt unter
   der Kopfzeile, solange darunter ein Bildschirm Scrollweg liegt, und zoomt nur in dieser
   Zeit von Hannover auf Deutschland. Vorher lief der Zoom, während erst die Oberkante im
   Bild war; auf Laptops sah man ihn kaum (Daniel, 14.10.2026). Der Spielraum ist ::after
   im eigenen Rahmen .karte-buehne (sticky klebt nie im Padding, und ohne den Rahmen
   klebte die Karte bis über die Bildunterschrift). */
.karte-buehne { min-width: 0; }
.karte-buehne .karte-svg { display: block; }
.karte-faehrt .karte-svg { position: sticky; top: 72px; max-height: calc(100svh - 84px); }
.karte-faehrt::after { content: ""; display: block; height: 100svh; }
@media (max-width: 700px) {
  .karte-gross.karte-zoom { overflow-x: visible; }  /* overflow am Vorfahren hebt sticky auf */
  .karte-faehrt::after { height: 80svh; }
}

/* Einbau unter „Über uns“, nach den Ansprechpartnern (seit 06.10.2026, vorher im Kontakt) */
#ueber .karte-gross { margin-top: clamp(32px, 5vw, 56px); }