/* Der Aufbau — gemeinsam fuer alle .earth-Karten.

   Hier steht, wie eine Seite GEBAUT ist: Raster, Abstaende, Chips,
   Knoepfe, Klappen, Formulare, Umbruchpunkte. Nicht, wie sie AUSSIEHT.
   Farben und Schriften kommen aus dem Merkmalssatz, den jede Seite in
   ihrem thema.css setzt und das nach dieser Datei geladen wird.

   Die Grenze ist nicht nach Gefuehl gezogen:

   * Gleicher Wert bei beiden Seiten               -> hier.
   * Schrift oder Farbe, verschieden               -> Thema der Seite.
   * Sonst verschieden, aber erkennbar dasselbe
     gemeint (10px gegen 8px)                      -> hier, EIN Wert.
   * Sonst verschieden und wirklich zweierlei
     (`block` gegen `flex`, 240px gegen 300px)     -> Thema, und auf die
                                                      Liste im README.

   Draussen bleibt, wo die Reihenfolge ueber das Ergebnis entscheidet:
   `:root`, Selektoren, die in einer Datei mehrfach stehen, und Regeln
   mit einer Kurzschreibweise neben einer ihrer Einzelformen.

   Nachgerechnet wurde, dass Grundstil + Thema fuer jede Kombination aus
   @-Block, Selektor und Eigenschaft genau das ergibt, was vorher in
   stil.css stand — bis auf 49 Angleichungen an fiesta, die einzeln
   aufgeschrieben sind.

   Diese Datei wird aus erde.gemein abgeglichen. Aendern in
   erde.gemein/quellen/grundstil.css, danach dort
   `python abgleich.py --schreiben`. */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  line-height: 1.6;
  font-weight: 450;
}
a {
  text-decoration-thickness: .07em;
  text-underline-offset: .2em;
}
img, svg {
  max-width: 100%;
}
code {
  font-family: var(--schrift-fest);
  font-size: .9em;
  background: var(--flaeche-2);
  padding: .1em .4em;
  border-radius: 6px;
}
.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.springen {
  position: absolute;
  left: -9999px;
}
.springen:focus {
  left: 8px;
  top: 8px;
  z-index: 99;
  padding: .6em 1em;
  border-radius: var(--r-voll-rolle);
}
:focus-visible {
  border-radius: 6px;
}
/* ---------- Kopf ---------------------------------------------------------
   Eine Zeile, immer. Unter 900 px klappt die Navigation hinter einen Knopf
   (siehe app.js). Ohne JavaScript bleibt sie sichtbar — das ist der Grund,
   warum das Einklappen an der Klasse `mitjs` hängt und nicht am Bildschirm
   allein.
   ---------------------------------------------------------------------- */
