/*******************************************************************************
 wanderungen_uebersicht.css – Übersichtsseite der Wanderungen (wanderungen/index.html)
 Kartenraster (Kopf: kopf.css). Bilder der Karten: 560 x 420 px (4:3), ohne Schatten.

 Aufbau einer Karte im HTML:

   <li class="karte">
     <img src="..." width="560" height="420" ...>      Bild (4:3), nicht selbst ein Link
     <div class="tx">
       <h3><a href="...">Name der Wanderung</a></h3>   Titel (dieser Link macht die ganze Karte klickbar)
       <dl>
         <div><dt>Wanderzeit</dt><dd>5 h 30 min</dd></div>      1. Kennzahl
         <div><dt>Höhendifferenz</dt><dd>1200 m</dd></div>      2. Kennzahl
         <div><dt>Ausgangspunkt</dt><dd>Ort</dd></div>          3. Angabe (volle Breite)
       </dl>
     </div>
   </li>

 Masse: "rem" = Vielfaches der Basis-Schriftgrösse (normal 16 px, also 1rem = 16 px,
 .9rem = ca. 14,4 px). "px" sind feste Bildschirmpunkte.
 Farben/Radius kommen aus site.css: --gruen, --rand, --text-leise, --bg, --radius.
*******************************************************************************/

/* ---------- Variable für das Ort-Symbol ----------
   Das Symbol (Stecknadel) ist ein kleines SVG-Bild, direkt als Text eingebettet (data:-URL).
   Es wird unten als "Maske" benutzt: Die Form der Nadel wird mit der Textfarbe gefüllt,
   dadurch ist das Symbol immer in der gleichen Farbe wie der Text (hier: grün). */
:root {
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* ---------- Kartenraster ---------- */

/* Die Liste ist ein CSS-Grid: Die Karten ordnen sich automatisch in Spalten an.
   - list-style/margin/padding: Aufzählungspunkte und Standardabstände der Liste entfernen
     (margin: 28px oben = Abstand zum Banner).
   - gap: 20px = Abstand zwischen den Karten (waagrecht und senkrecht).
   - repeat(auto-fill, minmax(min(100%, 260px), 1fr)):
       "Fülle die Zeile mit so vielen Spalten wie Platz haben, jede mindestens 260 px breit,
        und verteile den Rest gleichmässig (1fr)."
       Ergebnis: bei 1200 px Breite 4 Spalten, dann 3, 2, 1, je nach Fensterbreite.
       min(100%, 260px) verhindert, dass eine Spalte auf sehr schmalen Handys breiter
       als der Bildschirm wird. */
.karten {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Eine einzelne Karte (Rahmen, abgerundete Ecken).
   - position: relative: Bezugspunkt für den unsichtbaren Link über der ganzen Karte (siehe h3 a::after).
   - overflow: hidden: schneidet das Bild an den abgerundeten Ecken ab.
   - transition: Hover-Bewegung (unten) läuft sanft in 0,15 Sekunden ab. */
.karte {
  position: relative;
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
  background: var(--bg);
  transition: transform .15s, box-shadow .15s;
}

/* Maus darüber (hover) oder Tastatur-Fokus auf dem Link (focus-within):
   Karte hebt sich 3 px nach oben (translateY negativ = nach oben) und wirft einen Schatten.
   Schatten: 0 = nicht seitlich verschoben, 8px nach unten, 22px weich, 18 % schwarz. */
.karte:hover, .karte:focus-within { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.18); }

/* Kartenbild: immer volle Kartenbreite, Seitenverhältnis 4:3.
   object-fit: cover = Bild füllt die Fläche, zu viel wird abgeschnitten (nie verzerrt).
   (width/height im HTML sind nur Platzreservierung, die Grösse bestimmt dieses CSS.) */
.karte img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Textbereich unter dem Bild. Padding = Innenabstand: oben 12, links/rechts 14, unten 16 px. */
.karte .tx { padding: 12px 14px 16px; }

/* Titel der Wanderung: 1.15rem ≈ 18,4 px; line-height 1.25 = enger Zeilenabstand
   (wichtig bei zweizeiligen Titeln); margin-bottom 8px = Abstand zu den Angaben. */
.karte h3 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.25; }
.karte h3 a { color: var(--gruen); text-decoration: none; }

/* Trick "ganze Karte klickbar": Der Link bekommt ein unsichtbares Pseudo-Element (::after),
   das mit inset: 0 (oben/unten/links/rechts = 0) die ganze Karte überdeckt, weil die
   Karte position: relative hat. Ein Klick irgendwo auf der Karte trifft so den Link. */
.karte h3 a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Angaben (dl = Beschreibungsliste) ----------
   Anordnung:  [ Wanderzeit ] [ Höhendifferenz ]     Zeile 1: zwei Kennzahlen nebeneinander
               ------------------------------        feine Trennlinie
               Symbol Ausgangspunkt                  Zeile 2: Label mit Symbol, darunter der Ort
   Im HTML steht pro Feld erst das Label (dt), dann der Wert (dd). */

