/* ==========================================================================
   wshw.ch – zentrales Stylesheet
   Aufbau:  1 Variablen · 2 Grundlagen · 3 Kopf · 4 Navigation · 5 Inhalt
            6 Kacheln · 7 Karte · 8 Fuss · 9 Hilfsklassen
            10 Verwaltung · 11 Dunkelmodus (muss zuletzt stehen)
   ========================================================================== */

/* 1 Variablen ------------------------------------------------------------ */

:root {
  /* Farben – hell */
  --papier:        #faf8f5;   /* Seitenhintergrund, leicht warm */
  --flaeche:       #ffffff;   /* Kacheln, Karten */
  --flaeche-still: #f1eee9;   /* zurückgenommene Flächen */
  --linie:         #e2ddd5;
  --linie-stark:   #cdc6bb;
  --tinte:         #1f1d1a;   /* Fliesstext */
  --tinte-still:   #6b655c;   /* Nebentext */
  --akzent:        #c2412f;   /* Pin-Rot – der einzige Farbtupfer */
  --akzent-still:  #f3e3e0;
  --fokus:         #2f6fb0;

  /* Schrift */
  --schrift-text:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: ui-serif, Georgia, "Iowan Old Style", "Times New Roman",
                   serif;
  --schrift-zahl:  ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* Grössen */
  --gr-klein:  0.875rem;
  --gr-text:   1.0625rem;
  --gr-gross:  1.375rem;
  --gr-titel:  clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);

  /* Abstände */
  --a1: 0.25rem;
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;
  --a7: 3rem;
  --a8: 4.5rem;

  /* Formen */
  --rund:       10px;
  --rund-klein: 6px;
  --schatten:   0 1px 2px rgb(31 29 26 / 0.05),
                0 6px 20px -10px rgb(31 29 26 / 0.18);

  /* Masse */
  --breite:      68rem;
  --breite-text: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:        #16171a;
    --flaeche:       #1e2024;
    --flaeche-still: #24272c;
    --linie:         #2e3238;
    --linie-stark:   #434951;
    --tinte:         #e9e6e1;
    --tinte-still:   #a09a92;
    --akzent:        #e2695a;
    --akzent-still:  #33231f;
    --fokus:         #7fb0e6;
    --schatten:      0 1px 2px rgb(0 0 0 / 0.4),
                     0 6px 20px -10px rgb(0 0 0 / 0.7);
  }
}

/* 2 Grundlagen ----------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Damit Sprungziele nicht unter dem festen Kopf verschwinden. */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--a3);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--gr-titel); }
h2 { font-size: var(--gr-gross); }
h3 { font-size: 1.0625rem; font-family: var(--schrift-text); font-weight: 600; }

p { margin: 0 0 var(--a4); }

a {
  color: inherit;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: var(--akzent); }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--rund-klein);
}

img { max-width: 100%; height: auto; }

/* 3 Kopf ----------------------------------------------------------------- */

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: var(--a2);
  background: var(--flaeche);
  color: var(--tinte);
  padding: var(--a2) var(--a4);
  border-radius: var(--rund-klein);
  box-shadow: var(--schatten);
  z-index: 100;
}

.sprungmarke:focus { left: var(--a4); }

.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a3) var(--a5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a3) var(--a5);
}

.marke {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--a3);
}

.marke__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Der Kilroy liegt als schwarzes PNG vor. Im Dunkelmodus wird er
   umgekehrt, statt eine zweite Bilddatei zu pflegen. */
.marke__bild {
  width: 4.5rem;
  height: auto;
  flex: none;
}

.marke__name {
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marke__untertitel {
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* 4 Navigation ----------------------------------------------------------- */

.navigation__liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1);
  margin: 0;
  padding: 0;
}

.navigation__link {
  display: block;
  padding: var(--a2) var(--a3);
  border-radius: var(--rund-klein);
  font-size: var(--gr-klein);
  text-decoration: none;
  color: var(--tinte-still);
}

.navigation__link:hover {
  background: var(--flaeche-still);
  color: var(--tinte);
}