.kopf {
  display: flex;
  align-items: center;
  padding: 12px clamp(14px, 4vw, 28px);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 40;
}
.logo {
  width: 30px;
  height: 30px;
  flex: none;
}
.leiste {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.leiste a {
  padding: .4em .8em;
  border-radius: var(--r-voll-rolle);
  text-decoration: none;
  color: var(--tinte-leise);
  font-weight: 700;
  white-space: nowrap;
}
.leiste a:hover {
  color: var(--tinte);
}
.merkzahl {
  color: var(--auf-marke);
  border-radius: var(--r-voll-rolle);
  padding: 0 .4em;
  font-size: .74em;
  margin-left: .25em;
}
.sprachwahl {
  display: flex;
}
.sprachwahl a {
  padding: .3em .5em;
  border-radius: 7px;
  font-weight: 800;
  text-decoration: none;
  color: var(--tinte-leise);
}
/* Der Menüknopf: nur mit JavaScript und nur auf schmalen Bildschirmen. */
.menuknopf {
  display: none;
  margin-left: auto;
  flex: none;
  align-items: center;
  gap: .45em;
  background: var(--flaeche);
  color: var(--tinte);
  border-radius: var(--r-voll-rolle);
  padding: .42em .85em .42em .7em;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
.burger {
  display: block;
  width: 17px;
  height: 11px;
  position: relative;
}
[aria-expanded="true"] .burger::before {
  transform: translateY(4.4px) rotate(45deg);
}
[aria-expanded="true"] .burger span {
  opacity: 0;
}
[aria-expanded="true"] .burger::after {
  transform: translateY(-4.6px) rotate(-45deg);
}
/* ---------- Rahmen ---------- */
.inhalt {
  max-width: var(--breit);
  margin: 0 auto;
}
.seitenkopf {
  margin-bottom: 1.6em;
}
.unter {
  color: var(--tinte-leise);
}
.leise {
  color: var(--tinte-leise);
}
.klein {
  font-size: .88rem;
}
.brot {
  color: var(--tinte-leise);
  margin-bottom: 1em;
}
.brot a {
  color: var(--tinte-leise);
  text-decoration: none;
}
.text {
  max-width: 42rem;
}
.text h2 {
  margin-top: 1.8em;
}
.text ul {
  padding-left: 1.2em;
}
.hinweis {
  padding: .7em 1em;
  margin: 1em 0;
}
.leer {
  color: var(--tinte-leise);
}
.knopf.sekundaer {
  color: var(--tinte);
}
.knopf.sekundaer:hover {
  color: var(--tinte);
}
.knopf.leise {
  background: transparent;
  color: var(--tinte-leise);
}
.knopf.leise:hover {
  color: var(--tinte);
}
.knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Wonach eine Ortsliste sortiert ist — eine Zeile, direkt unter der
   Überschrift und deutlich leiser als sie. Ohne den Satz sieht eine nach
   Entfernung geordnete Liste aus wie eine ungeordnete. */
.ordnung {
  margin: -.5em 0 .7em;
  font-size: .86rem;
  color: var(--tinte-leise);
  display: flex;
  align-items: baseline;
  gap: .35em;
  flex-wrap: wrap;
}
.ordnung .ikn {
  width: .95em;
  height: .95em;
  align-self: center;
  flex: none;
}
.weitere > summary {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinte-leise);
  padding: .3em .2em;
  list-style: none;
}
.weitere > summary::-webkit-details-marker {
  display: none;
}
.weitere > summary::before {
  content: "＋";
  font-weight: 400;
}
.weitere[open] > summary::before {
  content: "−";
}
.weitere > summary:hover {
  color: var(--tinte);
}
.weitere > .chips {
  margin-top: .5em;
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .34em .8em;
  background: var(--flaeche);
  border-radius: var(--r-voll-rolle);
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  cursor: pointer;
}
.chip:hover {
  color: var(--tinte);
}
.chip small {
  color: var(--tinte-leise);
  font-weight: 500;
}
.chip.leer {
  background: transparent;
}
.chip.klein {
  padding: .18em .6em;
}
/* ---------- Startseite ---------- */
.held {
  max-width: 40rem;
}
/* Das große Motiv ist raus: es lärmte. */
.suchform {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
}
.suchform input[type=search] {
  flex: 1;
  min-width: 0;
  padding: .72em 1.05em;
  border-radius: var(--r-voll-rolle);
  background: var(--flaeche);
  font: inherit;
  color: var(--tinte);
}
.suchform input[type=search]::placeholder {
  color: var(--tinte-leise);
}
.suchform input[type=search]:focus {
  outline: none;
}
.suchform.gross input[type=search] {
  font-size: 1.05rem;
}
.suchform .ikon {
  cursor: pointer;
  border-radius: var(--r-voll-rolle);
}
.heldknoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1.1em;
}
.vorschlaege {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.vorschlaege a {
  display: block;
  padding: .55em .9em;
  text-decoration: none;
  color: var(--tinte);
  border-bottom: 1px solid var(--rand);
  font-size: .93rem;
}
.vorschlaege a:last-child {
  border-bottom: 0;
}
.vorschlaege a:hover, .vorschlaege a.aktiv {
  background: var(--flaeche-2);
}
.vorschlaege .vunter {
  color: var(--tinte-leise);
}
/* Zahlen: eine Zeile Text, keine Kästen. */
.zahlen {
  display: flex;
  flex-wrap: wrap;
}
.zahl span {
  color: var(--tinte-leise);
  font-size: .84rem;
}
/* Arten: gleich große, flache Kacheln. Die Farbe steckt im Punkt. */
.kacheln {
  display: grid;
  gap: 8px;
}
/* Die Artenkacheln tragen ihre Farbe als getoente Flaeche — das ist die
   Auswahl, mit der ein Besucher anfaengt, und sie darf bunt sein.
   color-mix statt neun weiterer Variablen; wo es fehlt, bleibt die Kachel
   weiss und der Rand faerbt trotzdem. */
.kachel {
  position: relative;
  background: var(--flaeche);
  border-radius: var(--r-karte);
  text-decoration: none;
  color: var(--tinte);
}
.kachel:hover {
  color: var(--tinte);
}
.kachelunter {
  color: var(--tinte-leise);
}
/* Einträge: eine Liste, kein Kartenstapel. */
.karten {
  display: grid;
  gap: 8px;
}
.eintrag {
  display: flex;
  gap: 0;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  text-decoration: none;
  color: var(--tinte);
}
.eintrag:hover {
  color: var(--tinte);
}
.eintragtext {
  min-width: 0;
  flex: 1;
}
.eintragort {
  display: block;
  color: var(--tinte-leise);
}
.familie {
  margin-top: 3.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rand);
  color: var(--tinte-leise);
  font-size: .92rem;
}
/* ---------- Länder und Listen ---------- */
.laenderliste {
  display: grid;
}
.landzeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  color: var(--tinte);
}
.landzeile small {
  color: var(--tinte-leise);
}
.blaettern {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  color: var(--tinte-leise);
}
.lage {
  color: var(--tinte-leise);
}
.block {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  padding: 1.1em 1.2em 1.3em;
}
.block h2 {
  margin: 0 0 .9em;
  font-size: 1.05rem;
}
.karte-klein {
  height: 300px;
  overflow: hidden;
}
.tafel {
  margin: 0;
}
.tafel > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: .45em 0;
  border-bottom: 1px solid var(--rand);
}
.tafel > div:last-child {
  border-bottom: 0;
}
.tafel dt {
  color: var(--tinte-leise);
}
.tafel dd.unklar {
  color: var(--tinte-leise);
}
.fragen summary {
  cursor: pointer;
  font-weight: 700;
  padding: .85em 0;
}
.fragen p {
  margin-top: 0;
}
/* ---------- Karte -------------------------------------------------------
   WARUM #karte UND .vollkarte: MapLibre hängt dem Behälter seine eigene
   Klasse `.maplibregl-map` an, und maplibre-gl.css setzt darauf
   `position: relative` — gleiche Spezifität, und das Fremdstylesheet wird
   NACH diesem geladen. Folge (07.09.2026 live erlebt): Der Behälter verliert
   seine Verankerung und fällt auf Höhe 0 zusammen, die Karte ist unsichtbar.
   Deshalb die höhere Spezifität und die echte min-height.
   `--kopf` setzt app.js auf die gemessene Kopfhöhe — feste Pixelwerte gingen
   jedes Mal daneben, wenn die Kopfzeile umbrach.
   ---------------------------------------------------------------------- */
