/*******************************************************************************
 webcams.css – Seite "Webcams in der Region" (wanderungen/webcams/index.html)
 Zusammen mit site.css, kopf.css und leaflet/leaflet.css verwenden (Script: ../js/webcams.js).

 Aufbau der Seite:
   1. Einleitung (kurzer Text)
   2. Karte (Leaflet + swisstopo-Karte), rote Punkte mit Namen, jeder Punkt ist ein Link
   3. Liste aller Webcams (gleiche Links wie auf der Karte; die Liste im HTML ist die einzige
      Datenquelle, das Script liest Name, Link und Koordinaten daraus)

 Alle Einstellungen stehen als Variablen direkt hier unten.
*******************************************************************************/

:root {
  /* --- Karte --- */
  --karte-hoehe: clamp(380px, 62vh, 660px);   /* Höhe der Karte: mind. 380, ideal 62 % der Fensterhöhe, max. 660 px */
  --karte-rand: 1px solid var(--rand);         /* feiner Rahmen um die Karte */

  /* --- roter Punkt --- */
  --punkt-farbe: #d8232a;                      /* Rot des Punktes */
  --punkt-farbe-aktiv: #31db3f;                /* Rot, etwas heller (#ff4048), wenn die Maus darüber ist (Punkt oder Listeneintrag) */
  --punkt-groesse: 22px;                       /* Durchmesser des Punktes */
  --punkt-rand: 2px solid #fff;                /* weisser Rand, damit der Punkt auf jeder Karte sichtbar ist */

  /* --- Beschriftung neben dem Punkt --- */
  --name-hintergrund: rgba(255, 255, 255, .88);
  --name-text: #1b1b1b;
  --name-groesse: 1.1rem;
}

main { padding-top: 24px; }

/* ---------- 1. Einleitung ---------- */
/* Zwei Spalten wie die Beschreibung der Wanderseiten (wanderung.css, .wtext): bis zu 2 Spalten, jede mind. 24 rem breit;
   auf dem Handy steht der Text einspaltig. Jeder Absatz bleibt in einer Spalte (break-inside: avoid). */
.wc-intro { margin: 0 0 20px; columns: 2 24rem; column-gap: 40px; }
.wc-intro p { margin: 0 0 10px; break-inside: avoid; }

/* ---------- 2. Karte ---------- */
#karte {
  height: var(--karte-hoehe);
  border-radius: var(--radius);
  border: var(--karte-rand);
  overflow: hidden;
  background: #e9eef0;        /* Farbe, solange die Kacheln noch laden */
  z-index: 0;                 /* Leaflet-Ebenen sollen nicht über die Seitenelemente ragen */
}
.karte-hinweis { margin: 6px 0 0; font-size: .85rem; color: var(--text-leise); }

/* Marker: Leaflet setzt das Icon-Element auf Grösse 0 am Kartenpunkt; wir zeichnen Punkt und Namen
   relativ dazu. Das Icon-Element selbst ist nicht klickbar (pointer-events), erst der Link darin. */
.cam-icon { width: 0; height: 0; }
.cam {
  position: absolute; left: 0; top: 0;
  pointer-events: auto;
  text-decoration: none; color: var(--name-text);
}
.cam .punkt {
  position: absolute; left: 0; top: 0;
  width: var(--punkt-groesse); height: var(--punkt-groesse);
  margin: calc(var(--punkt-groesse) / -2) 0 0 calc(var(--punkt-groesse) / -2);   /* Punkt genau auf die Koordinate */
  border-radius: 50%;
  background: var(--punkt-farbe); border: var(--punkt-rand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.cam .name {
  position: absolute; white-space: nowrap;
  padding: 1px 7px; border-radius: 4px;
  background: var(--name-hintergrund); color: var(--name-text);
  font-size: var(--name-groesse); font-weight: 600; line-height: 1.35;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* Lage der Beschriftung (HTML: data-pos="r | l | ro | ru | lo | lu"):
   r = rechts, l = links, o = oben, u = unten. Bei dicht beieinander liegenden Webcams
   (z. B. Ibergeregg 1 und 2) die Namen mit ro / ru auseinanderziehen. */
.cam .name             { left: 12px;  top: 0;    transform: translateY(-50%); }   /* r (Standard) */
.cam-l  .name          { left: auto;  right: 12px; }
.cam-ro .name          { top: -10px; }
.cam-ru .name          { top: 10px; }
.cam-lo .name          { left: auto;  right: 12px; top: -10px; }
.cam-lu .name          { left: auto;  right: 12px; top: 10px; }

.cam:hover .punkt, .cam:focus-visible .punkt, .cam.aktiv .punkt { background: var(--punkt-farbe-aktiv); transform: scale(1.25); }
.cam:hover .name, .cam:focus-visible .name, .cam.aktiv .name { background: #fff; text-decoration: underline; }
.cam:focus-visible { outline: none; }
.cam:focus-visible .name { outline: 2px solid var(--gruen); }

/* Namensschilder der Leaflet-Standardsteuerung (Zoom-Knöpfe) etwas größer fürs Handy */
.leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }

/* ---------- 3. Liste ---------- */
.wc-liste { margin-top: 28px; }
.wc-liste h2 { font-size: 1.35rem; color: var(--gruen); margin: 0 0 8px; }
/* Wenn wir nur 3 Spalten wollen, können wir columns: 4 auf 3 ändern. Mindestbreite der Spalte ist 16rem. */
.wc-liste ul { list-style: none; margin: 0; padding: 0; columns: 4 16rem; column-gap: 30px; }
.wc-liste li { break-inside: avoid; margin: 0 0 8px; }
.wc-liste a { color: var(--gruen); font-weight: 600; }
.wc-liste small { display: block; color: var(--text-leise); }

@media (max-width: 600px) {
  .cam .name { font-size: .8rem; }
}