.navigation__link--aktiv {
  color: var(--tinte);
  background: var(--flaeche-still);
  font-weight: 600;
}

/* 5 Inhalt --------------------------------------------------------------- */

.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a7) var(--a5) var(--a8);
}

.inhalt--breit { max-width: 88rem; }

.leitsatz {
  max-width: var(--breite-text);
  color: var(--tinte-still);
  font-size: 1.1875rem;
  margin-bottom: var(--a6);
}

.abschnitt { margin-top: var(--a7); }

/* Fliesstext und Aufzählungen – bisher brauchte das keine Seite,
   das Impressum schon. */
.fliess {
  max-width: var(--breite-text);
  margin: 0 0 var(--a4);
}

ul.fliess {
  padding-left: var(--a5);
}

ul.fliess li { margin-bottom: var(--a2); }

/* Zwischenüberschrift innerhalb eines Abschnitts. */
.unter {
  max-width: var(--breite-text);
  margin: var(--a6) 0 var(--a2);
  font-size: var(--gr-gross);
}

.unter:first-of-type { margin-top: var(--a4); }

.abschnitt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a4);
  margin-bottom: var(--a4);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--linie);
}

.abschnitt__kopf h2 { margin: 0; }

.hinweis {
  display: inline-block;
  padding: var(--a1) var(--a3);
  border-radius: 999px;
  background: var(--akzent-still);
  color: var(--akzent);
  font-size: var(--gr-klein);
  font-weight: 600;
  white-space: nowrap;
}

/* Erklärender Kleintext unter einer Überschrift oder einem Feld.
   Nicht .hinweis nehmen – das ist eine Pille für kurze Beschriftungen
   und bricht wegen `white-space: nowrap` nicht um. */
.notiz {
  max-width: var(--breite-text);
  margin: 0;
  font-size: var(--gr-klein);
  font-weight: 400;
  color: var(--tinte-still);
}

.notiz code {
  font-family: var(--schrift-zahl);
  font-size: 0.95em;
}

/* Steht nach .hinweis, damit die Werte hier gewinnen. */
.hinweis--link { text-decoration: none; }

.hinweis--link:hover {
  background: var(--akzent);
  color: var(--papier);
}

/* 5b Merkmale ------------------------------------------------------------
   Die Kenndaten eines Ortes unter dem Titel: Art, Land, Kanton, Höhe,
   Koordinaten. Jede Angabe eine eigene Pille – so fällt nicht auf, dass
   bei den meisten Orten die Hälfte davon fehlt. */

.merkmale {
  list-style: none;
  margin: calc(-1 * var(--a2)) 0 var(--a6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
}

.merkmal {
  display: inline-flex;
  align-items: baseline;
  gap: var(--a2);
  padding: var(--a1) var(--a3);
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: var(--gr-klein);
  white-space: nowrap;
}

.merkmal__was  { color: var(--tinte-still); }
.merkmal__wert { font-weight: 600; }

.merkmal__wert--zahl {
  font-family: var(--schrift-zahl);
  font-weight: 400;
}

/* 6 Kacheln -------------------------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--a4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ab Tabletbreite fix drei Spalten: die sechs Kacheln sollen 3 × 2
   stehen, nicht 4 + 2. */
@media (min-width: 56rem) {
  .kacheln { grid-template-columns: repeat(3, 1fr); }
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  height: 100%;
  padding: var(--a5);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

.kachel:hover {
  border-color: var(--linie-stark);
  box-shadow: var(--schatten);
  transform: translateY(-2px);
}

.kachel__titel {
  display: flex;
  align-items: center;
  gap: var(--a2);
  font-weight: 600;
}

.kachel__text {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

.kachel__extern {
  margin-top: auto;
  padding-top: var(--a2);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

.symbol {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--akzent);
}

/* Zahlenkacheln – auf der Statistikseite und in der Verwaltung. */
.kacheln--zahlen { margin-bottom: var(--a6); }

.zahl {
  padding: var(--a5);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
  text-align: center;
}

.zahl__wert {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 2rem;
  color: var(--akzent);
  line-height: 1.2;
}

.zahl__text {
  display: block;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* 6b Hinweiskasten -------------------------------------------------------- */

.warnung {
  max-width: var(--breite-text);
  padding: var(--a3) var(--a4);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-still);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  font-size: var(--gr-klein);
}

/* 6b2 Zuletzt gesteckt ---------------------------------------------------- */

.zaehler {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
  text-align: right;
}

.letzte {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--breite-text);
}

.letzte__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--a3);
  padding: var(--a3) 0;
  border-bottom: 1px solid var(--linie);
}