.kartenseite {
  overflow: hidden;
}
.kartenmain {
  position: relative;
}
#karte.vollkarte {
  position: fixed;
  inset: 0;
  top: var(--kopf);
  min-height: calc(100vh - var(--kopf));
}
.kartelaedt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--tinte-leise);
}
/* Kartenbedienung. Leitgedanke: Die KARTE ist der Inhalt — alles, was
   darueberliegt, muss klein bleiben oder wegzuklappen sein. Auf dem Handy lag
   vorher der Suchkasten mitsamt Trefferliste ueber der halben Karte und die
   Legende zusaetzlich darueber; beide hatten z-index 30 und ueberlappten sich.
   Jetzt: oben nur die Suchzeile, unten ein Blatt mit den Treffern, Legende erst
   ab 900 px, Filter auf dem Handy als ganzflaechiges Blatt mit eigenem Fuss. */
.kartekopf {
  position: fixed;
  top: calc(var(--kopf) + 10px);
  left: 10px;
  right: 10px;
  z-index: 30;
  width: auto;
  max-width: 380px;
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  padding: 7px;
}
.filterkopf {
  display: none;
}
.filterinhalt {
  display: contents;
}
.filterkasten {
  padding: 6px 4px 0;
}
.filtergruppe h3 {
  margin: .9em 0 .4em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 800;
}
.filterzahl {
  color: var(--auf-marke);
  border-radius: var(--r-voll-rolle);
  padding: 0 .4em;
}
.filterfuss #filterfertig {
  margin-left: auto;
}
/* Trefferblatt: sitzt unten, hat einen eigenen Rollbereich und laesst sich
   auf den Kopf zusammenklappen (Klasse "zu"), ohne zu verschwinden. */