/* Zwei gleich breite Spalten (1fr 1fr). gap: 10px zwischen den Zeilen, 12px zwischen den Spalten.
   font-size .9rem ≈ 14,4 px ist die Grundgrösse für den Inhalt. */
.karte dl { margin: 0; font-size: .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

/* Jedes Feld (div) ist eine senkrechte Spalte. column-reverse dreht die Reihenfolge um:
   Im HTML steht dt (Label) vor dd (Wert), angezeigt wird aber der Wert oben und das Label darunter. */
.karte dl div { display: flex; flex-direction: column-reverse; }
.karte dd { margin: 0; }

/* Label (dt): klein und grau. .78rem ≈ 12,5 px. */
.karte dt { font-size: .78rem; color: var(--text-leise); }

/* Nur die ersten zwei Felder (Wanderzeit, Höhendifferenz) werden als Kennzahl hervorgehoben.
   :nth-child(-n+2) heisst "die Kinder Nr. 1 und 2". Gross (1.05rem ≈ 16,8 px), fett (700), grün. */
.karte dl div:nth-child(-n+2) dd { font-size: 1.05rem; font-weight: 700; color: var(--gruen); line-height: 1.2; }

/* Zusatzinfo in einem Wert, z. B. <dd>5 h 30 min<small>+ 40 min mit Spitzmeilen</small></dd>:
   steht klein und grau in einer eigenen Zeile unter dem Wert. */
.karte dd small { display: block; font-size: .75rem; font-weight: 400; color: var(--text-leise); line-height: 1.3; }

/* Drittes Feld (Ausgangspunkt):
   - grid-column: 1 / -1 = geht über beide Spalten (von der ersten bis zur letzten Gitterlinie).
   - flex-direction: column = hier normale Reihenfolge: Label oben, Ort darunter
     (hebt das column-reverse von oben wieder auf).
   - border-top + padding-top: feine Trennlinie über dem Feld mit etwas Luft darunter. */
.karte dl div:nth-child(3) { grid-column: 1 / -1; flex-direction: column; border-top: 1px solid var(--rand); padding-top: 8px; }

/* Label "Ausgangspunkt": grün und halbfett (600) statt grau. */
.karte dl div:nth-child(3) dt { color: var(--gruen); font-weight: 600; }

/* Das Ort-Symbol vor dem Label "Ausgangspunkt" (::before = Element vor dem Text):
   - Quadrat von 1.05em (etwas grösser als die Schrift), mit kleinem Abstand rechts.
   - vertical-align: -.15em schiebt es leicht nach unten, damit es optisch auf der Textlinie sitzt.
   - background: currentColor = Fläche in der aktuellen Textfarbe (grün).
   - mask: schneidet diese Fläche in die Form der Stecknadel (--pin) zu. "center / contain
     no-repeat" = zentriert, ganz sichtbar, nicht wiederholt. Die "-webkit-"-Zeile ist die
     Variante für ältere Safari-/Chrome-Versionen. */
.karte dl div:nth-child(3) dt::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .35em; vertical-align: -.15em;
  background: currentColor; -webkit-mask: var(--pin) center / contain no-repeat; mask: var(--pin) center / contain no-repeat;
}

/* ---------- Handy (Fenster bis 520 px breit) ----------
   Jede Karte wird zweispaltig: Bild links (38 % der Kartenbreite), Text rechts.
   Das Bild ist dann so hoch wie der Text (height: 100%) und wird zugeschnitten
   (aspect-ratio: auto hebt das feste 4:3 auf). */
@media (max-width: 520px) {
  .karte { display: grid; grid-template-columns: 38% 1fr; }
  .karte img { height: 100%; aspect-ratio: auto; }
  /* Rechte Bildecken (Übergang zum Text) abrunden: Die linken Ecken rundet schon die Karte (overflow: hidden),
     die rechten stossen an die Textspalte und blieben sonst eckig. Radius = Kartenradius minus 1 px Rahmen. */
  .karte img { border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; }
}

/*******************************************************************************
 Einleitung, Kantons-Abschnitte und Filter (Stand 2026-11-01)

 Aufbau im HTML (wanderungen/index.html):
   <section class="intro">                       Einleitungstext in 2 Spalten
   <div class="filter filter-fix" id="filter">   Filter-Knöpfe (werden vom Skript am Seitenende erzeugt)
   <section class="kanton" id="gl">              pro Kanton ein Abschnitt
     <h2 class="kanton-titel">Glarus <span class="anzahl">6 Wanderungen</span></h2>
     <ul class="karten"> … </ul>                 die Kacheln (Titel der Wanderung ist ein h3)
   Neuer Kanton = neuer <section class="kanton"> mit id und h2: der Filter-Knopf entsteht von selbst.
   Reihenfolge innerhalb eines Kantons: neueste Wanderung zuerst.
*******************************************************************************/