.letzte__ort { font-weight: 600; }

a.letzte__ort {
  color: inherit;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 3px;
}

a.letzte__ort:hover { color: var(--akzent); }

.letzte__art {
  font-size: var(--gr-klein);
  color: var(--akzent);
}

/* Der rechte Platz der Zeile: still, einzeilig, wechselnder Inhalt –
   die Reise, die Art des Ortes, eine Anzahl. */
.letzte__neben {
  margin-left: auto;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
  white-space: nowrap;
}

.letzte__datum {
  font-family: var(--schrift-zahl);
  color: var(--tinte-still);
}

.letzte__datum::before { content: ' · '; }

.letzte__notiz {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* Eine Reihe kleiner Bilder – in der Zeilenliste und in den
   Verwaltungstabellen. */
.bildstreifen {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a1);
}

.bildstreifen img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--rund-klein);
  border: 1px solid var(--linie);
  display: block;
}

.bildstreifen__mehr {
  font-family: var(--schrift-zahl);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* Der Bilderstreifen darf die Zeile umbrechen, nicht sprengen. */
.letzte__zeile .bildstreifen { flex-basis: 100%; }

.letzte__zeile .bildstreifen img {
  width: 4rem;
  height: 3rem;
}

/* 6b2b Galerie -----------------------------------------------------------
   Alle Bilder zu einem Ort, gross genug zum Anschauen. Der Streifen oben
   ist eine Vorschau in einer Zeile, das hier ist die Sammlung. */

.galerie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--a3);
}

.galerie a {
  display: block;
  border-radius: var(--rund);
}

.galerie img {
  width: 100%;
  /* Feste Form, damit das Raster nicht springt, solange die Bilder laden. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche-still);
}

.galerie a:hover img { border-color: var(--akzent); }

/* 6b3 Balkendiagramm ------------------------------------------------------ */

.balken {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--breite-text);
  display: grid;
  gap: var(--a2);
}

.balken__zeile {
  display: grid;
  /* Name – Balken – Zahl. Die Namensspalte fix, damit die Balken
     untereinander an derselben Stelle beginnen. */
  grid-template-columns: 9rem 1fr 2.5rem;
  align-items: center;
  gap: var(--a3);
}

.balken__name {
  font-size: var(--gr-klein);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balken__stab {
  height: 0.75rem;
  border-radius: 999px;
  background: var(--flaeche-still);
  overflow: hidden;
}

.balken__fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--akzent);
  min-width: 2px;
}

.balken__zahl {
  font-family: var(--schrift-zahl);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
  text-align: right;
}

@media (max-width: 34rem) {
  .balken__zeile { grid-template-columns: 6.5rem 1fr 2rem; }
}

/* 6c Kilroy-Versteck ------------------------------------------------------ */

.kacheln > li { position: relative; }