.kartetreffer {
  position: fixed;
  z-index: 29;
  left: 10px;
  bottom: 10px;
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(46vh, 440px);
}
.trefferkopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  border-bottom: 1px solid var(--rand);
  flex: none;
}
.trefferzahl {
  flex: 1;
}
.trefferzu {
  flex: none;
}
.trefferliste {
  display: grid;
  gap: 6px;
  padding: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kartetreffer.zu {
  max-height: none;
}
.kartetreffer.zu .trefferliste {
  display: none;
}
.kartetreffer.zu .trefferkopf {
  border-bottom: 0;
}
.kartelegende {
  position: fixed;
  z-index: 28;
  border: 1px solid var(--rand);
  border-radius: var(--r-voll-rolle);
  padding: .4em 1em;
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100vw - 24px);
}
.legendepunkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--f);
  display: inline-block;
}
.blase {
  min-width: 190px;
}
.blasemerkmale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.maplibregl-popup-content {
  border: 1px solid var(--rand);
}
.maplibregl-ctrl-group {
  border-radius: var(--r-chip) !important;
}
/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--rand);
  margin-top: 3.5em;
}
.fussinnen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 28px clamp(14px, 4vw, 28px) 40px;
}
.fussmarke {
  font-size: 1.15rem;
}
.fussslogan {
  font-size: .88rem;
  color: var(--tinte-leise);
  font-weight: 500;
}
.fussquelle {
  color: var(--tinte-leise);
  font-size: .8rem;
}
.fussnav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .9rem;
  font-weight: 700;
}
/* ---------- Schmale Bildschirme --------------------------------------- */
@media (max-width: 900px) {
/* Menü hinter dem Knopf — aber nur, wenn JavaScript da ist und es
     wieder aufklappen kann. */
.mitjs .menuknopf {
  display: inline-flex;
}
.mitjs .leiste[hidden] {
  display: none;
}
.mitjs .leiste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  padding: 6px clamp(14px, 4vw, 28px) 12px;
}
.mitjs .leiste a {
  padding: .7em .6em;
  border-radius: var(--r-chip);
  font-size: 1rem;
}
.sprachwahl {
  order: 3;
}
}
/* Auf grossen Schirmen bleibt der Filter im Kasten und bekommt seinen
   Rollbereich zurueck — sonst waechst er bei vielen Gruppen unten aus dem
   Fenster heraus (gemessen: 1009 px Unterkante bei 900 px Fensterhoehe) und
   schiebt sich ueber das Trefferblatt. */
@media (min-width: 900px) {
.kartekopf {
  max-height: calc(100vh - var(--kopf) - 130px);
  overflow-y: auto;
}
}
/* --- Karte auf kleinen Schirmen --- */
@media (max-width: 899px) {
/* Die Legende erklaert nur Farben, die an jedem Treffer und an jedem
     Filterchip ohnehin stehen — auf dem Handy kostet sie Platz und lag
     buchstaeblich ueber der Trefferliste. */
.kartelegende.nurgross {
  display: none;
}
/* Filter als Blatt ueber der ganzen Flaeche: Kopf mit Titel und Kreuz,
     darunter der Rollbereich, unten fest "Zuruecksetzen" und "Fertig". */
.kartekopf:has(#filter:not([hidden])) {
  top: var(--kopf);
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.kartekopf:has(#filter:not([hidden])) .suchform {
  margin: 8px 8px 0;
}
#filter:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 0 12px;
}
#filter .filterkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 6px;
  flex: none;
}
#filter .filterkopf h2 {
  margin: 0;
  font-size: 1.05rem;
}
#filter .filterinhalt {
  display: block;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  overscroll-behavior: contain;
}
#filter .filterfuss {
  flex: none;
  margin: 0;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
