/* Karte der Schweiz – Gestaltung.

   Arbeitet mit den Tokens aus styles.css (--surface-*, --border, --text-*) und
   ergänzt nur, was die Karte selbst braucht. Die Farbstufen sind gedeckt
   gewählt: Auf einer Karte steht die Lage im Vordergrund, nicht die Farbe. */

:root {
  --karte-stufe-1: #eef2f6;
  --karte-stufe-2: #d6e2ee;
  --karte-stufe-3: #b3cade;
  --karte-stufe-4: #89aecb;
  --karte-stufe-5: #5b8db2;
  /* Gedecktes Grau statt Schwarz: Ein schwarzer Umriss zieht das Auge auf die
     Grenzen, gesucht sind aber die Objekte. */
  --karte-umriss: #7d8b9c;
  --karte-see: #c3d7e6;
  --karte-see-rand: #9fb6c8;
  /* Kantonsgrenzen liegen zwischen Fläche und Landesgrenze: sichtbar, aber
     schwächer als die Aussengrenze – sonst zerfällt das Land optisch. */
  --karte-kanton: #b3bec9;
  --karte-marker: #a4161a;
  --karte-marker-fassung: #ffffff;
  --karte-fokus: #0b6bcb;
}

:root[data-theme="dark"] {
  --karte-stufe-1: #1e2a36;
  --karte-stufe-2: #274257;
  --karte-stufe-3: #2f5c78;
  --karte-stufe-4: #3d7fa3;
  --karte-stufe-5: #63a8ca;
  --karte-umriss: #8a97a6;
  --karte-see: #16303f;
  --karte-see-rand: #2c4d61;
  --karte-kanton: #3a4a58;
  /* Rot und Fassung bleiben gleich: Die weisse Fassung ist genau das Mittel,
     das den Marker auf jeder Füllung trägt – ein zweites Rot bräuchte es nur,
     wenn sie fehlen würde. */
  --karte-marker: #a4161a;
  --karte-marker-fassung: #ffffff;
  --karte-fokus: #6cb2f5;
}

/* ---------- Aufbau ---------- */
.karte-halter {
  display: block;
}

/* Bezug für die Knöpfe, die über der Zeichnung liegen. */
.karte-buehne {
  position: relative;
}

/* Die Karte ist ein Hilfsmittel, nicht der Inhalt.
   Ohne Deckel wächst sie mit der Fensterbreite auf volle Bildschirmhöhe und
   drängt die Objektliste unter die Falz – man sähe dann eine riesige Fläche
   Schweiz und müsste scrollen, um zu erfahren, welche Objekte es überhaupt
   gibt. Der Deckel richtet sich nach der Höhe des Fensters, nicht nach seiner
   Breite, denn genau das ist die knappe Richtung.
   Das SVG selbst behält sein Seitenverhältnis (preserveAspectRatio), es wird
   also nicht gestaucht, sondern kleiner. */
.karte-buehne .karte {
  max-height: min(58vh, 520px);
  width: 100%;
  object-fit: contain;
}

/* Auf dem Telefon ist die Karte im Hochformat ohnehin kaum brauchbar, und der
   Platz gehört der Liste. Sie bleibt nutzbar, nimmt aber weniger als die
   Hälfte des Bildschirms ein. */
@media (max-width: 640px) {
  .karte-buehne .karte { max-height: 42vh; }
}

/* ---------- Fläche ---------- */
.karte {
  display: block;
  width: 100%;
  height: auto;
  /* Die Karte soll den Kartenhintergrund tragen, nicht die Seite darunter:
     So bleibt sie auch in einem Dialog oder auf farbigem Grund lesbar. */
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Ohne das rollt beim Wischen über die Karte die Seite mit und die Karte
     bleibt stehen – auf dem Telefon der häufigste Grund für "die Karte klemmt". */
  touch-action: none;
}

.karte.wird-gezogen {
  cursor: grabbing;
}

