/* Karte der Schweiz – Gestaltung.

   Arbeitet mit den Tokens aus styles.css (--surface-*, --border, --text-*,
   --dur-*, --easing) und ergaenzt nur, was die Karte selbst braucht.

   ---------------------------------------------------------------------------
   DIE FUENF STUFEN – und was sie bedeuten

   Eine Fachkarte unterscheidet sich von einer Werbekarte nicht durch weniger
   Farbe, sondern dadurch, dass jede Farbe fuer etwas steht. Grosse Flaechen
   bleiben gedaempft und treten zurueck, gesaettigte Farbe ist einem einzigen,
   kleinen Ding vorbehalten – dem, das man sucht. Genau davon lebt der Ruf der
   Schweizer Kartografie: wenige, ruhige Toene, eine klare Rangfolge, und ein
   Signal, das man nicht suchen muss.

   Darum sind die Stufen hier keine Farbtafel, sondern eine Rangfolge nach
   Naehe zum Auge. Jede Stufe hat eine Entsprechung in echten Daten:

     Stufe 1  Aussenraum   ausserhalb der Landesgrenze   (Umkehrung von LAND)
     Stufe 2  Landflaeche  Schweizer Boden               (LAND aus ch-umriss.js)
     Stufe 3  Wasser       die erfassten Seen            (SEEN aus ch-umriss.js)
     Stufe 4  Grenzlinie   die Landesgrenze selbst       (Kontur von LAND)
     Stufe 5  Objektmarke  ein bewachtes Objekt          (die Punkte)

   Bewusst NICHT eingefaerbt wird, wozu keine Daten vorliegen: keine
   Bevoelkerungsdichte, kein Relief, keine Hoehenstufen, keine Kantone. Eine
   Einfaerbung, die etwas zeigt, das niemand gemessen hat, ist eine Luege in
   Farbe – auf einer Karte fuer Sicherheitsdienste die teuerste Sorte.

   Die einzige zusaetzliche Abstufung innerhalb der Signalfarbe ist die
   Haeufung (--karte-marke-mehr): "hier liegen mehrere Objekte". Auch das ist
   gemessen und nicht erfunden, und die Farbe traegt es nicht allein – die
   Marke ist groesser und traegt die Anzahl als Zahl.

   Alle Kontrastwerte sind nachgerechnet (WCAG-Verhaeltnis) und stehen bei den
   Werten. Verlangt sind mindestens 3:1 fuer die Marken gegen jede Flaeche, auf
   der sie liegen koennen. */

:root {
  /* Stufe 1 – Aussenraum. Etwas dunkler als das Land: Damit wird die Schweiz
     zur Figur und der Rest zum Grund, ohne dass ein harter Rahmen noetig
     waere. Kuehles Grau statt Blau, sonst liest man das Umland als Wasser. */
  --karte-aussen: #dfe5ec;
  /* Stufe 2 – Landflaeche. Die hellste Flaeche der Karte. Sie ist der Grund,
     auf dem fast jede Marke liegt, und je heller sie ist, desto weniger muss
     die Marke schreien. */
  --karte-land: #f6f9fc;
  /* Stufe 3 – Wasser. Ein Schritt tiefer als das Land und deutlich blauer.
     Zurueckhaltend: Seen sind Orientierung, nicht Inhalt. */
  --karte-wasser: #cddfee;
  --karte-wasser-rand: #8fadc6;
  /* Stufe 4 – Landesgrenze. Traegt die Trennung als Linie, damit sie nicht
     allein von der Farbe abhaengt (Stufe 1 zu 2 ist bewusst ein leiser
     Sprung). Gedecktes Blaugrau statt Schwarz: Eine schwarze Grenze zieht das
     Auge auf den Rand, gesucht sind aber die Objekte. */
  --karte-grenze: #6d7f92;
  /* Stufe 5 – Objektmarke. Die einzige gesaettigte Farbe der Karte. */
  --karte-marke: #a4161a;
  /* Mehrere Objekte an einer Stelle: derselbe Ton, eine Stufe tiefer. */
  --karte-marke-mehr: #7d1013;
  /* Die Fassung ist ein Ausschnitt im Kartenton, kein eigener Farbwert: Sie
     traegt die Marke ueber jede Flaeche, ohne eine sechste Farbe einzufuehren. */
  --karte-marke-fassung: #ffffff;
  /* Kantonsgrenzen: Der Wert steht bereit, gezeichnet wird nichts – KANTONE in
     ch-umriss.js ist leer und bleibt es, bis amtliche Geometrien da sind. */
  --karte-kanton: #b3bec9;
  --karte-fokus: #0b6bcb;
}