/* Solange der Filter offen ist, hat die Trefferliste nichts zu suchen. */
body.filteroffen .kartetreffer {
  display: none;
}
.kartetreffer {
  left: 8px;
  right: 8px;
  width: auto;
  bottom: calc(8px + env(safe-area-inset-bottom));
  max-height: 42vh;
}
}
@media (prefers-reduced-motion: reduce) {
* {
  transition: none !important;
  animation: none !important;
}
}
/* ---------- Meldeformular ----------
 * Ein Formular ohne JavaScript: Die Seite hat keine Inline-Skripte (CSP), und
 * eine Meldung muss auch dann durchgehen, wenn im Bus das Skript haengt.
 * Form bleibt die der Seite: ein Rahmen, ein Radius, ein Schatten. */
.formular {
  max-width: 42rem;
  margin-bottom: 2.4em;
}
.formular .feld {
  margin-bottom: 1.15em;
}
.formular label, .formular legend {
  display: block;
  margin-bottom: .35em;
}
.formular fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.15em;
}
.formular input[type=text], .formular input[type=email] {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border-radius: var(--r-chip);
  padding: .62em .85em;
}
.formular input:focus, .formular textarea:focus {
  outline: none;
}
.formular input::placeholder, .formular textarea::placeholder {
  color: var(--tinte-leise);
}
.wahlreihe {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}
.wahlreihe .chip.wahl {
  margin: 0;
}
/* Honigtopf: fuer Menschen unsichtbar, aber im Baum vorhanden — ein
   display:none oder das hidden-Attribut wuerde jeder Roboter erkennen. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.danke {
  max-width: 42rem;
  border-radius: var(--r-karte);
  padding: 1.2em 1.4em;
}
.dankekopf {
  margin: 0 0 .4em;
}
.danke p {
  margin: 0 0 .7em;
}
.danke p:last-child {
  margin-bottom: 0;
}
/* Adressen brechen notfalls mitten im Wort um: eine lange URL sprengte sonst
   die Tafel auf der Detailseite (rechtsbuendig, schmale Spalte). Die Anzeige
   kuerzt schon kurzlink() in main.py — das hier ist der Sicherheitsgurt. */
.text a {
  overflow-wrap: anywhere;
}
/* Startseiten-Knoepfe: auf schmalen Schirmen ein Raster statt flex-wrap.
   Vier verschieden breite Knoepfe brachen sonst unregelmaessig um (einer oben,
   zwei daneben, einer allein) — das sah aus wie hingefallen. Zwei gleich
   breite Spalten, und ein einzeln bleibender letzter nimmt die ganze Zeile. */
@media (max-width: 599px) {
.heldknoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  /* Gleiche Zeilenhoehen: sonst wird die Zeile mit dem umbrechenden Text hoeher als die andere und das Raster wirkt wieder schief. */
  grid-auto-rows: 1fr;
}
.heldknoepfe .knopf {
  /* Sinnbild ueber die Beschriftung: Bricht der Text um ("Standort verwenden"), stuende es sonst allein links neben zwei Zeilen und der Knopf saehe schief aus. Uebereinander sind alle vier gleich. */
  flex-direction: column;
  gap: var(--ab-1);
  justify-content: center;
  text-align: center;
  padding-top: .7em;
  padding-bottom: .7em;
  padding-left: .7em;
  padding-right: .7em;
  /* Ohne beides sprengt der laengste Beschriftungstext seine Spalte: nowrap erzwingt die Breite, min-width:auto laesst 1fr nicht schrumpfen. Gemessen: 198 px statt 168 px, der rechte Rand war weg. */
  min-width: 0;
  white-space: normal;
}
.heldknoepfe .knopf:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
/* Das Suchfeld bekommt die volle Breite, der Knopf darunter — nebeneinander
     bleibt vom Feld auf 360 px nichts uebrig. */