.kilroy-versteck {
  position: absolute;
  top: 0;
  right: 1.75rem;
  width: 4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(-46%);
  opacity: 0.5;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

.kilroy-versteck--links {
  right: auto;
  left: 1.75rem;
}

.kilroy-versteck:hover,
.kilroy-versteck:focus-visible { opacity: 1; }

/* Der Umzug: weggeduckt hinter die Kante, unsichtbar. Derselbe Zustand
   dient als Start des neuen Verstecks – von dort zieht es sich hoch.

   Doppelte Klasse mit Absicht: beim Wegducken liegt der Mauszeiger noch
   auf dem eben geklickten Knopf, und `:hover` würde die Deckkraft sonst
   auf 1 halten. Gleiche Spezifität, aber später notiert – hier gewinnt. */
.kilroy-versteck.kilroy-versteck--versteckt {
  transform: translateY(0%) scale(0.4);
  opacity: 0;
  pointer-events: none;
}

.kilroy-versteck img {
  display: block;
  width: 100%;
  height: auto;
}

.kilroy-spruch {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 10;
  padding: var(--a2) var(--a3);
  background: var(--tinte);
  color: var(--papier);
  border-radius: var(--rund-klein);
  font-size: var(--gr-klein);
  white-space: nowrap;
  box-shadow: var(--schatten);
}

/* 6d Panorama-Band -------------------------------------------------------- */

.abschluss {
  flex: none;
  position: relative;
}

.abschluss__kilroy {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: min(15rem, 55vw);
  height: auto;
  /* Die Mauerlinie im Bild liegt auf knapp der halben Bildhöhe. */
  transform: translate(-50%, -48%);
  pointer-events: none;
  user-select: none;
  /* Halo, damit die Strichzeichnung auch auf hellem Schnee und dunklem
     Fels lesbar bleibt. */
  filter: drop-shadow(0 0 4px rgb(250 248 245 / 0.95));
}

.band {
  width: 100%;
  height: clamp(9rem, 22vw, 17rem);
  overflow: hidden;
  background: var(--flaeche-still);
}

.band__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
  filter: saturate(0.15) contrast(1.02);
  transition: filter 0.6s ease;
}

.band:hover .band__bild { filter: saturate(1) contrast(1); }

/* 7 Karte ---------------------------------------------------------------- */

.karte {
  aspect-ratio: 16 / 10;
  /* min-height zusammen mit aspect-ratio kann die Breite aufblähen –
     darum die Breite ausdrücklich deckeln. */
  width: 100%;
  max-width: 100%;
  min-height: 20rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche-still);
  overflow: hidden;
}

/* Platzhalter, solange die Karte noch nicht gebaut ist (Schritt 3). */
.karte--platzhalter {
  display: grid;
  place-content: center;
  gap: var(--a2);
  text-align: center;
  padding: var(--a5);
  color: var(--tinte-still);
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  background-position: -1px -1px;
}

.karte--platzhalter .symbol {
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
}

/* 7a Filter über der Karte ------------------------------------------------ */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a2);
  margin-bottom: var(--a3);
}

.filter__beschriftung {
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

.filter__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  padding: var(--a1) var(--a3);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte-still);
  font-family: inherit;
  font-size: var(--gr-klein);
  cursor: pointer;
}

.filter__zahl {
  font-family: var(--schrift-zahl);
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* Eingeschaltet ist der Normalfall – ausgeschaltet wird zurückgenommen. */
.filter__knopf[aria-pressed="true"] {
  border-color: var(--akzent);
  background: var(--akzent-still);
  color: var(--akzent);
  font-weight: 600;
}

.filter__knopf[aria-pressed="false"] {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* 7a2 Das Kartenspiel ----------------------------------------------------- */

.spiel {
  display: grid;
  gap: var(--a4);
}

.spiel__frage {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  line-height: 1.3;
  /* Zwei Zeilen Platz von Anfang an: sonst springt die Karte hoch und
     runter, sobald ein längerer Ländername kommt. */
  min-height: 2.6em;
}

.spiel__frage strong { color: var(--akzent); }

.spiel__fuss {
  display: grid;
  gap: var(--a3);
}

.spiel__antwort {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
  /* Auch hier feste Höhe, damit der Knopf beim Auflösen nicht wandert. */
  min-height: 2.8em;
}

.spiel__antwort--gut      { color: #3f8f5b; font-weight: 600; }
.spiel__antwort--schlecht { color: var(--akzent); }

.spiel__ende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a4);
}

.spiel__stand {
  font-family: var(--schrift-zahl);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* Der Knopf ganz nach rechts, der Stand bleibt links stehen. */
.spiel__ende .knopf { margin-left: auto; }

.spiel__ende .knopf:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
}

/* Der Umschalter zwischen den beiden Modi. Sieht aus wie der Kartenfilter,
   aber ohne den Durchstrich: hier ist nichts ausgeschaltet, hier ist nur
   eines von zweien gewählt. */
.spiel__wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  padding: var(--a1) var(--a3);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte-still);
  font-family: inherit;
  font-size: var(--gr-klein);
  cursor: pointer;
}