/* ---------- Einstellbare Werte ---------- */
:root {
  --intro-abstand: 24px;           /* Abstand Banner -> Einleitung */
  --kanton-abstand: 44px;          /* Abstand oberhalb eines Kantons-Abschnitts */
  --kanton-titel-groesse: 1.5rem;  /* Schriftgrösse Kantonsname (1rem = 16 px) */
  --kanton-linie: 2px;             /* Dicke der Linie unter dem Kantonsnamen */
  --filter-linie: 2px;             /* Dicke des Umrisses der Filter-Knöpfe (1px = dünn, 2px = kräftig) */
}

/* ---------- Einleitungstext ---------- */
/* Zwei Spalten wie die Beschreibung auf den Wanderseiten (wanderung.css, .wtext): "columns: 2 24rem" = bis zu 2 Spalten,
   jede mindestens 24rem (ca. 384 px) breit; ist der Platz kleiner (Handy), steht der Text einspaltig.
   column-gap = Abstand zwischen den Spalten. */
.intro {
  margin: var(--intro-abstand) 0 0;
  columns: 2 24rem; column-gap: 40px;
}
.intro p { margin: 0 0 10px; }
/* "Bitte beachten Sie:": grün und fett (wie die Titel der Kacheln: --gruen). break-after: avoid = die Zeile bleibt nie allein am Spaltenende. */
.intro .intro-titel { color: var(--gruen); font-weight: 700; break-after: avoid; }
/* Zweispaltig (ab ca. 840 px Fensterbreite): Der Einleitungstext steht links, "Bitte beachten Sie:" mit der Liste beginnt
   oben in der rechten Spalte. break-before: column = hier immer eine neue Spalte beginnen.
   Nur in der Media-Query, denn bei einspaltiger Anzeige (Handy) würde die erzwungene Spalte seitlich aus der Seite laufen. */
@media (min-width: 840px) {
  .intro .intro-titel { break-before: column; margin-top: 0; }
}
.intro ul { margin: 0 0 10px; padding-left: 1.2em; }
.intro li { margin-bottom: 4px; }
/* Ein Listenpunkt oder Absatz soll nicht mitten durch zwei Spalten gerissen werden. */
.intro p, .intro li { break-inside: avoid; }

/* ---------- Kantons-Abschnitte ---------- */
/* Jeder Kanton ist ein <section class="kanton">. --kanton-abstand = Abstand zwischen den Abschnitten; die Kartenliste
   rückt näher an den Titel (die Grundregel .karten oben hat 28 px). scroll-margin-top: Beim Sprung auf einen Abschnitt
   bleibt Platz für die klebende Filterleiste. */
.kanton { margin-top: var(--kanton-abstand); scroll-margin-top: 70px; }
.kanton .karten { margin-top: 16px; }

/* Kantonsname (h2) mit Linie darunter; die Anzahl steht klein und grau rechts daneben. */
.kanton-titel {
  margin: 0; padding-bottom: 6px;
  font-size: var(--kanton-titel-groesse); line-height: 1.2; color: var(--gruen);
  border-bottom: var(--kanton-linie) solid var(--gruen);
}
.kanton-titel .anzahl { margin-left: .5em; font-size: .85rem; font-weight: 400; color: var(--text-leise); }

/* ---------- Filter-Knöpfe ---------- */
/* Die Knöpfe werden von JavaScript eingeblendet (ohne JavaScript bleibt die Zeile versteckt und alle Kantone sind sichtbar).
   Der aktive Knopf ist grün gefüllt (aria-pressed="true"). */
.filter { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.filter[hidden] { display: none; }
.filter button {
  font: inherit; font-size: .95rem; cursor: pointer;
  padding: 6px 14px; border-radius: 20px;
  border: var(--filter-linie) solid var(--gruen); background: var(--bg); color: var(--gruen);
}
.filter button:hover { background: var(--gruen-hell); color: #fff; border-color: var(--gruen-hell); }
.filter button[aria-pressed="true"] { background: var(--gruen); color: #fff; }
.filter button:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
/* Anzahl hinter dem Kantonsnamen: gleiche Farbe, Grösse und Hover-Farbe wie der Text (erbt alles vom Knopf), nur ein kleiner Abstand. */
.filter .anzahl { margin-left: .3em; }
/* Filterleiste bleibt beim Scrollen oben stehen: position: sticky = klebt am oberen Fensterrand, sobald man daran
   vorbeiscrollt; der Hintergrund deckt die Karten darunter ab. */
.filter-fix {
  position: sticky; top: 0; z-index: 5;
  margin-top: 20px; padding: 10px 0;
  background: var(--bg); border-bottom: 1px solid var(--rand);
}
.filter-fix[hidden] { display: none; }
/* Ausgeblendete Kantone (hidden-Attribut) sicher verstecken, auch wenn eine andere Regel display setzt. */
.kanton[hidden] { display: none; }
/* Wird nur ein Kanton gezeigt, ist der Kantonstitel überflüssig (der Knopf nennt ihn schon): kleinerer Abstand. */
.filter-einzeln .kanton { margin-top: 20px; }