:root[data-theme="dark"] {
  --karte-aussen: #10161e;
  --karte-land: #1b2531;
  --karte-wasser: #16303f;
  --karte-wasser-rand: #2f5670;
  --karte-grenze: #8593a3;
  /* Das Rot der hellen Fassung erreicht auf dunklem Grund nur 1,9:1 und faellt
     damit unter die geforderten 3:1 – rechnerisch, nicht nach Gefuehl. Rot ist
     von Natur aus dunkel, ein dunklerer Grund hilft nicht. Darum derselbe Ton
     bei hoeherer Helligkeit: 3,6:1 auf dem Land, 3,2:1 ueber Wasser. */
  --karte-marke: #e0393c;
  --karte-marke-mehr: #ef5b4e;
  /* Die Fassung dreht mit: Im Dunkeln ist der Ausschnitt dunkel. Eine weisse
     Fassung waere im Dunkeln der hellste Punkt der ganzen Karte – das Auge
     ginge zum Ring statt zur Marke. */
  --karte-marke-fassung: #0b0f15;
  --karte-kanton: #3a4a58;
  --karte-fokus: #6cb2f5;
}

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

/* Bezug fuer die Knoepfe, die ueber der Zeichnung liegen. */
.karte-buehne {
  position: relative;
}

/* Die Karte ist ein Hilfsmittel, nicht der Inhalt.
   Ohne Deckel waechst sie mit der Fensterbreite auf volle Bildschirmhoehe und
   draengt die Objektliste unter die Falz – man saehe dann eine riesige Flaeche
   Schweiz und muesste scrollen, um zu erfahren, welche Objekte es ueberhaupt
   gibt. Der Deckel richtet sich nach der Hoehe des Fensters, nicht nach seiner
   Breite, denn genau das ist die knappe Richtung.
   Das SVG selbst behaelt sein Seitenverhaeltnis (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 gehoert der Liste. Sie bleibt nutzbar, nimmt aber weniger als die
   Haelfte des Bildschirms ein. */
@media (max-width: 640px) {
  .karte-buehne .karte { max-height: 42vh; }
}

/* ---------- Stufe 1: Aussenraum ---------- */
.karte {
  display: block;
  width: 100%;
  height: auto;
  /* Der Hintergrund des SVG IST der Aussenraum: Was der Landpfad nicht
     ueberdeckt, liegt ausserhalb der Grenze. Damit kostet Stufe 1 kein
     zusaetzliches Element und stimmt bei jedem Ausschnitt automatisch –
     zoomt man ganz ins Land hinein, ist sie folgerichtig gar nicht zu sehen. */
  background: var(--karte-aussen);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Ohne das rollt beim Wischen ueber die Karte die Seite mit und die Karte
     bleibt stehen – auf dem Telefon der haeufigste Grund fuer "die Karte klemmt". */
  touch-action: none;
}

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