.spiel__wahl[aria-pressed="true"] {
  border-color: var(--akzent);
  background: var(--akzent-still);
  color: var(--akzent);
  font-weight: 600;
}

/* Der gesetzte Tipp: ein Fadenkreuz, damit er nicht mit dem Pin der
   Auflösung zu verwechseln ist. */
.tipp svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: var(--tinte);
  stroke-width: 1.8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px var(--papier));
}

/* 7b Leaflet an den Rest der Seite anpassen -------------------------------
   Leaflet bringt eigene Schriften und Farben mit. Hier wird nur so viel
   überschrieben, dass die Karte zur Seite passt. */

.leaflet-container {
  font-family: var(--schrift-text);
  background: var(--flaeche-still);
}

/* Der Pin: die einzige kräftige Farbe auf der ganzen Karte. */
.pin svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: var(--akzent);
  stroke: var(--papier);
  stroke-width: 1.1;
  filter: drop-shadow(0 1px 2px rgb(31 29 26 / 0.35));
}

.pin svg circle {
  fill: var(--papier);
  stroke: none;
}

/* Der Punkt, um den es auf einer Ortsseite geht. Er wächst von der
   Spitze nach oben, damit er weiterhin genau auf der Stelle steht. */
.pin--fest svg {
  transform: scale(1.35);
  transform-origin: 50% 100%;
  stroke-width: 1.4;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: var(--schatten);
}

.leaflet-popup-content-wrapper { border-radius: var(--rund); }

.leaflet-popup-content {
  margin: var(--a4);
  font-size: var(--gr-klein);
  line-height: 1.5;
}

.pop__titel {
  margin: 0 0 var(--a1);
  font-family: var(--schrift-titel);
  font-size: 1.0625rem;
}

.pop__hoehe,
.pop__leer {
  margin: 0 0 var(--a2);
  color: var(--tinte-still);
}

.pop__liste {
  list-style: none;
  margin: var(--a2) 0 0;
  padding: 0;
}

.pop__liste li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1) var(--a3);
  padding: var(--a2) 0;
  border-top: 1px solid var(--linie);
}

.pop__art   { color: var(--akzent); }
.pop__text  { flex-basis: 100%; color: var(--tinte-still); }

/* Die Reise – und nur sie trägt das Datum, nicht der einzelne Besuch. */
.pop__reise {
  margin-left: auto;
  color: var(--tinte-still);
  text-align: right;
}

.pop__bilder {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1);
  margin-top: var(--a1);
}

.pop__bilder img {
  width: 4rem;
  height: 3rem;
  object-fit: cover;
  border-radius: var(--rund-klein);
  display: block;
}

/* Der Weg vom Popup auf die Ortsseite. */
.pop__mehr {
  margin: var(--a3) 0 0;
  padding-top: var(--a2);
  border-top: 1px solid var(--linie);
}

.pop__mehr a {
  color: var(--akzent);
  font-weight: 600;
  text-decoration: none;
}

.pop__mehr a::after { content: ' \2192'; }

.pop__mehr a:hover { text-decoration: underline; }

/* Der Sprungknopf Schweiz → Europa → Welt. */
.karten-knopf {
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font-family: inherit;
  font-size: var(--gr-klein);
  cursor: pointer;
  box-shadow: var(--schatten);
}

.karten-knopf:hover { border-color: var(--akzent); color: var(--akzent); }

.leaflet-control-attribution {
  background: rgb(255 255 255 / 0.78);
  font-size: 11px;
}

.leaflet-control-attribution a { color: inherit; }

/* 8 Fuss ----------------------------------------------------------------- */