.suchform.gross {
  flex-wrap: wrap;
}
.suchform.gross input[type=search] {
  flex: 1 1 100%;
}
.suchform.gross > .knopf {
  flex: 1 1 100%;
  justify-content: center;
}
}
/* --- Knopf ---------------------------------------------------------
   Ein Bauteil, drei Lautstaerken (primaer / sekundaer / leise) und eine
   kleine Groesse. `.btn` ist derselbe Knopf unter lido.earths Namen. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-2);
  padding: var(--knopf-y) var(--knopf-x);
  border-radius: var(--r-voll-rolle);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.btn.klein {
  padding: var(--knopf-y-klein) var(--knopf-x-klein);
  font-size: .89rem;
}
/* Sinnbild im Knopf. Gezeichnet, nicht als Emoji: nur so nimmt es die
   Farbe des Knopfes an (currentColor) und passt sich dem Thema an —
   und sieht auf jedem Geraet gleich aus. Nie mitgelesen (aria-hidden),
   die Beschriftung steht daneben. */
.ikn {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: inline-block;
  vertical-align: -.18em;
  color: inherit;
}
.knopf .ikn, .btn .ikn {
  width: 1.2em;
  height: 1.2em;
}
/* --- Abschnittsabstand ---------------------------------------------
   Ein Wert fuer den Abstand zwischen zwei Abschnitten, nicht sieben. */
.inhalt > section + section, .inhalt > section + h2 {
  margin-top: var(--ab-7);
}
/* Thema: Die Sinnbilder der grossen Startknoepfe tragen den Akzent —
   ludo darf bunt sein, aber geordnet: EINE Akzentfarbe, nicht neun. */
.heldknoepfe .knopf .ikn {
  width: 1.55em;
  height: 1.55em;
}

/* ===========================================================================
   Familienschliff — die Bauteile, die auf allen drei Karten gleich sind.

   Dieser Abschnitt steht am Ende, weil er die gewachsenen Eigenheiten der
   einzelnen Seiten überstimmt. Alles hier ist Aufbau: Maß, Abstand, Zustand.
   Farbe und Schrift kommen weiterhin ausschließlich aus den Merkmalen, die
   jede Seite in ihrem thema.css setzt.

   Leitsatz: Inhalt zuerst, Karte zuerst, Suche zuerst. Die Marke schafft
   Orientierung und darf den Inhalt nicht zudecken.
   ======================================================================== */

/* ---------- Typografie ---------------------------------------------------
   Eine Leiter, keine Sammlung von Einzelfällen. Display und H1 wachsen mit
   der Breite, der Fließtext bleibt bei 16–17px: kleiner wird auf dem Handy
   nichts mehr gelesen. */
body {
  font-family: var(--schrift);
  font-size: var(--t-body);
  line-height: var(--zeilen-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--schrift-kopf);
  letter-spacing: var(--sperrung-kopf);
  line-height: var(--zeilen-eng);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 700; margin: 0 0 .35em; }
h2 { font-size: var(--t-h2); font-weight: 700; margin: 2em 0 .7em; }
h3 { font-size: var(--t-h3); font-weight: 650; margin: 1.4em 0 .4em; }
.text, .fliesstext { max-width: var(--lesebreite); }

/* ---------- Kopf ---------------------------------------------------------
   Höchstens 72px, eine sehr dezente Linie darunter, kein Schatten. Wer
   scrollt, soll die Karte sehen und nicht den Kopf. */
.kopf {
  display: flex;
  align-items: center;
  gap: var(--ab-4);
  min-height: 64px;
  padding: var(--ab-3) clamp(14px, 4vw, 28px);
  border-bottom: 1px solid var(--rand);
  box-shadow: none;
}
.marke { display: inline-flex; align-items: center; gap: var(--ab-2); flex: none; }
.logo { width: 32px; height: 32px; flex: none; }
.wortmarke {
  font-family: var(--schrift-kopf);
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: var(--sperrung-kopf);
}
/* Der Name trägt das Gewicht, die Endung tritt zurück. */
.wortmarke b { font-weight: 750; }
.wortmarke .endung { font-weight: 400; opacity: .72; }
.leiste a {
  padding: var(--ab-2) var(--ab-3);
  border-radius: var(--r-chip);
  font-size: var(--t-klein);
  font-weight: 550;
}
.sprachwahl { gap: var(--ab-1); }
.sprachwahl a {
  padding: .3em .5em;
  border-radius: var(--radius-xs);
  font-size: var(--t-meta);
}