.karte-flaeche {
  fill: var(--karte-stufe-1);
  stroke: var(--karte-umriss);
  /* Haarlinie: eine Bildschirmlinie breit, unabhängig von der Darstellungsgrösse.
     Ohne das wird der Umriss auf einer kleinen Karte zum Balken. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.karte-flaeche.stufe-1 { fill: var(--karte-stufe-1); }
.karte-flaeche.stufe-2 { fill: var(--karte-stufe-2); }
.karte-flaeche.stufe-3 { fill: var(--karte-stufe-3); }
.karte-flaeche.stufe-4 { fill: var(--karte-stufe-4); }
.karte-flaeche.stufe-5 { fill: var(--karte-stufe-5); }

.karte-see {
  fill: var(--karte-see);
  stroke: var(--karte-see-rand);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.karte-kanton {
  fill: none;
  stroke: var(--karte-kanton);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

/* ---------- Marken ---------- */
/* Radius und Breite der Fassung setzt karte.js als Attribut, weil beide von der
   Vergrösserung abhängen. Hier stehen nur die Farben – sonst streiten sich
   zwei Stellen um denselben Wert. */
.karte-marke {
  cursor: pointer;
}

/* Nur die sichtbare Scheibe, nicht "jeder Kreis in der Marke": Der Fokusring
   ist ebenfalls ein Kreis und wurde von einer weiter gefassten Regel mit
   eingefärbt – die Marke erschien dadurch dauernd zu gross und weiss umrandet. */
.karte-scheibe {
  fill: var(--karte-marker);
  stroke: var(--karte-marker-fassung);
}

.karte-haeufung-zahl {
  fill: var(--karte-marker-fassung);
  /* Dieselbe Schrift wie die Oberfläche: Eine Karte mit fremder Schrift wirkt
     wie ein eingeklebtes Bild. */
  font-family: inherit;
  /* Die Zahl wird nur gelesen, nie markiert – beim Ziehen sonst blau umrandet. */
  user-select: none;
  pointer-events: none;
}

/* Der Fokusring ist ein eigener Kreis im Markup: Ein CSS-Umriss (outline) um
   eine SVG-Gruppe zeichnen Browser unterschiedlich, teils rechteckig, teils
   gar nicht. Ein Kreis sitzt überall gleich. */
.karte-fokus {
  fill: none;
  stroke: none;
}

.karte-marke:focus {
  /* Der eigene Ring übernimmt, der Standardrahmen würde daneben liegen. */
  outline: none;
}

.karte-marke:focus-visible .karte-fokus {
  stroke: var(--karte-fokus);
}

/* Ausgewählt bleibt sichtbar, auch wenn der Fokus weitergewandert ist –
   sonst weiss niemand mehr, worauf sich die Angaben daneben beziehen. */
.karte-punkt.ist-gewaehlt .karte-fokus {
  stroke: var(--karte-fokus);
}

/* ---------- Bewegung ---------- */
/* Nur Deckkraft und Grösse. Ein Verschieben würde vortäuschen, der Punkt sei
   von woanders hergekommen – auf einer Karte ist das die falsche Aussage.

   Eingeblendet wird nur, was neu ist: Die Klasse "rein" setzt karte.js beim
   Anzeigen einer neuen Objektliste, nicht beim Zoomen oder Verschieben. Sonst
   würde bei jedem Knopfdruck die ganze Karte neu aufflackern. */
.karte-marke.rein {
  transform-box: fill-box;
  transform-origin: center;
  animation: karte-punkt-rein 200ms ease-out both;
}

@keyframes karte-punkt-rein {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

/* Die Staffelung steht in festen Klassen, weil karte.js sie nicht als
   style-Attribut setzen darf – dieses Projekt führt keine style-Attribute im
   Markup. Nach 400 ms ist Schluss: mit den 200 ms Einblenden steht die Reihe
   nach 600 ms, auch wenn hundert Objekte auf der Karte liegen. */
.karte-marke.v0  { animation-delay: 0ms; }
.karte-marke.v1  { animation-delay: 25ms; }
.karte-marke.v2  { animation-delay: 50ms; }
.karte-marke.v3  { animation-delay: 75ms; }
.karte-marke.v4  { animation-delay: 100ms; }
.karte-marke.v5  { animation-delay: 125ms; }
.karte-marke.v6  { animation-delay: 150ms; }
.karte-marke.v7  { animation-delay: 175ms; }
.karte-marke.v8  { animation-delay: 200ms; }
.karte-marke.v9  { animation-delay: 225ms; }
.karte-marke.v10 { animation-delay: 250ms; }
.karte-marke.v11 { animation-delay: 275ms; }
.karte-marke.v12 { animation-delay: 300ms; }
.karte-marke.v13 { animation-delay: 325ms; }
.karte-marke.v14 { animation-delay: 350ms; }
.karte-marke.v15 { animation-delay: 375ms; }
.karte-marke.v16 { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  /* Kein Staffeln, keine Grössenänderung – nur noch aufblenden.
     Das !important muss sein: Die Klassen v0…v16 sind spezifischer als eine
     einzelne Klasse und würden ihre Verzögerung sonst behalten. */
  .karte-marke.rein {
    animation: karte-punkt-blende 200ms ease-out both;
    animation-delay: 0ms !important;
    transform: none;
  }
  @keyframes karte-punkt-blende {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- Bedienung ---------- */
/* Die Knöpfe liegen auf der Karte, nicht darunter: Wer den Ausschnitt sucht,
   schaut auf die Karte und nicht ans Seitenende. */
.karte-steuerung {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 4px;
  padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.karte-knopf {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

.karte-knopf.ist-breit {
  grid-column: 1 / -1;
  height: 28px;
  font-size: .78rem;
}

/* surface-0 ist im hellen wie im dunklen Erscheinungsbild die abgesetzte Fläche –
   damit wird der Knopf unter dem Zeiger in beiden Fassungen sichtbar anders. */
.karte-knopf:hover:not(:disabled) { background: var(--surface-0); }
.karte-knopf:focus-visible { outline: 2px solid var(--karte-fokus); outline-offset: 1px; }

.karte-knopf:disabled {
  /* Nicht ausblenden, nur abschwächen: Ein Knopf, der verschwindet, lässt die
     übrigen springen und man drückt daneben. */
  opacity: .4;
  cursor: default;
}

.karte-stand {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Objekte ohne Standort ---------- */
/* Sie verschwinden nicht, sie stehen daneben. Ein Objekt, das aus der Liste
   fällt, weil niemand seine Koordinaten erfasst hat, wird sonst vergessen –
   und genau das ist das Objekt, bei dem später etwas passiert. */
.karte-fehlend {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.karte-fehlend h3 {
  margin: 0 0 6px;
  font-size: .82rem;
  font-weight: 550;
  color: var(--text-muted);
}

.karte-fehlend ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.karte-fehlend-knopf {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  padding: 5px 9px;
  font: inherit;
  font-size: .84rem;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

.karte-fehlend-knopf:focus-visible { outline: 2px solid var(--karte-fokus); outline-offset: 1px; }

.karte-fehlend-grund {
  font-size: .72rem;
  color: var(--text-muted);
}

/* ---------- Legende ---------- */
/* Eine abgestufte Fläche ohne Legende ist eine Farbtafel ohne Aussage. */
.karte-legende {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: .8rem;
  color: var(--text-secondary);
}
.karte-legende .karte-legende-titel { color: var(--text-muted); }
.karte-legende .karte-legende-skala {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.karte-legende i {
  display: block;
  width: 26px;
  height: 12px;
}
.karte-legende i.stufe-1 { background: var(--karte-stufe-1); }
.karte-legende i.stufe-2 { background: var(--karte-stufe-2); }
.karte-legende i.stufe-3 { background: var(--karte-stufe-3); }
.karte-legende i.stufe-4 { background: var(--karte-stufe-4); }
.karte-legende i.stufe-5 { background: var(--karte-stufe-5); }

/* ---------- Druck ---------- */
@media print {
  /* Helle Fassung erzwingen: Ein dunkler Ausdruck frisst Toner und die
     Abstufung verschwindet im Schwarz. Die Werte stehen hier nochmals,
     damit auch ein Ausdruck aus dem dunklen Erscheinungsbild hell wird. */
  .karte, .karte-legende, .karte-fehlend {
    --karte-stufe-1: #eef2f6;
    --karte-stufe-2: #d6e2ee;
    --karte-stufe-3: #b3cade;
    --karte-stufe-4: #89aecb;
    --karte-stufe-5: #5b8db2;
    --karte-umriss: #7d8b9c;
    --karte-see: #c3d7e6;
    --karte-see-rand: #9fb6c8;
    --karte-kanton: #b3bec9;
    --karte-marker: #a4161a;
    --karte-marker-fassung: #ffffff;
  }
  .karte {
    background: #ffffff;
    border-color: #7d8b9c;
    /* Ohne das lassen Browser beim Drucken die Flächen weg – dann ist die
       Abstufung, wegen der die Karte da ist, nicht mehr zu sehen. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Knöpfe gehören nicht aufs Papier – dort lässt sich nichts drücken. */
  .karte-steuerung { display: none; }
  /* Die Randliste bleibt: Sie gehört zur Aussage des Ausdrucks. */
  .karte-fehlend { background: #ffffff; border-color: #7d8b9c; }
  /* Keine Filter: Sie erzwingen eine Rasterung und machen den Ausdruck unscharf. */
  .karte, .karte * { filter: none !important; }
  /* Auf Papier gibt es keinen Ablauf – jeder Punkt steht sofort. */
  .karte-marke {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}