.fuss {
  flex: none;
  border-top: 1px solid var(--linie);
  background: var(--papier);
}

.fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--a5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2) var(--a5);
  justify-content: space-between;
}

.fuss__text {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

.fuss__punkt {
  margin: 0 var(--a2);
  color: var(--linie-stark);
}

/* 9 Hilfsklassen --------------------------------------------------------- */

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 34rem) {
  .inhalt { padding: var(--a5) var(--a4) var(--a7); }
  .kopf__innen { padding: var(--a3) var(--a4); }
  .kachel { padding: var(--a4); }
}

/* 10 Verwaltung ----------------------------------------------------------- */

/* Die Leiste über jeder Verwaltungsseite. */
.werkzeug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a3);
  margin-bottom: var(--a5);
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--linie);
}

.werkzeug__weg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a1);
}

.werkzeug__ende { margin-left: auto; }

.werkzeug__link {
  padding: var(--a2) var(--a3);
  border-radius: var(--rund-klein);
  color: var(--tinte-still);
  text-decoration: none;
  font-size: var(--gr-klein);
}

.werkzeug__link:hover { background: var(--flaeche-still); color: var(--tinte); }

.werkzeug__link--aktiv {
  background: var(--akzent-still);
  color: var(--akzent);
  font-weight: 600;
}

/* Rückmeldung nach dem Speichern. */
.meldung {
  max-width: var(--breite-text);
  margin: 0 0 var(--a5);
  padding: var(--a3) var(--a4);
  border-left: 3px solid var(--linie-stark);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
  background: var(--flaeche-still);
  font-size: var(--gr-klein);
}

.meldung p { margin: 0; }
.meldung p + p { margin-top: var(--a1); }

.meldung--gut      { border-left-color: #3f8f5b; }
.meldung--schlecht { border-left-color: var(--akzent); background: var(--akzent-still); }

/* Formulare ---------------------------------------------------------------- */

.formular {
  max-width: var(--breite-text);
  display: grid;
  gap: var(--a5);
}

.formular--schmal { max-width: 26rem; }

.feld {
  display: grid;
  gap: var(--a2);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;   /* sonst sprengt ein fieldset das Raster */
}

.feld--paar {
  grid-template-columns: 1fr 1fr;
  gap: var(--a4);
}

.feld--paar > div { display: grid; gap: var(--a2); }

.feld label,
.feld legend {
  font-size: var(--gr-klein);
  font-weight: 600;
  padding: 0;
}

.feld__still { font-weight: 400; color: var(--tinte-still); }

.feld__fest {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

input[type="text"],
input[type="search"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: var(--a3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  /* Unter 16px zoomt iOS beim Antippen in das Feld hinein. */
  font-size: 1rem;
}

textarea { resize: vertical; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 1px;
}

.formular__ende {
  display: flex;
  gap: var(--a3);
  align-items: center;
}

/* Die Kästchen für die Art des Besuchs. */
.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a2);
}

/* Mit .feld davor, weil `.feld label` sonst die Schriftstärke gewinnt. */
.feld .wahl__eins {
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  font-size: var(--gr-klein);
  font-weight: 400;
  cursor: pointer;
}

.feld .wahl__eins:has(input:checked) {
  border-color: var(--akzent);
  background: var(--akzent-still);
  color: var(--akzent);
}

.wahl__eins input { accent-color: var(--akzent); }

/* Bilder ------------------------------------------------------------------- */

input[type="file"] {
  width: 100%;
  padding: var(--a3);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--rund-klein);
  background: var(--flaeche-still);
  font: inherit;
  font-size: var(--gr-klein);
}

.bildwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.feld .bildwahl__eins {
  display: grid;
  gap: var(--a1);
  width: 8rem;
  font-weight: 400;
  cursor: pointer;
}

.bildwahl__eins img {
  width: 8rem;
  height: 6rem;
  object-fit: cover;
  border-radius: var(--rund-klein);
  border: 1px solid var(--linie);
  background: var(--flaeche-still);
}