/* ---------- Stufe 2: Landflaeche, Stufe 4: Grenzlinie ---------- */
.karte-flaeche {
  fill: var(--karte-land);
  stroke: var(--karte-grenze);
  /* Haarlinie: eine Bildschirmlinie breit, unabhaengig von der Darstellungsgroesse.
     Ohne das wird der Umriss auf einer kleinen Karte zum Balken. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* ---------- Stufe 3: Wasser ---------- */
.karte-see {
  fill: var(--karte-wasser);
  stroke: var(--karte-wasser-rand);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* Kantonsgrenzen liegen zwischen Flaeche und Landesgrenze: sichtbar, aber
   schwaecher als die Aussengrenze – sonst zerfaellt das Land optisch.
   Zeichnet heute niemand, weil es die Daten nicht gibt (siehe ch-umriss.js). */
.karte-kanton {
  fill: none;
  stroke: var(--karte-kanton);
  stroke-width: .6;
  vector-effect: non-scaling-stroke;
}

/* ---------- Stufe 5: Marken ---------- */
/* Radius und Breite der Fassung setzt karte.js als Attribut, weil beide von der
   Vergroesserung abhaengen. 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
   eingefaerbt – die Marke erschien dadurch dauernd zu gross und weiss umrandet. */
.karte-scheibe {
  fill: var(--karte-marke);
  stroke: var(--karte-marke-fassung);
}

/* Mehrere Objekte an einer Stelle: derselbe Ton, eine Stufe tiefer.
   Die Farbe ist die dritte Anzeige, nicht die erste – die Marke ist groesser,
   traegt die Anzahl als Zahl und sagt es im aria-label. Wer den Unterschied
   zwischen den beiden Rot nicht sieht, verliert nichts. */
.karte-haeufung .karte-scheibe {
  fill: var(--karte-marke-mehr);
}

.karte-haeufung-zahl {
  fill: var(--karte-marke-fassung);
  /* Dieselbe Schrift wie die Oberflaeche: 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 ueberall gleich. */
.karte-fokus {
  fill: none;
  stroke: none;
}

.karte-marke:focus {
  /* Der eigene Ring uebernimmt, der Standardrahmen wuerde daneben liegen. */
  outline: none;
}

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

/* Ausgewaehlt bleibt sichtbar, auch wenn der Fokus weitergewandert ist –
   sonst weiss niemand mehr, worauf sich die Angaben daneben beziehen.
   Dickere Linie als beim Fokus: "ausgewaehlt" und "gerade unter dem Finger"
   sind zwei verschiedene Aussagen und duerfen nicht gleich aussehen. Die
   Unterscheidung haengt an der Strichbreite, nicht an der Farbe. */
.karte-punkt.ist-gewaehlt .karte-fokus {
  stroke: var(--karte-fokus);
  stroke-width: 3;
}

/* ---------- Bewegung ---------- */
/* Nur Deckkraft und Groesse. Ein Verschieben wuerde vortaeuschen, 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
   wuerde 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 fuehrt 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; }

/* Der einzige weitere Uebergang der Karte: die Fassung waechst unter dem
   Zeiger. Bewusst KEIN Farbwechsel – jede Farbe dieser Karte hat eine
   Bedeutung, und eine Marke, die unter dem Zeiger die Farbe der Haeufung
   annimmt, sagt fuer einen Moment etwas Falsches. Die Dicke der Fassung
   bedeutet nichts, darum darf sie sich bewegen.

   Der Startwert (1.5) kommt aus dem Praesentationsattribut, das karte.js
   setzt; er wird hier nicht wiederholt, sonst streiten sich zwei Stellen um
   denselben Wert. r bleibt ganz aussen vor: karte.js schreibt den Radius bei
   jedem Ziehschritt neu, ein Uebergang darauf liesse die Karte zappeln.
   Nichts davon laeuft von selbst, nichts wiederholt sich, nichts blinkt. */
.karte-marke:hover .karte-scheibe {
  stroke-width: 2.6;
}

@media (prefers-reduced-motion: no-preference) {
  .karte-scheibe {
    transition: stroke-width var(--dur-schnell) var(--easing);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Staffeln, keine Groessenaenderung – nur noch aufblenden.
     Das !important muss sein: Die Klassen v0…v16 sind spezifischer als eine
     einzelne Klasse und wuerden ihre Verzoegerung 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 Knoepfe 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 Flaeche –
   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 abschwaechen: Ein Knopf, der verschwindet, laesst die
     uebrigen springen und man drueckt 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
   faellt, weil niemand seine Koordinaten erfasst hat, wird sonst vergessen –
   und genau das ist das Objekt, bei dem spaeter 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);
}

/* ---------- Zeichenerklaerung ---------- */
/* Abgestufte Flaechen ohne Erklaerung sind eine Farbtafel ohne Aussage.
   Jede Stufe steht hier mit ihrem Wort daneben – damit ist die Farbe nie der
   einzige Traeger, auch nicht in der Erklaerung selbst. */
.karte-legende {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: .8rem;
  color: var(--text-secondary);
}
.karte-legende .karte-legende-titel { color: var(--text-muted); }

.karte-legende-eintrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Ein Feld mit sichtbarer Fassung: Die hellste Stufe waere auf hellem Grund
   sonst ein unsichtbares Quadrat. */
.karte-legende i {
  display: block;
  width: 22px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  flex: none;
}
.karte-legende i.ist-aussen { background: var(--karte-aussen); }
.karte-legende i.ist-land { background: var(--karte-land); }
.karte-legende i.ist-wasser { background: var(--karte-wasser); border-color: var(--karte-wasser-rand); }
/* Die Grenze ist eine Linie, kein Feld – sie wird auch so gezeigt. */
.karte-legende i.ist-grenze {
  background: var(--karte-land);
  border: 0;
  border-top: 2px solid var(--karte-grenze);
  height: 2px;
  border-radius: 0;
}
/* Die Marken sind Scheiben, kein Feld. */
.karte-legende i.ist-marke,
.karte-legende i.ist-marke-mehr {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--karte-marke-fassung);
}
.karte-legende i.ist-marke { background: var(--karte-marke); }
.karte-legende i.ist-marke-mehr { background: var(--karte-marke-mehr); }

/* ---------- 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.
     Auf Papier ist die Landflaeche weiss und nur der Aussenraum leicht
     getoent: Das spart Toner und ist zugleich die aeltere und ruhigere
     Fassung derselben Rangfolge. */
  .karte, .karte-legende, .karte-fehlend {
    --karte-aussen: #eef1f5;
    --karte-land: #ffffff;
    --karte-wasser: #d8e6f1;
    --karte-wasser-rand: #8fadc6;
    --karte-grenze: #55606c;
    --karte-marke: #a4161a;
    --karte-marke-mehr: #7d1013;
    --karte-marke-fassung: #ffffff;
    --karte-kanton: #b3bec9;
  }
  .karte {
    background: #eef1f5;
    border-color: #55606c;
    /* Ohne das lassen Browser beim Drucken die Flaechen weg – dann ist die
       Abstufung, wegen der die Karte da ist, nicht mehr zu sehen. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Knoepfe gehoeren nicht aufs Papier – dort laesst sich nichts druecken. */
  .karte-steuerung { display: none; }
  /* Die Randliste bleibt: Sie gehoert zur Aussage des Ausdrucks. */
  .karte-fehlend { background: #ffffff; border-color: #55606c; }
  /* 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, und nichts
     reagiert auf einen Zeiger, den es dort nicht gibt. */
  .karte-marke {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}