/* ---------- Berührungsflächen -------------------------------------------
   44×44px ist kein Richtwert, sondern die Größe einer Fingerkuppe. */
.leiste a, .menuknopf, .knopf, .chip, .sprachwahl a, .kartenknopf, .marke {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Ein kleiner Chip darf schmaler sein — er steht in einer Reihe mit
   anderen, und die Reihe selbst ist hoch genug zum Treffen. Alles, was
   allein steht, bleibt bei 44. */
.chip.klein { min-height: 38px; }

/* ---------- Knöpfe -------------------------------------------------------
   Drei Stufen, ein Radius. Pillen gibt es nur für Filter und Zustände. */
.knopf {
  gap: var(--ab-2);
  padding: var(--knopf-y) var(--knopf-x);
  border-radius: var(--radius-sm);
  font-size: var(--t-klein);
  font-weight: 600;
  transition: background-color var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve);
}
.knopf.klein {
  padding: var(--knopf-y-klein) var(--knopf-x-klein);
  font-size: var(--t-meta);
}

/* ---------- Chips --------------------------------------------------------
   Weiß mit grauer Linie; gewählt wird eine helle Markenfläche mit
   Markenschrift. Kein voller Farbklecks — es sind Filter, keine Knöpfe. */
.chip {
  gap: var(--ab-2);
  padding: .42em .85em;
  border-radius: var(--radius-voll);
  font-size: var(--t-klein);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  transition: border-color var(--zeit-schnell) var(--kurve),
              background-color var(--zeit-schnell) var(--kurve);
}
.chip.klein { padding: .3em .7em; font-size: var(--t-meta); }
.chip.wahl:has(input:checked) {
  background: var(--brand-flaeche);
  border-color: var(--brand-800);
  color: var(--brand-800);
  font-weight: 650;
  box-shadow: none;
}

/* ---------- Karten -------------------------------------------------------
   Eine Karte liegt auf dem Grund. Sie bekommt erst beim Zeigen einen
   Schatten, und auch dann nur einen leisen. */