.bildwahl__weg {
  display: flex;
  align-items: center;
  gap: var(--a1);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* Angehakt heisst: kommt weg. Das soll man sehen, bevor man speichert. */
.bildwahl__eins:has(input:checked) img {
  opacity: 0.35;
  border-color: var(--akzent);
}

.bildwahl__eins:has(input:checked) .bildwahl__weg { color: var(--akzent); }

/* Knöpfe ------------------------------------------------------------------- */

.knopf {
  display: inline-block;
  padding: var(--a3) var(--a5);
  border: 1px solid var(--akzent);
  border-radius: var(--rund-klein);
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-size: var(--gr-klein);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.knopf:hover { filter: brightness(1.08); }

.knopf--still {
  background: var(--flaeche);
  border-color: var(--linie-stark);
  color: var(--tinte);
}

.knopf--klein { padding: var(--a1) var(--a3); font-weight: 400; }

.knopf--warnung {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--tinte-still);
}

.knopf--warnung:hover {
  border-color: var(--akzent);
  color: var(--akzent);
  filter: none;
}

/* Ortssuche ---------------------------------------------------------------- */

.suche { display: grid; gap: var(--a2); }

.suche__zeile { display: flex; gap: var(--a2); }
.suche__zeile .knopf { flex: none; }

.treffer {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  overflow: hidden;
}

.treffer__knopf {
  display: block;
  width: 100%;
  padding: var(--a2) var(--a3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--gr-klein);
  text-align: left;
  cursor: pointer;
}

.treffer__knopf:hover { background: var(--flaeche-still); }

.treffer li + li { border-top: 1px solid var(--linie); }

.treffer__still {
  padding: var(--a2) var(--a3);
  font-size: var(--gr-klein);
  color: var(--tinte-still);
}

/* Die Karte im Ortsformular – wie .karte, nur flacher. */
.pinkarte {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 16rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche-still);
}

/* Tabellen ----------------------------------------------------------------- */

/* Am Handy ist die Tabelle breiter als der Schirm – sie scrollt für sich,
   damit nicht die ganze Seite wandert. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--flaeche);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gr-klein);
}

.tabelle th,
.tabelle td {
  padding: var(--a3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
}

.tabelle thead th {
  font-size: var(--gr-klein);
  color: var(--tinte-still);
  font-weight: 600;
  white-space: nowrap;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle__still {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 0.8em;
  font-weight: 400;
  color: var(--tinte-still);
}

.tabelle__fehlt {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--akzent);
}

.tabelle__zahl { font-family: var(--schrift-zahl); white-space: nowrap; }

.tabelle__notiz { color: var(--tinte-still); max-width: 18rem; }

/* Kein `display: flex` auf der Zelle – damit fällt sie aus dem
   Tabellenraster und die Knöpfe stehen neben der Tabelle statt darin. */
.tabelle__tun {
  text-align: right;
  white-space: nowrap;
}

.tabelle__tun form {
  display: inline;
  margin: 0;
}

.tabelle__tun .knopf + .knopf,
.tabelle__tun form .knopf { margin-left: var(--a2); }

.erklaerung {
  max-width: var(--breite-text);
  margin: 0;
}

.erklaerung dt { font-weight: 600; margin-top: var(--a4); }
.erklaerung dd { margin: var(--a1) 0 0; color: var(--tinte-still); }

@media (max-width: 34rem) {
  .feld--paar { grid-template-columns: 1fr; }
}

/* 11 Dunkelmodus, Bilder ---------------------------------------------------
   Steht bewusst am Schluss: die Regeln überschreiben `filter` aus den
   Abschnitten oben und müssen darum später kommen. */

@media (prefers-color-scheme: dark) {
  /* Schwarze Strichzeichnungen umkehren, damit sie hell erscheinen. */
  .marke__bild,
  .kilroy-versteck img { filter: invert(1); }

  /* Erst umkehren, dann der Halo – sonst wird auch er umgekehrt. */
  .abschluss__kilroy {
    filter: invert(1) drop-shadow(0 0 4px rgb(0 0 0 / 0.85));
  }
}