.eintrag, .kachel, .block, .danke, .karte-klein {
  border-radius: var(--radius-md);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  box-shadow: none;
  transition: transform var(--zeit-schnell) var(--kurve),
              border-color var(--zeit-schnell) var(--kurve),
              box-shadow var(--zeit-schnell) var(--kurve);
}
.eintragtext { padding: var(--ab-4); }
.kachel { padding: var(--ab-4); }
.block { padding: var(--ab-5); }
.eintrag img, .eintrag picture img { border-radius: var(--radius-sm); }
@media (hover: hover) {
  .eintrag:hover, .kachel:hover {
    transform: translateY(-2px);
    border-color: var(--rand-stark);
    box-shadow: var(--shadow-sm);
  }
}
.kacheln { gap: var(--ab-3); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.karten { gap: var(--ab-3); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.laenderliste { gap: var(--ab-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.landzeile { gap: var(--ab-3); padding: var(--ab-3); border-radius: var(--radius-sm); }

/* ---------- Formulare ----------------------------------------------------
   48px hoch, sichtbarer Rand, deutlicher Fokus. Ein Platzhalter ist kein
   Etikett — die Beschriftung bleibt stehen. */
.formular input, .formular select, .formular textarea,
.suchform input[type=search] {
  min-height: 48px;
  padding: var(--ab-3) var(--ab-4);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-sm);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: var(--t-body);
}
.suchform.gross input[type=search] { min-height: 56px; font-size: 1.0625rem; }
.formular textarea { min-height: 120px; }
.formular label { font-size: var(--t-klein); font-weight: 600; }

/* ---------- Fokus --------------------------------------------------------
   Ein durchgehender Ring, überall gleich, immer sichtbar. */
/* Der Ring steht auf --brand-800, nicht auf --brand-600: gegen Weiss
   erreicht die mittlere Stufe auf keiner der drei Marken die 3:1, die ein
   Fokusring nach WCAG 2.2 braucht (gemessen: 1,9 / 3,0 / 2,6). */
:focus-visible {
  outline: 2px solid var(--brand-800);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- Inhalt und Abstände ----------------------------------------- */
.inhalt {
  padding: var(--ab-6) clamp(14px, 4vw, 28px) var(--ab-9);
  max-width: var(--breit);
}
.seitenkopf { margin-bottom: var(--ab-5); }
.brot { margin-bottom: var(--ab-3); font-size: var(--t-meta); }
.unter { margin: var(--ab-1) 0 var(--ab-4); color: var(--tinte-leise); }
.filterzeile { margin: 0 0 var(--ab-5); }
.blaettern { gap: var(--ab-3); margin-top: var(--ab-6); }
.weitere { margin-top: var(--ab-4); }

/* ---------- Kartenbedienung ---------------------------------------------
   Runde Flächen, 44px, weiße Oberfläche, eine Linie, ein leiser Schatten.
   Keine schwebende Bedienflut über der Karte. */
.kartenknopf, .maplibregl-ctrl button {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  box-shadow: var(--shadow-sm);
}

/* ---------- Leere und Fehler --------------------------------------------
   Keine Sackgasse: Jeder leere Zustand nennt den nächsten Schritt. */
.leerzustand, .fehlerzustand {
  text-align: center;
  padding: var(--ab-8) var(--ab-4);
  max-width: 42rem;
  margin-inline: auto;
}
.leerzustand h2, .fehlerzustand h2 { margin-top: 0; }
.leerzustand p, .fehlerzustand p { color: var(--tinte-leise); }
.leerzustand .knoepfe, .fehlerzustand .knoepfe {
  justify-content: center;
  margin-top: var(--ab-5);
}

/* ---------- Ladezustand --------------------------------------------------
   Platzhalter statt Sprung: Das Gerüst steht schon, bevor die Daten da
   sind. */
.geruest {
  background: linear-gradient(90deg, var(--flaeche-2) 25%,
              var(--rand) 37%, var(--flaeche-2) 63%);
  background-size: 400% 100%;
  animation: geruest 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes geruest {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .geruest { animation: none; }
}

/* ---------- Schmale Bildschirme -----------------------------------------
   Ab hier trägt der Daumen die Bedienung. Nichts darf quer laufen. */
@media (max-width: 560px) {
  .inhalt { padding-top: var(--ab-5); }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .karten, .laenderliste { grid-template-columns: 1fr; }
  h2 { margin-top: 1.6em; }
}
html, body { overflow-x: clip; }

/* ---------- Startseite: Frage, Suche, Schnelleinstiege -------------------
   Die Beschriftung über dem Suchfeld ist eine Frage, keine Wiederholung des
   Platzhalters. Sie sagt, was man hier tut, und sie bleibt stehen, wenn
   getippt wird — ein Platzhalter verschwindet genau dann, wenn man ihn noch
   bräuchte. */
.suchfrage {
  display: block;
  margin: 0 0 var(--ab-3);
  font-family: var(--schrift-kopf);
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: var(--sperrung-kopf);
  color: var(--tinte);
}
.schnell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2);
  margin-top: var(--ab-4);
}
.schnell .chip { text-decoration: none; color: var(--tinte); }
@media (hover: hover) {
  .schnell .chip:hover {
    border-color: var(--brand-800);
    background: var(--brand-flaeche);
    color: var(--brand-800);
  }
}
/* Der Held trägt nur noch Text, Suche und Einstiege — keine halbe
   Bildschirmhöhe Dekoration. */
.held { padding-block: var(--ab-6) var(--ab-5); max-width: 46rem; }
.held .unter { margin-bottom: var(--ab-5); max-width: var(--lesebreite); }
.heldknoepfe { display: flex; flex-wrap: wrap; gap: var(--ab-2); margin-top: var(--ab-4); }